@rpgjs/client 5.0.0-alpha.9 → 5.0.0-beta.1

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

@@ -0,0 +1,652 @@
+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;
+		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())
+		})])
+	])))]))]));
+}
+//#endregion
+export { component as default };
+
+//# sourceMappingURL=shop.ce.js.map