// Start menu — Rampage-style title rendered inside a 3D arcade cabinet, flanked by other cabs. const { renderOptionsButton } = require("lib/ui-options-button.js"); const { renderOptionsModal } = require("lib/ui-options-modal.js"); const { renderHowToButton } = require("lib/ui-how-to-button.js"); const { renderHowToModal } = require("lib/ui-how-to-modal.js"); const { renderChangelogButton } = require("lib/ui-changelog-button.js"); const { renderChangelogModal } = require("lib/ui-changelog-modal.js"); const { renderMoreGamesButton } = require("lib/ui-more-games-button.js"); const { renderMenuButton } = require("lib/ui-menu-button.js"); const { renderPlayerHud, renderBossHpBar } = require("lib/ui-player-hud.js"); const { renderDamageVignette, renderKillcamOverlay } = require("lib/death-killcam.js"); const { renderChyron } = require("lib/ui-chyron.js"); const { renderNarrativeTitles } = require("lib/ui-narrative-titles.js"); const { renderEndScreen } = require("lib/ui-end-screen.js"); const { collectStats } = require("lib/run-stats.js"); const { renderMiniKaijuHud } = require("lib/ui-mini-kaiju-hud.js"); const { renderDevPanel } = require("lib/ui-dev-panel.js"); const { renderKaijuSelect } = require("lib/ui-kaiju-select.js"); const { renderBiomePicker } = require("lib/ui-biome-picker.js"); const { renderBootIntro: renderBootIntroV2 } = require("lib/ui-boot-intro.js"); const { renderAbilityPicker } = require("lib/ui-ability-picker.js"); const { renderDevTome } = require("lib/ui-dev-tome.js"); const { renderAbilitiesDev } = require("lib/ui-abilities-dev.js"); const MUSIC_TRACKS = require("lib/data/music-tracks.json").tracks; function safe(fn) { try { return fn(); } catch { return ""; } } function getMusicState(localPlayer) { // Music behavior rides on the player entity now — read straight from local state. const s = localPlayer?.state || {}; return { trackIndex: typeof s.trackIndex === "number" ? s.trackIndex : 0, musicVolume: typeof s.musicVolume === "number" ? s.musicVolume : 0.5, sfxVolume: typeof s.sfxVolume === "number" ? s.sfxVolume : 1, playState: typeof s.playState === "string" ? s.playState : "stopped", progress: typeof s.progress === "number" ? s.progress : 0, tracks: MUSIC_TRACKS, }; } function renderOverlays(localPlayer, world) { const optionsOpen = !!localPlayer?.state?.optionsOpen; const gameStarted = !!localPlayer?.state?.gameStarted; const music = getMusicState(localPlayer); const modal = optionsOpen ? safe(() => renderOptionsModal({ musicVolume: music.musicVolume, sfxVolume: music.sfxVolume, trackIndex: music.trackIndex, tracks: music.tracks, playState: music.playState, progress: music.progress, invertY: !!localPlayer?.state?.invertY, })) : ""; // HOW TO PLAY modal — IBM-CRT terminal manual. const howToOpen = !!localPlayer?.state?.howToOpen; const howToCat = localPlayer?.state?.howToCategory || 'basics'; const howToModal = howToOpen ? safe(() => renderHowToModal({ activeCategory: howToCat })) : ""; // CHANGELOG modal — same CRT terminal styling as HOW TO PLAY. const changelogOpen = !!localPlayer?.state?.changelogOpen; const changelogDay = localPlayer?.state?.changelogDay || 'today'; const changelogModal = changelogOpen ? safe(() => renderChangelogModal({ activeDate: changelogDay })) : ""; // WAVE 5.4 — run-over flag suppresses HUD chrome so the end screen owns the // frame. Killcam + victorycam camera still show through, but HP bar, boss // bar, dev panel, compass, banners, etc. go silent. const runOver = localPlayer?.state?.runOver || null; const hudOn = gameStarted && !runOver; // Player HUD (top-left) — only after the kaiju is loose; sits under SAVI's Multiplayer button. const playerHud = hudOn ? safe(() => renderPlayerHud(localPlayer.state)) : ""; const miniKaijuHud = hudOn ? safe(() => renderMiniKaijuHud(world, localPlayer)) : ""; // Dev tuning panel — anchored right-middle, only after the kaiju is loose. // v1131 — pass world for live building count const devPanel = hudOn ? safe(() => renderDevPanel(localPlayer.state, world)) : ""; // MENU button only matters once the player is in the game — hide it on the attract screen. const menuBtn = hudOn ? safe(() => renderMenuButton()) : ""; // PLASMA BEAM aim reticle — follows the mouse cursor (NDC streamed from // player.js while beam phase is charging/firing). Mouse-look stays on; the // reticle just tracks the pointer so the player can see where they're aiming. const beamPhase = localPlayer?.state?.beamPhase || "idle"; // FPS-style camera: beam endpoint = camera-forward through screen center, // so the beam reticle locks to 0,0 NDC (dead center) alongside the aim reticle. const beamReticle = (hudOn && (beamPhase === "charging" || beamPhase === "firing")) ? safe(() => renderBeamReticle(beamPhase, localPlayer?.state?.beamPhaseT || 0, 0, 0)) : ""; // Compass — sits above the right-middle dev panel. Reads liveYaw (CCW degrees // from -Z forward) and converts to compass bearing (CW from N=-Z). const compass = hudOn ? safe(() => renderCompass(localPlayer?.state?.liveYaw ?? 0)) : ""; const bodyCount = hudOn ? safe(() => renderBodyCount(localPlayer?.state?.displayedBodyCount ?? localPlayer?.state?.bodyCount ?? 0)) : ""; // RAGE banner — big pulsing typography across the top middle during enraged phase. const rageT_ = localPlayer?.state?.rageT ?? 0; const rageBanner = (hudOn && rageT_ > 0) ? safe(() => renderRageBanner(rageT_)) : ""; // WAVE 5.1 — "WEAPON DEPLOYED — APPROACHING" banner. threat-director writes // state.threat.bannerT once stage 5 fires; render while within 6s window. let weaponBannerT = -1; try { const td = (world?.query?.({ tags: ["threat-director"], radius: 1e9 }) || [])[0]; const stage = td?.state?.threat?.stage || 0; const bt = td?.state?.threat?.bannerT; if (stage >= 5 && typeof bt === "number" && bt >= 0 && bt <= 6.0) weaponBannerT = bt; } catch (_) {} const weaponBanner = (hudOn && weaponBannerT >= 0) ? safe(() => renderWeaponBanner(weaponBannerT)) : ""; // WAVE 5.3 — BOSS HP bar, top-center, only while boss exists & not dead. const bossHpBar = hudOn ? safe(() => renderBossHpBar(world, localPlayer)) : ""; // Permanent aim reticle — pinned near screen center with a 10° down / 3° left angular offset. const aimReticle = hudOn ? safe(() => renderAimReticle()) : ""; // Level-up ability picker — sits on top of everything when pending > 0. const pendingPicks = Math.max(0, localPlayer?.state?.pendingAbilityPicks || 0); const abilityChoices = Array.isArray(localPlayer?.state?.abilityChoices) ? localPlayer.state.abilityChoices : []; // 📖 DEV TOME — launcher (bottom-left) + panel layer. Rendered every UI // tick regardless of gameStarted so the attract screen can edit notes too. const devTomeLayer = safe(() => renderDevTome(localPlayer, world)); // ⚡ ABILITIES DEV — launcher + modal slotted between Player HUD and DEV TOME. // Only shown once the kaiju is loose — no point toggling abilities at the attract screen. const abilitiesDevLayer = hudOn ? safe(() => renderAbilitiesDev(localPlayer, world)) : ""; // WAVE 5.4 — End screen (Defeat/Victory). Mounts on top of killcam/victorycam. // collectStats is a pure read from world state + player state; renderEndScreen // returns '' when runOver is null so the mount point stays cheap. const endScreenStats = runOver ? safe(() => collectStats(world, localPlayer)) || {} : null; const endScreen = runOver ? safe(() => renderEndScreen(localPlayer, endScreenStats)) : ""; // WAVE 3.4 — red-edge damage vignette (hit flash + LIMP pulse) + killcam overlay (black bars + DEFEATED). const damageVignette = gameStarted ? safe(() => renderDamageVignette(localPlayer?.state)) : ""; const killcamOverlay = gameStarted ? safe(() => renderKillcamOverlay(localPlayer?.state)) : ""; const picker = (gameStarted && pendingPicks > 0 && abilityChoices.length > 0) ? safe(() => renderAbilityPicker({ choices: abilityChoices, pending: pendingPicks, level: localPlayer?.state?.level || 1, })) : ""; // WAVE 6.2 — Chyron / News Ticker. Bottom-screen rolling cable-news strip. // Hidden when: // - selectingKaiju (kaiju-select picker owns the screen) // - runOver (end screens own the floor) // - ragePhase === 'cinematic' (rage build-up cinematic — clean shot) // - alive === false (death killcam owns the screen) // Also gated on gameStarted so the attract screen stays clean. // NOTE for Wave 6.4 (narrative title cards wisp): chyron mount sits at the // marker below — your title cards should mount ABOVE the chyron (lower-third // area is yours; bottom 36px strip is mine). const ps_ = localPlayer?.state || {}; const chyronHidden = !gameStarted || !!ps_.selectingKaiju || !!ps_.runOver || ps_.ragePhase === 'cinematic' || ps_.alive === false; const chyron = chyronHidden ? "" : safe(() => renderChyron({ world })); // WAVE 6.4 — Narrative Title Cards. Same hidden-state guard as the chyron // (selectingKaiju / runOver / rage cinematic / death killcam / not started). // Source of truth: threat-director's narrativeCurrent / narrativeQueue + // tNow. The module computes its own opacity from elapsed time and returns // '' when no card is live or the key is unknown. const narrativeTitles = chyronHidden ? "" : safe(() => renderNarrativeTitles({ world })); // WAVE 7.1 BIOME PICKER MOUNT — three-button city selector pinned above // the kaiju select cards (top 8% of screen). Visible only while // selectingKaiju === true; hidden otherwise. z-index 9996: above chyron // (9994) and boss bar (9993), below modals (10001+) and end screen. // Reads selectedBiome from localPlayer.state; defaults to 'midtown'. const biomePickerHtml = (!gameStarted && !!ps_.selectingKaiju) ? safe(() => renderBiomePicker({ selectedBiome: ps_.selectedBiome || 'midtown' })) : ""; return `

${playerHud}${gameStarted ? renderControlsHelp(localPlayer?.state?.controlsHelpT ?? 0) : ""}${miniKaijuHud}

${gameStarted ? renderBetaMarquee() : ""}

${gameStarted ? renderGoalPill() : ""} ${bodyCount}

${compass}

${safe(() => renderMoreGamesButton())} ${safe(() => renderChangelogButton())} ${safe(() => renderHowToButton())}

${menuBtn} ${safe(() => renderOptionsButton())}

${modal}

${howToModal}

${changelogModal}

${aimReticle}

${biomePickerHtml}

${narrativeTitles}

${chyron}

${rageBanner}

${weaponBanner}

${bossHpBar}

${beamReticle}

${gameStarted ? safe(() => renderDamageVignette(localPlayer.state)) : ""}

${gameStarted ? safe(() => renderKillcamOverlay(localPlayer.state)) : ""}

${endScreen} ${devTomeLayer} ${picker} `; } // GOAL pill — sits left of the body count, reminding the player what the run is. function renderBetaMarquee() { const MSG = "BETA MODE: TANKS, HELIS & BLDG DETAILS TOGGLED OFF FOR PERFORMANCE"; // Build chasing bulbs along the wooden frame. let topBulbs = ""; const bulbCount = 32; for (let b = 0; b < bulbCount; b++) { const leftPct = ((b / (bulbCount - 1)) * 100).toFixed(2); const delay = (b * 0.10).toFixed(2); topBulbs += ''; } const bottomBulbs = topBulbs; // Single ticker tile, separator dot, repeated 4× for seamless scroll. const tile = '' + '' + MSG + '' + '●' + ''; const tickerHtml = tile + tile + tile + tile; return `

${topBulbs}

${tickerHtml}

${bottomBulbs}

`; } function renderControlsHelp(t) { // Fade window: full opacity until 15s, fades out across 1s, gone after 16s. const tt = typeof t === "number" ? t : 0; if (tt >= 16) return ""; const opacity = tt < 15 ? 1 : Math.max(0, 1 - (tt - 15)); const neon = "oklch(0.92 0.32 145)"; const glow = "0 0 6px oklch(0.92 0.32 145 / 0.9), 0 0 14px oklch(0.85 0.30 145 / 0.7), 0 0 22px oklch(0.78 0.28 145 / 0.5)"; const lines = [ "LEFT CLICK = PUNCH", "RIGHT CLICK = POWER STOMP (hold to charge)", "E = CLIMB BUILDINGS", "1 = PLASMA BEAM", "2 = TRI-NOVA", "3 = TRIGGER RAGE", ]; const rows = lines.map(t => `

${t}

`).join(""); return `

${rows}

`; } function renderGoalPill() { const bgColor = "oklch(0.16 0.08 25 / 0.85)"; const borderColor = "oklch(0.55 0.22 25 / 0.95)"; const labelColor = "oklch(0.78 0.18 25 / 1)"; const valColor = "oklch(0.95 0.22 30 / 1)"; return `

GOAL

KILL THE ENTIRE CITY

SERIOUSLY JUST KILL EVERYTHING

`; } // BODY COUNT — rolling tally of souls in everything you've destroyed. Sits // above the compass on the right column. Reads displayedBodyCount which lerps // toward bodyCount on the player; that lerp lives in player.js update(). function renderBodyCount(n) { const value = Math.max(0, Math.floor(n || 0)); const text = value.toLocaleString('en-US'); const bgColor = "oklch(0.16 0.08 25 / 0.85)"; const borderColor = "oklch(0.55 0.22 25 / 0.95)"; const labelColor = "oklch(0.78 0.18 25 / 1)"; const numColor = "oklch(0.95 0.22 30 / 1)"; return `

BODY COUNT

${text}

`; } // Compass dial — N at -Z (yaw 0), E at +X (yaw 270), S at +Z (yaw 180), // W at -X (yaw 90). Bearing (CW from N) = (-yaw mod 360). Rotate the inner // dial by -bearing so the facing direction stays at the top. function renderCompass(yawDeg) { const bearing = ((-yawDeg) % 360 + 360) % 360; const dialRot = -bearing; const cardinals = [ { label: "N", angle: 0, color: "oklch(0.78 0.20 30 / 1)" }, { label: "E", angle: 90, color: "oklch(0.92 0.13 105 / 1)" }, { label: "S", angle: 180, color: "oklch(0.92 0.13 105 / 1)" }, { label: "W", angle: 270, color: "oklch(0.92 0.13 105 / 1)" }, ]; const labelHtml = cardinals.map(c => { // Place label on the dial at its angle: position on a circle of radius 38px // from the center, then counter-rotate the label so the letter stays upright // relative to the screen (we'll add bearing back to keep it readable). return `

${c.label}

`; }).join(""); const bgColor = "oklch(0.18 0.04 280 / 0.78)"; const borderColor = "oklch(0.55 0.16 165 / 0.9)"; const tickColor = "oklch(0.55 0.16 165 / 0.7)"; // 12 minor ticks every 30°. let ticks = ""; for (let i = 0; i < 12; i++) { const major = i % 3 === 0; ticks += `

`; } return `

${ticks} ${labelHtml}

${Math.round(bearing)}°

`; } // Plasma beam aim reticle — follows the mouse cursor. ndcX/ndcY are in // [-1, 1] with +X = right, +Y = up (engine convention). We map to screen // percent (top is 0%, so flip Y). // Permanent aim reticle — pinned to the camera view with an angular offset // of 10° down and 3° left from screen center. Conversion assumes the engine's // default vertical FOV (~60°) and a 16:9 viewport. If the FOV changes, recompute // LEFT_PCT/TOP_PCT (or read FOV from the camera and compute live). function renderAimReticle() { // tan(10°)/tan(30°) * 50% = 15.27%, tan(3°)/(tan(30°)*16/9) * 50% = 2.55%. // FPS-style camera: beam fires through screen center, so reticle pins there too. var leftPct = 50; var topPct = 50; var ring = "#fafafa"; var glow = "#fde68a"; return `

`; } function renderRageBanner(rageT) { // rageT counts down from RAGE_ENRAGED_DUR (12) to 0. Big pulsing RAGE // typography across the top middle, with damage / cooldown buff readout. const t = Math.max(0, rageT); const RAGE_DUR = 12; const elapsed = RAGE_DUR - t; // Multi-frequency pulse so the letters jitter alive. const pulse1 = 0.5 + 0.5 * Math.sin(elapsed * 9.0); const pulse2 = 0.5 + 0.5 * Math.sin(elapsed * 14.0 + 1.3); const pulse3 = 0.5 + 0.5 * Math.sin(elapsed * 5.0 + 2.7); const heavy = (pulse1 + pulse2) * 0.5; const fontSize = (84 + heavy * 18).toFixed(1); const letterSpacing = (8 + pulse2 * 6).toFixed(1); // Color shifts red ↔ orange. const hue = (28 + pulse3 * 12).toFixed(0); const inner = `oklch(0.95 0.28 ${hue})`; const outerGlow = `oklch(0.78 0.32 ${hue} / ${(0.85 + pulse1 * 0.15).toFixed(2)})`; const deepGlow = `oklch(0.62 0.30 ${hue} / ${(0.55 + pulse2 * 0.35).toFixed(2)})`; const wildGlow = `oklch(0.45 0.22 ${hue} / ${(0.4 + pulse3 * 0.3).toFixed(2)})`; // Per-letter mild offset rotation. const letters = ['R', 'A', 'G', 'E']; const letterSpans = letters.map((ch, i) => { const wob = Math.sin(elapsed * 7 + i * 1.4); const rot = (wob * 4).toFixed(1); const ty = (Math.sin(elapsed * 6 + i * 0.9) * 4).toFixed(1); return `${ch}`; }).join(''); // Buff readout — smaller, sits below the big word. const subPulse = 0.5 + 0.5 * Math.sin(elapsed * 4); const timeLeft = t.toFixed(1); return `

${letterSpans}

⚡ DMG ×2  ·  SPEED ×1.5  ·  COOLDOWNS 200% FASTER  ·  ${timeLeft}s ⚡

`; } function renderBeamReticle(phase, phaseT, ndcX, ndcY) { const charging = phase === "charging"; const ringColor = charging ? "#67e8f9" : "#bef264"; const dotColor = charging ? "#a5f3fc" : "#ecfccb"; const label = charging ? "CHARGING" : "PLASMA BEAM"; const pulse = charging ? `animation: beam-reticle-charge 0.6s ease-in-out infinite;` : `animation: beam-reticle-fire 0.15s ease-in-out infinite;`; const leftPct = ((ndcX + 1) * 0.5) * 100; const topPct = ((1 - ndcY) * 0.5) * 100; return `

${label}

`; } function renderStartMenu(localPlayer, world) { const SLUG = "moodboard-skyline-wreckers"; const kaijuLeft = `/cdn/${SLUG}/pixel-sceneobj-kaiju-green-lizard-godzilla-pose-mouth-open-roaring-pixel-art.png`; const kaijuRight = `/cdn/${SLUG}/pixel-sceneobj-kaiju-grey-gorilla-king-kong-fist-raised-punching-pixel-art.png`; const swatter = `/cdn/${SLUG}/pixel-tileobj-mini-kaiju-claw-raised-attack-pose-pixel-art.png`; const heli = `/cdn/${SLUG}/pixel-tileobj-helicopter-side-view-army-green-pixel-art.png`; const styles = ` `; // Reusable arcade-style 2D joystick (illusion of depth via ellipse base + lit ball) const joystickStation = (highlight, mid, shadow) => `

`; // Reusable arcade button — domed circle, lit from above, with a tilted highlight for perspective const arcadeButton = (highlight, mid, shadow, anim) => `

`; // Animated attract-mode screen content for each side cabinet style. const attractScreen = (pattern, color) => { if (pattern === 'ship') { // ===== GALAXY RAIDERS — Galaga / Space Invaders attract ===== // Three parallax star layers const starsSmall = [[8,15],[22,40],[38,8],[55,52],[71,22],[86,46],[14,68],[44,72],[63,80],[80,12],[28,88],[91,72]] .map(([l,delay], i) => `

`).join(''); const starsLarge = [[18,0],[48,0.5],[78,1.1],[33,1.7],[64,2.3]] .map(([l,delay], i) => `

`).join(''); // Invader sprite: built from 5 stacked rows of micro-pixels (3px each). Animated legs. const invader = (c, glow) => `

`; // 3 rows × 5 invaders, marching back and forth as a formation const row = (c, glow, gap = 6) => { let cells = ''; for (let i = 0; i < 5; i++) { cells += `

${invader(c, glow)}

`; } return `

${cells}

`; }; const formation = `

${row('#a78bfa', '#a78bfa')} ${row('#f472b6', '#f472b6')} ${row('#22d3ee', '#22d3ee')}

`; // Bonus UFO crossing the top very occasionally const ufo = `

`; // Player ship: a small triangle/rocket built from divs, sliding L/R, firing const playerShip = `

`; // Enemy bombs falling from the formation const bombs = [ [22, 0, 2.2], [48, 0.8, 2.5], [72, 1.6, 2.1], [34, 2.3, 2.6], [82, 3.1, 2.3], ].map(([l, d, dur]) => `

` ).join(''); // Bunkers — chipped at the bottom corners const bunker = (lr) => `

`; // Explosion flashing in the formation const explosion = `

`; // HUD strip — score + hi-score, blinking 1UP const hud = `

1UP
00${(450 + 0).toString().padStart(3,'0')}
HI 12000

`; return `

${starsSmall} ${starsLarge} ${hud} ${ufo} ${formation} ${explosion} ${bombs} ${bunker('l')} ${bunker('r')} ${playerShip}

`; } if (pattern === 'fighter') { // ===== PIXEL FIGHTER — Street Fighter style attract ===== // P1 (left, red) throws first, P2 (right, blue) reels back; P2 punches, P1 reels. // Whole loop: 4s. // Crowd silhouette (rows of tiny heads) const crowd = (() => { let out = ''; for (let r = 0; r < 2; r++) { const top = 28 + r * 3; for (let c = 0; c < 18; c++) { const l = c * 5.5 + (r % 2 ? 2 : 0); const shade = ['#1a0a14','#2a1018','#1a0a14','#221220'][(c + r) % 4]; out += `

`; } } return out; })(); // A single fighter (head/torso/arms/legs) — colors customizable const fighter = (side, skin, gi, trim, faceL, faceR) => { const isL = side === 'l'; // arms drawn from the shoulder outward; punch arm gets scaleX expansion const punchAnim = isL ? 'attract-punch-l' : 'attract-punch-r'; const headAnim = isL ? 'attract-head-react-l' : 'attract-head-react-r'; return `

`; }; // Health bars + names const hud = `

RYUP1
99
P2KEN

`; // VS banner (subtle, behind action) const vs = `

VS

`; // Hit sparks const hitSparkR = `

`; const hitSparkL = `

`; // Arena floor with depth gradient + horizon line const arena = `

`; return ` ${arena} ${crowd} ${vs} ${hud}

${fighter('l', '#fcd5b4', '#ef4444', '#7c1d1d', 3, 7)}

${fighter('r', '#fcd5b4', '#3b82f6', '#1e3a8a', 3, 7)}

${hitSparkR} ${hitSparkL}

`; } if (pattern === 'racer') { return `

`; } if (pattern === 'zombie') { return `

`; } // 'grid' fallback return `

`; }; // Title — tuned to fit inside the cabinet screen comfortably const titleStyle = ` font-family: 'Geist Pixel Square', monospace; font-size: clamp(50px, 7.2vw, 108px); font-weight: 900; letter-spacing: 8px; line-height: 1; padding: 0.15em 0; background-image: repeating-linear-gradient(180deg, transparent 0 12px, rgba(0,0,0,0.5) 12px 14px), repeating-linear-gradient(90deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 10px), radial-gradient(circle at 50% 50%, #fef08a 35%, transparent 36%), linear-gradient(180deg, #fbbf24 0%, #f97316 60%, #b45309 100%); background-size: auto, auto, 10px 14px, 100% 100%; background-position: 0 0, 0 0, 3px 3px, 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 0 0 #7c0a0a) drop-shadow(4px 0 0 #7c0a0a) drop-shadow(6px 0 0 #450a0a) drop-shadow(0 4px 0 #450a0a) drop-shadow(6px 6px 0 #1a0000) drop-shadow(0 0 18px rgba(255,80,20,0.4)); `; const chunkHoles = [ { l: "14%", t: "35%", w: 18, h: 22, d: 0 }, { l: "32%", t: "58%", w: 22, h: 16, d: 0.05 }, { l: "58%", t: "28%", w: 20, h: 22, d: 0.05 }, { l: "78%", t: "55%", w: 18, h: 20, d: 0.08 }, ].map(c => `

` ).join(''); const debrisPieces = [ { l: "20%", t: "40%", c: "#f97316", k: 1 }, { l: "55%", t: "30%", c: "#fbbf24", k: 2 }, { l: "32%", t: "55%", c: "#b45309", k: 3 }, { l: "70%", t: "45%", c: "#f97316", k: 4 }, { l: "48%", t: "25%", c: "#fef08a", k: 5 }, { l: "82%", t: "50%", c: "#b45309", k: 2 }, ].map(d => `

`).join(''); const sparks = `

`; const starsRows = []; for (let row = 0; row < 5; row++) { for (let i = 0; i < 18; i++) { const x = (i * 5.7 + row * 2.3) % 100; const y = (row * 10 + (i % 3) * 1.5) % 60; const d = ((i + row) % 9) * 0.4; const sz = (i + row) % 3 === 0 ? 3 : 2; starsRows.push(`

`); } } const explosion = `

${[ { x: -60, y: -50, c: "#fbbf24", d: 0 }, { x: 70, y: -40, c: "#f97316", d: 0.05 }, { x: -50, y: 50, c: "#fef08a", d: 0 }, { x: 60, y: 60, c: "#b91c1c", d: 0.1 }, { x: 0, y: -80, c: "#fbbf24", d: 0.05 }, { x: -90, y: 20, c: "#f97316", d: 0 }, ].map(e => `

`).join('')}

`; const bgHelis = `

`; // ============================================================ // THE GAME SCREEN (CRT contents) // ============================================================ const gameScreen = `

${starsRows.join('')}

${bgHelis}

KAIJU MAYHEM

${sparks} ${chunkHoles} ${debrisPieces}

${explosion}

          ▼  PRESS 1P OR 2P START  ▼
        

HI-SCORE 1,985,000

CREDITS 0

1 PLAYER

ATTRACT MODE

`; // ============================================================ // SIDE CABINET (flanking) — simplified silhouette w/ marquee glow // ============================================================ const flankCab = (side, marqueeText, screenColor, marqueeColor, edgeOffset = '-2%', opacity = 0.85, widthPct = 22, pattern = 'grid') => { const isLeft = side === 'left'; const tiltY = isLeft ? 42 : -42; const offset = isLeft ? `left: ${edgeOffset};` : `right: ${edgeOffset};`; const blurAmt = (1 - opacity) * 2.2; return `

${marqueeText}

${attractScreen(pattern, marqueeColor)}

${joystickStation(marqueeColor, marqueeColor, '#1a0010')}

25¢

`; }; // ============================================================ // BACK-ROW CABINET — small, dim, set further down the arcade wall // ============================================================ const backCab = (side, edgeOffset, tiltY, opacity, marqueeText, screenColor, marqueeColor) => { const isLeft = side === 'left'; const ty = isLeft ? tiltY : -tiltY; const offset = isLeft ? `left: ${edgeOffset};` : `right: ${edgeOffset};`; // Smaller and shifted upward (further away reads slightly higher in frame) const scale = 0.55 + (1 - opacity) * 0.0; // base scale, refined via opacity coupling const sizePct = Math.round(14 + opacity * 6); // 17%-20% width return `

${marqueeText}

`; }; // ============================================================ // MAIN CABINET — 3D walked-up-to view // ============================================================ return ` ${styles}

      ${backCab('left',  '4%',  72, 0.35, 'NEON STRIKER', '#0a1a14', '#22c55e')}
      ${backCab('left',  '14%', 70, 0.45, 'DRAGON FIST',  '#1a0a08', '#f97316')}
      ${backCab('left',  '24%', 68, 0.6,  'RETRO RACER',  '#0a0a2a', '#fbbf24')}
      ${backCab('right', '4%',  72, 0.35, 'STAR BLITZ',   '#0a0a2a', '#a78bfa')}
      ${backCab('right', '14%', 70, 0.45, 'ZOMBIE LANE',  '#0a1a0a', '#84cc16')}
      ${backCab('right', '24%', 68, 0.6,  'CYBER PUNK',   '#1a0a1a', '#ec4899')}

      ${flankCab('left',  'NEON STRIKER',   '#0a1a14', '#22c55e', '-22%', 0.4,  20, 'grid')}
      ${flankCab('left',  'DRAGON FIST',    '#1a0a08', '#f97316', '-14%', 0.55, 21, 'fighter')}
      ${flankCab('left',  'RETRO RACER',    '#0a0a2a', '#fbbf24', '-6%',  0.75, 22, 'racer')}
      ${flankCab('left',  'GALAXY RAIDERS', '#1a0a2a', '#f472b6', '2%',   0.95, 22, 'ship')}

      ${flankCab('right', 'STAR BLITZ',     '#0a0a2a', '#a78bfa', '-22%', 0.4,  20, 'ship')}
      ${flankCab('right', 'ZOMBIE LANE',    '#0a1a0a', '#84cc16', '-14%', 0.55, 21, 'zombie')}
      ${flankCab('right', 'CYBER PUNK',     '#1a0a1a', '#ec4899', '-6%',  0.75, 22, 'grid')}
      ${flankCab('right', 'PIXEL FIGHTER',  '#0a1a2a', '#06b6d4', '2%',   0.95, 22, 'fighter')}

                ★  KAIJU  MAYHEM  ★
              
🦖
🦍

              ${gameScreen}
            
                ${joystickStation('#ff5060', '#b91c1c', '#5a0010')}
                
                    ${arcadeButton('#ff5060', '#dc2626', '#4a0010', 'btn-press-1')}
                    ${arcadeButton('#fff185', '#fbbf24', '#5a4a00', 'btn-press-2')}
                  
P1

                ${joystickStation('#93c5fd', '#3b82f6', '#1e3a8a')}
                
                    ${arcadeButton('#86efac', '#22c55e', '#003a14', 'btn-press-3')}
                    ${arcadeButton('#f0abfc', '#a855f7', '#2a004a', 'btn-press-4')}
                  
P2
★ MIDWAY ★

            INSERT COIN ▶ 25¢

`; } // WAVE 7.4 — legacy SPAWN-splash renderBootIntro was removed in favor of // lib/ui-boot-intro.js (the new title-screen module). The legacy state field // `bootT` is no longer read by UI; player.js still ticks it for now but it's // dead. The new intro is driven by state.bootIntro / state.bootIntroT. // City-loading curtain was removed — the new city-gen clears + rebuilds in a // single tick, so there's no multi-second window worth masking. Any holdover // 'busy_regen' / 'busy_clear' status from city-generator stays out of the UI. export default function (localPlayer, world) { const gameStarted = !!localPlayer?.state?.gameStarted; const selectingKaiju = !!localPlayer?.state?.selectingKaiju; // Three exclusive top-level screens: // 1) arcade attract menu — when neither flag is set // 2) kaiju select — after INSERT COIN, before a kaiju is chosen // 3) in-game HUD (overlays) — once gameStarted flips on let start = ""; if (!gameStarted) { if (selectingKaiju) start = safe(() => renderKaijuSelect(localPlayer, { runStats: localPlayer?.state?.runStats || null })); else start = safe(() => renderStartMenu(localPlayer, world)); } const overlays = safe(() => renderOverlays(localPlayer, world)); // WAVE 7.4 — Title Screen / Boot Opening. Mounts at z 9999 (top of stack, // above narrative titles 9998 and killcam 9999). Returns '' unless // localPlayer.state.bootIntro is 'pending' or 'playing'. Click anywhere // on the catcher fires sendAction('bootIntroSkip'). const intro = safe(() => renderBootIntroV2(localPlayer?.state)); return start + overlays + intro; } // === WAVE 5.1 — WEAPON DEPLOYED banner ==================================== // Sits top-center, smaller + higher than the killcam DEFEATED title. Heavy // red Press Start 2P. Fade in over 0.35s, hold, fade out across last 0.6s. // bannerT ∈ [0, 6.0] from threat-director. function renderWeaponBanner(bannerT) { const t = Math.max(0, Math.min(6.0, bannerT)); const fadeIn = Math.max(0, Math.min(1, t / 0.35)); const fadeOut = t > 5.4 ? Math.max(0, 1 - (t - 5.4) / 0.6) : 1; const alpha = fadeIn * fadeOut; if (alpha <= 0.001) return ""; // Pulse the title every 0.9s so it reads as a live warning klaxon. const pulse = 1 + 0.04 * Math.sin(t * 7.0); const scale = (0.94 + 0.06 * fadeIn) * pulse; // Slide down from above on entry. const slideY = (1 - fadeIn) * -18; const titleColor = "oklch(0.92 0.30 25)"; const subColor = "oklch(0.78 0.18 25)"; const titleGlow = [ "0 0 12px oklch(0.7 0.30 25 / 0.95)", "0 0 28px oklch(0.6 0.27 25 / 0.7)", "0 4px 0 rgba(0,0,0,0.85)", "0 6px 18px rgba(0,0,0,0.85)", ].join(", "); // Pulsing red backdrop bar behind text for weight. const barAlpha = 0.55 * alpha; return `

WEAPON DEPLOYED

— APPROACHING —

`; }

Spawn