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

package/dist/components/gui/shop/shop.ce.js

@@ -1,322 +1,652 @@
-import { useProps, useDefineProps, signal, computed, createTabindexNavigator, effect, h, DOMContainer, DOMElement, cond, DOMSprite, Navigation, loop } 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/shop/shop.ce
 function component($$props) {
-        useProps($$props);
-        const defineProps = useDefineProps($$props);
-        var engine = inject(RpgClientEngine);
-var currentPlayer = engine.scene.currentPlayer;
-var keyboardControls = engine.globalConfig.keyboardControls;
-var iconSheet = function (iconId) { return ({
-    definition: engine.getSpriteSheet(iconId),
-    playing: "default"
-}); };
-var goldTerm = engine.globalConfig.goldTerm || 'G';
-var selectedItem = signal(0);
-var selectedTab = signal(0);
-var tradeMode = signal('buy');
-var tradeView = signal('mode');
-var selectedModeIndex = signal(0);
-var quantity = signal(1);
-var quantityDialogOpen = signal(false);
-var defaultMessage = 'Welcome to my shop!';
-var tabs = [
-    { id: 'item', label: 'Items' },
-    { id: 'weapon', label: 'Weapons' },
-    { id: 'armor', label: 'Armor' }
-];
-var _a = defineProps(), data = _a.data, onInteraction = _a.onInteraction, onFinish = _a.onFinish;
-var resolveProp = function (value) { return typeof value === "function" ? value() : value; };
-var guiData = computed(function () { return resolveProp(data) || {}; });
-var shopMessage = computed(function () {
-    var message = resolveProp(guiData().message);
-    return message ? String(message) : defaultMessage;
-});
-var face = computed(function () { return resolveProp(guiData().face); });
-var hasFace = computed(function () {
-    var value = face();
-    return value && value.id;
-});
-var buyItems = computed(function () { return guiData().items || []; });
-var sellItems = computed(function () { return guiData().sellItems || []; });
-var activeItems = computed(function () { return tradeMode() === 'buy' ? buyItems() : sellItems(); });
-var filteredItems = computed(function () {
-    var tab = tabs[selectedTab()];
-    var items = activeItems();
-    if (!tab)
-        return [];
-    return items.filter(function (item) { return (item === null || item === void 0 ? void 0 : item.type) === tab.id; });
-});
-var currentItem = computed(function () { return filteredItems()[selectedItem()]; });
-var gold = computed(function () { return currentPlayer()._gold(); });
-var actionLabel = computed(function () { return tradeMode() === 'buy' ? 'Buy' : 'Sell'; });
-var faceSheet = function (graphicId, animationName) { return ({
-    definition: engine.getSpriteSheet(graphicId),
-    playing: animationName || "default"
-}); };
-var maxQuantity = computed(function () {
-    var _a;
-    var item = currentItem();
-    if (!item)
-        return 0;
-    var price = (item === null || item === void 0 ? void 0 : item.price) || 0;
-    if (price <= 0)
-        return 0;
-    if (tradeMode() === 'sell') {
-        var qty = (_a = item === null || item === void 0 ? void 0 : item.quantity) !== null && _a !== void 0 ? _a : 0;
-        return Math.max(0, qty);
-    }
-    return Math.max(1, Math.floor(gold() / price));
-});
-var totalPrice = computed(function () {
-    var _a;
-    var price = ((_a = currentItem()) === null || _a === void 0 ? void 0 : _a.price) || 0;
-    return price * quantity();
-});
-var displayStats = computed(function () {
-    var _a;
-    var stats = ((_a = currentItem()) === null || _a === void 0 ? void 0 : _a.stats) || {};
-    var params = guiData().playerParams || {};
-    var order = ['atk', 'def', 'pdef', 'sdef', 'str', 'dex', 'int', 'agi', 'maxHp', 'maxSp'];
-    var labels = {
-        atk: 'ATK',
-        def: 'DEF',
-        pdef: 'PDEF',
-        sdef: 'SDEF',
-        str: 'STR',
-        dex: 'DEX',
-        int: 'INT',
-        agi: 'AGI',
-        maxHp: 'MAX HP',
-        maxSp: 'MAX SP'
-    };
-    var orderedKeys = order.filter(function (key) { return stats[key] !== undefined; });
-    var extraKeys = Object.keys(stats).filter(function (key) { return !order.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 = stats[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: labels[key] || key.toUpperCase(),
-            delta: delta,
-            current: current,
-            next: next
-        });
-    }
-    return list;
-});
-var nav = createTabindexNavigator(selectedItem, { count: function () { return filteredItems().length; } }, 'wrap');
-var navTab = createTabindexNavigator(selectedTab, { count: function () { return tabs.length; } }, 'wrap');
-var navMode = createTabindexNavigator(selectedModeIndex, { count: function () { return 2; } }, 'wrap');
-function selectItem(index) {
-    return function () {
-        selectedItem.set(index);
-        quantity.set(1);
-        if (!isItemDisabled(filteredItems()[index])) {
-            quantityDialogOpen.set(true);
-        }
-    };
-}
-function selectTab(index) {
-    return function () {
-        selectedTab.set(index);
-        selectedItem.set(0);
-    };
-}
-function selectMode(mode) {
-    return function () {
-        tradeMode.set(mode);
-        selectedModeIndex.set(mode === 'buy' ? 0 : 1);
-        selectedItem.set(0);
-        quantity.set(1);
-        tradeView.set('items');
-    };
-}
-function isItemDisabled(item) {
-    var _a;
-    if (!item)
-        return true;
-    var price = (item === null || item === void 0 ? void 0 : item.price) || 0;
-    if (price <= 0)
-        return true;
-    if (tradeMode() === 'sell') {
-        var qty = (_a = item === null || item === void 0 ? void 0 : item.quantity) !== null && _a !== void 0 ? _a : 0;
-        return qty <= 0;
-    }
-    return gold() < price;
-}
-function backToMode() {
-    return function () {
-        tradeView.set('mode');
-    };
+	useProps($$props);
+	const defineProps = useDefineProps($$props);
+	var engine = inject(RpgClientEngine);
+	var currentPlayer = engine.scene.currentPlayer;
+	var keyboardControls = engine.globalConfig.keyboardControls;
+	var iconSheet = function(iconId) {
+		return {
+			definition: engine.getSpriteSheet(iconId),
+			playing: "default"
+		};
+	};
+	var goldTerm = engine.globalConfig.goldTerm || "G";
+	var selectedItem = signal(0);
+	var selectedTab = signal(0);
+	var tradeMode = signal("buy");
+	var tradeView = signal("mode");
+	var selectedModeIndex = signal(0);
+	var quantity = signal(1);
+	var quantityDialogOpen = signal(false);
+	var defaultMessage = "Welcome to my shop!";
+	var tabs = [
+		{
+			id: "item",
+			label: "Items"
+		},
+		{
+			id: "weapon",
+			label: "Weapons"
+		},
+		{
+			id: "armor",
+			label: "Armor"
+		}
+	];
+	var _a = defineProps(), data = _a.data, onInteraction = _a.onInteraction, onFinish = _a.onFinish;
+	var resolveProp = function(value) {
+		return typeof value === "function" ? value() : value;
+	};
+	var guiData = computed(function() {
+		return resolveProp(data) || {};
+	});
+	var shopMessage = computed(function() {
+		var message = resolveProp(guiData().message);
+		return message ? String(message) : defaultMessage;
+	});
+	var face = computed(function() {
+		return resolveProp(guiData().face);
+	});
+	var hasFace = computed(function() {
+		var value = face();
+		return value && value.id;
+	});
+	var buyItems = computed(function() {
+		return guiData().items || [];
+	});
+	var sellItems = computed(function() {
+		return guiData().sellItems || [];
+	});
+	var activeItems = computed(function() {
+		return tradeMode() === "buy" ? buyItems() : sellItems();
+	});
+	var filteredItems = computed(function() {
+		var tab = tabs[selectedTab()];
+		var items = activeItems();
+		if (!tab) return [];
+		return items.filter(function(item) {
+			return (item === null || item === void 0 ? void 0 : item.type) === tab.id;
+		});
+	});
+	var currentItem = computed(function() {
+		return filteredItems()[selectedItem()];
+	});
+	var gold = computed(function() {
+		return currentPlayer()._gold();
+	});
+	var actionLabel = computed(function() {
+		return tradeMode() === "buy" ? "Buy" : "Sell";
+	});
+	var faceSheet = function(graphicId, animationName) {
+		return {
+			definition: engine.getSpriteSheet(graphicId),
+			playing: animationName || "default"
+		};
+	};
+	var maxQuantity = computed(function() {
+		var _a;
+		var item = currentItem();
+		if (!item) return 0;
+		var price = (item === null || item === void 0 ? void 0 : item.price) || 0;
+		if (price <= 0) return 0;
+		if (tradeMode() === "sell") {
+			var qty = (_a = item === null || item === void 0 ? void 0 : item.quantity) !== null && _a !== void 0 ? _a : 0;
+			return Math.max(0, qty);
+		}
+		return Math.max(1, Math.floor(gold() / price));
+	});
+	var totalPrice = computed(function() {
+		var _a;
+		return (((_a = currentItem()) === null || _a === void 0 ? void 0 : _a.price) || 0) * quantity();
+	});
+	var displayStats = computed(function() {
+		var _a;
+		var stats = ((_a = currentItem()) === null || _a === void 0 ? void 0 : _a.stats) || {};
+		var params = guiData().playerParams || {};
+		var order = [
+			"atk",
+			"def",
+			"pdef",
+			"sdef",
+			"str",
+			"dex",
+			"int",
+			"agi",
+			"maxHp",
+			"maxSp"
+		];
+		var labels = {
+			atk: "ATK",
+			def: "DEF",
+			pdef: "PDEF",
+			sdef: "SDEF",
+			str: "STR",
+			dex: "DEX",
+			int: "INT",
+			agi: "AGI",
+			maxHp: "MAX HP",
+			maxSp: "MAX SP"
+		};
+		var orderedKeys = order.filter(function(key) {
+			return stats[key] !== void 0;
+		});
+		var extraKeys = Object.keys(stats).filter(function(key) {
+			return !order.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 = stats[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: labels[key] || key.toUpperCase(),
+				delta,
+				current,
+				next
+			});
+		}
+		return list;
+	});
+	var nav = createTabindexNavigator(selectedItem, { count: function() {
+		return filteredItems().length;
+	} }, "wrap");
+	var navTab = createTabindexNavigator(selectedTab, { count: function() {
+		return tabs.length;
+	} }, "wrap");
+	var navMode = createTabindexNavigator(selectedModeIndex, { count: function() {
+		return 2;
+	} }, "wrap");
+	function selectItem(index) {
+		return function() {
+			selectedItem.set(index);
+			quantity.set(1);
+			if (!isItemDisabled(filteredItems()[index])) quantityDialogOpen.set(true);
+		};
+	}
+	function selectTab(index) {
+		return function() {
+			selectedTab.set(index);
+			selectedItem.set(0);
+		};
+	}
+	function selectMode(mode) {
+		return function() {
+			tradeMode.set(mode);
+			selectedModeIndex.set(mode === "buy" ? 0 : 1);
+			selectedItem.set(0);
+			quantity.set(1);
+			tradeView.set("items");
+		};
+	}
+	function isItemDisabled(item) {
+		var _a;
+		if (!item) return true;
+		var price = (item === null || item === void 0 ? void 0 : item.price) || 0;
+		if (price <= 0) return true;
+		if (tradeMode() === "sell") return ((_a = item === null || item === void 0 ? void 0 : item.quantity) !== null && _a !== void 0 ? _a : 0) <= 0;
+		return gold() < price;
+	}
+	function backToMode() {
+		return function() {
+			tradeView.set("mode");
+		};
+	}
+	function changeQuantity(delta) {
+		return function() {
+			var limit = maxQuantity();
+			if (limit <= 0) return;
+			var nextValue = Math.max(1, Math.min(limit, quantity() + delta));
+			if (nextValue !== quantity()) quantity.set(nextValue);
+		};
+	}
+	function closeQuantityDialog() {
+		return function() {
+			quantityDialogOpen.set(false);
+		};
+	}
+	function confirmTrade() {
+		return function() {
+			var item = currentItem();
+			if (!item || isItemDisabled(item)) {
+				quantityDialogOpen.set(false);
+				return;
+			}
+			onInteraction(tradeMode() === "buy" ? "buyItem" : "sellItem", {
+				id: item.id,
+				nb: quantity()
+			});
+			quantityDialogOpen.set(false);
+		};
+	}
+	effect(function() {
+		var count = filteredItems().length;
+		if (selectedItem() >= count) selectedItem.set(Math.max(0, count - 1));
+	});
+	var modeControls = signal({
+		left: {
+			repeat: true,
+			bind: keyboardControls.left,
+			throttle: 150,
+			keyDown: function() {
+				navMode.next(-1);
+			}
+		},
+		right: {
+			repeat: true,
+			bind: keyboardControls.right,
+			throttle: 150,
+			keyDown: function() {
+				navMode.next(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown: function() {
+				var mode = selectedModeIndex() === 0 ? "buy" : "sell";
+				tradeMode.set(mode);
+				selectedItem.set(0);
+				quantity.set(1);
+				tradeView.set("items");
+			}
+		},
+		escape: {
+			bind: keyboardControls.escape,
+			keyDown: function() {
+				onFinish();
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	var itemControls = signal({
+		up: {
+			repeat: true,
+			bind: keyboardControls.up,
+			throttle: 150,
+			keyDown: function() {
+				if (quantityDialogOpen()) {
+					changeQuantity(1)();
+					return;
+				}
+				nav.next(-1);
+			}
+		},
+		down: {
+			repeat: true,
+			bind: keyboardControls.down,
+			throttle: 150,
+			keyDown: function() {
+				if (quantityDialogOpen()) {
+					changeQuantity(-1)();
+					return;
+				}
+				nav.next(1);
+			}
+		},
+		action: {
+			bind: keyboardControls.action,
+			keyDown: function() {
+				if (quantityDialogOpen()) {
+					var item_1 = currentItem();
+					if (!item_1 || isItemDisabled(item_1)) {
+						quantityDialogOpen.set(false);
+						return;
+					}
+					onInteraction(tradeMode() === "buy" ? "buyItem" : "sellItem", {
+						id: item_1.id,
+						nb: quantity()
+					});
+					quantityDialogOpen.set(false);
+					return;
+				}
+				if (!isItemDisabled(currentItem())) quantityDialogOpen.set(true);
+			}
+		},
+		escape: {
+			bind: keyboardControls.escape,
+			keyDown: function() {
+				if (quantityDialogOpen()) {
+					quantityDialogOpen.set(false);
+					return;
+				}
+				tradeView.set("mode");
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	var tabControls = signal({
+		left: {
+			repeat: true,
+			bind: keyboardControls.left,
+			throttle: 150,
+			keyDown: function() {
+				if (quantityDialogOpen()) return;
+				navTab.next(-1);
+			}
+		},
+		right: {
+			repeat: true,
+			bind: keyboardControls.right,
+			throttle: 150,
+			keyDown: function() {
+				if (quantityDialogOpen()) return;
+				navTab.next(1);
+			}
+		},
+		gamepad: { enabled: true }
+	});
+	return h(DOMContainer, {
+		width: "100%",
+		height: "100%"
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-container rpg-anim-fade-in" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-header" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-merchant" }
+	}, [h(DOMElement, { element: "div" }, cond(hasFace, () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-merchant-avatar" }
+	}, h(DOMSprite, {
+		sheet: computed(() => faceSheet(face().id, face().expression)),
+		width: "50px",
+		height: "50px",
+		objectFit: "contain"
+	})))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-merchant-info" }
+	}, h(DOMElement, {
+		element: "p",
+		textContent: computed(() => shopMessage())
+	}))]), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-gold" },
+		textContent: computed(() => gold() + goldTerm)
+	})]), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-body" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-left" }
+	}, [cond(computed(() => tradeView() === "mode"), () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-content rpg-shop-content-mode" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-details rpg-shop-details-mode" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-details-header" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-details-icon" },
+		textContent: "🛒"
+	}), h(DOMElement, {
+		element: "h2",
+		attrs: { style: "margin: 0;" },
+		textContent: "Choose an action"
+	})]), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-trade" }
+	}, h(Navigation, {
+		tabindex: selectedModeIndex,
+		controls: modeControls
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-tabs rpg-shop-trade-tabs" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: ["rpg-shop-tab", computed(() => ({ active: selectedModeIndex() === 0 }))],
+			click: selectMode("buy")
+		},
+		textContent: "Buy"
+	}), h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: ["rpg-shop-tab", computed(() => ({ active: selectedModeIndex() === 1 }))],
+			click: selectMode("sell")
+		},
+		textContent: "Sell"
+	})])))])), () => h(DOMElement, { element: "div" }, [h(Navigation, {
+		tabindex: selectedTab,
+		controls: tabControls
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-tabs" }
+	}, loop(tabs, (tab, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: ["rpg-shop-tab", computed(() => ({ active: selectedTab() === index }))],
+			tabindex: index,
+			click: selectTab(index)
+		},
+		textContent: tab.label
+	})))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-content" }
+	}, [h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-grid" }
+	}, h(Navigation, {
+		tabindex: selectedItem,
+		controls: itemControls
+	}, loop(filteredItems, (item, index) => h(DOMElement, {
+		element: "div",
+		attrs: {
+			class: ["rpg-shop-card", computed(() => ({
+				disabled: isItemDisabled(item),
+				selected: selectedItem() === index
+			}))],
+			tabindex: index,
+			click: selectItem(index)
+		}
+	}, [
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-card-icon" }
+		}, cond(item.icon, () => h(DOMSprite, {
+			sheet: computed(() => iconSheet(item.icon)),
+			playing: "default",
+			width: "48px",
+			height: "48px",
+			objectFit: "contain"
+		}))),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-card-name" },
+			textContent: item.name
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-card-price" },
+			textContent: item.price + goldTerm
+		}),
+		cond(computed(() => item.quantity !== void 0), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-card-qty" },
+			textContent: "x" + item.quantity
+		})),
+		cond(item.equipped, () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-card-tag" },
+			textContent: "Equipped"
+		}))
+	])))), h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-details" }
+	}, [
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-details-header" }
+		}, [
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-shop-details-icon" }
+			}, h(DOMSprite, {
+				sheet: computed(() => iconSheet(currentItem()?.icon)),
+				playing: "default",
+				width: "80px",
+				height: "80px",
+				objectFit: "contain"
+			})),
+			h(DOMElement, {
+				element: "h2",
+				attrs: { style: "margin: 0;" },
+				textContent: computed(() => currentItem()?.name || "")
+			}),
+			h(DOMElement, {
+				element: "p",
+				attrs: { style: "color: #ffd700; font-weight: bold; margin: 8px 0;" },
+				textContent: computed(() => currentItem()?.price ?? 0 + goldTerm)
+			}),
+			cond(computed(() => currentItem()?.quantity !== void 0), () => h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-shop-details-qty" },
+				textContent: computed(() => "Qty: x" + currentItem()?.quantity)
+			}))
+		]),
+		h(DOMElement, { element: "div" }, cond(currentItem()?.equipped, () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-equipped" },
+			textContent: "Already equipped"
+		}))),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-details-desc" },
+			textContent: computed(() => currentItem()?.description || "")
+		}),
+		h(DOMElement, { element: "div" }, cond(computed(() => displayStats().length > 0), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-stats" }
+		}, loop(displayStats, (stat, index) => h(DOMElement, {
+			element: "div",
+			attrs: { class: ["rpg-shop-stat", {
+				positive: stat.delta > 0,
+				negative: stat.delta < 0
+			}] }
+		}, [
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-shop-stat-key" },
+				textContent: stat.label
+			}),
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-shop-stat-value" },
+				textContent: stat.delta > 0 ? "+" : "" + stat.delta
+			}),
+			cond(computed(() => stat.current !== void 0), () => h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-shop-stat-current" },
+				textContent: stat.current + " → " + stat.next
+			}))
+		]))))),
+		h(DOMElement, {
+			element: "button",
+			attrs: {
+				class: "rpg-shop-btn",
+				click: backToMode()
+			},
+			textContent: "Back"
+		})
+	])])])), cond(quantityDialogOpen, () => h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-modal" }
+	}, h(DOMElement, {
+		element: "div",
+		attrs: { class: "rpg-shop-modal-card" }
+	}, [
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-modal-title" },
+			textContent: actionLabel
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-modal-item" },
+			textContent: computed(() => currentItem()?.name || "")
+		}),
+		cond(computed(() => currentItem()?.quantity !== void 0), () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-modal-qty" },
+			textContent: computed(() => "Available: x" + currentItem()?.quantity)
+		})),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-quantity" }
+		}, [h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-quantity-label" },
+			textContent: "Quantity"
+		}), h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-quantity-controls" }
+		}, [
+			h(DOMElement, {
+				element: "button",
+				attrs: {
+					class: "rpg-shop-btn",
+					click: changeQuantity(-1)
+				},
+				textContent: "-"
+			}),
+			h(DOMElement, {
+				element: "div",
+				attrs: { class: "rpg-shop-quantity-value" },
+				textContent: quantity
+			}),
+			h(DOMElement, {
+				element: "button",
+				attrs: {
+					class: "rpg-shop-btn",
+					click: changeQuantity(1)
+				},
+				textContent: "+"
+			})
+		])]),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-modal-total" }
+		}, [h(DOMElement, {
+			element: "span",
+			textContent: "Total"
+		}), h(DOMElement, {
+			element: "span",
+			textContent: computed(() => totalPrice() + goldTerm)
+		})]),
+		h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-shop-modal-actions" }
+		}, [h(DOMElement, {
+			element: "button",
+			attrs: {
+				class: "rpg-shop-btn rpg-shop-btn-secondary",
+				click: closeQuantityDialog()
+			},
+			textContent: "Cancel"
+		}), h(DOMElement, {
+			element: "button",
+			attrs: {
+				class: "rpg-shop-btn",
+				click: confirmTrade()
+			},
+			textContent: computed(() => actionLabel() + " x" + quantity())
+		})])
+	])))]))]));
 }
-function changeQuantity(delta) {
-    return function () {
-        var limit = maxQuantity();
-        if (limit <= 0)
-            return;
-        var nextValue = Math.max(1, Math.min(limit, quantity() + delta));
-        if (nextValue !== quantity()) {
-            quantity.set(nextValue);
-        }
-    };
-}
-function closeQuantityDialog() {
-    return function () {
-        quantityDialogOpen.set(false);
-    };
-}
-function confirmTrade() {
-    return function () {
-        var item = currentItem();
-        if (!item || isItemDisabled(item)) {
-            quantityDialogOpen.set(false);
-            return;
-        }
-        var action = tradeMode() === 'buy' ? 'buyItem' : 'sellItem';
-        onInteraction(action, { id: item.id, nb: quantity() });
-        quantityDialogOpen.set(false);
-    };
-}
-effect(function () {
-    var count = filteredItems().length;
-    if (selectedItem() >= count) {
-        selectedItem.set(Math.max(0, count - 1));
-    }
-});
-var modeControls = signal({
-    left: {
-        repeat: true,
-        bind: keyboardControls.left,
-        throttle: 150,
-        keyDown: function () {
-            navMode.next(-1);
-        }
-    },
-    right: {
-        repeat: true,
-        bind: keyboardControls.right,
-        throttle: 150,
-        keyDown: function () {
-            navMode.next(1);
-        }
-    },
-    action: {
-        bind: keyboardControls.action,
-        keyDown: function () {
-            var mode = selectedModeIndex() === 0 ? 'buy' : 'sell';
-            tradeMode.set(mode);
-            selectedItem.set(0);
-            quantity.set(1);
-            tradeView.set('items');
-        }
-    },
-    escape: {
-        bind: keyboardControls.escape,
-        keyDown: function () {
-            onFinish();
-        }
-    },
-    gamepad: {
-        enabled: true
-    }
-});
-var itemControls = signal({
-    up: {
-        repeat: true,
-        bind: keyboardControls.up,
-        throttle: 150,
-        keyDown: function () {
-            if (quantityDialogOpen()) {
-                changeQuantity(1)();
-                return;
-            }
-            nav.next(-1);
-        }
-    },
-    down: {
-        repeat: true,
-        bind: keyboardControls.down,
-        throttle: 150,
-        keyDown: function () {
-            if (quantityDialogOpen()) {
-                changeQuantity(-1)();
-                return;
-            }
-            nav.next(1);
-        }
-    },
-    action: {
-        bind: keyboardControls.action,
-        keyDown: function () {
-            if (quantityDialogOpen()) {
-                var item_1 = currentItem();
-                if (!item_1 || isItemDisabled(item_1)) {
-                    quantityDialogOpen.set(false);
-                    return;
-                }
-                var action = tradeMode() === 'buy' ? 'buyItem' : 'sellItem';
-                onInteraction(action, { id: item_1.id, nb: quantity() });
-                quantityDialogOpen.set(false);
-                return;
-            }
-            var item = currentItem();
-            if (!isItemDisabled(item)) {
-                quantityDialogOpen.set(true);
-            }
-        }
-    },
-    escape: {
-        bind: keyboardControls.escape,
-        keyDown: function () {
-            if (quantityDialogOpen()) {
-                quantityDialogOpen.set(false);
-                return;
-            }
-            tradeView.set('mode');
-        }
-    },
-    gamepad: {
-        enabled: true
-    }
-});
-var tabControls = signal({
-    left: {
-        repeat: true,
-        bind: keyboardControls.left,
-        throttle: 150,
-        keyDown: function () {
-            if (quantityDialogOpen())
-                return;
-            navTab.next(-1);
-        }
-    },
-    right: {
-        repeat: true,
-        bind: keyboardControls.right,
-        throttle: 150,
-        keyDown: function () {
-            if (quantityDialogOpen())
-                return;
-            navTab.next(1);
-        }
-    },
-    gamepad: {
-        enabled: true
-    }
-});
-        let $this = h(DOMContainer, { width: '100%', height: '100%' }, h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-container rpg-anim-fade-in' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-header' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-merchant' } }, [h(DOMElement, { element: "div" }, cond(hasFace, () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-merchant-avatar' } }, h(DOMSprite, { sheet: computed(() => faceSheet(face().id, face().expression)), width: '50px', height: '50px', objectFit: 'contain' })))), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-merchant-info' } }, h(DOMElement, { element: "p", textContent: computed(() => shopMessage()) }))]), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-gold' }, textContent: computed(() => gold() + goldTerm) })]), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-body' } }, h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-left' } }, [cond(computed(() => tradeView() === 'mode'), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-content rpg-shop-content-mode' } }, h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details rpg-shop-details-mode' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details-header' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details-icon' }, textContent: '🛒' }), h(DOMElement, { element: "h2", attrs: { style: 'margin: 0;' }, textContent: 'Choose an action' })]), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-trade' } }, h(Navigation, { tabindex: selectedModeIndex, controls: modeControls }, h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-tabs rpg-shop-trade-tabs' } }, [h(DOMElement, { element: "div", attrs: { class: ['rpg-shop-tab', computed(() => ({ active: selectedModeIndex() === 0 }))], click: selectMode('buy') }, textContent: 'Buy' }), h(DOMElement, { element: "div", attrs: { class: ['rpg-shop-tab', computed(() => ({ active: selectedModeIndex() === 1 }))], click: selectMode('sell') }, textContent: 'Sell' })])))])), () => h(DOMElement, { element: "div" }, [h(Navigation, { tabindex: selectedTab, controls: tabControls }, h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-tabs' } }, loop(tabs, (tab, index) => h(DOMElement, { element: "div", attrs: { class: ['rpg-shop-tab', computed(() => ({ active: selectedTab() === index }))], tabindex: index, click: selectTab(index) }, textContent: tab.label })))), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-content' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-grid' } }, h(Navigation, { tabindex: selectedItem, controls: itemControls }, loop(filteredItems, (item, index) => h(DOMElement, { element: "div", attrs: { class: ['rpg-shop-card', computed(() => ({ disabled: isItemDisabled(item), selected: selectedItem() === index }))], tabindex: index, click: selectItem(index) } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-card-icon' } }, cond(item.icon, () => h(DOMSprite, { sheet: computed(() => iconSheet(item.icon)), playing: 'default', width: '48px', height: '48px', objectFit: 'contain' }))), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-card-name' }, textContent: item.name }), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-card-price' }, textContent: item.price + goldTerm }), cond(computed(() => item.quantity !== undefined), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-card-qty' }, textContent: 'x' + item.quantity })), cond(item.equipped, () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-card-tag' }, textContent: 'Equipped' }))])))), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details-header' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details-icon' } }, h(DOMSprite, { sheet: computed(() => iconSheet(currentItem()?.icon)), playing: 'default', width: '80px', height: '80px', objectFit: 'contain' })), h(DOMElement, { element: "h2", attrs: { style: 'margin: 0;' }, textContent: computed(() => currentItem()?.name || "") }), h(DOMElement, { element: "p", attrs: { style: 'color: #ffd700; font-weight: bold; margin: 8px 0;' }, textContent: computed(() => currentItem()?.price ?? 0 + goldTerm) }), cond(computed(() => currentItem()?.quantity !== undefined), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details-qty' }, textContent: computed(() => 'Qty: x' + currentItem()?.quantity) }))]), h(DOMElement, { element: "div" }, cond(currentItem()?.equipped, () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-equipped' }, textContent: 'Already equipped' }))), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-details-desc' }, textContent: computed(() => currentItem()?.description || "") }), h(DOMElement, { element: "div" }, cond(computed(() => displayStats().length > 0), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-stats' } }, loop(displayStats, (stat, index) => h(DOMElement, { element: "div", attrs: { class: ['rpg-shop-stat', { positive: stat.delta > 0, negative: stat.delta < 0 }] } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-stat-key' }, textContent: stat.label }), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-stat-value' }, textContent: stat.delta > 0 ? '+' : '' + stat.delta }), cond(computed(() => stat.current !== undefined), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-stat-current' }, textContent: stat.current + ' → ' + stat.next }))]))))), h(DOMElement, { element: "button", attrs: { class: 'rpg-shop-btn', click: backToMode() }, textContent: 'Back' })])])])), cond(quantityDialogOpen, () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal' } }, h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal-card' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal-title' }, textContent: actionLabel }), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal-item' }, textContent: computed(() => currentItem()?.name || "") }), cond(computed(() => currentItem()?.quantity !== undefined), () => h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal-qty' }, textContent: computed(() => 'Available: x' + currentItem()?.quantity) })), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-quantity' } }, [h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-quantity-label' }, textContent: 'Quantity' }), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-quantity-controls' } }, [h(DOMElement, { element: "button", attrs: { class: 'rpg-shop-btn', click: changeQuantity(-1) }, textContent: '-' }), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-quantity-value' }, textContent: quantity }), h(DOMElement, { element: "button", attrs: { class: 'rpg-shop-btn', click: changeQuantity(1) }, textContent: '+' })])]), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal-total' } }, [h(DOMElement, { element: "span", textContent: 'Total' }), h(DOMElement, { element: "span", textContent: computed(() => totalPrice() + goldTerm) })]), h(DOMElement, { element: "div", attrs: { class: 'rpg-shop-modal-actions' } }, [h(DOMElement, { element: "button", attrs: { class: 'rpg-shop-btn rpg-shop-btn-secondary', click: closeQuantityDialog() }, textContent: 'Cancel' }), h(DOMElement, { element: "button", attrs: { class: 'rpg-shop-btn', click: confirmTrade() }, textContent: computed(() => actionLabel() + ' x' + quantity()) })])])))]))]));
-        return $this
-      }
-
+//#endregion
 export { component as default };
-//# sourceMappingURL=shop.ce.js.map
+
+//# sourceMappingURL=shop.ce.js.map