https://hexaclue.dev/McCollough/main.js

1const hider = document.getElementById("hider");
2const centerer = document.querySelector("main");
3const pnlMain = document.getElementById("pnl-main");
4const primaryColor = "#00d4ff";
5let animationDelay = 600;
6let currentTranslation = {};
7let displayingRed = true;
8let mainLoopId;
9
10window.addEventListener("load", async e => {
11    await setTranslation();
12
13    Array.from(document.querySelectorAll("body *")).forEach(child => setupMouseAndTouchEvents(child));
14
15    setTimeout(() => { showPanel(pnlMain) }, 250);
16});
17
18function hidePanel(pnl) {
19    return new Promise((resolve) => {
20        pnl.classList.add("hiding");
21        setTimeout(() => { Array.from(pnl.querySelectorAll("*")).forEach(ele => ele.classList.remove("hover", "active")); hider.append(pnl); pnl.classList.remove("hiding"); pnl.classList.add("hidden"); resolve(); }, animationDelay + 25);
22    });
23}
24function showPanel(pnl) {
25    return new Promise((resolve) => {
26        centerer.append(pnl);
27        setTimeout(() => {
28            pnl.classList.remove("hidden");
29            setTimeout(() => {
30                resolve();
31            }, animationDelay);
32        }, 25);
33    });
34}
35
36document.getElementById("btn-share").addEventListener("click", e => {
37    try {
38        let copyThing = document.createElement("input");
39        copyThing.value = "https://hihiqy1.nl/McCollough/";
40        document.body.appendChild(copyThing);
41        copyThing.focus();
42        copyThing.select();
43        let copied = document.execCommand("copy");
44        document.body.removeChild(copyThing);
45
46        if (copied) {
47            hidePanel(document.getElementById("pnl-main")).then(() => {
48                showPanel(document.getElementById("pnl-dialog")).then(() => {
49                    setTimeout(() => {
50                        hidePanel(document.getElementById("pnl-dialog")).then(() => {
51                            showPanel(document.getElementById("pnl-main"));
52                        });
53                    }, 1000);
54                });
55            });
56        }
57    } catch {
58        // Too bad lmao
59    }
60});
61document.getElementById("btn-wiki").addEventListener("click", e => {
62    hidePanel(document.getElementById("pnl-main")).then(() => {
63        window.location.href = "https://en.m.wikipedia.org/wiki/McCollough_effect";
64        setTimeout(() => {
65            showPanel(document.getElementById("pnl-main"));
66        }, 1500);
67    });
68});
69document.getElementById("btn-prestart").addEventListener("click", e => {
70    hidePanel(document.getElementById("pnl-main")).then(() => {
71        showPanel(document.getElementById("pnl-prestart"));
72    });
73});
74document.getElementById("btn-prestart-to-main").addEventListener("click", e => {
75    hidePanel(document.getElementById("pnl-prestart")).then(() => {
76        showPanel(document.getElementById("pnl-main"));
77    });
78});
79document.getElementById("btn-prestart-to-warn").addEventListener("click", e => {
80    hidePanel(document.getElementById("pnl-prestart")).then(() => {
81        showPanel(document.getElementById("pnl-warn"));
82    });
83});
84document.getElementById("btn-warn-to-prestart").addEventListener("click", e => {
85    hidePanel(document.getElementById("pnl-warn")).then(() => {
86        showPanel(document.getElementById("pnl-prestart"));
87    });
88});
89document.getElementById("btn-warn-to-maincheck").addEventListener("click", e => {
90    hidePanel(document.getElementById("pnl-warn")).then(() => {
91        document.body.style.backgroundColor = "black";
92        setTimeout(() => {
93            showPanel(document.getElementById("pnl-maincheck"));
94        }, animationDelay);
95    });
96});
97document.getElementById("btn-lightlycolored").addEventListener("click", e => {
98    hidePanel(document.getElementById("pnl-maincheck")).then(() => {
99        showPanel(document.getElementById("pnl-ineligible"));
100    });
101});
102document.getElementById("btn-ineligible-to-main").addEventListener("click", e => {
103    hidePanel(document.getElementById("pnl-ineligible")).then(() => {
104        document.body.style.backgroundColor = "";
105        setTimeout(() => {
106            showPanel(document.getElementById("pnl-main"));
107        }, animationDelay);
108    });

109});
110document.getElementById("btn-blackwhite").addEventListener("click", e => {
111    hidePanel(document.getElementById("pnl-maincheck")).then(() => {
112        showPanel(document.getElementById("pnl-setup1"));
113    });
114});
115document.getElementById("btn-setup1-to-maincheck").addEventListener("click", e => {
116    hidePanel(document.getElementById("pnl-setup1")).then(() => {
117        showPanel(document.getElementById("pnl-maincheck"));
118    });
119});
120document.getElementById("btn-setup1-to-setup2").addEventListener("click", e => {
121    hidePanel(document.getElementById("pnl-setup1")).then(() => {
122        showPanel(document.getElementById("pnl-setup2"));
123    });
124});
125document.getElementById("btn-setup2-to-setup1").addEventListener("click", e => {
126    hidePanel(document.getElementById("pnl-setup2")).then(() => {
127        showPanel(document.getElementById("pnl-setup1"));
128    });
129});
130document.getElementById("btn-setup2-to-setup3").addEventListener("click", e => {
131    hidePanel(document.getElementById("pnl-setup2")).then(() => {
132        showPanel(document.getElementById("pnl-setup3"));
133    });
134});
135document.getElementById("btn-setup3-to-setup2").addEventListener("click", e => {
136    hidePanel(document.getElementById("pnl-setup3")).then(() => {
137        showPanel(document.getElementById("pnl-setup2"));
138    });
139});
140document.getElementById("btn-setup3-to-instructions").addEventListener("click", e => {
141    hidePanel(document.getElementById("pnl-setup3")).then(() => {
142        showPanel(document.getElementById("pnl-instructions"));
143    });
144});
145document.getElementById("btn-instructions-to-setup3").addEventListener("click", e => {
146    hidePanel(document.getElementById("pnl-instructions")).then(() => {
147        showPanel(document.getElementById("pnl-setup3"));
148    });
149});
150document.getElementById("durationslider").addEventListener("change", e => { updateDuration(e); });
151document.getElementById("durationslider").addEventListener("input", e => { updateDuration(e); });
152function updateDuration(e) { document.getElementById("p-duration").innerText = currentTranslation["p-duration"].replace("{MINUTES}", e.currentTarget.value); }
153document.getElementById("btn-start").addEventListener("click", () => {
154    hidePanel(document.getElementById("pnl-instructions")).then(() => {
155        document.querySelector("main").classList.add("currently-displaying-stage");
156        mainLoopId = setInterval(() => {
157            document.getElementById("img-main").src = displayingRed ? "images/green.svg" : "images/red.svg";
158            displayingRed = displayingRed ? false : true;
159        }, 10000);
160        showPanel(document.getElementById("pnl-stage"));
161
162        setTimeout(() => {
163            clearInterval(mainLoopId);
164            hidePanel(document.getElementById("pnl-stage")).then(() => {
165                document.querySelector("main").classList.remove("currently-displaying-stage");
166                showPanel(document.getElementById("pnl-after"));
167            });
168        }, 1000 * 60 * parseFloat(document.getElementById("durationslider").value));
169    });
170});
171document.getElementById("btn-after-to-finish").addEventListener("click", e => {
172    hidePanel(document.getElementById("pnl-after")).then(() => {
173        showPanel(document.getElementById("pnl-finish"));
174    });
175});
176document.getElementById("btn-finish-to-after").addEventListener("click", e => {
177    hidePanel(document.getElementById("pnl-finish")).then(() => {
178        showPanel(document.getElementById("pnl-after"));
179    });
180});
181document.getElementById("btn-finish").addEventListener("click", e => {
182    hidePanel(document.getElementById("pnl-finish")).then(() => {
183        document.body.style.backgroundColor = "";
184        setTimeout(() => {
185            showPanel(document.getElementById("pnl-main"));
186        }, animationDelay);
187    });
188});