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

add gordijntje

Browse Source
This commit is contained in:
Guus
2025-08-19 12:54:03 +02:00
parent 5b0ef233c4
commit da10b19960
1 changed files with 86 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/lobby/page.tsx
+86 -33
View File
@@ -29,6 +29,7 @@ export default function Lobby() {
const auth = useAuth(); const auth = useAuth();
const user = getUser(); const user = getUser();
const controller = useSpotifyIframe(); const controller = useSpotifyIframe();
const [revealed, setRevealed] = useState(false);
// Main message handler and dispatcher // Main message handler and dispatcher
function onMessage(e) { function onMessage(e) {
@@ -264,7 +265,15 @@ export default function Lobby() {
return ( return (
<main className="flex min-h-screen flex-col items-center justify-between gap-4 p-24"> <main className="flex min-h-screen flex-col items-center justify-between gap-4 p-24">
<div className="flex w-full items-start justify-between text-center"> <div className="flex w-full items-start justify-between text-center">
<div className="flex-1"></div> <div className="flex-1">
{" "}
<button
onClick={() => setRevealed(!revealed)}
className="rounded bg-blue-600 px-4 py-2 text-white"
>
{revealed ? "Gordijntje dicht" : "Gordijntje open"}
</button>
</div>
<div className="flex flex-1 items-center justify-center"> <div className="flex flex-1 items-center justify-center">
<div className="flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 bg-orange-400"> <div className="flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 bg-orange-400">
<div className="text-5xl text-white drop-shadow-sm drop-shadow-black"> <div className="text-5xl text-white drop-shadow-sm drop-shadow-black">
@@ -297,23 +306,45 @@ export default function Lobby() {
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
<div className="flex flex-row items-center justify-center gap-x-36"> <div className="flex flex-row items-center justify-center gap-x-36">
<div className="grid min-h-[516px] min-w-[516px] grid-flow-row grid-cols-3 place-items-center items-start justify-center gap-4 rounded bg-blue-950/80 px-4 pt-10"> <div className="relative w-fit overflow-hidden">
{noList.map((user) => ( <div className="grid min-h-[516px] min-w-[516px] grid-flow-row grid-cols-3 place-items-center items-start justify-center gap-4 rounded bg-blue-950/80 px-4 pt-10">
<div {noList.map((user) => (
key={user.id} <div
className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4" key={user.id}
> className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
<img >
src={user.avatar} <img
alt={user.name} src={user.avatar}
width={100} alt={user.name}
height={100} width={100}
/> height={100}
<div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white"> />
{user.name} <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
{user.name}
</div>
</div> </div>
</div> ))}{" "}
))}{" "} </div>
<div
className={`absolute inset-0 flex items-center justify-center rounded bg-red-800 text-5xl font-bold text-white shadow-[inset_0_0_20px_rgba(0,0,0,0.3)] transition-transform duration-1000 ease-in-out ${
revealed ? "-translate-y-full" : "translate-y-0"
}`}
style={{
backgroundImage: `
linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0.2) 80%, rgba(0,0,0,0.2)),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.1),
rgba(255,255,255,0.1) 30px,
rgba(0,0,0,0) 30px,
rgba(0,0,0,0) 60px
)`,
clipPath:
"polygon(0 0, 100% 0, 100% 98%, 95% 100%, 90% 98%, 85% 100%, 80% 98%, 75% 100%, 70% 98%, 65% 100%, 60% 98%, 55% 100%, 50% 98%, 45% 100%, 40% 98%, 35% 100%, 30% 98%, 25% 100%, 20% 98%, 15% 100%, 10% 98%, 5% 100%, 0 98%)",
}}
>
Meh
</div>
</div> </div>
{!songLoading && currentSong ? ( {!songLoading && currentSong ? (
<div className="rounded-md bg-black p-2"> <div className="rounded-md bg-black p-2">
@@ -334,23 +365,45 @@ export default function Lobby() {
/> />
</div> </div>
)} )}
<div className="grid min-h-[516px] min-w-[516px] grid-flow-row grid-cols-3 place-items-center items-start justify-center gap-4 rounded bg-blue-950/80 px-4 pt-10"> <div className="relative w-fit overflow-hidden">
{yesList.map((user) => ( <div className="grid min-h-[516px] min-w-[516px] grid-flow-row grid-cols-3 place-items-center items-start justify-center gap-4 rounded bg-blue-950/80 px-4 pt-10">
<div {yesList.map((user) => (
key={user.id} <div
className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4" key={user.id}
> className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
<img >
src={user.avatar} <img
alt={user.name} src={user.avatar}
width={100} alt={user.name}
height={100} width={100}
/> height={100}
<div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white"> />
{user.name} <div className="mt-1 min-w-[90px] rounded-3xl px-3 text-center text-3xl font-semibold text-white">
{user.name}
</div>
</div> </div>
</div> ))}{" "}
))}{" "} </div>
<div
className={`absolute inset-0 flex items-center justify-center rounded bg-red-800 text-5xl font-bold text-white shadow-[inset_0_0_20px_rgba(0,0,0,0.3)] transition-transform duration-1000 ease-in-out ${
revealed ? "-translate-y-full" : "translate-y-0"
}`}
style={{
backgroundImage: `
linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 20%, rgba(0,0,0,0.2) 80%, rgba(0,0,0,0.2)),
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.1),
rgba(255,255,255,0.1) 30px,
rgba(0,0,0,0) 30px,
rgba(0,0,0,0) 60px
)`,
clipPath:
"polygon(0 0, 100% 0, 100% 98%, 95% 100%, 90% 98%, 85% 100%, 80% 98%, 75% 100%, 70% 98%, 65% 100%, 60% 98%, 55% 100%, 50% 98%, 45% 100%, 40% 98%, 35% 100%, 30% 98%, 25% 100%, 20% 98%, 15% 100%, 10% 98%, 5% 100%, 0 98%)",
}}
>
Yeah
</div>
</div> </div>
</div> </div>
{!songLoading && currentSong ? ( {!songLoading && currentSong ? (