mirror of
https://github.com/Max-Stevenson/jurassic-park-interface.git
synced 2024-10-16 20:24:15 +00:00
Part way through hacky solution to changing button display.
This commit is contained in:
parent
4945847c55
commit
059ca3b98f
@ -1,3 +1,4 @@
|
|||||||
|
// Timer
|
||||||
const startTimer = (duration, display) => {
|
const startTimer = (duration, display) => {
|
||||||
let timer = duration,
|
let timer = duration,
|
||||||
minutes,
|
minutes,
|
||||||
@ -22,14 +23,47 @@ document.getElementById("start-timer").addEventListener("click", () => {
|
|||||||
const display = document.getElementById("countdown-timer__display");
|
const display = document.getElementById("countdown-timer__display");
|
||||||
startTimer(twoMinutes, display);
|
startTimer(twoMinutes, display);
|
||||||
});
|
});
|
||||||
|
////////////////////////
|
||||||
|
|
||||||
|
// Control panel buttons
|
||||||
|
// .control-panel__button-display
|
||||||
|
|
||||||
// Trash modal code
|
const topControlPanelButtons = document.getElementsByClassName(
|
||||||
|
"control-panel__button-display"
|
||||||
|
)[0].children;
|
||||||
|
for (let i = 0; i < topControlPanelButtons.length; i++) {
|
||||||
|
let button = topControlPanelButtons[i];
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
for (let k = 0; k < topControlPanelButtons.length; k++) {
|
||||||
|
let prevButton = topControlPanelButtons[k];
|
||||||
|
if (prevButton.classList.contains("button__depressed")) {
|
||||||
|
prevButton.classList.remove("button__depressed");
|
||||||
|
prevButton.classList.add("inner-edge__light");
|
||||||
|
prevButton.firstElementChild.classList.remove("button-text__embossed");
|
||||||
|
prevButton.firstElementChild.classList.add("button-text__engraved");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// find depressed styling in children
|
||||||
|
// remove depressed styling and embossed styling from previous button
|
||||||
|
// add inner edge light and engraved styling
|
||||||
|
// remove engrave styling from para
|
||||||
|
// remove inner edge light styling from div
|
||||||
|
// add depressed styling to div
|
||||||
|
// add embossed styling to para
|
||||||
|
//
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////
|
||||||
|
|
||||||
|
// Trash modal
|
||||||
const trashIcon = document.getElementById("trash-icon");
|
const trashIcon = document.getElementById("trash-icon");
|
||||||
|
|
||||||
trashIcon.addEventListener("click", () => {
|
trashIcon.addEventListener("click", () => {
|
||||||
const trashModal = document.getElementById("trash-modal");
|
const trashModal = document.getElementById("trash-modal");
|
||||||
const trashModalCloseButton = document.getElementById("modal-container__close-button");
|
const trashModalCloseButton = document.getElementById(
|
||||||
|
"modal-container__close-button"
|
||||||
|
);
|
||||||
trashModalCloseButton.addEventListener("click", () => {
|
trashModalCloseButton.addEventListener("click", () => {
|
||||||
trashModal.classList.remove("modal-active");
|
trashModal.classList.remove("modal-active");
|
||||||
trashModal.classList.add("modal-inactive");
|
trashModal.classList.add("modal-inactive");
|
||||||
@ -37,7 +71,7 @@ trashIcon.addEventListener("click", () => {
|
|||||||
trashModal.classList.remove("modal-inactive");
|
trashModal.classList.remove("modal-inactive");
|
||||||
trashModal.classList.add("modal-active");
|
trashModal.classList.add("modal-active");
|
||||||
});
|
});
|
||||||
/////////////////
|
////////////////////////
|
||||||
|
|
||||||
// user clicks start button
|
// user clicks start button
|
||||||
|
|
||||||
|
@ -178,6 +178,11 @@ body {
|
|||||||
width: fit-content;
|
width: fit-content;
|
||||||
box-shadow: inset 0 0 8px #4C4C4C;
|
box-shadow: inset 0 0 8px #4C4C4C;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#stop-button {
|
#stop-button {
|
||||||
@ -617,7 +622,7 @@ body {
|
|||||||
height: 0px;
|
height: 0px;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transform: translate(600px, 500px);
|
transform: translate(600px, 500px);
|
||||||
transition: all 1s linear 0s;
|
transition: all 500ms linear 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-active {
|
.modal-active {
|
||||||
@ -625,7 +630,7 @@ body {
|
|||||||
height: 200px;
|
height: 200px;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transform: translate(-600px, -500px);
|
transform: translate(-600px, -500px);
|
||||||
transition: all 1s linear 0s;
|
transition: all 500ms linear 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=styles.css.map */
|
/*# sourceMappingURL=styles.css.map */
|
||||||
|
@ -1 +1 @@
|
|||||||
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;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;;;ACrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAYF;EACE;;;AC1CF;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;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","file":"styles.css"}
|
{"version":3,"sourceRoot":"","sources":["../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_buttons.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"],"names":[],"mappings":"AAAA;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACrBF;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;;;ACrEF;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;;;ACtCF;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;ACnEF;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","file":"styles.css"}
|
@ -28,15 +28,11 @@
|
|||||||
width: fit-content;
|
width: fit-content;
|
||||||
box-shadow: inset 0 0 8px #4C4C4C;
|
box-shadow: inset 0 0 8px #4C4C4C;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-button {
|
.buttons {
|
||||||
}
|
cursor: pointer;
|
||||||
|
|
||||||
.large-button {
|
|
||||||
}
|
|
||||||
|
|
||||||
#rewind-button {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#stop-button {
|
#stop-button {
|
||||||
|
@ -14,7 +14,7 @@
|
|||||||
height: 0px;
|
height: 0px;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transform: translate(600px, 500px);
|
transform: translate(600px, 500px);
|
||||||
transition: all 1s linear 0s;
|
transition: all 500ms linear 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-active {
|
.modal-active {
|
||||||
@ -22,7 +22,7 @@
|
|||||||
height: 200px;
|
height: 200px;
|
||||||
transform-origin: bottom right;
|
transform-origin: bottom right;
|
||||||
transform: translate(-600px, -500px);
|
transform: translate(-600px, -500px);
|
||||||
transition: all 1s linear 0s;
|
transition: all 500ms linear 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-container__content {
|
.modal-container__content {
|
||||||
|
Loading…
Reference in New Issue
Block a user