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

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>

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

@@ -0,0 +1,317 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-menu-panel rpg-ui-panel">
+        <div class="rpg-ui-menu-panel-header">Items</div>
+        <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
+            <div>
+                @if (currentItem) {
+                    <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(currentItem()?.icon)} 
+                                    playing="default" 
+                                    width="48px"
+                                    height="48px"
+                                    objectFit="contain"
+                                />
+                            </div>
+                            <div>
+                                <div class="rpg-ui-menu-panel-details-title">{currentItem()?.name}</div>
+                                <div class="rpg-ui-menu-panel-details-desc">{currentItem()?.description || ""}</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 tabs) {
+                        <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 ((item,index) of filteredItems) {
+                        <div
+                            class="rpg-ui-menu-item rpg-ui-menu-row"
+                            class={{disabled: !item.usable}}
+                            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">
+                                    <DOMSprite 
+                                        sheet={iconSheet(item.icon)} 
+                                        playing="default" 
+                                        width="28px"
+                                        height="28px"
+                                        objectFit="contain"
+                                    />
+                                </div>
+                                <span>{item.name}</span>
+                            </div>
+                            <span class="rpg-ui-menu-row-end">x{item.quantity ?? 1}</span>
+                        </div>
+                    }
+                </Navigation>
+            </div>
+        </div>
+        @if (confirmOpen) {
+            <div class="rpg-ui-menu-confirm">
+                <div class="rpg-ui-menu-confirm-card">
+                    <div class="rpg-ui-menu-confirm-title">Use {confirmItem()?.name}?</div>
+                    <Navigation tabindex={selectedConfirm} controls={confirmControls}>
+                        <div class="rpg-ui-menu-confirm-actions">
+                            @for ((option,index) of confirmOptions) {
+                                <button
+                                    class="rpg-ui-menu-confirm-btn"
+                                    class={{"rpg-ui-menu-confirm-btn-secondary": option.id === "cancel"}}
+                                    data-selected={selectedConfirm() === index ? "true" : "false"}
+                                    tabindex={index}
+                                    click={confirmSelect(index)}
+                                >{option.label}</button>
+                            }
+                        </div>
+                    </Navigation>
+                </div>
+            </div>
+        }
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, createTabindexNavigator, effect } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { delay } from "@rpgjs/common";
+
+    const engine = inject(RpgClientEngine);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    const selectedItem = signal(0);
+    const selectedTab = signal(0);
+    const selectedConfirm = signal(0);
+    const confirmOpen = signal(false);
+    const confirmItem = signal(null);
+
+    const { data, onInteraction, onBack } = defineProps();
+
+    const items = computed(() => data().items);
+
+    const tabs = [
+        { id: "item", label: "Items" },
+        { id: "weapon", label: "Weapons" },
+        { id: "armor", label: "Armor" }
+    ];
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const safeItems = computed(() => {
+        const value = resolveProp(items);
+        return Array.isArray(value) ? value : [];
+    });
+
+    const filteredItems = computed(() => {
+        const items = safeItems();
+        const tab = tabs[selectedTab()];
+        if (!tab) return [];
+        return items.filter((item) => item.type === tab.id && (item.quantity ?? 1) > 0);
+    });
+
+    const confirmOptions = [
+        { id: "use", label: "Use" },
+        { id: "cancel", label: "Cancel" }
+    ];
+
+    const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, "wrap");
+    const navConfirm = createTabindexNavigator(selectedConfirm, { count: () => confirmOptions.length }, "wrap");
+    const currentItem = computed(() => filteredItems()[selectedItem()]);
+    const iconSheet = (iconId) => ({
+        definition: engine.getSpriteSheet(iconId)
+    });
+
+    const clampSelection = () => {
+        const count = filteredItems().length;
+        if (count === 0) {
+            selectedItem.set(0);
+            return;
+        }
+        if (selectedItem() >= count) {
+            selectedItem.set(count - 1);
+        }
+    };
+
+    function selectItem(index) {
+        return function() {
+            selectedItem.set(index);
+            requestUseItem(index);
+        }
+    }
+
+    function selectTab(index) {
+        return function() {
+            selectedItem.set(0);
+            selectedTab.set(index);
+        }
+    }
+
+    const useItem = (index) => {
+        const item = filteredItems()[index];
+        if (!item || !item.usable) return;
+        if (onInteraction) onInteraction("useItem", { id: item.id });
+    };
+
+    const requestUseItem = (index) => {
+        const item = filteredItems()[index];
+        if (!item || !item.usable) return;
+        if (item.consumable) {
+            confirmItem.set(item);
+            confirmOpen.set(true);
+            selectedConfirm.set(0);
+            return;
+        }
+        useItem(index);
+    };
+
+    const confirmUse = () => {
+        const item = confirmItem();
+        if (!item) return;
+        delay(() => {
+            if (onInteraction) onInteraction("useItem", { id: item.id });
+            confirmOpen.set(false);
+            confirmItem.set(null);
+        });
+    };
+
+    const cancelConfirm = () => {
+        delay(() => {
+            confirmOpen.set(false);
+            confirmItem.set(null);
+        });
+    };
+
+    function confirmSelect(index) {
+        return function() {
+            selectedConfirm.set(index);
+            if (index === 0) {
+                confirmUse();
+                return;
+            }
+            cancelConfirm();
+        }
+    }
+
+    const confirmControls = signal({
+        left: {
+            repeat: true,
+            bind: keyboardControls.left,
+            throttle: 150,
+            keyDown() {
+                if (!confirmOpen()) return;
+                navConfirm.next(-1);
+            }
+        },
+        right: {
+            repeat: true,
+            bind: keyboardControls.right,
+            throttle: 150,
+            keyDown() {
+                if (!confirmOpen()) return;
+                navConfirm.next(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (!confirmOpen()) return;
+                confirmSelect(selectedConfirm())();
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (!confirmOpen()) return;
+                cancelConfirm();
+            }
+        }
+    });
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                if (confirmOpen()) {
+                    return;
+                }
+                nav.next(-1);
+            }
+        },
+        left: {
+            repeat: true,
+            bind: keyboardControls.left,
+            throttle: 150,
+            keyDown() {
+                if (confirmOpen()) {
+                    return;
+                }
+                selectedTab.update((value) => (value - 1 + tabs.length) % tabs.length);
+                selectedItem.set(0);
+            }
+        },
+        right: {
+            repeat: true,
+            bind: keyboardControls.right,
+            throttle: 150,
+            keyDown() {
+                if (confirmOpen()) {
+                    return;
+                }
+                selectedTab.update((value) => (value + 1) % tabs.length);
+                selectedItem.set(0);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (confirmOpen()) {
+                    return;
+                }
+                nav.next(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (confirmOpen()) {
+                    confirmSelect(selectedConfirm())();
+                    return;
+                }
+                requestUseItem(selectedItem());
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (confirmOpen()) {
+                    cancelConfirm();
+                    return;
+                }
+                if (onBack) onBack();
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+
+    clampSelection();
+</script>

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

@@ -0,0 +1,294 @@
+<DOMContainer width="100%" height="100%" controls={menuControls}>
+    <div class="rpg-ui-main-menu rpg-anim-fade-in">
+        <div class="rpg-ui-main-menu-layout">
+            <div class="rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel">
+                <div class="rpg-ui-menu-header">Menu</div>
+                <div class="rpg-ui-main-menu-list">
+                    @for ((entry,index) of menuEntries()) {
+                        <div
+                            class="rpg-ui-menu-item"
+                            class={{disabled: isMenuDisabled(entry)}}
+                            data-selected={selectedMenu() === index ? "true" : "false"}
+                            tabindex={index}
+                            click={selectMenu(index)}
+                        >{entry.label}</div>
+                    }
+                </div>
+            </div>
+            <div class="rpg-ui-main-menu-right">
+                @if (view() === "menu") {
+                    <div class="rpg-ui-panel">
+                        <div class="rpg-ui-main-menu-section-title">Status</div>
+                        <div class="rpg-ui-main-menu-status-card">
+                            <div class="rpg-ui-main-menu-status-block">
+                                <div class="rpg-ui-main-menu-status-label">Level</div>
+                                <div class="rpg-ui-main-menu-status-value">{level()}</div>
+                            </div>
+                            <div class="rpg-ui-main-menu-status-block">
+                                <div class="rpg-ui-main-menu-status-label">Gold</div>
+                                <div class="rpg-ui-main-menu-status-value">{gold()}</div>
+                            </div>
+                            <div class="rpg-ui-main-menu-status-block">
+                                <div class="rpg-ui-main-menu-status-label">HP {hp()}/{hpMax()}</div>
+                                <div class="rpg-ui-main-menu-status-bar">
+                                    <div class="rpg-ui-main-menu-status-bar-fill hp" style={{width: hpPercent}}></div>
+                                </div>
+                            </div>
+                            <div class="rpg-ui-main-menu-status-block">
+                                <div class="rpg-ui-main-menu-status-label">SP {sp()}/{spMax()}</div>
+                                <div class="rpg-ui-main-menu-status-bar">
+                                    <div class="rpg-ui-main-menu-status-bar-fill sp" style={{width: spPercent}}></div>
+                                </div>
+                            </div>
+                            <div class="rpg-ui-main-menu-status-block" style={{gridColumn: "span 2"}}>
+                                <div class="rpg-ui-main-menu-status-label">EXP {exp()}/{expForNextlevel()}</div>
+                                <div class="rpg-ui-main-menu-status-bar">
+                                    <div class="rpg-ui-main-menu-status-bar-fill exp" style={{width: expPercent}}></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="rpg-ui-main-menu-section-title">Parameters</div>
+                        <div class="rpg-ui-main-menu-params">
+                            @for ((param,index) of paramsList) {
+                                <div class="rpg-ui-main-menu-param">
+                                    <span>{param.label}</span>
+                                    <span>{param.value}</span>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                }
+                @if (view() === "items") {
+                    <ItemsMenu data={data} onInteraction={onInteraction} onBack={goBack} />
+                }
+                @if (view() === "skills") {
+                    <SkillsMenu data={data} onBack={goBack} />
+                }
+                @if (view() === "equip") {
+                    <EquipMenu data={data} onInteraction={onInteraction} onBack={goBack} />
+                }
+                @if (view() === "options") {
+                    <OptionsMenu onBack={goBack} />
+                }
+                @if (view() === "exit") {
+                    <ExitMenu onConfirm={confirmExit} onBack={goBack} />
+                }
+            </div>
+        </div>
+        @if (saveOverlay) {
+            <div class="rpg-ui-main-menu-overlay">
+                <div class="rpg-ui-main-menu-overlay-backdrop"></div>
+                <div class="rpg-ui-main-menu-overlay-content">
+                    <SaveLoadComponent
+                        data={saveLoadData}
+                        onFinish={closeSaveOverlay}
+                    />
+                </div>
+            </div>
+        }
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, effect, mount } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+    import SaveLoadComponent from "../save-load.ce";
+    import ItemsMenu from "./items-menu.ce";
+    import SkillsMenu from "./skills-menu.ce";
+    import EquipMenu from "./equip-menu.ce";
+    import OptionsMenu from "./options-menu.ce";
+    import ExitMenu from "./exit-menu.ce";
+    import { getEntityProp } from "../../../utils/getEntityProp";
+    import { delay } from "@rpgjs/common";
+
+    const engine = inject(RpgClientEngine);
+    const currentPlayer = engine.scene.currentPlayer;
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    const { data, onFinish, onInteraction } = defineProps();
+    const { menus, items, skills, equips, saveLoad } = data();
+
+    const defaultMenus = [
+        { id: "items", label: "Items" },
+        { id: "skills", label: "Skills" },
+        { id: "equip", label: "Equip" },
+        { id: "options", label: "Options" },
+        { id: "save", label: "Save" },
+        { id: "exit", label: "Exit" }
+    ];
+
+    const menuEntries = computed(() => {
+        if (menus && Array.isArray(menus) && menus.length) return menus;
+        return defaultMenus;
+    });
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const saveLoadData = computed(() => resolveProp(saveLoad) || {});
+    const saveLoadMode = computed(() => saveLoadData().mode || "load");
+    const saveLoadSlots = computed(() => saveLoadData().slots || []);
+    const saveLoadCanSave = computed(() => saveLoadData().canSave !== false);
+
+    const isMenuDisabled = (entry) => {
+        if (!entry) return true;
+        if (entry.disabled) return true;
+        if (entry.enabled === false) return true;
+        if (entry.id === "save" && !saveLoadCanSave()) return true;
+        return false;
+    };
+
+    const selectedMenu = signal(0);
+    const view = signal("menu");
+    const saveOverlay = signal(false);
+
+    const selectableIndexes = computed(() => {
+        const entries = menuEntries();
+        return entries
+            .map((entry, index) => (isMenuDisabled(entry) ? null : index))
+            .filter((value) => value !== null);
+    });
+
+    effect(() => {
+        const available = selectableIndexes();
+        if (!available.length) return;
+        const current = selectedMenu();
+        if (!available.includes(current)) {
+            selectedMenu.set(available[0]);
+        }
+    });
+
+    const moveMenu = (delta) => {
+        const available = selectableIndexes();
+        if (!available.length) return;
+        const current = selectedMenu();
+        const currentIndex = Math.max(0, available.indexOf(current));
+        const nextIndex = (currentIndex + delta + available.length) % available.length;
+        selectedMenu.set(available[nextIndex]);
+    };
+
+    function selectMenu(index) {
+        return function() {
+            selectedMenu.set(index);
+            openMenu();
+        }
+    }
+
+    const openMenu = () => {
+        const entry = menuEntries()[selectedMenu()];
+        if (!entry || isMenuDisabled(entry)) return;
+        if (entry.id === "save") {
+            saveOverlay.set(true);
+            return;
+        }
+        if (entry.id === "exit") {
+            view.set("exit");
+            return;
+        }
+        view.set(entry.id);
+    };
+
+    const goBack = () => {
+        delay(() => {
+            view.set("menu");
+        });
+    };
+
+    const closeSaveOverlay = () => {
+        delay(() => {
+            saveOverlay.set(false);
+            view.set("menu");
+        });
+    };
+
+    const confirmExit = () => {
+        if (onInteraction) onInteraction("exit");
+    };
+
+    const hp = getEntityProp(currentPlayer, "hp");
+    const hpMax = getEntityProp(currentPlayer, "params.maxHp");
+    const sp = getEntityProp(currentPlayer, "sp");
+    const spMax = getEntityProp(currentPlayer, "params.maxSp");
+    const level = getEntityProp(currentPlayer, "level");
+    const exp = getEntityProp(currentPlayer, "exp");
+    const gold = getEntityProp(currentPlayer, "gold");
+    const expForNextlevel = computed(() => data().expForNextlevel || 0);
+    const hpPercent = computed(() => {
+        const max = hpMax() || 1;
+        return `${Math.max(0, Math.min(100, (hp() / max) * 100))}%`;
+    });
+    const spPercent = computed(() => {
+        const max = spMax() || 1;
+        return `${Math.max(0, Math.min(100, (sp() / max) * 100))}%`;
+    });
+    const expPercent = computed(() => {
+        const max = expForNextlevel() || 1;
+        return `${Math.max(0, Math.min(100, (exp() / max) * 100))}%`;
+    });
+
+    const paramsList = computed(() => {
+        return [
+            { label: "ATK", value: data().playerStats.atk },
+            { label: "PDEF", value: data().playerStats.pdef },
+            { label: "SDEF", value: data().playerStats.sdef },
+            { label: "STR", value: data().playerStats.str },
+            { label: "DEX", value: data().playerStats.dex },
+            { label: "INT", value: data().playerStats.int },
+            { label: "AGI", value: data().playerStats.agi }
+        ]
+    }
+
+    const menuControls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                if (saveOverlay()) return;
+                if (view() !== "menu") return;
+                moveMenu(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (saveOverlay()) return;
+                if (view() !== "menu") return;
+                moveMenu(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (saveOverlay()) return;
+                if (view() !== "menu") return;
+                openMenu();
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (saveOverlay()) return;
+                if (view() !== "menu") {
+                    goBack();
+                    return;
+                }
+                onFinish()
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+
+    mount((element) => {
+        engine.gamePause.set(true);
+        return () => {
+            delay(() => {
+                engine.stopProcessingInput = false;
+                engine.gamePause.set(false);
+            });
+        }
+    });
+</script>

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

@@ -0,0 +1,35 @@
+<DOMContainer width="100%" height="100%" controls={controls}>
+    <div class="rpg-ui-menu-panel rpg-ui-panel">
+        <div class="rpg-ui-menu-panel-header">Options</div>
+        <div class="rpg-ui-menu-panel-body">
+            <div class="rpg-ui-menu-panel-details">
+                <div class="rpg-ui-menu-panel-details-title">Options</div>
+                <div class="rpg-ui-menu-panel-details-desc">
+                    Configure your preferences here.
+                </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 { onBack } = defineProps();
+
+    const controls = signal({
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (onBack) onBack();
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+</script>