// Bonk Ball HUD — cartoon scoreboard. const RED_ROSTER = require("lib/data/red-roster.json"); // Stadium select images flash the previous frame's art for a beat when the view // first opens — the DOM diff reuses the at that slot and just swaps its // src, so the browser keeps painting the OLD picture until the new one decodes. // Fix: keep both stadium images mounted (hidden) in the lobby at all times so // they're already fetched + decoded in the browser cache before you ever tap in. const STADIUM_IMGS = [ "/cdn/moodboard-bonk-ball-cartoon/image-cartoon-soccer-stadium-striped-green-pitch-tiered-colorful-grandstands-floodlight-towers-floating-balloons-bright-blue-daytime-sky.png", "/cdn/moodboard-bonk-ball-cartoon/image-cartoon-neon-night-soccer-arena-glowing-magenta-purple-light-trusses-billboards-city-skyline-backdrop-striped-pitch.png", ]; export default function (localPlayer, world) { // --- Arena loading screen — owns the whole screen from the moment you tap a // stadium until the scene has settled. The match's countdown stays frozen // behind it (match-manager waits for `ready`), so 3·2·1 never starts on a // half-built pitch. --- const _pst = (localPlayer && localPlayer.state) || {}; // --- INTRO SPLASH — shown only the FIRST time you load the game (player.js // flips introDone when you hit PLAY). Comic-impact title card: spinning sun // rays, halftone dots, a bouncing ball, a swinging glove, and the title // slamming in with a "BONK!" starburst. Pure CSS so it animates smoothly even // as the HUD re-renders behind it. --- if (!_pst.introDone) { return `

BONK BALL

FOUR FOOTBALLERS, ONE GIANT BALL, A FEW ACCIDENTS

That was a terrible idea.

`; } if (_pst.loading) { const arena = _pst.loadArena || "The Pitch"; const isNeon = arena === "Voltway"; const isMenu = arena === "Menu"; const accent = isMenu ? "oklch(0.82 0.2 150)" : isNeon ? "oklch(0.82 0.22 330)" : "oklch(0.82 0.2 150)"; const accentGlow = isMenu ? "oklch(0.82 0.2 150 / 0.5)" : isNeon ? "oklch(0.82 0.22 330 / 0.5)" : "oklch(0.82 0.2 150 / 0.5)"; const accent2 = isMenu ? "oklch(0.82 0.16 205)" : isNeon ? "oklch(0.7 0.2 280)" : "oklch(0.86 0.18 95)"; const bg = isMenu ? "radial-gradient(120% 90% at 50% 16%, oklch(0.26 0.07 280) 0%, oklch(0.16 0.06 285) 55%, oklch(0.09 0.04 280) 100%)" : isNeon ? "radial-gradient(120% 90% at 50% 18%, oklch(0.28 0.13 305) 0%, oklch(0.13 0.07 285) 55%, oklch(0.08 0.04 280) 100%)" : "radial-gradient(120% 90% at 50% 16%, oklch(0.7 0.13 230) 0%, oklch(0.5 0.12 250) 52%, oklch(0.28 0.08 265) 100%)"; const loadKicker = isMenu ? "Returning to" : "Entering"; const loadTitle = isMenu ? "Lobby" : arena; const loadFooter = isMenu ? "Heading back to the menu" : "Warming up the pitch"; return `

${loadKicker}

${loadTitle}

${loadFooter}...

`; } let red = 0, blue = 0; let kickPhase = null, kickT = 0, goFlash = 0, flash = null, matchClock = null, matchResults = null; const mgrs = world.query ? world.query({ tags: ["match-manager"] }) : []; if (mgrs && mgrs.length > 0) { const st = mgrs[0].state || {}; red = (st.scores && st.scores.red) || 0; blue = (st.scores && st.scores.blue) || 0; kickPhase = st.phase || null; kickT = st.kickT || 0; goFlash = st.goFlash || 0; flash = st.flash || null; matchClock = st.clock; matchResults = st.results || null; } // --- Match clock readout (mm:ss). Shows full time before kickoff, counts // down through play, holds at 0:00 at full time. Goes amber in the last // 15 seconds for urgency. --- const MATCH_TIME = 180; const clkSec = Math.max(0, Math.ceil(matchClock == null ? MATCH_TIME : matchClock)); const clkStr = `${Math.floor(clkSec / 60)}:${String(clkSec % 60).padStart(2, "0")}`; const clkUrgent = kickPhase === "play" && clkSec <= 15; const clkCol = clkUrgent ? "oklch(0.88 0.2 95)" : "#ffffff"; // --- Kickoff countdown — big, center-screen 3·2·1 then ¡YA! --- let kickoff = ""; const counting = kickPhase === "kickoff" && kickT > 0; const showGo = goFlash > 0; if (counting || showGo) { const n = Math.max(1, Math.ceil(kickT)); const label = counting ? String(n) : "GO!"; const accent = counting ? "oklch(0.88 0.2 95)" : "oklch(0.82 0.22 140)"; const sub = counting ? "GET READY" : "GET THE BALL!"; // re-key the animation each tick / on GO so it re-pops const popKey = counting ? `c${n}` : "go"; kickoff = `

${label}

${sub}

`; } // --- Celebration banner — big bouncy center-screen pop for the moments // that actually matter (double goal, purple ball). No log cards. --- let flashBanner = ""; if (flash && (flash.t || 0) > 0 && flash.msg) { const acc = flash.color || "oklch(0.88 0.2 95)"; const seq = flash.seq || 0; flashBanner = `

${flash.msg}

${flash.sub ? `

${flash.sub}

` : ""}

`; } const crosshair = `

`; // --- Chaos countdown (reads the chaos-manager) --- let nextIn = null, chaosTimer = null, activeLabel = "", flashT = 0; const chaos = world.query ? world.query({ tags: ["chaos-manager"] }) : []; if (chaos && chaos.length > 0) { const cs = chaos[0].state || {}; nextIn = cs.nextIn; chaosTimer = cs.timer; // smooth fractional countdown — drives the bar activeLabel = cs.activeLabel || ""; flashT = cs.flashT || 0; } const CHAOS_INTERVAL = 22; // matches chaos-manager EVENT_INTERVAL const imminent = nextIn != null && nextIn <= 5; const firing = flashT > 0; // fill from the fractional timer so the bar glides instead of stepping per second const charge = chaosTimer == null ? (nextIn == null ? 0 : Math.max(0, Math.min(100, (1 - Math.max(0, nextIn) / CHAOS_INTERVAL) * 100))) : Math.max(0, Math.min(100, (1 - Math.max(0, chaosTimer) / CHAOS_INTERVAL) * 100)); const barGrad = firing ? "linear-gradient(90deg, oklch(0.72 0.25 25), oklch(0.82 0.22 75), oklch(0.72 0.25 25))" : imminent ? "linear-gradient(90deg, oklch(0.65 0.26 20), oklch(0.74 0.24 350))" : "linear-gradient(90deg, oklch(0.58 0.24 295), oklch(0.72 0.27 330))"; const barGlow = firing || imminent ? "oklch(0.72 0.25 25 / 0.75)" : "oklch(0.65 0.26 320 / 0.6)"; const barLabel = `CHAOS · ${Math.max(0, nextIn ?? 0)}s`; const board = `

Red

${red}

Time

${clkStr}

Blue

${blue}

${nextIn == null ? "" : `

${barLabel}

`; // --- Bottom HUD: a live ABILITY DOCK. Every button physically depresses while // its key is held. SHIFT carries its own stamina that fills/drains inside // the button and LOCKS OUT when spent. E shows a radial cooldown sweep + // countdown so it can't be spammed. --- const ps = (localPlayer && localPlayer.state) || {}; const ICON = "/cdn/moodboard-bonk-ball-cartoon/"; const STA_MAX = 100, STA_MIN = 8, WAVE_CD_MAX = 3.0, BONK_CD_MAX = 0.4; const sta = Math.max(0, Math.min(STA_MAX, ps.stamina ?? STA_MAX)); const staPct = (sta / STA_MAX) * 100; const shiftReady = sta > STA_MIN; const shiftDown = (!!ps.sprinting || !!ps._dbgSprintRaw) && shiftReady; const staLow = staPct < 28; const waveCd = Math.max(0, ps.waveCd ?? 0); const waveFrac = Math.min(1, waveCd / WAVE_CD_MAX); const eDown = !!ps._dbgWaveHeld; const bonkCd = Math.max(0, ps.bonkCd ?? 0); const bonkDown = bonkCd > BONK_CD_MAX * 0.4; // AURA — lit by celebrating right after a goal. Free, no-drain sprint. const auraT = Math.max(0, ps.auraT ?? 0); const auraOn = auraT > 0; const celebReady = (ps.celebWindow ?? 0) > 0 && !auraOn; // oklch helpers with explicit alpha (appending hex to an oklch string is invalid CSS). const S = (h, l = 0.82, c = 0.2) => `oklch(${l} ${c} ${h})`; const A = (h, a, l = 0.82, c = 0.2) => `oklch(${l} ${c} ${h} / ${a})`; // One ability button. `kind` swaps the live-feedback layer. const mkBtn = (cfg) => { const { label, icon, hue, kind, sz = 66, down = false, disabled = false } = cfg; const accent = S(hue); const ring = disabled ? S(28, 0.62, 0.22) : (down ? S(hue, 0.9, 0.22) : A(hue, 0.45)); const shadow = down ? `inset 0 4px 12px rgba(0,0,0,0.65), 0 0 24px ${A(hue, 0.5)}` : `0 12px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.4), 0 0 22px ${A(hue, 0.22)}`; // SHIFT — stamina rising fill behind the icon. let fill = ""; if (kind === "stamina") { const fh = staLow ? 32 : hue, fl = staLow ? 0.72 : 0.84, fc = staLow ? 0.24 : 0.2; fill = `

`; } // E — radial cooldown sweep + countdown number. let cd = ""; if (kind === "cooldown" && waveCd > 0) { const deg = waveFrac * 360; cd = `

${waveCd.toFixed(1)}

`; } const iconDim = (kind === "cooldown" && waveCd > 0) || disabled ? 0.32 : 1; const lock = disabled ? `

🔒

` : ""; const labelCol = disabled ? S(28, 0.74) : accent; return `

${fill}

${label}

${cd} ${lock}

`; }; // --- Vertical energy bar, pinned to the left edge. No label — just the fill. // When the AURA is lit, the bar ignites gold-rainbow with a pulsing halo // and a countdown badge so you feel the free-sprint window burning down. --- const energyFillCol = auraOn ? "linear-gradient(0deg, oklch(0.82 0.22 30), oklch(0.9 0.2 95), oklch(0.88 0.22 150))" : staLow ? "linear-gradient(0deg, oklch(0.7 0.24 30), oklch(0.82 0.2 55))" : "linear-gradient(0deg, oklch(0.82 0.18 95), oklch(0.88 0.2 145))"; const energyGlow = auraOn ? "0 0 26px oklch(0.9 0.2 95 / 0.9)" : shiftDown ? "0 0 18px oklch(0.9 0.2 130 / 0.7)" : "0 0 10px oklch(0.85 0.18 95 / 0.35)"; const barBorder = auraOn ? "oklch(0.9 0.2 95 / 0.85)" : "rgba(255,255,255,0.15)"; const auraHalo = auraOn ? `box-shadow:0 10px 28px rgba(0,0,0,0.5), 0 0 34px oklch(0.9 0.2 95 / 0.6), 0 0 60px oklch(0.85 0.22 330 / 0.35)` : `box-shadow:0 10px 28px rgba(0,0,0,0.5)`; const auraBadge = auraOn ? `

AURA ${Math.ceil(auraT)}s

` : ""; const energyBarV = `

${auraOn ? `

` : ""}

${auraBadge}

`; // The aura is a SECRET — no prompt nudging the player to claim it. On ignite // a big celebratory banner punches into the CENTRE of the screen (slightly // smaller text than the old shout) and fades out on the auraFlash timer. const auraFlash = (ps.auraFlash ?? 0) > 0 ? `

AURA UP!

⚡ FREE SPRINT ⚡

` : ""; const bottomStack = `

${mkBtn({ kind: "flash", label: "CLICK", hue: 200, icon: ICON + "sprite-transparent-cartoon-icon-football-soccer-cleat-boot.png", down: bonkDown })} ${mkBtn({ kind: "flash", label: "SHIFT", hue: 240, icon: ICON + "sprite-transparent-cartoon-icon-single-lightning-bolt.png", down: shiftDown, disabled: !shiftReady })} ${mkBtn({ kind: "cooldown", label: "E", hue: 280, icon: ICON + "sprite-transparent-cartoon-icon-red-boxing-glove.png", down: eDown })} ${mkBtn({ kind: "flash", label: "1", hue: 315, icon: ICON + "sprite-transparent-cartoon-icon-gold-trophy-victory-celebration.png" })} ${mkBtn({ kind: "flash", label: "2", hue: 340, icon: ICON + "sprite-transparent-cartoon-icon-party-popper-confetti-celebration.png" })}

`; const resetBtn = `

`; // --- Player character pickers (red + blue teams) — stacked dropdowns --- const selHair = ps.selectedHair ?? ""; const selKit = ps.selectedKit ?? "red"; const buildPicker = (team) => { const isRed = team === "red"; const open = isRed ? !!ps.charPickerOpen : !!ps.charPickerOpenBlue; const action = isRed ? "selectChar" : "selectCharBlue"; const toggle = isRed ? "toggleCharPicker" : "toggleCharPickerBlue"; const header = isRed ? "Red Team" : "Blue Team"; const mine = selKit === team; const current = (mine && RED_ROSTER.find((c) => c.hair === selHair)) || RED_ROSTER[0]; const dot = isRed ? "oklch(0.82 0.2 30)" : "oklch(0.72 0.18 250)"; const headGrad = isRed ? "linear-gradient(180deg, rgba(40,12,12,0.88), rgba(22,6,6,0.94))" : "linear-gradient(180deg, rgba(12,20,44,0.88), rgba(6,10,26,0.94))"; const headGlow = isRed ? "0 0 16px rgba(220,60,60,0.22)" : "0 0 16px rgba(70,120,240,0.24)"; const rowActiveGrad = isRed ? "linear-gradient(180deg, rgba(200,40,40,0.85), rgba(140,20,20,0.92))" : "linear-gradient(180deg, rgba(50,90,220,0.85), rgba(24,44,150,0.92))"; const rowDot = isRed ? "oklch(0.85 0.2 30)" : "oklch(0.78 0.16 250)"; const rows = RED_ROSTER.map((c) => { const active = mine && c.hair === selHair; return ` `; }).join(""); return `

${open ? `

${header}

${rows}

` : ''}

`; }; const charPicker = `

${buildPicker("red")} ${buildPicker("blue")}

`; // In-arena top-RIGHT: a stacked control rail. Menu up top, Sound beneath it, // same glass + accent language so they read as one unit. const railBtn = (action, glyph, label, hue) => ` `; const topRight = `

${railBtn('goLobby', '≡', 'Menu', 95)} ${railBtn('toggleSound', '♪', 'Sound', 270)}

`; // --- SOUND modal: live music + SFX sliders. data-needs-cursor frees the // mouse while it's open; the close button relocks straight back to play. --- const musicVolPct = Math.round((ps.musicVol ?? 1) * 100); const sfxVolPct = Math.round((ps.sfxVol ?? 1) * 100); const volRow = (ch, label, glyph, pct, accent) => `

${glyph}${label} ${pct}%

`; const soundModal = ps.soundOpen ? `

Audio

Sound

${volRow('music', 'Music', '♫', musicVolPct, 'oklch(0.82 0.16 205)')} ${volRow('sfx', 'Effects', '🔊', sfxVolPct, 'oklch(0.82 0.22 330)')}

` : ""; // --- LOBBY: level-select title screen (shown only while standing in the lobby) --- const inLobby = (world.query ? world.query({ tags: ["lobby-decor"] }) : []).length > 0; if (inLobby) { // ---- Matchmaking state from the lobby brain ---- const lm = (world.query ? world.query({ tags: ["lobby-manager"] }) : [])[0]; const lms = (lm && lm.state) || {}; const roster = Array.isArray(lms.roster) ? lms.roster : []; const online = lms.online || roster.length; const playing = lms.playing || 0; const freeCnt = roster.filter((r) => r.status === "free").length; const searchCnt = roster.filter((r) => r.status === "searching").length; const q1 = lms.q1 || 0, q2 = lms.q2 || 0; const myMode = localPlayer.state.mmMode || null; const view = myMode ? "searching" : (localPlayer.state.mmView || "root"); // ---- Jumbotron ticker: all-time leaders + chaos hype, scrolling left ---- const sb = (world.query ? world.query({ tags: ["stats-board"] }) : [])[0]; const board = (sb && sb.state && sb.state.board) || {}; const bScorers = Array.isArray(board.scorers) ? board.scorers : []; const bWinners = Array.isArray(board.winners) ? board.winners : []; const C_GOLD = "oklch(0.9 0.17 95)", C_MAG = "oklch(0.82 0.24 330)", C_CYAN = "oklch(0.85 0.18 205)", C_GRN = "oklch(0.84 0.2 150)"; const BADGE = (n) => `/cdn/moodboard-bonk-ball-cartoon/icon-badge-${n}.png`; const tItem = (icon, label, val, color) => `

${label} ${val ? `${val}` : ""} `; const sep = `◆`; const items = []; if (bScorers[0]) items.push(tItem(BADGE("crown"), "Top Scorer", `${bScorers[0].name} · ${bScorers[0].goals}`, C_GOLD)); if (bWinners[0]) items.push(tItem(BADGE("trophy"), "Most Wins", `${bWinners[0].name} · ${bWinners[0].wins}W`, C_MAG)); if (bScorers[1]) items.push(tItem(BADGE("silver-medal"), "Runner-Up", `${bScorers[1].name} · ${bScorers[1].goals}`, C_GOLD)); items.push(tItem(BADGE("soccer-blast"), "Goals Blasted", `${board.totalGoals || 0}`, C_GRN)); items.push(tItem(BADGE("tornado"), "No Rules · All Chaos", "", C_CYAN)); if (bWinners[1]) items.push(tItem(BADGE("bronze-medal"), "Contender", `${bWinners[1].name} · ${bWinners[1].wins}W`, C_MAG)); items.push(tItem(BADGE("boxing-glove"), "Punch · Bonk · Score", "", C_GOLD)); items.push(tItem(BADGE("alert"), "Tornadoes Incoming", "", C_CYAN)); if (bScorers[2]) items.push(tItem(BADGE("flame"), "On Fire", `${bScorers[2].name} · ${bScorers[2].goals}`, C_GOLD)); const strip = items.join(sep); const ticker = `

${strip}${sep} ${strip}${sep}

`; // Square pitch card (reused for the vs-CPU branch) const card = (action, glyph, name, tag, grad, glow, accent) => ` `; const modeBtn = (action, glyph, title, sub, grad, accent, badge) => ` `; const backBtn = ` `; // Hero match card — cartoon footballer art up top, colored title, blurb, play CTA. const al = (col, a) => col.replace(/\)\s*$/, ` / ${a})`); const fcard = (action, img, accent, title, subtitle, desc, badge, scene) => ` `; // Stadium card — image on top, info below. Two sit side-by-side in a row. Same pattern as fcard. const hcard = (action, img, accent, title, subtitle, desc) => ` `; // Section header — clean white text over a gradient underline matching the locker-room top bar. const secTitle = (text) => `

${text}

`; // ---- Presence panel (the "locker room") ---- const dotColor = { free: "oklch(0.82 0.2 150)", searching: "oklch(0.82 0.16 205)", playing: "oklch(0.82 0.22 330)" }; const statusLabel = { free: "Free", searching: "Searching", playing: "Playing" }; const rosterCard = (r) => { const dc = dotColor[r.status] || dotColor.free; const initial = ((r.name || "?").trim().charAt(0) || "?").toUpperCase(); const avatar = r.portrait ? `

` : `

${initial}

`; return `

${avatar}

${r.name}

${statusLabel[r.status] || ""}

`; }; const stat = (n, label, color) => `

${n}

${label}

`; const presence = `

Locker Room

${[ stat(online, "Online", "oklch(0.92 0.02 280)"), stat(freeCnt, "Free", dotColor.free), stat(searchCnt, "Searching", dotColor.searching), stat(playing, "Playing", dotColor.playing), ].join('

')}

${roster.length ? roster.map(rosterCard).join("") : `

No one else here… yet

`; // ---- Center flow ---- let center = ""; if (view === "pvp") { center = `

vs Players

We'll match you with real people — pick a format

${modeBtn('mmQueue1', '🤼', '1v1', '2 players · pure duel', 'linear-gradient(180deg, rgba(18,40,52,0.95), rgba(8,22,32,0.98))', 'oklch(0.78 0.16 200)', q1 ? `${q1} searching` : '')} ${modeBtn('mmQueue2', '⚔️', '2v2', '4 players · no bots', 'linear-gradient(180deg, rgba(42,18,52,0.95), rgba(24,8,32,0.98))', 'oklch(0.78 0.22 330)', q2 ? `${q2} searching` : '')}

${backBtn}

`; } else if (view === "searching") { const target = myMode === "pvp1" ? 2 : 4; const have = Math.min(target, myMode === "pvp1" ? q1 : q2); const inQueue = roster.filter((r) => r.mode === myMode); // Accent carries over from the card they tapped: blue for 1v1, magenta for 2v2. const accent = myMode === "pvp1" ? "oklch(0.82 0.16 205)" : "oklch(0.82 0.22 330)"; const dotsCard = Array.from({ length: target }, (_, i) => `

` ).join(""); center = `

${myMode === "pvp1" ? "Duel · 1v1" : "Team · 2v2"}

Finding Players

${have}/${target}

${dotsCard}

${inQueue.map((r) => `

${r.name}

`).join("")}

`; } else { const TIPS = [ ['Score, then celebrate', 'Press your emote right after a goal to ignite a free no-drain sprint AURA.'], ['Punch the ball', 'A solid punch sends it rocketing — and bonks any rival caught in the way.'], ['Mind the chaos', 'Tornadoes and meteors strike mid-match. Use them, or get swept away.'], ['Pace your energy', 'Sprinting drains your bar. Burst, then let it recharge before the next dash.'], ['Steal the ball', 'Body-check opponents off possession with a well-timed shoulder.'], ['Bank your shots', 'The rainbow goal arches bounce — angled shots are harder to read.'], ['Play as a team', 'In 2v2, stick with your partner. Share the chaos, share the glory.'], ['Aim with the camera', 'You launch the ball where you look — line up before you swing.'], ]; const N = TIPS.length, SLICE = 6.6, win = 100 / N; const inA = (win * 0.1).toFixed(2), inB = (win * 0.88).toFixed(2), out = win.toFixed(2); const tipKf = `@keyframes bonkTipCycle{0%{opacity:0;transform:translateY(8px)}${inA}%{opacity:1;transform:translateY(0)}${inB}%{opacity:1;transform:translateY(0)}${out}%{opacity:0;transform:translateY(-8px)}100%{opacity:0}}`; const tipsStack = TIPS.map(([h, b], i) => `

${h}

${b}

`).join(""); center = `

${secTitle('Choose Your Match')}

${fcard('goDay', '/cdn/moodboard-bonk-ball-cartoon/image-inazuma-eleven-anime-athletic-human-boy-soccer-player-full-body-red-jersey-shorts-cleats-dynamic-pose-versus-blue-armored-robot-on-anime-stadium-field.png', 'oklch(0.82 0.2 150)', 'VS CPU', 'Training · 2v2', 'You + a bot teammate
against two bots', '', true)} ${fcard('mmQueue1', '/cdn/moodboard-bonk-ball-cartoon/image-inazuma-eleven-anime-athletic-human-boy-soccer-player-red-jersey-facing-off-against-athletic-human-boy-soccer-player-blue-jersey-on-anime-stadium-field.png', 'oklch(0.82 0.16 205)', 'VS PLAYER', 'Duel · 1v1', '2 real players
pure duel · no bots', q1 ? `${q1} searching` : '', true)} ${fcard('mmQueue2', '/cdn/moodboard-bonk-ball-cartoon/image-inazuma-eleven-anime-four-athletic-human-boy-soccer-players-two-in-red-jerseys-two-in-blue-jerseys-team-clash-on-anime-stadium-field.png', 'oklch(0.82 0.22 330)', 'VS PLAYER', 'Team · 2v2', '4 real players
no bots', q2 ? `${q2} searching` : '', true)}

${tipsStack}

`; } return `

${ticker}

${center}

${view === "root" ? `

${presence}

` : ""}

`; } // --- Goal celebration buttons (also bound to keys) --- const emBtn = (action, key, emoji, label, accent) => ` `; const emoteBar = `

${emBtn("emote1", "1", "😄", "", "oklch(0.82 0.18 150)")} ${emBtn("emote3", "3", "🙌", "", "oklch(0.78 0.18 250)")}

`; // --- FULL TIME results modal — owns the screen at the whistle. Same glass // card language as the scoreboard, with the match data + two buttons. --- let resultsModal = ""; if (kickPhase === "fulltime" && matchResults) { // Lobby palette — the menu's own colors, so the card feels native to it. const GOLD = "oklch(0.85 0.18 95)"; // lobby gold (MVP) const RED_C = "oklch(0.8 0.18 25)"; // team red — matches the live scoreboard const BLUE_C = "oklch(0.8 0.16 250)"; // team blue — matches the live scoreboard const LOBBY_BAR = "linear-gradient(90deg, oklch(0.82 0.2 150), oklch(0.82 0.16 205), oklch(0.82 0.22 330))"; const BALLICON = "/cdn/moodboard-bonk-ball-cartoon/sprite-transparent-cartoon-soccer-ball-glossy.png"; const r = matchResults; const win = r.winner; const winCol = win === "draw" ? GOLD : (win === "red" ? RED_C : BLUE_C); const headline = win === "draw" ? "DRAW" : (win === "red" ? "RED WINS!" : "BLUE WINS!"); const teamCol = (t) => (t === "red" ? RED_C : BLUE_C); const scorers = Array.isArray(r.scorers) ? r.scorers : []; const mvpId = r.mvp ? r.mvp.id : null; const scorerRows = scorers.length ? scorers.map((sc) => { const col = teamCol(sc.team); const isMvp = sc.id === mvpId; return `

${sc.name} ${isMvp ? `MVP` : ""}

${sc.goals}

`; }).join("") : `

No scorers · what a wall!

`; // MVP — the card's hero strip. A gold "MVP" medallion, the name in lights, // and the goal tally rendered as little soccer balls instead of the word. const mvpBalls = r.mvp ? Array.from({ length: Math.min(6, Math.max(0, r.mvp.goals)) }) .map(() => `

`) .join("") : ""; const mvpBanner = r.mvp ? `

MVP

Player of the Match ${r.mvp.name}

${mvpBalls || `—`}

${r.mvp.goals} ${r.mvp.goals === 1 ? "goal" : "goals"}

` : ""; resultsModal = `

Full Time

${headline}

Red

${r.red}

–

Blue

${r.blue}

${mvpBanner}

Scorers

${scorerRows}

${r.forfeit ? "" : ``}

`; } return board + topRight + bottomStack + energyBarV + auraFlash + kickoff + flashBanner + soundModal + resultsModal; }

Spawn