Phase 1: leveling — award XP on enemy defeat + character-sheet progression

Wire comboBattler's onEnemyDefeated to award XP to the active hero (enemyXpValue),
persist via patchPersona, increment kills, log kill/level_up events, and pop a
level-up banner. Track the active hero (setActiveHeroId) on spawn. Add a level
chip + XP bar + kills/points block to the character sheet. Rebuild comboBattler bundle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/comboBattler.js

@@ -6387,8 +6387,13 @@ function mountComboBattler(pixi, host, opts = {}) {
       if (!p) return;
       for (const a of ea()) {
         if (!a.alive) {
-          if (!deadAt.has(a.id)) deadAt.set(a.id, battle.t);
-          else if (battle.t - deadAt.get(a.id) > DEATH_LINGER) {
+          if (!deadAt.has(a.id)) {
+            deadAt.set(a.id, battle.t);
+            try {
+              opts.onEnemyDefeated?.({ id: a.id, name: a.name, profession: a.profession, tier: a.tier, x: a.x, y: a.y, t: battle.t });
+            } catch {
+            }
+          } else if (battle.t - deadAt.get(a.id) > DEATH_LINGER) {
             R.removeActor(a.id);
             removeActor(battle, a.id);
             deadAt.delete(a.id);

web/tiny.js

@@ -15,7 +15,8 @@ import { mountMapSandbox } from '/web/mapSandbox.js'
 import { mountComboBattler } from '/web/comboBattler.js'
 import { mountPersonaPanel, CLASS_SLUG } from '/web/personaPanel.js'
 import { mountHeroCreator, animateIdleIcon } from '/web/heroCreator.js'
-import { listPersonas, onRosterChange, getPortrait } from '/web/personaStore.js'
+import { listPersonas, onRosterChange, getPortrait, getPersona, patchPersona, setActiveHeroId } from '/web/personaStore.js'
+import { applyXp, enemyXpValue, levelProgress, xpToNext, appendEvent } from '/web/progression.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -339,7 +340,10 @@ whenEl('battle-stage', async (el) => {
   const rosters = Object.fromEntries(Object.entries(GAME_ROSTERS).map(([k, v]) => [k, buildRoster(v)]))
   // Mount with NO hero → the map shows and the player picks a persona from the bottom picker. The
   // picker reappears whenever there's no live hero (initial, and after the current one dies).
-  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, rosters })
+  // Award XP to the active hero when it defeats a foe (the loop fires this once per kill).
+  // Declared as a closure so it always reads the *current* hero + freshest stored progression.
+  const onEnemyDefeated = (enemy) => { try { awardKill(enemy) } catch { /* never break combat */ } }
+  comboCtrl = mountComboBattler(PIXI, el, { seed: 1, rosters, onEnemyDefeated })
   await comboCtrl.ready
   const FALLBACK = { name: 'Fighter', unitClass: 'Warrior' }
   const OVERVIEW_ZOOM = 0.45, GAMEPLAY_ZOOM = 2.5
@@ -349,11 +353,39 @@ whenEl('battle-stage', async (el) => {
   const flyToOverview = () => { const b = comboCtrl.map.getBounds(); if (b) comboCtrl.map.flyTo((b.x0 + b.x1) / 2, (b.y0 + b.y1) / 2, OVERVIEW_ZOOM, 700).catch(() => {}) }
   const spawnWithFly = (p) => {
     picker?.remove(); picker = null
-    currentHero = p
+    // Re-read from the store so we carry live progression (level/xp/skills), not a stale picker copy.
+    currentHero = (p && p.id && getPersona(p.id)) || p
+    setActiveHeroId(currentHero?.id || null)
     const s = comboCtrl.getSpawnWorld()
-    comboCtrl.selectHero(buildPlayer(chars, p))
+    comboCtrl.selectHero(buildPlayer(chars, currentHero))
     comboCtrl.map.flyTo(s.x, s.y, GAMEPLAY_ZOOM, 1000).catch(() => {})
   }
+
+  // ── Leveling: a foe defeat grants XP to the active hero, persisted to the roster. ──
+  const awardKill = (enemy) => {
+    const id = currentHero?.id; if (!id) return
+    const cur = getPersona(id); if (!cur) return
+    const gained = enemyXpValue(enemy)
+    const res = applyXp(cur.progression, gained)
+    const prog = res.progression
+    prog.kills = (cur.progression.kills || 0) + 1
+    let events = appendEvent(cur.events, 'kill', { enemy: enemy?.name || 'a foe', xp: gained, ts: Date.now() })
+    if (res.leveledUp) events = appendEvent(events, 'level_up', { level: prog.level, ts: Date.now() })
+    patchPersona(id, { progression: prog, events })
+    currentHero = getPersona(id)
+    if (res.leveledUp) showLevelUp(prog)
+    if (sheetOpen) renderSheet()
+  }
+  // A brief level-up banner over the canvas (mobile-friendly: centered, auto-dismiss).
+  let levelToast = null
+  const showLevelUp = (prog) => {
+    levelToast?.remove()
+    const t = document.createElement('div')
+    t.textContent = `⚔️ ${currentHero?.name || 'Hero'} reached level ${prog.level}!`
+    t.style.cssText = 'position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:9;padding:12px 18px;border-radius:12px;border:1px solid #c9a227;background:rgba(20,24,33,.94);color:#ffe082;font:700 15px var(--tac-font,system-ui);box-shadow:0 6px 24px rgba(0,0,0,.5);pointer-events:none;text-align:center;max-width:86vw'
+    el.append(t); levelToast = t
+    setTimeout(() => { t.style.transition = 'opacity .5s'; t.style.opacity = '0'; setTimeout(() => t.remove(), 520) }, 2200)
+  }
   // Picking a hero opens its detail page (portrait/about/quote + Select); Select confirms → spawnWithFly.
   const onPick = (p) => openHeroDetail(el, p, chars, () => spawnWithFly(p))
   const buildPicker = () => {
@@ -383,6 +415,22 @@ whenEl('battle-stage', async (el) => {
     const hero = comboCtrl.getHero?.()
     const name = document.createElement('div'); name.textContent = currentHero.name || hero?.name || 'Hero'; name.style.cssText = 'font:700 18px var(--tac-font,system-ui);text-align:center'; sheet.append(name)
     const cls = document.createElement('div'); cls.textContent = [currentHero.unitClass, hero?.profession].filter(Boolean).join(' · '); cls.style.cssText = 'text-align:center;color:#9aa4b2;letter-spacing:.06em;text-transform:uppercase;font-size:11px;margin-bottom:14px'; sheet.append(cls)
+    // ── Progression: level chip + XP bar + kills/points ──
+    {
+      const prog = currentHero.progression || { level: 1, xp: 0, kills: 0, attributePoints: 0 }
+      const row = document.createElement('div'); row.style.cssText = 'display:flex;align-items:center;gap:8px;margin:2px 0 10px'
+      const lv = document.createElement('span'); lv.textContent = 'LV ' + prog.level; lv.style.cssText = 'font:700 12px var(--tac-font,system-ui);color:#ffe082;background:#2a2410;border:1px solid #c9a227;border-radius:6px;padding:2px 8px;flex:none'
+      const barWrap = document.createElement('div'); barWrap.style.cssText = 'flex:1'
+      const xpLab = document.createElement('div'); xpLab.style.cssText = 'font-size:10px;color:#9aa4b2;margin-bottom:2px'; xpLab.textContent = `XP ${prog.xp} / ${xpToNext(prog.level)}`
+      const xpTrack = document.createElement('div'); xpTrack.style.cssText = 'height:6px;border-radius:5px;background:#222a35;overflow:hidden'
+      const xpFill = document.createElement('div'); xpFill.style.cssText = `height:100%;background:#c9a227;width:${Math.round(levelProgress(prog) * 100)}%`
+      xpTrack.append(xpFill); barWrap.append(xpLab, xpTrack); row.append(lv, barWrap); sheet.append(row)
+      const meta = document.createElement('div'); meta.style.cssText = 'display:flex;justify-content:space-between;font-size:11px;color:#9aa4b2;margin-bottom:10px'
+      const kills = document.createElement('span'); kills.textContent = `⚔ ${prog.kills} kills`
+      meta.append(kills)
+      if (prog.attributePoints > 0) { const pts = document.createElement('span'); pts.textContent = `★ ${prog.attributePoints} point${prog.attributePoints > 1 ? 's' : ''}`; pts.style.color = '#ffe082'; meta.append(pts) }
+      sheet.append(meta)
+    }
     if (hero) {
       const wrap = document.createElement('div'); wrap.style.cssText = 'margin:6px 0 12px'
       const lab = document.createElement('div'); lab.style.cssText = 'font-size:11px;color:#9aa4b2;margin-bottom:3px'