update lobby page design

frontend/src/app/lobby/page.tsx

@@ -1,47 +1,104 @@
 "use client";
-
-import { Vollkorn, Nunito } from "next/font/google";
-import { useState } from "react";
-
-const vollkorn = Vollkorn({
-  weight: "600",
-  subsets: ["latin"],
-});
+import { useState, useEffect } from "react";
+import { Markazi_Text, Nunito } from "next/font/google";
+import users from "muzak/data/users.json";
+import Image from "next/image";
 
 const nunito = Nunito({
   weight: "900",
   subsets: ["latin"],
 });
 
+const MAX_PARTY_SIZE = 8;
+
 export default function Lobby() {
-  const [userName, setUserName] = useState("Stroop");
+  const [partySize, setPartySize] = useState(0);
+  const [userList, setUserList] = useState([]);
+
+  useEffect(() => {
+    populateUserList();
+  }, [partySize]);
+
+  function populateUserList() {
+    const mappedUsers = users.slice(0, partySize).map((user) => ({
+      id: user.id,
+      name: user.name,
+      avatar: user.avatar,
+      host: user.host,
+    }));
+    setUserList(mappedUsers);
+  }
+
+  function addUserToParty() {
+    setPartySize((prev) => Math.min(prev + 1, MAX_PARTY_SIZE));
+  }
+
+  function deleteUserFromParty() {
+    setPartySize((prev) => Math.max(prev - 1, 0));
+  }
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div>
         <h1
           className={`${nunito.className} text-outline text-[42px] tracking-tighter text-orange-300`}
         >
-          LOGIN
+          LOBBY
         </h1>
       </div>
 
-      <div className="mb-12 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
-        <p className="text-xl text-white/90">Welkom, {userName}!</p>
-        <form className="flex flex-col items-center justify-center gap-4">
-          <input
-            className="w-full rounded border-2 border-gray-300 px-4 py-2 font-bold text-white/70"
-            type="text"
-            placeholder="Game PIN"
-          />
+      <div className="mb-16 flex min-h-[500px] min-w-[500px] flex-col items-center justify-start gap-4 rounded-md bg-blue-950/80 p-8">
+        <div className="flex w-full flex-row items-center justify-between px-3">
+          <div className="text-2xl font-bold text-orange-300">
+            Players: {partySize}
+          </div>
           <button
-            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
-            type="submit"
+            className="rounded-lg border-2 border-black bg-orange-300 p-4 text-2xl font-extrabold text-blue-600 hover:bg-orange-200"
+            onClick={() =>
+              console.log(`Start game with ${partySize} players:`, userList)
+            }
           >
-            Join
+            START
           </button>
-        </form>
+        </div>
+        {/* <div className="flex min-h-160 min-w-52 flex-col items-start justify-center gap-4"> */}
+        <div className="mt-6 grid min-h-90 min-w-52 grid-cols-2 items-start justify-start gap-x-8">
+          {userList.map((user) => (
+            <div key={user.id} className="flex min-w-32 items-center gap-x-4">
+              <img
+                src={user.avatar}
+                alt={user.name}
+                className="h-16 w-16 rounded-full"
+              />
+              <span className="text-2xl text-white">{user.name}</span>
+              {user.host && (
+                <Image
+                  className="mb-1 ml-[-2px]"
+                  src={"/crown.png"}
+                  width="24"
+                  height="24"
+                  alt="Crown image"
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 flex items-center justify-between gap-4">
+        <button
+          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          onClick={() => deleteUserFromParty()}
+        >
+          del
+        </button>
+        <button
+          className="rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
+          onClick={() => addUserToParty()}
+        >
+          add
+        </button>
       </div>
-      <div></div>
     </main>
   );
 }