From da10b19960a931aae31c72cc9b2261d10a9df035 Mon Sep 17 00:00:00 2001
From: Guus <ghligtvoet@gmail.com>
Date: Tue, 19 Aug 2025 12:54:03 +0200
Subject: [PATCH] add gordijntje

---
 frontend/src/app/lobby/page.tsx | 119 +++++++++++++++++++++++---------
 1 file changed, 86 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/lobby/page.tsx b/frontend/src/app/lobby/page.tsx
index 84e9ae2..bd59849 100644
--- a/frontend/src/app/lobby/page.tsx
+++ b/frontend/src/app/lobby/page.tsx
@@ -29,6 +29,7 @@ export default function Lobby() {
   const auth = useAuth();
   const user = getUser();
   const controller = useSpotifyIframe();
+  const [revealed, setRevealed] = useState(false);
 
   // Main message handler and dispatcher
   function onMessage(e) {
@@ -264,7 +265,15 @@ export default function Lobby() {
     return (
       <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-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 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">
@@ -297,23 +306,45 @@ export default function Lobby() {
 
         <div className="flex flex-col items-center justify-center">
           <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">
-              {noList.map((user) => (
-                <div
-                  key={user.id}
-                  className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
-                >
-                  <img
-                    src={user.avatar}
-                    alt={user.name}
-                    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="relative w-fit overflow-hidden">
+              <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">
+                {noList.map((user) => (
+                  <div
+                    key={user.id}
+                    className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
+                  >
+                    <img
+                      src={user.avatar}
+                      alt={user.name}
+                      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>
                   </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>
             {!songLoading && currentSong ? (
               <div className="rounded-md bg-black p-2">
@@ -334,23 +365,45 @@ export default function Lobby() {
                 />
               </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">
-              {yesList.map((user) => (
-                <div
-                  key={user.id}
-                  className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
-                >
-                  <img
-                    src={user.avatar}
-                    alt={user.name}
-                    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="relative w-fit overflow-hidden">
+              <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">
+                {yesList.map((user) => (
+                  <div
+                    key={user.id}
+                    className="flex h-[120px] w-[120px] flex-col items-center justify-center p-4"
+                  >
+                    <img
+                      src={user.avatar}
+                      alt={user.name}
+                      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>
                   </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>
           {!songLoading && currentSong ? (