/* app.jsx — Sidebar + App router + HomePage v2 */ const { useState: useA, useEffect: useEA, useMemo: useMA } = React; /* ── TWEAK DEFAULTS ─────────────────────────────────────── */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "metric": "minPct", "density": "normal" } /*EDITMODE-END*/; /* ── MOBILE HEADER ──────────────────────────────────────── */ function MobileHeader() { return (
Ordio
); } /* ── MOBILE NAV ─────────────────────────────────────────── */ function MobileNav({ view, setView }) { const items = [ { id: 'home', label: 'Yfirlit' }, { id: 'matches', label: 'Leikir' }, { id: 'teams', label: 'Lið' }, { id: 'players', label: 'Leikmenn' }, { id: 'standings', label: 'Staða' }]; const active = view === 'match-detail' ? 'matches' : view === 'team-detail' ? 'teams' : view; return ( ); } /* ── SIDEBAR ────────────────────────────────────────────── */ function Sidebar({ view, setView, counts }) { const navItems = [ { id: 'home', label: 'Yfirlit', badge: null }, { id: 'matches', label: 'Leikir', badge: counts?.matches || null }, { id: 'teams', label: 'Lið', badge: counts?.teams || null }, { id: 'players', label: 'Leikmenn', badge: null }, { id: 'standings', label: 'Staða', badge: null }]; const active = view === 'match-detail' ? 'matches' : view === 'team-detail' ? 'teams' : view; return ( ); } /* ── HOME — AGE RANKING CHART ───────────────────────────── */ function AgeRankingChart({ data, onTeam }) { const sorted = [...data].filter((d) => d.avgAgeSt).sort((a, b) => a.avgAgeSt - b.avgAgeSt); const ages = sorted.flatMap((d) => [d.avgAgeSt, d.coreAge].filter(Boolean)); const minA = Math.floor(Math.min(...ages)) - 1; const maxA = Math.ceil(Math.max(...ages)) + 1; const scl = (v) => v ? `${(v - minA) / (maxA - minA) * 100}%` : '0%'; const sclHg = (v) => `${v / 11 * 100}%`; // out of 11 starters return (
Aldur eftir liðum — yngst til elst
{sorted.map((d, i) =>
onTeam(d.team)} style={{ display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', padding: '2px 0' }} onMouseEnter={(e) => e.currentTarget.querySelector('.rna').style.color = C.orange} onMouseLeave={(e) => e.currentTarget.querySelector('.rna').style.color = C.text}>
{i + 1}
{td(d.team)}
{/* Dual bar — age only */}
{d.avgAgeSt &&
}
{d.coreAge &&
}
{window.HAS_FOREIGN &&
}
{/* Values: ages + homegrown starters — compact inline */}
XI {fn(d.avgAgeSt)} Kj {fn(d.coreAge)} ↑ {fn(d.hgStPerMatch)} {window.HAS_FOREIGN && <> Erl {fn(d.fgStPerMatch)} }
)}
{[ { c: '#1d4ed8', l: 'XI — Meðalaldur byrjunarliðs', tip: TIPS.avgAgeXI }, { c: '#60a5fa', l: 'Kj — Kjarnaaldur', tip: TIPS.coreAge }, { c: C.orange, l: `↑XI — ${HGADJ} í byrjunarliði`, tip: 'Meðalfjöldi uppaldra leikmanna í byrjunarlið á leik.' }, ...(window.HAS_FOREIGN ? [{ c: FOREIGN_COLOR, l: 'Erl — Erlendar í byrjunarliði', tip: 'Meðalfjöldi erlendra leikmanna í byrjunarliði á leik (kvarði 0–11). Stikan sýnir hlutfall af 11.' }] : [])]. map(({ c, l, tip }) =>
{l}
)}
); } /* ── HOME — RANKING CHART ───────────────────────────────── */ function RankingChart({ data, metric, onTeam }) { const sorted = [...data].sort((a, b) => b[metric] - a[metric]); const lbl = metric === 'minPct' ? `Hlutfall mínútna — ${HGADJ_LC}` : `Hlutfall leikmanna — ${HGADJ_LC}`; return (
{lbl}
{sorted.map((d, i) => { const pct = d[metric]; const col = quartColorFor(pct, metric); return (
onTeam(d.team)} style={{ display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer', padding: '2px 0' }} onMouseEnter={(e) => e.currentTarget.querySelector('.rn').style.color = C.orange} onMouseLeave={(e) => e.currentTarget.querySelector('.rn').style.color = C.text}>
{i + 1}
{td(d.team)} ({d.teamMatches.length})
{pct}%
); })}
{[{ c: QUART_COLORS[3], l: 'Efsti fjórðungur' }, { c: QUART_COLORS[2], l: '2. fjórðungur' }, { c: QUART_COLORS[1], l: '3. fjórðungur' }, { c: QUART_COLORS[0], l: 'Neðsti fjórðungur' }].map(({ c, l }) =>
{l}
)}
); } /* ── HOMEPAGE ───────────────────────────────────────────── */ function HomePage({ matches, pc, teamData, metric, onTeam }) { const allIds = useMA(() => { const s = new Set(matches.flatMap((m) => m.players.filter((p) => p.mins > 0).map((p) => p.id))); return [...s]; }, [matches]); const hgIds = allIds.filter((id) => pc[id]?.homegrown); const allMins = matches.flatMap((m) => m.players).reduce((s, p) => s + p.mins, 0); const hgMins = matches.flatMap((m) => m.players).filter((p) => pc[p.id]?.homegrown).reduce((s, p) => s + p.mins, 0); const waAll = allIds.filter((id) => pc[id]?.birthYear); const avgAge = waAll.length ? (waAll.reduce((s, id) => s + ((window.SEASON_YEAR||2026) - pc[id].birthYear), 0) / waAll.length).toFixed(1).replace('.', ',') : '–'; const globalMinPct = allMins ? Math.round(hgMins / allMins * 100) : 0; const globalAvgHgSt = teamData.length ? (teamData.reduce((s, t) => s + t.hgStPerMatch, 0) / teamData.length).toFixed(1).replace('.', ',') : '–'; return (
{/* Hero */}

{(window.LEAGUE_TITLE || ['Besta deild', 'kvenna 2026']).join(' ')}

Hlutfall uppaldra leikmanna yfir {ROUNDS.length} umferðir. Hér eru {matches.length} leikir og {allIds.length} leikmenn greindir.

{/* Stat strip */}
{[ { l: 'Leikir', v: matches.length, c: null, tip: null }, { l: 'Lið', v: TEAMS.length, c: null, tip: null }, { l: 'Leikmenn', v: allIds.length, c: null, tip: null }, { l: 'Meðalaldur', v: avgAge, c: null, tip: TIPS.avgAge }, { l: HGADJ, v: hgIds.length, c: C.orange, tip: TIPS.uppalin }, { l: `${HGADJ} mín`, v: globalMinPct + '%', c: quartColorFor(globalMinPct, 'minPct'), tip: TIPS.hgMin }, { l: `${HGADJ} í XI`, v: globalAvgHgSt, c: C.orange, tip: 'Meðalfjöldi uppaldra leikmanna í byrjunarlið á leik, meðaltal yfir öll lið.' }]. map(({ l, v, c, tip }) =>
{v}
{l}{tip && }
)}
{/* Charts — 2 col grid */}
{/* News feed */}
); } /* ── APP ────────────────────────────────────────────────── */ function App() { const [data, setData] = useA(null); const [error, setError] = useA(null); const [view, setViewRaw] = useA('home'); const [matchId, setMatchId] = useA(null); const [team, setTeam] = useA(null); const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); useEA(() => { const metaP = window.HAS_FOREIGN ? fetch('players_meta.json').then((r) => r.ok ? r.json() : null).catch(() => null) : Promise.resolve(null); fetch(window.DATA_FILE || 'ksi_data.json'). then((r) => {if (!r.ok) throw new Error('HTTP ' + r.status);return r.json();}). then(async (d) => { const meta = await metaP; window.FOREIGN = new Set(Object.entries(meta?.players || {}).filter(([, v]) => v.foreign).map(([k]) => String(k))); window.__dataLastUpdated = d.lastUpdated || null; if (Array.isArray(d.rounds) && d.rounds.length) { window.ROUNDS = d.rounds.map((r, i) => ({ ...r, n: parseInt(r.label, 10) || i + 1 })); } setData(d); }). catch((e) => setError(e.message)); }, []); function setView(v, id) { window.scrollTo && document.querySelector('main')?.scrollTo(0, 0); if (v === 'match-detail') {setMatchId(id);setViewRaw('match-detail');} else if (v === 'team-detail') {setTeam(id);setViewRaw('team-detail');} else setViewRaw(v); } const teamData = useMA(() => { if (!data) return []; return TEAMS.map((t) => teamAgg(data.matches, data.playerStats, t)); }, [data]); if (error) return (
Villa við að hlaða gögnum
{error}
); if (!data) return (
Hleður gögn…
); const { matches, playerStats: pc } = data; const pad = tweaks.density === 'compact' ? '20px 24px' : '28px 32px'; const counts = { matches: matches.length, teams: TEAMS.length }; /* League-wide quartile thresholds — shared colour scale across every view. Recomputed from the live team distribution, so bands shift over the season. */ const quartThresh = (key) => { const vals = teamData.map((t) => t[key]).filter((v) => v != null).slice().sort((a, b) => a - b); const q = (p) => { if (!vals.length) return 0; const idx = (vals.length - 1) * p, lo = Math.floor(idx), hi = Math.ceil(idx); return vals[lo] + (vals[hi] - vals[lo]) * (idx - lo); }; return { q25: q(0.25), q50: q(0.5), q75: q(0.75) }; }; window.__quart = { minPct: quartThresh('minPct'), hgPct: quartThresh('hgPct') }; return ( <>
{view === 'home' && setView('team-detail', t)} /> } {view === 'matches' && setView('match-detail', id)} /> } {view === 'match-detail' && matchId && setView('matches')} onTeam={(t) => setView('team-detail', t)} /> } {view === 'teams' && setView('team-detail', t)} /> } {view === 'team-detail' && team && setView('teams')} onMatch={(id) => setView('match-detail', id)} /> } {view === 'players' && } {view === 'standings' && setView('team-detail', t)} /> }
); } ReactDOM.createRoot(document.getElementById('root')).render();