From 97de40a396c8874244dcb40d39927181d5b53397 Mon Sep 17 00:00:00 2001
From: DavidPerea <d.perearomero@proton.me>
Date: Tue, 19 Nov 2024 19:08:31 +0100
Subject: [PATCH] New username input + buttons (LandingPage)

---
 web/src/App.scss                      |  2 +-
 web/src/App.tsx                       |  8 ++------
 web/src/pages/landing/LandingPage.tsx | 25 +++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 web/src/pages/landing/LandingPage.tsx

diff --git a/web/src/App.scss b/web/src/App.scss
index 56dbdc3..5992e9f 100644
--- a/web/src/App.scss
+++ b/web/src/App.scss
@@ -1,3 +1,3 @@
 @use "node_modules/@picocss/pico/scss/pico" with (
     $theme-color: "pumpkin"
-);
\ No newline at end of file
+);
diff --git a/web/src/App.tsx b/web/src/App.tsx
index c3f90f1..ada9e2a 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { io } from "socket.io-client";
+import LandingPage from './pages/landing/LandingPage';
 
 function App() {
   const socket = io("http://localhost:3010");
@@ -8,12 +9,7 @@ function App() {
 
   return (
     <div className="App">
-      <header className="App-header">
-        <button onClick={emitData}>
-          Emit Data
-        </button>
-        Hello World! Front
-      </header>
+      <LandingPage socket={socket}/>
     </div>
   );
 }
diff --git a/web/src/pages/landing/LandingPage.tsx b/web/src/pages/landing/LandingPage.tsx
new file mode 100644
index 0000000..7975f3f
--- /dev/null
+++ b/web/src/pages/landing/LandingPage.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import { Socket } from "socket.io-client";
+
+const LandingPage = (props:{socket:Socket})=>{
+    var username = ""; 
+    const registerUsername = (event:any) => username = event.target.value;
+    const socket = props.socket;
+    const handleCreateLobby = () => socket.emit("create-lobby", {username:username});
+    return <React.Fragment>
+        <div className="LandingPageTitle">
+            <h1>Trains And Roads</h1>
+        </div>
+        <div className="UserNameImput">
+            <input placeholder="Enter username" onChange={registerUsername}></input>
+        </div>
+        <div className="CreateLobbyButton">
+            <button onClick={handleCreateLobby}>Create Lobby</button>
+        </div>
+        <div className="JoinLobby">
+            <input className="LobbyIdInput" placeholder="Enter Lobby Id"></input>
+            <button className="JoinLobbyButton secondary">Join Lobby</button>
+        </div>
+    </React.Fragment>
+};
+export default LandingPage;
\ No newline at end of file