diff options
| -rw-r--r-- | make_timer.html | 1 | ||||
| -rw-r--r-- | timer.js | 20 |
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> @@ -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) { |