Macintosh-Tools
/
jurassic-park-interface
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

More refactoring 

- Move power code into enablePower function.
This commit is contained in:
Max Stevenson 2020-08-17 20:50:07 +01:00
parent 4a0032b58f
commit c9d8e317f8
1 changed files with 72 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
public/scripts/app.js
View File

@ -45,7 +45,9 @@ const showNextStep = (instructionArr, instructionStep) => {
".instructions-text__content"
);
instructionsDisplay.innerHTML = `${instructionArr[instructionStep]}`;
if (instructionStep < instructionArr.length) {
instructionsDisplay.innerHTML = `${instructionArr[instructionStep]}`;
}
};
const enablePower = () => {
@ -62,6 +64,7 @@ const enablePower = () => {
// Voltage toggles
const voltageDisplay = document.getElementById("current-voltage");
const voltageToggleInputs = document.querySelectorAll('input[type="radio"]');
let alreadyAdvanced = false;
const updateVoltage = () => {
let targetVoltage = 220;
@ -72,9 +75,10 @@ const enablePower = () => {
}
}
voltageDisplay.innerHTML = totalVoltage;
if (totalVoltage === targetVoltage) {
if (totalVoltage === targetVoltage && !alreadyAdvanced) {
instructionStep++;
showNextStep(powerInstructionsArr, instructionStep);
alreadyAdvanced = true;
}
};
@ -115,6 +119,72 @@ const enablePower = () => {
});
////////////////////////
// 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", () => {
@ -231,64 +301,6 @@ const changeScreenContent = event => {
};
////////////////////////
// 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 = () => {
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);
}
};
////////////////////////
// Change Bottom Video Screen
const changeBottomScreenContent = event => {
let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();