ui/inventory-panel.js

import { events } from "../core/events.js";
import { Registry } from "../core/registry.js";

/**
 * Inventory panel — renders the player's bag as a list of clickable items.
 * The selected item is highlighted. Clicking an item selects it.
 */
export function initInventoryPanel() {
  const list = document.getElementById("inventory-list");
  if (!list) return;

  /** @type {PlayerBag|null} */
  let currentBag = null;

  function render(bag) {
    currentBag = bag;
    list.innerHTML = "";
    for (let i = 0; i < bag.entries.length; i++) {
      const entry = bag.entries[i];
      const li = document.createElement("li");
      let label =
        entry.count > 1
          ? `${entry.piece.name} (×${entry.count})`
          : entry.piece.name;
      if (typeof entry.piece.getAmmoType === "function") {
        const ammoName = entry.piece.getAmmoType().name.toLowerCase() + "s";
        label += ` (${entry.ammo} ${ammoName})`;
      }
      li.textContent = label;
      if (bag.isSelected(entry)) {
        li.classList.add("selected");
      }
      list.appendChild(li);
    }
  }

  events.onInventoryChanged(render);
}