import { useState, useEffect, useRef, useCallback, useMemo } from "react"; import { PixiPitch, DEFAULT_DEBUG_OVERLAYS } from "@/GraficsEngine/PixiPitch"; import type { DebugOverlays } from "@/GraficsEngine/PixiPitch"; import { DebugPanel } from "@/GameInterface/DebugPanel"; import { CrowdHeatmapPanel } from "@/GameInterface/CrowdHeatmapPanel"; import type { CrowdMode } from "@/GameInterface/CrowdHeatmapPanel"; import { Icon } from "@/GameInterface/Icons"; import { evaluatePoint, DEFAULT_EVAL_CONFIG } from "@/GameEngine/Infrastructure/SpatialEvaluation"; import type { EvaluationConfig, EvaluationResult } from "@/GameEngine/Infrastructure/SpatialEvaluation"; import { attackingTeam } from "@/GameEngine/Infrastructure/CrowdGrid"; import { setDebugMode, clearDebugLog } from "@/GameEngine/Suport/DebugLog"; import { clearBroadcastLine, getBroadcastLine, onBroadcastLine, } from "@/GameInterface/Broadcast/BroadcastLog"; import "@/GameEngine/Suport/DebugSubscriber"; import "@/GameInterface/Broadcast/BroadcastSubscriber"; import { TEST_SCENARIOS } from "@/GameEngine/Suport/TestCases"; import type { TestScenario } from "@/GameEngine/Suport/TestCases"; import { createMatchState } from "@/GameEngine/Domain/gameState"; import { teamLineup } from "@/GameEngine/Domain/TeamLineup"; import { getRuntimeLineup, normalizeGameState } from "@/GameEngine/Domain/RuntimeLineup"; import { gameBus, type GameEvents } from "@/GameEngine/Infrastructure/EventBus"; import { applyTeamTacticsConfig } from "@/GameEngine/Configs/DefenseConfig"; import { applyTeamAttackConfig } from "@/GameEngine/Configs/AttackConfig"; import { DEFAULT_TACTICAL_STYLE, TACTICAL_STYLE_OPTIONS } from "@/types/tacticsTypes"; import type { TacticalStyle } from "@/types/tacticsTypes"; import type { GameState, GamePlayer, Formation, TeamIntent, TeamId } from "@/GameEngine/types"; import type { PlayerDecision } from "@/GameEngine/Domain/DecisionTree"; import type { PlayerStatsRecord, RosterPlayer } from "@/types/playerTypes"; import playersJson from "@/Data/players.json"; import rolesJson from "@/Data/roles.json"; import formation433Fallback from "@/Data/formations/4-3-3.json"; // ── Constants ──────────────────────────────────────────────────────────────── /** If `/api/formations` is unreachable (wrong dev server, no Bun, etc.), still populate dropdowns. */ const FORMATION_IDS_FALLBACK = [ "3-4-3", "3-5-2", "4-1-4-1", "4-2-2-2", "4-2-3-1", "4-3-1-2", "4-3-3", "4-4-2", "4-5-1", "5-3-2", ] as const; const ALL_PLAYERS = playersJson as RosterPlayer[]; const TEAM_RED = ALL_PLAYERS.filter(p => p.squadId === 'team_red'); const TEAM_BLUE = ALL_PLAYERS.filter(p => p.squadId === 'team_blue'); const SQUADS: Record = { team_red: { label: 'Team Red', players: TEAM_RED }, team_blue: { label: 'Team Blue', players: TEAM_BLUE }, }; const SPEEDS = [ { label: '0.25×', value: 0.25 }, { label: '0.5×', value: 0.5 }, { label: '1×', value: 1 }, { label: '2×', value: 2 }, ]; // Pitch sizing (mirrors MatchScreen). Aspect derived from canvas-mapped pitch + margins. const PITCH_ASPECT = 124 / 80; const PITCH_MIN_W = 320; const PITCH_MIN_H = Math.round(PITCH_MIN_W / PITCH_ASPECT); function fitPitch(containerW: number, containerH: number): { w: number; h: number } | null { if (containerW <= 0 || containerH <= 0) return null; const widthFromHeight = containerH * PITCH_ASPECT; let w: number, h: number; if (widthFromHeight <= containerW) { w = widthFromHeight; h = containerH; } else { w = containerW; h = containerW / PITCH_ASPECT; } return { w: Math.max(PITCH_MIN_W, Math.floor(w)), h: Math.max(PITCH_MIN_H, Math.floor(h)), }; } // ── URL params helpers ──────────────────────────────────────────────────────── const VALID_SQUADS = new Set(Object.keys(SQUADS)); const VALID_MODES = new Set(['11v11', 'scenario']); function urlStr(key: string): string | null { return new URLSearchParams(window.location.search).get(key); } function urlInt(key: string, min: number, max: number): number | null { const v = urlStr(key); if (v === null) return null; const n = parseInt(v, 10); return isNaN(n) ? null : Math.min(max, Math.max(min, n)); } /** Build a URL search string from a params map, omitting null/undefined values. */ function buildSearch(params: Record): string { const p = new URLSearchParams(); for (const [k, v] of Object.entries(params)) { if (v != null && v !== '') p.set(k, v); } return p.toString() ? `?${p.toString()}` : ''; } /** Derive a localStorage key from a URL search string so each config has its own save slot. */ function stateKeyFromSearch(search: string): string { const p = new URLSearchParams(search.replace(/^\?/, '')); const sorted = [...p.entries()].sort(([a], [b]) => a.localeCompare(b)); const str = sorted.map(([k, v]) => `${k}=${v}`).join('&'); return str ? `touchlines-test-state:${str}` : 'touchlines-test-state'; } const DECISION_BADGE: Record = { carry: { label: "CARRY", cls: "text-emerald-400 border-emerald-400/50" }, shoot: { label: "SHOOT", cls: "text-red-400 border-red-400/50" }, pass: { label: "PASS", cls: "text-blue-400 border-blue-400/50" }, through_ball: { label: "TB", cls: "text-purple-400 border-purple-400/50" }, dribble: { label: "DRIBBLE", cls: "text-fuchsia-400 border-fuchsia-400/50" }, tackle: { label: "TACKLE", cls: "text-orange-400 border-orange-400/50" }, press: { label: "PRESS", cls: "text-yellow-400 border-yellow-400/50" }, support_run: { label: "RUN", cls: "text-cyan-400 border-cyan-400/50" }, create_space: { label: "SPACE", cls: "text-purple-400 border-purple-400/50" }, chase_loose_ball: { label: "CHASE", cls: "text-amber-400 border-amber-400/50" }, hold_shape: { label: "SHAPE", cls: "text-blue-400 border-blue-400/50" }, track_mark: { label: "MARK", cls: "text-cyan-400 border-cyan-400/50" }, step_into_carry_lane: { label: "STEP", cls: "text-red-400 border-red-400/50" }, idle: { label: "IDLE", cls: "text-muted-foreground/30 border-muted-foreground/20" }, }; /** Off-ball intent → badge — shown when decision.type is `support_run`. */ type OffBallIntentKey = GameEvents['offBallScores']['intent']; const OFF_BALL_INTENT_BADGE: Record = { offer_support: { label: "SUPPORT", cls: "text-emerald-400 border-emerald-400/50" }, hold_space: { label: "SHAPE", cls: "text-violet-400 border-violet-400/50" }, make_run: { label: "RUN", cls: "text-red-400 border-red-400/50" }, }; type RolesJson = Record; }>; const ROLES = rolesJson as RolesJson; const MINI_SCENARIOS = TEST_SCENARIOS.filter(s => s.id !== '11v11-classic'); /** * Intent override mode for the /test screen. * auto → engine decides at every possession transfer (default) * balanced → force balanced (no overlay, even after counter triggers) * counter_attack → force counter-attack offensive overlay * hold_shape → force defensive hold-shape state (low-line, passive) * press_now → force defensive press-now state (high-press override) */ type IntentOverride = 'auto' | TeamIntent; const INTENT_OVERRIDE_OPTIONS: { value: IntentOverride; label: string; cls: string }[] = [ { value: 'auto', label: 'Auto', cls: 'text-muted-foreground' }, { value: 'balanced', label: 'Balanced', cls: 'text-emerald-400' }, { value: 'counter_attack', label: 'Counter', cls: 'text-orange-400' }, { value: 'switch_play', label: 'Switch', cls: 'text-violet-400' }, { value: 'hold_shape', label: 'Hold', cls: 'text-sky-400' }, { value: 'press_now', label: 'Press', cls: 'text-rose-400' }, ]; const INTENT_BADGE: Record = { balanced: { label: 'BALANCED', cls: 'text-emerald-400 border-emerald-400/40 bg-emerald-400/10' }, counter_attack: { label: 'COUNTER', cls: 'text-orange-400 border-orange-400/40 bg-orange-400/10' }, switch_play: { label: 'SWITCH', cls: 'text-violet-400 border-violet-400/40 bg-violet-400/10' }, hold_shape: { label: 'HOLD', cls: 'text-sky-400 border-sky-400/40 bg-sky-400/10' }, press_now: { label: 'PRESS', cls: 'text-rose-400 border-rose-400/40 bg-rose-400/10' }, }; // ── Attr override helper ─────────────────────────────────────────────────── function applyAttrOverride(players: GamePlayer[], a: number, b: number): GamePlayer[] { return players.map(p => { const v = p.team === 'A' ? a : b; const raw: PlayerStatsRecord = { passing: v, vision: v, finishing: v, dribbling: v, pressing: v, tackling: v, speed: v, acceleration: v, stamina: v, heading: v, strength: v, reflex: v, jump: v, }; const baseStats = teamLineup(raw, p.role); const energy = 100; return { ...p, baseStats, stamina: raw.stamina, energy, runtimeStats: getRuntimeLineup(baseStats, { energy }), }; }); } // ── Sub-components ──────────────────────────────────────────────────────────── function PlayerRow({ player, decision, offBallIntent, isHolder, isSelected, onClick, }: { player: GamePlayer; decision?: PlayerDecision; offBallIntent?: OffBallIntentKey; isHolder: boolean; isSelected: boolean; onClick: (p: GamePlayer) => void; }) { // For support_run we substitute the actual off-ball intent badge so the row // can distinguish offer_support / hold_space / make_run instead of always "RUN". const badge = decision ? (decision.type === 'support_run' && offBallIntent ? OFF_BALL_INTENT_BADGE[offBallIntent] : DECISION_BADGE[decision.type]) : null; const dot = player.team === 'A' ? 'bg-blue-500' : 'bg-red-500'; return ( ); } function TeamList({ team, players, decisions, offBallIntents, ballHolderId, selectedId, onSelect, }: { team: 'A' | 'B'; players: GamePlayer[]; decisions: Record; offBallIntents: Record; ballHolderId: number; selectedId: number | null; onSelect: (p: GamePlayer) => void; }) { const label = team === 'A' ? 'Team A' : 'Team B'; const labelCls = team === 'A' ? 'text-blue-400' : 'text-red-400'; return (
{label}
{players.map(p => ( ))}
); } function StatRow({ label, value }: { label: string; value: string | number }) { return (
{label} {typeof value === 'number' ? value.toFixed(2) : value}
); } // ── Main component ──────────────────────────────────────────────────────────── type Mode = '11v11' | 'scenario'; export function TestScreen() { const [mode, setMode] = useState(() => { const v = urlStr('mode'); return VALID_MODES.has(v ?? '') ? (v as Mode) : '11v11'; }); const [squadA, setSquadA] = useState(() => { const v = urlStr('Asquad'); return VALID_SQUADS.has(v ?? '') ? v! : 'team_red'; }); const [squadB, setSquadB] = useState(() => { const v = urlStr('Bsquad'); return VALID_SQUADS.has(v ?? '') ? v! : 'team_blue'; }); const [formations, setFormations] = useState([]); const [formIdA, setFormIdA] = useState(() => urlStr('Aform') ?? '4-3-3'); const [formIdB, setFormIdB] = useState(() => urlStr('Bform') ?? '4-3-3'); const [formObjA, setFormObjA] = useState(null); const [formObjB, setFormObjB] = useState(null); const [tacticsA, setTacticsA] = useState(() => { const v = urlStr('Atac'); return (TACTICAL_STYLE_OPTIONS.some(o => o.value === v) ? v : DEFAULT_TACTICAL_STYLE) as TacticalStyle; }); const [tacticsB, setTacticsB] = useState(() => { const v = urlStr('Btac'); return (TACTICAL_STYLE_OPTIONS.some(o => o.value === v) ? v : DEFAULT_TACTICAL_STYLE) as TacticalStyle; }); // Intent overrides — 'auto' lets the engine decide on possession transfer; // a fixed value force-pins the team's intent every tick so we can study its effect. const [intentOverrideA, setIntentOverrideA] = useState('auto'); const [intentOverrideB, setIntentOverrideB] = useState('auto'); // Live readout of the engine's per-team intent. Updated from teamIntentChanged // and stateChanged so the badge stays accurate even after manual overrides. const [liveTeamIntent, setLiveTeamIntent] = useState<{ A: TeamIntent; B: TeamIntent }>({ A: 'balanced', B: 'balanced' }); const [matchState, setMatchState] = useState(null); const [scenario, setScenario] = useState(() => { const id = urlStr('scene'); return MINI_SCENARIOS.find(s => s.id === id) ?? MINI_SCENARIOS[0]!; }); const [scenarioState, setScenarioState] = useState(null); const [resetKey, setResetKey] = useState(0); const [paused, setPaused] = useState(false); const [speed, setSpeed] = useState(1); const [debug, setDebug] = useState(true); const [broadcastLine, setBroadcastLine] = useState(() => getBroadcastLine()); const [debugOverlays, setDebugOverlays] = useState(() => { try { const s = localStorage.getItem('touchlines-debug-overlays'); return s ? { ...DEFAULT_DEBUG_OVERLAYS, ...JSON.parse(s) as Partial } : DEFAULT_DEBUG_OVERLAYS; } catch { return DEFAULT_DEBUG_OVERLAYS; } }); // ── Crowd overlay state ───────────────────────────────────────────────── const [crowdEnabled, setCrowdEnabled] = useState(() => { try { const s = localStorage.getItem('touchlines-crowd-enabled'); return s === 'true'; } catch { return false; } }); const [crowdMode, setCrowdMode] = useState(() => { try { const s = localStorage.getItem('touchlines-crowd-mode'); return s === 'attack' || s === 'defense' || s === 'crowd' ? s : 'crowd'; } catch { return 'crowd'; } }); const [evalConfig, setEvalConfig] = useState(() => { try { const s = localStorage.getItem('touchlines-crowd-eval-config'); return s ? { ...DEFAULT_EVAL_CONFIG, ...JSON.parse(s) as Partial } : DEFAULT_EVAL_CONFIG; } catch { return DEFAULT_EVAL_CONFIG; } }); const [evalResult, setEvalResult] = useState(null); const [pitchClickPos, setPitchClickPos] = useState<{ x: number; y: number } | null>(null); const evalConfigRef = useRef(evalConfig); useEffect(() => { evalConfigRef.current = evalConfig; }, [evalConfig]); const pitchClickPosRef = useRef(pitchClickPos); useEffect(() => { pitchClickPosRef.current = pitchClickPos; }, [pitchClickPos]); const [selectedPlayerId, setSelectedPlayerId] = useState(null); const [playerList, setPlayerList] = useState([]); const [liveDecisions, setLiveDecisions] = useState>({}); const [liveOffBallIntents, setLiveOffBallIntents] = useState>({}); const [liveBallHolder, setLiveBallHolder] = useState(-1); const [liveGameState, setLiveGameState] = useState(null); const liveStateRef = useRef(null); const [livePlayer, setLivePlayer] = useState(null); const lastDefensiveScoresRef = useRef>({}); const lastOffBallScoresRef = useRef>({}); const pitchCaptureRef = useRef<(() => Promise) | null>(null); // ── URL-keyed save/load ─────────────────────────────────────────────────── // urlSearch mirrors window.location.search and is updated whenever config changes. // All save/load operations key off this so each URL config has its own slot. const [urlSearch, setUrlSearch] = useState(() => window.location.search); const [saveCounter, setSaveCounter] = useState(0); const [phaseCountdown, setPhaseCountdown] = useState<{ target: 'halfTime' | 'matchEnd'; remaining: number } | null>(null); // ── Pitch sizing (responsive — mirrors MatchScreen) ─────────────────────── // Two-phase render: layout paints first with a loader in the host slot, then we measure on the // next animation frame and mount PixiPitch with the measured size. ResizeObserver is avoided — // it can fire during PixiPitch's own layout reflow and create a remount feedback loop. const [pitchSize, setPitchSize] = useState<{ w: number; h: number } | null>(null); const pitchHostElRef = useRef(null); const measurePitch = useCallback(() => { const host = pitchHostElRef.current; if (!host) return; const rect = host.getBoundingClientRect(); const next = fitPitch(rect.width, rect.height); if (!next) return; setPitchSize(prev => (prev && prev.w === next.w && prev.h === next.h ? prev : next)); }, []); const pitchHostRef = useCallback( (host: HTMLDivElement | null) => { pitchHostElRef.current = host; if (host) requestAnimationFrame(measurePitch); }, [measurePitch], ); useEffect(() => { window.addEventListener('resize', measurePitch); return () => window.removeEventListener('resize', measurePitch); }, [measurePitch]); // ── Persisted state (save/load) ─────────────────────────────────────────── const [loadedState, setLoadedState] = useState(() => { try { const key = stateKeyFromSearch(window.location.search); const s = localStorage.getItem(key); return s ? JSON.parse(s) as GameState : null; } catch { return null; } }); const [loadKey, setLoadKey] = useState(0); // ── Per-team attr override (test sliders) ───────────────────────────────── const [attrA, setAttrA] = useState(() => urlInt('Aattr', 1, 10) ?? 10); const [attrB, setAttrB] = useState(() => urlInt('Battr', 1, 10) ?? 10); const attrARef = useRef(attrA); const attrBRef = useRef(attrB); useEffect(() => { attrARef.current = attrA; }, [attrA]); useEffect(() => { attrBRef.current = attrB; }, [attrB]); // ── Init ────────────────────────────────────────────────────────────────── useEffect(() => { // If a saved state was restored from localStorage on mount, populate playerList if (loadedState) setPlayerList(loadedState.players); }, []); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => onBroadcastLine(setBroadcastLine), []); useEffect(() => { setDebugMode(true); fetch("/api/formations") .then(r => { if (!r.ok) throw new Error(String(r.status)); return r.json() as Promise<{ id: string }[]>; }) .then(list => setFormations(list.map(f => f.id))) .catch(() => { console.warn( "[Test] /api/formations failed — open this app via `bun dev` (same origin as the API). Using bundled formation list.", ); setFormations([...FORMATION_IDS_FALLBACK]); }); }, []); useEffect(() => { fetch(`/api/formations/${formIdA}`) .then(r => { if (!r.ok) throw new Error(String(r.status)); return r.json() as Promise; }) .then(setFormObjA) .catch(() => setFormObjA(formation433Fallback as Formation)); }, [formIdA]); useEffect(() => { fetch(`/api/formations/${formIdB}`) .then(r => { if (!r.ok) throw new Error(String(r.status)); return r.json() as Promise; }) .then(setFormObjB) .catch(() => setFormObjB(formation433Fallback as Formation)); }, [formIdB]); useEffect(() => { if (!formObjA || !formObjB) return; const base = createMatchState(SQUADS[squadA]!.players, formObjA, SQUADS[squadB]!.players, formObjB); const state = { ...base, testMode: true, players: applyAttrOverride(base.players, attrARef.current, attrBRef.current) }; setMatchState(state); setPlayerList(state.players); setSelectedPlayerId(null); setLivePlayer(null); setLiveGameState(null); // clear stale state so sidebar uses the new playerList immediately }, [squadA, squadB, formObjA, formObjB]); useEffect(() => { const base = scenario.createState(); const state = { ...base, testMode: true, players: applyAttrOverride(base.players, attrARef.current, attrBRef.current) }; setScenarioState(state); setPlayerList(state.players); setSelectedPlayerId(null); setLivePlayer(null); }, [scenario, resetKey]); useEffect(() => { applyTeamTacticsConfig('A', tacticsA); applyTeamAttackConfig('A', tacticsA); gameBus.emit('tacticsChanged', { team: 'A' }); }, [tacticsA]); useEffect(() => { applyTeamTacticsConfig('B', tacticsB); applyTeamAttackConfig('B', tacticsB); gameBus.emit('tacticsChanged', { team: 'B' }); }, [tacticsB]); // When attr sliders change, patch live player stats immediately useEffect(() => { const s = liveStateRef.current; if (!s) return; const players = applyAttrOverride(s.players, attrA, attrB); gameBus.emit('testCommand', { type: 'patchPlayers', players }); setPlayerList(players); }, [attrA, attrB]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { return gameBus.on('stateChanged', s => { liveStateRef.current = s; setLiveDecisions(s.decisions); setLiveBallHolder(s.ballHolderId); setLiveGameState(s); if (s.teamIntent) setLiveTeamIntent(s.teamIntent); if (selectedPlayerId !== null) { const p = s.players.find(pl => pl.id === selectedPlayerId) ?? null; setLivePlayer(p); } // Live re-evaluate the parked click each tick — keeps the panel in sync // as players move (also useful when this gets wired into engine systems). const pos = pitchClickPosRef.current; if (pos) { setEvalResult(evaluatePoint(s, pos.x, pos.y, evalConfigRef.current)); } }); }, [selectedPlayerId]); // Track engine-side intent changes (counter-attack triggered, possession reset, etc.) useEffect(() => gameBus.on('teamIntentChanged', e => { setLiveTeamIntent(e.teamIntent); }), []); // Re-pin team intent on the engine every time the override (or possession) changes. // 'auto' is a no-op — the engine's possession-gain detection stays in charge. useEffect(() => { if (intentOverrideA !== 'auto') { gameBus.emit('testCommand', { type: 'setTeamIntent', team: 'A', intent: intentOverrideA }); } }, [intentOverrideA, liveBallHolder]); useEffect(() => { if (intentOverrideB !== 'auto') { gameBus.emit('testCommand', { type: 'setTeamIntent', team: 'B', intent: intentOverrideB }); } }, [intentOverrideB, liveBallHolder]); useEffect(() => gameBus.on('defensiveScores', e => { lastDefensiveScoresRef.current[e.playerId] = e; }), []); useEffect(() => gameBus.on('offBallScores', e => { lastOffBallScoresRef.current[e.playerId] = e; setLiveOffBallIntents(prev => prev[e.playerId] === e.intent ? prev : { ...prev, [e.playerId]: e.intent } ); }), []); // ── Sync config state → URL ─────────────────────────────────────────────── useEffect(() => { const search = buildSearch({ mode: mode !== '11v11' ? mode : null, Asquad: squadA !== 'team_red' ? squadA : null, Bsquad: squadB !== 'team_blue' ? squadB : null, Aform: formIdA !== '4-3-3' ? formIdA : null, Bform: formIdB !== '4-3-3' ? formIdB : null, Atac: tacticsA !== DEFAULT_TACTICAL_STYLE ? tacticsA : null, Btac: tacticsB !== DEFAULT_TACTICAL_STYLE ? tacticsB : null, Aattr: attrA !== 10 ? String(attrA) : null, Battr: attrB !== 10 ? String(attrB) : null, scene: mode === 'scenario' && scenario.id !== MINI_SCENARIOS[0]?.id ? scenario.id : null, }); history.replaceState(null, '', search || window.location.pathname); setUrlSearch(search); }, [mode, squadA, squadB, formIdA, formIdB, tacticsA, tacticsB, attrA, attrB, scenario]); // eslint-disable-line react-hooks/exhaustive-deps // ── Phase trigger countdown ─────────────────────────────────────────────── useEffect(() => { if (!phaseCountdown) return; if (phaseCountdown.remaining <= 0) { gameBus.emit('testCommand', { type: 'triggerPhase', phase: phaseCountdown.target }); setPhaseCountdown(null); return; } const t = setTimeout(() => setPhaseCountdown(c => c ? { ...c, remaining: c.remaining - 1 } : null), 1000); return () => clearTimeout(t); }, [phaseCountdown]); // ── Actions ─────────────────────────────────────────────────────────────── const reset = useCallback(() => { setLoadedState(null); setResetKey(k => k + 1); setPaused(false); clearDebugLog(); clearBroadcastLine(); setSelectedPlayerId(null); setLivePlayer(null); if (mode === 'scenario') setScenarioState(scenario.createState()); }, [mode, scenario]); const handleSave = useCallback(() => { const s = liveStateRef.current; if (!s) return; localStorage.setItem(stateKeyFromSearch(window.location.search), JSON.stringify(s)); setSaveCounter(c => c + 1); }, []); const handleSaveDebug = useCallback(async () => { const s = liveStateRef.current; if (!s) return; const holder = s.players.find(p => p.id === s.ballHolderId); const snapshot = { timestamp: new Date().toISOString(), ballHolder: holder ? { id: holder.id, name: holder.name, team: holder.team, x: holder.x, y: holder.y, role: holder.role } : null, ball: { x: s.ball?.x ?? null, y: s.ball?.y ?? null }, score: s.score, matchTime: s.matchTime, players: s.players.map(p => ({ id: p.id, name: p.name, team: p.team, role: p.role, mainRole: p.mainRole, x: p.x, y: p.y, attackDir: p.attackDir, decision: s.decisions[p.id] ?? null, defensiveScores: lastDefensiveScoresRef.current[p.id] ?? null, offBallScores: lastOffBallScoresRef.current[p.id] ?? null, stats: { withBall: p.runtimeStats.withBall, withoutBall: p.runtimeStats.withoutBall, }, bounds: p.bounds, })), rawState: s, }; const image = pitchCaptureRef.current ? await pitchCaptureRef.current() : null; try { const res = await fetch('/api/debug/snapshot', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ ...snapshot, image }), }); const { file, imageFile } = await res.json() as { file: string; imageFile?: string }; console.info(`[debug] snapshot saved → ${file}${imageFile ? ` (+ ${imageFile})` : ''}`); } catch (e) { console.error('[debug] failed to save snapshot', e); } }, []); const handleLoad = useCallback(() => { try { const raw = localStorage.getItem(stateKeyFromSearch(window.location.search)); if (!raw) return; const state = normalizeGameState(JSON.parse(raw) as GameState); setLoadedState(state); setPlayerList(state.players); setLoadKey(k => k + 1); setSelectedPlayerId(null); setLivePlayer(null); } catch { /* ignore corrupt data */ } }, []); const toggleOverlay = useCallback((key: keyof DebugOverlays) => { setDebugOverlays(prev => { const next = { ...prev, [key]: !prev[key] }; localStorage.setItem('touchlines-debug-overlays', JSON.stringify(next)); return next; }); }, []); const toggleCrowdOverlay = useCallback(() => { setCrowdEnabled(prev => { const next = !prev; localStorage.setItem('touchlines-crowd-enabled', String(next)); return next; }); }, []); const handleCrowdModeChange = useCallback((m: CrowdMode) => { setCrowdMode(m); localStorage.setItem('touchlines-crowd-mode', m); }, []); const handleEvalConfigChange = useCallback((next: EvaluationConfig) => { setEvalConfig(next); localStorage.setItem('touchlines-crowd-eval-config', JSON.stringify(next)); // Recompute immediately so sliders update the panel without re-clicking. const s = liveStateRef.current; const pos = pitchClickPosRef.current; if (s && pos) setEvalResult(evaluatePoint(s, pos.x, pos.y, next)); }, []); const handlePitchClick = useCallback((x: number, y: number) => { setPitchClickPos({ x, y }); const s = liveStateRef.current; if (!s) return; setEvalResult(evaluatePoint(s, x, y, evalConfigRef.current)); }, []); const handleClearPitchClick = useCallback(() => { setPitchClickPos(null); setEvalResult(null); }, []); const handlePlayerClick = useCallback((player: GamePlayer) => { setSelectedPlayerId(player.id); const live = liveStateRef.current?.players.find(p => p.id === player.id) ?? player; setLivePlayer(live); }, []); const selectScenario = useCallback((s: TestScenario) => { setScenario(s); setResetKey(k => k + 1); setPaused(false); clearDebugLog(); clearBroadcastLine(); setSelectedPlayerId(null); setLivePlayer(null); }, []); // Stable refs so keybind handler never re-registers on state changes const selectedPlayerIdRef = useRef(selectedPlayerId); useEffect(() => { selectedPlayerIdRef.current = selectedPlayerId; }, [selectedPlayerId]); const pausedRef = useRef(paused); useEffect(() => { pausedRef.current = paused; }, [paused]); // ── Keybinds ────────────────────────────────────────────────────────────── useEffect(() => { const SPEED_MAP: Record = { '1': 0.25, '2': 0.5, '3': 1, '4': 2 }; const ARROWS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']; function onKey(e: KeyboardEvent) { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLSelectElement) return; if (e.key === ' ') { e.preventDefault(); setPaused(p => !p); return; } if (e.key === 'd' || e.key === 'D') { setDebug(d => { setDebugMode(!d); return !d; }); return; } if (SPEED_MAP[e.key] !== undefined) { setSpeed(SPEED_MAP[e.key]!); return; } // Arrow — move selected player (paused only). Shift = fine 0.25 yd, normal = 1 yd if (ARROWS.includes(e.key)) { e.preventDefault(); const id = selectedPlayerIdRef.current; const s = liveStateRef.current; if (!pausedRef.current || id === null || !s) return; const p = s.players.find(pl => pl.id === id); if (!p) return; const step = e.shiftKey ? 0.25 : 1; const dx = e.key === 'ArrowRight' ? step : e.key === 'ArrowLeft' ? -step : 0; const dy = e.key === 'ArrowDown' ? step : e.key === 'ArrowUp' ? -step : 0; gameBus.emit('testCommand', { type: 'movePlayer', id, x: p.x + dx, y: p.y + dy }); return; } // B — give ball to selected player (paused only) if (e.key === 'b' || e.key === 'B') { const id = selectedPlayerIdRef.current; if (!pausedRef.current || id === null) return; gameBus.emit('testCommand', { type: 'giveBall', id }); return; } } window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, []); // eslint-disable-line react-hooks/exhaustive-deps // ── Derived ─────────────────────────────────────────────────────────────── const activeState = useMemo(() => { const raw = loadedState ?? (mode === '11v11' ? matchState : scenarioState); return raw ? normalizeGameState(raw) : null; }, [loadedState, mode, matchState, scenarioState]); const pitchKey = loadedState ? `loaded-${loadKey}` : mode === '11v11' ? `11v11-${squadA}-${squadB}-${formIdA}-${formIdB}-${resetKey}` : `scenario-${scenario.id}-${resetKey}`; const hasSave = useMemo( () => !!localStorage.getItem(stateKeyFromSearch(urlSearch)), [urlSearch, saveCounter], // eslint-disable-line react-hooks/exhaustive-deps ); const rosterForSidebar = liveGameState?.players ?? playerList; const teamA = rosterForSidebar.filter(p => p.team === 'A'); const teamB = rosterForSidebar.filter(p => p.team === 'B'); const currentFormation = livePlayer ? (livePlayer.team === 'A' ? liveStateRef.current?.formationA : liveStateRef.current?.formationB) : null; const atkSlot = livePlayer && currentFormation ? currentFormation.attacking[livePlayer.slotIndex] : null; const defSlot = livePlayer && currentFormation ? currentFormation.defending[livePlayer.slotIndex] : null; const roleData = livePlayer ? ROLES[livePlayer.role] : null; const engineData = roleData?.engine; const dpData = roleData?.dpWeights; return (
{/* ── Mode toggle ── */}
{(['11v11', 'scenario'] as Mode[]).map(m => ( ))}
{/* ── 11v11 config ── */} {mode === '11v11' && (

Team A

Team B

{/* Per-team attr sliders */}
{([ { label: 'Team A Attrs', cls: 'text-blue-400', value: attrA, set: setAttrA }, { label: 'Team B Attrs', cls: 'text-red-400', value: attrB, set: setAttrB }, ] as const).map(({ label, cls, value, set }) => (

{label}

set(Number(e.target.value))} className="flex-1 accent-primary cursor-pointer" /> {value}
))}
{/* Per-team tactics */}
{( [ { team: 'A' as TeamId, label: 'Team A Tactics', cls: 'text-blue-400', tactics: tacticsA, setTactics: setTacticsA, intentOverride: intentOverrideA, setIntentOverride: setIntentOverrideA }, { team: 'B' as TeamId, label: 'Team B Tactics', cls: 'text-red-400', tactics: tacticsB, setTactics: setTacticsB, intentOverride: intentOverrideB, setIntentOverride: setIntentOverrideB }, ] as const ).map(({ team, label, cls, tactics, setTactics: setT, intentOverride, setIntentOverride: setIO }) => { const liveIntent = liveTeamIntent[team]; const badge = INTENT_BADGE[liveIntent]; return (

{label}

{/* Live intent badge — reflects engine state, not the override */} {badge.label}
{TACTICAL_STYLE_OPTIONS.map(opt => ( ))}
{/* Intent override — debug knob to study scoring effect */}

Intent Override

{INTENT_OVERRIDE_OPTIONS.map(opt => ( ))}
); })}
)} {/* ── Mini scenarios ── */} {mode === 'scenario' && (
Scenarios
{MINI_SCENARIOS.map(s => ( ))}
{scenario.description}
)} {/* ── Sim controls ── */}
{SPEEDS.map(s => ( ))}
{/* ── Phase triggers (test mode — events never fire automatically) ── */}
{phaseCountdown ? ( <> {phaseCountdown.target === 'halfTime' ? 'HT' : 'END'} in {phaseCountdown.remaining}… ) : ( <> {(liveGameState?.matchPhase ?? 'firstHalf') !== 'secondHalf' && (liveGameState?.matchPhase ?? 'firstHalf') !== 'matchEnd' && ( )} {(liveGameState?.matchPhase === 'secondHalf') && ( )} )}
{/* ── Live broadcast (commentary ticker) ── */}
Broadcast

{broadcastLine || Waiting for action…}

{/* ── Debug overlay toggles ── */} {debug && (
Overlays {( [ { key: 'passLanes' as const, label: 'Pass Lanes', color: 'text-emerald-400' }, { key: 'xG' as const, label: 'xG', color: 'text-orange-400' }, { key: 'movementTargets' as const, label: 'Move Targets', color: 'text-cyan-400' }, { key: 'interceptionCorridors' as const, label: 'Intercept', color: 'text-sky-400' }, { key: 'marking' as const, label: 'Marking', color: 'text-orange-400' }, { key: 'throughBallCells' as const, label: 'TB Cells', color: 'text-purple-400' }, { key: 'switchPlay' as const, label: 'Switch', color: 'text-violet-400' }, ] as const ).map(({ key, label, color }) => ( ))} {/* Crowd heatmap toggle — sits alongside debug overlays but is independent */}
)} {/* ── Crowd heatmap controls + click result panel (only when enabled) ── */} {crowdEnabled && ( )} {/* ── Pitch row: Team A | Pitch | Team B ── */}
{/* Team A */} {teamA.length > 0 && ( )} {/* Pitch — fills remaining space, locked to PITCH_ASPECT */}
{activeState && pitchSize ? ( ) : (
{activeState ? 'Sizing pitch…' : 'Loading…'}
)}
{/* Team B */} {teamB.length > 0 && ( )} {/* Right column: Decision Scores (top) + Debug Log (bottom) */} {debug && (
)}
{/* ── Player detail panel ── */} {livePlayer ? (
{/* Header */}
{livePlayer.name} Team {livePlayer.team} {livePlayer.role} Slot {livePlayer.slotIndex} {livePlayer.attackDir === 1 ? '→ right' : '← left'}
{/* Sections grid */}
{/* Position + Formation */}
Position
{atkSlot && defSlot && (
Formation Slot
Attacking
Defending
)}
{/* Engine weights */}
Engine Weights
{engineData && ( <> )}
{/* With ball */}
With Ball
{Object.entries(livePlayer.runtimeStats.withBall).map(([k, v]) => ( ))}
{/* Without ball */}
Without Ball
{Object.entries(livePlayer.runtimeStats.withoutBall).map(([k, v]) => ( ))}
{/* Current decision */}
Decision
{liveStateRef.current && (() => { const dec = liveStateRef.current.decisions[livePlayer.id]; if (!dec) return
—
; const badge = DECISION_BADGE[dec.type]; if (!badge) return
{dec.type}
; return (
{badge.label}
{dec.type === 'carry' && (
)}
); })()}
) : (
Click a player on the pitch or in the team list to inspect their stats and weights.
)}
); }