remove backing vocals/lyrics if set_backing is set to true in game code

2 files changed, 28 insertions, 14 deletions

diff --git a/src/app/game/game.utils.ts b/src/app/game/game.utils.ts
index 4c99c55..9164dc9 100644
--- a/src/app/game/game.utils.ts
+++ b/src/app/game/game.utils.ts
@@ -3,9 +3,13 @@ export interface GameLine {
   content: string;
 }
 
-export function parseLrcLines(lrcText: string): GameLine[] {
+export function parseLrcLines(
+  lrcText: string,
+  options?: { skipBacking?: boolean }
+): GameLine[] {
   const result: GameLine[] = [];
   const lineRegex = /\[(\d{2,3}):(\d{2})\.(\d{2,3})\]/g;
+  const { skipBacking = false } = options ?? {};
 
   for (const rawLine of lrcText.split("\n")) {
     const timestamps: number[] = [];
@@ -27,10 +31,10 @@ export function parseLrcLines(lrcText: string): GameLine[] {
 
     if (timestamps.length === 0) continue;
 
-    const content = rawLine
-      .slice(lastIndex)
-      .replace(/\([^)]*\)/g, "")
-      .trim();
+    const content = (skipBacking
+      ? rawLine.slice(lastIndex).replace(/\([^)]*\)/g, "")
+      : rawLine.slice(lastIndex)
+    ).trim();
     if (!content) continue;
 
     for (const ms of timestamps) {
diff --git a/src/app/game/page.tsx b/src/app/game/page.tsx
index b87fb00..6b6984a 100644
--- a/src/app/game/page.tsx
+++ b/src/app/game/page.tsx
@@ -101,6 +101,7 @@ function GameInner() {
   const [clearShowing, setClearShowing] = useState(false);
   const [comboAnimKey, setComboAnimKey] = useState(0);
   const [countdown, setCountdown] = useState(0);
+  const [skipBacking, setSkipBacking] = useState(false);
   const charRowRef = useRef<HTMLDivElement | null>(null);
   const charRefs = useRef<(HTMLSpanElement | null)[]>([]);
   const [wrapSpaceIndicators, setWrapSpaceIndicators] = useState<boolean[]>([]);
@@ -108,7 +109,10 @@ function GameInner() {
 
   const [g, dispatch] = useReducer(gReducer, initialGState);
 
-  const gameLines = useMemo(() => parseLrcLines(lrcContent), [lrcContent]);
+  const gameLines = useMemo(
+    () => parseLrcLines(lrcContent, { skipBacking }),
+    [lrcContent, skipBacking]
+  );
   const isReady = !loadingLrc && !!lrcContent && !!audioUrl;
 
   const accuracy =
@@ -304,8 +308,8 @@ function GameInner() {
     });
   }, [timeBasedLineIdx]);
 
-  const loadData = useCallback((data: Record<string, string>) => {
-    if (data.lrc) {
+  const loadData = useCallback((data: Record<string, unknown>) => {
+    if (typeof data.lrc === "string" && data.lrc) {
       setLoadingLrc(true);
       fetch(data.lrc)
         .then((r) => r.text())
@@ -314,10 +318,16 @@ function GameInner() {
           setLoadingLrc(false);
         });
     }
-    if (data.file1) setAudioUrl(data.file1);
-    if (data.offset) setOffset(Number(data.offset));
-    if (data.title) setSongTitle(data.title);
-    if (data.artist) setSongArtist(data.artist);
+    if (typeof data.file1 === "string") setAudioUrl(data.file1);
+    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.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");
   }, []);
 
   useEffect(() => {
@@ -325,7 +335,7 @@ function GameInner() {
     if (!code) return;
     try {
       const json = atob(code);
-      const data = JSON.parse(json) as Record<string, string>;
+      const data = JSON.parse(json) as Record<string, unknown>;
       loadData(data);
     } catch {}
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -399,7 +409,7 @@ function GameInner() {
     if (!codeInput.trim()) return;
     try {
       const json = atob(codeInput.trim());
-      const data = JSON.parse(json) as Record<string, string>;
+      const data = JSON.parse(json) as Record<string, unknown>;
       loadData(data);
       handleRestart();
       toast.success("Song loaded!", { theme: "dark" });