resizing / page reset is much cleaner and words fully with normal mode

quickdraw-game.html

@@ -188,9 +188,9 @@
           </div>
 
           <div id="normal-sub-modes" class="button-container hidden fade">
-            <button id="normal-3-rounds" onclick="setNormalRounds(3)">3 rounds</button>
+            <button id="normal-3-rounds" onclick="setupNormalMode(3)">3 rounds</button>
-            <button id="normal-6-rounds" onclick="setNormalRounds(6)">6 rounds</button>
+            <button id="normal-6-rounds" onclick="setupNormalMode(6)">6 rounds</button>
-            <button id="normal-10-rounds" onclick="setNormalRounds(10)">10 rounds</button>
+            <button id="normal-10-rounds" onclick="setupNormalMode(10)">10 rounds</button>
           </div>
 
           <!-- pre-round text -->
@@ -247,11 +247,13 @@
           
           // "NORMAL" MODE ONLY VARIABLES
           let currentRound    = 0;
+          let maxNormalRounds = 0;
           let totalTime       = 0.0;
           let roundSeconds    = 0.0;
           let roundTimeStart  = 0;
           let roundTimeEnd    = 0;
           let bestNormalTime  = 0;
+          let normalBullseyeNeeded = false;
 
           // "COUNTDOWN" MODE ONLY VARIABLES
           let countdownBullseyeNeeded = false;
@@ -329,10 +331,7 @@
 
           async function handleNormalMode(e) {
             gamemode = "normal";
-
+            normalBullseyeNeeded = true;
-            // ensure mode parameters are reset
-            currentRound = 1;
-            totalTime = 0;
 
             await fadeMainMenuOut();
             
@@ -340,13 +339,17 @@
             normalSubModes.style.opacity = "100";
           }
 
-          function setNormalRounds(numRounds) {
+          function setupNormalMode(numRounds) {
             // fade buttons out
             normalSubModes.style.opacity = "0";
             sleep(500);
             normalSubModes.style.display = "none";
 
+            // ensure mode parameters are [re]set
+            currentRound = 1;
             maxNormalRounds = numRounds;
+            totalTime = 0;
+
             beginNormalMode();
           }
 
@@ -376,6 +379,7 @@
              return;
             }
 
+            targetsClicked = 0;
             if (roundNumber == maxNormalRounds) {
               numTargets = roundNumber * 2;
             }
@@ -386,8 +390,8 @@
             // effectively begin the round
             console.log("starting round " + roundNumber);
             center.remove();
+            normalBullseyeNeeded = false;
 
-            targetsClicked = 0;
             roundTimeStart = Date.now();
 
             randomTargetGenerator(numTargets);
@@ -400,11 +404,9 @@
             roundSeconds = (roundTimeEnd - roundTimeStart) / 1000;
             totalTime += roundSeconds;
 
-            currentRound++;
-
             // auto-reset bullseye if page gets resized at all
             if (needsResizeAdjustment) { 
-              handlePageResize();
+              setParameters();
             }
 
             // ensure "DRAW" isn't still lingering on screen after round
@@ -446,6 +448,9 @@
               center.addEventListener("mouseover", handleHoverStart);
               center.addEventListener("mouseleave", handleHoverEnd);
               center.addEventListener("touchend", handleHoverEnd);
+
+              normalBullseyeNeeded = true;
+              currentRound++;
             }
 
             gameText.style.display = "inline";
@@ -650,7 +655,7 @@
             }
           }
 
-async function handlePlayAgain(e) {
+          async function handlePlayAgain(e) {
             // hide game over buttons
             gameOverButtons.style.display = "none";
             gameOverButtons.style.opacity = "0";
@@ -721,25 +726,18 @@ async function handlePlayAgain(e) {
             frameElement.replaceChildren();
             setParameters();
 
-            // if at main menu, resize bullseye
+            // if at main menu, move bullseye
             if (gamemode == "") {
-              center.remove();
+              center.style.top = yFrameAdjustment + "px";
-              center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+              center.style.left = xFrameAdjustment + "px";
-              center.id = "center";
-              document.body.insertAdjacentElement("afterbegin", center);
               drawCircle(0);
             }
-            // if inbetween gameplay rounds, move middle circle and add game event listener
+            // if inbetween gameplay rounds, move bullseye w/ game event listener
-            else if ((gamemode == "normal" && currentRound < 4) ||
+            else if ((gamemode == "normal" && normalBullseyeNeeded) ||
               (gamemode == "countdown" && countdownBullseyeNeeded)
             ) {
-              center.remove();
+              center.style.top = yFrameAdjustment + "px";
-              center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+              center.style.left = xFrameAdjustment + "px";
-              center.id = "center";
-              document.body.insertAdjacentElement("afterbegin", center); 
-              center.addEventListener("mouseover", handleHoverStart);
-              center.addEventListener("mouseleave", handleHoverEnd);
-              center.addEventListener("touchend", handleHoverEnd);
             }
 
             console.log('page: ' + pageWidth + ' x ' + pageHeight);
@@ -806,6 +804,7 @@ async function handlePlayAgain(e) {
             title2.style.opacity = "0";
             gameModes.style.opacity = "0";
             await sleep(500);
+            frame.replaceChildren();
             titleContainer.style.display = "none";
             gameModes.style.display = "none";