mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-06-07 17:29:35 +00:00
Halfway through writing voltage puzzle logic - needs more thought.
This commit is contained in:
parent
e95f23d278
commit
f12eb37f6e
152
index.html
152
index.html
|
@ -25,69 +25,99 @@
|
|||
class="inner-edge__light__no-padding main-display main-display__hidden"
|
||||
id="power-display__inner"
|
||||
>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-a"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
checked="checked"
|
||||
/>
|
||||
<input id="toggle-b" type="radio" name="switch-one" />
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
<div class="power-screen__voltage-switches-container">
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-high"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
checked="checked"
|
||||
value="60"
|
||||
/>
|
||||
<input
|
||||
id="toggle-low"
|
||||
type="radio"
|
||||
name="switch-one"
|
||||
value="30"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-high"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
checked="checked"
|
||||
value="80"
|
||||
/>
|
||||
<input
|
||||
id="toggle-low"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
value="20"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-high"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
checked="checked"
|
||||
value="50"
|
||||
/>
|
||||
<input
|
||||
id="toggle-low"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
value="40"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-high"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
checked="checked"
|
||||
value="100"
|
||||
/>
|
||||
<input
|
||||
id="toggle-low"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
value="40"
|
||||
/>
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-a"
|
||||
type="radio"
|
||||
name="switch-two"
|
||||
checked="checked"
|
||||
/>
|
||||
<input id="toggle-b" type="radio" name="switch-two" />
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-a"
|
||||
type="radio"
|
||||
name="switch-three"
|
||||
checked="checked"
|
||||
/>
|
||||
<input id="toggle-b" type="radio" name="switch-three" />
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
</div>
|
||||
<div class="toggle-switch-container">
|
||||
<p>High</p>
|
||||
<div class="toggle-switch switch-vertical">
|
||||
<input
|
||||
id="toggle-a"
|
||||
type="radio"
|
||||
name="switch-four"
|
||||
checked="checked"
|
||||
/>
|
||||
<input id="toggle-b" type="radio" name="switch-four" />
|
||||
<span class="toggle-outside">
|
||||
<span class="toggle-inside"></span>
|
||||
</span>
|
||||
</div>
|
||||
<p>Low</p>
|
||||
<div class="power-screen__votage-output-container">
|
||||
<p>Required voltage: 220V</p>
|
||||
<p>Current voltage: <span id="current-voltage"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
@ -25,6 +25,27 @@ document.getElementById("start-timer").addEventListener("click", () => {
|
|||
});
|
||||
////////////////////////
|
||||
|
||||
// Voltage toggles
|
||||
const voltageDisplay = document.getElementById("current-voltage");
|
||||
const voltageToggleInputs = document.querySelectorAll('input[type="radio"]');
|
||||
let totalVoltage = 0;
|
||||
|
||||
for (let i = 0; i < voltageToggleInputs.length; i++) {
|
||||
voltageToggleInputs[i].addEventListener("click", () => {
|
||||
totalVoltage += parseInt(voltageToggleInputs[i].value);
|
||||
voltageDisplay.innerHTML = totalVoltage + "V";
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 0; i < voltageToggleInputs.length; i++) {
|
||||
if (voltageToggleInputs[i].checked) {
|
||||
totalVoltage += parseInt(voltageToggleInputs[i].value);
|
||||
}
|
||||
}
|
||||
voltageDisplay.innerHTML = totalVoltage + "V";
|
||||
|
||||
////////////////////////
|
||||
|
||||
// Control panel buttons
|
||||
const topControlPanelButtons = document.getElementsByClassName(
|
||||
"control-panel__button-display"
|
||||
|
|
|
@ -682,6 +682,10 @@ body {
|
|||
background: linear-gradient(#f9fb07, #f9fb07 50%, #000e0d 50%);
|
||||
}
|
||||
}
|
||||
#power-display__inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.power-screen__button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -719,6 +723,10 @@ body {
|
|||
border-bottom: white solid 2px;
|
||||
}
|
||||
|
||||
.power-screen__voltage-switches-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.power-screen__warning-text {
|
||||
color: white;
|
||||
margin: 0;
|
||||
|
|
|
@ -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"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;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;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;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AC9JF;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtCF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE","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"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC1BF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC7CF;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;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;;;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;ACtCF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE","file":"styles.css"}
|
|
@ -96,6 +96,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
#power-display__inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.power-screen__button-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -133,6 +137,10 @@
|
|||
border-bottom: white solid 2px;
|
||||
}
|
||||
|
||||
.power-screen__voltage-switches-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.power-screen__warning-text {
|
||||
color: white;
|
||||
margin: 0;
|
||||
|
|
Loading…
Reference in New Issue
Block a user