Equipment: pick a slot to swap gear from the bank; plain totals

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

game.py

@@ -3560,7 +3560,7 @@ ACTION_GLYPHS.update({
 for _index, (_area, _level, _prefix, _races) in enumerate(AREAS):
     for _race, *_rest in _races:
         ACTION_GLYPHS[f"fight_{_slug(_race)}"] = (RACE_GLYPHS[_race], TIER_TINTS[_index])
-UI_GLYPHS = ["two-coins", "sparkles", "hearts", "prayer", "checked-shield", "magic-shield", "stopwatch", "swordman",
+UI_GLYPHS = ["two-coins", "sparkles", "hearts", "prayer", "checked-shield", "magic-shield", "stopwatch", "swordman", "biceps", "cancel",
              "cape", "gem-pendant", "gauntlet", "ring", "quiver", "leather-boot", "crystal-ball", "visored-helm", "breastplate",
              "leg-armor", "pointy-sword", "round-shield",
              *(kind["glyph"] for kind in DAMAGE_TYPES.values())]

static/app.js

@@ -1244,32 +1244,46 @@ function dollSlot(p, slot, label, outline, picked) {
 }
 
 function paperDoll(p, mine) {
-  const worn = DOLL.filter(([slot]) => p.equip[slot]).map(([slot]) => slot);
+  const pick = dollPick && slot2(dollPick, p);
-  const pick = (dollPick && slot2(dollPick, p)) || (worn.includes("weapon") ? "weapon" : worn[0]) || "weapon";
+  const totals = `<div class="doll-stats">
+      <span class="muted">${glyph("biceps", "#e06a6a")} Power</span><b>${p.power}</b>
+      <span class="muted">${glyph("checked-shield", "#d4dae2")} Armour</span><b>${p.armour}</b>
+      <span class="muted">${glyph("magic-shield", "#a77be8")} Ward</span><b>${p.ward}</b>
+    </div>`;
+  let side = totals;
+  if (pick) {
     const label = DOLL.find(([slot]) => slot === pick)[1];
     const two = pick === "shield" && p.equip.weapon && item(p.equip.weapon).two_handed;
     const id = two ? p.equip.weapon : p.equip[pick], it = id && item(id);
-  const detail = it ? `<div class="worn-head"><span class="ico">${it.icon}</span><span><b>${esc(it.name)}</b>
+    side = `<div class="worn-head">${it ? `<span class="ico">${it.icon}</span><b>${esc(it.name)}</b>` : `<b>${label}</b><span class="muted small">empty</span>`}</div>
-        <span class="muted small">${label}${two ? " (two-handed weapon)" : ""}</span></span>
+      ${it ? gearChips(it, p) : ""}${mine ? swapGrid(p, pick, two) : ""}${totals}`;
-        ${mine && !two ? `<button class="btn sm" data-unequip="${pick}" title="Back to the bank">✕</button>` : ""}</div>
+  }
-      ${gearChips(it, p)}`
-    : `<div class="muted small">${label}: nothing worn.${mine ? ` Equip from the <button class="linkish" data-nav="bank">bank</button>.` : ""}</div>`;
-  const st = C.styles[(p.equip.weapon && item(p.equip.weapon).style) || "sword"], dt = C.damage_types[st.damage];
   return `<div class="doll-wrap">
     <div class="doll"><span class="doll-figure">${glyph("swordman", "#e6e8ee")}</span>
       ${DOLL.map(([slot, name, outline]) => dollSlot(p, slot, name, outline, slot === pick)).join("")}</div>
-    <div class="doll-side">
+    <div class="doll-side">${side}</div>
-      <div class="doll-detail">${detail}</div>
-      <div class="doll-stats">
-        <span>${glyph(dt.glyph, dt.tint)} ${dt.name}, a swing every ${st.interval}s</span>
-        <span class="muted">Power</span><b>${p.power}</b>
-        <span class="muted">${glyph("checked-shield", "#d4dae2")} Armour</span><b>${p.armour} <span class="muted small">-${Math.round(p.reduction * 100)}% physical</span></b>
-        <span class="muted">${glyph("magic-shield", "#a77be8")} Ward</span><b>${p.ward} <span class="muted small">-${Math.round(p.ward_reduction * 100)}% magic</span></b>
-      </div>
-    </div>
   </div>`;
 }
 
+// What else in the bank fits the picked slot, best first: click one to put it on. For weapons the
+// corner shows the damage type, so you can pick one for what you're about to fight.
+function swapGrid(p, slot, two) {
+  const fits = Object.keys(p.bank).filter((id) => item(id).slot === slot)
+    .sort((a, b) => (item(b).tier ?? 0) - (item(a).tier ?? 0) || (item(b).power ?? 0) - (item(a).power ?? 0));
+  const tiles = fits.map((id) => {
+    const it = item(id), [skill, level] = it.req || [];
+    const why = two ? `Your ${item(p.equip.weapon).name.toLowerCase()} takes both hands`
+      : skill && p.levels[skill] < level ? `Needs ${skillOf(skill).name.toLowerCase()} ${level}` : "";
+    const corner = it.style ? dmgIcon(C.styles[it.style].damage) : "";
+    const tip = [it.name, gearStats(it), it.style ? (it.two_handed ? "two-handed" : "one-handed") : "", why].filter(Boolean).join(" · ");
+    return `<button class="doll-slot swap" data-equip="${id}" ${why ? "disabled" : ""} title="${esc(tip)}">${it.icon}
+      ${corner ? `<span class="swap-type">${corner}</span>` : ""}${it.two_handed ? `<span class="hands">2H</span>` : ""}${p.bank[id] > 1 ? `<span class="swap-qty">${p.bank[id]}</span>` : ""}</button>`;
+  });
+  const off = p.equip[slot] && !two ? `<button class="doll-slot swap off" data-unequip="${slot}" title="Take it off, back to the bank">${glyph("cancel", "#98a1b4")}</button>` : "";
+  if (!tiles.length && !off) return `<div class="muted small">Nothing else in your bank fits here.</div>`;
+  return `<div class="swap-head muted small">Swap for</div><div class="swap-grid">${tiles.join("")}${off}</div>`;
+}
+
 // A picked slot only counts if it's one this character has.
 function slot2(slot, p) {
   return slot in p.equip ? slot : null;
@@ -1380,7 +1394,7 @@ document.addEventListener("click", (e) => {
   if (d.once) return act("/api/action", { id: d.once, once: true });
   if ("stop" in d) return act("/api/stop", {});
   if (d.doll) {
-    dollPick = d.doll;
+    dollPick = dollPick === d.doll ? null : d.doll;
     return render();
   }
   if ("select" in d) {

static/icons.svg

@@ -23,6 +23,7 @@
 <symbol id="broken-bone" viewBox="0 0 512 512"><path fill="currentColor" d="m301.486 20.37l-33.19 134.755l15.306 49.895l43.55-103.81zM161.324 43.46l2.03 110.69l90.68 36.516zm180.358 126.73l-29.532 40.572l85.268-39.008l-55.736-1.563zm-99.346 39.134c-59.628 41.982-124.36 74.982-199.207 81.297c-13.185 1.113-21.704 8.3-26.302 15.185c-13.788 20.652 8.285 51.02 54.332 33.37c-55.518 33.324-8.274 81.184 25.113 43.495c34.24-38.648 74.95-74.53 117.74-91.58l12.696-28.235l-32.81 6.272l48.436-59.803zm59.62 21.973l120.356 61.736l-8.443-53.13zm-19.214 25.398l5.78 34.688l-40.055-13.627c70.405 49.457 118.18 111.73 161.883 190.79c22.65 40.976 71.903 6.46 34.275-34.278c41.4 33.974 78.094-24.99 40.883-40.883c-63.653-27.187-118.033-62.682-150.73-109.434h-.003l-52.033-27.255zm-53.697 46.844v.003l.002-.004zm0 .003l-60.248 79.27l46.773-10.303zm18.963.934l18.996 118.392l36.414-19.62z"/></symbol>
 <symbol id="bubbling-flask" viewBox="0 0 512 512"><path fill="currentColor" d="M186.22 21.25c1.304 7.696 2.775 14.91 4.436 21.625h-24.999l10.53 14.78s13.66 19.322 21.75 43.814c4.047 12.245 6.576 25.603 5.595 38c-.98 12.394-5.132 23.72-15.093 33.718c-20.252 20.325-47.89 40.234-70.968 64.406c-23.08 24.17-41.844 53.534-41.845 91.656c0 2.038.002 39.462-.03 76.813c-.018 18.675-.04 37.337-.064 51.593c-.01 7.13-.017 13.167-.03 17.53c-.013 4.366-.07 7.62-.063 7.345l-.28 9.564l9.562.062l312.53 2.28l9.75.064l-.344-9.75c.007.21-.043-3.14-.062-7.594s-.046-10.56-.063-17.78c-.033-14.443-.068-33.324-.092-52.188c-.05-37.73-.063-75.526-.063-77.938c0-38.97-19.523-68.73-43.53-93.03c-24.01-24.302-52.733-44.122-73.75-64.407c-9.965-9.617-13.824-20.463-14.408-32.563s2.526-25.324 7.188-37.5c9.003-23.515 23.025-42.038 24-43.313l15.53-15.562h-32.53c1.647-6.712 3.142-13.924 4.438-21.625zM217 99.78c14.52 15.522 31.15 15.58 45.656.064c-4.346 12.522-7.3 26.29-6.625 40.312c.764 15.827 6.586 32.085 20.064 45.094v.03c22.692 21.903 51.186 41.51 73.47 64.064c22.28 22.555 38.123 47.073 38.123 79.906c0 2.55.014 40.232.063 77.97c.024 18.867.06 37.73.094 52.186c.016 6.595.045 11.937.062 16.28l-293.719-2.155c.013-4.24.02-9.396.032-15.842c.023-14.266.044-32.948.06-51.625c.035-37.356.032-74.663.032-76.813c0-32.095 15.238-56.318 36.657-78.75c21.417-22.432 48.81-42.17 70.686-64.125c13.238-13.287 19.274-29.548 20.53-45.438c1.135-14.317-1.343-28.396-5.186-41.156zm34.47 98.782c-17.31 0-31.532 14.224-31.532 31.532c0 17.307 14.223 31.53 31.53 31.53S283 247.401 283 230.094s-14.224-31.53-31.53-31.53zm0 18.688c7.206 0 12.843 5.636 12.843 12.844s-5.637 12.844-12.844 12.844c-7.21 0-12.845-5.637-12.845-12.844c0-7.208 5.636-12.844 12.844-12.844zM131.5 277.625c-10.615 14.95-18.094 31.583-18.094 52c0 5.323-.142 119.566-.344 124.72l256.094 3.81c-.304-6.364-.53-121.892-.53-128.53c0-20.39-7.51-37.15-18.126-52h-37a37.8 37.8 0 0 1 5.03 18.844c0 20.968-17.215 38.186-38.186 38.186c-20.97 0-38.156-17.217-38.156-38.187a37.84 37.84 0 0 1 5.03-18.845H131.5zm144 0c-8.475 2.115-14.625 9.648-14.625 18.844c0 10.87 8.597 19.5 19.47 19.5c10.87 0 19.5-8.632 19.5-19.5c0-9.197-6.175-16.73-14.658-18.845zM211.344 319.5c18.92 0 34.437 15.518 34.437 34.438c0 18.918-15.516 34.468-34.436 34.468s-34.47-15.55-34.47-34.47c0-18.918 15.55-34.436 34.47-34.436zm0 18.688c-8.82 0-15.78 6.93-15.78 15.75s6.96 15.78 15.78 15.78s15.75-6.96 15.75-15.78s-6.93-15.75-15.75-15.75m92.97 10.125c25.53 0 46.436 20.905 46.436 46.437c0 25.53-20.905 46.438-46.438 46.438c-25.532 0-46.437-20.906-46.437-46.438s20.905-46.438 46.438-46.438zM304.31 367c-15.433 0-27.75 12.317-27.75 27.75s12.317 27.75 27.75 27.75s27.75-12.32 27.75-27.75c0-15.433-12.316-27.75-27.75-27.75"/></symbol>
 <symbol id="butterfly" viewBox="0 0 512 512"><path fill="currentColor" d="m222.97 43.094l-17.72 5.937c18.246 54.362 27.075 112.164 24.406 174.47l-.875 20.5l16.032-12.78c47.213-37.597 81.827-86.216 102.282-146.095l-17.688-6.063c-17.04 49.88-44.08 90.906-80.656 124.22c.156-56.652-8.915-109.937-25.78-160.188zM53.812 51.22C51.09 160.79 110.03 244.245 208.75 273c2.573-110.1-55.144-193.608-154.938-221.78m335.156 150.374c-58.436-.03-115.656 25.943-163.5 76.094c90.775 49.848 192.148 32.407 268.217-47.563c-34.172-19.135-69.658-28.513-104.718-28.53zM136.936 277.03c-52.45.582-94.1 32.36-116.687 91.25c82.336 33.03 151.56 4.26 182.72-77.374c-23.333-9.574-45.51-14.102-66.032-13.875zm81.97 19.47c-37.76 80.056-8.793 149.03 75.343 183.094c37.786-80.46 9.994-149.316-75.344-183.094z"/></symbol>
+<symbol id="cancel" viewBox="0 0 512 512"><path fill="currentColor" d="M256 16C123.45 16 16 123.45 16 256s107.45 240 240 240s240-107.45 240-240S388.55 16 256 16m0 60c99.41 0 180 80.59 180 180s-80.59 180-180 180S76 355.41 76 256S156.59 76 256 76m-80.625 60c-.97-.005-2.006.112-3.063.313v-.032c-18.297 3.436-45.264 34.743-33.375 46.626l73.157 73.125l-73.156 73.126c-14.63 14.625 29.275 58.534 43.906 43.906L256 299.906l73.156 73.156c14.63 14.628 58.537-29.28 43.906-43.906l-73.156-73.125l73.156-73.124c14.63-14.625-29.275-58.5-43.906-43.875L256 212.157l-73.156-73.125c-2.06-2.046-4.56-3.015-7.47-3.03z"/></symbol>
 <symbol id="candle-holder" viewBox="0 0 512 512"><path fill="currentColor" d="M290.75 14.625c-14.073 0-47.344 43.993-47.344 79.97c0 26.674 11.15 44.41 38.375 46.81c3.648-21.18 3.137-42.01-3-62.874l17.908-5.28c6.65 22.616 7.458 45.273 4.093 67.625c27.623-3.88 37.283-20.537 37.283-46.28c0-35.977-33.655-79.97-47.313-79.97zm-45.188 140.063v11.843l-.187-3.905c.774 26.386-17.415 28.686-17.125 48.156c.227 15.365 12.172 20.084 17.313 12.69v145.75h97.156v-83.5c6.51 7.5 19.83 1.552 20.092-16.22c.31-20.772-16.87-25.295-20.093-48.22v-66.593c-32.392 10.276-65.8 9.795-97.158 0zM113.625 285.344c-19.435.005-37.23 10.322-48.094 26.125c-14.485 21.068-17.477 52.02-.81 81.405c7.814 13.78 4.407 25.93-2.126 32.28c-6.533 6.352-15.494 8.594-27.563-2.53l-12.655 13.72c17.56 16.183 40.3 14.805 53.25 2.217s16.81-34.69 5.344-54.906c-13.474-23.753-10.43-46.47-.032-61.594s27.313-22.524 45.968-15.593c23.738 8.82 34.46 29.795 32.813 48.124c-1.355 15.062-9.978 28.618-30.095 33.437h-25.688c3.313 6.736 7.145 13.262 11.407 19.533l.03 1c.213-.006.415-.025.626-.032c10.88 15.772 24.687 29.972 41.063 42.158H443c23.286-17.327 41.907-38.453 53.75-62.657H164.28c8.205-9.01 13.02-20.162 14.064-31.78c2.414-26.863-13.754-55.694-44.938-67.28c-6.646-2.47-13.303-3.628-19.78-3.626z"/></symbol>
 <symbol id="cape" viewBox="0 0 512 512"><path fill="currentColor" d="M257.1 18.46c-17 19.58-32.7 35.31-55.1 42.98c41.5 68.46 139.9 119.76 241.2 62.36c18-14.1 26.7-31.45 34.9-47.34c-98.9-5.45-164.8-19.81-221-58M225 111.1c-18.9 38.3-41 72.2-65.1 100.2c-40.8 47.5-87.03 78.7-132.67 85.3c6.47 19.8 10.43 59.2 25.84 72.6c45.63 18.5 132.83-9.1 164.63-38.7c16.1-16.4 24-36.6 34.2-60.9c-2 35.2-13.3 56.6-27.7 72.4c-18.5 18.2-36.6 30.8-59 37.8c11.9 22.3 16.8 49.7 27.7 67.8c4.4 6.7 8 9.5 14.6 9.4c42-10.9 74.4-45.9 110.9-60.5c55.3-29.3 65.3-74 67-85.5c-1.1 28.7-12.7 67.5-31.7 83.6c33.8 12.4 47.5 67.3 52.3 90.2c15.2-14 33.2-35.4 48.1-60.1C473 393.5 487 357.2 487 324.2c-.3-38.8-17-76.4-26.5-118.2c-5-21.7-7.7-44.7-4.6-69.3c-131.7 55.7-190.9 9.4-230.9-25.6"/></symbol>
 <symbol id="carrot" viewBox="0 0 512 512"><path fill="currentColor" d="M228.063 16.72a9 9 0 0 0-2.47.5c-16.076 5.625-27.55 10.77-36.155 21.81c-6.477 8.313-10.984 18.854-16.063 34.407c-11.313-12.292-26.732-22.486-43.875-30.812c-23.817-11.568-51.083-19.46-76.156-22.78a9 9 0 0 0-6.282 16.343c21.685 14.934 40.525 29.268 53.407 43.687c9.964 11.155 16.21 22.01 18.436 33.53c-32.89-3.705-62.75 3.47-99.406 23.25a9 9 0 0 0 5.125 16.907c34.352-3.265 69.484-3.808 96.563.625c13.54 2.217 25.007 5.723 33.218 10.25c3.168 1.747 5.82 3.57 8 5.532c5.365-8.13 12.033-15.638 19.438-22.22c13.09-11.637 28.792-20.638 45.03-24.094c-11.326-18.24-14.138-30.23-12.843-41.5c1.588-13.813 10.567-28.893 22.564-52.344a9 9 0 0 0-8.53-13.093zm13.906 123.436c-.527-.003-1.062.016-1.595.03c-14.925.428-32.515 8.518-46.594 21.033c-16.088 14.3-26.977 33.817-26.78 50c.39 32.175 18.688 67.77 47.344 102.124c28.655 34.354 67.3 67.31 106.375 94.72c39.073 27.406 78.66 49.316 108.78 61.936c15.06 6.31 27.857 10.275 36.313 11.5c3.958.574 6.797.448 8.187.188c.065-.798.153-1.837.063-3.22c-.205-3.113-.814-7.504-1.844-12.75c-2.06-10.49-5.772-24.554-10.97-40.812c-10.397-32.516-26.75-73.9-47.688-114.937c-13.56-26.58-29.085-53.016-46.093-76.814c-14.193 17.317-12.034 17.985-49.72 36.72l-7.125-14.313c39.43-19.6 30.222-15.247 47.063-35.594c-6.235-8.066-12.65-15.74-19.22-22.907a286 286 0 0 0-9.937-10.344c-24.116 33.382-44.493 41.374-76.436 55.124l-7.125-16.53c32.963-14.19 47.585-18.322 70.218-50.814c-21.94-18.66-45.057-30.964-68.594-34.03a37 37 0 0 0-4.625-.314z"/></symbol>

static/styles.css

@@ -487,7 +487,6 @@ button.sheet-skill:hover { background: var(--panel-2); }
 .doll-slot.small .gi { width: 26px; height: 26px; }
 .doll-side { display: grid; gap: 12px; min-width: 0; }
 .doll-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; align-items: center; }
-.doll-stats > span:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
 .doll-stats b { justify-self: end; }
 .doll-stats .gi { width: 14px; height: 14px; }
 .worn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
@@ -496,3 +495,18 @@ button.sheet-skill:hover { background: var(--panel-2); }
 .worn-head .btn { margin-left: auto; }
 .tool-slots { display: flex; flex-wrap: wrap; gap: 8px; }
 @media (max-width: 520px) { .doll-wrap { grid-template-columns: 1fr; justify-items: center; } .doll-side { width: 100%; } }
+
+/* Swapping gear from the doll */
+.swap-head { margin-top: 2px; }
+.swap-grid { display: flex; flex-wrap: wrap; gap: 6px; }
+.doll-slot.swap { width: 44px; height: 44px; }
+.doll-slot.swap .gi { width: 28px; height: 28px; }
+.doll-slot.swap:hover:not(:disabled) { border-color: var(--gold); }
+.doll-slot.swap:disabled { opacity: .4; cursor: not-allowed; }
+.doll-slot.swap.off { border-style: dashed; background: transparent; }
+.doll-slot.swap.off .gi { width: 18px; height: 18px; }
+.swap-type { position: absolute; bottom: -4px; right: -4px; }
+.swap-type .dmg { width: 16px; height: 16px; background: var(--panel); border-radius: 4px; }
+.swap-qty { position: absolute; top: 1px; left: 3px; font-size: 10px; font-weight: 700; color: var(--muted); }
+.doll-slot.swap .swap-type .gi { width: 11px; height: 11px; }
+.doll-slot.swap .hands { top: 1px; right: 1px; font-size: 8px; padding: 0 2px; }