From 88627bb9a78395e0672cff6a68c0d855cf0013b5 Mon Sep 17 00:00:00 2001
From: DavidPerea <d.perearomero@proton.me>
Date: Sun, 24 Nov 2024 12:26:50 +0100
Subject: [PATCH] Add functionality to "Join Lobby" button

---
 interface/client-events/JoinLobbyEvent.ts |  7 ++++++
 web/src/pages/landing/LandingPage.tsx     | 29 +++++++++++++++++++----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/interface/client-events/JoinLobbyEvent.ts b/interface/client-events/JoinLobbyEvent.ts
index d9ac08f..f5cab24 100644
--- a/interface/client-events/JoinLobbyEvent.ts
+++ b/interface/client-events/JoinLobbyEvent.ts
@@ -1,4 +1,11 @@
+import { Socket } from "socket.io-client";
+import { ClientEvent } from "./ClientEvent";
+
 export type JoinLobbyEvent = {
   userName: string;
   lobbyId: string;
 };
+
+export function handleJoinLobby(socket: Socket, payload: JoinLobbyEvent): void {
+  socket.emit(ClientEvent.JOIN_LOBBY, payload);
+}
diff --git a/web/src/pages/landing/LandingPage.tsx b/web/src/pages/landing/LandingPage.tsx
index 6adf115..afe7c7c 100644
--- a/web/src/pages/landing/LandingPage.tsx
+++ b/web/src/pages/landing/LandingPage.tsx
@@ -1,4 +1,9 @@
-import { CreateLobbyEvent, handleCreateLobby } from "interface";
+import {
+  CreateLobbyEvent,
+  handleCreateLobby,
+  handleJoinLobby,
+  JoinLobbyEvent,
+} from "interface";
 import React, { ChangeEvent } from "react";
 import { Socket } from "socket.io-client";
 
@@ -6,8 +11,13 @@ const LandingPage = (props: { socket: Socket }) => {
   const socket = props.socket;
 
   const createLobbyPayload: CreateLobbyEvent = { userName: "" };
-  const registerUsername = (event: ChangeEvent<HTMLInputElement>) =>
-    (createLobbyPayload.userName = event.target.value);
+  const joinLobbyPayload: JoinLobbyEvent = { userName: "", lobbyId: "" };
+  const registerUsername = (event: ChangeEvent<HTMLInputElement>) => {
+    createLobbyPayload.userName = event.target.value;
+    joinLobbyPayload.userName = event.target.value;
+  };
+  const registerLobbyId = (event: ChangeEvent<HTMLInputElement>) =>
+    (joinLobbyPayload.lobbyId = event.target.value);
 
   return (
     <React.Fragment>
@@ -23,8 +33,17 @@ const LandingPage = (props: { socket: Socket }) => {
         </button>
       </div>
       <div className="JoinLobby">
-        <input className="LobbyIdInput" placeholder="Enter Lobby Id"></input>
-        <button className="JoinLobbyButton secondary">Join Lobby</button>
+        <input
+          className="LobbyIdInput"
+          placeholder="Enter Lobby Id"
+          onChange={registerLobbyId}
+        ></input>
+        <button
+          className="JoinLobbyButton secondary"
+          onClick={() => handleJoinLobby(socket, joinLobbyPayload)}
+        >
+          Join Lobby
+        </button>
       </div>
     </React.Fragment>
   );