maybe you want to tie your concourse background to your build status to raise awareness of the current status, GUYS THIS IS IMPORTANT

concourse_bg_funz.js

const pipelineContainer = document.getElementById('pipeline-container');

const PipelineState = {
  BUILDING: 'BUILDING',
  FAILED: 'FAILED',
  PASSING: 'PASSING',
};

const PipelineImages = {
  BUILDING: 'https://ketstatic.cdn.ket.org/wp_transfer/images/BOBL/BOBL__000708.3555962.848x480.jpg',
  FAILED: 'https://pixel.nymag.com/imgs/daily/vulture/2019/06/25/25-this-is-fine-lede-new.w700.h467.jpg',
  PASSING: 'https://www.agoodwaytothink.com/wp-content/uploads/2015/09/everything-is-awesome.jpg',
}

function currentPipelineState() {
  const jobs = Array.from(document.querySelectorAll('.job'));

  const allGreen = () => jobs.every(job => job.classList.contains('succeeded'));
  const currentlyBuilding = () => jobs.some(job => job.classList.contains('started'));
  const anyRed = () => jobs.some(job => job.classList.contains('failed'));

  if (currentlyBuilding()) {
    return PipelineState.BUILDING;
  } else {
    if (anyRed()) {
      return PipelineState.FAILED;
    }
    if (allGreen()) {
      return PipelineState.PASSING;
    }
    // undefined
  }
}

function setBackground() {
  const pipelineState = currentPipelineState();
  const bgImage = PipelineImages[pipelineState];

  if (bgImage) {
    pipelineContainer.style.backgroundImage = `url("${bgImage}")`;
  } else {
    pipelineContainer.style.backgroundImage = 'initial';
  }
}

const observer = new MutationObserver(function whenMutationsOccur(mutations) {
  const hasJobChanged = mutations.some(mutation => mutation.target.classList.contains('job'));
  if (hasJobChanged) {
    setBackground();
  }
});
observer.observe(pipelineContainer, {
  attributes: true,
  attributeFilter: ['class'],
  subtree: true,
});