Macintosh-Tools/jurassic-park-interface
1
0
Fork 0
mirror of https://github.com/Max-Stevenson/jurassic-park-interface.git synced 2024-06-14 03:29:31 +00:00
Code Issues Projects Releases Wiki Activity

Duplicated functionality for bottom control panel.

Browse Source 
- Need to refactor into generic tab function.
This commit is contained in:
Max Stevenson 2020-06-22 23:00:55 +01:00
parent 77ec8363f8
commit 6bc1d42b45
2 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -504,8 +504,10 @@
</div>
</div>
<div class="control-panel__button-display">
<div class="button__depressed">
<p class="button-text__embossed small-button">glitches</p>
<div class="buttons button__depressed">
<div class="">
<p class="button-text__embossed small-button">glitches</p>
</div>
</div>
<div class="outer-edge__light buttons">
<div class="inner-edge__light">

52
public/scripts/app.js
View File

@ -128,6 +128,41 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
}
////////////////////////
// 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");
});
}
////////////////////////
// Video screen tab change
const changeScreenContent = event => {
let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
@ -167,16 +202,30 @@ const initCircuitBreakers = () => {
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 = () => {
@ -193,6 +242,7 @@ const resetCircuitBreakers = () => {
breakerOnButtons[i].style.backgroundColor = "#1F1115";
breakerOffButtons[i].style.backgroundColor = "#1F1115";
breakerOnButtons[i].removeEventListener("click", handleBreakerOn);
breakerOffButtons[i].removeEventListener("click", handleBreakerOff);
}
};
////////////////////////
@ -212,4 +262,4 @@ trashIcon.addEventListener("click", () => {
trashModal.classList.remove("modal-inactive");
trashModal.classList.add("modal-active");
});
///////////////////
///////////////////