(tic-tac-toe): Starting work to implement "New Game" button

frontend/src/pages/ttt/socket.ts

@@ -28,6 +28,8 @@ export interface ClientToServer {
 	gameMove: (up: GameMove) => void;
 	keepalive: () => void;
 	connectedToGame: (gameId: string) => void;
+	// TODO
+	requestNewGame: () => void;
 };
 
 export interface ServerToClient {

frontend/src/pages/ttt/ttt.html

@@ -1,6 +1,6 @@
 <div class="displaybox">
     <div id="mainbox" class="mainboxDisplay">
-        <button id="ttt-newgame-btn" class="btn-style absolute top-6 right-6">New Game</button>
+        <button id="NewGameBtn" class="btn-style absolute top-4 right-6">New Game</button>
         <h1 class="text-3xl font-bold text-gray-800">
             Tic-tac-toe Box<span id="t-username"></span>
         </h1><br>

frontend/src/pages/ttt/ttt.ts

@@ -37,14 +37,30 @@ async function handleTTT(): Promise<RouteHandlerReturn> {
 	const socket: Socket = getSocket();
 	void socket;
 	return {
-		html: tttPage,
-		postInsert: async (app) => {
+		html: tttPage, postInsert: async (app) => {
 			if (!app) {
 				return;
 			}
 			let user = await updateUser();
 			if (user === null)
 				return;
+
+			const newGameBtn = document.querySelector<HTMLButtonElement>("#NewGameBtn");
+
+			if (!newGameBtn) {
+				return showError('fatal error');
+			}
+			
+			// TODO
+			// When clicking on this button, two scenarios:
+			// not in a game -> Join queue
+			// In a game -> user clicking on the button loses the game and joins the queue, board is cleaned
+			// Should I differentiate the scenarios here or inside the requestNewGame function ?
+			newGameBtn.addEventListener("click", () => {
+				console.log('===== NEW GAME REQUESTED =====');
+				socket.emit("requestNewGame");
+			});
+
 			let curGame: CurrentGameInfo | null = null;
 
 			socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));