Add transition to lobby page

interface/server-events/UpdateLobbyEvent.ts

@@ -3,12 +3,12 @@ import { ServerEvent } from "./ServerEvent";
 
 export type UpdateLobbyEvent = {
   playerNames: Array<string>;
+  gameCode: string;
 };
 
 export function attachHandlerToUpdateLobbyEvent(
   socket: Socket,
   handler: (event: UpdateLobbyEvent) => void,
-): () => void {
+): void {
-  socket.on(ServerEvent.LOBBY_UPDATE, handler);
+  socket.once(ServerEvent.LOBBY_UPDATE, handler);
-  return () => socket.off(ServerEvent.LOBBY_UPDATE, handler);
 }

web/src/App.tsx

@@ -1,20 +1,43 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 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";
 
 export interface AppProps {
   socket: Socket;
 }
 
 const App = (props: AppProps) => {
-  const renderedPage: string = "GAME";
+  const { socket } = props;
+  const [renderedPage, setRenderedPage] = useState("LANDING");
+
+  const [initialPlayerNames, setInitialPlayerNames] = useState([""]);
+  const [gameCode, setGameCode] = useState("");
+
+  const setupNextPageTransition = useCallback(() => {
+    if (renderedPage === "LANDING") {
+      attachHandlerToUpdateLobbyEvent(socket, (event) => {
+        setInitialPlayerNames(event.playerNames);
+        setGameCode(event.gameCode);
+        setRenderedPage("LOBBY");
+      });
+    }
+  }, [renderedPage]);
+
+  setupNextPageTransition();
 
   return (
     <div className="app">
       {renderedPage === "LANDING" && <LandingPage {...props} />}
-      {renderedPage === "LOBBY" && <LobbyPage />}
+      {renderedPage === "LOBBY" && (
+        <LobbyPage
+          {...props}
+          initialPlayerNames={initialPlayerNames}
+          gameCode={gameCode}
+        />
+      )}
       {renderedPage === "GAME" && <GamePage />}
     </div>
   );

web/src/pages/lobby/LobbyPage.scss

@@ -35,8 +35,16 @@
             border-radius: 10px;
         }
 
+        .game-code {
+            margin: 0 auto 10px;
+            padding: 10px;
+            width: 60%;
+            border: 2px solid blue;
+            border-radius: 10px;
+        }
+
         .start-game-button {
-            margin-top: 30px;
+            margin: 30px 0;
         }
     }
 }

web/src/pages/lobby/LobbyPage.tsx

@@ -1,7 +1,21 @@
+import { useState } from "react";
 import "./LobbyPage.scss";
+import { Socket } from "socket.io-client";
+import { attachHandlerToUpdateLobbyEvent } from "interface";
 
-const LobbyPage = () => {
+export interface LobbyPageProps {
-  const userNames = ["Laura", "Miguel", "David"];
+  initialPlayerNames: string[];
+  gameCode: string;
+  socket: Socket;
+}
+
+const LobbyPage = (props: LobbyPageProps) => {
+  const { initialPlayerNames, gameCode, socket } = props;
+  const [playerNames, setPlayerNames] = useState(initialPlayerNames);
+
+  attachHandlerToUpdateLobbyEvent(socket, (event) => {
+    setPlayerNames(event.playerNames);
+  });
 
   return (
     <div className="lobby-page">
@@ -9,12 +23,13 @@ const LobbyPage = () => {
         <h1>Trains And Roads</h1>
       </div>
       <div className="lobby-page-body">
-        {userNames.map((name) => (
+        {playerNames.map((name) => (
-          <div className="lobby-user-name">{name}</div>
+          <article className="lobby-user-name">{name}</article>
         ))}
         <div className="start-game-button">
           <button>Start Game</button>
         </div>
+        <article className="game-code">Game code: {gameCode}</article>
       </div>
     </div>
   );