bigger targets, "ready" text, formatted times

1 files changed, 56 insertions, 32 deletions

diff --git a/quickdraw-game.html b/quickdraw-game.html
index 0d456bd..4742d7d 100644
--- a/quickdraw-game.html
+++ b/quickdraw-game.html
@@ -10,10 +10,13 @@
                 padding: 0;
                 font-family: sans-serif;
             }
+            :root {
+              --bg: #161616;
+            }
             html {
                 height: 100vh;
                 width: 100vw;
-                background-color: #161616;
+                background-color: var(--bg);
                 font-size: 24px;
                 overflow-x: hidden;
             }
@@ -31,19 +34,21 @@
                 /** border: 1px solid white; */
             }
             #center {
-                height: 20px;
-                width: 20px;
-                background-color: red;
+                height: 50px;
+                width: 50px;
+                background-color: var(--bg);
+                border: 5px solid red;
+                border-radius: 50%;
                 position: absolute; 
                 border-radius: 50%;
             }
             
             .target {
-                height: 20px;
-                width: 20px;
+                height: 50px;
+                width: 50px;
                 background-color: red;
                 position: absolute;
-                border-radius: 25%;
+                border-radius: 50%;
             }
             .target:active {
               background-color: orange;
@@ -99,15 +104,16 @@
         <div id="text-box">
           
           <!-- intro related -->
-          <span id="intro1" class="hidden title">QUICK</span>
-          <span id="intro2" class="hidden title">DRAW</span>
-          
+           <div style="display: flex; gap: 1rem;">
+            <span id="intro1" class="hidden title">QUICK</span>
+            <span id="intro2" class="hidden title">DRAW</span>
+          </div>
+
           <!-- gamemode menu buttons-->
           <div id="game-modes" class="hidden fade">
             <button id="normal" onclick="handleNormalMode()">normal</button>
             <button id="countdown">countdown</button>
-            <button id="deadeye">dead eye</button>
-            <button id="infinite">infinite</button>
+            <!-- <button id="infinite">infinite</button> -->
           </div>
 
           <!-- pre-round text -->
@@ -117,6 +123,7 @@
           <span id="round-end" class="hidden fade"></span>
 
           <!-- countdown text -->
+          <span id="ready" class="hidden title">READY?</span>
           <span id="countdown3" class="hidden title">3</span>
           <span id="countdown2" class="hidden title">2</span>
           <span id="countdown1" class="hidden title">1</span>
@@ -126,8 +133,8 @@
 
         <script>
           let gameBorderWidth = 1;
-          let targetWidth = 20;
-          let targetHeight = 20;
+          let targetWidth = 50;
+          let targetHeight = 50;
 
           let pageHeight;
           let pageWidth;
@@ -162,6 +169,7 @@
           let bestNormalTime = "none";
 
           // text elements
+          let ready = document.getElementById("ready");
           let intro1 = document.getElementById("intro1");
           let intro2 = document.getElementById("intro2");
           let gameText = document.getElementById("gameText");
@@ -202,7 +210,8 @@
             center.id = "center";
             document.body.insertAdjacentElement("afterbegin", center);
 
-            await drawTargetsInCircle(2);
+            // await drawTargetsInCircle(2);
+            await drawTargetsInCircle(false);
 
             // insert intro elements into document flow
             intro1.style.display = "inline";
@@ -232,7 +241,7 @@
             document.getElementById("game-modes").style.opacity = "100";
 
             if (localStorage.getItem("bestNormalTime") != null) {
-              bestNormalTime = localStorage.getItem("bestNormalTime");
+              bestNormalTime = Number.parseFloat(localStorage.getItem("bestNormalTime"));
             }
           }
 
@@ -253,7 +262,7 @@
             intro1.style.display = "none";
             intro2.style.display = "none";
             
-            gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
+            gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
             gameText.style.opacity = "0";
             gameText.style.display = "inline";
             await sleep(500);
@@ -263,19 +272,22 @@
 
           async function handleReset(e) {
             currentRound = 0;
-            center.style.backgroundColor = "red";
             center.removeEventListener("mouseover", handleReset);
             gameText.style.display = "none";
             gameText.style.opacity = "0";
-            await drawTargetsInCircle();
+
+            intro1.style.display = "inline";
+            intro2.style.display = "inline";
+            intro1.style.opacity = "100";
+            intro2.style.opacity = "100";
+
             document.getElementById("game-modes").style.display = "inline";
             await sleep(500);
             document.getElementById("game-modes").style.opacity = "100"; 
+            await drawTargetsInCircle(2);
           }
 
           async function handleHoverStart(e) {
-            e.target.style.backgroundColor = "green";
-
             hovering = true;
             hoverCount++;
 
@@ -297,7 +309,7 @@
 
           async function startNormalRound(roundNumber) {
             if (roundNumber > 3) {
-              handleReset(0);
+              handleReset({});
               return;
             }
 
@@ -339,6 +351,10 @@
             center.id = "center";
             document.body.insertAdjacentElement("afterbegin", center);
 
+            // ensure draw isn't still lingering on screen
+            draw.style.display = "none";
+            draw.style.opacity = "0";
+
             if (roundNumber == 3) {
               // GAME OVER STUFF
               if (totalTime < bestNormalTime || bestNormalTime == "none") {
@@ -346,15 +362,15 @@
                 bestNormalTime = totalTime;
                 localStorage.setItem("bestNormalTime", bestNormalTime);
               }
-              gameText.innerText = "ROUND: " + roundSeconds + 
-                "s\nTOTAL:   " + totalTime + 
-                "s\nBEST SCORE: " + bestNormalTime + 
+              gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + 
+                "s\nTOTAL:   " + totalTime.toFixed(3) + 
+                "s\nBEST SCORE: " + bestNormalTime.toFixed(3) + 
                 "s\nhover on circle to go back to main menu..";
               center.addEventListener("mouseover", handleReset);
             }
             else {
-              console.log("ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "\nhover on circle to start round " + currentRound);
-              gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "s\nhover on circle to start round " + currentRound;
+              console.log("ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL:   " + totalTime.toFixed(3) + "\nhover on circle to start round " + currentRound);
+              gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL:   " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
 
               center.addEventListener("mouseover", handleHoverStart);
               center.addEventListener("mouseleave", handleHoverEnd);
@@ -371,11 +387,18 @@
 
           async function startCountdown(hoverNumber) {
             gameText.style.display = "none";
-
             countingDown = true;
+
+            // this if-check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
+            if (!hovering || hoverNumber != hoverCount) return false;
+            ready.style.display = "inline";
+            ready.style.opacity = "100";
             await sleep(1000);
+
+            if (!hovering || hoverNumber != hoverCount) return false;
+            ready.style.display = "none";
+            ready.style.opacity = "0";
             
-            // this check prevents countdown from continuing if user removes / reapplies hover while we're sleeping
             if (!hovering || hoverNumber != hoverCount) return false;
             one.style.opacity = "0";
             two.style.opacity = "0";
@@ -417,14 +440,15 @@
 
           function handleHoverEnd(e) {
             hovering = false;
-            e.target.style.backgroundColor = "red";
 
             if (countingDown) {
+              ready.style.display = "none";
               one.style.display = "none";
               two.style.display = "none";
               three.style.display = "none";
               draw.style.display = "none";
 
+              ready.style.opacity = "0";
               one.style.opacity = "0";
               two.style.opacity = "0";
               three.style.opacity = "0";
@@ -433,10 +457,10 @@
               
               if (currentRound <= 1) {
                 drawTargetsInCircle();
-                gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
+                gameText.innerText = "hover on middle circle to start the countdown,\nthen click the targets as fast as possible!";
               }
               else {
-                gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "s\nhover on circle to start round " + currentRound;
+                gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL:   " + totalTime.toFixed(3) + "s\nhover on circle to start round " + currentRound;
               }
               gameText.style.display = "inline";
               countingDown = false;