Add Persona 5 Phansite-like countdown styleHEADmaster

This *requires* custom CSS for best effect.

2 files changed, 17 insertions, 4 deletions

diff --git a/make_timer.html b/make_timer.html
index 3a6e178..1a2704c 100644
--- a/make_timer.html
+++ b/make_timer.html
@@ -21,6 +21,7 @@
 						<label for="cdstyle">Countdown Style</label>
 						<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="p5">Persona 5</input>
 					</section>
 					<section>
 						<label for="duration">Countdown Duration, in seconds</label>
diff --git a/timer.js b/timer.js
index f625094..c947036 100644
--- a/timer.js
+++ b/timer.js
@@ -23,7 +23,18 @@ function setupCountdown() {
 			break;
 		case "bar":
 			page.innerHTML = `
-			<div id="bar"><div id="progress"></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>
+			`;
+			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>
@@ -39,7 +50,7 @@ function setupCountdown() {
 		cd.style.fontFamily = params.get("f_family");
 	}
 	cd.style.color = params.get("f_color");
-	if (params.get("cdstyle") == "bar") {
+	if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
 		document.getElementById("progress").style.backgroundColor = params.get("b_color");
 	}
 
@@ -53,6 +64,7 @@ function tick() {
 			cd.removeChild(cd.firstChild);
 		}
 		let end_msg = document.createElement("div");
+		end_msg.id = "endmsg";
 		end_msg.textContent = params.get("end_text");
 		cd.appendChild(end_msg);
 		window.clearInterval(timer_id);
@@ -60,7 +72,7 @@ function tick() {
 	}
 	cur_seconds--;
 	draw();
-	if (params.get("cdstyle") == "bar") {
+	if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
 		draw_bar();
 	}
 }
@@ -71,7 +83,7 @@ function draw() {
 }
 
 function draw_bar() {
-	document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "vw";
+	document.getElementById("progress").style.width = (((params.get("duration") - cur_seconds) / params.get("duration")) * 100) + "%";
 }
 
 function zero_pad(num) {