created score board and temp start game button yawn

burtonjong · Jul 30, 2024 · 2f55a10 · 2f55a10
1 parent 3d3ec98
commit 2f55a10
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 38 deletions.
diff --git a/components/artist/audio.tsx b/components/artist/audio.tsx
@@ -19,15 +19,15 @@ export default function Audio({ song }: { song: Song }) {
             className="pb-2"
           />
 
-          {song.images && (
+          {/* {song.images && (
             <Image
               src={song.images[1].url ?? ""}
               width={250}
               height={250}
               alt="album cover"
               className="mx-auto"
             />
-          )}
+          )} */}
 
           <h2
             id="featured-post"
@@ -57,7 +57,7 @@ export default function Audio({ song }: { song: Song }) {
           showJumpControls={false}
           hasDefaultKeyBindings={false}
           customAdditionalControls={[]}
-          layout="stacked-reverse"
+          layout="horizontal"
         />
       </CardNE>
     </>

diff --git a/components/artist/guesscontainer.tsx b/components/artist/guesscontainer.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import Options from "@/components/artist/options";
-import type { Image, Song } from "@/util/types";
+import Score from "@/components/artist/score";
 import Audio from "@/components/artist/audio";
 import { useParams } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { Game } from "@/util/game";
+import type { Image, Song } from "@/util/types";
 
 export default function GuessContainer({ token }: { token: string }) {
   const params = useParams();
@@ -112,21 +113,23 @@ export default function GuessContainer({ token }: { token: string }) {
     });
   }, [gameState.game, gameState.currentRound]);
 
-  const handleAnswer = (chosenSong: Song) => {
-    console.log(gameState.currentRound);
-    if (gameState.game && gameState.currentRound) {
-      const isCorrect = gameState.game.checkAnswer(
-        chosenSong,
-        gameState.currentRound.currentSong
-      );
-      console.log(
-        isCorrect
-          ? "Correct!"
-          : `Wrong! The correct answer was: ${gameState.currentRound.currentSong.name}`
-      );
-      setGameState((prevState) => ({ ...prevState, currentRound: null }));
-    }
-  };
+  const handleAnswer = useCallback(
+    (chosenSong: Song) => {
+      if (gameState.game && gameState.currentRound) {
+        const isCorrect = gameState.game.checkAnswer(
+          chosenSong,
+          gameState.currentRound.currentSong
+        );
+        console.log(
+          isCorrect
+            ? "Correct!"
+            : `Wrong! The correct answer was: ${gameState.currentRound.currentSong.name}`
+        );
+        setGameState((prevState) => ({ ...prevState, currentRound: null }));
+      }
+    },
+    [gameState.game, gameState.currentRound]
+  );
 
   return (
     <div className="px-6 pt-20 mx-auto space-y-8 max-w-7xl lg:px-8 md:space-y-16 md:pt-24 lg:pt-32">
@@ -141,26 +144,33 @@ export default function GuessContainer({ token }: { token: string }) {
       ) : (
         <>
           <div className="flex flex-row justify-between w-full">
-            <div className="max-w-2xl mx-auto lg:mx-0 flex flex-row items-center gap-4">
+            <div className="w-full mx-auto lg:mx-0 flex flex-row items-center gap-4 space-between">
               <Audio song={gameState.audio ?? ({} as Song)} />
-              <h2 className="text-3xl font-bold tracking-tight text-zinc-100 sm:text-4xl">
-                Round X
-              </h2>
-              <button
-                onClick={() => start()}
-                className="text-zinc-100 hover:text-white"
-              >
-                Start Game
-              </button>
+              <div className="w-1/2 h-full">
+                <Score
+                  start={start}
+                  score={gameState.game?.getScore() ?? 0}
+                  currentRound={gameState.currentRound?.roundNumber}
+                />
+              </div>
             </div>
           </div>
           <div className="w-full h-px bg-zinc-800" />
-          <div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            <Options
-              songs={gameState.options ?? []}
-              handleAnswer={handleAnswer}
-            />
+          <div className=" flex justify-center w-full">
+            {gameState.game ? (
+              <div className="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                <Options
+                  songs={gameState.options ?? []}
+                  handleAnswer={handleAnswer}
+                />
+              </div>
+            ) : (
+              <h2 className="text-3xl font-bold tracking-tight text-zinc-100 sm:text-4xl">
+                Options will appear here.
+              </h2>
+            )}
           </div>
+
           <div className="hidden w-full h-px md:block bg-zinc-800" />
         </>
       )}

diff --git a/components/artist/score.tsx b/components/artist/score.tsx
@@ -0,0 +1,42 @@
+import { Card } from "@/components/card";
+
+interface ScoreProps {
+  currentRound: number;
+  start: () => void;
+  score: number;
+}
+
+export default function Score({ currentRound, start, score }: ScoreProps) {
+  return (
+    <Card>
+      <article className="relative w-full h-full p-4 md:p-8">
+        {currentRound && (
+          <h2
+            id="featured-post"
+            className="mt-4 text-3xl font-bold text-zinc-100 group-hover:text-white sm:text-4xl font-display"
+          >
+            Your Score: {score} / 5
+          </h2>
+        )}
+
+        <p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
+          Current Round: {currentRound}
+        </p>
+        {!currentRound && (
+          <button
+            onClick={() => start()}
+            className="text-zinc-100 hover:text-white"
+          >
+            Start Game
+          </button>
+        )}
+
+        {/* <div className="absolute bottom-4 md:bottom-8">
+          <p className="hidden text-zinc-200 hover:text-zinc-50 lg:block">
+            Read more <span aria-hidden="true">&rarr;</span>
+          </p>
+        </div> */}
+      </article>
+    </Card>
+  );
+}
diff --git a/components/card.tsx b/components/card.tsx
@@ -19,7 +19,7 @@ export const Card: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <div
       onMouseMove={onMouseMove}
-      className="overflow-hidden relative duration-700 border rounded-xl hover:bg-zinc-800/10 group md:gap-8 hover:border-zinc-400/50 border-zinc-600 "
+      className=" h-full overflow-hidden relative duration-700 border rounded-xl hover:bg-zinc-800/10 group md:gap-8 hover:border-zinc-400/50 border-zinc-600 "
     >
       <div className="pointer-events-none">
         <div className="absolute inset-0 z-0  transition duration-1000 [mask-image:linear-gradient(black,transparent)]" />

diff --git a/util/game.ts b/util/game.ts
@@ -17,7 +17,7 @@ export class Game {
 
   startNewRound() {
     if (this.currentRound >= this.totalRounds) {
-      return null; // Game over
+      return null;
     }
 
     this.currentRound++;
@@ -44,7 +44,7 @@ export class Game {
 
   getWrongAnswers(correctSong: Song) {
     let wrongAnswers: Song[] = [];
-    while (wrongAnswers.length < 2) {
+    while (wrongAnswers.length < 3) {
       let randomSong = this.getUnusedRandomSong();
       if (
         randomSong.name !== correctSong.name &&