update lobby page design

frontend/src/app/lobby/page.tsx

@@ -1,47 +1,104 @@
 "use client";
-
+import { useState, useEffect } from "react";
-import { Vollkorn, Nunito } from "next/font/google";
+import { Markazi_Text, Nunito } from "next/font/google";
-import { useState } from "react";
+import users from "muzak/data/users.json";
-
+import Image from "next/image";
-const vollkorn = Vollkorn({
-  weight: "600",
-  subsets: ["latin"],
-});
 
 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">
+      <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">
-        <p className="text-xl text-white/90">Welkom, {userName}!</p>
+        <div className="flex w-full flex-row items-center justify-between px-3">
-        <form className="flex flex-col items-center justify-center gap-4">
+          <div className="text-2xl font-bold text-orange-300">
-          <input
+            Players: {partySize}
-            className="w-full rounded border-2 border-gray-300 px-4 py-2 font-bold text-white/70"
+          </div>
-            type="text"
-            placeholder="Game PIN"
-          />
           <button
-            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
+            className="rounded-lg border-2 border-black bg-orange-300 p-4 text-2xl font-extrabold text-blue-600 hover:bg-orange-200"
-            type="submit"
+            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>
   );
 }

frontend/src/app/login/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Nunito } from "next/font/google";
+import { useState } from "react";
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
+export default function Login() {
+  const [userName, setUserName] = useState("Stroop");
+  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
+        </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"
+          />
+          <button
+            className="w-full rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-400"
+            type="submit"
+          >
+            Join
+          </button>
+        </form>
+      </div>
+      <div></div>
+    </main>
+  );
+}

frontend/src/data/users.json

@@ -0,0 +1,50 @@
+[
+  {
+    "id": 1,
+    "name": "Mark",
+    "avatar": "https://i.pravatar.cc/300?img=66",
+    "host": true
+  },
+  {
+    "id": 2,
+    "name": "Guus",
+    "avatar": "https://i.pravatar.cc/300?img=67",
+    "host": false
+  },
+  {
+    "id": 3,
+    "name": "Freek",
+    "avatar": "https://i.pravatar.cc/300?img=68",
+    "host": false
+  },
+  {
+    "id": 4,
+    "name": "JP",
+    "avatar": "https://i.pravatar.cc/300?img=69",
+    "host": false
+  },
+  {
+    "id": 5,
+    "name": "Lourens",
+    "avatar": "https://i.pravatar.cc/300?img=70",
+    "host": false
+  },
+  {
+    "id": 6,
+    "name": "Martijn",
+    "avatar": "https://i.pravatar.cc/300?img=6",
+    "host": false
+  },
+  {
+    "id": 7,
+    "name": "Hugo",
+    "avatar": "https://i.pravatar.cc/300?img=7",
+    "host": false
+  },
+  {
+    "id": 8,
+    "name": "Erik",
+    "avatar": "https://i.pravatar.cc/300?img=8",
+    "host": false
+  }
+]

frontend/tsconfig.json

@@ -7,7 +7,8 @@
     "baseUrl": "./",
     "paths": {
       "muzak/config/*": ["./src/config/*"],
-      "muzak/data/*": ["./src/data/*"]
+      "muzak/data/*": ["./src/data/*"],
+      "muzak/app/*": ["./src/app/*"]
     },
 
     "allowJs": false,
@@ -27,6 +28,12 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "src/data/users.json"
+  ],
   "exclude": ["node_modules"]
 }