Add progress bar

src/pages/index.astro

@@ -4,6 +4,13 @@ import "../styles/index.css"
 ---
 
 <Layout>
+    <section id="guesses">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span class="correct">The Correct Answer - Queen</span>
+    </section>
+    <div>
         <button id="play">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                 <path
@@ -11,15 +18,14 @@ import "../styles/index.css"
                 ></path>
             </svg>
         </button>
-    <section id="bar">
         <div id="bars">
             <div></div>
             <div></div>
             <div></div>
 
-            <div id="available"><div id="played"></div></div>
+            <div id="available"></div>
+            <div id="played"></div>
         </div>
-    </section>
         <button id="skip">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
                 ><path
@@ -27,6 +33,7 @@ import "../styles/index.css"
                 ></path></svg
             >
         </button>
+    </div>
 </Layout>
 
 <script>
@@ -37,13 +44,12 @@ import "../styles/index.css"
     await auth.init({
         clientId: "NkcXqihOmrfZdBla",
         clientSecret: "e6ldlWH48BEBOUZV1uIyIWJOf1KUGUEeH6qHkFvNjeU=",
-        credentialsStorageKey: "key",
+        credentialsStorageKey: "ZvZbtTWzx5@1zfiWUluxWD9@di17e1da",
     })
 
     player.setCredentialsProvider(auth.credentialsProvider)
     player.setEventSender(eventProducer)
 
-    // TODO: Use css anim for progress
     class ExtendableTimeout {
         private timerId: ReturnType<typeof setTimeout>
         private timeStart: number
@@ -70,28 +76,31 @@ import "../styles/index.css"
     }
 
     const play = document.querySelector("#play")
+    const played = document.querySelector("#played")
     const skip = document.querySelector("#skip")
-    const available = document.querySelector("#available") as HTMLDivElement
+    const available = document.querySelector("#available")
 
     let phase = 1
     let timer: ExtendableTimeout | null
 
-    const getTimeout = () => 2 ** phase * 1000
+    const getTimeout = (phase: number) => (2 ** phase - 1) * 1000
 
     const playVideo = async () => {
         await player.load({
-            productId: "3188631",
+            productId: "36737274",
             productType: "track",
-            sourceId: "3188629",
-            sourceType: "ALBUM",
+            sourceId: "",
+            sourceType: "",
         })
-        player.play()
+        await player.play()
+        played?.classList.add("playing")
 
         timer?.cancel()
         timer = new ExtendableTimeout(() => {
             player.pause()
             timer = null
-        }, getTimeout())
+            played?.classList.remove("playing")
+        }, getTimeout(phase))
     }
 
     play?.addEventListener("click", playVideo)
@@ -100,13 +109,13 @@ import "../styles/index.css"
         if (phase >= 4) return alert("FAIL!!!!")
         phase += 1
 
-        //@ts-expect-error
+        // @ts-expect-error
         available.style["grid-column-end"] = phase + 1
 
         if (timer == null) {
             playVideo()
         } else {
-            timer.extend(getTimeout())
+            timer.extend(getTimeout(phase))
         }
     })
 </script>

src/styles/index.css

@@ -1,10 +1,44 @@
-#bar {
-    width: min(40rem, 100%);
+main > * {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    width: min(45rem, 100%);
+}
 
-    & #bars {
+#guesses {
+    flex-direction: column;
+    gap: 2rem;
+
+    & span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font-weight: bold;
+
+        background-color: #000;
+        height: 2.4rem;
+        width: 100%;
+
+        border-radius: 2rem;
+
+        &.correct {
+            background-image: linear-gradient(
+                to bottom right,
+                var(--brand-pink) 0%,
+                var(--brand-purple) 100%
+            );
+        }
+    }
+}
+
+#bars {
     display: grid;
     grid-template-columns: 1fr 2fr 4fr 8fr;
-        gap: 0.3rem;
+    justify-content: center;
+    width: min(40rem, 100%);
+    position: relative;
 
     & * {
         background-color: rgba(255, 255, 255, 20%);
@@ -14,38 +48,27 @@
     }
 
     & #available {
+        background-color: white;
         grid-column-start: 1;
         width: 100%;
     }
-    }
 
-    & #available {
-        background-color: white;
-        width: 0;
-    }
-}
-
-.frame-container {
-    position: relative;
-
-    @supports (-moz-appearance: none) {
-        display: none;
-    }
-
-    & span {
-        pointer-events: none;
-    }
-
-    & iframe {
+    & #played {
         position: absolute;
-        width: 100%;
-        height: 100%;
-        border: none;
-        z-index: -2;
-        pointer-events: all;
+        background: linear-gradient(
+            to bottom right,
+            #cc56d0 0%,
+            var(--brand-purple) 100%
+        );
 
-        clip-path: inset(90% 0 0 90%);
-        transform-origin: bottom right;
-        transform: scale(10);
+        grid-column: 1 / -1;
+
+        width: 0%;
+        transition: none;
+
+        &.playing {
+            transition: width 15s linear;
+            width: 100%;
+        }
     }
 }

src/styles/layout.css

@@ -1,13 +1,17 @@
 html,
 body {
+    display: flex;
+    flex-direction: column;
     margin: 0;
     width: 100%;
     height: 100%;
 }
 
 :root {
-    background: linear-gradient(black, rgb(18, 2, 38));
     --brand-purple: #6e06ff;
+    --brand-pink: #cc56d0;
+
+    background: linear-gradient(black, rgb(18, 2, 38));
     font-family: sans-serif;
 }
 
@@ -18,6 +22,7 @@ img {
 }
 
 nav {
+    position: absolute;
     display: flex;
     align-items: center;
     padding: 2rem 3rem;
@@ -35,12 +40,15 @@ nav {
 main {
     color: white;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    gap: 1rem;
+    flex-grow: 1;
 }
 
-button,
-.fake-button {
+button {
     --border-radius: 2rem;
     position: relative;
     background: white;
@@ -60,16 +68,12 @@ button,
         background: rgb(211, 211, 211);
     }
 
-    &.fake-button {
-        pointer-events: none;
-    }
-
     & svg {
         width: 2.2rem;
     }
 }
 
-:is(button, .fake-button)::before {
+button::before {
     --border-size: 5px;
     content: "";
     z-index: -1;
@@ -78,7 +82,7 @@ button,
     height: 100%;
     background-image: linear-gradient(
         to bottom right,
-        #cc56d0 0%,
+        var(--brand-pink) 0%,
         var(--brand-purple) 100%
     );
     padding: var(--border-size);
@@ -86,10 +90,3 @@ button,
     left: calc(var(--border-size) * -1);
     position: absolute;
 }
-
-.fake-button-container {
-    cursor: pointer;
-    &:hover {
-        filter: brightness(80%);
-    }
-}