Create page transition from lobby to in-game

interface/index.ts

@@ -14,6 +14,7 @@ export * from "./types/PlacedPiece";
 export * from "./BoardBuilder";
 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";

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);
+}

web/src/App.tsx

@@ -3,7 +3,10 @@ import { Socket } from "socket.io-client";
 import LandingPage from "./pages/landing/LandingPage";
 import GamePage from "./pages/game/GamePage";
 import LobbyPage from "./pages/lobby/LobbyPage";
-import { attachHandlerToUpdateLobbyEvent } from "interface";
+import {
+  attachHandlerToStartRoundEvent,
+  attachHandlerToUpdateLobbyEvent,
+} from "interface";
 
 export interface AppProps {
   socket: Socket;
@@ -23,6 +26,10 @@ const App = (props: AppProps) => {
         setGameCode(event.gameCode);
         setRenderedPage("LOBBY");
       });
+    } else if (renderedPage === "LOBBY") {
+      attachHandlerToStartRoundEvent(socket, (event) => {
+        setRenderedPage("GAME");
+      });
     }
   }, [renderedPage]);
 

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>