diff --git a/public/scripts/app.js b/public/scripts/app.js index 4f52fa7..cbe7f3f 100644 --- a/public/scripts/app.js +++ b/public/scripts/app.js @@ -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();