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

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

@@ -0,0 +1,83 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-menu-panel rpg-ui-panel">
+        <div class="rpg-ui-menu-panel-header">Skills</div>
+        <div class="rpg-ui-menu-panel-body rpg-ui-menu-panel-body-stacked">
+            <div class="rpg-ui-menu-panel-details rpg-ui-panel">
+                @if (currentSkill) {
+                    <div class="rpg-ui-menu-panel-hero">
+                        <div class="rpg-ui-menu-panel-hero-icon">✨</div>
+                        <div>
+                            <div class="rpg-ui-menu-panel-details-title">{currentSkill()?.name}</div>
+                            <div class="rpg-ui-menu-panel-details-desc">{currentSkill()?.description || ""}</div>
+                        </div>
+                    </div>
+                }
+            </div>
+            <div class="rpg-ui-menu-panel-list rpg-ui-menu rpg-ui-menu-panel-list-full">
+                <Navigation tabindex={selectedSkill} controls={controls}>
+                    @for ((skill,index) of skills) {
+                        <div
+                            class="rpg-ui-menu-item rpg-ui-menu-row"
+                            data-selected={selectedSkill() === index ? "true" : "false"}
+                            tabindex={index}
+                            click={selectSkill(index)}
+                        >
+                            <span>{skill.name}</span>
+                            <span class="rpg-ui-menu-row-end">SP {skill.spCost ?? 0}</span>
+                        </div>
+                    }
+                </Navigation>
+            </div>
+        </div>
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, createTabindexNavigator } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+
+    const engine = inject(RpgClientEngine);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    const selectedSkill = signal(0);
+    const { data, onBack } = defineProps();
+    const skills = computed(() => data().skills);
+
+    const nav = createTabindexNavigator(selectedSkill, { count: () => skills().length }, "wrap");
+    const currentSkill = computed(() => skills()[selectedSkill()]);
+
+    function selectSkill(index) {
+        return function() {
+            selectedSkill.set(index);
+        }
+    }
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                nav.next(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                nav.next(1);
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (onBack) onBack();
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+</script>

package/src/components/gui/mobile/index.ts

@@ -0,0 +1,24 @@
+import { inject } from "../../../core/inject";
+import { RpgClientEngine } from "../../../RpgClientEngine";
+import MobileGui from "./mobile.ce";
+import { signal } from "canvasengine";
+
+function isMobile() {
+    return /Android|iPhone|iPad|iPod|Windows Phone|webOS|BlackBerry/i.test(navigator.userAgent);
+  }
+
+export const withMobile = () => (
+    {
+        gui: [
+            {
+                id: 'mobile-gui',
+                component: MobileGui,
+                autoDisplay: true,
+                dependencies: () => {
+                    const engine = inject(RpgClientEngine);
+                    return [signal(isMobile() ||undefined), engine.controlsReady]
+                }
+            }
+        ]
+    }
+)

package/src/components/gui/mobile/mobile.ce

@@ -0,0 +1,80 @@
+<Container justifyContent="space-between" alignItems="flex-end" width="100%" height="100%">
+    <!-- Gamepad buttons A and B (left side) -->
+    <Container justifyContent="flex-start" alignItems="flex-end"  gap={20}>
+        <Container display="flex" direction="column" gap={20} margin={50}>
+            <!-- Button B (top) -->
+  
+            <!-- Button A (bottom) -->
+            <Button 
+                text="A"
+                shape="circle"
+                width={70}
+                height={70}
+                controls={controlsInstance}
+                controlName="action"
+                style={{
+                    backgroundColor: {
+                        normal: "#2ecc71",
+                        hover: "#27ae60",
+                        pressed: "#229954",
+                        disabled: "#7f8c8d"
+                    },
+                    text: {
+                        fontSize: 24,
+                        fontFamily: "Arial Bold",
+                        color: "#ffffff"
+                    }
+                }}
+            />
+
+            <Button 
+                text="B"
+                shape="circle"
+                width={70}
+                height={70}
+                controls={controlsInstance}
+                controlName="back"
+                style={{
+                    backgroundColor: {
+                        normal: "#e74c3c",
+                        hover: "#c0392b",
+                        pressed: "#a93226",
+                        disabled: "#7f8c8d"
+                    },
+                    text: {
+                        fontSize: 24,
+                        fontFamily: "Arial Bold",
+                        color: "#ffffff"
+                    }
+                }}
+            />
+
+        </Container>
+    </Container>
+    
+    <Container margin={100} alignItems="flex-end">
+        <Container>
+            <Joystick 
+                controls={controlsInstance}
+                outerColor="#34495e"
+                innerColor="#3498db"
+            />
+        </Container>
+    </Container>
+</Container>
+
+<script>
+    import { signal, mount } from 'canvasengine'
+    import { Button } from 'canvasengine'
+    import { inject } from '../../../core/inject'
+    import { RpgClientEngine } from '../../../RpgClientEngine'
+    import { Direction } from '@rpgjs/common'
+
+
+    const controlsInstance = signal(null)
+
+    mount((element) => {
+        const control = inject('KeyboardControls')
+        controlsInstance.set(control)
+    })
+</script>

package/src/components/gui/notification/notification.ce

@@ -0,0 +1,51 @@
+<DOMContainer width="100%" height="100%" zIndex={100} class="notification">
+    <div class="rpg-ui-notifications">
+        @for ((notif,index) of notifications) {
+            <div
+                class="rpg-ui-notification"
+                data-type={notif.type || "info"}
+                style={notificationStyle(notif)}
+            >
+                @if (notif.icon) {
+                    <div class="rpg-ui-notification-icon">
+                        <DOMSprite sheet={iconSheet(notif.icon)} />
+                    </div>
+                }
+                <div class="rpg-ui-notification-message">{notif.message}</div>
+            </div>
+        }
+    </div>
+</DOMContainer>
+
+<style>
+    .notification {
+        pointer-events: none !important;
+    }
+</style>
+
+<script>
+    import { effect, computed } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+
+    const engine = inject(RpgClientEngine);
+    const notifications = computed(() => engine.notificationManager.stack());
+
+    const iconSheet = (iconId) => ({
+        definition: engine.getSpriteSheet(iconId),
+        playing: "default"
+    });
+
+    effect(() => {
+        const list = notifications();
+        const rowHeight = 68;
+        list.forEach((notif, index) => {
+            notif.layoutY.set(index * rowHeight);
+        });
+    });
+
+    const notificationStyle = (notif) => ({
+        opacity: notif.opacity(),
+        transform: `translateY(${notif.layoutY() + notif.offset()}px)`
+    });
+</script>

package/src/components/gui/save-load.ce

@@ -0,0 +1,208 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-save-load rpg-anim-fade-in">
+        <div class="rpg-ui-save-load-header">
+            <div class="rpg-ui-save-load-title">{title()}</div>
+            <div class="rpg-ui-save-load-subtitle">{subtitle()}</div>
+        </div>
+        <Navigation tabindex={selectedSlot} controls={controls}>
+            <div class="rpg-ui-save-load-list">
+                @for ((item,displayIndex) of displaySlots) {
+                    <div
+                        class="rpg-ui-save-load-slot"
+                        class={{active: selectedSlot() === displayIndex}}
+                        tabindex={displayIndex}
+                        data-slot-index={displayIndex}
+                        click={selectSlot(displayIndex)}
+                    >
+                        <div class="rpg-ui-save-load-slot-index">{item.label}</div>
+                        @if (item.slot) {
+                            <div class="rpg-ui-save-load-slot-meta">
+                                <div class="rpg-ui-save-load-slot-line">Level: {item.slot.level ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">Exp: {item.slot.exp ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">Map: {item.slot.map ?? "-"}</div>
+                                <div class="rpg-ui-save-load-slot-line">Date: {item.slot.date ?? "-"}</div>
+                            </div>
+                        }
+                        @else {
+                            <div class="rpg-ui-save-load-slot-empty">Empty Slot</div>
+                        }
+                    </div>
+                }
+            </div>
+        </Navigation>
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, effect, createTabindexNavigator, mount } from "canvasengine";
+    import { inject } from "../../core/inject";
+    import { RpgClientEngine } from "../../RpgClientEngine";
+    import { SaveClientService } from "../../services/save";
+    import { PrebuiltGui } from "@rpgjs/common";
+    import { RpgGui } from "../../Gui/Gui";
+
+    const engine = inject(RpgClientEngine);
+    const saveClient = inject(SaveClientService);
+    const gui = inject(RpgGui);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    const selectedSlot = signal(0);
+    const DEFAULT_SLOTS = 4;
+    const defaultSlots = () => Array.from({ length: DEFAULT_SLOTS }, () => null);
+    const localSlots = signal(defaultSlots());
+
+    const { data, onFinish } = defineProps();
+
+    const title = computed(() => data().mode === "save" ? "Save Game" : "Load Game");
+    const subtitle = computed(() => data().mode === "save"
+        ? "Choose a slot to overwrite or create."
+        : "Select a slot to load your progress."
+    );
+
+    const slotsValue = computed(() => localSlots());
+    const displaySlots = computed(() => {
+        const slots = slotsValue();
+        const items = slots.map((slot, index) => ({
+            kind: "slot",
+            slot,
+            slotIndex: index,
+            label: `Slot ${index + 1}`,
+            readonly: false
+        }));
+        if (!data().showAutoSlot) return items;
+        const index = typeof data().autoSlotIndex === "number" ? data().autoSlotIndex : 0;
+        const autoSlot = slots[index] ?? null;
+        const readonly = data().mode === "save";
+        return [
+            {
+                kind: "auto",
+                slot: autoSlot,
+                slotIndex: index,
+                label: data().autoSlotLabel || "Auto Save",
+                readonly
+            },
+            ...items
+        ];
+    });
+    const nav = createTabindexNavigator(selectedSlot, { count: () => displaySlots().length }, "wrap");
+
+    const canSelect = (item) => {
+        if (item.readonly) return false;
+        if (data().mode === "load" && !item.slot) return false;
+        return true;
+    };
+
+    const normalizeSlotValue = (value) => {
+        if (!value) return null;
+        if (typeof value === "string") {
+            try {
+                return JSON.parse(value);
+            } catch {
+                return null;
+            }
+        }
+        return value;
+    };
+
+    const normalizeSlots = (list) => {
+        if (Array.isArray(list)) {
+            const length = Math.max(list.length, DEFAULT_SLOTS);
+            return Array.from({ length }, (_, index) => normalizeSlotValue(list[index]));
+        }
+        if (!list || typeof list !== "object") {
+            return defaultSlots();
+        }
+        const keys = Object.keys(list).filter((key) => /^\d+$/.test(key));
+        const indices = keys.map((key) => Number(key)).filter((index) => index >= 0);
+        const maxIndex = indices.length ? Math.max(...indices) : -1;
+        const length = Math.max(maxIndex + 1, DEFAULT_SLOTS);
+        const slots = Array.from({ length }, () => null);
+        keys.forEach((key) => {
+            const index = Number(key);
+            if (index < 0 || index >= length) return;
+            slots[index] = normalizeSlotValue(list[key]);
+        });
+        return slots;
+    };
+
+    const hasProvidedSlots = (list) => {
+        if (Array.isArray(list)) return list.length > 0;
+        return !!(list && typeof list === "object" && Object.keys(list).length > 0);
+    };
+
+    const refreshSlots = async () => {
+        try {
+            const list = await saveClient.listSlots();
+            localSlots.set(normalizeSlots(list));
+        } catch (err) {
+            localSlots.set(defaultSlots());
+        }
+    };
+
+    const triggerSelect = async (displayIndex) => {
+        const list = displaySlots();
+        const item = list[displayIndex];
+        if (!item) return;
+        if (!canSelect(item)) return;
+        const action = data().mode === "save" ? "save" : "load";
+        if (action === "save") {
+            await saveClient.saveSlot(item.slotIndex);
+            await refreshSlots();
+        }
+        if (action === "load") {
+            await saveClient.loadSlot(item.slotIndex);
+        }
+        setTimeout(() => {
+            if (onFinish) onFinish();
+            gui.hide(PrebuiltGui.Save);
+            gui.hide(PrebuiltGui.TitleScreen);
+        }, 50);
+
+    };
+
+    function selectSlot(index) {
+        return function() {
+            selectedSlot.set(index);
+            triggerSelect(index);
+        }
+    }
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                nav.next(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                nav.next(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                triggerSelect(selectedSlot());
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (onFinish) onFinish();
+                gui.hide(PrebuiltGui.Save);
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+
+    mount((element) => {
+        refreshSlots();
+    });
+</script>