normal fully playable w/ high score + menu gloss

quickdraw-game.html

@@ -35,6 +35,7 @@
                 width: 20px;
                 background-color: red;
                 position: absolute; 
+                border-radius: 50%;
             }
             
             .target {
@@ -103,9 +104,10 @@
           
           <!-- gamemode menu buttons-->
           <div id="game-modes" class="hidden fade">
-            <button id="normal" onclick="handleNormalMode()">normal mode</button>
+            <button id="normal" onclick="handleNormalMode()">normal</button>
-            <button id="infinite">infinite mode</button>
+            <button id="countdown">countdown</button>
-            <button id="countdown">countdown mode</button>
+            <button id="deadeye">dead eye</button>
+            <button id="infinite">infinite</button>
           </div>
 
           <!-- pre-round text -->
@@ -157,6 +159,8 @@
           let roundTimeEnd = 0;
           let roundSeconds = 0.0;
 
+          let bestNormalTime = "none";
+
           // text elements
           let intro1 = document.getElementById("intro1");
           let intro2 = document.getElementById("intro2");
@@ -198,7 +202,7 @@
             center.id = "center";
             document.body.insertAdjacentElement("afterbegin", center);
 
-            await drawTargetsInCircle(false);
+            await drawTargetsInCircle(2);
 
             // insert intro elements into document flow
             intro1.style.display = "inline";
@@ -226,9 +230,13 @@
             document.getElementById("game-modes").style.display = "inline";
             await sleep(500);
             document.getElementById("game-modes").style.opacity = "100";
+
+            if (localStorage.getItem("bestNormalTime") != null) {
+              bestNormalTime = localStorage.getItem("bestNormalTime");
+            }
           }
 
-          function handleNormalMode(e) {
+          async function handleNormalMode(e) {
             gamemode = "normal";
             console.log("game mode: " + gamemode);
 
@@ -238,17 +246,33 @@
             center.addEventListener("mouseover", handleHoverStart);
             center.addEventListener("mouseleave", handleHoverEnd);
 
+            document.getElementById("game-modes").style.opacity = "0";
+            await sleep(500);
             document.getElementById("game-modes").style.display = "none";
 
             intro1.style.display = "none";
             intro2.style.display = "none";
             
-            gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
+            gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
+            gameText.style.opacity = "0";
             gameText.style.display = "inline";
+            await sleep(500);
             gameText.style.opacity = "100";
 
           }
 
+          async function handleReset(e) {
+            currentRound = 0;
+            center.style.backgroundColor = "red";
+            center.removeEventListener("mouseover", handleReset);
+            gameText.style.display = "none";
+            gameText.style.opacity = "0";
+            await drawTargetsInCircle();
+            document.getElementById("game-modes").style.display = "inline";
+            await sleep(500);
+            document.getElementById("game-modes").style.opacity = "100"; 
+          }
+
           async function handleHoverStart(e) {
             e.target.style.backgroundColor = "green";
 
@@ -265,10 +289,6 @@
             gameText.style.display = "none";
 
             if (gamemode == "normal") {
-              if (currentRound > 3) {
-                console.log("hover attempt after round 3");
-                return;
-              }
               await startNormalRound(currentRound);
             }
             // if (infinityMode)
@@ -276,17 +296,18 @@
           }
 
           async function startNormalRound(roundNumber) {
+            if (roundNumber > 3) {
+              handleReset(0);
+              return;
+            }
+
             if (!await startCountdown(hoverCount)) {
              // if user canceled hover, don't continue round
              console.log("player canceled coundown");
              return;
             }
 
-            console.log("starting round " + roundNumber);
-
-            targetsClickedThisRound = 0;
             let numTargets = 0;
-            
             if (roundNumber == 1) {
               numTargets = 1;
             }
@@ -296,9 +317,11 @@
             else if (roundNumber == 3) {
               numTargets = 5;
             }
-            else { alert("max number of rounds hit. should not be seeing this"); }
 
             // effectively begin the round
+            console.log("starting round " + roundNumber);
+            document.getElementById("center").remove();
+            targetsClickedThisRound = 0;
             roundTimeStart = Date.now();
             placeTarget(numTargets);
             while (targetsClickedThisRound < numTargets) {
@@ -311,8 +334,33 @@
 
             currentRound++;
 
-            console.log("ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "\nhover on bullseye to start round " + currentRound);
+            // bring bullseye back to screen
-            gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "s\nhover on bullseye to start round " + currentRound;
+            center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+            center.id = "center";
+            document.body.insertAdjacentElement("afterbegin", center);
+
+            if (roundNumber == 3) {
+              // GAME OVER STUFF
+              if (totalTime < bestNormalTime || bestNormalTime == "none") {
+                alert("NEW FASTEST TIME!!! previous best: " + bestNormalTime + "s. congratulations cowboy.");
+                bestNormalTime = totalTime;
+                localStorage.setItem("bestNormalTime", bestNormalTime);
+              }
+              gameText.innerText = "ROUND: " + roundSeconds + 
+                "s\nTOTAL:   " + totalTime + 
+                "s\nBEST SCORE: " + bestNormalTime + 
+                "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;
+
+              center.addEventListener("mouseover", handleHoverStart);
+              center.addEventListener("mouseleave", handleHoverEnd);
+            }
+ 
+
             gameText.style.display = "inline";
             gameText.style.opacity = "100";
 
@@ -383,11 +431,12 @@
 
               draw.style.opacity = "0";
               
-              if (currentRound == 1) {
+              if (currentRound <= 1) {
-                gameText.innerText = "click the targets as quickly as possible!\nhover on bullseye to start.";
+                drawTargetsInCircle();
+                gameText.innerText = "after the countdown, click the targets as quickly as possible!\nhover on bullseye to start.";
               }
               else {
-                gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "s\nhover on bullseye to start round " + currentRound;
+                gameText.innerText = "ROUND: " + roundSeconds + "s\nTOTAL:   " + totalTime + "s\nhover on circle to start round " + currentRound;
               }
               gameText.style.display = "inline";
               countingDown = false;
@@ -407,18 +456,21 @@
             center = generateTarget(xFrameAdjustment, yFrameAdjustment);
             center.id = "center";
             document.body.insertAdjacentElement("afterbegin", center);
-            center.addEventListener("mouseover", handleHoverStart);
-            center.addEventListener("mouseleave", handleHoverEnd);
 
-            if (currentRound == 0) {
+            if (currentRound == 0 || (gamemode == "normal" && currentRound == 1)) {
-              drawTargetsInCircle(false);
+              drawTargetsInCircle();
+            }
+
+            if (currentRound >= 1) {
+              center.addEventListener("mouseover", handleHoverStart);
+              center.addEventListener("mouseleave", handleHoverEnd);
             }
 
             console.log('page: ' + pageWidth + ' x ' + pageHeight);
             console.log('frame: ' + frameWidth + ' x ' + frameHeight);
           }
 
-          async function drawTargetsInCircle(animate) {
+          async function drawTargetsInCircle(drawDurationSeconds) {
             let r, x, y;
             let radians;
             let target;
@@ -431,7 +483,7 @@
               target = generateTarget(x, y);
               document.getElementById("frame").insertAdjacentElement("afterbegin", target);
               
-              if (animate) await sleep(15);
+              if (drawDurationSeconds) await sleep((drawDurationSeconds * 1000) / 180);
             }
           }