feat: přidání vzhledu My Little Pony

client/src/components/WheelConfetti.tsx

@@ -21,6 +21,20 @@ const UMA_EMOJI = ['🐴', '🏇', '🥕', '🏆', '🌸', '✨', '⭐', '🍙',
 // Hlášky z fandomu Umamusume (Umapyoi Densetsu, Teio step, hachimī, Golshi, Oguri „okawari"...)
 const UMA_BADGES = ['1着!', 'Umazing!', 'Umapyoi!', 'Teio step!', 'Hachimī~', 'Golshi approves', 'Okawari!', 'Pakapaka~', 'ウマい!'];
 const UMA_BADGE_COLORS = ['#ff6fa3', '#2e9a3a', '#43b8f0', '#f2a91a'];
+const MLP_EMOJI = ['🦄', '🌈', '✨', '⭐', '🧁', '🍎', '🦋', '💎', '🎈', '🎉', '🍰', '💜'];
+// Hlášky a narážky z My Little Pony: Friendship is Magic
+const MLP_BADGES = ['Friendship is Magic!', '20% cooler!', 'Sonic Rainboom!', 'Yay!', 'Party!', 'Yeehaw!', 'Everypony!', 'Awesome!', 'Darling!', 'Pinkie Promise'];
+const MLP_BADGE_COLORS = ['#8e4fd1', '#f06aa6', '#1e98d3', '#f37033', '#e3b829', '#5b4fc9'];
+/** Postavy Mane 6 (+ Spike) s „hláškou" po finálním výsledku — místo obrázků cutie mark emoji. */
+const MLP_SPEAKERS = [
+    { name: 'Twilight Sparkle', emoji: '⭐', color: '#8e4fd1', quote: 'Podle mého seznamu je to ta nejlogičtější volba!' },
+    { name: 'Rainbow Dash', emoji: '🌈', color: '#1e98d3', quote: 'Tohle je o 20 % úžasnější než ostatní!' },
+    { name: 'Pinkie Pie', emoji: '🎈', color: '#f06aa6', quote: 'Tohle volá po PÁRTY! S dortem! A s cupcaky!' },
+    { name: 'Applejack', emoji: '🍎', color: '#f37033', quote: 'Poctivé jídlo pro poctivou práci. Jíhá!' },
+    { name: 'Fluttershy', emoji: '🦋', color: '#e3b829', quote: 'Jé… teda, jestli to nevadí… yay.' },
+    { 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 DURATION_MS = 6400;
 
 const rand = (min: number, max: number) => min + Math.random() * (max - min);
@@ -107,6 +121,20 @@ function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece
         }));
     }
     const count = big ? 50 : 24;
+    if (theme === 'mlp') {
+        return Array.from({ length: count }, (_, id) => {
+            const base: React.CSSProperties = {
+                ...launchStyle(pick(LAUNCHES)),
+                ['--r1' as any]: `${rand(-25, 25)}deg`,
+                ['--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: 'confetti-mlp confetti-uma-emoji', style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(MLP_EMOJI) };
+        });
+    }
     return Array.from({ length: count }, (_, id) => {
         const roll = Math.random();
         // Samolepky se tolik netočí, ať jsou čitelné
@@ -157,11 +185,19 @@ 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,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [burstKey],
+    );
+
     if (!active || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return null;
 
     return createPortal(
         <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>}
             {pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
             {speaker && (
                 <div className="confetti-uma-voice">
@@ -172,6 +208,15 @@ 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>
+                    <div className="confetti-mlp-bubble">
+                        <p>„{mlpSpeaker.quote}"</p>
+                        <small>— {mlpSpeaker.name}</small>
+                    </div>
+                </div>
+            )}
         </div>,
         document.body,
     );