Game: roguelike level-up cards, XP HUD, pause-on-sidebar, advancing waves

- Level-up now opens a 1-of-3 perk draft (levelUpCards.js: Vigor/Toughness/Might/
Berserker/Swiftness/Second Wind) that pauses the game; picking applies a persisted stat
(progression.spent → statBonuses incl. speedMul) + an immediate live buffHero effect.
Replaces the attribute-point grant (ATTR_PER_LEVEL=0).
- XP/level chip on the HUD (top-left), updated on spawn + each kill.
- Character sidebar open → comboCtrl.setPaused(true) freezes the game (verified: 0 px
change over 2.2s).
- Enemies advance toward the hero (aggroRadius null) in bigger threat-scaled waves.

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

web/classesSandbox.js

@@ -999,7 +999,7 @@ function makeActor(unit, team, id, slot) {
     rank: unit.rank ?? 12,
     armor: tpl.armor ?? 0,
     weapon,
-    moveSpeed: tpl.moveSpeed,
+    moveSpeed: Math.round(tpl.moveSpeed * (unit.speedMul ?? 1)),
     preferredRange,
     radius: radiusOf(unit, tpl),
     maxEnergy: tpl.maxEnergy,

web/comboBattler.js

@@ -5083,7 +5083,7 @@ function makeActor(unit, team, id, slot) {
     rank: unit.rank ?? 12,
     armor: tpl.armor ?? 0,
     weapon,
-    moveSpeed: tpl.moveSpeed,
+    moveSpeed: Math.round(tpl.moveSpeed * (unit.speedMul ?? 1)),
     preferredRange,
     radius: radiusOf(unit, tpl),
     maxEnergy: tpl.maxEnergy,
@@ -6037,8 +6037,8 @@ var SPAWN_TILES = 22;
 var SPAWN_JITTER = 6;
 var DESPAWN_TILES = 52;
 var TARGET_FOES = 8;
-var MAX_FOES = 16;
-var SPAWN_INTERVAL = 0.4;
+var MAX_FOES = 26;
+var SPAWN_INTERVAL = 0.3;
 var DEATH_LINGER = 1.6;
 async function contentHeight(url) {
   try {
@@ -6088,6 +6088,7 @@ function mountComboBattler(pixi, host, opts = {}) {
   const emoPrev = /* @__PURE__ */ new Map();
   let idleEmoAcc = 0;
   let runState = { time: 0, kills: 0, diff: 1 };
+  let paused = false;
   let hitstopT = 0;
   const shake = { t: 0, mag: 0 };
   const addShake = (dur, mag) => {
@@ -6411,6 +6412,7 @@ function mountComboBattler(pixi, host, opts = {}) {
   };
   function tick(ticker) {
     if (!battle || !R) return;
+    if (paused) return;
     const dtMS = ticker.deltaMS, dt = dtMS / 1e3;
     const p = pa();
     if (req.dodge) {
@@ -6575,17 +6577,21 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     if (emoteLayer && p && battle) emoteLayer.show(p.id, key, battle.t, 1.6);
   }
-  function levelUpHero() {
+  function buffHero({ hpMul = 1, dmgMul = 1, speedMul = 1, rankUp = true, heal = false } = {}) {
     const p = pa();
     if (!p) return;
-    p.rank = Math.min(20, (p.rank || 12) + 1);
-    p.baseMaxHp = Math.round(p.baseMaxHp * 1.06);
-    p.maxHp = Math.round(p.maxHp * 1.06);
-    p.weapon.min = Math.round(p.weapon.min * 1.05);
-    p.weapon.max = Math.max(p.weapon.min + 1, Math.round(p.weapon.max * 1.05));
-    p.hp = p.maxHp;
+    if (rankUp) p.rank = Math.min(20, (p.rank || 12) + 1);
+    p.baseMaxHp = Math.round(p.baseMaxHp * hpMul);
+    p.maxHp = Math.round(p.maxHp * hpMul);
+    p.weapon.min = Math.round(p.weapon.min * dmgMul);
+    p.weapon.max = Math.max(p.weapon.min + 1, Math.round(p.weapon.max * dmgMul));
+    p.moveSpeed = Math.round(p.moveSpeed * speedMul);
+    if (heal) p.hp = p.maxHp;
     emit();
   }
+  function setPaused(v) {
+    paused = !!v;
+  }
   function drawRings() {
     const p = pa();
     rings.clear();
@@ -6839,7 +6845,7 @@ function mountComboBattler(pixi, host, opts = {}) {
       if (spawnAcc.t < SPAWN_INTERVAL) return;
       spawnAcc.t = 0;
       const diff = runState.diff;
-      const target = Math.min(MAX_FOES, Math.round(TARGET_FOES + diff * 1.5));
+      const target = Math.min(MAX_FOES, Math.round(TARGET_FOES + diff * 4));
       const need = target - ea().filter((a) => a.alive).length;
       for (let i = 0; i < need; i++) {
         const ang = Math.random() * Math.PI * 2;
@@ -6931,7 +6937,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     return p ? { name: p.name, profession: p.profession, hp: Math.round(p.hp), maxHp: Math.round(p.maxHp), skills: (p.bar || []).map((s) => s.name) } : null;
   }
-  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, heroEmote, levelUpHero, setHeroSkills, getThreat: () => ({ ...runState }), resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
+  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, heroEmote, buffHero, setPaused, setHeroSkills, getThreat: () => ({ ...runState }), resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
   if (typeof window !== "undefined") {
     window.__comboSnap = () => ctrl.getSnapshot();
     window.__combo = ctrl;

web/enemiesSandbox.js

@@ -832,7 +832,7 @@ function makeActor(unit, team, id, slot) {
     rank: unit.rank ?? 12,
     armor: tpl.armor ?? 0,
     weapon,
-    moveSpeed: tpl.moveSpeed,
+    moveSpeed: Math.round(tpl.moveSpeed * (unit.speedMul ?? 1)),
     preferredRange,
     radius: radiusOf(unit, tpl),
     maxEnergy: tpl.maxEnergy,

web/engine.js

@@ -806,7 +806,7 @@ function makeActor(unit, team, id, slot) {
     rank: unit.rank ?? 12,
     armor: tpl.armor ?? 0,
     weapon,
-    moveSpeed: tpl.moveSpeed,
+    moveSpeed: Math.round(tpl.moveSpeed * (unit.speedMul ?? 1)),
     preferredRange,
     radius: radiusOf(unit, tpl),
     maxEnergy: tpl.maxEnergy,

web/levelUpCards.js

@@ -0,0 +1,57 @@
+// Roguelike level-up draft — on level-up the game pauses and the player picks 1 of 3 perk cards.
+// Each perk bumps a persisted stat (progression.spent, read by statBonuses at spawn) AND applies
+// an immediate live effect to the on-field hero (comboCtrl.buffHero). See tiny.js awardKill.
+
+// Perk pool. `spend` mutates the spent counters (authoritative, applied next spawn); `live` is the
+// immediate effect on the current hero.
+const POOL = [
+  { key: 'vigor', icon: '❤', title: 'Vigor', desc: '+10% Max HP & heal', spend: (s) => ({ ...s, hp: (s.hp || 0) + 2 }), live: { hpMul: 1.10, heal: true } },
+  { key: 'toughness', icon: '🛡', title: 'Toughness', desc: '+15% Max HP', spend: (s) => ({ ...s, hp: (s.hp || 0) + 3 }), live: { hpMul: 1.15, heal: true } },
+  { key: 'might', icon: '⚔', title: 'Might', desc: '+10% Damage', spend: (s) => ({ ...s, dmg: (s.dmg || 0) + 2 }), live: { dmgMul: 1.10 } },
+  { key: 'berserker', icon: '🔥', title: 'Berserker', desc: '+15% Damage', spend: (s) => ({ ...s, dmg: (s.dmg || 0) + 3 }), live: { dmgMul: 1.15 } },
+  { key: 'swift', icon: '💨', title: 'Swiftness', desc: '+12% Move speed', spend: (s) => ({ ...s, spd: (s.spd || 0) + 2 }), live: { speedMul: 1.12 } },
+  { key: 'second-wind', icon: '✨', title: 'Second Wind', desc: 'Full heal +5% Max HP', spend: (s) => ({ ...s, hp: (s.hp || 0) + 1 }), live: { hpMul: 1.05, heal: true } },
+]
+
+// Pick `n` distinct perks. Seeded-ish via the level so multi-level-ups vary without Math.random reliance.
+export function drawPerks(n = 3, seed = 0) {
+  const pool = POOL.slice()
+  // Fisher–Yates with a tiny LCG so draws differ between levels.
+  let x = (seed * 2654435761 + 12345) >>> 0
+  const rnd = () => (x = (1103515245 * x + 12345) >>> 0) / 4294967296
+  for (let i = pool.length - 1; i > 0; i--) { const j = Math.floor(rnd() * (i + 1));[pool[i], pool[j]] = [pool[j], pool[i]] }
+  return pool.slice(0, Math.min(n, pool.length))
+}
+
+// Apply a chosen perk to a progression object → new progression (updated spent counters).
+export function applyPerk(progression, perk) {
+  const p = { level: 1, xp: 0, kills: 0, attributePoints: 0, spent: { hp: 0, dmg: 0, spd: 0 }, ...(progression || {}) }
+  p.spent = { hp: 0, dmg: 0, spd: 0, ...(p.spent || {}) }
+  p.spent = perk.spend(p.spent)
+  return p
+}
+
+// Render the 3-card draft over `host`. Calls onPick(perk) when a card is chosen, then closes.
+export function mountLevelUp(host, { level, seed = level }, onPick) {
+  const back = document.createElement('div')
+  back.style.cssText = 'position:absolute;inset:0;z-index:14;background:rgba(6,8,12,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px'
+  const title = document.createElement('div'); title.textContent = `⚔ Level ${level} — choose a boon`
+  title.style.cssText = 'font:800 22px var(--tac-font,system-ui);color:#ffe082;text-shadow:0 2px 8px #000;text-align:center'
+  back.append(title)
+  const row = document.createElement('div'); row.style.cssText = 'display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:560px'
+  const close = () => back.remove()
+  for (const perk of drawPerks(3, seed)) {
+    const card = document.createElement('button'); card.type = 'button'
+    card.style.cssText = 'width:150px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px;border-radius:14px;border:1px solid #2a3340;background:linear-gradient(180deg,#1a2230,#11151c);color:#e8e8e8;cursor:pointer;transition:transform .1s,border-color .1s;user-select:none'
+    card.addEventListener('pointerenter', () => { card.style.transform = 'translateY(-4px)'; card.style.borderColor = '#c9a227' })
+    card.addEventListener('pointerleave', () => { card.style.transform = 'none'; card.style.borderColor = '#2a3340' })
+    const icon = document.createElement('div'); icon.textContent = perk.icon; icon.style.cssText = 'font-size:40px'
+    const nm = document.createElement('div'); nm.textContent = perk.title; nm.style.cssText = 'font:700 16px var(--tac-font,system-ui)'
+    const ds = document.createElement('div'); ds.textContent = perk.desc; ds.style.cssText = 'font-size:12px;color:#9aa4b2;text-align:center;line-height:1.4'
+    card.append(icon, nm, ds)
+    card.addEventListener('click', () => { close(); onPick(perk) })
+    row.append(card)
+  }
+  back.append(row); host.append(back)
+  return { close }
+}

web/progression.js

@@ -6,7 +6,7 @@
 
 const BASE = 50
 const GROWTH = 40
-const ATTR_PER_LEVEL = 1
+const ATTR_PER_LEVEL = 0 // level-up reward is now the roguelike perk draft (levelUpCards.js), not points
 
 export function xpToNext(level) {
   const l = Math.max(1, level | 0)
@@ -72,6 +72,7 @@ export function statBonuses(progression) {
     rank: Math.min(20, 7 + lvl),
     hpMul: 1 + (lvl - 1) * 0.07 + (spent.hp || 0) * 0.05,
     dmgMul: 1 + (lvl - 1) * 0.05 + (spent.dmg || 0) * 0.05,
+    speedMul: 1 + (spent.spd || 0) * 0.06,
   }
 }
 

web/tiny.js

@@ -23,6 +23,7 @@ import { generatePortrait } from '/web/imagen.js'
 import { mountCharacterChat } from '/web/characterChat.js'
 import { forgeSkillForHero } from '/web/skillForge.js'
 import { mountAfterAction } from '/web/afterAction.js'
+import { mountLevelUp, applyPerk } from '/web/levelUpCards.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -235,7 +236,7 @@ const buildPlayer = (chars, p) => {
   if (equipped.length) unit.skills = equipped
   // Leveling makes the fighter stronger: level + spent points → rank (skill scaling) + HP/damage.
   const sb = statBonuses(p?.progression)
-  unit.rank = sb.rank; unit.hpMul = sb.hpMul; unit.dmgMul = sb.dmgMul; unit.rangeMul = ROAM_RANGE_MUL
+  unit.rank = sb.rank; unit.hpMul = sb.hpMul; unit.dmgMul = sb.dmgMul; unit.speedMul = sb.speedMul; unit.rangeMul = ROAM_RANGE_MUL
   return { name: p?.name || pc?.name || 'Hero', sheets: sheetsOf(pc), unit }
 }
 const PICK_CARD_CSS = 'display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 6px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.92);color:#e8e8e8;cursor:pointer;font:600 11px var(--tac-font,system-ui)'
@@ -352,7 +353,8 @@ whenEl('battle-stage', async (el) => {
   const chars = await loadChars()
   const buildRoster = (list) => list.map((e) => {
     const c = chars[e.slug]; if (!c) return null
-    return { name: e.name, sheets: sheetsOf(c), unit: { name: e.name, stats: e.stats, attackType: e.attackType, skills: [], aggroRadius: ENEMY_AGGRO, rangeMul: ROAM_RANGE_MUL } }
+    // aggroRadius null = always engage → foes advance toward the hero (waves), not idle until near.
+    return { name: e.name, sheets: sheetsOf(c), unit: { name: e.name, stats: e.stats, attackType: e.attackType, skills: [], aggroRadius: null, rangeMul: ROAM_RANGE_MUL } }
   }).filter(Boolean)
   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
@@ -375,6 +377,7 @@ whenEl('battle-stage', async (el) => {
     setActiveHeroId(currentHero?.id || null)
     runStart = { level: currentHero?.progression?.level || 1 } // for the after-action "levels gained"
     deathShown = false
+    updateXpHud()
     const s = comboCtrl.getSpawnWorld()
     comboCtrl.selectHero(buildPlayer(chars, currentHero))
     comboCtrl.map.flyTo(s.x, s.y, GAMEPLAY_ZOOM, 1000).catch(() => {})
@@ -407,8 +410,28 @@ whenEl('battle-stage', async (el) => {
     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); comboCtrl?.heroEmote?.('love'); comboCtrl?.levelUpHero?.() }
+    updateXpHud()
     if (sheetOpen) renderSheet()
+    if (res.leveledUp) { comboCtrl?.heroEmote?.('love'); startLevelUpDrafts(res.levelsGained) }
+  }
+  // Roguelike level-up: pause and present a 1-of-3 perk draft per level gained (sequential).
+  const startLevelUpDrafts = (count) => {
+    let remaining = count || 1
+    const showNext = () => {
+      if (remaining <= 0 || !currentHero?.id) { comboCtrl?.setPaused?.(false); return }
+      remaining--
+      comboCtrl?.setPaused?.(true)
+      const lvl = currentHero?.progression?.level || 1
+      mountLevelUp(el, { level: lvl, seed: lvl * 7 + remaining }, (perk) => {
+        const fresh = getPersona(currentHero.id); if (!fresh) { comboCtrl?.setPaused?.(false); return }
+        patchPersona(currentHero.id, { progression: applyPerk(fresh.progression, perk) })
+        currentHero = getPersona(currentHero.id)
+        comboCtrl?.buffHero?.(perk.live || {})
+        updateXpHud(); if (sheetOpen) renderSheet()
+        showNext()
+      })
+    }
+    showNext()
   }
   // A brief level-up banner over the canvas (mobile-friendly: centered, auto-dismiss).
   let levelToast = null
@@ -427,7 +450,7 @@ whenEl('battle-stage', async (el) => {
     return buildHeroPicker(el, personas.length ? personas : [FALLBACK], chars, onPick,
       () => openCreateModal(el, spawnWithFly))
   }
-  const showPicker = () => { if (!picker) { picker = buildPicker(); flyToOverview() } }
+  const showPicker = () => { xpHud.style.display = 'none'; if (!picker) { picker = buildPicker(); flyToOverview() } }
   // Rebuild the open picker whenever the roster changes — so a hero just created (or removed) shows
   // up in the "Choose your hero" bar without waiting for the next time it reopens.
   const refreshPicker = () => { if (picker) { picker.remove(); picker = buildPicker() } }
@@ -704,6 +727,7 @@ whenEl('battle-stage', async (el) => {
   let sheetBackdrop = null
   const setSheet = (open) => {
     sheetOpen = open; sheet.style.transform = open ? 'translateX(0)' : 'translateX(100%)'
+    comboCtrl?.setPaused?.(open) // freeze the game while the character page is open
     if (open) {
       renderSheet()
       if (!sheetBackdrop) { sheetBackdrop = document.createElement('div'); sheetBackdrop.style.cssText = 'position:absolute;inset:0;z-index:7;background:transparent'; sheetBackdrop.addEventListener('pointerdown', () => setSheet(false)); el.append(sheetBackdrop) }
@@ -712,6 +736,20 @@ whenEl('battle-stage', async (el) => {
   sheetBtn.addEventListener('click', () => setSheet(!sheetOpen))
   el.append(sheetBtn, sheet)
 
+  // ── XP / level HUD chip (top-left) — always visible while a hero is in play ──
+  const xpHud = document.createElement('div')
+  xpHud.style.cssText = 'position:absolute;top:14px;left:14px;z-index:6;pointer-events:none;display:none;align-items:center;gap:8px;background:rgba(20,24,33,.8);border:1px solid #2a3340;border-radius:999px;padding:5px 12px 5px 9px;font:700 12px monospace;color:#e8e8e8'
+  const xpLv = document.createElement('span'); xpLv.style.cssText = 'color:#ffe082'
+  const xpTrack = document.createElement('div'); xpTrack.style.cssText = 'width:90px;height:6px;border-radius:4px;background:#222a35;overflow:hidden'
+  const xpFill = document.createElement('div'); xpFill.style.cssText = 'height:100%;width:0%;background:linear-gradient(90deg,#c9a227,#ffe082);transition:width .2s'
+  xpTrack.append(xpFill); xpHud.append(xpLv, xpTrack); el.append(xpHud)
+  const updateXpHud = () => {
+    const prog = currentHero && currentHero.id ? currentHero.progression : null
+    if (!prog) { xpHud.style.display = 'none'; return }
+    xpHud.style.display = 'flex'; xpLv.textContent = 'LV ' + prog.level
+    xpFill.style.width = Math.round(levelProgress(prog) * 100) + '%'
+  }
+
   showPicker()
   comboCtrl.onChange((s) => { if (s.over) onHeroDown(); if (sheetOpen) updateHp(comboCtrl.getHero?.()) })
   onRosterChange(refreshPicker)