game mode selection ui created

1 files changed, 323 insertions, 58 deletions

diff --git a/quickdraw-game.html b/quickdraw-game.html
index 77191c3..7d7b9e4 100644
--- a/quickdraw-game.html
+++ b/quickdraw-game.html
@@ -1,112 +1,377 @@
 <!DOCTYPE html>
 <html>
     <head>
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+
         <style>
             * {
                 box-sizing: border-box;
                 margin: 0;
                 padding: 0;
+                font-family: sans-serif;
             }
             html {
                 height: 100vh;
                 width: 100vw;
                 background-color: #161616;
+                font-size: 24px;
+                overflow-x: hidden;
             }
             body {
                 display: flex;
+                flex-direction: column;
+                align-items: center;
                 justify-content: center;
+                height: 100vh;
+                width: 100vw;
             }
-            #target {
+            #frame {
+                width: 60%;
+                height: 75%;
+                /** border: 1px solid white; */
+            }
+            #center {
+                height: 20px;
+                width: 20px;
+                background-color: red;
+                position: absolute; 
+            }
+            
+            .target {
                 height: 20px;
                 width: 20px;
                 background-color: red;
                 position: absolute;
             }
-            #frame {
-                width: 75%;
-                height: 100vh;
-                border: 1px solid white;
+
+            .hidden {
+              display: none;
+              opacity: 0;
+            }
+            .fade {
+              transition: opacity 1s;
+            }
+
+            .title {
+              font-weight: bold;
+              font-size: 2rem;
+            }
+
+            #text-box {
+                display: flex;
+                flex-direction: row;
+                align-content: end;
+                justify-content: space-evenly;
+                color: red;
+                width: 100%;
+                min-height: 2rem;
+                line-height: 2rem;
+                margin-top: 2rem;
+            }
+
+            @media screen and (max-width: 750px) {
+              html {
+                font-size: 32px;
+              }
+              #text-box {
+                flex-direction: column;
+                align-items: center;
+              }
+              .text  { font-size: .5rem; }
+              .title { font-size: 2rem; }
             }
+
         </style>
     </head>
     <body>
 
-        <div id="frame">
+        <div id="frame"></div>
+
+
+
+        <div id="text-box">
+          <span id="intro1" class="hidden title">QUICK</span>
+          <span id="intro2" class="hidden title">DRAW</span>
+          
+          <span id="instructions" class="hidden fade">hover on bullseye to start</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>
+
+
+          <div id="game-modes" class="hidden fade">
+            <button id="normal" onclick="handleNormalMode">normal mode</button>
+            <button id="normal">infinite mode</button>
+            <button id="normal">countdown mode</button>
+          </div>
+
+
+          <span id="draw" class="hidden title">DRAW!</span>
         </div>
 
         <script>
+           let gameBorderWidth = 1;
+           let targetWidth = 20;
+           let targetHeight = 20;
 
-            const gameBorderWidth = 1;
-            const targetWidth = 20;
-            const targetHeight = 20;
+           let pageHeight;
+           let pageWidth;
 
-            let pageWidth = window.innerWidth;
-            let pageHeight = window.innerHeight;
+           let frameElement;
+           let frameRect;
+           let frameHeight;
+           let frameWidth;
 
-            const frameElement = document.getElementById("frame");
-            let frameHeight = frameElement.offsetHeight;
-            let frameWidth = frameElement.offsetWidth;
-            
-            let target;
+           let center;
+           let ratio;
 
+           let xFrameAdjustment;
+           let yFrameAdjustment;
 
-            window.addEventListener("resize", (e) => {
-                this.pageWidth = window.innerWidth;
-                this.pageHeight = window.innerHeight;
-                this.frameHeight = frameElement.offsetHeight - targetHeight;
-                this.frameWidth = frameElement.offsetWidth - targetWidth;
-                console.log('page: ' + this.pageWidth + ' x ' + this.pageHeight);
-                console.log('frame: ' + this.frameWidth + ' x ' + this.frameHeight);
-            });
+           let hovering = false;
 
-            let k, r, x, y;
-            let radians;
+           let hoverCount = 0;
+           
+           let currentRound = 0;
+           let countingDown = false;
 
-            let ratio = frameHeight / frameWidth;
+           // text elements
+           let intro1 = document.getElementById("intro1");
+           let intro2 = document.getElementById("intro2");
+           let instructions = document.getElementById("instructions");
 
-            let xFrameAdjustment = ((pageWidth - frameWidth) * 2) - (targetWidth / 2);
-            let yFrameAdjustment = (frameHeight / 2) - (targetWidth / 2);
+           let one = document.getElementById("countdown1");
+           let two = document.getElementById("countdown2");
+           let three = document.getElementById("countdown3");
 
-            generateTarget(xFrameAdjustment, yFrameAdjustment)
+           let draw = document.getElementById("draw");
 
-            for (let i = 0; i < 360; i++) {
-              r = (frameWidth / 2) - (targetWidth / 2);
+           window.addEventListener("load", initGame);
 
-              radians = degreesToRadians(i);
+           function setParameters(event) {
+             pageHeight = window.innerHeight;
+             pageWidth = window.innerWidth;
 
-              x = ((r * 1 * Math.cos(radians)) + xFrameAdjustment);
-              y = ((r * ratio * Math.sin(radians)) + yFrameAdjustment);
-              console.log(x + ', ' + y);
+             frameElement = document.getElementById("frame");
+             frameRect = frameElement.getBoundingClientRect();
+             frameHeight = frameElement.offsetHeight;
+             frameWidth = frameElement.offsetWidth;
 
-              generateTarget(x, y);
-            }
+             // ratio = (frameHeight - (gameBorderWidth*2)) / (frameWidth - (gameBorderWidth*2));
+             ratio = frameHeight / frameWidth;
+             
+             // adjustments to find center of frame in absolute coords (for origin of target cirlce)
+             xFrameAdjustment = ((frameWidth / 2) + frameRect.left) - (targetWidth / 2);
+             yFrameAdjustment = ((frameHeight / 2) + frameRect.top) - (targetWidth / 2);
 
-            // init logs:
-            console.log('page: ' + pageWidth + ' x ' + pageHeight);
-            console.log('frame: ' + frameWidth + ' x ' + frameHeight);
+             // init logs:
+             console.log('page: ' + pageWidth + ' x ' + pageHeight);
+             console.log('frame: ' + frameWidth + ' x ' + frameHeight);
+           }
 
+           async function initGame() {
+             setParameters();
 
-            function degreesToRadians(degrees) {
-              return degrees * (Math.PI / 180)
-            }
-            
-            
-            function generateTarget(x, y) {
-                const target = document.createElement("div");
-                target.id = "target";
-                target.style.top = y +'px';
-                target.style.left = x + 'px';
-                // console.log(target);
-                document.getElementById("frame").insertAdjacentElement("afterbegin", target);
-            }
+             center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+             center.id = "center";
+             document.body.insertAdjacentElement("afterbegin", center);
+
+             await drawTargetsInCircle(true);
+
+             // insert intro elements into document flow
+             intro1.style.display = "inline";
+             intro2.style.display = "inline";
 
+             // reveal intro elements
+             intro1.style.opacity = "100";
+             await sleep(500);
+             intro2.style.opacity = "100";
+             await sleep(1500);
 
-            function getRandomInt(min, max) {
-                const minCeiled = Math.ceil(min);
-                const maxFloored = Math.floor(max);
-                return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); // The maximum is exclusive and the minimum is inclusive
+             intro1.classList.add("fade");
+             intro2.classList.add("fade");
+
+             intro1.style.opacity = "0";
+             intro2.style.opacity = "0";
+
+             await sleep(1000);
+
+             intro1.style.display = "none";
+             intro2.style.display = "none";
+
+             window.addEventListener("resize", handleResize);
+
+             document.getElementById("game-modes").style.display = "inline";
+             await sleep(500);
+             document.getElementById("game-modes").style.opacity = "100";
+           }
+
+           function handleNormalMode(e) {
+             center.addEventListener("mouseover", handleHoverStart);
+             center.addEventListener("mouseleave", handleHoverEnd);
+
+             // instructions.style.display = "inline";
+             // instructions.style.opacity = "100";
+           }
+
+           function handleHoverStart(e) {
+             e.target.style.backgroundColor = "green";
+             if (currentRound == 0) return;
+
+             hovering = true;
+             hoverCount++;
+
+             frameElement.replaceChildren();
+
+             intro1.style.display = "none";
+             intro2.style.display = "none";
+             instructions.style.display = "none";
+
+             // if (infinityMode)
+
+             if (currentRound == 0) { startRoundOne(); }
+           }
+
+           async function startRoundOne() {
+             if (!await startCountdown(hoverCount)) {
+              // if user canceled hover, don't continue round
+              return;
+             }
+             console.log('success');
+           }
+
+           async function startCountdown(hoverNumber) {
+             instructions.style.display = "none";
+
+             countingDown = true;
+             await sleep(1000);
+
+             one.style.opacity = "0";
+             two.style.opacity = "0";
+             three.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.display = "inline";
+             two.style.display = "inline";
+             three.style.display = "inline";
+
+             three.style.opacity = "100";
+             await sleep(1000);
+             
+             two.style.opacity = "100";
+             await sleep(1000);
+             
+             one.style.opacity = "100";
+             await sleep(1000);
+
+             if (!hovering || hoverNumber != hoverCount) return false;
+             one.style.display = "none";
+             two.style.display = "none";
+             three.style.display = "none";
+
+             one.style.opacity = "0";
+             two.style.opacity = "0";
+             three.style.opacity = "0";
+
+             draw.style.display = "inline";
+             draw.style.opacity = "100";
+
+             countingDown = false;
+             setTimeout(() => {draw.style.display = "none"; draw.style.opacity = "0"; }, 1000);
+             return true;
+           }
+
+           function handleHoverEnd(e) {
+             hovering = false;
+             e.target.style.backgroundColor = "red";
+
+             if (countingDown) {
+               one.style.display = "none";
+               two.style.display = "none";
+               three.style.display = "none";
+               draw.style.display = "none";
+
+               one.style.opacity = "0";
+               two.style.opacity = "0";
+               three.style.opacity = "0";
+
+               draw.style.opacity = "0";
+               
+               instructions.style.display = "inline";
+               countingDown = false;
+             }
+           }
+
+           function handleResize(event) {
+             frameElement.replaceChildren();
+             setParameters();
+             
+             document.getElementById("center").remove();
+             center = generateTarget(xFrameAdjustment, yFrameAdjustment);
+             center.id = "center";
+             document.body.insertAdjacentElement("afterbegin", center);
+             center.addEventListener("mouseover", handleHoverStart);
+             center.addEventListener("mouseleave", handleHoverEnd);
+             
+             if (currentRound == 0) {
+               drawTargetsInCircle(false);
+             }
+
+             console.log('page: ' + pageWidth + ' x ' + pageHeight);
+             console.log('frame: ' + frameWidth + ' x ' + frameHeight);
+          }
+
+          async function drawTargetsInCircle(animate) {
+            let r, x, y;
+            let radians;
+            let target;
+            for (let i = 0; i < 360; i = i + 2) {
+              r = (frameWidth / 2) - (targetWidth / 2) - (gameBorderWidth * 2);
+              // r = (frameWidth / 2) - (targetWidth / 2);
+
+              radians = degreesToRadians(i);
+
+              x = (r * 1 * Math.cos(radians)) + xFrameAdjustment;
+              y = (r * ratio * Math.sin(radians)) + yFrameAdjustment;
+
+              // console.log(x + ', ' + y);
+              // console.log(ratio);
+              // console.log(xFrameAdjustment + 'adj,  ' + yFrameAdjustment + 'adj');
+
+              target = generateTarget(x, y);
+              document.getElementById("frame").insertAdjacentElement("afterbegin", target);
+              
+              if (animate) await sleep(15);
             }
+          }
+
+          function sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+          }
+
+          function degreesToRadians(degrees) {
+            return degrees * (Math.PI / 180)
+          }
+          
+          
+          function generateTarget(x, y) {
+              const target = document.createElement("div");
+              target.classList.add("target");
+              target.style.top = y +'px';
+              target.style.left = x + 'px';
+              // console.log(target);
+              return target;
+          }
+
+
+          function getRandomInt(min, max) {
+              const minCeiled = Math.ceil(min);
+              const maxFloored = Math.floor(max);
+              return Math.floor(Math.random() * (maxFloored - minCeiled) + minCeiled); // The maximum is exclusive and the minimum is inclusive
+          }
         </script>
     </body>
 </html>