/* global React */ // ── Drought Board surfaces ──────────────────────────────────── // ShareCard (3 directions) · NationCard (mobile) · Board (mobile + full) // All built on the TTT base + soccer theme. Space Mono, hard shadows, // chunky pixel frames, neon-on-CRT, pitch motifs. const { YearsNumber, Scanlines, PitchBand, Cap, FlagPair, useLang } = window; // strip the leading "years"/"anos" word → "Since …" / "Desde que …" // (the giant number + YEARS label already carry the count) function tail(row, lang) { const t = window.headlineText(row, lang).replace(/^\S+\s/, ""); return t.charAt(0).toUpperCase() + t.slice(1); } // tiny chunky pixel ball mark function PixelBall({ size = 22 }) { return ( ); } function Wordmark({ lang, small }) { return (
{window.lz(window.STR.boardTitle, lang)}
); } // rank ribbon (LONGEST / SHORTEST / #N) — label only, no duplicate prefix function RankTag({ row, lang }) { const longest = row.rank === 1; const shortest = row.rank === 8; const label = longest ? window.lz(window.STR.longest, lang) : shortest ? window.lz(window.STR.shortest, lang) : `#${row.rank}`; const c = longest ? "var(--sx-magenta)" : shortest ? "var(--sx-cyan)" : "var(--sx-ink-faint)"; return ( {label} ); } // ── Credit · "BUILT BY FELLIPE BRITO · FELLIPEBRITO.COM" ────── // onCard=true → baked into the share-card PNG (plain text, no ). // onCard=false → clickable on the live board / detail pages. function Credit({ onCard = false }) { const label = "BUILT BY FELLIPE BRITO · FELLIPEBRITO.COM"; const baseStyle = { letterSpacing: "0.14em", fontSize: onCard ? 14 : 11, fontWeight: 700 }; if (onCard) { return ( {label} ); } return ( {label} ); } // ── Non-wins list (NationCard only) ─────────────────────────── // Loss = magenta tick; Draw = dim tick. Reads as the drought timeline. function NonWinsList({ row, lang }) { const list = window.NONWINS[row.nation] || []; if (list.length === 0) { return (
{window.lz(window.STR.nonWinsNone, lang)}
); } return (
{window.lz(window.STR.nonWinsTitle, lang)}
{list.map((entry, i) => (
{window.nonWinLine(entry, lang)}
))}
); } // ════════════════════════════════════════════════════════════ // SHARE CARD — 1200 × 630 (single direction, "Scoreboard") // ════════════════════════════════════════════════════════════ function ShareCard({ row, lang: langProp }) { const ctx = useLang(); const lang = langProp || ctx.lang; return (
{/* faint pitch stripes wash on the left */}
{/* header */}
{/* main */}
{/* left: relationship + sentence */}
{window.lz(window.STR.drought, lang)}
›
{window.lz(window.STR.beatLabel, lang)}
{tail(row, lang)}
{window.detailLine(row, lang)}
{/* right: the giant number panel */}
{window.lz(window.STR.years, lang)}
{window.lz(window.STR.precise, lang)} {window.lz(row.precise, lang)}
{/* credit, absolutely positioned to bottom — baked into PNG */}
); } // ════════════════════════════════════════════════════════════ // NATION CARD — mobile portrait 390 × 844 // ════════════════════════════════════════════════════════════ function NationCard({ row, onBack }) { const { lang } = useLang(); const nat = window.NATION[row.nation]; return (
{/* top bar */}
{lang.toUpperCase()}
{/* hero */}
{window.lz(nat, lang).toUpperCase()}
{/* number panel */}
{window.lz(window.STR.years, lang)}
{window.lz(window.STR.precise, lang)} · {window.lz(row.precise, lang)}
{/* last win — cream balloon (TTT dialog standard) */}
{window.lz(window.STR.lastWin, lang)}
› {lang === "pt" ? row.scorePt : row.score}
{window.lz(window.STR.beatLabel, lang)} {window.lz(window.NATION[row.beat], lang)} {window.lz(window.STR.worldCup, lang)} {window.lz(window.PHASE[row.phase], lang)} · {row.wc}
{/* non-wins since last win over a champion */} {/* credit (clickable) */}
); } // ════════════════════════════════════════════════════════════ // BOARD ROWS // ════════════════════════════════════════════════════════════ function MiniNum({ value, color }) { return ; } // mobile compact row function BoardRowM({ row, lang, i, onClick }) { const accent = row.rank === 1 ? "var(--sx-magenta)" : "var(--sx-yellow)"; const nonWins = (window.NONWINS[row.nation] || []).length; return (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined} style={{ display: "grid", gridTemplateColumns: "26px 40px 1fr auto", alignItems: "center", gap: 12, background: i % 2 ? "var(--sx-crt-800)" : "var(--sx-crt-700)", borderLeft: `4px solid ${row.rank === 1 ? "var(--sx-magenta)" : "var(--sx-crt-600)"}`, padding: "12px 14px", cursor: onClick ? "pointer" : "default", }}> {row.rank}
{window.lz(window.NATION[row.nation], lang)}
› {window.lz(window.NATION[row.beat], lang)} · {row.score} · {row.wc}
{window.lz(window.STR.years, lang)}
{nonWins > 0 && ( {nonWins} {window.lz(window.STR.nonWinsShort, lang)} )}
); } // mobile board 390 × 844 (grows beyond viewport on small screens; body scrolls) function BoardMobile({ onSelectNation }) { const { lang } = useLang(); return (
{window.DROUGHT.map((row, i) => ( onSelectNation(row.nation) : undefined} /> ))}
{window.lz(window.STR.tapDetail, lang)}
); } // full board row (table-like) function BoardRowFull({ row, lang, i }) { const accent = row.rank === 1 ? "var(--sx-magenta)" : "var(--sx-yellow)"; const nonWins = (window.NONWINS[row.nation] || []).length; return (
{row.rank}
{window.lz(window.NATION[row.nation], lang)}
{window.lz(window.STR.years, lang)}
{nonWins > 0 && ( {nonWins} {window.lz(window.STR.nonWinsShort, lang)} )}
{window.detailLine(row, lang)}
); } // full board ~960 wide function BoardFull() { const { lang } = useLang(); return (
{/* header */}
{window.lz(window.STR.boardSub, lang)}
{window.lz(window.STR.asOf, lang)}
{/* column heads */}
{[window.STR.rank, window.STR.nation, window.STR.drought, window.STR.lastWin].map((s, k) => ( {window.lz(s, lang)} ))}
{/* rows */}
{window.DROUGHT.map((row, i) => )}
); } Object.assign(window, { ShareCard, NationCard, BoardMobile, BoardFull });