mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2025-02-11 00:31:38 +00:00
WIP on breaker functionality.
This commit is contained in:
Max Stevenson
parent
120b598e14
commit
ce58e95d69
36
index.html
36
index.html
@ -125,12 +125,10 @@
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-on"
|
||||
class="breaker-button breaker-on"
|
||||
></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
class="breaker-button breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
@ -144,12 +142,10 @@
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-on"
|
||||
class="breaker-button breaker-on"
|
||||
></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
class="breaker-button breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
@ -163,12 +159,10 @@
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-on"
|
||||
class="breaker-button breaker-on"
|
||||
></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
class="breaker-button breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
@ -182,12 +176,10 @@
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-on"
|
||||
class="breaker-button breaker-on"
|
||||
></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
class="breaker-button breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
@ -201,12 +193,10 @@
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-on"
|
||||
class="breaker-button breaker-on"
|
||||
></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
class="breaker-button breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
@ -220,12 +210,10 @@
|
||||
<div class="breaker-wrapper">
|
||||
<div class="breaker-buttons__wrapper">
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-on"
|
||||
class="breaker-button breaker-on"
|
||||
></button>
|
||||
<button
|
||||
class="breaker-button"
|
||||
id="breaker-off"
|
||||
class="breaker-button breaker-off"
|
||||
></button>
|
||||
</div>
|
||||
<div class="breaker-label__wrapper">
|
||||
|
||||
@ -72,6 +72,7 @@ closeButton.addEventListener("click", () => {
|
||||
breakerStatus.style.backgroundColor = "red";
|
||||
chargeStatus.innerHTML = "Discharged";
|
||||
chargeStatus.style.backgroundColor = "white";
|
||||
initCircuitBreakers();
|
||||
}
|
||||
});
|
||||
////////////////////////
|
||||
@ -152,6 +153,21 @@ 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++) {
|
||||
breakerWrappers[i].style.backgroundColor = "#C23457";
|
||||
breakerOnButtons[i].style.backgroundColor = "#E40141";
|
||||
breakerLabels[i].style.backgroundColor = "#c2a693";
|
||||
}
|
||||
}
|
||||
////////////////////////
|
||||
|
||||
// Trash modal
|
||||
const trashIcon = document.getElementById("trash-icon");
|
||||
|
||||
|
||||
@ -915,6 +915,14 @@ body {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.breaker-off {
|
||||
background-color: #1F1115;
|
||||
}
|
||||
|
||||
.breaker-on {
|
||||
background-color: #1F1115;
|
||||
}
|
||||
|
||||
.power-screen__breaker-parent {
|
||||
align-self: center;
|
||||
width: fit-content;
|
||||
@ -927,7 +935,7 @@ body {
|
||||
}
|
||||
|
||||
.breaker-label__wrapper {
|
||||
background-color: #C23457;
|
||||
background-color: #1F1115;
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
@ -949,7 +957,7 @@ body {
|
||||
text-transform: uppercase;
|
||||
border: 2px solid black;
|
||||
padding: 4px;
|
||||
background-color: #c2a693;
|
||||
background-color: #37291f;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACtKF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAaF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"styles.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;ACPF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AC/DF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACxDF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACtKF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACzBF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA","file":"styles.css"}
|
||||
@ -9,13 +9,13 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#breaker-off {
|
||||
.breaker-off {
|
||||
// background-color: #99E3C0;
|
||||
// background-color: #1F1115;
|
||||
background-color: #1F1115;
|
||||
}
|
||||
|
||||
#breaker-on {
|
||||
// background-color: #1F1115;
|
||||
.breaker-on {
|
||||
background-color: #1F1115;
|
||||
//background-color: #E40141 - on;
|
||||
}
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
}
|
||||
|
||||
.breaker-label__wrapper {
|
||||
// background-color: #1F1115;
|
||||
background-color: #C23457;
|
||||
background-color: #1F1115;
|
||||
// background-color: #C23457;
|
||||
padding: 10px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
@ -56,7 +56,7 @@
|
||||
text-transform: uppercase;
|
||||
border: 2px solid black;
|
||||
padding: 4px;
|
||||
background-color: #c2a693; // activated
|
||||
background-color: darken($color: #c2a693, $amount: 50%) ; // activated
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user