diff options
| -rw-r--r-- | src/app/game/[slug]/components/PreGameView.tsx | 3 | ||||
| -rw-r--r-- | src/app/game/[slug]/hooks/useGameEngine.ts | 7 | ||||
| -rw-r--r-- | src/app/game/[slug]/page.tsx | 3 |
3 files changed, 12 insertions, 1 deletions
diff --git a/src/app/game/[slug]/components/PreGameView.tsx b/src/app/game/[slug]/components/PreGameView.tsx index 77af6ea..2cf417d 100644 --- a/src/app/game/[slug]/components/PreGameView.tsx +++ b/src/app/game/[slug]/components/PreGameView.tsx @@ -34,6 +34,7 @@ interface PreGameViewProps { loadingLrc: boolean; songTitle: string; songArtist: string; + chartImage: string | undefined, chartId: string | null; audioUrl: string; isVideo: boolean; @@ -87,6 +88,7 @@ export default function PreGameView({ loadingLrc, songTitle, songArtist, + chartImage, chartId, audioUrl, isVideo, @@ -172,6 +174,7 @@ export default function PreGameView({ <> <SongTitleText>{loadingLrc ? "Loading..." : songTitle}</SongTitleText> <SongArtistText>{songArtist}</SongArtistText> + {chartImage ? <img src={chartImage} alt={`${songTitle} cover`} /> : null} </> )} diff --git a/src/app/game/[slug]/hooks/useGameEngine.ts b/src/app/game/[slug]/hooks/useGameEngine.ts index da3240e..d5b56a0 100644 --- a/src/app/game/[slug]/hooks/useGameEngine.ts +++ b/src/app/game/[slug]/hooks/useGameEngine.ts @@ -57,6 +57,7 @@ export interface GameEngineResult { audioUrl: string; songTitle: string; songArtist: string; + chartImage: string | undefined; chartId: string | null; offset: number; loadingLrc: boolean; @@ -128,6 +129,7 @@ export function useGameEngine(): GameEngineResult { const [audioUrl, setAudioUrl] = useState(""); const [songTitle, setSongTitle] = useState("Unknown Title"); const [songArtist, setSongArtist] = useState("Unknown Artist"); + const [chartImage, setChartImage] = useState<string | undefined>(undefined); const [chartId, setChartId] = useState<string | null>(null); const [offset, setOffset] = useState(0); const [loadingLrc, setLoadingLrc] = useState(false); @@ -404,6 +406,8 @@ export function useGameEngine(): GameEngineResult { if (typeof data.offset === "number") setOffset(data.offset); if (typeof data.offset === "string" && data.offset.trim() !== "") setOffset(Number(data.offset)); if (typeof data.title === "string") setSongTitle(data.title); + if (typeof data.thumbnail === "string") setChartImage(data.thumbnail); + if (typeof data.chartImage === "string") setChartImage(data.chartImage); if (typeof data.artist === "string") setSongArtist(data.artist); if (typeof data.skip_backing === "boolean") setSkipBacking(data.skip_backing); if (typeof data.skip_backing === "string") setSkipBacking(data.skip_backing === "true"); @@ -420,7 +424,9 @@ export function useGameEngine(): GameEngineResult { lrc: (record as Record<string, unknown>).lrc, offset: (record as Record<string, unknown>).offset, title: (record as Record<string, unknown>).title, + thumbnail: (record as Record<string, unknown>).thumbnail, artist: (record as Record<string, unknown>).artist, + skip_backing: (record as Record<string, unknown>).skip_backing, }); }) .catch(() => { @@ -590,6 +596,7 @@ export function useGameEngine(): GameEngineResult { audioUrl, songTitle, songArtist, + chartImage, chartId, offset, loadingLrc, diff --git a/src/app/game/[slug]/page.tsx b/src/app/game/[slug]/page.tsx index 312ee70..757bf23 100644 --- a/src/app/game/[slug]/page.tsx +++ b/src/app/game/[slug]/page.tsx @@ -17,7 +17,7 @@ function GameInner() { // refs audioRef, videoRef, charRowRef, charRefs, // song - audioUrl, songTitle, songArtist, chartId, isVideo, isReady, loadingLrc, + audioUrl, songTitle, songArtist, chartImage, chartId, isVideo, isReady, loadingLrc, // phase phase, countdown, // game state @@ -76,6 +76,7 @@ function GameInner() { loadingLrc={loadingLrc} songTitle={songTitle} songArtist={songArtist} + chartImage={chartImage} chartId={chartId} audioUrl={audioUrl} isVideo={isVideo} |