From 4f9950c6a9eb8e2d2dc5544fe1510af1e0d27981 Mon Sep 17 00:00:00 2001
From: MiguelMLorente <miguel.munoz.lorente.14@gmail.com>
Date: Sat, 8 Feb 2025 16:23:55 +0100
Subject: [PATCH 1/2] Create landing page base layout

---
 web/src/App.tsx                    |  4 ++-
 web/src/pages/lobby/LobbyPage.scss | 42 ++++++++++++++++++++++++++++++
 web/src/pages/lobby/LobbyPage.tsx  | 23 ++++++++++++++++
 3 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 web/src/pages/lobby/LobbyPage.scss
 create mode 100644 web/src/pages/lobby/LobbyPage.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b1fc803..ac08d68 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,17 +2,19 @@ import React 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";
 
 export interface AppProps {
   socket: Socket;
 }
 
 const App = (props: AppProps) => {
-  const renderedPage: string = "LANDING";
+  const renderedPage: string = "LOBBY";
 
   return (
     <div className="app">
       {renderedPage === "LANDING" && <LandingPage {...props} />}
+      {renderedPage === "LOBBY" && <LobbyPage />}
       {renderedPage === "GAME" && <GamePage />}
     </div>
   );
diff --git a/web/src/pages/lobby/LobbyPage.scss b/web/src/pages/lobby/LobbyPage.scss
new file mode 100644
index 0000000..226320d
--- /dev/null
+++ b/web/src/pages/lobby/LobbyPage.scss
@@ -0,0 +1,42 @@
+.lobby-page {
+    height: 100%;
+    width: 100%;
+    padding: 2%;
+    margin: 0 auto;
+    text-align: center;
+
+    background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+    height: 100vh;
+
+    @keyframes gradient {
+        0% {
+            background-position: 0% 50%;
+        }
+        50% {
+            background-position: 100% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+
+    .lobby-page-body {
+        margin: auto;
+        width: 20%;
+        min-width: 300px;
+
+        .lobby-user-name {
+            margin: 0 auto 10px;
+            padding: 10px;
+            width: 60%;
+            border: 2px solid cyan;
+            border-radius: 10px;
+        }
+
+        .start-game-button {
+            margin-top: 30px;
+        }
+    }
+}
diff --git a/web/src/pages/lobby/LobbyPage.tsx b/web/src/pages/lobby/LobbyPage.tsx
new file mode 100644
index 0000000..231027a
--- /dev/null
+++ b/web/src/pages/lobby/LobbyPage.tsx
@@ -0,0 +1,23 @@
+import "./LobbyPage.scss";
+
+const LobbyPage = () => {
+  const userNames = ["Laura", "Miguel", "David"];
+
+  return (
+    <div className="lobby-page">
+      <div className="landing-page-title">
+        <h1>Trains And Roads</h1>
+      </div>
+      <div className="lobby-page-body">
+        {userNames.map((name) => (
+          <div className="lobby-user-name">{name}</div>
+        ))}
+        <div className="start-game-button">
+          <button>Start Game</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LobbyPage;
-- 
2.40.1


From 00c365de84def4576c8e2aa8fce11c6c8ff716f2 Mon Sep 17 00:00:00 2001
From: MiguelMLorente <miguel.munoz.lorente.14@gmail.com>
Date: Sun, 9 Feb 2025 14:38:08 +0100
Subject: [PATCH 2/2] Add transition to lobby page

---
 interface/server-events/UpdateLobbyEvent.ts |  6 ++---
 web/src/App.tsx                             | 29 ++++++++++++++++++---
 web/src/pages/lobby/LobbyPage.scss          | 10 ++++++-
 web/src/pages/lobby/LobbyPage.tsx           | 23 +++++++++++++---
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/interface/server-events/UpdateLobbyEvent.ts b/interface/server-events/UpdateLobbyEvent.ts
index 90f696a..2f0881d 100644
--- a/interface/server-events/UpdateLobbyEvent.ts
+++ b/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 {
-  socket.on(ServerEvent.LOBBY_UPDATE, handler);
-  return () => socket.off(ServerEvent.LOBBY_UPDATE, handler);
+): void {
+  socket.once(ServerEvent.LOBBY_UPDATE, handler);
 }
diff --git a/web/src/App.tsx b/web/src/App.tsx
index ac08d68..7b878b6 100644
--- a/web/src/App.tsx
+++ b/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 = "LOBBY";
+  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>
   );
diff --git a/web/src/pages/lobby/LobbyPage.scss b/web/src/pages/lobby/LobbyPage.scss
index 226320d..5a935f7 100644
--- a/web/src/pages/lobby/LobbyPage.scss
+++ b/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;
         }
     }
 }
diff --git a/web/src/pages/lobby/LobbyPage.tsx b/web/src/pages/lobby/LobbyPage.tsx
index 231027a..e92f168 100644
--- a/web/src/pages/lobby/LobbyPage.tsx
+++ b/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 = () => {
-  const userNames = ["Laura", "Miguel", "David"];
+export interface LobbyPageProps {
+  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) => (
-          <div className="lobby-user-name">{name}</div>
+        {playerNames.map((name) => (
+          <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>
   );
-- 
2.40.1