update user grid cards

frontend/src/app/lobby/page.tsx

@@ -41,19 +41,19 @@ export default function Lobby() {
     <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`}
+          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
         >
           LOBBY
         </h1>
       </div>
 
-      <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 min-h-[532px] 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="flex w-full flex-row items-center justify-between px-1">
-          <div className="text-2xl font-bold text-orange-300">
+          <div className="text-3xl font-bold text-yellow-500">
             Players: {partySize}
           </div>
           <button
-            className="rounded-lg border-2 border-black bg-orange-300 p-4 text-2xl font-extrabold text-blue-600 hover:bg-orange-200"
+            className="rounded-lg border-2 border-black bg-yellow-500 p-4 text-2xl font-extrabold text-blue-600 hover:bg-yellow-400"
             onClick={() =>
               console.log(`Start game with ${partySize} players:`, userList)
             }
@@ -61,28 +61,42 @@ export default function Lobby() {
             START
           </button>
         </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">
+        {partySize === 0 ? (
-          {userList.map((user) => (
+          <div className="mt-31 min-w-52 text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
-            <div key={user.id} className="flex min-w-32 items-center gap-x-4">
+            Waiting for players...
-              <img
+          </div>
-                src={user.avatar}
+        ) : (
-                alt={user.name}
+          // <div className="grid min-w-52 grid-flow-col grid-cols-2 grid-rows-4 items-start justify-start gap-4">
-                className="h-16 w-16 rounded-full"
+          <div className="grid min-w-52 grid-flow-row grid-cols-2 items-start justify-start gap-4">
-              />
+            {userList.map((user) => (
-              <span className="text-2xl text-white">{user.name}</span>
+              <div
-              {user.host && (
+                key={user.id}
-                <Image
+                className="flex min-w-32 items-center gap-x-4 rounded-l-[40px] rounded-r-lg border-2 bg-orange-400/90 p-2"
-                  className="mb-1 ml-[-2px]"
+              >
-                  src={"/crown.png"}
+                <img
-                  width="24"
+                  src={user.avatar}
-                  height="24"
+                  alt={user.name}
-                  alt="Crown image"
+                  className="h-16 w-16 rounded-full bg-gray-300"
                 />
-              )}
+                <span className="text-2xl font-semibold text-white">
-            </div>
+                  {user.name}
-          ))}
+                </span>
-        </div>
+                {user.host && (
+                  <div className="rounded-full bg-blue-950 p-[5px]">
+                    <Image
+                      src="/crown.png"
+                      width={24}
+                      height={24}
+                      alt="Crown image"
+                      className="p-[1px]"
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
       <div className="mt-4 flex items-center justify-between gap-4">

frontend/src/data/users.json

@@ -2,49 +2,49 @@
   {
     "id": 1,
     "name": "Mark",
-    "avatar": "https://i.pravatar.cc/300?img=66",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=69",
     "host": true
   },
   {
     "id": 2,
     "name": "Guus",
-    "avatar": "https://i.pravatar.cc/300?img=67",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=91",
     "host": false
   },
   {
     "id": 3,
     "name": "Freek",
-    "avatar": "https://i.pravatar.cc/300?img=68",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=77",
     "host": false
   },
   {
     "id": 4,
     "name": "JP",
-    "avatar": "https://i.pravatar.cc/300?img=69",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=11",
     "host": false
   },
   {
     "id": 5,
     "name": "Lourens",
-    "avatar": "https://i.pravatar.cc/300?img=70",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=22",
     "host": false
   },
   {
     "id": 6,
     "name": "Martijn",
-    "avatar": "https://i.pravatar.cc/300?img=6",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=33",
     "host": false
   },
   {
     "id": 7,
     "name": "Hugo",
-    "avatar": "https://i.pravatar.cc/300?img=7",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=44",
     "host": false
   },
   {
     "id": 8,
     "name": "Erik",
-    "avatar": "https://i.pravatar.cc/300?img=8",
+    "avatar": "https://api.dicebear.com/9.x/bottts-neutral/svg?seed=55",
     "host": false
   }
 ]