Add 'labeled_bar' style

This style is similar to the Persona 5-inspired style, but isn't as
purpose-built.

1 files changed, 14 insertions, 2 deletions

diff --git a/timer.js b/timer.js
index c947036..c40bd4b 100644
--- a/timer.js
+++ b/timer.js
@@ -21,6 +21,18 @@ function setupCountdown() {
 			</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>
+			`;
+			break;
 		case "bar":
 			page.innerHTML = `
 			<div id="bar"><div id="progress"></div></div>
@@ -50,7 +62,7 @@ function setupCountdown() {
 		cd.style.fontFamily = params.get("f_family");
 	}
 	cd.style.color = params.get("f_color");
-	if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
+	if (params.get("cdstyle") == "labeled_bar" || params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
 		document.getElementById("progress").style.backgroundColor = params.get("b_color");
 	}
 
@@ -72,7 +84,7 @@ function tick() {
 	}
 	cur_seconds--;
 	draw();
-	if (params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
+	if (params.get("cdstyle") == "labeled_bar" || params.get("cdstyle") == "bar" || params.get("cdstyle") == "p5") {
 		draw_bar();
 	}
 }