/* global React */
// Primitives for the BoyleSports Stats Centre home — brand-true building blocks.
const PL = window.PL;
/* The signature lime parallelogram slash. */
function Slash({ h = 28, w, color = 'var(--bs-lime)', style }) {
const width = w || h * 0.46;
return (
);
}
// fix skew (CSS transform key)
function SlashGlyph({ h = 28, w, color = 'var(--bs-lime)', style }) {
const width = w || Math.round(h * 0.42);
return (
);
}
/* Team colour disc — replaces crests/flags. Shows the 3-letter club code. */
function TeamDisc({ code, size = 34, ring = false, style }) {
const t = PL.T[code] || { c: '#999', ink: '#fff', abbr: code };
const fs = Math.round(size * 0.34);
return (
{t.abbr}
);
}
/* Team name row: disc + name */
function TeamRow({ code, size = 30, bold = false, color = 'var(--text-primary)', name, abbrInstead = false, gap = 10, fs = 15 }) {
const t = PL.T[code] || { name: code, abbr: code };
return (
{abbrInstead ? t.abbr : (name || t.name)}
);
}
/* Numbered jersey — replaces player photos. Club-coloured shirt + squad number. */
function Jersey({ code, number, size = 64, style }) {
const t = PL.T[code] || { c: '#888', c2: '#fff', ink: '#fff' };
const w = size, h = size * 1.04;
// pick a readable number colour against the shirt
const numColor = t.ink === '#FFFFFF' ? '#FFFFFF' : t.ink;
return (
{number}
);
}
/* Form pill string — W lime / L black / D grey. Pass `team` to enable per-match hover. */
function genFormDetails(code, results) {
const CODES = Object.keys(window.PL.T);
let seed = 7; for (const ch of code) seed = (seed * 31 + ch.charCodeAt(0)) >>> 0;
const rnd = () => { seed = (seed * 1103515245 + 12345) & 0x7fffffff; return seed / 0x7fffffff; };
const pick = (a) => a[Math.floor(rnd() * a.length)];
const n = results.length;
return results.map((res, i) => {
let opp; do { opp = CODES[Math.floor(rnd() * CODES.length)]; } while (opp === code);
const home = rnd() > 0.5;
let s;
if (res === 'W') s = pick([[2, 1], [3, 1], [1, 0], [2, 0], [3, 2]]);
else if (res === 'D') s = pick([[1, 1], [0, 0], [2, 2]]);
else s = pick([[0, 1], [1, 2], [0, 2], [1, 3]]);
return { mw: 32 - (n - i), opp, home, tg: s[0], og: s[1], res };
});
}
function Form({ results, size = 22, gap = 4, team }) {
const [tip, setTip] = React.useState(null);
const details = team ? genFormDetails(team, results) : null;
const map = {
W: { bg: 'var(--bs-lime)', fg: 'var(--bs-blue-navy)' },
L: { bg: 'var(--bs-black)', fg: 'var(--bs-white)' },
D: { bg: 'var(--bs-neutral-300)', fg: 'var(--bs-blue-navy)' },
};
return (
{results.map((r, i) => {
const c = map[r] || map.D;
const d = details && details[i];
return setTip({ r: e.currentTarget.getBoundingClientRect(), d }) : undefined}
onMouseLeave={d ? () => setTip(null) : undefined}
style={{
width: size, height: size, borderRadius: 3, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
background: c.bg, color: c.fg, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: size * 0.5, cursor: d ? 'help' : 'default',
}}>{r};
})}
{tip && (() => {
const T = window.PL.T, d = tip.d;
const hT = d.home ? team : d.opp, aT = d.home ? d.opp : team;
const hS = d.home ? d.tg : d.og, aS = d.home ? d.og : d.tg;
return (
Matchweek {d.mw} · {d.home ? 'Home' : 'Away'}
{T[hT].abbr}{hS}–{aS}{T[aT].abbr}
);
})()}
);
}
/* Exact Figma slash — fixed 31×40 lime parallelogram, identical for every heading. */
function FixedSlash({ color = 'var(--bs-lime)' }) {
return (
);
}
/* Section heading — Figma "/HEADING": lime slash with the title's first letter overlapping it.
`right` renders a control (dropdown) on the right; `action` renders a text link. No kicker. */
function SlashHeading({ title, action, right, onLight = true }) {
return (
