для веб-страниц

Инвентарные системы

Вдохновлённые играми — и не только ими. Одно ядро: ввод с клавиатуры, мыши и тача, звук на WebAudio. Всё ниже живое: меняйте стиль, набор предметов и настройки, витрина перестроится на месте.

кольцо · tomb raider

Набор предметов

Наборы независимы от стиля: любой можно показать любым видом — сетка примет кольцевой набор, кольцо покрутит содержимое ящика. Набор «это digital» здесь затем, что инвентарь — не обязательно про игры.

Выгрузка и загрузка

Формат — тот же, что принимает модуль: { layout, theme, rings: [{ title, capacity, items }] }. Скачивание файла из опубликованной страницы блокирует песочница, поэтому выгрузка идёт через копирование, а загрузить можно и файлом, и вставкой.

Предмет: id, label, icon (эмодзи, путь к картинке или строка со SVG), count, description, disabled.

Подключение

// vanilla ESM, без зависимостей
import { PSXInventory } from "./psx-inventory.js";

const inv = new PSXInventory({
  theme: "signalis", layout: "grid",
  columns: 3, capacity: 6,
  actions: ["use", "combine", "examine", "drop"],
  items: [{ id: "revolver", label: "Revolver", icon: "🔫", count: 6 }],
  onSelect: (item, ring, { action }) => apply(action, item.id),
  onCombine: (a, b) => craft(a.id, b.id),
});

inv.open();
inv.set("theme", "resident");       // стиль на лету
inv.setLayout("shop");               // вид на лету
inv.setRings(myRings);                 // другой набор предметов
JSON.stringify(inv.toJSON());          // выгрузка конфигурации

// лавка: цена у предмета, баланс — в опциях
new PSXInventory({
  theme: "devil-may-cry", layout: "shop",
  currency: { label: "Red Orbs", value: 1200, icon: "🔴" },
  items: [{ id: "vital", label: "Vital Star S", icon: "💠", price: 300 }],
  onSelect: (item, ring, { action, price }) => buy(item.id, price),
}).open();

// находка: очередь предметов и вопрос поверх сцены
new PSXInventory({
  theme: "silent-hill", layout: "prompt",
  promptText: "There is a {label}. Take it?", choices: ["Yes", "No"],
  items: [{ id: "drink", label: "Health Drink", icon: "🧴", place: "на полке" }],
  onSelect: (item, ring, { action }) => pickUp(item.id),   // action: take
}).open();

Карта видов

Tomb Raider

Кольцо

Карусель вокруг вертикальной оси, кольца по вертикали, счётчик патронов. Два стиля: пещера и бархат.

Готов
Signalis

Сетка ячеек

Жёсткая вместимость, подменю действий, комбинирование, холодный монохром и дизеринг.

Готов
Resident Evil

Кейс

Та же сетка: двойные рамки ячеек, восемь слотов, травы для смешивания и состояние в шапке.

Готов
Devil May Cry

Лавка

Список товаров с ценами, баланс сфер сверху, подтверждение покупки. Дорогое гаснет.

Готов
Silent Hill

Находка

Предмет на месте и вопрос «There is a… Take it?» с выбором Yes / No. Находки идут очередью.

Готов
Metal Gear Solid

Круг

Сектора по кругу, наведение прямо по углу мышью, выбор в момент отпускания клавиши.

Готов