{s.live ? PLAYING NOW · Game {s.live.gn} · {window.MLB.inningText(s.live)}
: ⏰ Game {tvGame.gn}: {window.MLB.when(tvGame)}{tvGame.tv ? " · 📺 " + tvGame.tv : ""}}
)}
);
}
/* A friendly empty slot for the #1/#2 seeds while round one is played. */
function ByeNote({ s, res }) {
if (s.rd !== "DS" || s.bot) return null;
return
😴 The {nameOf(res, s.top)} won so many games they got to skip round 1 and rest!
;
}
/* ---------- Road to the World Series (the best-of-N lesson, always on top of the bracket) ---------- */
function RoadStrip({ res, compact }) {
const M = window.MLB;
return (
Each ⚾ dot is one win. Fill up all your dots first and you move on. Lose, and your season is over. Tap a series to see every game: when, where and what channel.
);
}
/* ---------- live scoreboard ---------- */
function Diamond({ on = [false, false, false], size = 90 }) {
const b = (x, y, lit) => ;
return (
);
}
function CountDots({ label, n, of, color }) {
const d = [];
for (let i = 0; i < of; i++) d.push();
return
{label}{d}
;
}
function Linescore({ g, res }) {
const n = Math.max(9, (g.als || []).length, (g.hls || []).length);
const cols = []; for (let i = 0; i < n; i++) cols.push(i);
const cell = { padding: "3px 6px", textAlign: "center", fontSize: 13 };
const row = (t, ls, r, h, e) => (
);
}
/* ---------- How It Works (the best-of-N lesson) ---------- */
function PretendSeries() {
const [best, setBest] = useState(5);
const [games, setGames] = useState([]);
const need = (best + 1) / 2;
const a = games.filter((x) => x === "a").length, b = games.filter((x) => x === "b").length;
const done = a >= need || b >= need;
const T = { a: { n: "Puppies", e: "🐶", c: "#3f78d8" }, b: { n: "Kittens", e: "🐱", c: "#d6517d" } };
const w = a >= need ? "a" : b >= need ? "b" : null;
let msg;
if (w) msg = T[w].e + " The " + T[w].n + " got to " + need + " wins first. They WIN the series " + Math.max(a, b) + "–" + Math.min(a, b) + "! (They only needed " + games.length + " of the " + best + " games.)";
else if (a === need - 1 && b === need - 1) msg = "😱 " + a + " to " + b + "! Whoever wins the next game wins EVERYTHING.";
else if (a === need - 1 || b === need - 1) { const l = a > b ? "a" : "b"; msg = "⭐ The " + T[l].n + " need just ONE more win!"; }
else if (!games.length) msg = "Tap who wins Game 1. First team to " + need + " wins takes the series!";
else msg = "Game " + (games.length + 1) + " is next. Keep going!";
const row = (k, n) => (
{T[k].e}{T[k].n}
);
return (
🎮 Play a pretend series
{[3, 5, 7].map((n) => )}
Best of {best} means they play up to {best} games. The first team to win {need} wins the series!
{row("a", a)}{row("b", b)}
{Array.from({ length: best }).map((_, i) => {
const g = games[i];
const skipped = done && i >= games.length;
return
Game {i + 1}
{g ? T[g].e : skipped ? "🚫" : "·"}
;
})}
{msg}
{done && games.length < best &&
🚫 = games that never get played, because someone already won. That's why the schedule says "if needed"!
{card("🎟️", "12 teams get in", "6 teams from the American League and 6 from the National League. The ones that won the most games all summer get the best spots.")}
{card("😴", "The top 2 get a rest", "The #1 and #2 teams in each league skip round 1. They wait to play whoever wins the Wild Card series.")}
{card("🏆", "Last team standing", "Lose a series and your season is over. The American League champion plays the National League champion in the World Series.")}
{card("⚾", "9 innings", "Each team bats once per inning. After 9 innings, whoever scored more runs wins. Tied? They keep playing extra innings!")}
{card("✋", "3 outs", "The batting team keeps hitting until the other team gets 3 outs. Then they switch sides.")}
{card("💎", "Around the diamond", "Run to 1st, 2nd, 3rd and back home to score a run. A home run means the batter runs all the way around!")}
{card("🎯", "Strikes and balls", "3 strikes and the batter is out. 4 balls and the batter gets to walk to first base.")}
{card("🏠", "Home field", "The better team hosts more games. Fans cheering at home can really help!")}
);
}
/* ---------- app ---------- */
function App() {
const params = new URLSearchParams(location.search);
const [tab, setTab] = useState(TABS.some((t) => t.id === params.get("tab")) ? params.get("tab") : "home");
const [feed, setFeed] = useState(null);
const [err, setErr] = useState(false);
const isPhone = useIsPhone();
const store = useStore();
// ?feed=tests/demo-live.json previews a mid-playoffs day (same-folder JSON only).
const feedUrl = /^[\w\-\/]+\.json$/.test(params.get("feed") || "") ? params.get("feed") : "live.json";
// The Pi serves live.json (cron updater). Anywhere without one (GitHub Pages), build the
// same feed in the browser straight from ESPN — see mlb-espn.js.
const load = useCallback(() => fetch(feedUrl, { cache: "no-store" })
.then((r) => r.ok ? r.json() : Promise.reject(r.status))
.catch(() => window.MLBESPN.buildFeed(2026))
.then((d) => { window.__FEED = d; setFeed(d); setErr(false); }).catch(() => setErr(true)), []);
const anyLive = feed && feed.games && feed.games.some((g) => g.status === "LIVE");
useEffect(() => { load(); const i = setInterval(load, anyLive ? 20000 : 60000); return () => clearInterval(i); }, [load, anyLive]);
useEffect(() => { const h = () => load(); window.addEventListener("online", h); return () => window.removeEventListener("online", h); }, [load]);
// A kiosk never reloads by itself: pick up new code after 6h with nobody touching it.
useEffect(() => {
let t; const arm = () => { clearTimeout(t); t = setTimeout(() => location.reload(), 6 * 3600e3); };
["mousemove", "keydown", "touchstart", "click"].forEach((e) => window.addEventListener(e, arm, { passive: true })); arm();
return () => clearTimeout(t);
}, []);
useEffect(() => {
const h = (e) => {
if (e.target && /^(INPUT|SELECT|TEXTAREA)$/.test(e.target.tagName)) return;
const ids = TABS.map((t) => t.id), i = ids.indexOf(tab);
if (e.key === "ArrowRight") setTab(ids[(i + 1) % ids.length]);
else if (e.key === "ArrowLeft") setTab(ids[(i - 1 + ids.length) % ids.length]);
else if (/^[1-8]$/.test(e.key)) setTab(ids[+e.key - 1]);
};
window.addEventListener("keydown", h); return () => window.removeEventListener("keydown", h);
}, [tab]);
const res = useMemo(() => window.MLB.resolve(feed), [feed]);
const [box, setBox] = useState(null);
const [seriesId, setSeriesId] = useState(null);
const [teamPick, setTeamPick] = useState(params.get("team"));
const openTeam = (t) => { setTeamPick(t); setTab("teams"); };
// keep an open box score pointed at the freshest copy of its game
const boxGame = box && feed && feed.games ? (feed.games.find((g) => g.id === box.id) || box) : box;
const liveN = feed && feed.games ? feed.games.filter((g) => g.status === "LIVE").length : 0;
return (