2020-06-11 11:02:57 +00:00
|
|
|
// Timer
|
2020-06-09 17:48:21 +00:00
|
|
|
const startTimer = (duration, display) => {
|
|
|
|
let timer = duration,
|
2020-06-09 16:54:13 +00:00
|
|
|
minutes,
|
|
|
|
seconds;
|
|
|
|
setInterval(function() {
|
|
|
|
minutes = parseInt(timer / 60, 10);
|
|
|
|
seconds = parseInt(timer % 60, 10);
|
|
|
|
|
|
|
|
minutes = minutes < 10 ? "0" + minutes : minutes;
|
|
|
|
seconds = seconds < 10 ? "0" + seconds : seconds;
|
|
|
|
|
|
|
|
display.textContent = minutes + ":" + seconds;
|
|
|
|
|
|
|
|
if (--timer < 0) {
|
|
|
|
timer = duration;
|
|
|
|
}
|
|
|
|
}, 1000);
|
2020-06-09 17:48:21 +00:00
|
|
|
};
|
2020-06-09 16:54:13 +00:00
|
|
|
|
|
|
|
document.getElementById("start-timer").addEventListener("click", () => {
|
2020-06-09 17:48:21 +00:00
|
|
|
const twoMinutes = 60 * 2;
|
|
|
|
const display = document.getElementById("countdown-timer__display");
|
2020-06-09 16:54:13 +00:00
|
|
|
startTimer(twoMinutes, display);
|
|
|
|
});
|
2020-06-11 11:02:57 +00:00
|
|
|
////////////////////////
|
|
|
|
|
|
|
|
// Control panel buttons
|
|
|
|
const topControlPanelButtons = document.getElementsByClassName(
|
|
|
|
"control-panel__button-display"
|
|
|
|
)[0].children;
|
|
|
|
for (let i = 0; i < topControlPanelButtons.length; i++) {
|
|
|
|
let button = topControlPanelButtons[i];
|
2020-06-12 12:23:05 +00:00
|
|
|
button.addEventListener("click", event => {
|
2020-06-11 11:02:57 +00:00
|
|
|
for (let k = 0; k < topControlPanelButtons.length; k++) {
|
|
|
|
let prevButton = topControlPanelButtons[k];
|
|
|
|
if (prevButton.classList.contains("button__depressed")) {
|
|
|
|
prevButton.classList.remove("button__depressed");
|
2020-06-11 12:48:40 +00:00
|
|
|
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");
|
2020-06-11 11:02:57 +00:00
|
|
|
}
|
|
|
|
}
|
2020-06-11 12:48:40 +00:00
|
|
|
button.classList.add("button__depressed");
|
|
|
|
button.classList.remove("outer-edge__light");
|
|
|
|
button.firstElementChild.classList.remove("inner-edge__light");
|
2020-06-11 15:46:41 +00:00
|
|
|
button.firstElementChild
|
2020-06-11 12:48:40 +00:00
|
|
|
.querySelector("p")
|
|
|
|
.classList.add("button-text__embossed");
|
2020-06-11 15:46:41 +00:00
|
|
|
button.firstElementChild
|
2020-06-11 12:48:40 +00:00
|
|
|
.querySelector("p")
|
|
|
|
.classList.remove("button-text__engraved");
|
2020-06-14 17:27:28 +00:00
|
|
|
changeScreenContent(event);
|
2020-06-11 11:02:57 +00:00
|
|
|
});
|
2020-06-12 12:23:05 +00:00
|
|
|
}
|
|
|
|
////////////////////////
|
|
|
|
|
|
|
|
// Video screen tab change
|
2020-06-14 17:27:28 +00:00
|
|
|
const changeScreenContent = event => {
|
2020-06-12 12:23:05 +00:00
|
|
|
let selectedTab = event.currentTarget.lastElementChild.firstElementChild.innerHTML.toLowerCase();
|
2020-06-14 17:27:28 +00:00
|
|
|
const mainDisplayElements = document.getElementsByClassName("main-display");
|
2020-06-12 12:23:05 +00:00
|
|
|
const tabContentElements = document.getElementsByClassName(
|
|
|
|
"video-screen__tab-content"
|
|
|
|
);
|
|
|
|
|
|
|
|
for (let i = 0; i < tabContentElements.length; i++) {
|
|
|
|
if (tabContentElements[i].id === `video-screen__${selectedTab}`) {
|
2020-06-13 18:54:16 +00:00
|
|
|
tabContentElements[i].style.display = "flex";
|
2020-06-12 12:23:05 +00:00
|
|
|
} else {
|
|
|
|
tabContentElements[i].style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
2020-06-14 17:27:28 +00:00
|
|
|
|
|
|
|
for (let i = 0; i < mainDisplayElements.length; i++) {
|
|
|
|
if (mainDisplayElements[i].id === `${selectedTab}-display__inner`) {
|
|
|
|
mainDisplayElements[i].style.display = "flex";
|
|
|
|
} else {
|
|
|
|
mainDisplayElements[i].style.display = "none";
|
|
|
|
}
|
|
|
|
}
|
2020-06-11 12:48:40 +00:00
|
|
|
};
|
2020-06-11 11:02:57 +00:00
|
|
|
////////////////////////
|
2020-06-10 13:27:03 +00:00
|
|
|
|
2020-06-11 11:02:57 +00:00
|
|
|
// Trash modal
|
2020-06-10 13:27:03 +00:00
|
|
|
const trashIcon = document.getElementById("trash-icon");
|
|
|
|
|
|
|
|
trashIcon.addEventListener("click", () => {
|
|
|
|
const trashModal = document.getElementById("trash-modal");
|
2020-06-11 11:02:57 +00:00
|
|
|
const trashModalCloseButton = document.getElementById(
|
|
|
|
"modal-container__close-button"
|
|
|
|
);
|
2020-06-10 13:27:03 +00:00
|
|
|
trashModalCloseButton.addEventListener("click", () => {
|
2020-06-10 18:46:19 +00:00
|
|
|
trashModal.classList.remove("modal-active");
|
2020-06-10 22:52:04 +00:00
|
|
|
trashModal.classList.add("modal-inactive");
|
2020-06-10 13:27:03 +00:00
|
|
|
});
|
2020-06-10 18:46:19 +00:00
|
|
|
trashModal.classList.remove("modal-inactive");
|
|
|
|
trashModal.classList.add("modal-active");
|
2020-06-10 13:27:03 +00:00
|
|
|
});
|
2020-06-11 11:02:57 +00:00
|
|
|
////////////////////////
|
2020-06-10 13:27:03 +00:00
|
|
|
|
2020-06-09 22:51:25 +00:00
|
|
|
// user clicks start button
|
|
|
|
|
|
|
|
// loop through DOM and add interactivity to all elements with interactive class
|
|
|
|
|
|
|
|
// init steps to win as 0 (have to complete 10 to win)
|
|
|
|
|
|
|
|
// take instruction from array and show on screen
|
|
|
|
|
|
|
|
// start 2 minute timer
|
|
|
|
|
2020-06-11 11:02:57 +00:00
|
|
|
// take instruction interaction object and listen for click
|
2020-06-09 22:51:25 +00:00
|
|
|
|
|
|
|
// after a timer or inccorect number of clicks display a hint for the object (flashing or hightlight border?)
|
|
|
|
|
|
|
|
// once clicked check for if last instruction
|
|
|
|
|
|
|
|
// if so, display win message, if not pull next instruction from array and show on screen
|
|
|
|
|
2020-06-11 11:02:57 +00:00
|
|
|
// if time expires display lose message
|