mark/muzak
2
0
Fork 0
Code Issues Pull Requests Activity

update user grid cards

Browse Source
This commit is contained in:
Guus
2025-07-08 17:26:01 +02:00
parent 499a35bf50
commit 3c02ec930b
2 changed files with 48 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/lobby/page.tsx
+40 -26
View File
@@ -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 w-full flex-row items-center justify-between px-3">
<div className="text-2xl font-bold text-orange-300">
<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-1">
<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">
{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"
{partySize === 0 ? (
<div className="mt-31 min-w-52 text-3xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
Waiting for players...
</div>
) : (
// <div className="grid min-w-52 grid-flow-col grid-cols-2 grid-rows-4 items-start justify-start gap-4">
<div className="grid min-w-52 grid-flow-row grid-cols-2 items-start justify-start gap-4">
{userList.map((user) => (
<div
key={user.id}
className="flex min-w-32 items-center gap-x-4 rounded-l-[40px] rounded-r-lg border-2 bg-orange-400/90 p-2"
>
<img
src={user.avatar}
alt={user.name}
className="h-16 w-16 rounded-full bg-gray-300"
/>
)}
</div>
))}
</div>
<span className="text-2xl font-semibold text-white">
{user.name}
</span>
{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">