${heroPortrait ? `

` : `${char.emoji}`}

${char.name} Lv ${lv}

${Math.max(0, Math.round(cur))} / ${max}

${ready ? 'Ready' : Math.round(atb * 100) + '%'}

${effectChips(entityId)}

${favorBadge(entityId)}

`; } function enemyTypeFor(enemyId) { const SLOT_BY = { "enemy-1": "1", "enemy-2": "2", "enemy-3": "3" }; const slot = SLOT_BY[enemyId]; const typeId = slot ? enemyRoster[slot] : null; return (typeId && ENEMY_TYPES[typeId]) || null; } function enemyBadge(enemyId) { // Empty slot (no type assigned in roster) — don't render a card at all if (!enemyTypeFor(enemyId)) return ""; const e = enemyTypeFor(enemyId) || { name: enemyId, color: "oklch(0.5 0.2 25)", emoji: "💀", level: 1, stats: { defensa: 10, rapidez: 60 } }; const lv = entityLevels[enemyId] || e.level || 1; const max = getMaxHP(e.stats || { defensa: 10, rapidez: 60 }, lv, true); const cur = typeof entityHP[enemyId] === "number" ? entityHP[enemyId] : max; const hpPct = Math.max(0, Math.min(1, cur / max)); const hpClass = hpPct < 0.25 ? "low" : hpPct < 0.5 ? "mid" : "ok"; const atbMap = state.atb || {}; const atb = Math.max(0, Math.min(1, typeof atbMap[enemyId] === "number" ? atbMap[enemyId] : 0)); const ready = atb >= 0.999; const enemyActiveCls = activeTurn === enemyId ? " is-active" : ""; return `

Lv ${lv} ${e.name}

${Math.max(0, Math.round(cur))} / ${max}

${ready ? 'Ready' : Math.round(atb * 100) + '%'}

${e.portrait ? `

` : `${e.emoji}`}

${effectChips(enemyId)}

${favorBadge(enemyId)}

`; } const ENTITY_INFO = (entityId) => { if (entityId && entityId.indexOf("hero-") === 0) { const slot = entityId === "hero-warrior" ? "A" : entityId === "hero-mage" ? "B" : "C"; const charId = roster[slot] || "pikachad"; const char = CHARS[charId] || CHARS.pikachad; return { side: "hero", name: char.name, emoji: char.emoji, color: char.color, portrait: PORTRAITS[charId] || null, }; } const et = enemyTypeFor(entityId); if (et) return { side: "enemy", name: et.name, emoji: et.emoji, color: et.color, portrait: et.portrait || null }; const e = ENEMIES[entityId]; if (e) return { side: "enemy", name: e.name, emoji: e.emoji, color: e.color, portrait: e.portrait || null }; return { side: "other", name: entityId, emoji: "?", color: "oklch(0.5 0.05 230)", portrait: null }; }; const turnQueue = () => { const atbMap = state.atb || {}; const queue = Array.isArray(state.turnQueue) ? state.turnQueue : []; // Only the 3 real enemy slots + 3 heroes. The old list included // enemy-4/5/6-boss placeholders that never get initialized — they'd // sneak in to fill gaps when a real enemy died. Drop them. const ids = ["hero-warrior", "hero-mage", "hero-archer", "enemy-1", "enemy-2", "enemy-3"].filter(id => !deadSet[id]); // Order: active first, then the real turnQueue (FIFO = real attack order), then the rest by ATB descending. const queueIndex = {}; queue.forEach((id, i) => { queueIndex[id] = i; }); const sorted = ids.slice().sort((a, b) => { if (activeTurn && a === activeTurn) return -1; if (activeTurn && b === activeTurn) return 1; const aIn = queueIndex[a] !== undefined; const bIn = queueIndex[b] !== undefined; if (aIn && bIn) return queueIndex[a] - queueIndex[b]; if (aIn) return -1; if (bIn) return 1; const va = typeof atbMap[a] === "number" ? atbMap[a] : 0; const vb = typeof atbMap[b] === "number" ? atbMap[b] : 0; return vb - va; }); const slots = sorted.slice(0, 6).map((id, i) => { const info = ENTITY_INFO(id); const atb = Math.max(0, Math.min(1, typeof atbMap[id] === "number" ? atbMap[id] : 0)); const pct = Math.round(atb * 100); const isActive = activeTurn === id; const portraitHTML = info.portrait ? ` ${info.name}

` : `${info.emoji}`; return `

${portraitHTML}

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

${slots}

`; }; const slotColumn = (slot) => { const charId = roster[slot] || "pikachad"; const char = CHARS[charId] || CHARS.pikachad; const keys = SLOT_KEYS[slot]; const lv = levelOf(charId); const buttons = char.abilities.map((a, i) => ` `).join(""); return `

${slot} ${char.emoji} ${char.name} Lv ${lv}

${buttons}

`; }; const HERO_SLOT_FROM_ENTITY = { "hero-warrior": "A", "hero-mage": "B", "hero-archer": "C" }; const gameIntroOverlay = () => { const gi = state.gameIntro; const giSrc = "https://raw.githubusercontent.com/davidFCDev/pikachad-game/main/intro-game.mp4"; const giPreload = `

`; if (gi !== "playing") return giPreload; return `

Long ago, in a valley far away…

…as the dusk crept over the world…

…a new hero stirred.

`; }; const battleTransitionOverlay = () => { const bt = state.battleTransition; const introVideoSrc = "https://raw.githubusercontent.com/davidFCDev/pikachad-game/main/encounter-test.mp4"; // Always render a hidden preloader so the video is cached before the battle triggers const preloader = `

`; if (!bt) return preloader; // phase: "out" = intro video on black, "in" = white flash resolving into battle return `

${bt === "out" ? `

` : bt === "returning" ? `

` : `

`; }; const talkModal = () => { if (!talkState) return ""; const TONE = {"flatter":{"emoji":"💐","label":"Flatter"},"flirt":{"emoji":"💘","label":"Flirt"},"taunt":{"emoji":"😏","label":"Taunt"},"boast":{"emoji":"👑","label":"Boast"},"plead":{"emoji":"🙏","label":"Plead"},"confess":{"emoji":"🫣","label":"Confess"},"share":{"emoji":"🍞","label":"Share"},"joke":{"emoji":"🎭","label":"Joke"},"threaten":{"emoji":"⚔️","label":"Threat"},"deal":{"emoji":"🤝","label":"Deal"},"philosophize":{"emoji":"🌀","label":"Muse"}}; const enemyInfo = (() => { // enemyId like "enemy-1" — resolve to the current roster's type info (falls back to static map). const slot = (talkState.enemyId || "").replace("enemy-", ""); const typeId = enemyRoster[slot]; const type = typeId && ENEMY_TYPES[typeId]; if (type) return { name: type.name, emoji: type.emoji, color: type.color, portrait: type.portrait }; return ENEMIES[talkState.enemyId] || { name: "???", emoji: "💀", color: "oklch(0.6 0.2 25)", portrait: null }; })(); const heroSlot = HERO_SLOT_FROM_ENTITY[talkState.heroId]; const heroCharId = heroSlot ? (roster[heroSlot] || "pikachad") : "pikachad"; const heroChar = CHARS[heroCharId] || CHARS.pikachad; const heroPortrait = PORTRAITS[heroCharId] || null; const phase = talkState.phase || talkState.status || "choose"; const options = talkState.options || []; const chosen = talkState.chosen || null; const reply = talkState.reply || ""; const result = talkState.result || null; const heroAvatar = heroPortrait ? `

` : `

${heroChar.emoji || "⚔"}

`; const enemyAvatar = enemyInfo.portrait ? `

` : `

${enemyInfo.emoji || "💀"}

`; // Chat messages area let messages = ""; if (chosen) { messages += `

${heroChar.name}

${escapeHtml(chosen.text)}

${heroAvatar}

`; } if (phase === "awaiting") { messages += `

${enemyAvatar}

${enemyInfo.name}

`; } else if (phase === "result") { const outcomeCls = result && result.outcome === "positive" ? "chat-outcome-pos" : result && result.outcome === "negative" ? "chat-outcome-neg" : "chat-outcome-neu"; const STAT_LABELS = { ataque: "Attack", defensa: "Defense", precision: "Precision", evasion: "Evasion", rapidez: "Speed", critico: "Critical" }; const deltaText = result ? (result.delta > 0 ? `+${result.delta}` : result.delta < 0 ? `${result.delta}` : "±0") : ""; const flavor = (result && result.flavor) || ""; const statLabel = result && result.stat ? (STAT_LABELS[result.stat] || result.stat) : ""; messages += `

${enemyAvatar}

${enemyInfo.name}

${escapeHtml(reply || "...")}

${escapeHtml(flavor)} ${deltaText} ${statLabel}

`; } // Footer: options / typing caption / end-turn button let footer = ""; if (phase === "choose") { const optionBtns = options.map((o, i) => { const t = TONE[o.tone] || { emoji: "💬", label: o.tone }; return ` `; }).join(""); footer = `

${optionBtns}

`; } else if (phase === "awaiting") { footer = ``; } else if (phase === "result") { const outcome = (result && result.outcome) || "neutral"; const label = outcome === "positive" ? "Apply favor" : outcome === "negative" ? "Accept consequence" : "Continue"; footer = ``; } return `

${enemyAvatar}

${enemyInfo.name}

encounter chat

${messages ? `

${messages}

` : ""}

`; }; function escapeHtml(s) { return String(s || "").replace(/&/g, "&").replace(//g, ">").replace(/"/g, """); } const STAT_LABELS_UI = { ataque: "Attack", defensa: "Defense", precision: "Precision", evasion: "Evasion", rapidez: "Speed", critico: "Critical" }; const STAT_EMOJI_UI = { ataque: "⚔", defensa: "🛡", precision: "🎯", evasion: "💨", rapidez: "⚡", critico: "✦" }; const favorBadge = (entityId) => { const raw = (state.entityMods || {})[entityId]; const list = Array.isArray(raw) ? raw : []; // Right-side rose badge: ONE permanent favor per hero (turnsLeft == null). const mods = list.filter(m => m && m.stat && typeof m.delta === "number" && m.delta !== 0 && m.turnsLeft == null); if (mods.length === 0) return ""; const m = mods[0]; const label = STAT_LABELS_UI[m.stat] || m.stat; const emoji = STAT_EMOJI_UI[m.stat] || "✨"; const sign = m.delta > 0 ? "+" : ""; const cls = m.delta > 0 ? "favor-badge favor-pos" : "favor-badge favor-neg"; const title = `${sign}${m.delta} ${label} · favor`; return `

🌹

${emoji}${sign}${m.delta}

`; }; const actionMenuPanel = () => { const slot = HERO_SLOT_FROM_ENTITY[activeTurn]; if (!slot) return ""; if (actionMode) return ""; if (talkState) return ""; const info = ENTITY_INFO(activeTurn); // Tutorial: highlight one button per step with a glow class. The coach card // is rendered INSIDE the highlighted button so its vertical position always // matches the target — no hardcoded y offsets. const tutBattle = !!state.tutorialBattle; const tutStep = typeof state.tutorialStep === "number" ? state.tutorialStep : 0; const glowFor = (idx) => (tutBattle && tutStep === idx) ? " amp-tut-glow" : ""; const coachFor = (idx) => (tutBattle && tutStep === idx) ? tutorialCoach(tutStep) : ""; return ` `; }; // Mini-tutorial coach — rendered INSIDE the highlighted button so the arrow // always points at the right vertical row. No hardcoded y offsets. const tutorialCoach = (tutStep) => { if (actionMode) return ""; if (talkState) return ""; const STEPS = [ { title: "ATTACK", body: "Pick an ability. Some hit one enemy, others hit the whole line." }, { title: "POTIONS", body: "Use items from your bag — heals, buffs, bombs." }, { title: "TALK", body: "Chat with the enemy. Land the right tone and you get a buff, a heal, or shake the fight open." }, { title: "SKIP", body: "Pass this turn. Useful if you'd rather wait for another ally's bar to fill." }, ]; const s = STEPS[tutStep] || STEPS[0]; const isLast = tutStep >= STEPS.length - 1; const btn = isLast ? "Got it!" : "Next →"; const pill = `Step ${tutStep + 1} / ${STEPS.length}`; return `

${pill}

${s.title}

${s.body}

${btn}

`; }; const activeHeroPanel = () => { const slot = HERO_SLOT_FROM_ENTITY[activeTurn]; if (!slot) return ""; if (actionMode !== "attack") return ""; if (targeting) return ""; const charId = roster[slot] || "pikachad"; const char = CHARS[charId] || CHARS.pikachad; const keys = SLOT_KEYS[slot]; const lv = levelOf(charId); const buttons = char.abilities.map((a, i) => { const single = !!a.target; const targetLabel = single ? "Single" : "AOE"; const targetIcon = single ? "🎯" : "✦"; return ` `;}).join(""); return `

${buttons}

`; }; const battleEndModal = () => { if (!battleEnded) return ""; const isVictory = battleEnded === "victory"; const title = isVictory ? "VICTORY!" : "DEFEAT"; const sub = isVictory ? "You defeated every enemy" : "Your party has fallen in battle"; const tone = isVictory ? "win" : "lose"; const rewards = state.battleRewards || null; let defeatedHtml = ""; let heroRowsHtml = ""; let totalHtml = ""; if (isVictory && rewards) { defeatedHtml = (rewards.defeated || []).map(d => { const type = ENEMY_TYPES[d.typeId]; const portrait = (type && type.portrait) || d.portrait; const emoji = (type && type.emoji) || "💀"; const color = (type && type.color) || "oklch(0.5 0.2 25)"; const face = portrait ? `

` : `${emoji}`; return `

${face}

${d.name}${d.boss ? " ♛" : ""}

Lv ${d.level}

`; }).join(""); heroRowsHtml = (rewards.perHero || []).map((h, i) => { const ch = CHARS[h.charId]; const portrait = PORTRAITS[h.charId] || null; const color = (ch && ch.color) || "oklch(0.7 0.1 230)"; const emoji = (ch && ch.emoji) || "★"; const face = portrait ? `

` : `${emoji}`; const statusChip = h.alive ? `ALIVE` : `K.O. · ½ EXP`; return `

${face}

${h.name} Lv ${h.level} ${statusChip}

+${h.exp}EXP

`; }).join(""); totalHtml = `

Total loot ${rewards.total} EXP

`; } const summary = isVictory && rewards ? `

Defeated

${defeatedHtml}

Rewards

${heroRowsHtml}

${totalHtml} ` : ""; let defeatHtml = ""; if (!isVictory) { const DEFEAT_LINES = [ "The grind ends here. For now.", "Darkness closes in. But the story is not over.", "You fall. The valley still waits.", "Night claims the weary. Rest, then rise.", ]; const lineIdx = ((state.battleEndFlavor | 0) % DEFEAT_LINES.length + DEFEAT_LINES.length) % DEFEAT_LINES.length; const flavorLine = DEFEAT_LINES[lineIdx]; const fallenRows = ["A","B","C"].map(slot => { const charId = roster[slot]; if (!charId) return ""; const ch = CHARS[charId] || { name: charId, color: "oklch(0.6 0.1 240)", emoji: "★" }; const portrait = PORTRAITS[charId] || null; const lv = entityLevels[charId] || 1; const face = portrait ? `

` : `${ch.emoji || "★"}`; return `

${face}

${ch.name}

Lv ${lv} · K.O.

`; }).join(""); defeatHtml = `

${fallenRows}

“${flavorLine}”

`; } const actionBtn = isVictory ? `` : ``; return `

`; }; const targetPicker = () => { if (!targeting) return ""; const charId = roster[targeting.slot] || "pikachad"; const char = CHARS[charId] || CHARS.pikachad; const ability = char.abilities[targeting.abilityIdx] || char.abilities[0]; const enemyIds = ["enemy-1", "enemy-2", "enemy-3"]; const rows = enemyIds.map((eid, i) => { if (deadSet[eid]) return ""; const e = enemyTypeFor(eid) || ENEMIES[eid] || { name: eid, emoji: "💀", color: "oklch(0.5 0.2 25)" }; const idx = i + 1; const lv = entityLevels[eid] || 1; const iconHtml = e.portrait ? `

` : (e.emoji || "💀"); return ` `; }).join(""); return `

${rows}

`; }; const statsPanel = () => { if (!statsOpen) return ""; const char = CHARS[statsOpen]; if (!char) return ""; const lv = levelOf(statsOpen); const rows = STAT_ORDER.map(stat => { const cur = statAtLevel(char, stat, lv); const next = statAtLevel(char, stat, lv + 1); const growth = char.growth[stat] || 0; return `

${STAT_EMOJI[stat]} ${STAT_LABEL[stat]} ${fmt(cur)} +${fmt(growth)}/lv → ${fmt(next)}

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

`; }; const itemsHeroPanel = () => { if (actionMode !== "items") return ""; if (targeting) return ""; if (itemTargeting && itemTargeting.potionId) { const potion = POTIONS[itemTargeting.potionId]; if (!potion) return ""; const heroSlots = [["hero-warrior", "A"], ["hero-mage", "B"], ["hero-archer", "C"]]; const rows = heroSlots.map(([hid, slot], i) => { const isDead = !!deadSet[hid]; const canTarget = potion.kind === "revive" ? isDead : !isDead; const charId = roster[slot] || "pikachad"; const char = CHARS[charId] || CHARS.pikachad; const lv = levelOf(charId); const disabled = !canTarget; const stateLabel = isDead ? "KO" : "OK"; return ` `; }).join(""); return `

${rows}

`; } const inv = state.inventory || {}; const potionIds = ["health_small", "health_big", "revive", "antidote"]; const owned = potionIds.filter(pid => (inv[pid] || 0) > 0); const emptyCount = potionIds.length - owned.length; const ownedButtons = owned.map(pid => { const p = POTIONS[pid]; const count = inv[pid] || 0; return ` `; }).join(""); const emptySlots = Array(emptyCount).fill(`

`).join(""); return `

${ownedButtons}${emptySlots}

`; }; const rosterCard = (charId) => { const char = CHARS[charId]; const inSlot = SLOTS.find(s => roster[s] === charId); const lv = levelOf(charId); return `

${char.emoji} ${char.name} Lv ${lv} ${inSlot ? `EN ${inSlot}` : ""}

${SLOTS.map(s => ` `).join("")}

`; }; const SKILL_LOG_TYPE_CLS = { ATQ: "oklch(0.78 0.2 25)", BUF: "oklch(0.82 0.18 145)", DEF: "oklch(0.82 0.15 230)", ENT: "oklch(0.72 0.2 305)", CUR: "oklch(0.85 0.18 145)", AOE: "oklch(0.78 0.2 25)", DRAIN: "oklch(0.7 0.22 315)", DEBUFF: "oklch(0.72 0.2 305)", HEAL_ALLY: "oklch(0.85 0.18 145)", ITEM: "oklch(0.85 0.18 85)", TALK: "oklch(0.82 0.13 250)", }; const STAT_ICON = { ataque: "⚔", defensa: "🛡", precision: "🎯", evasion: "💨", rapidez: "⚡", critico: "✨" }; const renderHit = (h) => { if (h.miss) return `MISS`; if (typeof h.dmg === "number") { return h.crit ? `💥 -${h.dmg} CRIT` : `-${h.dmg}`; } if (typeof h.heal === "number") { return h.heal > 0 ? `+${h.heal}` : `FULL`; } if (h.stat) { const icon = STAT_ICON[h.stat] || "◆"; const sign = h.delta > 0 ? "+" : ""; const cls = h.delta > 0 ? "sl-hit-buff" : "sl-hit-debuff"; return `${icon} ${sign}${h.delta}`; } return ""; }; const skillLogButton = () => { const open = !!state.skillLogOpen; const log = Array.isArray(state.skillLog) ? state.skillLog : []; const recent = log.slice(-20).reverse(); const bodyRows = recent.length === 0 ? '

No skills used yet this battle.

' : recent.map((e, i) => { const sideCls = e.side === "enemy" ? "sl-enemy" : "sl-hero"; const isLast = i === 0 ? " is-last" : ""; const typeColor = SKILL_LOG_TYPE_CLS[(e.type || "").toUpperCase()] || "oklch(0.95 0.02 230 / 0.7)"; const typeChip = e.type ? `${e.type}` : ""; const lastChip = i === 0 ? 'now' : ""; // Targets rows — merge declared targets with their hit payloads. const hits = Array.isArray(e.hits) ? e.hits : []; const declared = Array.isArray(e.targets) ? e.targets : []; const byName = {}; hits.forEach(h => { if (!byName[h.target]) byName[h.target] = []; byName[h.target].push(h); }); // Include declared targets that never got a hit (e.g. pure buffs where stat delta is logged separately). declared.forEach(name => { if (!byName[name]) byName[name] = []; }); const targetRowsHtml = Object.keys(byName).length === 0 ? '

— no target recorded

' : Object.keys(byName).map(name => { const hs = byName[name]; const hitsHtml = hs.length === 0 ? '·' : hs.map(renderHit).join(""); return `

${name}${hitsHtml}

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

${e.actorLabel || e.actor} ▸ ${e.action} ${typeChip} ${lastChip}

${targetRowsHtml}

`; }).join(""); const overlayHtml = open ? `

🔍 Skill Log

${log.length}/30

${bodyRows}

` : ""; return ` ${overlayHtml} `; }; const enemyRosterCard = (typeId) => { const type = ENEMY_TYPES[typeId]; if (!type) return ""; const inSlots = ENEMY_SLOT_LABELS.filter(s => enemyRoster[s] === typeId); return `

${type.emoji} ${type.name}${type.boss ? ' JEFE' : ''} ${inSlots.length ? `EN ${inSlots.join(",")}` : ""}

${ENEMY_SLOT_LABELS.map(s => ` `).join("")}

`; }; const titleScreenOverlay = () => { const giSrc = "https://raw.githubusercontent.com/davidFCDev/pikachad-game/main/intro-game.mp4"; const preload = `

`; return ` ${preload}

A turn-based journey

CHADMON

SAGA

Six heroes scattered. The dusk is closing in.
Gather your crew before the light goes out.

Press to begin

`; }; // Title screen: blocks everything until player presses Start. if (state.titleScreen === "show") { return titleScreenOverlay(); } // Game intro: during the 6.5s video, return a minimal root HTML shared by // both modes so the

Spawn