Better bracket logic

2026-02-14 01:04:54 +01:00
parent 87d3ea5ef0
commit 7b878b3abe
32 changed files with 1326 additions and 1348 deletions
@@ -0,0 +1,146 @@
+// frontend/src/pages/Tournament.jsx
+
+import { CalendarDays, Loader2, Network, Settings } from 'lucide-react';
+import { useEffect, useState, useRef } from 'react';
+import { useOutletContext, useParams } from 'react-router-dom';
+import BracketView from '../components/Bracket/BracketView';
+import TournamentForm from '../components/Forms/TournamentForm';
+import ScheduleView from '../components/Schedule/ScheduleView';
+import ScoreModal from '../components/Tournament/ScoreModal';
+import Modal from '../components/UI/Modal';
+import api, { WS_URL } from '../services/api';
+
+export default function Tournament() {
+    const { id } = useParams();
+    const { setNavTitle, setNavSubtitle, isAdmin } = useOutletContext();
+
+    const [details, setDetails] = useState(null);
+    const [matches, setMatches] = useState([]);
+    const [view, setView] = useState('bracket');
+    const [loading, setLoading] = useState(true);
+    const [showSettings, setShowSettings] = useState(false);
+    const [scoreMatch, setScoreMatch] = useState(null);
+    const wsRef = useRef(null);
+
+    // --- DATA PROCESSOR ---
+    const processMatches = (rawMatches, courts, teams) => {
+        if (!rawMatches) return [];
+
+        const courtMap = Object.fromEntries(courts.map(c => [c.id, c.name]));
+        const teamMap = Object.fromEntries(teams.map(t => [t.id, t.name]));
+
+        const incoming = {};
+        rawMatches.forEach(m => {
+            const num = m.match_number;
+            if (m.winner_next_match_id) {
+                (incoming[m.winner_next_match_id] = incoming[m.winner_next_match_id] || []).push({ label: `Winner of #${num}`, id: m.id });
+            }
+            if (m.loser_next_match_id) {
+                (incoming[m.loser_next_match_id] = incoming[m.loser_next_match_id] || []).push({ label: `Loser of #${num}`, id: m.id });
+            }
+        });
+
+        return rawMatches.map(m => {
+            const sources = incoming[m.id] || [];
+
+            const p1 = m.p1_team_id ? teamMap[m.p1_team_id] : (sources[0]?.label || 'TBD');
+            const p2 = m.p2_team_id ? teamMap[m.p2_team_id] : (sources[1]?.label || 'TBD');
+
+            const winnerName = m.winner_team_id ? teamMap[m.winner_team_id] : null;
+
+            const hasTeams = !!(m.p1_team_id && m.p2_team_id);
+            const isFinished = m.status === "Finished";
+            const isReady = hasTeams && !isFinished;
+
+            return {
+                ...m,
+                bracket: m.bracket_type,
+                round: m.round_number,
+                number: m.match_number,
+                p1,
+                p2,
+                p1_is_real: !!m.p1_team_id,
+                p2_is_real: !!m.p2_team_id,
+                winnerName,
+                isReady,
+                court: courtMap[m.court_id] || 'TBD',
+                time: m.start_time ? new Date(m.start_time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '',
+                p1_sets: m.sets?.filter(s => s.p1 > s.p2).length || 0,
+                p2_sets: m.sets?.filter(s => s.p2 > s.p1).length || 0,
+
+                hasTeams,
+                isReady,
+                isFinished
+            };
+        });
+    };
+
+    const fetchData = async () => {
+        try {
+            const res = await api.get(`/tournaments/${id}`);
+            setDetails(res);
+            setNavTitle(res.name);
+            setNavSubtitle(new Date(res.timestamp).toLocaleDateString());
+            setMatches(processMatches(res.matches, res.courts, res.teams));
+        } catch (err) { console.error(err); } finally { setLoading(false); }
+    };
+
+    useEffect(() => {
+        fetchData();
+        if (wsRef.current) return;
+        const connect = () => {
+            const ws = new WebSocket(WS_URL);
+            wsRef.current = ws;
+            ws.onmessage = (e) => {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'tournament_update' && msg.id === id) fetchData();
+            };
+            ws.onclose = () => { wsRef.current = null; };
+        };
+        connect();
+        return () => { if (wsRef.current?.readyState === 1) wsRef.current.close(); wsRef.current = null; };
+    }, [id]);
+
+    const handleDeleteTournament = async (tId) => {
+        if (window.confirm("Purge this tournament?")) {
+            await api.delete(`/tournaments/${tId}`);
+            window.location.href = '/';
+        }
+    };
+
+    if (loading) return <div className="flex h-full items-center justify-center"><Loader2 className="animate-spin text-orange-600" size={48} /></div>;
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="border-b border-zinc-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50 backdrop-blur px-6 py-3 flex justify-between items-center shrink-0 z-20">
+                <div className="flex gap-2">
+                    <button onClick={() => setView('bracket')} className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-wider transition ${view === 'bracket' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}>
+                        <Network size={16} /> Bracket
+                    </button>
+                    <button onClick={() => setView('schedule')} className={`flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-black uppercase tracking-wider transition ${view === 'schedule' ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400' : 'text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800'}`}>
+                        <CalendarDays size={16} /> Schedule
+                    </button>
+                </div>
+                {isAdmin && <button onClick={() => setShowSettings(true)} className="p-2 text-zinc-400 hover:text-orange-600 transition rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800"><Settings size={20} /></button>}
+            </div>
+
+            <div className="flex-1 overflow-hidden relative">
+                {view === 'bracket'
+                    ? <BracketView matches={matches} onMatchClick={setScoreMatch} />
+                    : <ScheduleView schedule={matches} onMatchClick={setScoreMatch} />
+                }
+            </div>
+
+            {scoreMatch && (
+                <ScoreModal
+                    isOpen={!!scoreMatch} onClose={() => setScoreMatch(null)} match={scoreMatch} isAdmin={isAdmin}
+                    onClear={async (mid, c) => { await api.delete(`/tournaments/${id}/matches/${mid}/score?code=${encodeURIComponent(c || '')}`); setScoreMatch(null); }}
+                    onSubmit={async (mid, s, c) => { await api.post(`/tournaments/${id}/matches/${mid}/score`, { sets: s, code: c }); setScoreMatch(null); }}
+                />
+            )}
+            <Modal isOpen={showSettings} onClose={() => setShowSettings(false)} title="Edit Tournament">
+                <TournamentForm tournament={details} onSuccess={() => { setShowSettings(false); fetchData(); }} onDelete={handleDeleteTournament} />
+            </Modal>
+        </div>
+    );
+}