Formatting + Added Home Page

public/frontend_home.js

@@ -1,6 +1,8 @@
 document.addEventListener("DOMContentLoaded", async () => {
     const logoutButton = document.getElementById("logout");
     const balance = document.getElementById("balance");
+    const hostButton = document.getElementById("host");
+    const joinButton = document.getElementById("join");
     try {
         const balanceRes = await fetch('/balance', {
             method: "GET",
@@ -36,4 +38,30 @@ document.addEventListener("DOMContentLoaded", async () => {
             console.log("Logout error:", err);
         }
     });
+    hostButton.addEventListener("click", async (e) => {
+        e.preventDefault();
+        try {
+            const hostRes = await fetch('/lobby/create', {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                }
+            });
+            if (hostRes.ok) {
+                const lobbyId = await hostRes.text();
+                document.getElementById("lobby-id").textContent = lobbyId;
+                document.getElementById("lobby-room").classList.remove("hidden");
+                setInterval(async () => {
+                    const res = await fetch(`/lobby/players?lobbyId=${lobbyId}`);
+                    const data = await res.json();
+                    const playerList = document.getElementById("player-list");
+                    playerList.innerHTML = data.players.map(p => `<p>${p}</p>`).join("") || "<p>No players yet</p>";
+                }, 3000);
+            } else {
+                console.log("Failed to create lobby:" + await hostRes.text());
+            }
+        } catch (err) {
+            console.log("Lobby create error:", err);
+        }
+    });
 });

public/home.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Home</title>
     <link rel="stylesheet" href="styles_home.css">
-    <script src="frontend_home.js" defer></script> <!-- make sure this is included -->
 </head>
 <body>
 <button class="logout" id="logout">Logout</button>
@@ -12,8 +11,15 @@
     Balance: $<span id="balance">0</span>
 </div>
 <div class="lobby-buttons">
-    <button class="host">Host Lobby</button>
-    <button class="join">Join Lobby</button>
+    <button id="host">Host Lobby</button>
+    <button id="join">Join Lobby</button>
+</div>
+<div id="lobby-room" class="lobby-room hidden">
+    <h2>Lobby ID: <span id="lobby-id">N/A</span></h2>
+    <div id="player-list">
+        <p>Waiting for players...</p>
+    </div>
 </div>
 </body>
+<script src="frontend_home.js" defer></script>
 </html>

public/styles_home.css

@@ -56,4 +56,30 @@ button.logout {
     display: flex;
     gap: 20px;
     margin-top: 30px;
+}
+
+.lobby-room {
+    background: rgba(0, 0, 0, 0.7);
+    border: 2px solid #0f0;
+    border-radius: 12px;
+    padding: 30px;
+    margin-top: 40px;
+    width: 400px;
+    text-align: center;
+    box-shadow: 0 0 10px #0f0;
+}
+
+.lobby-room h2 {
+    color: #0f0;
+    font-size: 20px;
+    margin-bottom: 20px;
+    text-shadow: 0 0 5px #0f0;
+}
+
+#player-list {
+    color: #fff;
+}
+
+.hidden {
+    display: none;
 }