Remove 'p5' style, replace with 'labeled_bar'HEADmaster

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.

2 files changed, 26 insertions, 45 deletions

diff --git a/make_timer.html b/make_timer.html
index bfa7098..17fda8c 100644
--- a/make_timer.html
+++ b/make_timer.html
@@ -23,7 +23,6 @@
 						<input type="radio" id="cdstyle" name="cdstyle" value="standard">Standard Countdown</input>
 						<input type="radio" id="cdstyle" name="cdstyle" value="bar">Progress Bar</input>
 						<input type="radio" id="cdstyle" name="cdstyle" value="labeled_bar">Labeled Bar</input>
-						<input type="radio" id="cdstyle" name="cdstyle" value="p5">Persona 5</input>
 					</section>
 					<section>
 						<label for="duration">Countdown Duration, in seconds</label>
@@ -31,7 +30,7 @@
 					</section>
 					<section>
 						<label for="label_text">Text to Display Above Countdown (used in Labeled Bar)</label>
-						<input name="label_text" type="text" id="end_text">
+						<input name="label_text" type="text" id="label_text">
 					</section>
 					<section>
 						<label for="end_text">Text to Display at End of Countdown</label>
@@ -46,7 +45,7 @@
 						<input name="f_color" type="color" id="f_color">
 					</section>
 					<section>
-						<label for="b_color">Bar Color</label>
+						<label for="b_color">Bar Color (used in Bar-enabled styles)</label>
 						<input name="b_color" type="color" id="b_color">
 					</section>
 					<section class="bottom">
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));
 }