/* ============================================================
   hud.jsx — 全ページ共通「なかま図鑑」ステータスバー
   なかま X/8 ＋ 各キャラのミニアイコン（解放=カラー / 未解放=?）
   依存：mascots.jsx / mascots2.jsx / mascots3.jsx / unlock-utils.js
   使い方：各ページの <div className="statusbar">…</div> の代わりに
           {window.HudBar ? React.createElement(window.HudBar, { tint }) : null}
   ============================================================ */
const HUD_CHARS = [
  { id: "panda",  comp: () => window.PixelPanda, scale: 0.16 },
  { id: "pico",   comp: () => window.Pixel,      scale: 0.18 },
  { id: "uni",    comp: () => window.PixelUni,   scale: 0.18 },
  { id: "mole",   comp: () => window.PixelMole,  scale: 0.18 },
  { id: "goat",   comp: () => window.PixelGoat,  scale: 0.17 },
  { id: "ume",    comp: () => window.PixelUme,   scale: 0.18 },
  { id: "unchi",  comp: () => window.PixelUnchi, scale: 0.18 },
  { id: "kuroto", comp: () => window.PixelKuro,  scale: 0.17 },
];

function HudBar({ tint }) {
  const isUn = (id) => (typeof window.isCharUnlocked === "function"
    ? window.isCharUnlocked(id)
    : (id === "panda" || id === "pico"));
  const unlockedCount = HUD_CHARS.filter((c) => isUn(c.id)).length;
  return (
    <div className="statusbar hud" style={{ borderBottom: "1px solid rgba(0,0,0,.06)" }}>
      <span className="hud-label dot" style={tint ? { color: tint } : null}>
        なかま <b>{unlockedCount}</b><span className="hud-slash">/{HUD_CHARS.length}</span>
      </span>
      <span className="hud-chars">
        {HUD_CHARS.map((c) => {
          const open = isUn(c.id);
          const C = c.comp && c.comp();
          return (
            <span key={c.id} className={"hud-char" + (open ? " on" : " off")}>
              {open && C
                ? <span className="hud-char-in" style={{ transform: `translate(-50%,-50%) scale(${c.scale})` }}><C pose="stand" /></span>
                : <span className="hud-q dot">?</span>}
            </span>
          );
        })}
      </span>
    </div>
  );
}

window.HUD_CHARS = HUD_CHARS;
window.HudBar = HudBar;