feat: rozšíření chytání motýlků o progres, mince a škůdce

- serverová perzistence statistik (mince, úrovně, zlatí motýli) + týmový žebříček - prémiová zlatá síťka za milník (větší, magnetická, odolná proti ptákům) - perzistentní škůdci: vosy na zaklikání a ptáci trhající síťku (F5-proof) - placený plašič ptáků s odpočtem, denní bonus, kombo - WOW zlatý motýl + osobní statistiky v modalu žebříčku - oprava zobrazení ikonek (root-absolutní cesty k public assetům) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-22 11:59:17 +02:00
parent c8c5ecc60c
commit c5ca6c9d41
25 changed files with 2454 additions and 205 deletions
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { Modal } from "react-bootstrap";
+import { ButterflyLeaderboardEntry, ButterflyStats, getButterflyLeaderboard } from "../../../../types";
+import { useAuth } from "../../context/auth";
+import "./ButterflyLeaderboardModal.scss";
+
+type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    myStats?: ButterflyStats;
+};
+
+const MEDALS = ['🥇', '🥈', '🥉'];
+
+/** Modální dialog s osobními statistikami a týmovým žebříčkem chytačů motýlů. */
+export default function ButterflyLeaderboardModal({ isOpen, onClose, myStats }: Readonly<Props>) {
+    const auth = useAuth();
+    const [entries, setEntries] = useState<ButterflyLeaderboardEntry[]>();
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if (!isOpen) return;
+        let cancelled = false;
+        setLoading(true);
+        getButterflyLeaderboard({ query: { limit: 20 } })
+            .then(res => { if (!cancelled) setEntries(res.data ?? []); })
+            .catch(() => { if (!cancelled) setEntries([]); })
+            .finally(() => { if (!cancelled) setLoading(false); });
+        return () => { cancelled = true; };
+    }, [isOpen]);
+
+    return (
+        <Modal show={isOpen} onHide={onClose} centered>
+            <Modal.Header closeButton>
+                <Modal.Title>🦋 Chytání motýlků</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>
+                {myStats && (
+                    <div className="butterfly-mystats">
+                        <div className="butterfly-mystats-title">
+                            {myStats.level}. {myStats.title}
+                        </div>
+                        <div className="butterfly-mystats-grid">
+                            <div><span className="v">{myStats.caught}</span><span className="l">🦋 chyceno</span></div>
+                            <div><span className="v gold">{myStats.goldenCaught}</span><span className="l">✨ zlatých</span></div>
+                            <div><span className="v">{myStats.coins}</span><span className="l">🪙 mincí</span></div>
+                            <div><span className="v">{myStats.waspsKilled}</span><span className="l">🪰 vos zabito</span></div>
+                            <div><span className="v">{myStats.birdsScared}</span><span className="l">🦅 vyplašeno</span></div>
+                        </div>
+                    </div>
+                )}
+
+                <h6 className="butterfly-leaderboard-heading">Žebříček týmu</h6>
+                {loading && <p className="text-center text-muted mb-0">Načítám žebříček…</p>}
+                {!loading && entries && entries.length === 0 && (
+                    <p className="text-center text-muted mb-0">Zatím nikdo nic nechytil. Buď první!</p>
+                )}
+                {!loading && entries && entries.length > 0 && (
+                    <ol className="butterfly-leaderboard">
+                        {entries.map((e, i) => (
+                            <li
+                                key={e.login}
+                                className={e.login === auth?.login ? 'butterfly-leaderboard-row me' : 'butterfly-leaderboard-row'}
+                            >
+                                <span className="butterfly-leaderboard-rank">{MEDALS[i] ?? `${i + 1}.`}</span>
+                                <span className="butterfly-leaderboard-name" title={e.title}>
+                                    {e.login}
+                                    <span className="butterfly-leaderboard-title">{e.level}. {e.title}</span>
+                                </span>
+                                <span className="butterfly-leaderboard-stats">
+                                    <span className="butterfly-leaderboard-caught">{e.caught} 🦋</span>
+                                    {e.goldenCaught > 0 && (
+                                        <span className="butterfly-leaderboard-golden">{e.goldenCaught} ✨</span>
+                                    )}
+                                </span>
+                            </li>
+                        ))}
+                    </ol>
+                )}
+            </Modal.Body>
+        </Modal>
+    );
+}