From 4b0d0aad228fa17040d9f8be42073d0404b0f06b Mon Sep 17 00:00:00 2001
From: zlg <zlg@zlg.space>
Date: Thu, 28 Aug 2025 01:34:57 -0700
Subject: Remove 'p5' style, replace with 'labeled_bar'

The more generic style supports a parameterized label instead of the
hard-coded "Are you ready to enter Game Z?"

I also took the opportunity to refactor the code so it looks for
features/values and not the specific style.
---
 timer.js | 66 +++++++++++++++++++++++-----------------------------------------
 1 file changed, 24 insertions(+), 42 deletions(-)

(limited to 'timer.js')

diff --git a/timer.js b/timer.js
index c40bd4b..7e01036 100644
--- a/timer.js
+++ b/timer.js
@@ -6,63 +6,45 @@ let cd;
 const page = document.getElementById("page");
 
 function setupCountdown() {
+	var prompt_text = "";
+	var progress_bar = "";
 	params = new URLSearchParams(document.location.search);
 	for ([key, value] of params.entries()) {
 		console.log(`${key}: ${value}`);
 	}
 
 	switch (params.get("cdstyle")) {
-		case "standard":
-			page.innerHTML = `
-			<div id="countdown">
-				<div id="minutes">00</div>
-				<div id="separator">:</div>
-				<div id="seconds">00</div>
-			</div>
-			`;
-			break;
 		case "labeled_bar":
-			var label_text = params.get("label_text");
-			page.innerHTML = `
-			<div id="prompt">${label_text}</div>
-			<div id="bar"><div id="progress"></div></div>
-			<div id="countdown">
-				<div id="minutes">00</div>
-				<div id="separator">:</div>
-				<div id="seconds">00</div>
-			</div>
-			`;
+			let label_text = params.get("label_text");
+			prompt_text = `<div id="prompt">${label_text}</div>`;
+			progress_bar = `<div id="bar"><div id="progress"></div></div>`;
 			break;
 		case "bar":
-			page.innerHTML = `
-			<div id="bar"><div id="progress"></div></div>
-			<div id="countdown">
-				<div id="minutes">00</div>
-				<div id="separator">:</div>
-				<div id="seconds">00</div>
-			</div>
-			`;
-			break;
-		case "p5":
-			page.innerHTML = `
-			<div id="prompt">Are you ready to <span>Enter Game Z</span>?</div>
-			<div id="bar"><div id="progress"></div></div>
-			<div id="countdown">
-				<div id="minutes">00</div>
-				<div id="separator">:</div>
-				<div id="seconds">00</div>
-			</div>
-			`;
+			progress_bar = `<div id="bar"><div id="progress"></div></div>`;
 			break;
 	}
+	page_template = `
+		${prompt_text}
+		${progress_bar}
+		<div id="countdown">
+			<div id="minutes">00</div>
+			<div id="separator">:</div>
+			<div id="seconds">00</div>
+		</div>
+	`;
+	page.innerHTML = page_template;
 	cd = document.getElementById("countdown");
+	let prompt = document.getElementById("prompt");
 	cur_seconds = parseInt(params.get("duration"));
 
 	if (params.get("f_family") !== "") {
 		cd.style.fontFamily = params.get("f_family");
+		if (prompt) {
+			document.getElementById("prompt").style.fontFamily = params.get("f_family");
+		}
 	}
 	cd.style.color = params.get("f_color");
-	if (params.get("cdstyle") == "labeled_bar" || params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
+	if (document.getElementById("progress")) {
 		document.getElementById("progress").style.backgroundColor = params.get("b_color");
 	}
 
@@ -84,12 +66,12 @@ function tick() {
 	}
 	cur_seconds--;
 	draw();
-	if (params.get("cdstyle") == "labeled_bar" || params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
-		draw_bar();
-	}
 }
 
 function draw() {
+	if (document.getElementById("progress")) {
+		draw_bar();
+	}
 	document.getElementById("minutes").textContent = zero_pad(Math.floor(cur_seconds / 60));
 	document.getElementById("seconds").textContent = zero_pad((cur_seconds % 60));
 }
-- 
cgit v1.2.3-54-g00ecf