${phaseLabel}

Turn ${turnNumber}

${phaseLabel}

${isAlly ? ` ` : `

`}

${s.name || 'Unknown'} ${elIcon ? `${elIcon}` : ''} ${teamLabel}

HP

${s.hp ?? 0} / ${s.maxHp ?? 1}

${renderHpBar(s.hp ?? 0, s.maxHp ?? 1, isAlly ? 'ally' : 'enemy', 248, 14)}

MP

${isAlly ? (s.mana ?? 0) : '??'} / ${isAlly ? (s.maxMana ?? 0) : '??'}

${renderManaBar(isAlly ? (s.mana ?? 0) : (s.maxMana ?? 1), s.maxMana ?? 1, 248, 10)}

${statRow('ATK', s.atk ?? 0, '⚔')} ${statRow('DEF', s.def ?? 0, '🛡')} ${statRow('SPD', s.spd ?? 0, '⚡')} ${statRow('MOV', s.mov ?? 0, '➤')} ${statRow('RNG', (() => { const cls = (s.class || '').toLowerCase(); if (cls === 'archer' || cls === 'fire archer') return 3; if (cls === 'mage' || cls === 'ice mage' || cls === 'healer') return 3; return 1; })(), '◎')}

`; } // ─── Element Wheel (compact circular type chart) ─── function renderElementWheel() { // 5 elements in a pentagon, clockwise: Fire(top) > Wind(top-right) > Earth(bottom-right) > Lightning(bottom-left) > Water(top-left) > Fire var elems = [ { emoji: '🔥', angle: -90 }, { emoji: '💨', angle: -90 + 72 }, { emoji: '⛰️', angle: -90 + 144 }, { emoji: '⚡', angle: -90 + 216 }, { emoji: '💧', angle: -90 + 288 } ]; var r = 36; var cx = 50; var cy = 50; var sz = 100; var iconSize = 22; var icons = elems.map(function(e) { var rad = e.angle * Math.PI / 180; var x = cx + r * Math.cos(rad) - iconSize / 2; var y = cy + r * Math.sin(rad) - iconSize / 2; return '

' + e.emoji + '

'; }).join(''); // SVG curved arrows between each consecutive element var defs = ''; var arcs = ''; for (var i = 0; i < 5; i++) { var a1 = elems[i].angle * Math.PI / 180; var a2 = elems[(i + 1) % 5].angle * Math.PI / 180; var gap = 0.32; var sa = a1 + gap; var ea = a2 - gap; var sx = cx + r * Math.cos(sa); var sy = cy + r * Math.sin(sa); var ex = cx + r * Math.cos(ea); var ey = cy + r * Math.sin(ea); arcs += ''; } return `

${icons}

`; } // ─── Action Menu (Disgaea-style) ─── // Per-class skill UI config const SKILL_UI = { 'Knight': { name: 'Taunt', cost: 3, accent: '#fbbf24', glow: 'rgba(251,191,36,0.3)', desc: '3 MP · Taunt' }, 'Ice Mage': { name: 'Freeze', cost: 3, accent: '#67e8f9', glow: 'rgba(103,232,249,0.3)', desc: '3 MP · ATK×0.5 + Freeze' }, 'Fire Archer': { name: 'Fire Arrow', cost: 3, accent: '#fb923c', glow: 'rgba(251,146,60,0.3)', desc: '3 MP · ATK×1.5' }, 'Warrior': { name: 'Shield Throw', cost: 3, accent: '#d97706', glow: 'rgba(217,119,6,0.35)', desc: '3 MP · ATK×1.5 · RNG 3' }, 'Mage': { name: 'Arcane Blast', cost: 4, accent: '#8b5cf6', glow: 'rgba(139,92,246,0.35)', desc: '4 MP · ATK×2 nuke' }, 'Archer': { name: 'Piercing Shot', cost: 3, accent: '#2dd4bf', glow: 'rgba(45,212,191,0.35)', desc: '3 MP · ATK×1.8, ½ DEF' }, 'Healer': { name: 'Heal', cost: 4, accent: '#4ade80', glow: 'rgba(74,222,128,0.4)', desc: '4 MP · Restore 8 HP', needsAlly: true }, 'Assassin': { name: 'Backstab', cost: 3, accent: '#dc2626', glow: 'rgba(220,38,38,0.35)', desc: '3 MP · ATK×2.5 if moved' }, 'Druid': { name: 'Entangle', cost: 3, accent: '#22c55e', glow: 'rgba(34,197,94,0.35)', desc: '3 MP · ATK×1.5 + Root' }, 'Wind Archer': { name: 'Gale Arrow', cost: 3, accent: '#6ee7b7', glow: 'rgba(110,231,183,0.35)', desc: '3 MP · ATK×1.8 · RNG 4' }, 'Lightning Mage':{ name: 'Thunder Strike', cost: 4, accent: '#facc15', glow: 'rgba(250,204,21,0.35)', desc: '4 MP · ATK×2 · Chain' }, }; const DEFAULT_SKILL_UI = { name: 'Skill', cost: 3, accent: '#c084fc', glow: 'rgba(192,132,252,0.3)', desc: '3 MP · ATK×1.5' }; function getSkillUI(cls) { return SKILL_UI[cls] || DEFAULT_SKILL_UI; } function renderActionMenu(selectedUnit, unitActions, subPhase) { if (!selectedUnit || subPhase !== 'action-menu') return ''; const ua = unitActions || { hasMoved: false, hasAttacked: false }; const s = selectedUnit.state; const canMove = !ua.hasMoved; const canAttack = !ua.hasAttacked; const skillUI = getSkillUI(s.class || ''); const canSkill = !ua.hasAttacked && (s.mana || 0) >= skillUI.cost; const manaCost = skillUI.cost; // SVG icons const moveIcon = ``; const attackIcon = ``; const skillIcon = ``; const endIcon = ``; function actionBtn(label, icon, actionName, enabled, accentColor, glowColor, subtitle) { const opacity = enabled ? '1' : '0.35'; const cursor = enabled ? 'cursor-pointer' : 'cursor-not-allowed'; const hoverClass = enabled ? 'hover:brightness-125 active:scale-95' : ''; const borderStr = enabled ? accentColor : 'rgba(255,255,255,0.1)'; const bgStr = enabled ? 'linear-gradient(135deg, rgba(30,20,55,0.95), rgba(15,10,30,0.95))' : 'linear-gradient(135deg, rgba(20,15,30,0.7), rgba(10,8,18,0.7))'; const glowStr = enabled ? 'box-shadow: 0 0 12px ' + glowColor + ', inset 0 1px 0 rgba(255,255,255,0.06);' : ''; const clickHandler = enabled ? "sendAction('pickAction', { action: '" + actionName + "' })" : ''; return ` `; } const moveSubtitle = canMove ? 'MOV ' + (s.mov || 0) : ''; const atkSubtitle = canAttack ? 'ATK ' + (s.atk || 0) : ''; const skillSubtitle = canSkill ? skillUI.desc : (!ua.hasAttacked ? 'Need ' + manaCost + ' MP' : ''); return `

⊱ ACTIONS ⊰

${actionBtn('Move', moveIcon, 'move', canMove, '#38bdf8', 'rgba(56,189,248,0.3)', moveSubtitle)} ${actionBtn('Attack', attackIcon, 'attack', canAttack, '#f87171', 'rgba(248,113,113,0.3)', atkSubtitle)} ${actionBtn(skillUI.name, skillIcon, 'skill', canSkill, skillUI.accent, skillUI.glow, skillSubtitle)} ${actionBtn('End Turn', endIcon, 'end-unit', true, '#fbbf24', 'rgba(251,191,36,0.3)', '')}

`; } // ─── Clickable Tile Grid Overlay ─── // REMOVED — movement/targeting now uses in-world grid cursor (WASD + Enter) // ─── Targeting Hint Banner ─── function renderTargetingHint(selectedUnit, subPhase) { if (!selectedUnit) return ''; if (subPhase !== 'select-attack' && subPhase !== 'select-skill') return ''; const cls = selectedUnit.state?.class ?? ''; let message = ''; let accent = '#fb923c'; let glowRgba = 'rgba(251,146,60,0.35)'; if (subPhase === 'select-attack') { message = 'Select an enemy to attack'; accent = '#f87171'; glowRgba = 'rgba(248,113,113,0.35)'; } else { const skillCfg = SKILL_UI[cls] || DEFAULT_SKILL_UI; if (skillCfg.needsAlly) { message = 'Select an ally to heal'; accent = '#4ade80'; glowRgba = 'rgba(74,222,128,0.4)'; } else { message = 'Select an enemy to target'; accent = '#fb923c'; glowRgba = 'rgba(251,146,60,0.35)'; } } return `

${message}

(Right-click to cancel)

`; } // ─── Class Config ─── const CLASS_CFG = { Knight: { icon: '⚔', color: '#ef4444' }, Mage: { icon: '✦', color: '#a78bfa' }, Archer: { icon: '➶', color: '#4ade80' }, Warrior: { icon: '🛡', color: '#d97706' }, Healer: { icon: '✚', color: '#4ade80' }, Assassin: { icon: '🗡', color: '#dc2626' }, 'Ice Mage': { icon: '❄', color: '#67e8f9' }, 'Fire Archer': { icon: '🔥', color: '#fb923c' }, 'Dark Knight': { icon: '☠', color: '#c084fc' }, Demon: { icon: '♦', color: '#f97316' }, Monster: { icon: '◆', color: '#94a3b8' }, 'Goblin Warrior':{ icon: '⚔', color: '#ef4444' }, 'Goblin Shaman': { icon: '✦', color: '#c084fc' }, 'Goblin Brute': { icon: '◆', color: '#f97316' }, }; // ─── Turn Order Panel (Right Side) ─── function renderTurnOrderPanel(units, selectedId, actedUnits) { // Filter out hidden/empty slots — only show units that are actually in the fight const active = units.filter(u => (u.state.alive || (u.state.dead && u.state.name)) && u.id !== 'unit-ally-third'); // Sort by initiative roll (d10 + SPD) descending const sorted = active.slice().sort((a, b) => (b.state.initiative ?? b.state.spd ?? 0) - (a.state.initiative ?? a.state.spd ?? 0)); // Alive first, dead at bottom const alive = sorted.filter(u => u.state.alive !== false); const dead = sorted.filter(u => u.state.alive === false); const ordered = [...alive, ...dead]; const renderEntry = (u, idx) => { const s = u.state; const isAlly = s.team === 'ally'; const isActive = u.id === selectedId; const isDead = s.alive === false; const hasActed = (actedUnits || []).includes(u.id); const accent = isAlly ? ALLY_COLOR : ENEMY_COLOR; const glow = isAlly ? ALLY_GLOW : ENEMY_GLOW; const cls = CLASS_CFG[s.class] || CLASS_CFG.Monster; const hp = clamp(s.hp ?? 0, 0, s.maxHp ?? 1); const maxHp = s.maxHp ?? 1; const hpPct = (hp / maxHp) * 100; const mp = clamp(s.mana ?? 0, 0, s.maxMana ?? 1); const maxMp = s.maxMana ?? 1; const mpPct = maxMp > 0 ? (mp / maxMp) * 100 : 0; const entryOpacity = isDead ? '0.35' : hasActed ? '0.55' : '1'; const bgFill = isActive ? 'linear-gradient(135deg, rgba(50,35,80,0.95), rgba(30,20,55,0.9))' : 'linear-gradient(135deg, rgba(20,16,38,0.9), rgba(14,10,28,0.85))'; const borderColor = isActive ? accent : 'rgba(120,80,200,0.2)'; const borderWidth = isActive ? '1.5' : '0.8'; // HP bar color const hpGrad = isAlly ? 'allyBar' : 'enemyBar'; const hpBarGlow = isAlly ? ALLY_GLOW : ENEMY_GLOW; // Unique clip IDs const hpClipId = `toHpClip-${u.id}`; const mpClipId = `toMpClip-${u.id}`; return `

${isActive ? `

` : ''}

${isActive ? `

` : ''} ${isDead ? `

DEAD

` : ''}

${cls.icon}

${s.name || '???'}

${hasActed && !isDead ? `✓` : ''} 🎲${s.initiativeRoll ?? '?'}+${s.spd ?? 0}

${s.class || 'Unit'}

${(s.frozen > 0 || s.taunted) ? `

${s.frozen > 0 ? ` ❄ ${s.frozen} ` : ''} ${s.taunted ? ` ⛓ Taunt ` : ''}

` : ''}

HP

${hp}/${maxHp}

MP

${mp}/${maxMp}

`; }; const entries = ordered.map((u, i) => renderEntry(u, i)).join(''); const aliveCount = alive.length; const deadCount = dead.length; return `

⊱ TURN ORDER ⊰

${entries}

${aliveCount} ACTIVE ${deadCount > 0 ? `· ${deadCount} DOWN` : ''}

`; } // ─── Victory Overlay (Disgaea-style) ─── function renderVictoryOverlay(turnNumber, battleSource, questDifficulty) { const isQuest = battleSource === 'quest'; const titleText = isQuest ? 'QUEST' : 'MISSION'; const subtitleText = isQuest ? 'COMPLETE!' : 'COMPLETE!'; const turnText = isQuest ? `Quest cleared in ${turnNumber} turns` : `All enemies vanquished in ${turnNumber} turns`; const buttonText = isQuest ? 'RETURN TO VILLAGE' : 'CONTINUE'; const buttonAction = isQuest ? "sendAction('questComplete')" : "sendAction('continueAfterVictory')"; // Crystal reward badge for quest victories const crystalReward = isQuest ? `

+${questDifficulty === 'Hard' ? 3 : questDifficulty === 'Medium' ? 2 : 1} Crystal${questDifficulty !== 'Easy' ? 's' : ''}

` : ''; return `

${titleText}

${subtitleText}

${turnText}

${crystalReward}

${[0,1,2].map(i => ` `).join('')}

`; } // ─── Defeat Overlay ─── function renderDefeatOverlay(battleSource) { const isQuest = battleSource === 'quest'; const defeatTitle = isQuest ? 'QUEST FAILED' : 'DEFEAT'; const defeatSubtext = isQuest ? 'The mission was too dangerous...' : 'Your forces have fallen...'; const defeatButtonText = isQuest ? 'RETURN TO VILLAGE' : 'RETRY'; const defeatButtonAction = isQuest ? "sendAction('questComplete')" : "sendAction('retryAfterDefeat')"; return `

${defeatTitle}

${defeatSubtext}

`; } // ─── Starting Menu (Crystal Saga Title Screen — shown before any battle) ─── function renderStartingMenu(localPlayer) { const st = localPlayer && localPlayer.state; const hasSave = st && (st.lastCheckpoint || (st.dialogueIndex || 0) > 0 || (st.postBattleIndex || 0) > 0 || (st.villageIntroIndex || 0) > 0 || st.chapterComplete); const btnLabel = hasSave ? 'NEW GAME' : 'START'; // --- Glowing Crystal SVG (center of title) --- const crystalSVG = ``; // Ornate gold corner frame SVGs const cornerTL = ``; const cornerTR = ``; const cornerBL = ``; const cornerBR = ``; return `

${cornerTL}${cornerTR}${cornerBL}${cornerBR}

${[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16].map(i => { const left = 5 + (i * 6.1) % 90; const delay = (i * 0.5) % 5; const dur = 3.5 + (i % 4); const size = 1.5 + (i % 4) * 0.8; const colors = ['#fbbf24', '#a78bfa', '#7dd3fc', '#fde68a', '#c4b5fd', '#60a5fa']; const color = colors[i % colors.length]; return '

'; }).join('')}

`; } // ─── Dialogue History Overlay ─── function renderHistoryOverlay(dialogueLines, currentIdx, localPlayer) { const playerName = localPlayer.state.playerName || ''; const nameColors = { 'Narrator': { color: '#e2e8f0', glow: 'rgba(226,232,240,0.35)' }, 'Selene': { color: '#7dd3fc', glow: 'rgba(125,211,252,0.5)' }, 'Ember': { color: '#fb923c', glow: 'rgba(251,146,60,0.5)' }, }; // Build history entries from index 0 to currentIdx const entries = []; for (var i = 0; i <= currentIdx; i++) { const line = dialogueLines[i]; if (!line) continue; // Skip pure flash scenes and name input prompts — they're not dialogue if (line.flashScene && line.text === '...') continue; if (line.nameInput) continue; const nc = nameColors[line.speaker] || { color: GOLD, glow: GOLD_GLOW }; const isNarrator = line.speaker === 'Narrator'; // Resolve text with player name substitutions (already baked in the dialogueLines for Selene/Ember lines) const displayText = line.text; entries.push(`

${isNarrator ? '' : `

${line.speaker}

`}

${displayText}

`); } return `

Dialogue Log

${entries.length > 0 ? entries.join('') : `

No dialogue yet...

`}

`; } // ─── Visual Novel Dialogue Screen ─── function renderVisualNovel(localPlayer) { const FOREST_BG = '/cdn/image-dark-fantasy-forest-clearing-moonlight-misty-ancient-trees.png'; const STREET_BG = '/cdn/image-dark-suburban-street-night-lampposts-sidewalk-trash-cans.png'; const SELENE_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears'; const EMBER_PORTRAIT = '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png'; const playerName = localPlayer.state.playerName || ''; const dialogueLines = [ // ── Isekai Prologue (indices 0–5) ── { speaker: 'Narrator', portrait: null, bg: STREET_BG, text: 'Dark suburban street at night. You forgot to take the trash out... again.' }, { speaker: 'Narrator', portrait: null, bg: STREET_BG, text: 'You drag the trash bag to the curb, yawning. Another boring night.' }, { speaker: 'Narrator', portrait: null, bg: STREET_BG, truckScene: true, text: 'A blinding light. A deafening horn.' }, { speaker: 'Narrator', portrait: null, bg: 'black', flashScene: true, text: 'Everything goes white.' }, { speaker: 'Narrator', portrait: null, bg: 'black', flashScene: true, text: '...' }, // ── Forest Awakening ── { speaker: 'Narrator', portrait: null, bg: 'black', text: '...' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'Your face is pressed into damp earth. Cold grass against your cheek. The smell of moss and rain.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'You push yourself up on trembling arms. Plate armor clinks — you\'re wearing a full suit of it. A sword and shield lie within arm\'s reach.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'In each hand, you clutch a small crystal. One pulses with cold blue light. The other burns warm orange.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'You have no memory of this place. No memory of how you got here. You just remember leaving the house to take out the trash... and then nothing. Now it\'s just you, these crystals, and what looks like an ancient forest stretching in every direction.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'You stumble to your feet. The trees are impossibly tall — twisted bark, glowing lichen. This is not your world.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'The crystals in your hands begin to pulse faster. The blue one turns ice-cold. The orange one sears your palm.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, crystalScene: true, text: 'They burn — you can\'t hold them. You hurl them to the ground on instinct.' }, { speaker: 'Narrator', portrait: null, bg: 'black', flashScene: true, text: '...' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'When the light fades, two figures stand where the crystals fell.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'A woman wreathed in pale frost, silver hair drifting as if underwater. And beside her, a figure in a burnt-orange cloak, a longbow slung across her back, embers dancing in her wake.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Where... where am I? Who are you?' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: 'Same here. One moment, darkness — the next, I\'m standing here.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'You. You were the one holding the crystals. You released us.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'How did you do this? We have been trapped for over a thousand years!' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: 'Who... are you? What\'s your name?' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, nameInput: true, text: 'They both look at you expectantly. What is your name?' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: playerName ? 'Alright... ' + playerName + '. Something feels deeply wrong about this place.' : '...' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: playerName ? 'I feel it too. My flames are restless. ' + playerName + ', stay close — I don\'t think we\'re alone.' : '...' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'A rustling erupts from the treeline. Then another. The sound of snarling, guttural voices.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: 'Goblins. They\'re surrounding us.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: playerName ? playerName + ', grab your sword. We\'re under attack!' : 'Grab your sword. We\'re under attack!' }, ]; const NAME_INPUT_INDEX = 21; const TOTAL_LINES = dialogueLines.length; // 27 const idx = clamp(localPlayer.state.dialogueIndex ?? 0, 0, TOTAL_LINES - 1); const line = dialogueLines[idx]; const isLast = idx >= TOTAL_LINES - 1; const isCrystalScene = !!line.crystalScene; const isFlash = !!line.flashScene; const isNameInput = !!line.nameInput; const hasPortrait = !!line.portrait; // Speaker name color based on character const nameColors = { 'Narrator': { color: '#e2e8f0', glow: 'rgba(226,232,240,0.35)' }, 'Selene': { color: '#7dd3fc', glow: 'rgba(125,211,252,0.5)' }, 'Ember': { color: '#fb923c', glow: 'rgba(251,146,60,0.5)' }, }; const nc = nameColors[line.speaker] || { color: GOLD, glow: GOLD_GLOW }; // Background rendering const isBlack = line.bg === 'black'; const isWhite = line.bg === 'white'; const sceneBg = isBlack ? `

` : isWhite ? '' : `

`; // Crystal flash overlay (on the throw line) const crystalFlash = isCrystalScene ? `

` : ''; // Floating crystal particles for forest scenes const showParticles = !isBlack && !isWhite && !isFlash; const particles = showParticles ? `

${[1,2,3,4,5,6,7,8].map(function(i) { var left = 8 + (i * 12.3) % 84; var delay = (i * 0.7) % 4; var dur = 4 + (i % 3); var size = 2 + (i % 3); var colors = ['#7dd3fc', '#fb923c', '#a78bfa', '#34d399']; var color = colors[i % colors.length]; return '

'; }).join('')}

` : ''; // Portrait section const portraitSection = hasPortrait ? `

` : ''; // === FLASH SCENE: white pulsing screen === if (isFlash) { return `

✦ ✦ ✦

Click to continue

`; } // === NAME INPUT SCENE === if (isNameInput) { return `

${particles}

They look at you expectantly...

What is your name?

This name will be used throughout the game

`; } // Narrator gets italic, slightly different feel const textStyle = line.speaker === 'Narrator' ? 'color: rgba(230,240,255,0.95); font-style: italic; text-shadow: 0 0 12px rgba(200,220,255,0.2), 0 1px 3px rgba(0,0,0,0.8);' : 'color: rgba(230,220,255,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.8);'; return `

${sceneBg} ${crystalFlash} ${particles} ${portraitSection}

${line.speaker !== 'Narrator' ? `

${line.speaker}

` : ''}

${line.text}

${isLast ? ` Begin Battle ` : ` Click to continue `}

${localPlayer.state.showHistory ? renderHistoryOverlay(dialogueLines, idx, localPlayer) : ''}

${dialogueLines.map((_, i) => { const active = i === idx; const passed = i < idx; return '

'; }).join('')}

`; } // ─── Post-Battle Visual Novel ─── function renderPostBattleVN(localPlayer) { const FOREST_BG = '/cdn/image-dark-fantasy-forest-clearing-moonlight-misty-ancient-trees.png'; const SELENE_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears'; const EMBER_PORTRAIT = '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png'; const playerName = localPlayer.state.playerName || 'Hero'; const postBattleLines = [ // ── Catching breath (0–2) ── { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'The last goblin crumples to the ground. The clearing falls silent, save for the ragged breathing of three exhausted fighters.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: 'Phew... that\'s a few more goblins dealt with. Been a while since I could really stretch my legs — and my bow.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Indeed. A thousand years sealed away, and it seems my magic hasn\'t dulled one bit. ...Though I could do without the goblin smell.' }, // ── Discovery ── { speaker: playerName, portrait: null, bg: FOREST_BG, text: 'This... is definitely not the kind of workout I\'m used to. Taking out the trash never tried to stab me back.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'As the last goblin falls, its body begins to dissolve — flesh and bone melting away into dark smoke. The others follow, one by one, their forms collapsing into nothing.' }, { speaker: playerName, portrait: null, bg: FOREST_BG, darkCrystalScene: true, text: 'Whoa — what\'s happening to them?!' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'Where each goblin once lay, something remains — small, cold, and faintly glowing. Crystals. Scattered across the clearing, left behind in the dark smoke.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'You gather them up, counting as you go. Ten crystals in total. They look almost identical to the ones that summoned Selene and Ember — the same faceted shape, the same strange weight. But these are dark. Dormant. No light pulses inside them. But some energy remains.' }, // ── Selene recognizes them ── { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Wait — let me see those.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'Selene takes one of the dark crystals and holds it up. Her expression shifts — recognition, then something close to fear.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'These are mana crystals. The same kind that held Ember and me prisoner for a thousand years.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'But they\'re dormant. Empty — or perhaps... sleeping. Whatever warriors are sealed inside, they haven\'t been awakened.' }, // ── Selene tells the story of Lyra ── { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: 'Selene, what\'s going on? You look like you\'ve seen a ghost.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Let me explain.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'A thousand years ago, the world was nothing but war. Kingdom against kingdom, mage against mage, blade against blade. Every nation, every village — consumed by it. There was no peace. Not for anyone.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'The battlefields stretched from coast to coast. Entire generations grew up knowing nothing but the clash of steel and the smell of smoke. It seemed like the fighting would never end.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Until Lyra.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Lyra was the greatest mage the world had ever known. She watched the endless wars destroy everything she loved. And she decided... enough.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'She cast a spell unlike anything before or since. In a single night, every warrior on every battlefield — every soldier, every mage, every fighter — was sealed. Turned into crystals.' }, { speaker: playerName, portrait: null, bg: FOREST_BG, text: 'Wait — every fighter? All of them? Just... gone?' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Gone. Sealed away in an instant. The wars ended overnight. The world fell silent.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Ember and I were among them. We were warriors too, once. And now... it seems we weren\'t the only ones Lyra sealed.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'Selene looks down at the ten dormant crystals, her fingers trembling slightly.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'These crystals hold warriors from the old wars. People I may have fought beside — or against. Frozen in time, just as we were.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: '...Ten more of us. Trapped all this time, just like we were.' }, { speaker: playerName, portrait: null, bg: FOREST_BG, text: 'I\'m keeping these. Whatever happens, leaving them here isn\'t an option.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'Yes, you should. Maybe you could summon some more heroes, like you did with us.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: FOREST_BG, text: 'Yeah — the way you communicated with us and helped us win that fight was amazing.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'You carefully gather each crystal and pack them into a salvaged bag. They feel heavier than they should — as if the weight of a thousand years rests inside them.' }, // ── Village suggestion ── { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: FOREST_BG, text: 'I sense something beyond the northern treeline. Hearth-fires, chimney smoke... a settlement. If anyone in this era knows about mana crystals, we may find answers there.' }, { speaker: 'Narrator', portrait: null, bg: FOREST_BG, text: 'The three of you set off through the ancient forest. The bag of crystals weighs heavy against your side. Somewhere ahead, through the silver-lit trees, a village awaits — and with it, perhaps, some answers.' }, ]; const POST_BATTLE_TOTAL = postBattleLines.length; // 33 const idx = clamp(localPlayer.state.postBattleIndex ?? 0, 0, POST_BATTLE_TOTAL - 1); const line = postBattleLines[idx]; const isLast = idx >= POST_BATTLE_TOTAL - 1; const hasPortrait = !!line.portrait; const isDarkCrystal = !!line.darkCrystalScene; // Speaker name color const nameColors = { 'Narrator': { color: '#e2e8f0', glow: 'rgba(226,232,240,0.35)' }, 'Selene': { color: '#7dd3fc', glow: 'rgba(125,211,252,0.5)' }, 'Ember': { color: '#fb923c', glow: 'rgba(251,146,60,0.5)' }, }; // Player name gets gold const nc = nameColors[line.speaker] || { color: GOLD, glow: GOLD_GLOW }; // Background const sceneBg = `

`; // Floating particles const particles = `

${[1,2,3,4,5,6,7,8].map(function(i) { var left = 8 + (i * 12.3) % 84; var delay = (i * 0.7) % 4; var dur = 4 + (i % 3); var size = 2 + (i % 3); var colors = ['#c084fc', '#a78bfa', '#7c3aed', '#818cf8']; var color = colors[i % colors.length]; return '

'; }).join('')}

`; // Dark crystal visual overlay for discovery scene const crystalOverlay = isDarkCrystal ? `

` : ''; // Portrait const portraitSection = hasPortrait ? `

` : ''; // Text style const isNarrator = line.speaker === 'Narrator'; const textStyle = isNarrator ? 'color: rgba(220,215,235,0.9); font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.8);' : 'color: rgba(255,255,255,0.95); text-shadow: 0 1px 4px rgba(0,0,0,0.8);'; return `

${sceneBg} ${particles} ${crystalOverlay} ${portraitSection}

${line.speaker !== 'Narrator' ? `

${line.speaker}

` : ''}

${line.text}

${isLast ? ` Continue Journey ` : ` Click to continue `}

${postBattleLines.map((_, i) => { const active = i === idx; const passed = i < idx; return '

'; }).join('')}

`; } // ─── Village Intro Visual Novel ─── function renderVillageIntro(localPlayer) { const VILLAGE_BG = '/cdn/image-anime-jrpg-painted-village-entrance-nighttime-torches-wooden-gate-cobblestone-path-forest-edge-warm-light-no-text-no-words-no-characters.png'; const SELENE_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears'; const EMBER_PORTRAIT = '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png'; const GRIKS_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-goblin-mage-boy-green-skin-black-hair-yellow-eyes-sly-smirk-pointy-wizard-hat-tattered-blue-robes-charlatan-trickster-close-up-bust-shot.png'; const playerName = localPlayer.state.playerName || 'Hero'; const villageIntroLines = [ { speaker: 'Narrator', portrait: null, bg: VILLAGE_BG, text: 'The party emerges from the forest. Ahead, warm torchlight flickers along a cobblestone path leading to a small village. The scent of woodsmoke and fresh bread fills the air.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: VILLAGE_BG, text: 'Finally! Civilization. I was starting to think this forest went on forever.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: VILLAGE_BG, text: 'A village at the forest\'s edge... it\'s changed so much. A thousand years will do that, I suppose.' }, { speaker: playerName, portrait: null, bg: VILLAGE_BG, text: 'Let\'s find somewhere to rest and figure out what these crystals are.' }, { speaker: 'Narrator', portrait: null, bg: VILLAGE_BG, text: 'As you approach the village gate, a small figure darts out from behind a wooden stall draped in colorful cloth and strange trinkets.' }, { speaker: '???', portrait: GRIKS_PORTRAIT, bg: VILLAGE_BG, text: 'Hey, hey, HEY! You three! Over here!' }, { speaker: 'Narrator', portrait: null, bg: VILLAGE_BG, text: 'A black-haired goblin with piercing yellow eyes waves frantically at your group. Unlike the feral goblins from the forest, this one wears a patched merchant\'s coat and a wide, sharp-toothed grin.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, bg: VILLAGE_BG, text: 'A goblin?! After what we just—' }, { speaker: 'Narrator', portrait: null, bg: VILLAGE_BG, text: 'Ember reaches for her bow, but the goblin throws his hands up.' }, { speaker: '???', portrait: GRIKS_PORTRAIT, bg: VILLAGE_BG, text: 'Whoa, whoa, easy with the bow, Red! I\'m Griks — merchant, entrepreneur, purveyor of fine magical goods! Not one of those forest savages. Do I LOOK like I want to fight you?' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, bg: VILLAGE_BG, text: '...Wait. I sense something — there\'s familiar magic radiating from this goblin. Ancient magic. How is that possible?' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, bg: VILLAGE_BG, text: 'Heh... funny you say that, elf. Because Griks feels it too — a pull, coming from YOU.' }, { speaker: 'Narrator', portrait: null, bg: VILLAGE_BG, text: 'He reaches into his robes and reveals a crystal, faintly glowing the same hue as yours.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, bg: VILLAGE_BG, text: 'See this? Griks has been carrying this stone for longer than he can remember. Come — come to my shop. We have much to talk about, yes?' }, { speaker: playerName, portrait: null, bg: VILLAGE_BG, text: 'We\'ll check it out. But if this is a trap...' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, bg: VILLAGE_BG, text: 'Trap? Griks is OFFENDED. Business is business, friend! Come find Griks when you\'re ready to browse. Griks\' shop is always open!' }, { speaker: 'Narrator', portrait: null, bg: VILLAGE_BG, text: 'He scurries back behind his stall with a cackle, trinkets jangling in his wake.' }, ]; const VILLAGE_INTRO_TOTAL = villageIntroLines.length; const idx = clamp(localPlayer.state.villageIntroIndex ?? 0, 0, VILLAGE_INTRO_TOTAL - 1); const line = villageIntroLines[idx]; const isLast = idx >= VILLAGE_INTRO_TOTAL - 1; const hasPortrait = !!line.portrait; // Speaker name colors const nameColors = { 'Narrator': { color: '#e2e8f0', glow: 'rgba(226,232,240,0.35)' }, 'Selene': { color: '#7dd3fc', glow: 'rgba(125,211,252,0.5)' }, 'Ember': { color: '#fb923c', glow: 'rgba(251,146,60,0.5)' }, '???': { color: '#facc15', glow: 'rgba(250,204,21,0.5)' }, 'Griks': { color: '#fbbf24', glow: 'rgba(251,191,36,0.5)' }, }; const nc = nameColors[line.speaker] || { color: GOLD, glow: GOLD_GLOW }; const isNarrator = line.speaker === 'Narrator'; const textStyle = isNarrator ? 'color: rgba(220,215,235,0.9); font-style: italic; text-shadow: 0 1px 3px rgba(0,0,0,0.8);' : 'color: rgba(255,255,255,0.95); text-shadow: 0 1px 4px rgba(0,0,0,0.8);'; // Background const sceneBg = `

`; // Floating particles — warm torchlight amber const particles = `

${[1,2,3,4,5,6,7,8].map(function(i) { var left = 8 + (i * 12.3) % 84; var delay = (i * 0.7) % 4; var dur = 4 + (i % 3); var size = 2 + (i % 3); var colors = ['#fbbf24', '#f59e0b', '#fde68a', '#fb923c']; var color = colors[i % colors.length]; return '

'; }).join('')}

`; // Portrait const portraitSection = hasPortrait ? `

` : ''; return `

${sceneBg} ${particles} ${portraitSection}

${line.speaker !== 'Narrator' ? `

${line.speaker}

` : ''}

${line.text}

${isLast ? ` Enter Village ` : ` Click to continue `}

${villageIntroLines.map((_, i) => { const active = i === idx; const passed = i < idx; return '

'; }).join('')}

`; } // ─── Tavern Quest Board ─── function renderTavernQuests(localPlayer) { const TAVERN_BG = '/cdn/image-anime-jrpg-painted-dark-tavern-interior-wooden-walls-candlelight-warm-glow-no-text-no-words-no-characters.png'; const GOLD = '#fbbf24'; const GOLD_GLOW = 'rgba(251,191,36,0.5)'; const MAP_NAMES = { forest: 'Forest Clearing', cave: 'Dark Cavern', ruins: 'Ancient Ruins', graveyard: 'Haunted Graveyard', volcano: 'Volcanic Wastes', snowfield: 'Frozen Tundra', swamp: 'Poison Swamp' }; const MAP_ICONS = { forest: '🌲', cave: '🕳️', ruins: '🏛️', graveyard: '⚰️', volcano: '🌋', snowfield: '❄️', swamp: '🍄' }; const questBoard = localPlayer.state.questBoard ?? []; const selectedIdx = localPlayer.state.selectedQuestIndex; const crystals = localPlayer.state.crystals ?? 0; const DIFF_STYLES = { 'Easy': { color: '#4ade80', glow: 'rgba(74,222,128,0.5)', label: 'EASY' }, 'Medium': { color: '#facc15', glow: 'rgba(250,204,21,0.5)', label: 'MEDIUM' }, 'Hard': { color: '#f87171', glow: 'rgba(248,113,113,0.5)', label: 'HARD' } }; const ENEMY_ICONS = { 'Goblin': '👹', 'Bandit': '🗡️', 'Shadow Beast': '🐺', 'Cave Troll': '🪨', 'Skeleton': '💀', 'Dire Wolf': '🐾', 'Slime': '🟢', 'Wraith': '👻', 'Whelp': '🐉' }; const questCardsHtml = questBoard.map((q, i) => { const isSelected = selectedIdx === i; const diff = DIFF_STYLES[q.difficulty] || DIFF_STYLES['Easy']; const icon = ENEMY_ICONS[q.enemyType] || '⚔️'; const borderColor = isSelected ? GOLD : 'rgba(180,140,60,0.3)'; const borderGlow = isSelected ? `0 0 20px ${GOLD_GLOW}, inset 0 0 15px rgba(251,191,36,0.1)` : 'none'; const bgStyle = isSelected ? 'linear-gradient(135deg, rgba(60,40,10,0.95), rgba(40,25,8,0.98))' : 'linear-gradient(135deg, rgba(35,25,10,0.9), rgba(25,18,6,0.95))'; return ` `; }).join(''); const hasSelection = selectedIdx != null && selectedIdx >= 0 && selectedIdx < questBoard.length; const beginBtnStyle = hasSelection ? `background: linear-gradient(135deg, rgba(180,120,20,0.8), rgba(120,60,10,0.9)); box-shadow: 0 0 20px ${GOLD_GLOW}, inset 0 1px 0 rgba(255,230,150,0.3); text-shadow: 0 1px 4px rgba(0,0,0,0.6); cursor: pointer;` : `background: linear-gradient(135deg, rgba(60,50,40,0.6), rgba(40,30,20,0.7)); cursor: not-allowed; opacity: 0.5;`; return `

Quest Board

${crystals}

Select a quest to take on. Earn crystals for victory!

${questCardsHtml}

`; } // ─── Village Hub Screen ─── function renderVillageHub(localPlayer) { const VILLAGE_BG = '/cdn/image-anime-jrpg-painted-village-scenery-nighttime-torches-stone-cottages-cobblestone-path-forest-edge-no-text-no-words-no-characters.png'; const SELENE_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears'; const EMBER_PORTRAIT = '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png'; const MAGE_PORTRAIT = '/cdn/image-anime-fantasy-portrait-old-village-mage-long-white-beard-purple-robes-glowing-staff-mysterious-eyes.png'; const SMITH_PORTRAIT = '/cdn/image-anime-fantasy-portrait-gruff-blacksmith-muscular-bald-soot-covered-leather-apron-anvil-forge-glow.png'; const INNKEEPER_PORTRAIT = '/cdn/image-anime-fantasy-portrait-cheerful-tavern-innkeeper-woman-brown-hair-apron-warm-smile-candlelight.png'; const GRIKS_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-goblin-mage-boy-green-skin-black-hair-yellow-eyes-sly-smirk-pointy-wizard-hat-tattered-blue-robes-charlatan-trickster-close-up-bust-shot.png'; const GOLD = '#fbbf24'; const GOLD_GLOW = 'rgba(251,191,36,0.5)'; const PANEL_ACCENT = '#fde68a'; const playerName = localPlayer.state.playerName || 'Hero'; const villageLocation = localPlayer.state.villageLocation ?? null; const dialogueIndex = localPlayer.state.villageDialogueIndex ?? 0; // ── Dialogue trees for each location ── const mageDialogue = [ { speaker: 'Narrator', portrait: null, text: 'You push open the heavy wooden door. The cabin is cluttered with ancient tomes, dried herbs hang from the ceiling, and a faint purple glow emanates from crystals lining the shelves.' }, { speaker: 'Village Mage', portrait: MAGE_PORTRAIT, text: 'Visitors at this hour? Hmm... you carry the scent of goblin blood and old magic. Come in, come in. I am Aldric.' }, { speaker: 'Selene', portrait: SELENE_PORTRAIT, text: 'Master Aldric! Those crystals on your shelf — are those mana crystals? Do you know how they work? We found dormant ones in the forest!' }, { speaker: 'Village Mage', portrait: MAGE_PORTRAIT, text: 'Mana crystals... yes, I know of them. Lyra\'s legacy. The ones you carry — they resonate with a frequency I haven\'t felt in centuries. You may have stumbled onto something far greater than goblin slaying, young ones.' }, { speaker: 'Village Mage', portrait: MAGE_PORTRAIT, text: 'Return to me when you\'ve rested. I must consult my archives. There is... a ritual. But I need time. And you need sleep.' }, ]; const armoryDialogue = [ { speaker: 'Narrator', portrait: null, text: 'The clang of hammer on steel rings out before you even reach the door. Inside, a massive forge fills the room with orange light. Weapons line every wall.' }, { speaker: 'Blacksmith', portrait: SMITH_PORTRAIT, text: 'Well, well. Fresh from the forest by the look of ya. That sword\'s seen better days, ' + playerName + '. And that bow—' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, text: 'My bow is FINE, thank you very much. But... I could use more arrows. The enchanted kind, if you have them. Fire-tipped, preferably.' }, { speaker: 'Blacksmith', portrait: SMITH_PORTRAIT, text: 'Ha! Fire-tipped, she says. I like your style, red. I can forge what you need — but good steel and enchantments don\'t come free. Bring me goblin ore from the deeper caves, and we\'ll talk.' }, { speaker: playerName, portrait: null, text: 'Goblin ore... noted. We\'ll be back once we\'ve explored further. In the meantime, we\'ll take whatever supplies you can spare.' }, ]; const tavernDialogue = [ { speaker: 'Narrator', portrait: null, text: 'Warmth and laughter spill out as you enter the Rusty Lantern tavern. The smell of roasted meat and spiced ale fills the air. A bard strums softly in the corner.' }, { speaker: 'Innkeeper', portrait: INNKEEPER_PORTRAIT, text: 'Welcome, travelers! You look like you\'ve been through the wringer. Sit, sit! First round\'s on the house for anyone brave enough to fight those goblins.' }, { speaker: 'Ember', portrait: EMBER_PORTRAIT, text: 'Now you\'re speaking my language. Three ales, and whatever\'s cooking — I\'m starving.' }, { speaker: 'Innkeeper', portrait: INNKEEPER_PORTRAIT, text: 'Coming right up! Oh, and a word of warning — the goblins have been getting bolder. Raided a merchant caravan last week. Some folks say there\'s a new chieftain rallying them... something bigger pulling the strings.' }, { speaker: 'Narrator', portrait: null, text: 'As the innkeeper bustles away, you notice a hooded figure sitting alone in the darkest corner of the tavern. They haven\'t touched their drink. Their eyes — glinting beneath the hood — seem fixed directly on your group.' }, ]; const griksDialogue = [ { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'Please, come in — make yourselves comfortable.' }, { speaker: 'Narrator', portrait: null, text: 'He gestures gracefully across his cluttered workshop, crystal shards catching the candlelight on every surface.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'I\'ve been expecting you, actually. Ever since I felt those crystals enter the village... well, let\'s just say they sing to those who know how to listen.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'Each of these crystals contains a sealed soul — a hero, frozen in time.' }, { speaker: 'Narrator', portrait: null, text: 'He holds one up to the light, turning it slowly between his fingers.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'I spent years researching the resonance patterns. The harmonic frequencies required to shatter the seal without harming whoever\'s inside. And I believe... I\'ve finally found the key.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'Here\'s what I propose.' }, { speaker: 'Narrator', portrait: null, text: 'He sets the crystal down carefully and meets your eyes.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'We can attempt to awaken them one at a time — controlled, precise, minimal risk. Or, if you have enough crystals, I can prepare a grand mana circle. Ten crystals, one ritual. It\'s more demanding, but the results speak for themselves.' }, { speaker: 'Narrator', portrait: null, text: 'A knowing smile crosses his face. He adjusts his hat and straightens up — for a moment, he looks less like a goblin and more like the scholar he once was.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'In my experience, the grand ritual generates a far stronger resonance. The most powerful souls... they\'re drawn to that kind of energy. They can\'t help themselves. So then — shall we see who\'s been waiting inside those crystals of yours?' }, ]; const griksGiftDialogue = [ { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'Wait, wait, WAIT! Before you go — Griks felt something during that ritual. Something... familiar.' }, { speaker: 'Narrator', portrait: null, text: 'The goblin\'s eyes go wide. He stumbles back toward his desk, knocking over a stack of tomes, and begins rummaging through a hidden compartment beneath the floorboards.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'That elf girl in your party — Selene, yes? The resonance coming off her... Griks hasn\'t felt anything like it in decades. She\'s connected to something ancient.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'Years ago, Griks found these crystals deep in the Frosthollow Caverns. Every single one carried the same soul signature — HER signature. Griks could never awaken them alone. But now that she\'s here...' }, { speaker: 'Narrator', portrait: null, text: 'He places ten crystals on the table, each pulsing with a cold blue light. Frost crawls across the wood beneath them. You can feel Selene\'s presence stirring inside every one.' }, { speaker: 'Griks', portrait: GRIKS_PORTRAIT, text: 'Take them. All ten. These crystals belong to her — they always did. Consider it a gift from old Griks. You\'ll remember this kindness, yes? When the elf girl unlocks whatever power is sleeping inside her?' }, ]; const dialogueTrees = { tavern: tavernDialogue, griks: griksDialogue, griksGift: griksGiftDialogue }; const locationTitles = { tavern: 'Tavern', griks: 'Mage Cabin', griksGift: 'Mage Cabin' }; // ── If in quest board screen (tavernQuests) ── if (villageLocation === 'tavernQuests') { return renderTavernQuests(localPlayer); } // ── If in party selection screen (tavernParty) ── if (villageLocation === 'tavernParty') { const collection = localPlayer.state.collection ?? []; const copies = localPlayer.state.copies ?? {}; const partyDraft = localPlayer.state.partyDraft ?? []; const ELEMENT_COLORS_P = { fire: { bg: '#dc2626', glow: 'rgba(220,38,38,0.6)', icon: '🔥' }, water: { bg: '#2563eb', glow: 'rgba(37,99,235,0.6)', icon: '💧' }, lightning: { bg: '#eab308', glow: 'rgba(234,179,8,0.6)', icon: '⚡' }, earth: { bg: '#65a30d', glow: 'rgba(101,163,13,0.6)', icon: '⛰️' }, wind: { bg: '#e2e8f0', glow: 'rgba(226,232,240,0.6)', icon: '💨' }, ice: { bg: '#7dd3fc', glow: 'rgba(125,211,252,0.6)', icon: '❄️' } }; const RARITY_COLORS_P = { 3: { border: '#60a5fa', glow: 'rgba(96,165,250,0.5)', bg: 'linear-gradient(135deg, rgba(30,40,80,0.9), rgba(20,30,60,0.95))', accent: '#60a5fa', stars: '★★★' }, 4: { border: '#a855f7', glow: 'rgba(168,85,247,0.6)', bg: 'linear-gradient(135deg, rgba(60,20,80,0.9), rgba(40,15,60,0.95))', accent: '#a855f7', stars: '★★★★' }, 5: { border: '#fbbf24', glow: 'rgba(251,191,36,0.6)', bg: 'linear-gradient(135deg, rgba(80,60,10,0.9), rgba(60,40,5,0.95))', accent: '#fbbf24', stars: '★★★★★' } }; const CLASS_ICONS_P = { 'Warrior': '⚔️', 'Mage': '🔮', 'Archer': '🏹', 'Healer': '✨', 'Assassin': '🗡️' }; const PORTRAITS_P = { 'Ryn': '/cdn/image-anime-shounen-jrpg-portrait-young-male-earth-warrior-brown-hair-green-armor-confident-stance-bust-shot-dark-background.png', 'Kael': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-archer-silver-hair-green-cloak-longbow-bust-shot-dark-background.png', 'Mira': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-healer-blue-hair-white-robes-gentle-smile-bust-shot-dark-background.png', 'Thorn': '/cdn/image-anime-shounen-jrpg-portrait-burly-male-earth-warrior-dark-skin-heavy-armor-greatshield-bust-shot-dark-background.png', 'Lila': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-mage-purple-hair-blue-robes-magic-staff-bust-shot-dark-background.png', 'Finn': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-assassin-blonde-hair-dark-cloak-dual-daggers-bust-shot-dark-background.png', 'Sora': '/cdn/image-anime-shounen-jrpg-portrait-young-female-lightning-mage-short-yellow-hair-electric-eyes-purple-robes-bust-shot-dark-background.png', 'Blaze': '/cdn/image-anime-shounen-jrpg-portrait-muscular-male-fire-warrior-spiky-red-hair-flame-greatsword-bust-shot-dark-background.png', 'Luna': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-healer-long-silver-hair-moonlight-aura-white-dress-bust-shot-dark-background.png', 'Zephyr': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-assassin-teal-hair-scarf-swift-pose-bust-shot-dark-background.png', 'Iris': '/cdn/image-anime-shounen-jrpg-portrait-young-female-lightning-archer-violet-hair-gold-bow-electric-arrows-bust-shot-dark-background.png', 'Selene': '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears', 'Ember': '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png', 'Astrid': '/cdn/image-anime-shounen-jrpg-portrait-legendary-female-fire-warrior-golden-armor-flame-hair-blazing-sword-bust-shot-dark-background.png', 'Kairos': '/cdn/image-anime-shounen-jrpg-portrait-legendary-male-lightning-mage-white-hair-golden-eyes-storm-cloak-bust-shot-dark-background.png', 'Seraphina': '/cdn/image-anime-shounen-jrpg-portrait-legendary-female-wind-healer-long-green-hair-angelic-wings-radiant-staff-bust-shot-dark-background.png', 'Ria': '/cdn/image-anime-shounen-jrpg-portrait-legendary-elf-druid-female-white-hair-blue-eyes-pointed-ears-green-nature-robes-vines-bust-shot-dark-background.png', 'Less': '/cdn/image-anime-jrpg-portrait-legendary-elf-girl-wind-archer-long-white-hair-blue-eyes-pointed-ears-elegant-silver-green-outfit-ornate-bow-bust-shot-dark-background.png', 'Juvea': '/cdn/image-anime-fantasy-jrpg-portrait-elf-girl-very-thick-wide-long-pointed-elf-ears-extending-horizontally-blonde-long-hair-blue-eyes-purple-gold-lightning-mage-robes-bust-shot-dark-background.png' }; const PRESTIGE_PORTRAITS = { 'Ryn': '/cdn/image-anime-shounen-jrpg-portrait-young-male-earth-warrior-brown-hair-green-armor-confident-stance-bust-shot-dark-background.png?modify=black-hair-gold-armor', 'Kael': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-archer-silver-hair-green-cloak-longbow-bust-shot-dark-background.png?modify=black-hair-purple-cloak', 'Mira': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-healer-blue-hair-white-robes-gentle-smile-bust-shot-dark-background.png?modify=pink-hair-black-robes', 'Thorn': '/cdn/image-anime-shounen-jrpg-portrait-burly-male-earth-warrior-dark-skin-heavy-armor-greatshield-bust-shot-dark-background.png?modify=white-hair-crimson-armor', 'Lila': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-mage-purple-hair-blue-robes-magic-staff-bust-shot-dark-background.png?modify=white-hair-gold-robes', 'Finn': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-assassin-blonde-hair-dark-cloak-dual-daggers-bust-shot-dark-background.png?modify=white-hair-crimson-cloak', 'Sora': '/cdn/image-anime-shounen-jrpg-portrait-young-female-lightning-mage-short-yellow-hair-electric-eyes-purple-robes-bust-shot-dark-background.png?modify=black-hair-white-robes', 'Blaze': '/cdn/image-anime-shounen-jrpg-portrait-muscular-male-fire-warrior-spiky-red-hair-flame-greatsword-bust-shot-dark-background.png?modify=white-hair-black-armor', 'Luna': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-healer-long-silver-hair-moonlight-aura-white-dress-bust-shot-dark-background.png?modify=black-hair-midnight-purple-dress', 'Zephyr': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-assassin-teal-hair-scarf-swift-pose-bust-shot-dark-background.png?modify=crimson-hair-black-outfit', 'Iris': '/cdn/image-anime-shounen-jrpg-portrait-young-female-lightning-archer-violet-hair-gold-bow-electric-arrows-bust-shot-dark-background.png?modify=white-hair-dark-purple-outfit', 'Selene': '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears-red-hair-red-dress', 'Ember': '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png?modify=white-hair-ice-blue-cloak', 'Astrid': '/cdn/image-anime-shounen-jrpg-portrait-legendary-female-fire-warrior-golden-armor-flame-hair-blazing-sword-bust-shot-dark-background.png?modify=obsidian-black-armor-white-hair', 'Kairos': '/cdn/image-anime-shounen-jrpg-portrait-legendary-male-lightning-mage-white-hair-golden-eyes-storm-cloak-bust-shot-dark-background.png?modify=black-hair-crimson-cloak', 'Seraphina': '/cdn/image-anime-shounen-jrpg-portrait-legendary-female-wind-healer-long-green-hair-angelic-wings-radiant-staff-bust-shot-dark-background.png?modify=silver-hair-dark-wings-midnight-robes', 'Ria': '/cdn/image-anime-shounen-jrpg-portrait-legendary-elf-druid-female-white-hair-blue-eyes-pointed-ears-green-nature-robes-vines-bust-shot-dark-background.png?modify=black-hair-red-eyes-autumn-red-robes', 'Less': '/cdn/image-anime-jrpg-portrait-legendary-elf-girl-wind-archer-long-white-hair-blue-eyes-pointed-ears-elegant-silver-green-outfit-ornate-bow-bust-shot-dark-background.png?modify=black-hair-red-eyes-midnight-blue-outfit', 'Juvea': '/cdn/image-anime-fantasy-jrpg-portrait-elf-girl-very-thick-wide-long-pointed-elf-ears-extending-horizontally-blonde-long-hair-blue-eyes-purple-gold-lightning-mage-robes-bust-shot-dark-background.png?modify=black-hair-red-eyes-midnight-purple-robes' }; const KNIGHT_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-knight-blue-armor-helm-sword-shield-heroic-bust-shot-dark-background.png'; // Build party slots from draft picks const partySlots = []; for (let si = 0; si < 3; si++) { const draftName = partyDraft[si] || null; if (draftName) { if (draftName.toLowerCase() === playerName.toLowerCase()) { partySlots.push({ name: playerName, class: 'Knight', element: 'earth', rarity: 4, portrait: KNIGHT_PORTRAIT, locked: false }); } else { const ch = collection.find(c => c.name.toLowerCase() === draftName.toLowerCase()); if (ch) { const prestigePortrait = ch.prestiged && ch.skinActive && PRESTIGE_PORTRAITS[ch.name] ? PRESTIGE_PORTRAITS[ch.name] : null; partySlots.push({ name: ch.name, class: ch.class, element: ch.element, rarity: ch.rarity, portrait: prestigePortrait || PORTRAITS_P[ch.name] || KNIGHT_PORTRAIT, locked: false }); } else { partySlots.push(null); } } } else { partySlots.push(null); } } // Party lineup at top const partyLineupHtml = partySlots.map((slot, i) => { if (!slot) { return `

Slot ${i + 1}

`; } const rc = RARITY_COLORS_P[slot.rarity] || RARITY_COLORS_P[3]; const ec = ELEMENT_COLORS_P[slot.element] || ELEMENT_COLORS_P.fire; return `

${slot.locked ? `

` : ` `}

${slot.name}

${slot.locked ? '⭐ Leader' : 'Slot ' + (i + 1)}

`; }).join(''); // Collection grid // Build full roster: Main character + collection heroes const mainChar = { name: playerName, class: 'Knight', element: 'earth', rarity: 5, isMainCharacter: true }; const fullRoster = [mainChar].concat(collection); const collectionCardsHtml = fullRoster.map(ch => { const isSelected = partyDraft.some(d => d && d.toLowerCase() === ch.name.toLowerCase()); const rc = RARITY_COLORS_P[ch.rarity] || RARITY_COLORS_P[3]; const ec = ELEMENT_COLORS_P[ch.element] || ELEMENT_COLORS_P.fire; const portrait = ch.isMainCharacter ? '/cdn/image-anime-shounen-jrpg-portrait-knight-blue-armor-helm-sword-shield-heroic-bust-shot-dark-background.png' : (PORTRAITS_P[ch.name] || ('/cdn/image-anime-shounen-jrpg-portrait-' + ch.element + '-' + (ch.class || 'warrior').toLowerCase() + '-hero-bust-shot-no-text-dark-background.png')); const classIcon = CLASS_ICONS_P[ch.class] || '⚔️'; const isFull = partyDraft.length >= 3 && !isSelected; return `

${ec.icon}

${isSelected ? `

` : ''} ${isSelected ? `

${partyDraft.findIndex(d => d && d.toLowerCase() === ch.name.toLowerCase()) + 1}

` : ''}

${classIcon} ${ch.name}

${(RARITY_COLORS_P[ch.rarity] || RARITY_COLORS_P[3]).stars}

${ch.class}

${copies[ch.name] > 0 ? `

×${copies[ch.name]} copies

` : ''} ${!ch.prestiged && (copies[ch.name] || 0) >= 10 ? ` ` : ''} ${ch.prestiged ? ` ` : ''}

${ch.prestiged ? `

` : ''} ${isSelected && !ch.prestiged ? `

` : ''}

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

Party Formation

Choose your team of 3

${partyLineupHtml}

${partyDraft.length}/3 Heroes Selected

${collectionCardsHtml}

${collection.length === 0 ? `

No heroes recruited yet Visit Griks' Mage Cabin to summon heroes

` : ''}

`; } // ── If inside a location, render dialogue ── if (villageLocation && dialogueTrees[villageLocation]) { const lines = dialogueTrees[villageLocation]; const idx = Math.min(dialogueIndex, lines.length - 1); const line = lines[idx]; const isLast = idx >= lines.length - 1; const nameColors = { 'Narrator': { color: 'rgba(200,200,220,0.9)', glow: 'transparent' }, 'Selene': { color: '#93c5fd', glow: 'rgba(147,197,253,0.5)' }, 'Ember': { color: '#fb923c', glow: 'rgba(251,146,60,0.5)' }, 'Village Mage': { color: '#c084fc', glow: 'rgba(192,132,252,0.5)' }, 'Blacksmith': { color: '#f59e0b', glow: 'rgba(245,158,11,0.5)' }, 'Innkeeper': { color: '#4ade80', glow: 'rgba(74,222,128,0.5)' }, 'Griks': { color: '#fbbf24', glow: 'rgba(251,191,36,0.5)' }, }; const nc = nameColors[line.speaker] || { color: GOLD, glow: GOLD_GLOW }; const textStyle = line.speaker === 'Narrator' ? 'color: rgba(220,215,230,0.95); font-style: italic;' : 'color: rgba(245,240,255,0.95);'; // Portrait for the knight (playerName as speaker) const portrait = line.speaker === playerName ? null : line.portrait; return `

${locationTitles[villageLocation] || 'Village'}

${portrait ? `

` : ''}

${line.speaker !== 'Narrator' ? `

${line.speaker}

` : ''}

${line.text}

${isLast ? ` ${villageLocation === 'tavern' ? 'Assemble Party' : 'Return to Village'} ` : ` Click to continue `}

${lines.map((_, i) => { const active = i === idx; const passed = i < idx; return '

'; }).join('')}

`; } // ── Village overview — hotspot selection ── return `

${Array.from({length: 12}, (_, i) => `

`).join('')}

Thornhaven Village

A quiet village at the forest's edge — explore and prepare for the journey ahead.

Choose a location to explore

`; } // ─── Gacha Summoning Screen ─── function renderGachaScreen(localPlayer) { var GRIKS_PORTRAIT = '/cdn/image-anime-shounen-jrpg-portrait-goblin-mage-boy-green-skin-black-hair-yellow-eyes-sly-smirk-pointy-wizard-hat-tattered-blue-robes-charlatan-trickster-close-up-bust-shot.png'; var GACHA_GOLD = '#fbbf24'; var GACHA_GOLD_GLOW = 'rgba(251,191,36,0.5)'; var crystals = localPlayer.state.crystals ?? 0; var gachaPhase = localPlayer.state.gachaPhase ?? 'idle'; var gachaResults = localPlayer.state.gachaResults ?? null; var collection = localPlayer.state.collection ?? []; var copies = localPlayer.state.copies ?? {}; var ELEMENT_COLORS = { fire: { bg: '#dc2626', glow: 'rgba(220,38,38,0.6)', icon: '\u{1F525}' }, water: { bg: '#2563eb', glow: 'rgba(37,99,235,0.6)', icon: '\u{1F4A7}' }, lightning: { bg: '#eab308', glow: 'rgba(234,179,8,0.6)', icon: '\u26A1' }, earth: { bg: '#65a30d', glow: 'rgba(101,163,13,0.6)', icon: '\u26F0\uFE0F' }, wind: { bg: '#e2e8f0', glow: 'rgba(226,232,240,0.6)', icon: '\u{1F4A8}' }, ice: { bg: '#7dd3fc', glow: 'rgba(125,211,252,0.6)', icon: '\u2744\uFE0F' } }; var GACHA_PORTRAITS = { 'Ryn': '/cdn/image-anime-shounen-jrpg-portrait-young-male-earth-warrior-brown-hair-green-armor-confident-stance-bust-shot-dark-background.png', 'Kael': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-archer-silver-hair-green-cloak-longbow-bust-shot-dark-background.png', 'Mira': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-healer-blue-hair-white-robes-gentle-smile-bust-shot-dark-background.png', 'Thorn': '/cdn/image-anime-shounen-jrpg-portrait-burly-male-earth-warrior-dark-skin-heavy-armor-greatshield-bust-shot-dark-background.png', 'Lila': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-mage-purple-hair-blue-robes-magic-staff-bust-shot-dark-background.png', 'Finn': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-assassin-blonde-hair-dark-cloak-dual-daggers-bust-shot-dark-background.png', 'Sora': '/cdn/image-anime-shounen-jrpg-portrait-young-female-lightning-mage-short-yellow-hair-electric-eyes-purple-robes-bust-shot-dark-background.png', 'Blaze': '/cdn/image-anime-shounen-jrpg-portrait-muscular-male-fire-warrior-spiky-red-hair-flame-greatsword-bust-shot-dark-background.png', 'Luna': '/cdn/image-anime-shounen-jrpg-portrait-young-female-water-healer-long-silver-hair-moonlight-aura-white-dress-bust-shot-dark-background.png', 'Zephyr': '/cdn/image-anime-shounen-jrpg-portrait-young-male-wind-assassin-teal-hair-scarf-swift-pose-bust-shot-dark-background.png', 'Iris': '/cdn/image-anime-shounen-jrpg-portrait-young-female-lightning-archer-violet-hair-gold-bow-electric-arrows-bust-shot-dark-background.png', 'Selene': '/cdn/image-anime-shounen-jrpg-portrait-ice-mage-girl-silvery-blue-hair-large-expressive-eyes-white-blue-battle-robes-frost-particles-dark-forest-night-background.png?modify=pointed-elf-ears', 'Ember': '/cdn/image-fantasy-anime-portrait-fire-archer-woman-red-hair-orange-cloak-bow.png', 'Astrid': '/cdn/image-anime-shounen-jrpg-portrait-legendary-female-fire-warrior-golden-armor-flame-hair-blazing-sword-bust-shot-dark-background.png', 'Kairos': '/cdn/image-anime-shounen-jrpg-portrait-legendary-male-lightning-mage-white-hair-golden-eyes-storm-cloak-bust-shot-dark-background.png', 'Seraphina': '/cdn/image-anime-shounen-jrpg-portrait-legendary-female-wind-healer-long-green-hair-angelic-wings-radiant-staff-bust-shot-dark-background.png', 'Ria': '/cdn/image-anime-shounen-jrpg-portrait-legendary-elf-druid-female-white-hair-blue-eyes-pointed-ears-green-nature-robes-vines-bust-shot-dark-background.png', 'Less': '/cdn/image-anime-jrpg-portrait-legendary-elf-girl-wind-archer-long-white-hair-blue-eyes-pointed-ears-elegant-silver-green-outfit-ornate-bow-bust-shot-dark-background.png', 'Juvea': '/cdn/image-anime-fantasy-jrpg-portrait-elf-girl-very-thick-wide-long-pointed-elf-ears-extending-horizontally-blonde-long-hair-blue-eyes-purple-gold-lightning-mage-robes-bust-shot-dark-background.png' }; var RARITY_STYLES = { 3: { label: '\u2605\u2605\u2605', border: 'rgba(96,165,250,0.6)', bg: 'linear-gradient(135deg, rgba(30,40,80,0.95), rgba(20,30,60,0.95))', glow: 'rgba(96,165,250,0.3)', accent: '#60a5fa' }, 4: { label: '\u2605\u2605\u2605\u2605', border: 'rgba(168,85,247,0.7)', bg: 'linear-gradient(135deg, rgba(60,20,80,0.95), rgba(40,15,60,0.95))', glow: 'rgba(168,85,247,0.4)', accent: '#a855f7' }, 5: { label: '\u2605\u2605\u2605\u2605\u2605', border: 'rgba(251,191,36,0.8)', bg: 'linear-gradient(135deg, rgba(80,60,10,0.95), rgba(60,40,5,0.95))', glow: 'rgba(251,191,36,0.5)', accent: '#fbbf24' } }; var CLASS_ICONS = { 'Warrior': '\u2694\uFE0F', 'Mage': '\u{1F52E}', 'Archer': '\u{1F3F9}', 'Healer': '\u2728', 'Assassin': '\u{1F5E1}\uFE0F' }; // ── Gacha Styles (always included) ── var gachaStyles = [ '' ].join('\n'); // ── RESULTS PHASE ── if (gachaPhase === 'results' && gachaResults && gachaResults.length > 0) { var isSingle = gachaResults.length === 1; // Determine best rarity for background treatment var bestRarity = 3; var has5Star = false; var has4Star = false; for (var bi = 0; bi < gachaResults.length; bi++) { if (gachaResults[bi].rarity > bestRarity) bestRarity = gachaResults[bi].rarity; if (gachaResults[bi].rarity === 5) has5Star = true; if (gachaResults[bi].rarity === 4) has4Star = true; } var titleColor = bestRarity === 5 ? GACHA_GOLD : (bestRarity === 4 ? '#a855f7' : '#60a5fa'); var titleGlow = bestRarity === 5 ? GACHA_GOLD_GLOW : (bestRarity === 4 ? 'rgba(168,85,247,0.5)' : 'rgba(96,165,250,0.4)'); var titleText = isSingle ? 'Summoning Result' : 'Summoning Results'; // Background color based on best rarity var bgGradient = 'radial-gradient(ellipse at center, rgba(30,15,60,0.97), rgba(5,2,15,0.99))'; if (has5Star) bgGradient = 'radial-gradient(ellipse at center, rgba(60,40,10,0.97), rgba(15,8,2,0.99))'; else if (has4Star) bgGradient = 'radial-gradient(ellipse at center, rgba(40,15,60,0.97), rgba(10,3,20,0.99))'; // Build dramatic light rays SVG for 5-star pulls var raysHtml = ''; if (has5Star) { var rayPaths = ''; for (var rayI = 0; rayI < 16; rayI++) { var rayAngle = (rayI / 16) * 360; var rayRad = rayAngle * Math.PI / 180; var rayX1 = 500 + Math.cos(rayRad) * 60; var rayY1 = 500 + Math.sin(rayRad) * 60; var rayX2 = 500 + Math.cos(rayRad) * 500; var rayY2 = 500 + Math.sin(rayRad) * 500; var raySpread = 0.12; var rayX2L = 500 + Math.cos(rayRad - raySpread) * 500; var rayY2L = 500 + Math.sin(rayRad - raySpread) * 500; var rayX2R = 500 + Math.cos(rayRad + raySpread) * 500; var rayY2R = 500 + Math.sin(rayRad + raySpread) * 500; var rayOp = (rayI % 2 === 0) ? '0.15' : '0.08'; rayPaths += ''; } raysHtml = '

' + '

'; } // Purple ambient glow for 4-star var ambientGlowHtml = ''; if (has4Star && !has5Star) { ambientGlowHtml = '

'; } // CSS particle effects — floating motes var particleColor = has5Star ? GACHA_GOLD : (has4Star ? '#c084fc' : '#93c5fd'); var particlesHtml = ''; for (var pi = 0; pi < 20; pi++) { var px = (pi * 37 + 13) % 100; var py = 50 + (pi * 23 + 7) % 50; var pDelay = (pi * 0.3) + 's'; var pSize = 2 + (pi % 3); var pAnim = pi % 3 === 0 ? 'gachaParticleDrift' : (pi % 3 === 1 ? 'gachaParticleDrift2' : 'gachaParticleDrift3'); var pDur = (2 + (pi % 3)) + 's'; particlesHtml += '

'; } // Build card items var cardItems = []; for (var ci = 0; ci < gachaResults.length; ci++) { var ch = gachaResults[ci]; var rs = RARITY_STYLES[ch.rarity] || RARITY_STYLES[3]; var ec = ELEMENT_COLORS[ch.element] || ELEMENT_COLORS.fire; var isLeg = ch.rarity === 5; var is4 = ch.rarity === 4; var portraitUrl = ch.portrait || (GACHA_PORTRAITS[ch.name]) || ('/cdn/image-anime-shounen-jrpg-portrait-' + ch.element + '-' + (ch.class || 'warrior').toLowerCase() + '-hero-bust-shot-no-text-dark-background.png'); var copyCount = ch.copyCount || copies[ch.name] || 0; var isDupe = ch.isDupe || false; var skinUnlocked = ch.skinUnlocked || (copyCount >= 10); // Card dimensions — single pull is BIG and dramatic var cardW = isSingle ? 280 : 140; var cardH = isSingle ? 380 : 200; var animDelay = isSingle ? '0.2' : (0.1 + ci * 0.12).toFixed(2); var cardAnim = isSingle ? 'gachaSingleReveal' : 'gachaCardPop'; var cardAnimDur = isSingle ? '0.8s' : '0.5s'; // Star display — actual colored star symbols var starColor = isLeg ? '#fbbf24' : (is4 ? '#c084fc' : '#60a5fa'); var starGlow = isLeg ? 'rgba(251,191,36,0.8)' : (is4 ? 'rgba(192,132,252,0.6)' : 'rgba(96,165,250,0.5)'); var starsHtml = ''; var starSize = isSingle ? '16' : '11'; for (var si = 0; si < ch.rarity; si++) { var starDelay = (parseFloat(animDelay) + 0.3 + si * 0.08).toFixed(2); starsHtml += '\u2605'; } // Name with NEW! or dupe count var nameHtml = ''; if (isDupe) { nameHtml = ch.name + ' +' + copyCount + ''; } else { nameHtml = ch.name; } // NEW! ribbon for new characters var newBadgeHtml = ''; if (!isDupe) { var newBadgeDelay = (parseFloat(animDelay) + 0.4).toFixed(2); if (isSingle) { newBadgeHtml = '

' + '

NEW!

'; } else { newBadgeHtml = '

' + '

NEW!

'; } } // Skin unlock banner var skinBanner = ''; if (skinUnlocked) { skinBanner = '

' + '' + '\u2726 Skin Unlocked! \u2726

'; } // Dupe progress var dupeProgress = ''; if (isDupe && !skinUnlocked) { dupeProgress = '' + copyCount + '/10'; } // Element gem badge — faceted look var gemSize = isSingle ? 32 : 24; var gemHalf = gemSize / 2; var elementBadge = '

' + '

'; // Inner glow and shimmer for high rarity var innerGlowHtml = ''; if (isLeg) { innerGlowHtml = '

' + '

'; } else if (is4) { innerGlowHtml = '

'; } else { innerGlowHtml = '

'; } // Card border treatment var borderWidth = isLeg ? '3' : '2'; var outerGlow = isLeg ? '0 0 30px ' + rs.glow + ', 0 0 60px rgba(251,191,36,0.2)' : (is4 ? '0 0 20px ' + rs.glow + ', 0 0 40px rgba(168,85,247,0.15)' : '0 0 12px ' + rs.glow); var cardBg = isLeg ? 'linear-gradient(160deg, rgba(80,60,10,0.95), rgba(40,25,5,0.98))' : (is4 ? 'linear-gradient(160deg, rgba(60,20,80,0.95), rgba(30,10,50,0.98))' : 'linear-gradient(160deg, rgba(20,30,70,0.95), rgba(12,18,50,0.98))'); // Per-card 5-star radiance behind card var cardRadiance = ''; if (isLeg && !isSingle) { cardRadiance = '

'; } var nameFontSize = isSingle ? '22px' : '13px'; var classSize = isSingle ? '13px' : '10px'; var padSize = isSingle ? '14px' : '8px'; // Ornamental corner filigree SVG var ornW = cardW; var ornH = cardH; var ornCol = rs.accent; var ornGlow = rs.glow; var cornerSize = isSingle ? 28 : 18; var cs = cornerSize; var filigreeOpacity = isLeg ? '0.9' : (is4 ? '0.7' : '0.5'); // Dragon silhouette element color var drgElCol = ec.bg; var ornamentSvg = ''; var card = '

' + cardRadiance + '

' // Portrait — vivid, no luminosity blend + '

' // Gradient overlay — softer at top, stronger at bottom for text readability + '

' // Rarity-colored top edge glow + '

' // Ornamental corner filigree + ornamentSvg // Inner glow + shimmer + innerGlowHtml // Element gem + elementBadge // NEW badge + newBadgeHtml // Skin banner + skinBanner // Bottom info panel + '

' // Stars row + '

' + starsHtml + '

' // Name + '

' + nameHtml + '

' // Class + dupe + '

' + '' + (CLASS_ICONS[ch.class] || '') + ' ' + (ch.class || '') + '' + dupeProgress + '

'; cardItems.push(card); } var gridClass = isSingle ? 'flex justify-center items-center' : 'grid grid-cols-5 gap-4 max-w-[820px]'; // Build the full results screen return gachaStyles + '

' // Light rays layer (5-star) + raysHtml // Purple ambient glow layer (4-star) + ambientGlowHtml // CSS particle motes + particlesHtml // Vignette overlay + '

' // Title + '

' + '

' + titleText + '

' // Decorative line under title + '

' + '

' // Cards + '

' + cardItems.join('') + '

' // Continue button + '' + '

'; } // ── PULLING / CRYSTAL / MELT PHASES ── if (gachaPhase === 'pulling' || gachaPhase === 'crystal' || gachaPhase === 'shatter') { var pullingAnim = gachaPhase === 'pulling' ? 'gachaPullingIntense' : 'gachaPulse'; var circleSpeed = gachaPhase === 'pulling' ? '8s' : '30s'; var innerSpeed = gachaPhase === 'pulling' ? '5s' : '20s'; var centerContent = ''; if (gachaPhase === 'crystal') { centerContent = '

' + '

'; } if (gachaPhase === 'shatter') { centerContent = '

' + '

'; } // Build summoning circle SVG for animation phase var runeChars = ['\u16A0','\u16A2','\u16A6','\u16A8','\u16B1','\u16B2','\u16B7','\u16B9','\u16BA','\u16BE','\u16C1','\u16C3']; var innerRunesSvg = ''; var outerRunesSvg = ''; for (var ri = 0; ri < runeChars.length; ri++) { var angle1 = (ri / runeChars.length) * 360; var rad1 = angle1 * Math.PI / 180; var rx1 = 200 + Math.cos(rad1) * 120; var ry1 = 200 + Math.sin(rad1) * 120; innerRunesSvg += '' + runeChars[ri] + ''; var angle2 = angle1 + 15; var rad2 = angle2 * Math.PI / 180; var rx2 = 200 + Math.cos(rad2) * 165; var ry2 = 200 + Math.sin(rad2) * 165; outerRunesSvg += '' + runeChars[ri] + ''; } return gachaStyles + '

' + '

' + '' + '' + centerContent + '

' + '

' + 'Summoning...' + '

' + '' + '

'; } // ── IDLE PHASE — Main Summoning Screen ── var runeCharsIdle = ['\u16A0','\u16A2','\u16A6','\u16A8','\u16B1','\u16B2','\u16B7','\u16B9','\u16BA','\u16BE','\u16C1','\u16C3']; var innerRunesIdle = ''; var outerRunesIdle = ''; for (var ii = 0; ii < runeCharsIdle.length; ii++) { var aI = (ii / runeCharsIdle.length) * 360; var rI = aI * Math.PI / 180; var xI = 200 + Math.cos(rI) * 120; var yI = 200 + Math.sin(rI) * 120; innerRunesIdle += '' + runeCharsIdle[ii] + ''; var aO = aI + 15; var rO = aO * Math.PI / 180; var xO = 200 + Math.cos(rO) * 165; var yO = 200 + Math.sin(rO) * 165; outerRunesIdle += '' + runeCharsIdle[ii] + ''; } // Build collection badges var copiesEntries = Object.entries(copies).filter(function(e) { return e[1] > 0; }); var collectionBadges = ''; if (copiesEntries.length > 0) { var badges = []; for (var cb = 0; cb < copiesEntries.length; cb++) { var cName = copiesEntries[cb][0]; var cCount = copiesEntries[cb][1]; var cSkin = cCount >= 10; var borderCol = cSkin ? 'rgba(251,191,36,0.5)' : 'rgba(255,255,255,0.1)'; var textCol = cSkin ? '#fbbf24' : 'rgba(220,210,240,0.7)'; var suffix = cSkin ? ' \u2726' : ''; badges.push('' + cName + ' +' + cCount + suffix + ''); } collectionBadges = '

' + badges.join('') + '

'; } // Disable states for buttons var canPull1 = crystals >= 1; var canPull10 = crystals >= 10; var btn1Disabled = canPull1 ? '' : ' opacity-40 cursor-not-allowed'; var btn1Click = canPull1 ? "sendAction('gachaPull1')" : ''; var btn10Disabled = canPull10 ? '' : ' opacity-40 cursor-not-allowed'; var btn10Click = canPull10 ? "sendAction('gachaPull10')" : ''; return gachaStyles + '

' // Top bar: back button + crystal counter + '

' + '' + '

' + '

' + '' + crystals + '' + 'Crystals' + '

' // Griks portrait + flavor text + '

' + '

' + '"Place your crystals upon the circle... let us see who answers the call."' + '

' // Summoning Circle + '

' + '

' + '' + '

' // Summon Buttons + '

' + '' + '' + '

' // Collection count + badges + '

' + '

Collection: ' + collection.length + ' unique heroes

' + collectionBadges + '

' + '

'; } // ─── Main Export ─── export default function(localPlayer, world) { // ── Screen routing ── const screen = localPlayer.state?.screen; // Visual novel dialogue (intro) if (screen === 'visualNovel') { return renderVisualNovel(localPlayer); } // Post-battle visual novel if (screen === 'postBattleVN') { return renderPostBattleVN(localPlayer); } // Village hub (explore after chapter 1) if (screen === 'village') { return renderVillageHub(localPlayer); } // Gacha summoning screen if (screen === 'gacha') { return renderGachaScreen(localPlayer); } // Chapter Complete screen if (screen === 'chapterComplete') { return `

Chapter 1 Complete

Congratulations on completing the first chapter! You have unlocked Free Play.

In Free Play, you can take on quests at the inn to earn crystals for summoning new heroes.

`; } // Village intro VN (before village hub) if (screen === 'villageIntro') { return renderVillageIntro(localPlayer); } // Start menu (default when no screen or explicitly set) if (screen === 'startMenu' || !screen) { return renderStartingMenu(localPlayer); } // Battle mode — only screen field controls routing now if (screen !== 'battle') { // Unknown screen, fallback to start menu return renderStartingMenu(localPlayer); } // ── Battle UI (existing) ── const managers = world.query({ tags: ['game-manager'] }); const gm = managers[0]?.state ?? {}; const phase = gm.phase ?? 'ally-turn'; const subPhase = gm.subPhase ?? 'select-unit'; const selectedId = gm.selectedUnitId ?? null; const actedUnits = Array.isArray(gm.actedUnits) ? gm.actedUnits : []; const unitActions = gm.unitActions ?? {}; const turnNumber = gm.turnNumber ?? 1; const victory = gm.victory ?? null; // Fetch all units const allUnits = world.query({ tags: ['unit'] }); // Find selected unit const selectedUnit = selectedId ? allUnits.find(u => u.id === selectedId) : null; const isSelectedAlly = selectedUnit?.state?.team === 'ally'; // Get unitActions for the selected unit const selectedUnitActions = selectedId ? (unitActions[selectedId] || { hasMoved: false, hasAttacked: false }) : null; // Victory/defeat overlay const isGameOver = phase === 'game-over'; const battleSource = localPlayer.state.battleSource ?? null; const questDifficulty = localPlayer.state.questData ? localPlayer.state.questData.difficulty : 'Easy'; const victoryOverlay = isGameOver && victory === true ? renderVictoryOverlay(turnNumber, battleSource, questDifficulty) : ''; const defeatOverlay = isGameOver && victory === false ? renderDefeatOverlay(battleSource) : ''; return ` ${svgDefs()}

${renderTopBar(phase, turnNumber)} ${!isGameOver ? renderSelectedUnit(selectedUnit, isSelectedAlly) : ''} ${!isGameOver ? renderElementWheel() : ''} ${!isGameOver ? renderActionMenu(selectedUnit, selectedUnitActions, subPhase) : ''} ${!isGameOver ? renderTargetingHint(selectedUnit, subPhase) : ''} ${renderTurnOrderPanel(allUnits, selectedId, actedUnits)}

Q E Rotate

🖱 Scroll Zoom

${victoryOverlay} ${defeatOverlay} `; }

CRYSTAL

SAGA

Party Formation

Thornhaven Village

Chapter 1 Complete

Spawn