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;