From f2882b27bca1c689e06f544a7236fa22c5cbade0 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 19 Nov 2025 16:31:17 +0800
Subject: [PATCH] [O] Display romaji on error

---
 src/routes/song/[slug]/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/song/[slug]/+page.svelte b/src/routes/song/[slug]/+page.svelte
index 054ffca..c723641 100644
--- a/src/routes/song/[slug]/+page.svelte
+++ b/src/routes/song/[slug]/+page.svelte
@@ -24,7 +24,7 @@
   let settings = $state(data.user.data?.typingSettings ?? typingSettingsDefault)
   $effect(() => { saveUserData({ typingSettings: settings }) })
   const _preprocessKana = (kana: string) => settings.allKata ? toKatakana(kana) : kana
-  const preprocessKana = (kana: string) => settings.showRomaji ? `<ruby>${_preprocessKana(kana)}<rt>${toRomaji(kana)}</rt></ruby>` : _preprocessKana(kana)
+  const preprocessKana = (kana: string, state?: string) => (settings.showRomaji || state === 'wrong') ? `<ruby>${_preprocessKana(kana)}<rt>${toRomaji(kana)}</rt></ruby>` : _preprocessKana(kana)
 
   // Process each line into segments with swi (start word index) and kanji/kana
   type ProcLrcSeg = { swi: number, kanji?: string, kana: string }
@@ -149,13 +149,13 @@
       {#each line.parts as seg}
         {#if !seg.kanji}
           {#each seg.kana as char, c}
-            <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}>{@html preprocessKana(char)}</span>
+            <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}>{@html preprocessKana(char, states[l][seg.swi + c])}</span>
           {/each}
         {:else}
           <ruby>
             <span class="{getKanjiState(l, seg)}">{seg.kanji}</span>{#if settings.isFuri}<rt>
               {#each seg.kana as char, c}
-                <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}>{@html preprocessKana(char)}</span>
+                <span class="{states[l][seg.swi + c]}" class:here={l === li && wi === seg.swi + c}>{@html preprocessKana(char, states[l][seg.swi + c])}</span>
               {/each}
             </rt>{/if}
           </ruby>