From 9fbfe40f7fb923d648d3f3d3d13b43dd1c1b0fcb Mon Sep 17 00:00:00 2001
From: MiguelMLorente <miguel.munoz.lorente.14@gmail.com>
Date: Sun, 9 Feb 2025 15:24:43 +0100
Subject: [PATCH] Create page transition from lobby to in-game

---
 interface/index.ts                         |  1 +
 interface/server-events/StartRoundEvent.ts | 14 ++++++++++++++
 web/src/App.tsx                            |  9 ++++++++-
 web/src/pages/lobby/LobbyPage.tsx          |  5 +++--
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 interface/server-events/StartRoundEvent.ts

diff --git a/interface/index.ts b/interface/index.ts
index 6537a36..c01aa4a 100644
--- a/interface/index.ts
+++ b/interface/index.ts
@@ -7,6 +7,7 @@ export * from "./constants/TrackType";
 export * from "./server-events/CreateLobbyError";
 export * from "./server-events/ServerError";
 export * from "./server-events/ServerEvent";
+export * from "./server-events/StartRoundEvent";
 export * from "./server-events/UpdateLobbyEvent";
 export * from "./client-events/ClientEvent";
 export * from "./client-events/CreateLobbyEvent";
diff --git a/interface/server-events/StartRoundEvent.ts b/interface/server-events/StartRoundEvent.ts
new file mode 100644
index 0000000..75179fc
--- /dev/null
+++ b/interface/server-events/StartRoundEvent.ts
@@ -0,0 +1,14 @@
+import { Socket } from "socket.io-client";
+import { ServerEvent } from "./ServerEvent";
+import { PieceId } from "../constants/Pieces";
+
+export type StartRoundEvent = {
+  pieceIds: PieceId[];
+};
+
+export function attachHandlerToStartRoundEvent(
+  socket: Socket,
+  handler: (event: StartRoundEvent) => void,
+): void {
+  socket.once(ServerEvent.START_ROUND, handler);
+}
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 4a920d8..101a8ea 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -4,7 +4,10 @@ import LandingPage from "./pages/landing/LandingPage";
 import GamePage from "./pages/game/GamePage";
 import "./App.scss";
 import LobbyPage from "./pages/lobby/LobbyPage";
-import { attachHandlerToUpdateLobbyEvent } from "interface";
+import {
+  attachHandlerToStartRoundEvent,
+  attachHandlerToUpdateLobbyEvent,
+} from "interface";
 
 export interface AppProps {
   socket: Socket;
@@ -24,6 +27,10 @@ const App = (props: AppProps) => {
         setGameCode(event.gameCode);
         setRenderedPage("LOBBY");
       });
+    } else if (renderedPage === "LOBBY") {
+      attachHandlerToStartRoundEvent(socket, (event) => {
+        setRenderedPage("GAME");
+      });
     }
   }, [renderedPage]);
 
diff --git a/web/src/pages/lobby/LobbyPage.tsx b/web/src/pages/lobby/LobbyPage.tsx
index e92f168..a336d29 100644
--- a/web/src/pages/lobby/LobbyPage.tsx
+++ b/web/src/pages/lobby/LobbyPage.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import "./LobbyPage.scss";
 import { Socket } from "socket.io-client";
-import { attachHandlerToUpdateLobbyEvent } from "interface";
+import { attachHandlerToUpdateLobbyEvent, ClientEvent } from "interface";
 
 export interface LobbyPageProps {
   initialPlayerNames: string[];
@@ -16,6 +16,7 @@ const LobbyPage = (props: LobbyPageProps) => {
   attachHandlerToUpdateLobbyEvent(socket, (event) => {
     setPlayerNames(event.playerNames);
   });
+  const startGame = () => socket.emit(ClientEvent.START_GAME);
 
   return (
     <div className="lobby-page">
@@ -27,7 +28,7 @@ const LobbyPage = (props: LobbyPageProps) => {
           <article className="lobby-user-name">{name}</article>
         ))}
         <div className="start-game-button">
-          <button>Start Game</button>
+          <button onClick={startGame}>Start Game</button>
         </div>
         <article className="game-code">Game code: {gameCode}</article>
       </div>