/* global React, ReactDOM, SQUAD, FORMATIONS, POS_COMPAT, DEF_MID, fmt, canPlay, shortName, posClass, useCloudSync, SyncBadge, SessionExpiredBanner, Welcome */ /* Football Squad Manager — main app */ const { useState, useEffect, useRef, useMemo, useCallback } = React; // ───────────────────────────────────────────────────────────── // STORAGE (migrates the original csm2 shape) // ───────────────────────────────────────────────────────────── const STORAGE_KEY = 'csm3'; const LEGACY_KEY = 'csm2'; function emptyTimes() { const t = {}; SQUAD.forEach(p => t[p.id] = { total: 0, onSince: null }); return t; } function emptyStatus() { const s = {}; SQUAD.forEach(p => s[p.id] = { injured: false, yellow: 0, red: false }); return s; } function buildSlots(formation) { const f = FORMATIONS[formation]; const out = []; f.rows.forEach(row => row.forEach(cell => out.push({ slotPos: cell.pos, label: cell.label, playerId: null }))); return out; } function uid() { return Math.random().toString(36).slice(2, 10); } function loadInitial() { const defaultPlayers = window.SQUAD.map(p => ({ ...p, positions: [...p.positions] })); const defaultSquadId = uid(); const def = { formation: '4-4-2', matchSec: 0, clockStartedAt: null, // wall-clock timestamp (Date.now()) when current 1H/2H run began; null when paused matchSecBase: 0, // matchSec snapshot at the moment clockStartedAt was set slots: buildSlots('4-4-2'), playerTimes: emptyTimes(), playerStatus: emptyStatus(), score: { us: 0, them: 0 }, teamName: { us: '', them: '' }, // start blank — placeholder in UI crest: { us: '', them: '' }, // start blank — initial drawn from name phase: 'pre', htAt: null, ftAt: null, goals: [], history: [], squad: defaultPlayers, // mirror of active library entry squads: [{ id: defaultSquadId, name: 'BHA Test', players: defaultPlayers }], activeSquadId: defaultSquadId, lineups: [], // saved formation + slot presets updatedAt: 0, // sync clock — bumped on every change }; try { const cur = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'); if (cur) { // Migrate single-squad shape → squads[] library let squads = Array.isArray(cur.squads) && cur.squads.length ? cur.squads : null; let activeSquadId = cur.activeSquadId; if (!squads) { const id = defaultSquadId; squads = [{ id, name: 'BHA Test', players: cur.squad || defaultPlayers }]; activeSquadId = id; } const active = squads.find(s => s.id === activeSquadId) || squads[0]; if (active?.players) window.SQUAD = active.players; // If the clock was running when the app was last open, catch it // up to wall-clock time. Cap absurd gaps (> 3h) so reopening the // app the next day doesn't show a 14-hour match. const merged = Object.assign(def, cur, { squads, activeSquadId: active?.id || squads[0].id, squad: active?.players || cur.squad || def.squad, lineups: Array.isArray(cur.lineups) ? cur.lineups : def.lineups, playerTimes: Object.assign(emptyTimes(), cur.playerTimes || {}), playerStatus: Object.assign(emptyStatus(), cur.playerStatus || {}), score: cur.score || def.score, teamName: cur.teamName || def.teamName, crest: cur.crest || def.crest, phase: cur.phase || (cur.half === 2 ? '2h' : cur.half === 3 ? 'ft' : 'pre'), goals: cur.goals || [], history: cur.history || [], updatedAt: cur.updatedAt || 0, clockStartedAt: cur.clockStartedAt || null, matchSecBase: cur.matchSecBase ?? cur.matchSec ?? 0, }); if (merged.clockStartedAt) { const gap = Date.now() - merged.clockStartedAt; if (gap > 3 * 60 * 60 * 1000 || gap < 0) { // Stale anchor — assume the match was forgotten. Keep the // last known matchSec but stop running. merged.clockStartedAt = null; } } return merged; } const legacy = JSON.parse(localStorage.getItem(LEGACY_KEY) || 'null'); if (legacy) { return Object.assign(def, { formation: legacy.formation || def.formation, matchSec: legacy.matchSec || 0, slots: legacy.slots || buildSlots(legacy.formation || '4-4-2'), playerTimes: Object.assign(emptyTimes(), legacy.playerTimes || {}), playerStatus: Object.assign(emptyStatus(), legacy.playerStatus || {}), }); } } catch (e) { console.warn('load failed', e); } return def; } // Helper: when active squad's player roster changes, mirror it back into squads[]. // Keep window.SQUAD in sync too (referenced by Pitch/Bench/Pool/etc). function withActiveSquadPlayers(s, newPlayers) { window.SQUAD = newPlayers; return { ...s, squad: newPlayers, squads: s.squads.map(sq => sq.id === s.activeSquadId ? { ...sq, players: newPlayers } : sq), }; } // ───────────────────────────────────────────────────────────── // ICONS (inline SVG, no emoji) // ───────────────────────────────────────────────────────────── const Ic = { play: (), pause: (), reset: (), swap: (), minus: (), plus: (), }; // ───────────────────────────────────────────────────────────── // TOP BAR — score / phase / clock / controls // ───────────────────────────────────────────────────────────── const PHASE_INFO = { pre: { label: 'PRE', primary: 'Kick Off', next: '1h', live: false, tone: 'go' }, '1h':{ label: '1H', primary: 'Half Time', next: 'ht', live: true, tone: 'pause' }, ht: { label: 'HT', primary: 'Start 2nd Half', next: '2h', live: false, tone: 'go' }, '2h':{ label: '2H', primary: 'Full Time', next: 'ft', live: true, tone: 'stop' }, ft: { label: 'FT', primary: null, next: null, live: false, tone: null }, }; function Crest({ team, src, letter, onSet }) { const fileRef = useRef(null); function pick(e) { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => onSet(team, reader.result); reader.readAsDataURL(f); } return ( ); } function TopBar({ state, dispatch, onAdvancePhase, onReset, onTapScore, onSetCrest, onTapClock, resetArmed, sync, onShowWelcome, onShowHelp }) { const { score, teamName, crest, phase, matchSec } = state; const info = PHASE_INFO[phase]; const usLetter = teamName.us.trim().charAt(0).toUpperCase() || '+'; const themLetter = teamName.them.trim().charAt(0).toUpperCase() || '+'; return (
{info.label}
{sync && }
dispatch({type:'TEAM_NAME', team:'us', name: e.target.textContent.trim()})} >{teamName.us}
:
dispatch({type:'TEAM_NAME', team:'them', name: e.target.textContent.trim()})} >{teamName.them}
{info.primary && ( )} {phase === 'ft' && (
FULL TIME
)}
); } // ───────────────────────────────────────────────────────────── // STATS RAIL // ───────────────────────────────────────────────────────────── function StatsRail({ state, getTime }) { const onIds = new Set(state.slots.filter(s => s.playerId).map(s => s.playerId)); const totalT = SQUAD.reduce((s, p) => s + getTime(p.id), 0); const avg = SQUAD.length ? Math.floor(totalT / SQUAD.length) : 0; const least = [...SQUAD] .filter(p => !state.playerStatus[p.id]?.injured && !state.playerStatus[p.id]?.red) .sort((a, b) => getTime(a.id) - getTime(b.id))[0]; const inj = SQUAD.filter(p => state.playerStatus[p.id]?.injured).length; const cards = SQUAD.filter(p => state.playerStatus[p.id]?.yellow || state.playerStatus[p.id]?.red).length; return (
{onIds.size}
On
{SQUAD.length - onIds.size}
Bench
{fmt(avg)}
Avg
{least ? '#' + least.n : '–'}
Least
{inj}
Inj
{cards}
Cards
); } // ───────────────────────────────────────────────────────────── // PITCH // ───────────────────────────────────────────────────────────── function Pitch({ state, getTime, onSlotTap, justSubbed, goalsByPlayer }) { const f = FORMATIONS[state.formation]; let slotIdx = 0; return (
{f.rows.map((row, ri) => (
{row.map((cell, ci) => { const s = state.slots[slotIdx]; const si = slotIdx; slotIdx++; const player = s?.playerId ? SQUAD.find(p => p.id === s.playerId) : null; const time = player ? getTime(player.id) : 0; const status = player ? state.playerStatus[player.id] : null; const tc = time > 1200 ? 'danger' : time > 900 ? 'warn' : ''; const flash = justSubbed === si; return (
); })}
))}
); } // ───────────────────────────────────────────────────────────── // BENCH // ───────────────────────────────────────────────────────────── function Bench({ state, getTime, onCardTap, onSubInTap, sortMode, setSortMode, goalsByPlayer }) { const onIds = new Set(state.slots.filter(s => s.playerId).map(s => s.playerId)); let bench = SQUAD.filter(p => !onIds.has(p.id)); if (sortMode === 'least') { bench = bench.sort((a, b) => getTime(a.id) - getTime(b.id)); } else if (sortMode === 'number') { bench = bench.sort((a, b) => a.n - b.n); } else if (sortMode === 'position') { const order = ['GK','LB','CB','RB','CDM','CM','CAM','LM','RM','LW','RW','ST','CF','ALL']; bench = bench.sort((a, b) => { const ap = order.indexOf(a.positions[0]); const bp = order.indexOf(b.positions[0]); return ap - bp; }); } const leastTime = bench.length ? getTime(bench.reduce((m,p) => getTime(p.id) < getTime(m.id) ? p : m).id) : 0; return ( <>
{['least','number','position'].map(m => ( ))}
{bench.length === 0 &&
Everyone is on the pitch.
} {bench.map(p => { const st = state.playerStatus[p.id] || {}; const t = getTime(p.id); const cls = st.injured ? 'injured' : st.red ? 'red-out' : st.yellow ? 'yellow' : (t === leastTime && t < 600 ? 'least' : ''); const unavailable = st.injured || st.red; const posTag = p.positions.includes('ALL') ? 'ALL' : p.positions.join('/'); return (
onCardTap(p.id)}>
{p.n}
{p.name} {goalsByPlayer[p.id] > 0 && ( ⚽{goalsByPlayer[p.id] > 1 ? goalsByPlayer[p.id] : ''} )}
{posTag} {st.yellow >= 1 && Y} {st.yellow >= 2 && Y} {st.red && R} {st.injured && INJ}
{fmt(t)}
); })}
); } // ───────────────────────────────────────────────────────────── // POOL (position-coverage view, compact) // ───────────────────────────────────────────────────────────── function PositionPool({ state }) { const f = FORMATIONS[state.formation]; const onIds = new Set(state.slots.filter(s => s.playerId).map(s => s.playerId)); return (
{f.rows.map((row, ri) => (
{row.map((cell, ci) => { const compat = POS_COMPAT[cell.pos] || [cell.pos]; const matching = SQUAD.filter(p => { if (p.positions.includes('ALL')) return DEF_MID.includes(cell.pos); return p.positions.some(pp => compat.includes(pp)); }).sort((a, b) => { const ae = a.positions.includes(cell.pos) ? 0 : 1; const be = b.positions.includes(cell.pos) ? 0 : 1; if (ae !== be) return ae - be; return a.n - b.n; }); return (
{cell.label}
{matching.map(p => { const st = state.playerStatus[p.id] || {}; const cls = onIds.has(p.id) ? 'on' : st.injured ? 'injured' : st.red ? 'out' : ''; return
{p.n}. {p.name.split(' ')[0]}
; })}
); })}
))}
); } // ───────────────────────────────────────────────────────────── // SUB HISTORY // ───────────────────────────────────────────────────────────── function History({ state }) { if (!state.history?.length) { return
No subs yet. They'll appear here in real time.
; } return (
{state.history.slice().reverse().map((h, i) => (
{fmt(h.at)}
{h.kind === 'sub' && ( <> ↓ {h.off}{' '} ↑ {h.on}{' '} ({h.pos}) )} {h.kind === 'on' && (<>↑ {h.on} at {h.pos})} {h.kind === 'off' && (<>↓ {h.off} from {h.pos})} {h.kind === 'goal' && (<>{h.text})} {h.kind === 'phase' && ({h.text})} {h.kind === 'card' && (<>{h.text})}
))}
); } // ───────────────────────────────────────────────────────────── // SHEETS (sub picker / player actions) // ───────────────────────────────────────────────────────────── function Sheet({ open, onClose, title, sub, children }) { return ( <>
e.stopPropagation()}>
{title}
{sub &&
{sub}
}
{children}
); } // ───────────────────────────────────────────────────────────── // LINEUPS (saved formation + slot presets) // ───────────────────────────────────────────────────────────── function Lineups({ state, setState, onManage }) { const [naming, setNaming] = React.useState(false); const [draft, setDraft] = React.useState(''); const inputRef = React.useRef(null); React.useEffect(() => { if (naming) setTimeout(() => inputRef.current?.focus(), 10); }, [naming]); const lineups = state.lineups || []; const onPitch = state.slots.filter(s => s.playerId).length; function saveCurrent(name) { const trimmed = (name || '').trim(); if (!trimmed) return; setState(s => { const lineup = { id: uid(), name: trimmed, formation: s.formation, slots: s.slots.map(sl => ({ slotPos: sl.slotPos, label: sl.label, playerId: sl.playerId || null })), savedAt: Date.now(), }; return { ...s, lineups: [...(s.lineups || []), lineup] }; }); setNaming(false); setDraft(''); } function loadLineup(lineup) { setState(s => { // Commit timing on outgoing players before swapping the pitch const playerTimes = { ...s.playerTimes }; const running = s.phase === '1h' || s.phase === '2h'; s.slots.forEach(sl => { if (sl.playerId) { const pt = playerTimes[sl.playerId]; if (pt && pt.onSince !== null) { playerTimes[sl.playerId] = { total: pt.total + (s.matchSec - pt.onSince), onSince: null }; } } }); // Build new slots from the saved lineup. Drop any players not on // the current active squad (e.g. CSV-imported a different roster). const activeIds = new Set(s.squad.map(p => p.id)); const newSlots = lineup.slots.map(sl => ({ slotPos: sl.slotPos, label: sl.label, playerId: (sl.playerId && activeIds.has(sl.playerId)) ? sl.playerId : null, })); // Re-anchor on-pitch onSince for fresh players if match is running if (running) { newSlots.forEach(sl => { if (sl.playerId) { const pt = playerTimes[sl.playerId] || { total: 0, onSince: null }; playerTimes[sl.playerId] = { ...pt, onSince: s.matchSec }; } }); } return { ...s, formation: lineup.formation, slots: newSlots, playerTimes, history: [...(s.history || []), { at: s.matchSec, kind: 'card', text: `— Lineup: ${lineup.name} —` }], }; }); } return (
Lineups
{lineups.length === 0 && !naming && ( No saved lineups yet — tap “Save” when you’ve picked your XI. )} {lineups.map(l => ( ))}
{!naming ? ( ) : (
setDraft(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') saveCurrent(draft); if (e.key === 'Escape') { setNaming(false); setDraft(''); } }} maxLength={30} />
)} {lineups.length > 0 && !naming && ( )}
); } function LineupManageSheet({ open, onClose, state, setState }) { const lineups = state.lineups || []; const [armedDelete, setArmedDelete] = React.useState(null); function rename(id, name) { const trimmed = (name || '').trim(); if (!trimmed) return; setState(s => ({ ...s, lineups: (s.lineups || []).map(l => l.id === id ? { ...l, name: trimmed } : l), })); } function remove(id) { if (armedDelete !== id) { setArmedDelete(id); setTimeout(() => setArmedDelete(curr => curr === id ? null : curr), 3000); return; } setArmedDelete(null); setState(s => ({ ...s, lineups: (s.lineups || []).filter(l => l.id !== id) })); } return ( {lineups.length === 0 && (
No saved lineups yet.
)} {lineups.map(l => { const filledCount = l.slots.filter(s => s.playerId).length; return (
rename(l.id, e.target.value)} onKeyDown={e => { if (e.key === 'Enter') e.target.blur(); }} /> {l.formation} · {filledCount}/{l.slots.length}
); })} ); } function ResetAction({ label, sub, icon, tone, onConfirm }) { const [armed, setArmed] = React.useState(false); function tap() { if (!armed) { setArmed(true); setTimeout(() => setArmed(false), 3000); return; } setArmed(false); onConfirm(); } return ( ); } function HelpSheet({ open, onClose }) { const [openSection, setOpenSection] = React.useState('start'); const sections = [ { id: 'start', icon: '👋', title: 'Quick start', body: ( <>

Three taps and you're playing:

  1. Tap Squad → add players, or use Import CSV / Load sample.
  2. Back on Match, tap each empty pitch slot and pick a player.
  3. Tap Kick Off. The clock starts; player times tick up.
), }, { id: 'match', icon: '⚽', title: 'During the match', body: ( <> ), }, { id: 'lineups', icon: '📋', title: 'Saved lineups & sharing', body: ( <>

Set up your XI on the pitch, then tap + Save in the Lineups row. Give it a name (e.g. “Starting XI”, “Defensive”) — it's saved.

Tap any saved chip to instantly reload that formation and lineup. The match clock and scores aren't affected.

The ⋯ button lets you rename or delete lineups (two-tap to delete).

The ↗ button exports the current pitch as an image — share it to WhatsApp / Notes / a group chat. Includes team names, score, formation and clock.

), }, { id: 'squad', icon: '👥', title: 'Squad library & CSV import', body: ( <>

You can keep multiple squads (e.g. Saturday team, Sunday team, Opponents) and switch between them. Look in the Squad tab's library card at the top.

CSV format — one row per player. Columns: Number, Name, Positions (join multiples with |):

{`Number,Name,Positions
1,Matt Barker,RB|RW
2,Garee Hilsdon,CB|CDM
9,Phil Smith,ALL`}

Tap Import CSV in the squad library to bring a roster in. Choose “Save as new squad” or “Replace active”.

), }, { id: 'sub', icon: '🔁', title: 'Position fit & off-position subs', body: ( <>

When picking a player for a slot you'll see tags:

Sorted top-to-bottom by fit, then by least time played.

), }, { id: 'auth', icon: '🔐', title: 'Sign in & sync', body: ( <>

The badge in the top bar shows your status:

Signing in uses Cloudflare's secure one-time-code email. No password to remember. Sessions last a month, after which you'll see a banner asking you to sign in again — your data is safe and waits for you.

), }, { id: 'reset', icon: '⚙️', title: 'Reset & clock edit', body: ( <>

Tap Reset in the top bar. Three options:

Each reset asks for a second tap to confirm.

To edit the clock — tap the big time at the top. Useful after a crash or to correct a mis-press.

), }, { id: 'background', icon: '📱', title: 'Mobile — clock keeps running', body: ( <>

When the phone locks or you switch to another app, the browser pauses JavaScript timers. Match Manager handles this — the clock is anchored to real wall-clock time, so the moment you return to the app it instantly catches up.

No manual sync needed.

(Safety: if the app was left running for more than 3 hours, on reopen it won't add the gap — it keeps the last known time so you can edit it yourself if needed.)

), }, { id: 'tweaks', icon: '🛠️', title: 'Settings (theme, colours, layout)', body: ( <>

Switch theme (dark / contrast / light), pick an accent colour, change density (standard / big-tap), and hide/show the Pool and Log tabs.

), }, ]; return (
{sections.map(s => (
{openSection === s.id &&
{s.body}
}
))}
); } function CandidateRow({ p, slotPos, time, onPick }) { const exact = p.positions.includes(slotPos); const isAll = p.positions.includes('ALL'); const compat = !exact && !isAll && window.canPlay?.(p, slotPos); const offPos = !exact && !isAll && !compat; let tagText, tagCls; if (exact) { tagText = 'EXACT'; tagCls = 'exact'; } else if (isAll) { tagText = 'ALL'; tagCls = 'all'; } else if (compat) { tagText = 'FIT'; tagCls = 'compat'; } else { tagText = 'OFF-POS'; tagCls = 'offpos'; } const posTag = isAll ? 'ALL' : p.positions.join('/'); return ( ); } // ───────────────────────────────────────────────────────────── // SQUAD EDITOR (player profiles — name, number, positions) // ───────────────────────────────────────────────────────────── const ALL_POSITIONS = ['GK','LB','CB','RB','LWB','RWB','CDM','CM','CAM','LM','RM','LW','RW','ST','CF','ALL']; // ─── CSV import/export ─────────────────────────────────────── // Documented format (header row required; positions joined by `|`): // // Number,Name,Positions // 1,Matt Barker,RB|RW // 2,Garee Hilsdon,CB|CDM // 9,Phil Smith,ALL // // Accepted column synonyms (case-insensitive): #/num/number, name/player, // positions/position/pos. Position values are normalised to uppercase and // filtered against the known set. Empty positions default to ["CM"]. function splitCsvLine(line) { const out = []; let cur = '', inQ = false; for (let i = 0; i < line.length; i++) { const c = line[i]; if (c === '"') { if (inQ && line[i+1] === '"') { cur += '"'; i++; } else inQ = !inQ; } else if (c === ',' && !inQ) { out.push(cur); cur = ''; } else cur += c; } out.push(cur); return out.map(c => c.trim()); } function parseSquadCsv(text) { const lines = text.replace(/^\uFEFF/, '').trim().split(/\r?\n/).filter(l => l.trim()); if (!lines.length) throw new Error('CSV is empty'); const rows = lines.map(splitCsvLine); const hdr = rows[0].map(c => c.toLowerCase()); const looksHeader = hdr.some(c => /^(name|player|number|num|#|positions?|pos)$/.test(c)); let nCol = 0, nameCol = 1, posCol = 2; let dataRows = rows; if (looksHeader) { nCol = hdr.findIndex(c => /^(#|num|number)$/.test(c)); nameCol = hdr.findIndex(c => /^(name|player)$/.test(c)); posCol = hdr.findIndex(c => /^(positions?|pos)$/.test(c)); if (nameCol < 0) throw new Error("CSV needs a 'Name' column"); if (nCol < 0) nCol = 0; if (posCol < 0) posCol = nameCol + 1; dataRows = rows.slice(1); } return dataRows.map((row, i) => { const numStr = (row[nCol] || '').trim(); const name = (row[nameCol] || '').trim(); const posStr = (row[posCol] || '').trim(); let positions = posStr.split(/[|;\/]/).map(p => p.trim().toUpperCase()).filter(Boolean); positions = positions.filter(p => ALL_POSITIONS.includes(p)); if (!positions.length) positions = ['CM']; return { id: i + 1, n: parseInt(numStr, 10) || (i + 1), name: name || `Player ${i + 1}`, positions, }; }).filter(p => p.name); } function squadToCsv(players) { const out = ['Number,Name,Positions']; players.forEach(p => { const safeName = /[,"\n]/.test(p.name) ? `"${p.name.replace(/"/g,'""')}"` : p.name; out.push(`${p.n},${safeName},${p.positions.join('|')}`); }); return out.join('\n'); } function PlayerEditor({ p, onUpdate, onTogglePos, onRemove }) { const [armed, setArmed] = useState(false); function doRemove() { if (!armed) { setArmed(true); setTimeout(() => setArmed(false), 3000); return; } setArmed(false); onRemove(); } return (
onUpdate({ n: Math.max(1, Math.min(99, parseInt(e.target.value) || 1)) })} aria-label="Jersey number" /> onUpdate({ name: e.target.value })} aria-label="Player name" placeholder="Player name" />
{ALL_POSITIONS.map(pos => ( ))}
); } // ─── Squad library (multiple named squads) ─────────────────── function SquadLibrary({ state, setState, onImportCsv }) { const [editingName, setEditingName] = useState(false); const [nameDraft, setNameDraft] = useState(''); const [armedDelete, setArmedDelete] = useState(false); const active = state.squads.find(s => s.id === state.activeSquadId) || state.squads[0]; function loadSample() { const sample = (window.SAMPLE_SQUAD || []).map(p => ({ ...p, positions: [...p.positions] })); if (!sample.length) return; const id = uid(); setState(s => ({ ...s, squads: [...s.squads, { id, name: 'Sample squad', players: sample }], })); setTimeout(() => switchTo(id), 0); } function switchTo(id) { if (id === state.activeSquadId) return; setState(s => { const target = s.squads.find(sq => sq.id === id); if (!target) return s; window.SQUAD = target.players; const ptDef = {}; target.players.forEach(p => ptDef[p.id] = { total: 0, onSince: null }); const psDef = {}; target.players.forEach(p => psDef[p.id] = { injured: false, yellow: 0, red: false }); return { ...s, activeSquadId: id, squad: target.players, slots: buildSlots(s.formation), playerTimes: ptDef, playerStatus: psDef, history: [...(s.history || []), { at: s.matchSec, kind: 'card', text: `— Squad: ${target.name} —` }], }; }); } function addBlank() { const id = uid(); setState(s => ({ ...s, squads: [...s.squads, { id, name: `Squad ${s.squads.length + 1}`, players: [] }], })); setTimeout(() => switchTo(id), 0); } function duplicate() { const id = uid(); setState(s => { const cur = s.squads.find(sq => sq.id === s.activeSquadId); if (!cur) return s; const players = cur.players.map(p => ({ ...p, positions: [...p.positions] })); return { ...s, squads: [...s.squads, { id, name: cur.name + ' (copy)', players }] }; }); setTimeout(() => switchTo(id), 0); } function rename(newName) { setState(s => ({ ...s, squads: s.squads.map(sq => sq.id === s.activeSquadId ? { ...sq, name: newName || 'Untitled' } : sq), })); } function deleteActive() { if (state.squads.length <= 1) return; if (!armedDelete) { setArmedDelete(true); setTimeout(() => setArmedDelete(false), 3000); return; } setArmedDelete(false); setState(s => { if (s.squads.length <= 1) return s; const remaining = s.squads.filter(sq => sq.id !== s.activeSquadId); const next = remaining[0]; window.SQUAD = next.players; const ptDef = {}; next.players.forEach(p => ptDef[p.id] = { total: 0, onSince: null }); const psDef = {}; next.players.forEach(p => psDef[p.id] = { injured: false, yellow: 0, red: false }); return { ...s, squads: remaining, activeSquadId: next.id, squad: next.players, slots: buildSlots(s.formation), playerTimes: ptDef, playerStatus: psDef, }; }); } return (
{editingName ? ( setNameDraft(e.target.value)} onBlur={() => { rename(nameDraft.trim()); setEditingName(false); }} onKeyDown={e => { if (e.key === 'Enter') { rename(nameDraft.trim()); setEditingName(false); } if (e.key === 'Escape') setEditingName(false); }} /> ) : ( )}
{(window.SAMPLE_SQUAD || []).length > 0 && state.squad.length === 0 && ( )}
); } function SquadEditor({ state, setState }) { const [backupSheet, setBackupSheet] = useState(false); const [importText, setImportText] = useState(''); const [importMsg, setImportMsg] = useState(''); const [csvSheet, setCsvSheet] = useState(false); const [csvText, setCsvText] = useState(''); const [csvMsg, setCsvMsg] = useState(''); const [csvAsNew, setCsvAsNew] = useState(true); function pickCsvFile() { const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.csv,text/csv,text/plain'; inp.onchange = e => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => setCsvText(reader.result || ''); reader.readAsText(f); }; inp.click(); } function applyCsv() { try { const players = parseSquadCsv(csvText); if (!players.length) throw new Error('No player rows found'); const ptDef = {}; players.forEach(p => ptDef[p.id] = { total: 0, onSince: null }); const psDef = {}; players.forEach(p => psDef[p.id] = { injured: false, yellow: 0, red: false }); setState(s => { if (csvAsNew) { const id = uid(); const name = `Imported (${players.length})`; window.SQUAD = players; return { ...s, squads: [...s.squads, { id, name, players }], activeSquadId: id, squad: players, slots: buildSlots(s.formation), playerTimes: ptDef, playerStatus: psDef, history: [...(s.history || []), { at: s.matchSec, kind: 'card', text: `— Imported squad: ${name} —` }], }; } else { // Replace active squad players window.SQUAD = players; const newSquads = s.squads.map(sq => sq.id === s.activeSquadId ? { ...sq, players } : sq); return { ...s, squads: newSquads, squad: players, slots: buildSlots(s.formation), playerTimes: ptDef, playerStatus: psDef, }; } }); setCsvMsg(`Imported ${players.length} players ✓`); setTimeout(() => { setCsvSheet(false); setCsvText(''); setCsvMsg(''); }, 700); } catch (e) { setCsvMsg('Import failed: ' + e.message); } } function exportCsv() { const csv = squadToCsv(state.squad); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const date = new Date().toISOString().slice(0,10); const slug = (state.squads.find(s => s.id === state.activeSquadId)?.name || 'squad').replace(/[^a-z0-9-_]+/gi, '-').toLowerCase(); a.download = `${slug}-${date}.csv`; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 100); } function updatePlayer(id, patch) { setState(s => withActiveSquadPlayers(s, s.squad.map(p => p.id === id ? { ...p, ...patch } : p))); } function togglePosition(id, pos) { setState(s => { const newPlayers = s.squad.map(p => { if (p.id !== id) return p; let positions; if (pos === 'ALL') { positions = p.positions.includes('ALL') ? ['CM'] : ['ALL']; } else if (p.positions.includes('ALL')) { positions = [pos]; } else { positions = p.positions.includes(pos) ? p.positions.filter(x => x !== pos) : [...p.positions, pos]; if (!positions.length) positions = [pos]; } return { ...p, positions }; }); return withActiveSquadPlayers(s, newPlayers); }); } function addPlayer() { setState(s => { const maxId = Math.max(0, ...s.squad.map(p => p.id)); const maxN = Math.max(0, ...s.squad.map(p => p.n)); const newP = { id: maxId + 1, n: maxN + 1, name: 'New Player', positions: ['CM'] }; const base = withActiveSquadPlayers(s, [...s.squad, newP]); return { ...base, playerTimes: { ...s.playerTimes, [newP.id]: { total: 0, onSince: null } }, playerStatus: { ...s.playerStatus, [newP.id]: { injured: false, yellow: 0, red: false } }, }; }); } function removePlayer(id) { setState(s => { const slots = s.slots.map(sl => sl.playerId === id ? { ...sl, playerId: null } : sl); const base = withActiveSquadPlayers(s, s.squad.filter(p => p.id !== id)); return { ...base, slots }; }); } function sortByNumber() { setState(s => withActiveSquadPlayers(s, [...s.squad].sort((a, b) => a.n - b.n))); } function exportJson() { const payload = { __format: 'matchmanager/v1', exportedAt: new Date().toISOString(), squad: state.squad, score: state.score, teamName: state.teamName, crest: state.crest, formation: state.formation, slots: state.slots, phase: state.phase, matchSec: state.matchSec, playerTimes: state.playerTimes, playerStatus: state.playerStatus, goals: state.goals, history: state.history, }; const json = JSON.stringify(payload, null, 2); const blob = new Blob([json], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; const date = new Date().toISOString().slice(0,10); a.download = `mpb-squad-${date}.json`; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(url); a.remove(); }, 100); } function exportToClipboard() { const payload = { __format: 'matchmanager/v1', squad: state.squad, score: state.score, teamName: state.teamName, crest: state.crest, formation: state.formation, slots: state.slots, phase: state.phase, matchSec: state.matchSec, playerTimes: state.playerTimes, playerStatus: state.playerStatus, goals: state.goals, history: state.history, }; const json = JSON.stringify(payload); setImportText(json); if (navigator.clipboard?.writeText) { navigator.clipboard.writeText(json).then( () => setImportMsg('Copied to clipboard ✓'), () => setImportMsg('Copy failed — select all & copy from the box below.') ); } else { setImportMsg('Select all and copy from the box below.'); } } function importJsonFromFile() { const inp = document.createElement('input'); inp.type = 'file'; inp.accept = '.json,application/json,text/plain'; inp.onchange = e => { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => applyImport(reader.result); reader.readAsText(f); }; inp.click(); } function applyImport(text) { try { const data = JSON.parse(text); if (!data || (!data.squad && !data.teamName)) throw new Error('No squad data found in file'); setState(s => ({ ...s, squad: data.squad || s.squad, score: data.score || s.score, teamName: data.teamName || s.teamName, crest: data.crest || s.crest, formation: data.formation || s.formation, slots: data.slots || s.slots, phase: data.phase || s.phase, matchSec: data.matchSec ?? s.matchSec, playerTimes: Object.assign({}, s.playerTimes, data.playerTimes || {}), playerStatus: Object.assign({}, s.playerStatus, data.playerStatus || {}), goals: data.goals || s.goals, history: data.history || s.history, })); setImportMsg('Imported ✓ ' + (data.squad?.length || 0) + ' players'); setTimeout(() => { setBackupSheet(false); setImportMsg(''); setImportText(''); }, 800); } catch (e) { setImportMsg('Import failed: ' + e.message); } } return (
setCsvSheet(true)} />
{state.squad.length === 0 && (
No players yet
Tap + Add player above, or Import CSV from the squad card to populate this squad.
)} {state.squad.map(p => ( updatePlayer(p.id, patch)} onTogglePos={(pos) => togglePosition(p.id, pos)} onRemove={() => removePlayer(p.id)} /> ))}
{ setBackupSheet(false); setImportText(''); setImportMsg(''); }} title="Backup & restore" sub="Save a JSON file of your squad and match — restore it anytime, on any device." >
Paste JSON to restore