// screens/matchday.jsx — the daily competition
//
// One featured fixture a day generates a short trivia set about the two clubs.
// Everyone plays the same frozen question set, which is what makes scores
// comparable. Opens 24h before kickoff, closes at kickoff, no catch-up.
//
// Question types implemented here:
// top_scorers ranked slots, progressive reveal — type a name and it drops
// into its correct rank
// shared_players two kit swatches, name anyone who played for both
// teammates one kit plus a named anchor player, name anyone who
// overlapped with them at that club
//
// Answer matching is accent- and punctuation-insensitive, and accepts surname
// only, because typing "Hamsik" for "Marek Hamsik" has to work.
(function () {
const T = () => window.T;
// ── Answer matching ────────────────────────────────────────────────────────
function norm(s) {
return (s || '')
.normalize('NFKD').replace(/[\u0300-\u036f]/g, '') // strip accents
.toLowerCase().replace(/[^a-z0-9 ]/g, '').replace(/\s+/g, ' ').trim();
}
// Accept full name, or surname alone when it's unambiguous within the set.
function matchAnswer(guess, candidates) {
const g = norm(guess);
if (!g) return null;
let hit = candidates.find(c => norm(c.name) === g);
if (hit) return hit;
const bySurname = candidates.filter(c => {
const parts = norm(c.name).split(' ');
return parts[parts.length - 1] === g;
});
if (bySurname.length === 1) return bySurname[0];
hit = candidates.find(c => norm(c.name).includes(g) && g.length >= 4);
return hit || null;
}
// ── Hint ladders ───────────────────────────────────────────────────────────
// A hint should shrink the search space, never close it — except `reveal`,
// which is explicitly "I want to move on".
//
// Cost is BOTH tokens and points. That's what keeps the leaderboard honest
// without locking anyone out: a casual can buy their way through a matchday,
// and their score truthfully reflects the help. The top of the table is still
// people who went in clean, so "no hints" stays the real brag.
//
// First hint of each matchday is free, so an empty wallet is never a wall.
// ── Hint model ─────────────────────────────────────────────────────────────
// Slots show one blank per letter, so you can see the shape of the answer.
// The first letter is free; after that you buy letters left to right and the
// price doubles each time. That curve is deliberate — spelling out a whole
// name should cost more than the slot is worth, so letters are a nudge when
// you're close, never a way to buy the answer.
//
// No reveal option. In a name-guessing game "show me the answer" isn't a
// hint, it's the give-up button, which already exists.
const LETTER_BASE = 5; // tokens for the first purchased letter
const LETTER_STEP = 2; // doubles each subsequent letter
const LETTER_PENALTY = 2; // points forfeited per letter
const NATIONALITY_COST = 5;
const NATIONALITY_PENALTY = 2;
// Cost of the next letter, given how many have already been bought here.
function letterCost(boughtSoFar) {
return LETTER_BASE * Math.pow(LETTER_STEP, boughtSoFar);
}
// How many answers a question needs to be complete.
//
// Types with a large valid answer set carry `required` in their payload and
// you name that many of them; ranked types want the whole list. This was
// hardcoded to shared_players in three places, which meant any new
// many-answer type silently demanded every valid answer instead of a few.
function requiredCount(q) {
return (q?.payload?.required) || (q?.payload?.answers || []).length;
}
// Which types hand you the first letter free.
//
// Only where the slot has ONE knowable answer. shared_players has many valid
// answers, so prefilling the first letter of whichever one we happened to
// rank first is misleading — it points at a specific player when any would
// do. career_path starts blank because the whole puzzle is the deduction.
// teammates is the shared_players case: many valid answers, no free letter.
const FREE_FIRST_LETTER = {
top_scorers: true,
top_appearances: true,
shared_players: false,
teammates: false,
career_path: false,
};
function revealedLetters(hints, rank, typeKey) {
const base = FREE_FIRST_LETTER[typeKey] ? 1 : 0;
return base + (hints.letters?.[rank] || 0);
}
// Does the payload carry what this hint would reveal?
function hintHasData(key, payload) {
const a = (payload?.answers || [])[0] || {};
if (key === 'nationality') return a.nationality != null;
if (key === 'era') return a.year != null;
return true;
}
// Small flag, same flagcdn source the World Cup app uses.
function NatFlag({ code, title, size = 18 }) {
if (!code) return null;
return (
);
}
// ── Kit shirt — the club identity system ───────────────────────────────────
// No crests (trademarked, not licensable at this scale). Identity is kit
// colour + pattern, which fans read just as fast. The pattern is clipped
// inside the shirt silhouette, then the outline and collar stroke on top.
let _kitId = 0;
function KitSwatch({ club, size = 56 }) {
const TT = T();
const p = club?.primary_hex || '#1F2A40';
const sec = club?.secondary_hex || '#FFFFFF';
const pat = club?.pattern || 'solid';
const cid = React.useMemo(() => `kit${++_kitId}`, []);
const BODY = "M66.5 14.4375C75.7944 14.4375 81.7119 12.375 81.7119 12.375C82.6469 12.3753 83.5752 12.5322 84.4576 12.8391L124.688 26.8125L120.368 49.5L107.67 50.9231C106.115 51.0978 104.683 51.8464 103.659 53.0204C102.634 54.1943 102.092 55.7078 102.14 57.2602L103.906 119.625H29.0938L30.8602 57.2602C30.9079 55.7078 30.3657 54.1943 29.3411 53.0204C28.3166 51.8464 26.8847 51.0978 25.3297 50.9231L12.6324 49.5L8.3125 26.8125L48.5424 12.8391C49.4248 12.5322 50.3531 12.3753 51.2881 12.375C51.2881 12.375 57.2056 14.4375 66.5 14.4375Z";
const COLLAR = "M86.5829 13.5764C85.405 17.97 82.7974 21.8541 79.1656 24.6249C75.5338 27.3958 71.0813 28.898 66.5004 28.898C61.9196 28.898 57.4671 27.3958 53.8353 24.6249C50.2035 21.8541 47.5959 17.97 46.418 13.5764";
const fills = [];
if (pat === 'stripes') {
const n = 6, w = 133 / n;
for (let i = 0; i < n; i++)
fills.push();
} else if (pat === 'hoops') {
const n = 6, h = 132 / n;
for (let i = 0; i < n; i++)
fills.push();
} else if (pat === 'halves') {
fills.push();
fills.push();
} else if (pat === 'sash') {
fills.push();
fills.push();
} else {
fills.push();
}
return (
);
}
// One blank per letter, spaces preserved between words, revealed letters
// filled left to right. Seeing the shape of the name is itself a clue.
function LetterBlanks({ name, revealed, dim }) {
const TT = T();
let seen = 0;
return (
{(name || '').split('').map((ch, i) => {
if (ch === ' ') {
return ;
}
const idx = seen++;
const show = idx < revealed;
return (
{show ? ch : '\u00A0'}
);
})}
);
}
// ── Ranked slots (top scorers / appearances) ───────────────────────────────
function RankedQuestion({ q, found, revealed, onGuess, hints = {} }) {
const TT = T();
const [val, setVal] = React.useState('');
const [shake, setShake] = React.useState(false);
const answers = q.payload.answers || [];
const submit = (e) => {
e && e.preventDefault();
if (!val.trim()) return;
const ok = onGuess(val);
if (!ok) { setShake(true); setTimeout(() => setShake(false), 400); }
setVal('');
};
return (
);
}
// ── Shared players ─────────────────────────────────────────────────────────
function SharedQuestion({ q, found, revealed, onGuess, hints = {} }) {
const TT = T();
const [val, setVal] = React.useState('');
const [shake, setShake] = React.useState(false);
const need = q.payload.required || 2;
const foundList = q.payload.answers.filter(a => found.has(a.rank));
// the slot hints currently apply to — lowest-ranked unsolved
const openSlots = q.payload.answers.filter(a => !found.has(a.rank));
const submit = (e) => {
e && e.preventDefault();
if (!val.trim()) return;
const ok = onGuess(val);
if (!ok) { setShake(true); setTimeout(() => setShake(false), 400); }
setVal('');
};
return (
+
{q.payload.prompt}
{foundList.length} of {need} found
{Array.from({ length: need }).map((_, i) => {
const a = foundList[i];
// unsolved slots show the shape of the next unfound answer
const target = !a ? openSlots[i - foundList.length] : null;
return (
{/* teams — kits at the edges, names filling the middle. Type scales to
the longer of the two names so "Real Betis v Real Sociedad" and
"Borussia Monchengladbach v Eintracht Frankfurt" both fill the space
without one wrapping. Sized off the longer name, not each
separately, so the two stay visually matched. */}
);
}
function ordinal(n) {
const s = ['th', 'st', 'nd', 'rd'], v = n % 100;
return n + (s[(v - 20) % 10] || s[v] || s[0]);
}
function RankTile({ label, value }) {
const TT = T();
return (
{label}
{value}
);
}
// ── Hero: today's matchday ─────────────────────────────────────────────────
// The landing screen used to render a flat list and let you pick. There is
// nothing to pick — there is one matchday and it closes at kickoff — so the
// live fixture takes the whole top of the screen and the countdown is the
// loudest thing on it. That 24h window is what turns "later" into "now", and
// a row in a list of closed fixtures communicated none of it.
function HeroMatchday({ md, score, onPlay }) {
const TT = T();
const fx = md.fixture || {};
const closes = md.closes_at ? new Date(md.closes_at).getTime() : null;
const played = !!score;
return (
);
}
// Compact result row. The old list showed every matchday including ones you
// never played; this shows YOUR history, with misses visible, because that is
// what makes a streak legible and gives a reason not to break it.
function ResultRow({ md, score, onPlay }) {
const TT = T();
const fx = md.fixture || {};
const missed = !score;
return (
{!list.length && (
)}
{/* One fixture, front and centre. If two are somehow open, the earlier
closing one leads — it is the one about to be lost. */}
{live.slice(0, 1).map(m => (
))}
{live.length > 1 && }
{/* Two numbers, not a widget. On an empty board these read as a new
season rather than a dead app, which a full-width "nobody has
played" panel does not. */}
{(myRank || fanRank || !live.length) && (
)}
Standings
{showBoard && (
)}
{/* Tomorrow, deliberately locked. Anticipation without implying today
is skippable — clubs shown, no play affordance. */}
{later.slice(0, 1).map(m => (
{/* No "give up" on multiple choice — all four answers are visible,
so the button would just be a free pass. */}
{!complete && q.type_key !== 'never_played' && (
)}
{askName && (
setAskName(false)}
onSave={async (n) => {
setName(n);
window.saveName && window.saveName(n);
setAskName(false);
await finish();
}}
/>
)}
);
}
// ── Multiple choice (never_played) ─────────────────────────────────────────
// Four names, one of whom never turned out for the club. All four are SHOWN —
// this was previously routed through RankedQuestion, which hid them behind
// letter blanks and asked you to type a name you were never told. You get one
// pick: the whole question is the judgement, so a retry would give it away.
function ChoiceQuestion({ q, found, revealed, onGuess, onResolve, hints = {} }) {
const TT = T();
const a = (q.payload.answers || [])[0] || {};
const options = q.payload.options || [];
const [chosen, setChosen] = React.useState(null);
const settled = chosen != null || found.has(a.rank) || revealed;
const eliminated = hints.eliminated || new Set();
const choose = (name) => {
if (settled) return;
setChosen(name);
if (name === a.player) onGuess(name);
else onResolve && onResolve(); // wrong: mark done so they can move on
};
return (
);
}
// ── Teammates ──────────────────────────────────────────────────────────────
// One club, one named anchor player, many valid answers. Structurally the
// same as SharedQuestion but the header carries the anchor rather than a
// second kit, because the question is "who played alongside this person"
// rather than "who spans these two clubs".
function TeammatesQuestion({ q, found, revealed, onGuess, hints = {} }) {
const TT = T();
const [val, setVal] = React.useState('');
const [shake, setShake] = React.useState(false);
const need = requiredCount(q);
const foundList = q.payload.answers.filter(a => found.has(a.rank));
const openSlots = q.payload.answers.filter(a => !found.has(a.rank));
const anchor = q.payload.anchor || {};
const submit = (e) => {
e && e.preventDefault();
if (!val.trim()) return;
const ok = onGuess(val);
if (!ok) { setShake(true); setTimeout(() => setShake(false), 400); }
setVal('');
};
return (
);
}
// ── Kit shirt — the club identity system ───────────────────────────────────
// No crests (trademarked, not licensable at this scale). Identity is kit
// colour + pattern, which fans read just as fast. The pattern is clipped
// inside the shirt silhouette, then the outline and collar stroke on top.
let _kitId = 0;
function KitSwatch({ club, size = 56 }) {
const TT = T();
const p = club?.primary_hex || '#1F2A40';
const sec = club?.secondary_hex || '#FFFFFF';
const pat = club?.pattern || 'solid';
const cid = React.useMemo(() => `kit${++_kitId}`, []);
const BODY = "M66.5 14.4375C75.7944 14.4375 81.7119 12.375 81.7119 12.375C82.6469 12.3753 83.5752 12.5322 84.4576 12.8391L124.688 26.8125L120.368 49.5L107.67 50.9231C106.115 51.0978 104.683 51.8464 103.659 53.0204C102.634 54.1943 102.092 55.7078 102.14 57.2602L103.906 119.625H29.0938L30.8602 57.2602C30.9079 55.7078 30.3657 54.1943 29.3411 53.0204C28.3166 51.8464 26.8847 51.0978 25.3297 50.9231L12.6324 49.5L8.3125 26.8125L48.5424 12.8391C49.4248 12.5322 50.3531 12.3753 51.2881 12.375C51.2881 12.375 57.2056 14.4375 66.5 14.4375Z";
const COLLAR = "M86.5829 13.5764C85.405 17.97 82.7974 21.8541 79.1656 24.6249C75.5338 27.3958 71.0813 28.898 66.5004 28.898C61.9196 28.898 57.4671 27.3958 53.8353 24.6249C50.2035 21.8541 47.5959 17.97 46.418 13.5764";
const fills = [];
if (pat === 'stripes') {
const n = 6, w = 133 / n;
for (let i = 0; i < n; i++)
fills.push(