show thumbnail on pregame view page

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}