jurassic-park-interface/public/scripts/app.js

// Timer
const startTimer = (duration, display) => {
  let timer = duration,
    minutes,
    seconds;
  setInterval(function() {
    minutes = parseInt(timer / 60, 10);
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if (--timer < 0) {
      timer = duration;
    }
  }, 1000);
};

document.getElementById("start-timer").addEventListener("click", () => {
  const twoMinutes = 60 * 2;
  const display = document.getElementById("countdown-timer__display");
  startTimer(twoMinutes, display);
  document.getElementById("start-timer").disabled = true;
});
////////////////////////

// Enable Instructions
const loadInstructions = instructionArr => {
  const instructionsDisplay = document.querySelector(
    ".instructions-text__content"
  );
  instructionsDisplay.innerHTML = `${instructionArr[0]}<br><br>${
    instructionArr[1]
  }`;
};

const advanceInstructions = () => {};

const getCurrentInstructionIdx = () => {};

const showNextStep = (instructionArr, instructionStep) => {
  const instructionsDisplay = document.querySelector(
    ".instructions-text__content"
  );

  if (instructionStep < instructionArr.length) {
    instructionsDisplay.innerHTML = `${instructionArr[instructionStep]}`;
  }
};

const enablePower = () => {
  let instructionStep = 1;
  const powerInstructionsArr = [
    `Your first step is to help restore power to the main systems of the park. Lucky for you the physical fusebox has been replaced and is now a virtual interface that is running on backup power, but you'll still need to follow the steps to get full power on again.`,
    `Begin by toggling the breaker switches until the current voltage matches the required voltage.`,
    `Good the next step is to charge the breaker capacitor - push the yellow button.`,
    `Now, under the words "contact position" there's a round green button that says "push to close!", push it!`,
    `Final step. The red buttons turn on the individual park systems. Switch them on.`
  ];

  loadInstructions(powerInstructionsArr);
  // Voltage toggles
  const voltageDisplay = document.getElementById("current-voltage");
  const voltageToggleInputs = document.querySelectorAll('input[type="radio"]');
  let alreadyAdvanced = false;

  const updateVoltage = () => {
    let targetVoltage = 220;
    let totalVoltage = 0;
    for (let i = 0; i < voltageToggleInputs.length; i++) {
      if (voltageToggleInputs[i].checked) {
        totalVoltage += parseInt(voltageToggleInputs[i].value);
      }
    }
    voltageDisplay.innerHTML = totalVoltage;
    if (totalVoltage === targetVoltage && !alreadyAdvanced) {
      instructionStep++;
      showNextStep(powerInstructionsArr, instructionStep);
      alreadyAdvanced = true;
    }
  };

  for (let i = 0; i < voltageToggleInputs.length; i++) {
    voltageToggleInputs[i].addEventListener("click", event => {
      updateVoltage();
    });
  }

  updateVoltage();
  ////////////////////////
  // Charge code
  const chargeButton = document.getElementById("power-charge");
  const chargeStatus = document.getElementById("charge-status");
  const targetVoltage = 220;
  chargeButton.addEventListener("click", () => {
    let currentVoltage = parseInt(voltageDisplay.innerHTML);
    if (currentVoltage === targetVoltage) {
      chargeStatus.innerHTML = "Charged";
      chargeStatus.style.backgroundColor = "#f6e100";
    } else {
      chargeStatus.innerHTML = "Discharged";
    }
  });
  ////////////////////////

  // Contact code
  const closeButton = document.getElementById("power-close");
  const breakerStatus = document.getElementById("contact-status");
  closeButton.addEventListener("click", () => {
    if (chargeStatus.innerHTML === "Charged") {
      breakerStatus.innerHTML = "Closed";
      breakerStatus.style.backgroundColor = "red";
      chargeStatus.innerHTML = "Discharged";
      chargeStatus.style.backgroundColor = "white";
      initCircuitBreakers();
    }
  });
  ////////////////////////

  // Circuit Breaker Init
  const initCircuitBreakers = () => {
    const breakerWrappers = document.getElementsByClassName(
      "breaker-label__wrapper"
    );
    const breakerLabels = document.getElementsByClassName(
      "breaker-label__text"
    );
    const breakerOnButtons = document.getElementsByClassName("breaker-on");
    const breakerOffButtons = document.getElementsByClassName("breaker-off");

    for (let i = 0; i < breakerWrappers.length; i++) {
      breakerOffButtons[i].style.backgroundColor = "#99E3C0";
      breakerLabels[i].style.backgroundColor = "#c2a693";
      breakerOnButtons[i].addEventListener("click", handleBreakerOn);
      breakerOffButtons[i].addEventListener("click", handleBreakerOff);
    }
  };
  ////////////////////////

  // Breaker On
  const handleBreakerOn = event => {
    event.target.parentElement.lastElementChild.style.backgroundColor =
      "#1F1115";
    event.target.parentElement.nextElementSibling.style.backgroundColor =
      "#C23457";
    event.target.style.backgroundColor = "#E40141";
  };
  ////////////////////////

  // Breaker Off
  const handleBreakerOff = event => {
    event.target.parentElement.firstElementChild.style.backgroundColor =
      "#1F1115";
    event.target.parentElement.lastElementChild.style.backgroundColor =
      "rgb(153, 227, 192)";
    event.target.parentElement.nextElementSibling.style.backgroundColor =
      "#1F1115";
  };
  ////////////////////////

  // Circuit Breaker Reset
  const resetCircuitBreakers = () => {
    alreadyAdvanced = false;
    instructionStep = 1;
    loadInstructions(powerInstructionsArr);
    const breakerWrappers = document.getElementsByClassName(
      "breaker-label__wrapper"
    );
    const breakerLabels = document.getElementsByClassName(
      "breaker-label__text"
    );
    const breakerOnButtons = document.getElementsByClassName("breaker-on");
    const breakerOffButtons = document.getElementsByClassName("breaker-off");

    for (let i = 0; i < breakerWrappers.length; i++) {
      breakerWrappers[i].style.backgroundColor = "#1F1115";
      breakerLabels[i].style.backgroundColor = "#37291f";
      breakerOnButtons[i].style.backgroundColor = "#1F1115";
      breakerOffButtons[i].style.backgroundColor = "#1F1115";
      breakerOnButtons[i].removeEventListener("click", handleBreakerOn);
      breakerOffButtons[i].removeEventListener("click", handleBreakerOff);
    }
  };
  ////////////////////////

  // Open code
  const openButton = document.getElementById("power-open");
  openButton.addEventListener("click", () => {
    if (breakerStatus.innerHTML === "Closed") {
      breakerStatus.innerHTML = "Open";
      breakerStatus.style.backgroundColor = "#148e42";
      for (let i = 0; i < voltageToggleInputs.length; i++) {
        if (i % 2 === 0) {
          voltageToggleInputs[i].click();
        }
      }
    }
    resetCircuitBreakers();
  });
  ////////////////////////
};
enablePower();
////////////////////////

// Control panel buttons
const topControlPanelButtons = document.getElementsByClassName(
  "control-panel__button-display"
)[0].children;
for (let i = 0; i < topControlPanelButtons.length; i++) {
  let button = topControlPanelButtons[i];
  button.addEventListener("click", event => {
    for (let k = 0; k < topControlPanelButtons.length; k++) {
      let prevButton = topControlPanelButtons[k];
      if (prevButton.classList.contains("button__depressed")) {
        prevButton.classList.remove("button__depressed");
        prevButton.classList.add("outer-edge__light");
        prevButton.firstElementChild.classList.add("inner-edge__light");
        prevButton.firstElementChild
          .querySelector("p")
          .classList.remove("button-text__embossed");
        prevButton.firstElementChild
          .querySelector("p")
          .classList.add("button-text__engraved");
      }
    }
    button.classList.add("button__depressed");
    button.classList.remove("outer-edge__light");
    button.firstElementChild.classList.remove("inner-edge__light");
    button.firstElementChild
      .querySelector("p")
      .classList.add("button-text__embossed");
    button.firstElementChild
      .querySelector("p")
      .classList.remove("button-text__engraved");
    changeScreenContent(event);
  });
}
////////////////////////

// Bottom control panel buttons
const bottomControlPanelButtons = document.getElementsByClassName(
  "control-panel__button-display"
)[1].children;
for (let i = 0; i < bottomControlPanelButtons.length; i++) {
  let button = bottomControlPanelButtons[i];
  button.addEventListener("click", event => {
    for (let k = 0; k < bottomControlPanelButtons.length; k++) {
      let prevButton = bottomControlPanelButtons[k];
      if (prevButton.classList.contains("button__depressed")) {
        prevButton.classList.remove("button__depressed");
        prevButton.classList.add("outer-edge__light");
        prevButton.firstElementChild.classList.add("inner-edge__light");
        prevButton.firstElementChild
          .querySelector("p")
          .classList.remove("button-text__embossed");
        prevButton.firstElementChild
          .querySelector("p")
          .classList.add("button-text__engraved");
      }
    }
    button.classList.add("button__depressed");
    button.classList.remove("outer-edge__light");
    button.firstElementChild.classList.remove("inner-edge__light");
    button.firstElementChild
      .querySelector("p")
      .classList.add("button-text__embossed");
    button.firstElementChild
      .querySelector("p")
      .classList.remove("button-text__engraved");
    changeBottomScreenContent(event);
  });
}

////////////////////////

// Video screen tab change
const changeScreenContent = event => {
  let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
  const mainDisplayElements = document.getElementsByClassName("main-display");
  const tabContentElements = document.getElementsByClassName(
    "video-screen__tab-content"
  );

  for (let i = 0; i < tabContentElements.length; i++) {
    if (tabContentElements[i].id === `video-screen__${selectedTab}`) {
      tabContentElements[i].style.display = "flex";
    } else {
      tabContentElements[i].style.display = "none";
    }
  }

  for (let i = 0; i < mainDisplayElements.length; i++) {
    if (mainDisplayElements[i].id === `${selectedTab}-display__inner`) {
      mainDisplayElements[i].style.display = "flex";
    } else {
      mainDisplayElements[i].style.display = "none";
    }
  }
};
////////////////////////

// Change Bottom Video Screen
const changeBottomScreenContent = event => {
  let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();

  const mainDisplayElements = document.getElementsByClassName("main-display");
  const tabContentElements = document.getElementsByClassName(
    "ouput-display__wrapper"
  );

  for (let i = 0; i < tabContentElements.length; i++) {
    if (tabContentElements[i].id === `video-screen__${selectedTab}`) {
      tabContentElements[i].style.display = "flex";
    } else {
      tabContentElements[i].style.display = "none";
    }
  }

  for (let i = 0; i < mainDisplayElements.length; i++) {
    if (mainDisplayElements[i].id === `${selectedTab}-display__inner`) {
      mainDisplayElements[i].style.display = "flex";
    } else {
      mainDisplayElements[i].style.display = "none";
    }
  }
};
////////////////////////

// Trash modal
const trashIcon = document.getElementById("trash-icon");

trashIcon.addEventListener("click", () => {
  const trashModal = document.getElementById("trash-modal");
  const trashModalCloseButton = document.getElementById(
    "modal-container__close-button"
  );
  trashModalCloseButton.addEventListener("click", () => {
    trashModal.classList.remove("modal-active");
    trashModal.classList.add("modal-inactive");
  });
  trashModal.classList.remove("modal-inactive");
  trashModal.classList.add("modal-active");
});
///////////////////