Update index.html
Browse files- index.html +17 -12
index.html
CHANGED
|
@@ -2,8 +2,20 @@
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<title>A test of courage</title>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 5 |
<style>
|
| 6 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 7 |
.arrow {
|
| 8 |
position: absolute;
|
| 9 |
top: 30%;
|
|
@@ -213,20 +225,12 @@
|
|
| 213 |
var recursiveTimerReplay = function() {
|
| 214 |
const rec = recordings[recordingIndex]
|
| 215 |
if (step >= rec.length) {
|
| 216 |
-
|
| 217 |
-
document.getElementById("butt").classList.remove("darkened")
|
| 218 |
-
document.getElementById("butt").classList.add("hoverableMainButton")
|
| 219 |
-
document.getElementById("howdiv").style.visibility = "visible";
|
| 220 |
-
if (recordingIndex === 1) {
|
| 221 |
-
document.getElementById("ouija").style.visibility = "visible";
|
| 222 |
-
}
|
| 223 |
-
offsetX = 0
|
| 224 |
-
offsetY = 0
|
| 225 |
-
paintCursorWithOffset(document.getElementById("arrow"), prevX, prevY)
|
| 226 |
step = 0
|
| 227 |
recordingIndex = (recordingIndex + 1) % recordings.length
|
| 228 |
-
return
|
| 229 |
}
|
|
|
|
| 230 |
const currTime = Date.now()
|
| 231 |
if (currTime - prevTime >= rec[step][0]) {
|
| 232 |
offsetX = offsetX + rec[step][1]
|
|
@@ -252,6 +256,7 @@
|
|
| 252 |
document.getElementById("butt").classList.remove("hoverableMainButton")
|
| 253 |
document.getElementById("howdiv").style.visibility = "hidden";
|
| 254 |
document.getElementById("ouija").style.visibility = "hidden";
|
|
|
|
| 255 |
prevTime = Date.now()
|
| 256 |
recursiveTimerReplay()
|
| 257 |
}
|
|
@@ -304,7 +309,7 @@
|
|
| 304 |
</div>
|
| 305 |
|
| 306 |
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Explanation video (all the answers you need are here)" style="display: none;"></a>
|
| 307 |
-
<div id="howdiv" class="unselectable" style="position: absolute; width: 200px; height: 50px; right: 50px; bottom: 50px; margin: -50px 0 0 -200px; visibility:
|
| 308 |
<button id="how" class="how unselectable" tabindex="-1">
|
| 309 |
How this works
|
| 310 |
</button>
|
|
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<title>A test of courage</title>
|
| 5 |
+
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
|
| 6 |
+
<div id="stop-instruction" class="unselectable" style="position: absolute; top: 8%; left: 50%; transform: translate(-50%, -50%); color: #ffa502; font-size: 24px; font-family: 'Metal Mania', cursive; text-shadow: 0 0 10px #d35400, 0 0 20px #d35400; visibility: hidden; text-align: center;">
|
| 7 |
+
Press 'Ctrl+R' to banish the spirit's jiggle!
|
| 8 |
+
</div>
|
| 9 |
+
|
| 10 |
<style>
|
| 11 |
|
| 12 |
+
.metal-mania-regular {
|
| 13 |
+
font-family: "Metal Mania", system-ui;
|
| 14 |
+
font-weight: 400;
|
| 15 |
+
font-style: normal;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
|
| 19 |
.arrow {
|
| 20 |
position: absolute;
|
| 21 |
top: 30%;
|
|
|
|
| 225 |
var recursiveTimerReplay = function() {
|
| 226 |
const rec = recordings[recordingIndex]
|
| 227 |
if (step >= rec.length) {
|
| 228 |
+
// Instead of stopping, just reset the step and move to the next recording
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 229 |
step = 0
|
| 230 |
recordingIndex = (recordingIndex + 1) % recordings.length
|
| 231 |
+
// Do not return, just let the recursive timer continue
|
| 232 |
}
|
| 233 |
+
|
| 234 |
const currTime = Date.now()
|
| 235 |
if (currTime - prevTime >= rec[step][0]) {
|
| 236 |
offsetX = offsetX + rec[step][1]
|
|
|
|
| 256 |
document.getElementById("butt").classList.remove("hoverableMainButton")
|
| 257 |
document.getElementById("howdiv").style.visibility = "hidden";
|
| 258 |
document.getElementById("ouija").style.visibility = "hidden";
|
| 259 |
+
document.getElementById("stop-instruction").style.visibility = "visible";
|
| 260 |
prevTime = Date.now()
|
| 261 |
recursiveTimerReplay()
|
| 262 |
}
|
|
|
|
| 309 |
</div>
|
| 310 |
|
| 311 |
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Explanation video (all the answers you need are here)" style="display: none;"></a>
|
| 312 |
+
<div id="howdiv" class="unselectable" style="position: absolute; width: 200px; height: 50px; right: 50px; bottom: 50px; margin: -50px 0 0 -200px; visibility: visible;">
|
| 313 |
<button id="how" class="how unselectable" tabindex="-1">
|
| 314 |
How this works
|
| 315 |
</button>
|