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

package/src/components/gui/gameover.ce

@@ -0,0 +1,158 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-gameover-screen rpg-anim-fade-in">
+        <div class="rpg-ui-gameover-splatter rpg-ui-gameover-splatter-left"></div>
+        <div class="rpg-ui-gameover-splatter rpg-ui-gameover-splatter-right"></div>
+        <div class="rpg-ui-gameover-splatter rpg-ui-gameover-splatter-center"></div>
+        <div class="rpg-ui-gameover-header rpg-anim-shake">
+            <div class="rpg-ui-gameover-title">{titleText()}</div>
+            @if (subtitleText()) {
+                <div class="rpg-ui-gameover-subtitle">{subtitleText()}</div>
+            }
+        </div>
+        <Navigation tabindex={selectedEntry} controls={controls}>
+            <div class="rpg-ui-menu rpg-ui-gameover-menu rpg-anim-slide-up">
+                @for ((entry,index) of entryList()) {
+                    <div
+                        class="rpg-ui-menu-item"
+                        class={{disabled: isEntryDisabled(entry)}}
+                        data-selected={selectedEntry() === index ? "true" : "false"}
+                        tabindex={index}
+                        click={selectEntry(index)}
+                    >{entry.label}</div>
+                }
+            </div>
+        </Navigation>
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, effect } from "canvasengine";
+    import { PrebuiltGui } from "@rpgjs/common";
+    import { inject } from "../../core/inject";
+    import { RpgClientEngine } from "../../RpgClientEngine";
+    import { RpgGui } from "../../Gui/Gui";
+
+    const engine = inject(RpgClientEngine);
+    const guiService = inject(RpgGui);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    const { entries, title, subtitle, saveLoad, localActions, onInteraction } = defineProps({
+        entries: {
+            default: () => []
+        },
+        saveLoad: {
+            default: () => ({})
+        },
+        localActions: {
+            default: false
+        }
+    });
+
+    const defaultEntries = [
+        { id: "title", label: "Title Screen" },
+        { id: "load", label: "Load Game" }
+    ];
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const titleText = computed(() => resolveProp(title) || "Game Over");
+    const subtitleText = computed(() => resolveProp(subtitle) || "");
+    const localActionsEnabled = computed(() => resolveProp(localActions) === true);
+
+    const entryList = computed(() => {
+        const list = resolveProp(entries);
+        if (Array.isArray(list) && list.length) return list;
+        return defaultEntries;
+    });
+
+    const isEntryDisabled = (entry) => {
+        if (!entry) return true;
+        if (entry.disabled) return true;
+        if (entry.enabled === false) return true;
+        return false;
+    };
+
+    const selectedEntry = signal(0);
+    const selectableIndexes = computed(() => {
+        const list = entryList();
+        return list
+            .map((entry, index) => (isEntryDisabled(entry) ? null : index))
+            .filter((value) => value !== null);
+    });
+
+    effect(() => {
+        const available = selectableIndexes();
+        if (!available.length) return;
+        const current = selectedEntry();
+        if (!available.includes(current)) {
+            selectedEntry.set(available[0]);
+        }
+    });
+
+    const moveSelection = (delta) => {
+        const available = selectableIndexes();
+        if (!available.length) return;
+        const current = selectedEntry();
+        const currentIndex = Math.max(0, available.indexOf(current));
+        const nextIndex = (currentIndex + delta + available.length) % available.length;
+        selectedEntry.set(available[nextIndex]);
+    };
+
+    const triggerSelect = (index) => {
+        const list = entryList();
+        const entry = list[index];
+        if (!entry || isEntryDisabled(entry)) return;
+        if (localActionsEnabled()) {
+            if (entry.id === "title") {
+                guiService.hide(PrebuiltGui.Gameover);
+                guiService.display(PrebuiltGui.TitleScreen);
+            }
+            if (entry.id === "load") {
+                const config = resolveProp(saveLoad) || {};
+                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];
+                guiService.display(PrebuiltGui.Save, {
+                    ...config,
+                    mode: config.mode || "load",
+                    slots
+                });
+            }
+        }
+        if (onInteraction) {
+            onInteraction("select", { id: entry.id, index, entry });
+        }
+    };
+
+    function selectEntry(index) {
+        return function() {
+            selectedEntry.set(index);
+            triggerSelect(index);
+        };
+    }
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                moveSelection(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                moveSelection(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                triggerSelect(selectedEntry());
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+</script>

package/src/components/gui/hud/hud.ce

@@ -0,0 +1,61 @@
+<DOMContainer>
+    <div class="rpg-hud">
+        <div class="rpg-avatar">
+            @if (hasFace()) {
+                <div class="rpg-avatar-face">
+                    <DOMSprite 
+                        sheet={faceSheet(face())} 
+                        width={64} 
+                        height={64} 
+                        objectFit="contain" 
+                    />
+                </div>
+            }
+            <div class="rpg-avatar-level">{{ level() }}</div>
+        </div>
+        <div class="rpg-status-bars">
+            <div class="rpg-bar-container">
+                <span class="rpg-bar-text">HP {{ hp() }}/{{ hpMax() }}</span>
+                <div class="rpg-bar-fill health" style={{width: percentHp}}></div>
+            </div>
+            <div class="rpg-bar-container">
+                <span class="rpg-bar-text">SP {{ sp() }}/{{ spMax() }}</span>
+                <div class="rpg-bar-fill mana" style={{width: percentSp}}></div>
+            </div>
+        </div>
+    </div>
+</DOMContainer>
+
+<script>
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { computed } from "canvasengine";
+    import { getEntityProp } from "../../../utils/getEntityProp";
+
+    const engine = inject(RpgClientEngine)
+    const currentPlayer = engine.scene.currentPlayer
+    const { data } = defineProps();
+    const { faceset } = data();
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const face = computed(() => resolveProp(data().faceset));
+
+    const hasFace = computed(() => {
+        const value = face();
+        return !!(value && value.id);
+    });
+    const faceSheet = (faceValue) => ({
+        definition: engine.getSpriteSheet(faceValue.id),
+        playing: faceValue.expression || "default",
+    });
+    const hp = getEntityProp(currentPlayer, "hp")
+    const hpMax = getEntityProp(currentPlayer, "params.maxHp")
+    const percentHp = computed(() => (hp() / hpMax() * 100) + '%')
+
+    const sp = getEntityProp(currentPlayer, "sp")
+    const spMax = getEntityProp(currentPlayer, "params.maxSp")
+    const percentSp = computed(() => (sp() / spMax() * 100) + '%')
+
+    const level = getEntityProp(currentPlayer, "level")
+</script>
+    

package/src/components/gui/index.ts

@@ -1,5 +1,31 @@
-import Dialogbox from "./dialogbox/index.ce";
+import DialogboxComponent from "./dialogbox/index.ce";
+import BoxComponent from "./box.ce";
+import ShopComponent from "./shop/shop.ce";
+import HudComponent from "./hud/hud.ce";
+import SaveLoadComponent from "./save-load.ce";
+import MainMenuComponent from "./menu/main-menu.ce";
+import ItemsMenuComponent from "./menu/items-menu.ce";
+import SkillsMenuComponent from "./menu/skills-menu.ce";
+import EquipMenuComponent from "./menu/equip-menu.ce";
+import OptionsMenuComponent from "./menu/options-menu.ce";
+import ExitMenuComponent from "./menu/exit-menu.ce";
+import NotificationComponent from "./notification/notification.ce";
+import TitleScreenComponent from "./title-screen.ce";
+import GameoverComponent from "./gameover.ce";
 
-export const PrebuiltGui = {
-    Dialogbox
-}
+export {
+    DialogboxComponent,
+    BoxComponent,
+    ShopComponent,
+    HudComponent,
+    SaveLoadComponent,
+    MainMenuComponent,
+    ItemsMenuComponent,
+    SkillsMenuComponent,
+    EquipMenuComponent,
+    OptionsMenuComponent,
+    ExitMenuComponent,
+    NotificationComponent,
+    TitleScreenComponent,
+    GameoverComponent
+}

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>