feat: spin the wheel, objednavani scrape menu, historie cen

2026-09-23 15:41:15 +02:00
parent 682deaf20b
commit e281615cc3
35 changed files with 3979 additions and 15 deletions
@@ -0,0 +1,178 @@
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { StyleTheme } from "../context/settings";
+import { UmaCharacter, loadUmaCharacters } from "../utils/umaCharacters";
+import "./WheelConfetti.scss";
+
+type WheelTheme = StyleTheme;
+
+type Props = {
+    theme: WheelTheme,
+    /** Mění se s každým výsledkem — nová hodnota spustí novou salvu. */
+    burstKey: number,
+    /** Velká salva (finální výsledek) vs. menší (mezivýsledek). */
+    big?: boolean,
+};
+
+type UmaImage = { src: string, round: boolean };
+
+const SIMPLE_COLORS = ['#16a34a', '#0ea5e9', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6', '#ef4444'];
+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 DURATION_MS = 5200;
+
+const rand = (min: number, max: number) => min + Math.random() * (max - min);
+const pick = <T,>(list: T[]) => list[Math.floor(Math.random() * list.length)];
+
+type Piece = { id: number, style: React.CSSProperties, content: React.ReactNode, className: string };
+
+type Launch = 'cannon-left' | 'cannon-right' | 'burst' | 'rain';
+
+const LAUNCHES: Launch[] = ['cannon-left', 'cannon-left', 'cannon-right', 'cannon-right', 'burst', 'rain'];
+
+/**
+ * Výchozí pozice a dráha jednoho kousku: děla z dolních rohů střílí šikmo vzhůru,
+ * „výbuch" se rozletí ze středu a déšť padá opožděně shora. Kousek nejprve vyletí
+ * do vrcholu (--x1/--y1) a pak dopadne mimo obrazovku (--x2/--y2).
+ */
+function launchStyle(launch: Launch): React.CSSProperties {
+    let left: number, top: number, x1: number, y1: number, x2: number, y2: number, delay: number;
+    switch (launch) {
+        case 'cannon-left':
+        case 'cannon-right': {
+            const dir = launch === 'cannon-left' ? 1 : -1;
+            left = launch === 'cannon-left' ? rand(-3, 3) : rand(97, 103);
+            top = rand(88, 100);
+            x1 = dir * rand(12, 62);
+            y1 = -rand(45, 88);
+            x2 = x1 + dir * rand(6, 22);
+            y2 = rand(12, 25);
+            delay = rand(0, 450);
+            break;
+        }
+        case 'burst': {
+            const angle = rand(0, Math.PI * 2);
+            const radius = rand(18, 48);
+            left = 50;
+            top = 42;
+            x1 = Math.cos(angle) * radius;
+            y1 = Math.sin(angle) * radius * 0.8 - rand(5, 15);
+            x2 = x1 * 1.35;
+            y2 = rand(70, 85);
+            delay = rand(0, 250);
+            break;
+        }
+        default: {
+            left = rand(0, 100);
+            top = -12;
+            x1 = rand(-8, 8);
+            y1 = rand(35, 55);
+            x2 = x1 + rand(-10, 10);
+            y2 = rand(115, 125);
+            delay = rand(400, 1800);
+        }
+    }
+    const spin = rand(180, 720) * (Math.random() < 0.5 ? -1 : 1);
+    return {
+        left: `${left}vw`,
+        top: `${top}vh`,
+        animationName: launch === 'rain' ? 'confetti-rain' : 'confetti-throw',
+        animationDelay: `${delay}ms`,
+        animationDuration: `${rand(2600, 3900)}ms`,
+        ['--x1' as any]: `${x1}vw`,
+        ['--y1' as any]: `${y1}vh`,
+        ['--x2' as any]: `${x2}vw`,
+        ['--y2' as any]: `${y2}vh`,
+        ['--r1' as any]: `${spin * 0.4}deg`,
+        ['--r2' as any]: `${spin}deg`,
+    };
+}
+
+function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece[] {
+    if (theme === 'simple') {
+        const count = big ? 170 : 80;
+        return Array.from({ length: count }, (_, id) => ({
+            id,
+            className: 'confetti-paper',
+            content: null,
+            style: {
+                ...launchStyle(pick(LAUNCHES)),
+                width: `${rand(6, 11)}px`,
+                height: `${rand(10, 18)}px`,
+                background: pick(SIMPLE_COLORS),
+                borderRadius: Math.random() < 0.3 ? '50%' : '2px',
+            },
+        }));
+    }
+    const count = big ? 50 : 24;
+    return Array.from({ length: count }, (_, id) => {
+        const roll = Math.random();
+        // Samolepky se tolik netočí, ať jsou čitelné
+        const base: React.CSSProperties = {
+            ...launchStyle(pick(LAUNCHES)),
+            ['--r1' as any]: `${rand(-25, 25)}deg`,
+            ['--r2' as any]: `${rand(-40, 40)}deg`,
+        };
+        if (images.length && roll < 0.45) {
+            const image = pick(images);
+            return { id, className: `confetti-uma confetti-uma-img${image.round ? ' round' : ''}`, style: base,
+                content: <img src={image.src} alt="" loading="eager" /> };
+        }
+        if (roll < 0.7) {
+            return { id, className: 'confetti-uma confetti-uma-badge', content: pick(UMA_BADGES),
+                style: { ...base, background: pick(UMA_BADGE_COLORS) } };
+        }
+        return { id, className: 'confetti-uma confetti-uma-emoji', style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(UMA_EMOJI) };
+    });
+}
+
+/** Salva konfet po výsledku kola štěstí, ve vzhledu podle zvoleného stylu. */
+export default function WheelConfetti({ theme, burstKey, big = false }: Readonly<Props>) {
+    const [characters, setCharacters] = useState<UmaCharacter[]>([]);
+    const [active, setActive] = useState(false);
+
+    useEffect(() => {
+        if (theme === 'umamusume') loadUmaCharacters().then(setCharacters);
+    }, [theme]);
+
+    useEffect(() => {
+        if (!burstKey) return;
+        setActive(true);
+        const t = setTimeout(() => setActive(false), DURATION_MS + 900);
+        return () => clearTimeout(t);
+    }, [burstKey]);
+
+    const pieces = useMemo(
+        () => buildPieces(theme, big, characters.flatMap(c => c.images.map(src => ({ src, round: !!c.round })))),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [burstKey],
+    );
+
+    // Při finálním výsledku „promluví" náhodná postava svou hláškou
+    const speaker = useMemo(() => {
+        const withQuote = characters.filter(c => c.quote);
+        return theme === 'umamusume' && big && withQuote.length ? pick(withQuote) : 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>}
+            {pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
+            {speaker && (
+                <div className="confetti-uma-voice">
+                    <img src={pick(speaker.images)} alt="" className={speaker.round ? 'round' : undefined} />
+                    <div className="confetti-uma-bubble">
+                        <p>„{speaker.quote}"</p>
+                        <small>— {speaker.name}</small>
+                    </div>
+                </div>
+            )}
+        </div>,
+        document.body,
+    );
+}