diff --git a/components/artist/audio.tsx b/components/artist/audio.tsx index 86d27e6..99b17ce 100644 --- a/components/artist/audio.tsx +++ b/components/artist/audio.tsx @@ -9,17 +9,17 @@ import type { Song } from "@/util/types"; export default function Audio({ song }: { song: Song }) { return ( <> - {song && ( - -
- spotify logo white + +
+ spotify logo white + {song.images && ( album cover + )} -

- {song.name} -

-
-
+

+ {song.name} +

+
+
+ {song.external_urls && ( Go to song -
+ )}
-
- -
- )} + +
+ +
); } diff --git a/components/artist/guesscontainer.tsx b/components/artist/guesscontainer.tsx index 417e829..8ac660b 100644 --- a/components/artist/guesscontainer.tsx +++ b/components/artist/guesscontainer.tsx @@ -21,7 +21,7 @@ export default function GuessContainer({ token }: { token: string }) { queryKey: ["artist", params.id], queryFn: async () => { const albumsResponse = await fetch( - `https://api.spotify.com/v1/artists/${params.id}/albums?include_groups=single&market=US`, + `https://api.spotify.com/v1/artists/${params.id}/albums?include_groups=single,album&market=US`, { headers: { Authorization: `Bearer ${token}`, @@ -76,58 +76,33 @@ export default function GuessContainer({ token }: { token: string }) { }, }); - // console.log(songs); - - const [game, setGame] = useState(null); - const [currentRound, setCurrentRound] = useState(null); - const [audio, setAudio] = useState({ - images: [ - { - url: "https://i.scdn.co/image/ab67616d0000b273f6f61ab6fd1d9d101bce44de", - height: 640, - width: 640, - }, - { - url: "https://i.scdn.co/image/ab67616d00001e02f6f61ab6fd1d9d101bce44de", - height: 300, - width: 300, - }, - { - url: "https://i.scdn.co/image/ab67616d00004851f6f61ab6fd1d9d101bce44de", - height: 64, - width: 64, - }, - ], - name: "one way ticket to hell", - external_urls: { - spotify: "https://open.spotify.com/track/4xrxaGTgv4gMTWbQWFGnIx", - }, - preview_url: - "https://p.scdn.co/mp3-preview/b5b45f03c84023cea613862d3ee08b0499e06f91?cid=3d81a57a96cf40a0998cfac20a842d44", - id: "4xrxaGTgv4gMTWbQWFGnIx", + const [gameState, setGameState] = useState({ + game: null as Game | null, + currentRound: null as any, + audio: undefined as Song | undefined, + options: [] as Song[], }); const start = () => { - const newGame = new Game(songs, 5); - setGame(newGame); - console.log("Game created"); + if (isSuccess) { + const newGame = new Game(songs, 5); + setGameState((prevState) => ({ ...prevState, gameState })); + } }; useEffect(() => { async function startGame() { - if (game && !currentRound) { - const round = game.startNewRound(); + if (gameState.game && !gameState.currentRound) { + const round = gameState.game.startNewRound(); if (round) { - setCurrentRound(round); - // Create and load audio + setGameState((prevState) => ({ ...prevState, round })); const audio = round.currentSong; - setAudio(audio); - // If you want to start playing immediately: - // await audio.play(); + const options = round.options; + setGameState((prevState) => ({ ...prevState, options })); + setGameState((prevState) => ({ ...prevState, audio })); } else { - // Game over console.log( - `Game Over! Your final score is ${game.getScore()} out of ${game.getTotalRounds()}` + `Game Over! Your final score is ${gameState.game.getScore()} out of ${game.getTotalRounds()}` ); } } @@ -136,17 +111,20 @@ export default function GuessContainer({ token }: { token: string }) { startGame().catch((error) => { console.error("Error starting game:", error); }); - }, [game, currentRound]); + }, [gameState.game, gameState.currentRound]); const handleAnswer = (chosenSong: Song) => { - if (game && currentRound) { - const isCorrect = game.checkAnswer(chosenSong, currentRound.currentSong); + if (gameState.game && gameState.currentRound) { + const isCorrect = gameState.game.checkAnswer( + chosenSong, + gameState.currentRound.currentSong + ); console.log( isCorrect ? "Correct!" - : `Wrong! The correct answer was: ${currentRound.currentSong.name}` + : `Wrong! The correct answer was: ${gameState.currentRound.currentSong.name}` ); - setCurrentRound(null); + setGameState((prevState) => ({ ...prevState, currentRound: null })); } }; @@ -164,7 +142,7 @@ export default function GuessContainer({ token }: { token: string }) { <>
-
- +