Render timer on page

client/index.html

@@ -88,6 +88,8 @@ <h2>Players</h2>
       </form>
     </template>
 
+    <section id="timer-section"></section>
+
     <script
       src="https://cdn.socket.io/4.1.2/socket.io.min.js"
       crossorigin="anonymous"

client/index.ts

@@ -93,6 +93,37 @@ const nameFormElement = getElementById("name-form") as NameFormElement;
 const playerListElement = getElementById("player-list");
 const playerNameElement = getElementById("player-name");
 
+const renderTimer = (): void => {
+	const timerSectionElement = getElementById("timer-section");
+	renderInitialTimer(timerSectionElement);
+	renderCountdown(timerSectionElement);
+};
+
+const renderInitialTimer = (timerElement: HTMLElement): void => {
+	const secondsUntilRoundEnd = document.createElement("p");
+	secondsUntilRoundEnd.innerText = "15";
+	timerElement.appendChild(secondsUntilRoundEnd);
+	appendTimerSuffix(secondsUntilRoundEnd);
+};
+
+const renderCountdown = (timerElement: HTMLElement) => {
+	let secondsElapsed = 0;
+	const updateTimer = setInterval(() => {
+		secondsElapsed++;
+		timerElement.innerText = (15 - secondsElapsed).toString();
+		appendTimerSuffix(timerElement);
+		if (secondsElapsed === 15) {
+			clearInterval(updateTimer);
+		}
+	}, 1000);
+};
+
+const appendTimerSuffix = (timerElement: HTMLElement) => {
+	const description = document.createElement("span");
+	description.innerText = " seconds left";
+	timerElement.appendChild(description);
+};
+
 let currentPlayer: Player;
 let playerNames: Player["name"][] = [];
 
@@ -130,6 +161,10 @@ socket.on("round:startable", () => {
 	showStartButton();
 });
 
+socket.on("round:countdown", () => {
+	renderTimer();
+});
+
 nameFormElement.addEventListener("submit", (e) => {
 	e.preventDefault();
 	addPlayer(nameFormElement.elements.name.value);

server/@types/events.d.ts

@@ -3,6 +3,7 @@ import type { Colour, Player, Question } from "./entities";
 export interface ClientboundSocketServerEvents {
 	"round:startable": () => void;
 	"round:start": () => void;
+	"round:countdown": () => void;
 	"player:set": (player: Player) => void;
 	"players:get": (playerNames: Player["name"][]) => void;
 	"question:get": (question: Question) => void;

server/machines/round.ts

@@ -29,7 +29,6 @@ const roundMachine = createMachine(
 		types: {
 			context: {} as Context,
 			events: {} as Event,
-			typegen: {} as import("./round.typegen").Typegen0,
 		},
 		states: {
 			roundStart: {

server/models/round.ts

@@ -24,6 +24,10 @@ class Round {
 					);
 					break;
 				}
+				case "countdown": {
+					this.server.onCountdown()
+					break;
+				}
 				default:
 					break;
 			}

server/socketServer.ts

@@ -55,4 +55,8 @@ export class SocketServer {
 	onShowStartButton() {
 		this.server.emit("round:startable");
 	}
+
+	onCountdown() {
+		this.server.emit("round:countdown")
+	}
 }