feat: přidání vzhledu Hell Girl

client/src/components/WheelConfetti.tsx

@@ -35,6 +35,19 @@ const MLP_SPEAKERS = [
     { name: 'Rarity', emoji: '💎', color: '#5b4fc9', quote: 'Naprosto božská volba, drahoušku!' },
     { name: 'Spike', emoji: '🐉', color: '#62bc4d', quote: 'Zapsáno do svitku a odesláno princezně!' },
 ];
+const HG_EMOJI = ['🥀', '🏮', '⛩️', '🔥', '🕯️', '🌑', '🦋', '👁️', '🕸️', '🌸'];
+// Hlášky z Jigoku Shōjo (Pekelná korespondence, „Ippen, shinde miru?", poslání do pekla...)
+const HG_BADGES = ['いっぺん、死んでみる？', '地獄通信', '地獄流し', 'Ippen… shinde miru?', 'Pomsta vykonána', '0:00', 'Uvaž to dobře…', 'Smlouva uzavřena'];
+const HG_BADGE_COLORS = ['#12070a', '#7a0c1f', '#2e0d24'];
+/** Ai Enma a její služebníci s „hláškou" po finálním výsledku — místo obrázků emoji. */
+const HG_SPEAKERS = [
+    { name: 'Ai Enma', emoji: '🥀', color: '#c8102e', quote: 'Smlouva je uzavřena. Tenhle oběd tě bude provázet až na věčnost.' },
+    { name: 'Ichimoku Ren', emoji: '👁️', color: '#6b5a8a', quote: 'Prohlédl jsem svým okem všechny podniky. Tenhle jediný obstál.' },
+    { name: 'Hone Onna', emoji: '💀', color: '#b8862b', quote: 'Dobré až na kost, zlato. Mně z toho stejně nic nezůstane.' },
+    { name: 'Wanyūdō', emoji: '🔥', color: '#d9582b', quote: 'Já jsem kolo. Kolo rozhodlo. Víc k tomu nemám.' },
+    { name: 'Kikuri', emoji: '🎀', color: '#d4407a', quote: 'Hihi! Tohle bych do pekla poslala jako první!' },
+    { name: 'Babička', emoji: '🕸️', color: '#8c7672', quote: 'Ai, oběd je na stole… jako každý den už čtyři sta let.' },
+];
 const DURATION_MS = 6400;
 
 const rand = (min: number, max: number) => min + Math.random() * (max - min);
@@ -121,7 +134,10 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
         }));
     }
     const count = big ? 50 : 24;
-    if (theme === 'mlp') {
+    if (theme === 'mlp' || theme === 'hellgirl') {
+        const [prefix, badges, colors, emoji] = theme === 'mlp'
+            ? ['confetti-mlp', MLP_BADGES, MLP_BADGE_COLORS, MLP_EMOJI]
+            : ['confetti-hg', HG_BADGES, HG_BADGE_COLORS, HG_EMOJI];
         return Array.from({ length: count }, (_, id) => {
             const base: React.CSSProperties = {
                 ...launchStyle(pick(LAUNCHES)),
@@ -129,10 +145,10 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
                 ['--r2' as any]: `${rand(-40, 40)}deg`,
             };
             if (Math.random() < 0.35) {
-                return { id, className: 'confetti-mlp confetti-mlp-badge', content: pick(MLP_BADGES),
-                    style: { ...base, background: pick(MLP_BADGE_COLORS) } };
+                return { id, className: `${prefix} ${prefix}-badge`, content: pick(badges),
+                    style: { ...base, background: pick(colors) } };
             }
-            return { id, className: 'confetti-mlp confetti-uma-emoji', style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(MLP_EMOJI) };
+            return { id, className: `${prefix} confetti-uma-emoji`, style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(emoji) };
         });
     }
     return Array.from({ length: count }, (_, id) => {
@@ -185,9 +201,9 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [burstKey]);
 
-    // MLP: hlášku pronese náhodná postava z Mane 6
-    const mlpSpeaker = useMemo(
-        () => theme === 'mlp' && big ? pick(MLP_SPEAKERS) : undefined,
+    // MLP: hlášku pronese náhodná postava z Mane 6, Hell Girl: Ai Enma či některý z jejích služebníků
+    const emojiSpeaker = useMemo(
+        () => big ? (theme === 'mlp' ? pick(MLP_SPEAKERS) : theme === 'hellgirl' ? pick(HG_SPEAKERS) : undefined) : undefined,
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [burstKey],
     );
@@ -198,6 +214,7 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
         <div className={`wheel-confetti wheel-confetti-${theme}`} key={burstKey} aria-hidden>
             {theme === 'umamusume' && big && <div className="confetti-uma-banner">🏆 1着 🏆</div>}
             {theme === 'mlp' && big && <div className="confetti-mlp-banner">🌈 Sonic Rainboom! 🌈</div>}
+            {theme === 'hellgirl' && big && <div className="confetti-hg-banner">🏮 地獄流し 🏮</div>}
             {pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
             {speaker && (
                 <div className="confetti-uma-voice">
@@ -208,12 +225,12 @@ export default function WheelConfetti({ theme, burstKey, big = false }: Readonly
                     </div>
                 </div>
             )}
-            {mlpSpeaker && (
-                <div className="confetti-uma-voice confetti-mlp-voice" style={{ ['--mlp-speaker' as any]: mlpSpeaker.color }}>
-                    <span className="confetti-mlp-avatar">{mlpSpeaker.emoji}</span>
+            {emojiSpeaker && (
+                <div className={`confetti-uma-voice confetti-${theme}-voice`} style={{ ['--mlp-speaker' as any]: emojiSpeaker.color }}>
+                    <span className="confetti-mlp-avatar">{emojiSpeaker.emoji}</span>
                     <div className="confetti-mlp-bubble">
-                        <p>„{mlpSpeaker.quote}"</p>
-                        <small>— {mlpSpeaker.name}</small>
+                        <p>„{emojiSpeaker.quote}"</p>
+                        <small>— {emojiSpeaker.name}</small>
                     </div>
                 </div>
             )}