From c8845d5432c3ed8458694b57ee96e4e0efa0960b Mon Sep 17 00:00:00 2001
From: George Eaton <george@dxw.com>
Date: Wed, 10 Apr 2024 11:29:17 +0100
Subject: [PATCH 1/3] WIP render timer on page

This is currently rendering "15" on the page (for the initial timer
number). We need to decrease it by 1 each second. This is currently
separate from the XState countdown timer, but there might be a way to
read this value in future. This is a first step.

We've spotted a bug where this is currently rendering multiple times,
but we'll solve that soon.
---
 client/index.html         |  2 ++
 client/index.ts           | 14 ++++++++++++++
 server/@types/events.d.ts |  1 +
 server/models/round.ts    |  4 ++++
 server/socketServer.ts    |  4 ++++
 5 files changed, 25 insertions(+)

diff --git a/client/index.html b/client/index.html
index 99b97d04..e37954dc 100644
--- a/client/index.html
+++ b/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"
diff --git a/client/index.ts b/client/index.ts
index b8c115a4..affb60d1 100644
--- a/client/index.ts
+++ b/client/index.ts
@@ -93,6 +93,16 @@ 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");
+	const timerParagraph = document.createElement("p")
+	timerParagraph.innerText = "15"
+	timerSectionElement.appendChild(timerParagraph)
+	// 15 second timer
+	// tick down every second and update the rendered value
+}
+
+
 let currentPlayer: Player;
 let playerNames: Player["name"][] = [];
 
@@ -130,6 +140,10 @@ socket.on("round:startable", () => {
 	showStartButton();
 });
 
+socket.on("round:countdown", () => {
+	renderTimer();
+})
+
 nameFormElement.addEventListener("submit", (e) => {
 	e.preventDefault();
 	addPlayer(nameFormElement.elements.name.value);
diff --git a/server/@types/events.d.ts b/server/@types/events.d.ts
index f8bcd4ed..597fd5ad 100644
--- a/server/@types/events.d.ts
+++ b/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;
diff --git a/server/models/round.ts b/server/models/round.ts
index c8bd6359..5abd8e3a 100644
--- a/server/models/round.ts
+++ b/server/models/round.ts
@@ -24,6 +24,10 @@ class Round {
 					);
 					break;
 				}
+				case "countdown": {
+					this.server.onCountdown()
+					break;
+				}
 				default:
 					break;
 			}
diff --git a/server/socketServer.ts b/server/socketServer.ts
index 99871e91..aab31da6 100644
--- a/server/socketServer.ts
+++ b/server/socketServer.ts
@@ -55,4 +55,8 @@ export class SocketServer {
 	onShowStartButton() {
 		this.server.emit("round:startable");
 	}
+
+	onCountdown() {
+		this.server.emit("round:countdown")
+	}
 }

From cc2ff7f7d866c0c2113e4ae48cfe8cfba3ba0f31 Mon Sep 17 00:00:00 2001
From: George Eaton <george@dxw.com>
Date: Wed, 10 Apr 2024 11:31:44 +0100
Subject: [PATCH 2/3] WIP remove typegen?

We had to remove this to get the "countdown" switch statement to work,
but maybe there's a way to get it working.
---
 server/machines/round.ts         |  1 -
 server/machines/round.typegen.ts | 24 ------------------------
 2 files changed, 25 deletions(-)
 delete mode 100644 server/machines/round.typegen.ts

diff --git a/server/machines/round.ts b/server/machines/round.ts
index 54238d66..503ea1c0 100644
--- a/server/machines/round.ts
+++ b/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: {
diff --git a/server/machines/round.typegen.ts b/server/machines/round.typegen.ts
deleted file mode 100644
index f177e091..00000000
--- a/server/machines/round.typegen.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-// This file was automatically generated. Edits will be overwritten
-
-export interface Typegen0 {
-	"@@xstate/typegen": true;
-	internalEvents: {
-		"xstate.init": { type: "xstate.init" };
-	};
-	invokeSrcNameMap: {};
-	missingImplementations: {
-		actions: never;
-		delays: never;
-		guards: never;
-		services: never;
-	};
-	eventsCausingActions: {
-		addAnswer: "playerSubmitsAnswer";
-		setQuestion: "xstate.init";
-	};
-	eventsCausingDelays: {};
-	eventsCausingGuards: {};
-	eventsCausingServices: {};
-	matchesStates: "roundStart";
-	tags: never;
-}

From a9c69a1edb9bb787825f4bb762c940cef2fe00f0 Mon Sep 17 00:00:00 2001
From: rich <rich.james@dxw.com>
Date: Fri, 12 Apr 2024 17:32:57 +0100
Subject: [PATCH 3/3] Add countdown

---
 client/index.ts | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/client/index.ts b/client/index.ts
index affb60d1..7699ebee 100644
--- a/client/index.ts
+++ b/client/index.ts
@@ -95,13 +95,34 @@ const playerNameElement = getElementById("player-name");
 
 const renderTimer = (): void => {
 	const timerSectionElement = getElementById("timer-section");
-	const timerParagraph = document.createElement("p")
-	timerParagraph.innerText = "15"
-	timerSectionElement.appendChild(timerParagraph)
-	// 15 second timer
-	// tick down every second and update the rendered value
-}
+	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"][] = [];
@@ -142,7 +163,7 @@ socket.on("round:startable", () => {
 
 socket.on("round:countdown", () => {
 	renderTimer();
-})
+});
 
 nameFormElement.addEventListener("submit", (e) => {
 	e.preventDefault();