// STADIUM STYLES — 4 total variations (classic + 3 new). // All take the same props as BookingStadium and render the seat-map // portion differently. They're drop-in replacements for the // StadiumSeats() visualization. // --------------------------------------------------------------- // CURVED — amphitheater arcs; fewer seats up top, more down bottom. // --------------------------------------------------------------- function StadiumCurved({ total, taken, onPick, mySeatIdx }) { // 5 curved rows, counts chosen so they sum to ~total (60) const rows = [8, 10, 12, 14, 16]; // = 60 const rowOffsets = rows.reduce((acc,c,i) => [...acc, (acc[i-1]||0) + (i>0?rows[i-1]:0)], []); const flatIdx = (r, s) => rowOffsets[r] + s; // Deterministic scattered pattern const isTaken = (idx) => { if (idx === mySeatIdx) return false; const h = ((idx * 2654435761) >>> 0) % total; return h < taken; }; return (
{/* Stage (pulsing orb) */}
← STAGE · Apex Live →
{/* Rows */}
{rows.map((count, rIdx) => { // Curve: scale row width const widthPct = 55 + rIdx * 9; // 55 → 91 return (
{Array.from({length:count}).map((_, sIdx) => { const idx = flatIdx(rIdx, sIdx); const filled = isTaken(idx); const isMine = idx === mySeatIdx; return ( ); })}
); })}
); } // --------------------------------------------------------------- // ZOOM — gallery grid: each seat is a webcam-like tile // --------------------------------------------------------------- function StadiumZoom({ total, taken, onPick, mySeatIdx }) { // A few realistic avatars / initials const INITIALS = ['JM','SA','TK','RP','DN','KL','AB','MH','CJ','EV','NW','PS','LR','GC','QT','BD','OX','HF','UY','WI']; const TILE_H = 48; const isTaken = (i) => { if (i === mySeatIdx) return false; const h = ((i * 2654435761) >>> 0) % total; return h < taken; }; return (
{/* Zoom top bar */}
LIVE Apex · The Live Walkthrough
{taken} waiting · {total - taken} open
{/* Gallery grid */}
{Array.from({length: total}).map((_, i) => { const filled = isTaken(i); const isMine = i === mySeatIdx; const init = INITIALS[i % INITIALS.length]; const hue = (i * 37) % 360; return ( ); })}
Tap an open tile to claim your spot in the room.
); } // --------------------------------------------------------------- // AUDITORIUM — stylized side-view cross-section (SVG) // --------------------------------------------------------------- function StadiumAuditorium({ total, taken, onPick, mySeatIdx }) { // 6 tiered rows; seats rendered as little silhouettes. const rows = [6, 8, 10, 12, 12, 12]; // = 60 const rowOffsets = rows.reduce((acc,c,i) => [...acc, (acc[i-1]||0) + (i>0?rows[i-1]:0)], []); const flatIdx = (r, s) => rowOffsets[r] + s; const isTaken = (idx) => { if (idx === mySeatIdx) return false; const h = ((idx * 2654435761) >>> 0) % total; return h < taken; }; return (
{/* Ambient fog */}
{/* Big screen at top */}
{/* Scan lines */}
Apex · On screen
{/* Rows — tiered (each row pushed further back, slightly smaller) */}
{rows.map((count, rIdx) => { const scale = 1 - rIdx * 0.03; // slight shrink each row back return (
{Array.from({length:count}).map((_, sIdx) => { const idx = flatIdx(rIdx, sIdx); const filled = isTaken(idx); const isMine = idx === mySeatIdx; return ( ); })}
); })}
{/* Floor strip */}
{taken} seated {total - taken} open seats →
); } // Router — replaces StadiumSeats based on tweaks.stadiumStyle function StadiumSwitcher(props) { const { tweaks } = useApp(); const style = tweaks.stadiumStyle || 'classic'; if (style === 'curved') return ; if (style === 'zoom') return ; if (style === 'auditorium') return ; return ; } Object.assign(window, { StadiumCurved, StadiumZoom, StadiumAuditorium, StadiumSwitcher });