because the animation's // translateY transform creates a containing block that breaks position:fixed.) React.useEffect(() => { document.body.classList.add("lobby-active"); return () => document.body.classList.remove("lobby-active"); }, []); const sendChat = () => { if (!chatInput.trim()) return; if (chatTab === "coach" && !isCoachLike) return; const me = persona === "coach" ? "ham_coach" : persona === "student" ? (isCaptain ? "ham_captain" : "ham_player") : "admin"; const who = persona === "coach" ? "Edwin Guama (Hamilton HS)" : persona === "student" ? `Slate (Hamilton${isCaptain ? " · Captain" : ""})` : "James Wood (NASEF Admin)"; setChat(c => [...c, { id: Date.now(), t: new Date().toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }), from: me, who, text: chatInput, kind: "msg", side: "home", channel: chatTab, }]); setChatInput(""); setTimeout(() => { const replies = chatTab === "coach" ? ["Copy that, coach.", "Confirmed on our end.", "Sounds good.", "👍"] : ["GG.", "Ready when your players are.", "Confirmed.", "👍"]; const replyWho = chatTab === "coach" ? "Marcus Riley (Quartz Hill HS)" : Math.random() > 0.5 ? "Marcus Riley (Quartz Hill HS)" : "Vex (Quartz Hill)"; setChat(c => [...c, { id: Date.now() + 1, t: new Date().toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false }), from: "qhl", who: replyWho, text: replies[Math.floor(Math.random() * replies.length)], kind: "msg", side: "away", channel: chatTab, }]); }, 1400 + Math.random() * 800); }; return (

{/* SSBU wallpaper backdrop is rendered by body.lobby-active::before in styles.css so it fills the viewport (not constrained to .app-main's transform). */} {/* Lobby header — SSBU wallpaper banner */}

{home.name}

{home.mascot} · 4-0 Pacific Coast

{gameState.homeGames} gameState.homeGames ? "var(--nasef-orange)" : "#fff" }}>{gameState.awayGames}

Match {gameState.currentGame} of 5

{away.name}

{away.mascot} · 3-1 Pacific Coast

Lobby{match.lobby}

Started 4:02 PM PT

6 in lobby

{isCoachLike && } {canForfeit && }

{/* Dual-team roster strip */}

{/* Body — 3 col: game timeline | stage area | chat */}

{/* Timeline column */}

Match flow

{gameState.games.map((g, i) => { const isCurrent = i + 1 === gameState.currentGame; const done = g.winner != null; return (

Game {i + 1} {isCurrent && NOW} {done && Final}

{g.stage || "—"}

{done && (

Winner: {g.winner === "home" ? home.short : away.short}

)}

); })}

{/* Stage striking / picking */}

{tab === "stage" && } {tab === "score" && } {tab === "rules" && }

{/* Chat column — All / Coach tabs */}

Match chat

{chat.filter(m => (m.channel || "all") === chatTab).length} messages

{[ { v: "all", label: "All", sub: "Everyone in match" }, { v: "coach", label: "Coach", sub: "Coaches only", lock: !isCoachLike }, ].map(t => { const active = chatTab === t.v; return ( ); })}

{chat.filter(m => (m.channel || "all") === chatTab).length === 0 ? (

{chatTab === "coach" && !isCoachLike ? "Coach-only channel. Players can't see what's posted here." : "No messages in this channel yet."}

) : ( chat.filter(m => (m.channel || "all") === chatTab).map(m => ( )) )}

{chatTab === "coach" && !isCoachLike ? (

Coach channel is read-only for players

) : ( <> setChatInput(e.target.value)} onKeyDown={e => e.key === "Enter" && sendChat()} style={{ flex: 1 }} /> )}

{forfeitOpen && setForfeitOpen(false)} onConfirm={() => { setForfeitOpen(false); setChat(c => [...c, { id: Date.now(), kind: "system", text: `${home.short} forfeited the match`, channel: "all" }]); }} />}

); }; const ChatMessage = ({ m, persona }) => { if (m.kind === "system") { return

· {m.text} ·

; } const isMe = m.side === "home"; return (

{m.who} · {m.t}

{m.text}

); }; // Stage striking — interactive grid with scripted opponent (we are Hamilton/home) const StagePhase = ({ gameState, setGameState, persona }) => { const D = window.NASEF_DATA; const phase = gameState.stagePhase; // 'striking' | 'picked' | 'completed' const struck = gameState.struckStages; const picked = gameState.pickedStage; const isCaptain = (() => { try { return localStorage.getItem("nasef.captain") === "1"; } catch { return false; } })(); const canEdit = persona === "coach" || persona === "admin" || (persona === "student" && isCaptain); const starters = D.stages.filter(s => s.category === "Starter"); const counterpicks = D.stages.filter(s => s.category === "Counterpick"); // Which step are we on (0/1/2) based on strike count const stepCounts = STRIKE_ORDER_G1.map(s => s.count); let n = struck.length, stepIdx = 0; for (let i = 0; i < stepCounts.length; i++) { if (n >= stepCounts[i]) { n -= stepCounts[i]; stepIdx = i + 1; } else { stepIdx = i; break; } } if (struck.length >= 4) stepIdx = STRIKE_ORDER_G1.length; const currentStep = STRIKE_ORDER_G1[stepIdx]; // From Hamilton's perspective: we ARE "home". Opponent is "away". const isOpponentTurn = currentStep && currentStep.team === "away"; const isOurTurn = currentStep && currentStep.team === "home"; // Script: the opposing coach picks one stage to strike when it's their turn. // Quartz Hill's "preferences" — they'll strike these in order (best-to-worst from their perspective). const OPPONENT_STRIKE_PRIORITY = ["bf", "ps2", "fd", "tc", "sv"]; React.useEffect(() => { if (phase !== "striking") return; if (!isOpponentTurn) return; const remaining = starters.filter(s => !struck.includes(s.id)); if (remaining.length <= 1) return; const pick = OPPONENT_STRIKE_PRIORITY.find(id => remaining.some(r => r.id === id)) || remaining[0].id; const t = setTimeout(() => { setGameState({ ...gameState, struckStages: [...struck, pick] }); }, 1400); return () => clearTimeout(t); }, [phase, struck.length, isOpponentTurn]); // Auto-lock when only one starter remains React.useEffect(() => { if (phase !== "striking") return; if (struck.length !== 4) return; const remaining = starters.filter(s => !struck.includes(s.id))[0]; const t = setTimeout(() => { setGameState({ ...gameState, pickedStage: remaining?.id, stagePhase: "picked" }); }, 700); return () => clearTimeout(t); }, [phase, struck.length]); const toggleStrike = (stageId) => { if (phase !== "striking" || !canEdit || !isOurTurn) return; if (struck.includes(stageId)) return; if (struck.length < 4) { setGameState({ ...gameState, struckStages: [...struck, stageId] }); } }; const reset = () => setGameState({ ...gameState, struckStages: [], pickedStage: null, stagePhase: "striking" }); // How many of OUR strikes are committed this step? const homeStrikesDone = Math.min(2, Math.max(0, struck.length - 1)); const ourStrikesNeededThisStep = currentStep && currentStep.team === "home" ? currentStep.count : 0; const remainingOurStrikes = isOurTurn ? Math.max(0, ourStrikesNeededThisStep - (struck.length - 1)) : 0; return (

Game {gameState.currentGame} · Stage Striking

{phase === "picked" ? "Stage locked in" : isOpponentTurn ? "Waiting on Quartz Hill…" : isOurTurn ? `Strike ${remainingOurStrikes} of your ${ourStrikesNeededThisStep} stages` : "Stage selected"}

CIF SSBU 1-2-1 strike order: away strikes 1, home strikes 2, away strikes 1. The last remaining starter is Game 1.

{canEdit && phase === "picked" && ( )}

{/* Strike progress — bigger, clearer turn indicators */}

{STRIKE_ORDER_G1.map((step, i) => { let cumulative = 0; for (let j = 0; j <= i; j++) cumulative += STRIKE_ORDER_G1[j].count; const completed = struck.length >= cumulative; const active = !completed && stepIdx === i; const isHomeStep = step.team === "home"; const accent = isHomeStep ? "var(--nasef-orange)" : "var(--neon-cyan)"; return (

Step {i + 1}

{completed && Done} {active && Now }

{step.label}

); })}

{/* Turn banner */} {(phase === "striking" || phase === "picked") && (() => { const isReady = phase === "picked"; const stageName = isReady ? (starters.find(s => s.id === picked)?.name || "the selected stage") : null; const bg = isReady ? "rgba(45,212,120,0.08)" : isOpponentTurn ? "rgba(79,227,255,0.06)" : "rgba(242,104,34,0.06)"; const border = isReady ? "rgba(45,212,120,0.35)" : isOpponentTurn ? "rgba(79,227,255,0.25)" : "rgba(242,104,34,0.3)"; const dotColor = isReady ? "var(--success)" : isOpponentTurn ? "var(--neon-cyan)" : "var(--nasef-orange)"; const dotGlow = isReady ? "rgba(45,212,120,0.22)" : isOpponentTurn ? "rgba(79,227,255,0.18)" : "rgba(242,104,34,0.18)"; return (

{isReady ? ( <> Ready — both teams, load up {stageName}. Pick Game 1 in your Switch lobby and start the match. ) : isOpponentTurn ? ( <> Quartz Hill is striking… You'll get your turn shortly. ) : ( <> Your turn — strike {remainingOurStrikes} starter{remainingOurStrikes === 1 ? "" : "s"}. Tap a stage below to remove it from Game 1's pool. )}

); })()}

Starter stages · pick 1 of {starters.length - struck.length}

{starters.map(s => { const isStruck = struck.includes(s.id); const isPicked = picked === s.id; // Who struck it? — match strike order to find side const strikeIdx = struck.indexOf(s.id); let struckBy = null; if (strikeIdx >= 0) { let acc = 0; for (const step of STRIKE_ORDER_G1) { acc += step.count; if (strikeIdx < acc) { struckBy = step.team; break; } } } const clickable = phase === "striking" && canEdit && isOurTurn && !isStruck; return ( ); })}

Counterpick stages · Games 2-5

{counterpicks.map(s => (

{s.name}

))}

); }; // Abstract stylized stage thumbnails — original geometric placeholders, not Nintendo art const StageArt = ({ id }) => { const palettes = { bf: ["#1F2937", "#3B82F6", "#60A5FA"], fd: ["#1E1B4B", "#7C3AED", "#A78BFA"], sv: ["#0E4429", "#22C55E", "#86EFAC"], ps2: ["#7C2D12", "#F97316", "#FED7AA"], tc: ["#1E3A8A", "#06B6D4", "#67E8F9"], kal: ["#5B21B6", "#EC4899", "#F9A8D4"], ho: ["#581C87", "#A855F7", "#E9D5FF"], sbf: ["#1F2937", "#475569", "#94A3B8"], yos: ["#0E7490", "#FBBF24", "#FDE68A"], }; const [bg, mid, hl] = palettes[id] || ["#1F2937", "#475569", "#94A3B8"]; return ( ); }; // Score report const ScoreReport = ({ persona, gameState, setGameState, home, away }) => { const [reported, setReported] = React.useState({ winner: null, confirmed: false }); const isCaptain = (() => { try { return localStorage.getItem("nasef.captain") === "1"; } catch { return false; } })(); const canReport = persona === "coach" || persona === "admin" || (persona === "student" && isCaptain); const submit = () => { if (!reported.winner) return; setReported({ ...reported, confirmed: true }); if (reported.winner === "home") { setGameState({ ...gameState, homeGames: gameState.homeGames + 1, currentGame: gameState.currentGame + 1, stagePhase: "striking", struckStages: [], pickedStage: null }); } else { setGameState({ ...gameState, awayGames: gameState.awayGames + 1, currentGame: gameState.currentGame + 1, stagePhase: "striking", struckStages: [], pickedStage: null }); } setTimeout(() => setReported({ winner: null, confirmed: false }), 2000); }; if (!canReport) { return ; } return (

Report Game {gameState.currentGame}

Who won the last game?

Both coaches must report the same winner. The opposing coach will see this and confirm — match auto-advances when both agree.

{reported.confirmed ? (

Score reported

Waiting for opposing coach confirmation…

) : ( <>

{[{ team: "home", school: home }, { team: "away", school: away }].map(({ team, school }) => ( ))}

)}

); }; const Ruleset = () => (

CIF SSBU Varsity · Spring 2026

Match ruleset

{[ ["Format", "Best of 5, 1v1 singles. Winner stays. 3 stocks per game."], ["Time limit", "7 minutes per game. Sudden Death disabled — go to stock count, then percent."], ["Stage selection", "Game 1: 1-2-1 strike from Starters. Games 2-5: loser picks from Counterpick + Starter pool."], ["Stage bans", "Loser may ban 2 stages before opponent's pick after first game."], ["Item set", "All items off."], ["Hazards", "Stage hazards on; non-applicable for selected stages."], ["DSR", "Dave's Stupid Rule — winner of previous game cannot pick a stage they've already won on."], ["Coach involvement", "Coach may communicate with their player between games. No coaching during gameplay."], ].map(([k, v]) => (

{k} {v}

))}

); // Forfeit confirmation const ForfeitModal = ({ home, away, persona, onClose, onConfirm }) => { const [reason, setReason] = React.useState(""); const [ack, setAck] = React.useState(false); return (

e.stopPropagation()}>

Forfeit match

{home.short} vs. {away.short}

Reason (optional)

setReason(e.target.value)} />
          </div>
          <label className="row-tight" style={{ fontSize: 12, color: "var(--text-secondary)", cursor: "pointer" }}>
            <input type="checkbox" checked={ack} onChange={e => setAck(e.target.checked)} />
            I understand this awards the win to {away.short} and cannot be undone without admin override.
          </label>
          <div className="row" style={{ justifyContent: "flex-end", gap: 8 }}>
            <button className="btn ghost" onClick={onClose}>Cancel</button>
            <button className="btn danger" disabled={!ack} style={{ opacity: ack ? 1 : 0.5 }} onClick={onConfirm}>
              <IconWarn size={12} /> Confirm forfeit
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

window.LobbyPage = LobbyPage;

// Dual-team roster strip — usernames + avatars for both sides
const RosterStrip = ({ school, roster, side }) => {
  const align = side === "away" ? "flex-end" : "flex-start";
  const accent = side === "home" ? "var(--nasef-orange)" : "var(--neon-cyan)";
  return (
    <div className="card" style={{
      padding: "12px 16px",
      display: "flex", alignItems: "center", gap: 14,
      flexDirection: side === "away" ? "row-reverse" : "row",
      borderLeft: side === "home" ? `2px solid ${accent}` : "1px solid var(--border)",
      borderRight: side === "away" ? `2px solid ${accent}` : "1px solid var(--border)",
    }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: align, gap: 2, minWidth: 110 }}>
        <div className="upper" style={{ fontSize: 9, color: "var(--text-muted)", letterSpacing: "0.14em" }}>
          {side === "home" ? "Home" : "Away"} · {roster.length} players
        </div>
        <div style={{ fontSize: 12, fontWeight: 600, color: accent }}>{school.short}</div>
      </div>
      <div style={{
        flex: 1, display: "flex", gap: 10,
        justifyContent: side === "away" ? "flex-end" : "flex-start",
        flexDirection: side === "away" ? "row-reverse" : "row",
        flexWrap: "wrap",
      }}>
        {roster.map(p => (
          <div key={p.id} style={{
            display: "flex", alignItems: "center", gap: 8,
            flexDirection: side === "away" ? "row-reverse" : "row",
            padding: "4px 10px 4px 4px",
            background: "var(--bg-base)",
            borderRadius: 999,
            border: "1px solid var(--border-soft)",
          }}
          title={`${p.gamer} (${p.real}) · ${p.main}`}>
            <Avatar src={p.avatar} name={p.gamer} size={28}
              ring={p.role === "Captain" ? accent : null}
              style={{ marginRight: side === "away" ? 0 : 0, marginLeft: side === "away" ? 0 : 0 }} />
            <div style={{ display: "flex", flexDirection: "column", textAlign: side === "away" ? "right" : "left" }}>
              <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.1 }}>
                {p.gamer}
                {p.role === "Captain" && <IconStar size={9} style={{ marginLeft: 4, color: accent, verticalAlign: "1px" }} />}
              </div>
              <div style={{ fontSize: 10, color: "var(--text-muted)", lineHeight: 1.2 }}>{p.main}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

window.RosterStrip = RosterStrip;