Rebuild comboBattler: combat HUD (adrenaline + threat)

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

web/comboBattler.js

@@ -6172,7 +6172,16 @@ function mountComboBattler(pixi, host, opts = {}) {
       window.removeEventListener("pointerup", onUp);
     };
   }
-  let skillRowEl = null;
+  let skillRowEl = null, adrFill = null, threatBadge = null;
+  const skillBtns = [];
+  function skillReady(a, s) {
+    if (!a || !s) return false;
+    if (s.cost?.adrenaline && a.adrenaline < s.cost.adrenaline) return false;
+    if (s.cost?.energy && a.energy < s.cost.energy) return false;
+    const rc = a.recharge?.[s.id];
+    if (rc && battle && rc > battle.t) return false;
+    return true;
+  }
   function roundBtn(label, on, big) {
     const b = document.createElement("button");
     b.textContent = label;
@@ -6187,16 +6196,29 @@ function mountComboBattler(pixi, host, opts = {}) {
   function rebuildSkillButtons() {
     if (!skillRowEl) return;
     skillRowEl.replaceChildren();
+    skillBtns.length = 0;
     const bar = pa()?.bar || [];
     bar.forEach((s, i) => {
+      const cost = s.cost?.adrenaline ? `${s.cost.adrenaline}adr` : s.cost?.energy ? `${s.cost.energy}en` : "";
       const b = roundBtn(String(i + 1), () => {
         req.skill = i + 1;
       }, false);
-      b.title = s.name || "";
+      b.title = `${s.name || ""}${cost ? " \xB7 " + cost : ""}`;
       skillRowEl.appendChild(b);
+      skillBtns.push({ el: b, skill: s });
     });
     skillRowEl.style.display = bar.length ? "flex" : "none";
   }
+  function updateHud() {
+    const p = pa();
+    if (adrFill) adrFill.style.width = (p ? Math.round(p.adrenaline / 25 * 100) : 0) + "%";
+    for (const sb of skillBtns) {
+      const ok = skillReady(p, sb.skill);
+      sb.el.style.opacity = ok ? "1" : "0.4";
+      sb.el.style.borderColor = ok ? "#c9a227" : "#20262e";
+    }
+    if (threatBadge) threatBadge.textContent = `\u2694 ${runState.kills}    THREAT ${runState.diff.toFixed(1)}\xD7`;
+  }
   function setHeroSkills(skills) {
     const p = pa();
     if (!p) return;
@@ -6265,11 +6287,26 @@ function mountComboBattler(pixi, host, opts = {}) {
     skills.style.cssText = "display:flex;gap:8px;align-items:flex-end";
     skillRowEl = skills;
     rebuildSkillButtons();
+    const adrWrap = document.createElement("div");
+    adrWrap.style.cssText = "width:150px;pointer-events:none";
+    const adrLab = document.createElement("div");
+    adrLab.textContent = "ADRENALINE";
+    adrLab.style.cssText = "font:600 8px monospace;letter-spacing:.12em;color:#c9a227;text-align:right;margin-bottom:2px";
+    const adrTrack = document.createElement("div");
+    adrTrack.style.cssText = "height:6px;border-radius:4px;background:rgba(20,24,33,.7);border:1px solid #20262e;overflow:hidden";
+    adrFill = document.createElement("div");
+    adrFill.style.cssText = "height:100%;width:0%;background:linear-gradient(90deg,#c9a227,#ffe082);transition:width .1s linear";
+    adrTrack.append(adrFill);
+    adrWrap.append(adrLab, adrTrack);
+    pad.appendChild(adrWrap);
     pad.appendChild(skills);
     pad.appendChild(roundBtn("\u2694", () => {
       req.attack = true;
     }, true));
     wrap.appendChild(pad);
+    threatBadge = document.createElement("div");
+    threatBadge.style.cssText = "position:absolute;top:14px;left:50%;transform:translateX(-50%);pointer-events:none;padding:5px 12px;border-radius:999px;background:rgba(20,24,33,.8);border:1px solid #2a3340;color:#e8e8e8;font:700 12px monospace;letter-spacing:.04em";
+    wrap.appendChild(threatBadge);
     wrap._cleanup = () => {
       window.removeEventListener("pointerup", up);
       window.removeEventListener("pointercancel", up);
@@ -6381,6 +6418,7 @@ function mountComboBattler(pixi, host, opts = {}) {
       }
     }
     updateEmotes(dt);
+    updateHud();
     drawRings();
     drawMarkers();
     drawNav();
@@ -6501,6 +6539,9 @@ function mountComboBattler(pixi, host, opts = {}) {
     }
     controlsEl = null;
     skillRowEl = null;
+    adrFill = null;
+    threatBadge = null;
+    skillBtns.length = 0;
     try {
       markers?.destroy();
     } catch {