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

package/src/components/gui/menu/equip-menu.ce

@@ -0,0 +1,410 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-menu-panel rpg-ui-panel">
+        <div class="rpg-ui-menu-panel-header">Equip</div>
+        <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
+            <div>
+                <div class="rpg-ui-menu-panel-details rpg-ui-panel">
+                    <div class="rpg-ui-menu-panel-hero">
+                        <div class="rpg-ui-menu-panel-hero-icon">
+                            <DOMSprite 
+                                sheet={iconSheet(detailsItem()?.icon)} 
+                                playing="default" 
+                                width="48px"
+                                height="48px"
+                                objectFit="contain"
+                            />
+                        </div>
+                        <div>
+                            <div class="rpg-ui-menu-panel-details-title">
+                                {detailsItem()?.name || currentSlot()?.label || "Equip"}
+                            </div>
+                            <div class="rpg-ui-menu-panel-details-desc">
+                                {detailsItem()?.description || ""}
+                            </div>
+                            @if (displayStats().length > 0) {
+                                <div class="rpg-ui-equip-stats">
+                                    @for ((stat,index) of displayStats) {
+                                        <div class="rpg-ui-equip-stat" class={{positive: stat.delta > 0, negative: stat.delta < 0}}>
+                                            <div class="rpg-ui-equip-stat-key">{stat.label}</div>
+                                            <div class="rpg-ui-equip-stat-value">
+                                                {stat.delta > 0 ? "+" : ""}{stat.delta}
+                                            </div>
+                                            @if (stat.current) {
+                                                <div class="rpg-ui-equip-stat-current">{stat.current} -> {stat.next}</div>
+                                            }
+                                        </div>
+                                    }
+                                </div>
+                            }
+                            <div class="rpg-ui-menu-panel-details-meta">
+                                <span>{equippedText()}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full">
+                <div class="rpg-ui-menu-tabs">
+                    @for ((tab,tabIndex) of slotList) {
+                        <div
+                            class="rpg-ui-menu-tab"
+                            class={{active: selectedTab() === tabIndex}}
+                            tabindex={tabIndex}
+                            click={selectTab(tabIndex)}
+                        >{tab.label}</div>
+                    }
+                </div>
+                <Navigation tabindex={selectedItem} controls={controls}>
+                    @for ((entry,index) of listEntries) {
+                        <div
+                            class="rpg-ui-menu-item rpg-ui-menu-row"
+                            data-selected={selectedItem() === index ? "true" : "false"}
+                            tabindex={index}
+                            click={selectItem(index)}
+                        >
+                            <div class="rpg-ui-menu-row-main">
+                                <div class="rpg-ui-menu-row-icon">
+                                    @if (entry?.icon) {
+                                        <DOMSprite 
+                                            sheet={iconSheet(entry.icon)} 
+                                            playing="default" 
+                                            width="28px"
+                                            height="28px"
+                                            objectFit="contain"
+                                        />
+                                    }
+                                </div>
+                                <span>{entry.name}</span>
+                            </div>
+                            <span class="rpg-ui-menu-row-end">{entry.tag || ""}</span>
+                        </div>
+                    }
+                </Navigation>
+            </div>
+        </div>
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, createTabindexNavigator, effect } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+
+    const engine = inject(RpgClientEngine);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+    const currentPlayer = engine.scene.currentPlayer;
+
+    const selectedTab = signal(0);
+    const selectedItem = signal(0);
+    const { data, onInteraction, onBack } = defineProps();
+
+    const equips = computed(() => data().equips ?? data().items);
+    const slots = computed(() => data().slots);
+
+    const defaultSlots = [
+        { id: "weapon", label: "Weapon", types: ["weapon"] },
+        { id: "armor", label: "Armor", types: ["armor"] }
+    ];
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const safeEquips = computed(() => {
+        const list = resolveProp(equips);
+        return Array.isArray(list) ? list : [];
+    });
+    const slotList = computed(() => {
+        const list = resolveProp(slots);
+        if (Array.isArray(list) && list.length) return list;
+        return defaultSlots;
+    });
+
+    const currentSlot = computed(() => slotList()[selectedTab()]);
+
+    const equippedIds = computed(() => {
+        const equipped = currentPlayer().equipments?.() || [];
+        return new Set(equipped.map((it) => it?.id?.() ?? it?.id ?? it?.name));
+    });
+    const equippedOverrides = signal({});
+
+    effect(() => {
+        const next = {};
+        safeEquips().forEach((item) => {
+            if (item?.id && typeof item.equipped === "boolean") {
+                next[item.id] = item.equipped;
+            }
+        });
+        equippedOverrides.set(next);
+    });
+
+    const itemEquipped = (item) => {
+        if (!item) return false;
+        const 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);
+    };
+
+    const slotTypes = (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 [];
+    };
+
+    const slotItems = computed(() => {
+        const slot = currentSlot();
+        if (!slot) return [];
+        const types = new Set(slotTypes(slot));
+        return safeEquips().filter((item) => item && types.has(item.type));
+    });
+
+    const currentEquippedItem = computed(() => {
+        const list = slotItems();
+        return list.find((item) => itemEquipped(item)) || null;
+    });
+
+    const listEntries = computed(() => {
+        const items = slotItems().map((item) => ({
+            ...item,
+            kind: "item",
+            tag: itemEquipped(item) ? "Equipped" : ""
+        }));
+        const equipped = currentEquippedItem();
+        if (!equipped) return items;
+        return [
+            {
+                id: "__unequip__",
+                name: "Unequip",
+                description: "Remove the current equipment",
+                kind: "unequip",
+                tag: ""
+            },
+            ...items
+        ];
+    });
+
+    const currentEntry = computed(() => listEntries()[selectedItem()]);
+    const detailsItem = computed(() => {
+        const entry = currentEntry();
+        if (entry?.kind === "item") return entry;
+        return currentEquippedItem();
+    });
+
+    const equippedText = computed(() => {
+        const slot = currentSlot();
+        if (!slot) return "";
+        const equipped = currentEquippedItem();
+        return equipped ? `${slot.label}: ${equipped.name}` : `${slot.label}: Empty`;
+    });
+    const listEmpty = computed(() => listEntries().length === 0);
+
+    const nav = createTabindexNavigator(selectedItem, { count: () => listEntries().length }, "wrap");
+
+    const playerParams = computed(() => {
+        const menuData = data();
+        if (menuData?.playerStats) return menuData.playerStats;
+        if (menuData?.playerParams) return menuData.playerParams;
+        return currentPlayer()?._param?.() || {};
+    });
+    const statOrder = ["atk", "def", "pdef", "sdef", "str", "dex", "int", "agi", "maxHp", "maxSp"];
+    const statLabels = {
+        atk: "ATK",
+        def: "DEF",
+        pdef: "PDEF",
+        sdef: "SDEF",
+        str: "STR",
+        dex: "DEX",
+        int: "INT",
+        agi: "AGI",
+        maxHp: "MAX HP",
+        maxSp: "MAX SP"
+    };
+
+    const getItemStats = (item) => {
+        if (!item) return {};
+        const stats = item.stats || item.params || {};
+        if (Object.keys(stats).length) return stats;
+        const keys = ["atk", "def", "pdef", "sdef", "str", "dex", "int", "agi", "maxHp", "maxSp"];
+        const direct = {};
+        keys.forEach((key) => {
+            if (item[key] !== undefined) direct[key] = item[key];
+        });
+        return direct;
+    };
+
+    const buildStatsList = (deltaStats) => {
+        const params = playerParams() || {};
+        const orderedKeys = statOrder.filter((key) => deltaStats[key] !== undefined);
+        const extraKeys = Object.keys(deltaStats).filter((key) => !statOrder.includes(key));
+        const keys = orderedKeys.concat(extraKeys);
+        const list = [];
+        for (const key of keys) {
+            const delta = deltaStats[key];
+            if (delta === undefined || delta === 0) continue;
+            let current = params[key];
+            if (current === undefined && key === "def") current = params.pdef;
+            const next = current !== undefined ? current + delta : undefined;
+            list.push({
+                key,
+                label: statLabels[key] || key.toUpperCase(),
+                delta,
+                current,
+                next
+            });
+        }
+        return list;
+    };
+
+    const displayStats = computed(() => {
+        const entry = currentEntry();
+        const equipped = currentEquippedItem();
+        if (!entry) return [];
+        if (entry.kind === "unequip") {
+           
+            if (!equipped) return [];
+            const stats = getItemStats(equipped);
+            const delta = {};
+            Object.keys(stats).forEach((key) => {
+                delta[key] = -stats[key];
+            });
+            return buildStatsList(delta);
+        }
+        if (entry.kind === "item") {
+            const equippedStats = getItemStats(equipped);
+            const nextStats = getItemStats(entry);
+            const delta = {};
+            const keys = new Set([...Object.keys(nextStats), ...Object.keys(equippedStats)]);
+            keys.forEach((key) => {
+                delta[key] = (nextStats[key] || 0) - (equippedStats[key] || 0);
+            });
+            return buildStatsList(delta);
+        }
+        return [];
+    });
+
+    const applyEquipState = (slot, itemId, equip) => {
+        const types = slotTypes(slot);
+        const next = { ...equippedOverrides() };
+        if (types.length) {
+            safeEquips().forEach((item) => {
+                if (!item) return;
+                if (types.includes(item.type)) {
+                    next[item.id] = false;
+                }
+            });
+        }
+        if (itemId) {
+            next[itemId] = equip;
+        }
+        equippedOverrides.set(next);
+    };
+
+    const commitSelection = (index) => {
+        const entry = listEntries()[index];
+        if (!entry) return;
+        if (entry.kind === "unequip") {
+            const equipped = currentEquippedItem();
+            if (equipped && onInteraction) {
+                onInteraction("equipItem", { id: equipped.id, equip: false });
+            }
+            applyEquipState(currentSlot(), 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);
+        }
+    }
+
+    const iconSheet = (iconId) => ({
+        definition: engine.getSpriteSheet(iconId)
+    });
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                if (!listEntries().length) return;
+                nav.next(-1);
+            }
+        },
+        left: {
+            repeat: true,
+            bind: keyboardControls.left,
+            throttle: 150,
+            keyDown() {
+                const tabs = slotList();
+                if (!tabs.length) return;
+                selectedTab.update((value) => (value - 1 + tabs.length) % tabs.length);
+                selectedItem.set(0);
+            }
+        },
+        right: {
+            repeat: true,
+            bind: keyboardControls.right,
+            throttle: 150,
+            keyDown() {
+                const tabs = slotList();
+                if (!tabs.length) return;
+                selectedTab.update((value) => (value + 1) % tabs.length);
+                selectedItem.set(0);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (!listEntries().length) return;
+                nav.next(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (!listEntries().length) return;
+                commitSelection(selectedItem());
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (onBack) onBack();
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+
+    effect(() => {
+        const count = listEntries().length;
+        if (!count) {
+            selectedItem.set(0);
+            return;
+        }
+        if (selectedItem() >= count) {
+            selectedItem.set(count - 1);
+        }
+    });
+</script>

package/src/components/gui/menu/exit-menu.ce

@@ -0,0 +1,41 @@
+<DOMContainer width="100%" height="100%" controls={controls}>
+    <div class="rpg-ui-menu-panel rpg-ui-panel">
+        <div class="rpg-ui-menu-panel-header">Exit</div>
+        <div class="rpg-ui-menu-panel-body">
+            <div class="rpg-ui-menu-panel-details">
+                <div class="rpg-ui-menu-panel-details-title">Leave the game?</div>
+                <div class="rpg-ui-menu-panel-details-desc">
+                    Press Action to confirm or Escape to go back.
+                </div>
+            </div>
+        </div>
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+
+    const engine = inject(RpgClientEngine);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+    const { onConfirm, onBack } = defineProps();
+
+    const controls = signal({
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (onConfirm) onConfirm();
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (onBack) onBack();
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+</script>