From 61a98ca89d7959b48d2da2951a254f0375971b0c Mon Sep 17 00:00:00 2001 From: simon-ec Date: Wed, 29 Jul 2026 19:57:19 -0400 Subject: [PATCH] lowk might be done ? --- quickdraw-game.html | 77 ++++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 32 deletions(-) diff --git a/quickdraw-game.html b/quickdraw-game.html index 77bc631..f95ba01 100644 --- a/quickdraw-game.html +++ b/quickdraw-game.html @@ -37,8 +37,8 @@ #center { height: 50px; width: 50px; - background-color: var(--bg); - border: 5px solid red; + background-color: red; + /** border: 5px solid red; */ border-radius: 50%; position: absolute; border-radius: 50%; @@ -47,13 +47,32 @@ .target { height: 50px; width: 50px; - background-color: red; + background-color: var(--bg); + border: 10px solid red; position: absolute; border-radius: 50%; } .target:active { background-color: orange; } + .target::after { + position: absolute; + background-color: red; + border-radius: 2rem; + height: 10px; + width: 10px; + top: 10px; + left: 10px; + content: ""; + } + + .red-dot { + height: 50px; + width: 50px; + background-color: red; + position: absolute; + border-radius: 50%; + } .hidden { display: none; @@ -261,7 +280,7 @@ center.id = "center"; document.body.insertAdjacentElement("afterbegin", center); - await drawTargetsInCircle(); + await drawCircle(2); if (needsResizeAdjustment) { // auto-reset screen if page was resized during animation handlePageResize(); @@ -308,14 +327,15 @@ gameText.style.display = "none"; gameText.style.opacity = "0"; + setParameters(); + center = generateTarget(xFrameAdjustment, yFrameAdjustment); + center.id = "center"; + document.body.insertAdjacentElement("afterbegin", center); + if (gamemode == "normal") { handleNormalMode(e); } else if (gamemode == "countdown") { - setParameters(); - center = generateTarget(xFrameAdjustment, yFrameAdjustment); - center.id = "center"; - document.body.insertAdjacentElement("afterbegin", center); handleCountdownMode(e); } else { @@ -364,13 +384,11 @@ } async function handleReset(e) { - // (bullseye won't be on screen after a countdown round) - if (gamemode == "countdown") { - setParameters(); - center = generateTarget(xFrameAdjustment, yFrameAdjustment); - center.id = "center"; - document.body.insertAdjacentElement("afterbegin", center); - } + // bullseye won't be on screen after a game + setParameters(); + center = generateTarget(xFrameAdjustment, yFrameAdjustment); + center.id = "center"; + document.body.insertAdjacentElement("afterbegin", center); // refresh game state variables gamemode = ""; @@ -386,7 +404,7 @@ // reintroduce main menu elements into DOM flow await sleep(800); - await drawTargetsInCircle(2); + await drawCircle(2); await fadeMainMenuIn(); // auto-reset bullseye if page was resized during animation @@ -523,18 +541,13 @@ handlePageResize(); } // even if no resize, bring bullseye back to screen - else { - center = generateTarget(xFrameAdjustment, yFrameAdjustment); - center.id = "center"; - document.body.insertAdjacentElement("afterbegin", center); - } // ensure "DRAW" isn't still lingering on screen after round draw.style.display = "none"; draw.style.opacity = "0"; + // GAME OVER STUFF if (roundNumber == 3) { - // GAME OVER STUFF if (totalTime < bestNormalTime || bestNormalTime == 0) { if (bestNormalTime == 0) { alert("NEW FASTEST TIME!!! congratulations cowboy."); @@ -545,6 +558,7 @@ bestNormalTime = totalTime; localStorage.setItem("bestNormalTime", bestNormalTime); } + gameText.innerText = "ROUND: " + roundSeconds.toFixed(3) + "s\nTOTAL: " + totalTime.toFixed(3) + "s\nBEST SCORE: " + bestNormalTime.toFixed(3); @@ -555,7 +569,12 @@ gameOverButtons.style.display = "flex"; gameOverButtons.style.opacity = "100"; } + // NORMAL END OF ROUND STUFF else { + center = generateTarget(xFrameAdjustment, yFrameAdjustment); + center.id = "center"; + document.body.insertAdjacentElement("afterbegin", center); + 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; @@ -684,7 +703,7 @@ center = generateTarget(xFrameAdjustment, yFrameAdjustment); center.id = "center"; document.body.insertAdjacentElement("afterbegin", center); - drawTargetsInCircle(0); + drawCircle(0); } // if inbetween gameplay rounds, move middle circle and add game event listener else if ((gamemode == "normal" && currentRound < 4) || @@ -698,19 +717,13 @@ center.addEventListener("mouseleave", handleHoverEnd); center.addEventListener("touchend", handleHoverEnd); } - else if (gamemode == "normal" && currentRound == 4) { - center.remove(); - center = generateTarget(xFrameAdjustment, yFrameAdjustment); - center.id = "center"; - document.body.insertAdjacentElement("afterbegin", center); - } console.log('page: ' + pageWidth + ' x ' + pageHeight); console.log('frame: ' + frameWidth + ' x ' + frameHeight); needsResizeAdjustment = false; } - async function drawTargetsInCircle(drawDurationSeconds) { + async function drawCircle(drawDurationSeconds) { drawingCircle = true; let r, x, y; let radians; @@ -722,7 +735,7 @@ y = (r * ratio * Math.sin(radians)) + yFrameAdjustment; target = generateTarget(x, y); - target.classList.add("target"); + target.classList.add("red-dot"); document.getElementById("frame").insertAdjacentElement("afterbegin", target); if (drawDurationSeconds) { @@ -760,7 +773,7 @@ } async function fadeMainMenuOut() { - let targets = document.getElementsByClassName("target"); + let targets = document.getElementsByClassName("red-dot"); for (let i = 0; i < targets.length; i++) { console.log(targets[i]); targets[i].style.opacity = 0;