@rpgjs/client 5.0.0-alpha.43 → 5.0.0-alpha.44

package/dist/components/gui/menu/equip-menu.ce.js

@@ -1,349 +1,481 @@
-import { useProps, useDefineProps, signal, computed, effect, createTabindexNavigator, h, DOMContainer, DOMElement, DOMSprite, cond, loop, Navigation } from 'canvasengine';
-import { inject } from '../../../core/inject.js';
-import { RpgClientEngine } from '../../../RpgClientEngine.js';
-
+import { inject } from "../../../core/inject.js";
+import { RpgClientEngine } from "../../../RpgClientEngine.js";
+import { DOMContainer, DOMElement, DOMSprite, Navigation, computed, cond, createTabindexNavigator, effect, h, loop, signal, useDefineProps, useProps } from "canvasengine";
+//#region src/components/gui/menu/equip-menu.ce
 function component($$props) {
-        useProps($$props);
-        const defineProps = useDefineProps($$props);
-        var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var engine = inject(RpgClientEngine);
-var keyboardControls = engine.globalConfig.keyboardControls;
-var currentPlayer = engine.scene.currentPlayer;
-var selectedTab = signal(0);
-var selectedItem = signal(0);
-var _a = defineProps(), data = _a.data, onInteraction = _a.onInteraction, onBack = _a.onBack;
-var equips = computed(function () { var _a; return (_a = data().equips) !== null && _a !== void 0 ? _a : data().items; });
-var slots = computed(function () { return data().slots; });
-var defaultSlots = [
-    { id: "weapon", label: "Weapon", types: ["weapon"] },
-    { id: "armor", label: "Armor", types: ["armor"] }
-];
-var resolveProp = function (value) { return typeof value === "function" ? value() : value; };
-var safeEquips = computed(function () {
-    var list = resolveProp(equips);
-    return Array.isArray(list) ? list : [];
-});
-var slotList = computed(function () {
-    var list = resolveProp(slots);
-    if (Array.isArray(list) && list.length)
-        return list;
-    return defaultSlots;
-});
-var currentSlot = computed(function () { return slotList()[selectedTab()]; });
-var equippedIds = computed(function () {
-    var _a, _b;
-    var equipped = ((_b = (_a = currentPlayer()).equipments) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
-    return new Set(equipped.map(function (it) { var _a, _b, _c; return (_c = (_b = (_a = it === null || it === void 0 ? void 0 : it.id) === null || _a === void 0 ? void 0 : _a.call(it)) !== null && _b !== void 0 ? _b : it === null || it === void 0 ? void 0 : it.id) !== null && _c !== void 0 ? _c : it === null || it === void 0 ? void 0 : it.name; }));
-});
-var equippedOverrides = signal({});
-effect(function () {
-    var next = {};
-    safeEquips().forEach(function (item) {
-        if ((item === null || item === void 0 ? void 0 : item.id) && typeof item.equipped === "boolean") {
-            next[item.id] = item.equipped;
-        }
-    });
-    equippedOverrides.set(next);
-});
-var itemEquipped = function (item) {
-    if (!item)
-        return false;
-    var overrides = equippedOverrides();
-    if (Object.prototype.hasOwnProperty.call(overrides, item.id)) {
-        return overrides[item.id];
-    }
-    if (typeof item.equipped === "boolean")
-        return item.equipped;
-    return equippedIds().has(item.id);
-};
-var slotTypes = function (slot) {
-    if (!slot)
-        return [];
-    if (Array.isArray(slot.types))
-        return slot.types;
-    if (slot.type)
-        return [slot.type];
-    if (slot.id)
-        return [slot.id];
-    return [];
-};
-var slotItems = computed(function () {
-    var slot = currentSlot();
-    if (!slot)
-        return [];
-    var types = new Set(slotTypes(slot));
-    return safeEquips().filter(function (item) { return item && types.has(item.type); });
-});
-var currentEquippedItem = computed(function () {
-    var list = slotItems();
-    return list.find(function (item) { return itemEquipped(item); }) || null;
-});
-var listEntries = computed(function () {
-    var items = slotItems().map(function (item) { return (__assign(__assign({}, item), { kind: "item", tag: itemEquipped(item) ? "Equipped" : "" })); });
-    var equipped = currentEquippedItem();
-    if (!equipped)
-        return items;
-    return __spreadArray([
-        {
-            id: "__unequip__",
-            name: "Unequip",
-            description: "Remove the current equipment",
-            kind: "unequip",
-            tag: ""
-        }
-    ], items, true);
-});
-var currentEntry = computed(function () { return listEntries()[selectedItem()]; });
-var detailsItem = computed(function () {
-    var entry = currentEntry();
-    if ((entry === null || entry === void 0 ? void 0 : entry.kind) === "item")
-        return entry;
-    return currentEquippedItem();
-});
-var equippedText = computed(function () {
-    var slot = currentSlot();
-    if (!slot)
-        return "";
-    var equipped = currentEquippedItem();
-    return equipped ? "".concat(slot.label, ": ").concat(equipped.name) : "".concat(slot.label, ": Empty");
-});
-computed(function () { return listEntries().length === 0; });
-var nav = createTabindexNavigator(selectedItem, { count: function () { return listEntries().length; } }, "wrap");
-var playerParams = computed(function () {
-    var _a, _b;
-    var menuData = data();
-    if (menuData === null || menuData === void 0 ? void 0 : menuData.playerStats)
-        return menuData.playerStats;
-    if (menuData === null || menuData === void 0 ? void 0 : menuData.playerParams)
-        return menuData.playerParams;
-    return ((_b = (_a = currentPlayer()) === null || _a === void 0 ? void 0 : _a._param) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
-});
-var statOrder = ["atk", "def", "pdef", "sdef", "str", "dex", "int", "agi", "maxHp", "maxSp"];
-var statLabels = {
-    atk: "ATK",
-    def: "DEF",
-    pdef: "PDEF",
-    sdef: "SDEF",
-    str: "STR",
-    dex: "DEX",
-    int: "INT",
-    agi: "AGI",
-    maxHp: "MAX HP",
-    maxSp: "MAX SP"
-};
-var getItemStats = function (item) {
-    if (!item)
-        return {};
-    var stats = item.stats || item.params || {};
-    if (Object.keys(stats).length)
-        return stats;
-    var keys = ["atk", "def", "pdef", "sdef", "str", "dex", "int", "agi", "maxHp", "maxSp"];
-    var direct = {};
-    keys.forEach(function (key) {
-        if (item[key] !== undefined)
-            direct[key] = item[key];
-    });
-    return direct;
-};
-var buildStatsList = function (deltaStats) {
-    var params = playerParams() || {};
-    var orderedKeys = statOrder.filter(function (key) { return deltaStats[key] !== undefined; });
-    var extraKeys = Object.keys(deltaStats).filter(function (key) { return !statOrder.includes(key); });
-    var keys = orderedKeys.concat(extraKeys);
-    var list = [];
-    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
-        var key = keys_1[_i];
-        var delta = deltaStats[key];
-        if (delta === undefined || delta === 0)
-            continue;
-        var current = params[key];
-        if (current === undefined && key === "def")
-            current = params.pdef;
-        var next = current !== undefined ? current + delta : undefined;
-        list.push({
-            key: key,
-            label: statLabels[key] || key.toUpperCase(),
-            delta: delta,
-            current: current,
-            next: next
-        });
-    }
-    return list;
-};
-var displayStats = computed(function () {
-    var entry = currentEntry();
-    var equipped = currentEquippedItem();
-    if (!entry)
-        return [];
-    if (entry.kind === "unequip") {
-        if (!equipped)
-            return [];
-        var stats_1 = getItemStats(equipped);
-        var delta_1 = {};
-        Object.keys(stats_1).forEach(function (key) {
-            delta_1[key] = -stats_1[key];
-        });
-        return buildStatsList(delta_1);
-    }
-    if (entry.kind === "item") {
-        var equippedStats_1 = getItemStats(equipped);
-        var nextStats_1 = getItemStats(entry);
-        var delta_2 = {};
-        var keys = new Set(__spreadArray(__spreadArray([], Object.keys(nextStats_1), true), Object.keys(equippedStats_1), true));
-        keys.forEach(function (key) {
-            delta_2[key] = (nextStats_1[key] || 0) - (equippedStats_1[key] || 0);
-        });
-        return buildStatsList(delta_2);
-    }
-    return [];
-});
-var applyEquipState = function (slot, itemId, equip) {
-    var types = slotTypes(slot);
-    var next = __assign({}, equippedOverrides());
-    if (types.length) {
-        safeEquips().forEach(function (item) {
-            if (!item)
-                return;
-            if (types.includes(item.type)) {
-                next[item.id] = false;
-            }
-        });
-    }
-    if (itemId) {
-        next[itemId] = equip;
-    }
-    equippedOverrides.set(next);
-};
-var commitSelection = function (index) {
-    var entry = listEntries()[index];
-    if (!entry)
-        return;
-    if (entry.kind === "unequip") {
-        var equipped = currentEquippedItem();
-        if (equipped && onInteraction) {
-            onInteraction("equipItem", { id: equipped.id, equip: false });
-        }
-        applyEquipState(currentSlot(), equipped === null || equipped === void 0 ? void 0 : equipped.id, false);
-        return;
-    }
-    if (entry.kind === "item" && onInteraction) {
-        if (!itemEquipped(entry)) {
-            onInteraction("equipItem", { id: entry.id, equip: true });
-        }
-        applyEquipState(currentSlot(), entry.id, true);
-    }
-};
-function selectTab(index) {
-    return function () {
-        selectedTab.set(index);
-        selectedItem.set(0);
-    };
-}
-function selectItem(index) {
-    return function () {
-        selectedItem.set(index);
-        commitSelection(index);
-    };
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var __assign = this && this.__assign || function() {
+		__assign = Object.assign || function(t) {
+			for (var s, i = 1, n = arguments.length; i < n; i++) {
+				s = arguments[i];
+				for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+			}
+			return t;
+		};
+		return __assign.apply(this, arguments);
+	};
+	var __spreadArray = this && this.__spreadArray || function(to, from, pack) {
+		if (pack || arguments.length === 2) {
+			for (var i = 0, l = from.length, ar; i < l; i++) if (ar || !(i in from)) {
+				if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+				ar[i] = from[i];
+			}
+		}
+		return to.concat(ar || Array.prototype.slice.call(from));
+	};
+	var engine = inject(RpgClientEngine);
+	var keyboardControls = engine.globalConfig.keyboardControls;
+	var currentPlayer = engine.scene.currentPlayer;
+	var selectedTab = signal(0);
+	var selectedItem = signal(0);
+	var _a = defineProps(), data = _a.data, onInteraction = _a.onInteraction, onBack = _a.onBack;
+	var equips = computed(function() {
+		var _a;
+		return (_a = data().equips) !== null && _a !== void 0 ? _a : data().items;
+	});
+	var slots = computed(function() {
+		return data().slots;
+	});
+	var defaultSlots = [{
+		id: "weapon",
+		label: "Weapon",
+		types: ["weapon"]
+	}, {
+		id: "armor",
+		label: "Armor",
+		types: ["armor"]
+	}];
+	var resolveProp = function(value) {
+		return typeof value === "function" ? value() : value;
+	};
+	var safeEquips = computed(function() {
+		var list = resolveProp(equips);
+		return Array.isArray(list) ? list : [];
+	});
+	var slotList = computed(function() {
+		var list = resolveProp(slots);
+		if (Array.isArray(list) && list.length) return list;
+		return defaultSlots;
+	});
+	var currentSlot = computed(function() {
+		return slotList()[selectedTab()];
+	});
+	var equippedIds = computed(function() {
+		var _a, _b;
+		var equipped = ((_b = (_a = currentPlayer()).equipments) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+		return new Set(equipped.map(function(it) {
+			var _a, _b, _c;
+			return (_c = (_b = (_a = it === null || it === void 0 ? void 0 : it.id) === null || _a === void 0 ? void 0 : _a.call(it)) !== null && _b !== void 0 ? _b : it === null || it === void 0 ? void 0 : it.id) !== null && _c !== void 0 ? _c : it === null || it === void 0 ? void 0 : it.name;
+		}));
+	});
+	var equippedOverrides = signal({});
+	effect(function() {
+		var next = {};
+		safeEquips().forEach(function(item) {
+			if ((item === null || item === void 0 ? void 0 : item.id) && typeof item.equipped === "boolean") next[item.id] = item.equipped;
+		});
+		equippedOverrides.set(next);
+	});
+	var itemEquipped = function(item) {
+		if (!item) return false;
+		var overrides = equippedOverrides();
+		if (Object.prototype.hasOwnProperty.call(overrides, item.id)) return overrides[item.id];
+		if (typeof item.equipped === "boolean") return item.equipped;
+		return equippedIds().has(item.id);
+	};
+	var slotTypes = function(slot) {
+		if (!slot) return [];
+		if (Array.isArray(slot.types)) return slot.types;
+		if (slot.type) return [slot.type];
+		if (slot.id) return [slot.id];
+		return [];
+	};
+	var slotItems = computed(function() {
+		var slot = currentSlot();
+		if (!slot) return [];
+		var types = new Set(slotTypes(slot));
+		return safeEquips().filter(function(item) {
+			return item && types.has(item.type);
+		});
+	});
+	var currentEquippedItem = computed(function() {
+		return slotItems().find(function(item) {
+			return itemEquipped(item);
+		}) || null;
+	});
+	var listEntries = computed(function() {
+		var items = slotItems().map(function(item) {
+			return __assign(__assign({}, item), {
+				kind: "item",
+				tag: itemEquipped(item) ? "Equipped" : ""
+			});
+		});
+		if (!currentEquippedItem()) return items;
+		return __spreadArray([{
+			id: "__unequip__",
+			name: "Unequip",
+			description: "Remove the current equipment",
+			kind: "unequip",
+			tag: ""
+		}], items, true);
+	});
+	var currentEntry = computed(function() {
+		return listEntries()[selectedItem()];
+	});
+	var detailsItem = computed(function() {
+		var entry = currentEntry();
+		if ((entry === null || entry === void 0 ? void 0 : entry.kind) === "item") return entry;
+		return currentEquippedItem();
+	});
+	var equippedText = computed(function() {
+		var slot = currentSlot();
+		if (!slot) return "";
+		var equipped = currentEquippedItem();
+		return equipped ? "".concat(slot.label, ": ").concat(equipped.name) : "".concat(slot.label, ": Empty");
+	});
+	computed(function() {
+		return listEntries().length === 0;
+	});
+	var nav = createTabindexNavigator(selectedItem, { count: function() {
+		return listEntries().length;
+	} }, "wrap");
+	var playerParams = computed(function() {
+		var _a, _b;
+		var menuData = data();
+		if (menuData === null || menuData === void 0 ? void 0 : menuData.playerStats) return menuData.playerStats;
+		if (menuData === null || menuData === void 0 ? void 0 : menuData.playerParams) return menuData.playerParams;
+		return ((_b = (_a = currentPlayer()) === null || _a === void 0 ? void 0 : _a._param) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+	});
+	var statOrder = [
+		"atk",
+		"def",
+		"pdef",
+		"sdef",
+		"str",
+		"dex",
+		"int",
+		"agi",
+		"maxHp",
+		"maxSp"
+	];
+	var statLabels = {
+		atk: "ATK",
+		def: "DEF",
+		pdef: "PDEF",
+		sdef: "SDEF",
+		str: "STR",
+		dex: "DEX",
+		int: "INT",
+		agi: "AGI",
+		maxHp: "MAX HP",
+		maxSp: "MAX SP"
+	};
+	var getItemStats = function(item) {
+		if (!item) return {};
+		var stats = item.stats || item.params || {};
+		if (Object.keys(stats).length) return stats;
+		var keys = [
+			"atk",
+			"def",
+			"pdef",
+			"sdef",
+			"str",
+			"dex",
+			"int",
+			"agi",
+			"maxHp",
+			"maxSp"
+		];
+		var direct = {};
+		keys.forEach(function(key) {
+			if (item[key] !== void 0) direct[key] = item[key];
+		});
+		return direct;
+	};
+	var buildStatsList = function(deltaStats) {
+		var params = playerParams() || {};
+		var orderedKeys = statOrder.filter(function(key) {
+			return deltaStats[key] !== void 0;
+		});
+		var extraKeys = Object.keys(deltaStats).filter(function(key) {
+			return !statOrder.includes(key);
+		});
+		var keys = orderedKeys.concat(extraKeys);
+		var list = [];
+		for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+			var key = keys_1[_i];
+			var delta = deltaStats[key];
+			if (delta === void 0 || delta === 0) continue;
+			var current = params[key];
+			if (current === void 0 && key === "def") current = params.pdef;
+			var next = current !== void 0 ? current + delta : void 0;
+			list.push({
+				key,
+				label: statLabels[key] || key.toUpperCase(),
+				delta,
+				current,
+				next
+			});
+		}
+		return list;
+	};
+	var displayStats = computed(function() {
+		var entry = currentEntry();
+		var equipped = currentEquippedItem();
+		if (!entry) return [];
+		if (entry.kind === "unequip") {
+			if (!equipped) return [];
+			var stats_1 = getItemStats(equipped);
+			var delta_1 = {};
+			Object.keys(stats_1).forEach(function(key) {
+				delta_1[key] = -stats_1[key];
+			});
+			return buildStatsList(delta_1);
+		}
+		if (entry.kind === "item") {
+			var equippedStats_1 = getItemStats(equipped);
+			var nextStats_1 = getItemStats(entry);
+			var delta_2 = {};
+			new Set(__spreadArray(__spreadArray([], Object.keys(nextStats_1), true), Object.keys(equippedStats_1), true)).forEach(function(key) {
+				delta_2[key] = (nextStats_1[key] || 0) - (equippedStats_1[key] || 0);
+			});
+			return buildStatsList(delta_2);
+		}
+		return [];
+	});
+	var applyEquipState = function(slot, itemId, equip) {
+		var types = slotTypes(slot);
+		var next = __assign({}, equippedOverrides());
+		if (types.length) safeEquips().forEach(function(item) {
+			if (!item) return;
+			if (types.includes(item.type)) next[item.id] = false;
+		});
+		if (itemId) next[itemId] = equip;
+		equippedOverrides.set(next);
+	};
+	var commitSelection = function(index) {
+		var entry = listEntries()[index];
+		if (!entry) return;
+		if (entry.kind === "unequip") {
+			var equipped = currentEquippedItem();
+			if (equipped && onInteraction) onInteraction("equipItem", {
+				id: equipped.id,
+				equip: false
+			});
+			applyEquipState(currentSlot(), equipped === null || equipped === void 0 ? void 0 : equipped.id, false);
+			return;
+		}
+		if (entry.kind === "item" && onInteraction) {
+			if (!itemEquipped(entry)) onInteraction("equipItem", {
+				id: entry.id,
+				equip: true
+			});
+			applyEquipState(currentSlot(), entry.id, true);
+		}
+	};
+	function selectTab(index) {
+		return function() {
+			selectedTab.set(index);
+			selectedItem.set(0);
+		};
+	}
+	function selectItem(index) {
+		return function() {
+			selectedItem.set(index);
+			commitSelection(index);
+		};
+	}
+	var iconSheet = function(iconId) {
+		return { definition: engine.getSpriteSheet(iconId) };
+	};
+	var controls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown: function() {
+				if (!listEntries().length) return;
+				nav.next(-1);
+			}
+		},
+		left: {
+			repeat: true,
+			bind: keyboardControls.left,
+			throttle: 150,
+			keyDown: function() {
+				var tabs = slotList();
+				if (!tabs.length) return;
+				selectedTab.update(function(value) {
+					return (value - 1 + tabs.length) % tabs.length;
+				});
+				selectedItem.set(0);
+			}
+		},
+		right: {
+			repeat: true,
+			bind: keyboardControls.right,
+			throttle: 150,
+			keyDown: function() {
+				var tabs = slotList();
+				if (!tabs.length) return;
+				selectedTab.update(function(value) {
+					return (value + 1) % tabs.length;
+				});
+				selectedItem.set(0);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown: function() {
+				if (!listEntries().length) return;
+				nav.next(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown: function() {
+				if (!listEntries().length) return;
+				commitSelection(selectedItem());
+			}
+		},
+		escape: {
+			bind: keyboardControls.escape,
+			keyDown: function() {
+				if (onBack) onBack();
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	effect(function() {
+		var count = listEntries().length;
+		if (!count) {
+			selectedItem.set(0);
+			return;
+		}
+		if (selectedItem() >= count) selectedItem.set(count - 1);
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%"
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel rpg-ui-panel" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-header" },
+		textContent: "Equip"
+	}), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked" }
+	}, [h(DOMElement, { element: "div" }, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-details rpg-ui-panel" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-hero" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-hero-icon" }
+	}, h(DOMSprite, {
+		sheet: computed(() => iconSheet(detailsItem()?.icon)),
+		playing: "default",
+		width: "48px",
+		height: "48px",
+		objectFit: "contain"
+	})), h(DOMElement, { element: "div" }, [
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-menu-panel-details-title" },
+			textContent: computed(() => detailsItem()?.name || currentSlot()?.label || "Equip")
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-menu-panel-details-desc" },
+			textContent: computed(() => detailsItem()?.description || "")
+		}),
+		cond(computed(() => displayStats().length > 0), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-equip-stats" }
+		}, loop(displayStats, (stat, index) => h(DOMElement, {
+			element: "div",
+			attrs: { class: ["rpg-ui-equip-stat", {
+				positive: stat.delta > 0,
+				negative: stat.delta < 0
+			}] }
+		}, [
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-equip-stat-key" },
+				textContent: stat.label
+			}),
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-equip-stat-value" },
+				textContent: stat.delta > 0 ? "+" : "" + stat.delta
+			}),
+			cond(stat.current, () => h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-ui-equip-stat-current" },
+				textContent: stat.current + " -> " + stat.next
+			}))
+		])))),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-menu-panel-details-meta" }
+		}, h(DOMElement, {
+			element: "span",
+			textContent: computed(() => equippedText())
+		}))
+	])]))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-tabs" }
+	}, loop(slotList, (tab, tabIndex) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: ["rpg-ui-menu-tab", computed(() => ({ active: selectedTab() === tabIndex }))],
+			tabindex: tabIndex,
+			click: selectTab(tabIndex)
+		},
+		textContent: tab.label
+	}))), h(Navigation, {
+		tabindex: selectedItem,
+		controls
+	}, loop(listEntries, (entry, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: "rpg-ui-menu-item rpg-ui-menu-row",
+			"data-selected": computed(() => selectedItem() === index ? "true" : "false"),
+			tabindex: index,
+			click: selectItem(index)
+		}
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-row-main" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-ui-menu-row-icon" }
+	}, cond(entry?.icon, () => h(DOMSprite, {
+		sheet: computed(() => iconSheet(entry.icon)),
+		playing: "default",
+		width: "28px",
+		height: "28px",
+		objectFit: "contain"
+	}))), h(DOMElement, {
+		element: "span",
+		textContent: entry.name
+	})]), h(DOMElement, {
+		element: "span",
+		attrs: { class: "rpg-ui-menu-row-end" },
+		textContent: entry.tag || ""
+	})])))])])]));
 }
-var iconSheet = function (iconId) { return ({
-    definition: engine.getSpriteSheet(iconId)
-}); };
-var controls = signal({
-    up: {
-        repeat: true,
-        bind: keyboardControls.up,
-        throttle: 150,
-        keyDown: function () {
-            if (!listEntries().length)
-                return;
-            nav.next(-1);
-        }
-    },
-    left: {
-        repeat: true,
-        bind: keyboardControls.left,
-        throttle: 150,
-        keyDown: function () {
-            var tabs = slotList();
-            if (!tabs.length)
-                return;
-            selectedTab.update(function (value) { return (value - 1 + tabs.length) % tabs.length; });
-            selectedItem.set(0);
-        }
-    },
-    right: {
-        repeat: true,
-        bind: keyboardControls.right,
-        throttle: 150,
-        keyDown: function () {
-            var tabs = slotList();
-            if (!tabs.length)
-                return;
-            selectedTab.update(function (value) { return (value + 1) % tabs.length; });
-            selectedItem.set(0);
-        }
-    },
-    down: {
-        repeat: true,
-        bind: keyboardControls.down,
-        throttle: 150,
-        keyDown: function () {
-            if (!listEntries().length)
-                return;
-            nav.next(1);
-        }
-    },
-    action: {
-        bind: keyboardControls.action,
-        keyDown: function () {
-            if (!listEntries().length)
-                return;
-            commitSelection(selectedItem());
-        }
-    },
-    escape: {
-        bind: keyboardControls.escape,
-        keyDown: function () {
-            if (onBack)
-                onBack();
-        }
-    },
-    gamepad: {
-        enabled: true
-    }
-});
-effect(function () {
-    var count = listEntries().length;
-    if (!count) {
-        selectedItem.set(0);
-        return;
-    }
-    if (selectedItem() >= count) {
-        selectedItem.set(count - 1);
-    }
-});
-        let $this = h(DOMContainer, { width: '100%', height: '100%' }, h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel rpg-ui-panel' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-header' }, textContent: 'Equip' }), h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked' } }, [h(DOMElement, { element: "div" }, h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-details rpg-ui-panel' } }, h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-hero' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-hero-icon' } }, h(DOMSprite, { sheet: computed(() => iconSheet(detailsItem()?.icon)), playing: 'default', width: '48px', height: '48px', objectFit: 'contain' })), h(DOMElement, { element: "div" }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-details-title' }, textContent: computed(() => detailsItem()?.name || currentSlot()?.label || "Equip") }), h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-details-desc' }, textContent: computed(() => detailsItem()?.description || "") }), cond(computed(() => displayStats().length > 0), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-equip-stats' } }, loop(displayStats, (stat, index) => h(DOMElement, { element: "div", attrs: { class: ['rpg-ui-equip-stat', { positive: stat.delta > 0, negative: stat.delta < 0 }] } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-equip-stat-key' }, textContent: stat.label }), h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-equip-stat-value' }, textContent: stat.delta > 0 ? "+" : "" + stat.delta }), cond(stat.current, () => h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-equip-stat-current' }, textContent: stat.current + ' -> ' + stat.next }))])))), h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-details-meta' } }, h(DOMElement, { element: "span", textContent: computed(() => equippedText()) }))])]))), h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-tabs' } }, loop(slotList, (tab, tabIndex) => h(DOMElement, { element: "div", attrs: { class: ['rpg-ui-menu-tab', computed(() => ({ active: selectedTab() === tabIndex }))], tabindex: tabIndex, click: selectTab(tabIndex) }, textContent: tab.label }))), h(Navigation, { tabindex: selectedItem, controls: controls }, loop(listEntries, (entry, index) => h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-item rpg-ui-menu-row', 'data-selected': computed(() => selectedItem() === index ? "true" : "false"), tabindex: index, click: selectItem(index) } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-row-main' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-ui-menu-row-icon' } }, cond(entry?.icon, () => h(DOMSprite, { sheet: computed(() => iconSheet(entry.icon)), playing: 'default', width: '28px', height: '28px', objectFit: 'contain' }))), h(DOMElement, { element: "span", textContent: entry.name })]), h(DOMElement, { element: "span", attrs: { class: 'rpg-ui-menu-row-end' }, textContent: entry.tag || "" })])))])])]));
-        return $this
-      }
-
+//#endregion
 export { component as default };
-//# sourceMappingURL=equip-menu.ce.js.map
+
+//# sourceMappingURL=equip-menu.ce.js.map