// === Bullet Hell Frame UI === // Masks everything outside the arena. Positions computed from arena/ortho constants // so it scales with any resolution. All measurements in vh (ortho height is fixed). const P = require('lib/data/player.json'); const ARENA = require('lib/data/arena.json'); const LEVELS = require('lib/data/levels.json'); const SHOP = require('lib/data/shop.json'); const SPECIALS = require('lib/data/specials.json'); const CHARACTERS = require('lib/data/characters.json'); const { resolve: resolveInv } = require('lib/inventory-stats.js'); const { resolve: resolveChar } = require('lib/char-stats.js'); const { renderParallax } = require('lib/ui-parallax.js'); const { renderPickupPopups } = require('lib/ui-pickup-popups.js'); const ORTHO_SIZE = 12; // must match camera script const VH_PER_WU = 100 / (ORTHO_SIZE * 2); // vh per world unit // Arena screen dimensions (all in vh) const ARENA_H_VH = (ARENA.maxZ - ARENA.minZ) * VH_PER_WU; const ARENA_W_VH = (ARENA.maxX - ARENA.minX) * VH_PER_WU; const VISIBLE_MIN_Z = ARENA.center.z - ORTHO_SIZE; const TOP_VH = (ARENA.minZ - VISIBLE_MIN_Z) * VH_PER_WU; const HALF_W_VH = ARENA_W_VH / 2; // Panel style — textured dark shrine wood with golden warmth const WOOD_TEX = '/cdn/texture-dark-lacquered-wood-grain-japanese-shrine.png'; const PANEL = 'background:oklch(0.10 0.025 45);background-image:url(' + WOOD_TEX + ');background-size:256px 256px;background-blend-mode:overlay;'; const FANTASY_WOOD = '/cdn/texture-fantasy-dark-mahogany-wood-grain-warm.png'; const PANEL_BAR = 'background:oklch(0.16 0.025 35);background-image:url(' + FANTASY_WOOD + ');background-size:300px 300px;background-blend-mode:soft-light;'; const BORDER_COLOR = 'oklch(0.55 0.08 70)'; // Ornate double-border inner line const BORDER_INNER = 'oklch(0.45 0.10 55)'; // Trim line for layered border effect const TRIM_GOLD = 'oklch(0.60 0.16 68)'; // Gold accent for highlights const GOLD = 'oklch(0.75 0.16 75)'; const GOLD_DIM = 'oklch(0.55 0.12 70)'; // Parchment text tones const TEXT_BRIGHT = 'oklch(0.90 0.04 80)'; const TEXT_MID = 'oklch(0.72 0.04 75)'; const TEXT_DIM = 'oklch(0.50 0.04 65)'; // Warm card/item backgrounds const CARD_BG = 'oklch(0.15 0.03 55)'; const CARD_BORDER = 'oklch(0.28 0.06 60)'; function renderLevelTitle(title) { // Bottom of arena: TOP_VH + ARENA_H_VH positions the bottom edge of the arena const bottomOfArena = TOP_VH + ARENA_H_VH; // Place the title just above the arena bottom, centered horizontally return `

${title || ''}

`; } function renderSpecialTitle(title) { // Centered in the arena, slightly above middle — dramatic spell card announcement const centerY = TOP_VH + ARENA_H_VH * 0.35; return `

${title || ''}

`; } export default function(localPlayer, world) { const s = localPlayer.state || {}; const cursorDefault = s.cursorCSS || 'auto'; const cursorHover = s.cursorHoverCSS || cursorDefault; const cursorStyle = ``; const fadeOverlay = s.screenFade ? `

` : ''; const sharedStyles = ``; // === Main Menu === if (s.gamePhase === 'menu') { return cursorStyle + sharedStyles + fadeOverlay + `

            
            LUMINAIRE

            A World Unsung

              Play
            
              Settings

${s.settingsOpen ? `

Settings

Collection Numbers

` : ''} `; } // === Character Select === if (s.gamePhase === 'charSelect') { const charKeys = Object.keys(CHARACTERS); const selId = s.characterId || 'aveline'; const sel = CHARACTERS[selId] || CHARACTERS.aveline; const charStats = resolveChar(selId); const iconRow = charKeys.map(k => { const c = CHARACTERS[k]; const active = k === selId; return `

`; }).join(''); return cursorStyle + sharedStyles + fadeOverlay + `

Back

${sel.name}

${charStats.maxHp} HP

${charStats.moveSpeed || sel.speed} SPD

${charStats.bulletDamage || sel.mainShot?.damage || 10} DMG

${sel.description || ''}

Begin

${iconRow}

`; } // === Cutscene === if (s.gamePhase === 'cutscene' && s.cutsceneVideo) { return cursorStyle + sharedStyles + `

CLICK TO SKIP

`; } const inventory = s.inventory || {}; const cStats = resolveChar(s.characterId); const hp = typeof s.hp === 'number' ? s.hp : cStats.maxHp; const invStats = resolveInv(inventory); const maxHp = cStats.maxHp + invStats.extraLives; const focused = !!s.focused; const alive = s.alive !== false; // Boss health bar let bossBar = ''; const bosses = world.query({ tags: ['boss'], radius: 200 }); if (bosses.length > 0) { const boss = bosses[0]; const bs = boss.state || {}; if (bs.alive !== false && bs.hp > 0) { const bossHp = bs.hp || 0; const bossMaxHp = bs.maxHp || bossHp; const pct = Math.max(0, Math.min(100, (bossHp / bossMaxHp) * 100)); const spellName = bs.currentSpellName || ''; const bossName = bs.bossName || 'Boss'; // Color shifts as HP drops — warm palette const hpHue = pct > 50 ? 65 : pct > 25 ? 35 : 0; const barColor = `oklch(0.6 0.25 ${hpHue})`; const barGlow = `oklch(0.5 0.3 ${hpHue})`; bossBar = `

${bossName}
${spellName}

`; } } // (hearts are built in the sidebar section below) // Death choice overlay — freeze frame with Continue / Give Up const deathChoice = !!s.deathChoice; const penaltyScore = Math.floor((s.score || 0) * 0.5); const penaltyResidue = Math.floor((s.mysticResidue || 0) * 0.3); const deathOverlay = !alive ? deathChoice ? `

DEFEATED
The world holds its breath...
CONTINUE
Lose half your score
Lose 30% residue
(-${penaltyScore.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')} pts · -${penaltyResidue} MR)
GIVE UP
End the level
Keep your score

` : `

DEFEATED

` : ''; // Admin console — warm wood const consoleOpen = !!s.consoleOpen; const consoleLog = Array.isArray(s.consoleLog) ? s.consoleLog : []; const logHtml = consoleLog.map(line => { const isCmd = line.startsWith('> '); return `

${line}

`; }).join(''); const consoleUI = consoleOpen ? `

${logHtml}

        ›

` : ''; // Scoring data const score = s.score || 0; const graze = s.graze || 0; const residue = s.mysticResidue || 0; const specialStock = s.specialStock || 0; const shopOpen = !!s.shopOpen; // Format score with commas const fmtScore = score.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); // Sidebar content (right panel) — varied weight, crafted shrine aesthetic // Hearts — juicy: staggered wave breath, hit reaction, last-heart panic, gain pop const isLastHeart = hp === 1 && hp < maxHp; let sidebarHearts = ''; for (let i = 0; i < maxHp; i++) { const on = i < hp; const justLost = (i === hp && hp < maxHp); // the heart that was JUST lost const heartSize = 'clamp(18px,2.8vh,32px)'; if (on) { // Alive heart — staggered wave breath, last-heart panic mode const breathAnim = isLastHeart ? `heartPanic 0.8s ease-in-out infinite` : `heartWave 2.8s ease-in-out infinite`; const delay = isLastHeart ? '0s' : `${i * 0.18}s`; const glowColor = isLastHeart ? 'oklch(0.7 0.30 30)' : 'oklch(0.8 0.25 65)'; const fillColor = isLastHeart ? 'oklch(0.75 0.28 35)' : 'oklch(0.85 0.20 70)'; sidebarHearts += ``; } else if (justLost) { // Just-lost heart — shatter animation (plays once on hp change via keyed anim name) sidebarHearts += ``; } else { // Empty heart — dim ghost outline sidebarHearts += ``; } } // Hit reaction flash on the whole row — keyed to hp so it retriggers each hit const heartRowAnim = hp < maxHp ? `animation:heartRowShock${hp} 0.4s ease-out` : ''; // Special name + orb dots — juicy arcane orbs with staggered pulse, gain pop, use shatter const specialName = SPECIALS[s.currentSpecial || 'spiritBarrage']?.name || 'Spirit Barrage'; const maxOrbs = 3; let specialOrbsHtml = ''; if (specialStock > 0) { const isLastOrb = specialStock === 1; for (let i = 0; i < maxOrbs; i++) { const on = i < specialStock; const justUsed = (i === specialStock && specialStock < maxOrbs); const orbSize = 'clamp(16px,2.2vh,28px)'; if (on) { const orbAnim = isLastOrb ? `orbPanic 1s ease-in-out infinite` : `orbPulse 3s ease-in-out infinite`; const delay = `${i * 0.3}s`; specialOrbsHtml += ``; } else if (justUsed) { specialOrbsHtml += ``; } else { specialOrbsHtml += ``; } } } else { for (let i = 0; i < maxOrbs; i++) { const orbSize = 'clamp(16px,2.2vh,28px)'; specialOrbsHtml += ``; } } // Residue — ornate box display with tier colors const TIER_SIZE = 500; const TIER_COLORS = [ ['oklch(0.45 0.18 55)', 'oklch(0.65 0.22 50)'], // amber ['oklch(0.45 0.20 280)', 'oklch(0.65 0.25 290)'], // violet ['oklch(0.40 0.18 160)', 'oklch(0.60 0.22 150)'], // emerald ['oklch(0.45 0.22 340)', 'oklch(0.65 0.25 330)'], // rose ['oklch(0.40 0.15 220)', 'oklch(0.60 0.20 210)'], // sapphire ['oklch(0.50 0.22 90)', 'oklch(0.70 0.25 85)'], // gold ['oklch(0.45 0.20 30)', 'oklch(0.65 0.24 25)'], // crimson ['oklch(0.45 0.18 190)', 'oklch(0.65 0.22 180)'], // teal ]; const tierIdx = Math.floor(residue / TIER_SIZE) % TIER_COLORS.length; const tierC = TIER_COLORS[tierIdx]; const tierGlow = tierC[1]; const sidebar = `

Spirit

          ${focused ? `STEADY
` : ''}
        
${sidebarHearts}
${specialName}

          ${invStats.hasBarrierWeave ? `swap` : ''}
        
          ${specialOrbsHtml}
        
Score
${fmtScore}

            Whisper
            ${graze}
          
          Mystic Residue
${residue}

`; // Left panel tabs — carved wood feel const activeTab = s.leftTab || 'player'; const tabStyle = (id) => { const active = id === activeTab; return `flex:1;padding:8px 0;text-align:center;font-size:9px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border-bottom:2px solid ${active ? GOLD : 'transparent'};color:${active ? TEXT_BRIGHT : TEXT_DIM};background:${active ? 'oklch(0.16 0.03 55)' : 'transparent'};transition:color 0.15s,border-color 0.15s`; }; // Player View — inventory grid + character identity const allShopKeys = Object.keys(SHOP.items); const totalSlots = 16; const ownedSlots = allShopKeys.filter(k => inventory[k] > 0); let invGrid = ''; for (let i = 0; i < totalSlots; i++) { const slotDelay = (i * 0.12).toFixed(2); if (i < ownedSlots.length) { const k = ownedSlots[i]; const item = SHOP.items[k]; const count = inventory[k]; invGrid += `

${count > 1 ? `

×${count}

` : ''}

`; } else { invGrid += `

`; } } // Filigree SVG corner ornament (reusable) const cornerSVG = (rot) => ``; const playerContent = `

${cornerSVG(0)}

${cornerSVG(90)}

${cornerSVG(180)}

${cornerSVG(270)}

${(CHARACTERS[s.characterId || 'aveline'] || CHARACTERS.aveline).name}'s Satchel

${invGrid}

${ownedSlots.length} / ${totalSlots}

`; const hitboxOn = !!s.showHitbox; const enemyOn = !!s.enemyActive; const toggleStyle = (on, hue) => { const bg = on ? `oklch(0.18 0.04 ${hue})` : CARD_BG; const border = on ? `oklch(0.45 0.12 ${hue})` : CARD_BORDER; const dot = on ? `oklch(0.85 0.22 ${hue})` : 'oklch(0.30 0.03 55)'; const shadow = on ? `0 0 6px oklch(0.85 0.22 ${hue})` : 'none'; const text = on ? `oklch(0.88 0.08 ${hue})` : TEXT_DIM; return { bg, border, dot, shadow, text }; }; const hbS = toggleStyle(hitboxOn, 35); const enS = toggleStyle(enemyOn, 65); // Level selector for admin const levelKeys = Object.keys(LEVELS); const currentLevel = s.currentLevel || null; const levelPhase = s.levelPhase || null; const levelButtons = levelKeys.map(k => { const lv = LEVELS[k]; const isCurrent = currentLevel === k; const bg = isCurrent ? 'oklch(0.18 0.05 90)' : CARD_BG; const border = isCurrent ? 'oklch(0.45 0.12 90)' : CARD_BORDER; const text = isCurrent ? 'oklch(0.88 0.08 90)' : TEXT_DIM; return `

${lv.name}${isCurrent ? ' ▶' : ''}

`; }).join(''); const endLevelBtn = currentLevel ? `

End Level

` : ''; // Admin item granting buttons const shopItemKeys = Object.keys(SHOP.items); const adminItemButtons = shopItemKeys.map(k => { const item = SHOP.items[k]; const owned = inventory[k] || 0; return `

${item.name} ${owned}

`; }).join(''); const adminContent = `

Level Select

${levelButtons} ${endLevelBtn}

Debug Toggles

Show Hitbox

Spawn Enemy

Mystic Stall

Open Shop

Grant Items

${adminItemButtons}

Reset Inventory

Testing

${s.adminGodMode ? '★ God Mode ON' : 'God Mode OFF'}

Spawn Veila

`; // Dialogue overlay — refined parchment with ornate framing let dialogueBox = ''; if (levelPhase === 'dialogue' && currentLevel) { const dirLines = s.directorDialogueLines; const levelData = LEVELS[currentLevel]; const lines = (dirLines && dirLines.length > 0) ? dirLines : (levelData?.dialogue || []); const dIdx = s.dialogueIndex || 0; const line = lines[dIdx]; if (line) { const isAveline = line.speaker === 'Aveline'; const speakerColor = isAveline ? 'oklch(0.82 0.14 65)' : 'oklch(0.55 0.14 200)'; const borderColor = isAveline ? 'oklch(0.50 0.12 65)' : 'oklch(0.35 0.10 200)'; const accentGlow = isAveline ? 'oklch(0.6 0.15 65 / 0.3)' : 'oklch(0.4 0.12 200 / 0.3)'; const textColor = isAveline ? TEXT_BRIGHT : 'oklch(0.78 0.03 80)'; const portraitFilter = isAveline ? 'brightness(1.1) drop-shadow(0 0 16px oklch(0.7 0.15 65 / 0.7))' : 'brightness(0.35) saturate(0.3) drop-shadow(0 0 12px oklch(0.3 0.10 200 / 0.5))'; const portraitUrl = '/cdn/portrait-blonde-anime-girl-red-eyes-1ohlthje.webp'; const cornerSvg = ``; const charIdx = Math.floor(s.dialogueCharIndex ?? line.text.length); const revealed = line.text.substring(0, charIdx); const hidden = line.text.substring(charIdx); const typing = charIdx < line.text.length; const displayText = revealed + (hidden ? `${hidden}` : ''); dialogueBox = `

${line.speaker}

${displayText}

${dIdx + 1}/${lines.length}

${typing ? '' : 'click to continue'}

${cornerSvg}

`; } } const swept = !!s.panelsSwept; const TRANSITION = 'transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)'; const topTransform = swept ? `transform:translateY(-140%)` : `transform:translateY(0)`; const bottomTransform = swept ? `transform:translateY(100%)` : `transform:translateY(0)`; const leftTransform = swept ? `transform:translateX(-100%)` : `transform:translateX(0)`; const rightTransform = swept ? `transform:translateX(100%)` : `transform:translateX(0)`; const BOTTOM_VH = 100 - TOP_VH - ARENA_H_VH; // Ornate border style — double gold lines with dark gap on arena-facing edges const B_OUTER = 'oklch(0.58 0.10 60)'; const B_INNER_LINE = 'oklch(0.48 0.08 55)'; const B_GAP = 'oklch(0.06 0.01 40)'; // Shadow order: later = behind. Inner gold renders behind, dark gap covers its lower portion, leaving inner gold visible above gap. const ORNATE_TOP = `border-bottom:6px solid ${B_OUTER};box-shadow:0 3px 12px oklch(0 0 0 / 0.5)`; const ORNATE_BOTTOM = `border-top:6px solid ${B_OUTER};box-shadow:0 -3px 12px oklch(0 0 0 / 0.5)`; const ORNATE_LEFT_BORDER = `border-right:6px solid ${B_OUTER};box-shadow:inset -4px 0 0 0 ${B_GAP}, inset -6px 0 0 0 ${B_INNER_LINE}, 3px 0 12px oklch(0 0 0 / 0.5)`; const ORNATE_RIGHT_BORDER = `border-left:6px solid ${B_OUTER};box-shadow:inset 4px 0 0 0 ${B_GAP}, inset 6px 0 0 0 ${B_INNER_LINE}, -3px 0 12px oklch(0 0 0 / 0.5)`; return cursorStyle + sharedStyles + `

${s.currentLevel && LEVELS[s.currentLevel] ? LEVELS[s.currentLevel].name : 'LUMINAIRE'}

Player View

        ${s.showAdminPanel ? `Admin
` : ''}
      
        ${(activeTab === 'admin' && s.showAdminPanel) ? `${adminContent}
` : playerContent}

${sidebar}

${[ { pos: [25.4, 40.6], level: 'level1' }, { pos: [32.4, 75.9], level: 'level2' }, { pos: [49.1, 39.6], level: 'level3' }, { pos: [61.8, 64.5], level: 'level4' }, { pos: [39.9, 54.9], level: 'level5' }, { pos: [46.5, 88.6], level: 'level6' }, { pos: [85.2, 37.0], level: 'level7' } ].filter(pin => pin.level === (s.currentLevel || null)).map(pin => `

`).join('')}

${deathOverlay} ${s.gamePaused ? `

PAUSED
Press P to resume

` : ''} ${bossBar} ${s.levelTitleShow ? renderLevelTitle(s.levelTitle) : ''} ${s.specialTitleShow ? renderSpecialTitle(s.specialTitle) : ''} ${consoleUI} ${dialogueBox} ${s.showPickupPopups !== false ? renderPickupPopups(s._scorePopup, s._residuePopup) : ''} ${shopOpen ? renderShopOverlay(residue, inventory) : ''} ${s.levelCompleteCard ? renderLevelCompleteCard(s.levelCompleteCard) : ''} ${s.demoEnd ? renderDemoEnd() : ''} ${s.showControls ? renderControlsOverlay(s.showControls === 'fading') : ''} ${fadeOverlay} `; } function renderKey(label) { return `

${label}

`; } function renderSection(title, rows) { const rowsHtml = rows.map(r => { const keysHtml = r.keys.map(k => renderKey(k)).join(`/`); return `

${r.label}

${keysHtml}

`; }).join(''); return `

${title}

${rowsHtml}

`; } function renderDemoEnd() { return `

Thank you for playing
END OF DEMO

        The journey continues...

        More levels, more bosses, more spells.
      
Click to return to menu

`; } function renderLevelCompleteCard(card) { const levelName = LEVELS[card.level] ? LEVELS[card.level].name : card.level; const fmtScore = (card.score || 0).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); const fromDeath = !!card.fromDeath; const hearts = []; if (!fromDeath) { for (let i = 0; i < card.maxHp; i++) { hearts.push(i < card.hp ? `♥` : `♥`); } } const statRow = (label, value, color) => `

${label} ${value}

`; const headerLabel = fromDeath ? 'Defeated' : 'Level Complete'; const headerColor = fromDeath ? 'oklch(0.65 0.22 20)' : TEXT_DIM; const continueLabel = fromDeath ? 'Click to return to menu' : 'Click to continue'; return `

${headerLabel}
${levelName}

          ${statRow('Score', fmtScore, 'oklch(0.93 0.18 78)')}
          ${statRow('Graze', card.graze || 0, 'oklch(0.80 0.14 100)')}
          ${statRow('Mystic Residue', card.residue || 0, 'oklch(0.72 0.18 55)')}
          ${!fromDeath ? `
            Hearts
            ${hearts.join('')}
          
` : ''}
        
${continueLabel}

`; } function renderControlsOverlay(fading) { const anim = fading ? 'animation:controlsFadeOut 0.8s ease-in both' : 'animation:controlsFadeIn 0.6s ease-out both'; const glass = 'background:linear-gradient(180deg, oklch(0.13 0.03 55 / 0.85), oklch(0.10 0.025 50 / 0.9));backdrop-filter:blur(12px);border:2px solid oklch(0.35 0.08 65 / 0.5);border-radius:12px;box-shadow:0 8px 32px oklch(0 0 0 / 0.5), inset 0 1px 0 oklch(0.5 0.06 65 / 0.1)'; const section1 = renderSection('Keyboard — WASD', [ { label: 'Move', keys: ['W', 'A', 'S', 'D'] }, { label: 'Shoot', keys: ['J', 'LMB'] }, { label: 'Special', keys: ['K', 'RMB'] }, { label: 'Steady', keys: ['Space'] }, ]); const section2 = renderSection('Keyboard — Arrows', [ { label: 'Move', keys: ['↑', '←', '↓', '→'] }, { label: 'Shoot', keys: ['Z'] }, { label: 'Special', keys: ['X'] }, { label: 'Steady', keys: ['Space'] }, ]); return `

Controls
${section1}
${section2}
try moving and shooting before enemies arrive

`; } function renderShopOverlay(residue, inventory) { const categories = SHOP.categories; const items = SHOP.items; const itemKeys = Object.keys(items); let sections = ''; for (let c = 0; c < categories.length; c++) { const cat = categories[c]; const catItems = itemKeys.filter(k => items[k].category === cat); if (catItems.length === 0) continue; let itemCards = ''; for (let i = 0; i < catItems.length; i++) { const k = catItems[i]; const item = items[k]; const owned = inventory[k] || 0; const maxed = owned >= (item.maxOwned || 1); const canBuy = !maxed && residue >= item.cost; const btnBg = canBuy ? 'oklch(0.18 0.05 65)' : 'oklch(0.12 0.02 50)'; const btnBorder = canBuy ? 'oklch(0.45 0.12 65)' : 'oklch(0.25 0.04 55)'; const btnText = canBuy ? 'oklch(0.88 0.12 70)' : 'oklch(0.38 0.03 55)'; const btnLabel = maxed ? 'Owned' : (residue >= item.cost ? 'Buy' : 'Need ' + item.cost); itemCards += `

${item.name}${owned > 0 ? ' (' + owned + '/' + item.maxOwned + ')' : ''}

${item.description}

${item.cost} MR

${btnLabel}

`; } sections += `

${cat}

${itemCards}

`; } return `

Mystic Stall
Spend residue to strengthen your journey
${residue} MR×

          ${sections}
        

`; }