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

package/src/components/gui/shop/shop.ce

@@ -0,0 +1,493 @@
+    <DOMContainer width="100%" height="100%">
+        <div class="rpg-shop-container rpg-anim-fade-in">
+            <div class="rpg-shop-header">
+                <div class="rpg-shop-merchant">
+                    <div>
+                        @if (hasFace) {
+                            <div class="rpg-shop-merchant-avatar">
+                                <DOMSprite 
+                                    sheet={faceSheet(face().id, face().expression)} 
+                                    width="50px"
+                                    height="50px"
+                                    objectFit="contain"
+                                />  
+                            </div>
+                        }
+                    </div>
+                    <div class="rpg-shop-merchant-info">
+                        <p>{{ shopMessage() }}</p>
+                    </div>
+                </div>
+                <div class="rpg-shop-gold">
+                     {{ gold() }} {{ goldTerm }}
+                </div>
+            </div>
+
+            <div class="rpg-shop-body">
+                <div class="rpg-shop-left">
+                @if (tradeView() === 'mode') {
+                    <div class="rpg-shop-content rpg-shop-content-mode">
+                        <div class="rpg-shop-details rpg-shop-details-mode">
+                            <div class="rpg-shop-details-header">
+                            <div class="rpg-shop-details-icon">🛒</div>
+                            <h2 style="margin: 0;">Choose an action</h2>
+                        </div>
+                        <div class="rpg-shop-trade">
+                            <Navigation tabindex={selectedModeIndex} controls={modeControls}>
+                                <div class="rpg-shop-tabs rpg-shop-trade-tabs">
+                                    <div
+                                        class="rpg-shop-tab"
+                                        class={{active: selectedModeIndex() === 0}}
+                                        click={selectMode('buy')}
+                                    >Buy</div>
+                                    <div
+                                        class="rpg-shop-tab"
+                                        class={{active: selectedModeIndex() === 1}}
+                                        click={selectMode('sell')}
+                                    >Sell</div>
+                                </div>
+                            </Navigation>
+                        </div>
+                        </div>
+                    </div>
+                }
+                @else {
+                    <div>
+                    <Navigation tabindex={selectedTab} controls={tabControls}>  
+                        <div class="rpg-shop-tabs">
+                            @for ((tab,index) of tabs) {
+                                <div 
+                                    class="rpg-shop-tab" 
+                                    class={{active: selectedTab() === index}} 
+                                    tabindex={index} 
+                                    click={selectTab(index)}
+                                >{{ tab.label }}</div>
+                            }
+                        </div>
+                    </Navigation>
+
+                    <div class="rpg-shop-content">
+                        <div class="rpg-shop-grid">
+                            <Navigation tabindex={selectedItem} controls={itemControls}>     
+                                @for ((item,index) of filteredItems) { 
+                                    <div class="rpg-shop-card" class={{disabled: isItemDisabled(item), selected: selectedItem() === index}} tabindex={index} click={selectItem(index)}>
+                                        <div class="rpg-shop-card-icon">
+                                            @if (item.icon) {
+                                                <DOMSprite 
+                                                    sheet={iconSheet(item.icon)} 
+                                                    playing="default" 
+                                                    width="48px"
+                                                    height="48px"
+                                                    objectFit="contain"
+                                                />
+                                            }
+                                        </div>
+                                        <div class="rpg-shop-card-name">{{ item.name }}</div>
+                                        <div class="rpg-shop-card-price">{{ item.price }} {{ goldTerm }}</div>
+                                        @if (item.quantity !== undefined) {
+                                            <div class="rpg-shop-card-qty">x{{ item.quantity }}</div>
+                                        }
+                                        @if (item.equipped) {
+                                            <div class="rpg-shop-card-tag">Equipped</div>
+                                        }
+                                    </div>
+                                }
+                            </Navigation>
+                        </div>
+
+                        <div class="rpg-shop-details">
+                            <div class="rpg-shop-details-header">
+                                <div class="rpg-shop-details-icon">
+                                    <DOMSprite 
+                                        sheet={iconSheet(currentItem()?.icon)} 
+                                        playing="default" 
+                                        width="80px"
+                                        height="80px"
+                                        objectFit="contain"
+                                    />
+                                </div>
+                                <h2 style="margin: 0;">{{ currentItem()?.name || "" }}</h2>
+                                <p style="color: #ffd700; font-weight: bold; margin: 8px 0;">{{ currentItem()?.price ?? 0 }} {{ goldTerm }}</p>
+                                @if (currentItem()?.quantity !== undefined) {
+                                    <div class="rpg-shop-details-qty">Qty: x{{ currentItem()?.quantity }}</div>
+                                }
+                            </div>
+                            <div>
+                                @if (currentItem()?.equipped) {
+                                    <div class="rpg-shop-equipped">Already equipped</div>
+                                }
+                            </div>
+                            <div class="rpg-shop-details-desc">
+                                {{ currentItem()?.description || "" }}
+                            </div>
+                            <div>
+                                @if (displayStats().length > 0) {
+                                    <div class="rpg-shop-stats">
+                                        @for ((stat,index) of displayStats) {
+                                            <div class="rpg-shop-stat" class={{positive: stat.delta > 0, negative: stat.delta < 0}}>
+                                                <div class="rpg-shop-stat-key">{{ stat.label }}</div>
+                                                <div class="rpg-shop-stat-value">
+                                                    {{ stat.delta > 0 ? '+' : '' }}{{ stat.delta }}
+                                                </div>
+                                                @if (stat.current !== undefined) {
+                                                    <div class="rpg-shop-stat-current">{{ stat.current }} → {{ stat.next }}</div>
+                                                }
+                                            </div>
+                                        }
+                                    </div>
+                                }
+                            </div>
+                            <button class="rpg-shop-btn" click={backToMode()}>Back</button>
+                        </div>
+                    </div>
+                    </div>
+                }
+                @if (quantityDialogOpen) {
+                    <div class="rpg-shop-modal">
+                        <div class="rpg-shop-modal-card">
+                            <div class="rpg-shop-modal-title">{{ actionLabel }}</div>
+                            <div class="rpg-shop-modal-item">{{ currentItem()?.name || "" }}</div>
+                            @if (currentItem()?.quantity !== undefined) {
+                                <div class="rpg-shop-modal-qty">Available: x{{ currentItem()?.quantity }}</div>
+                            }
+                            <div class="rpg-shop-quantity">
+                                <div class="rpg-shop-quantity-label">Quantity</div>
+                                <div class="rpg-shop-quantity-controls">
+                                    <button class="rpg-shop-btn" click={changeQuantity(-1)}>-</button>
+                                    <div class="rpg-shop-quantity-value">{{ quantity }}</div>
+                                    <button class="rpg-shop-btn" click={changeQuantity(1)}>+</button>
+                                </div>
+                            </div>
+                            <div class="rpg-shop-modal-total">
+                                <span>Total</span>
+                                <span>{{ totalPrice() }} {{ goldTerm }}</span>
+                            </div>
+                            <div class="rpg-shop-modal-actions">
+                                <button class="rpg-shop-btn rpg-shop-btn-secondary" click={closeQuantityDialog()}>Cancel</button>
+                                <button class="rpg-shop-btn" click={confirmTrade()}>
+                                    {{ actionLabel() }} x{{ quantity() }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                }
+                </div>
+            </div>
+        </div>
+    </DOMContainer>
+
+<script>
+    import { mount, signal, computed, createTabindexNavigator, effect } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+
+    const engine = inject(RpgClientEngine)
+    const currentPlayer = engine.scene.currentPlayer
+    const keyboardControls = engine.globalConfig.keyboardControls
+    const iconSheet = (iconId) => ({
+        definition: engine.getSpriteSheet(iconId),
+        playing: "default"
+    })
+    const goldTerm = engine.globalConfig.goldTerm || 'G'
+
+    const selectedItem = signal(0)
+    const selectedTab = signal(0)
+    const tradeMode = signal('buy')
+    const tradeView = signal('mode')
+    const selectedModeIndex = signal(0)
+    const quantity = signal(1)
+    const quantityDialogOpen = signal(false)
+    const defaultMessage = 'Welcome to my shop!'
+    const tabs = [
+        { id: 'item', label: 'Items' },
+        { id: 'weapon', label: 'Weapons' },
+        { id: 'armor', label: 'Armor' }
+    ]
+
+    const { data, onInteraction , onFinish } = defineProps()
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value
+    const guiData = computed(() => resolveProp(data) || {})
+    const shopMessage = computed(() => {
+        const message = resolveProp(guiData().message)
+        return message ? String(message) : defaultMessage
+    })
+    const face = computed(() => resolveProp(guiData().face))
+    const hasFace = computed(() => {
+        const value = face()
+        return value && value.id
+    })
+    const buyItems = computed(() => guiData().items || [])
+    const sellItems = computed(() => guiData().sellItems || [])
+    const activeItems = computed(() => tradeMode() === 'buy' ? buyItems() : sellItems())
+    const filteredItems = computed(() => {
+        const tab = tabs[selectedTab()]
+        const items = activeItems()
+        if (!tab) return []
+        return items.filter((item) => item?.type === tab.id)
+    })
+    const currentItem = computed(() => filteredItems()[selectedItem()])
+    const gold = computed(() => currentPlayer()._gold())
+    const actionLabel = computed(() => tradeMode() === 'buy' ? 'Buy' : 'Sell')
+    const faceSheet = (graphicId, animationName) => ({
+        definition: engine.getSpriteSheet(graphicId),
+        playing: animationName || "default"
+    })
+    const maxQuantity = computed(() => {
+        const item = currentItem()
+        if (!item) return 0
+        const price = item?.price || 0
+        if (price <= 0) return 0
+        if (tradeMode() === 'sell') {
+            const qty = item?.quantity ?? 0
+            return Math.max(0, qty)
+        }
+        return Math.max(1, Math.floor(gold() / price))
+    })
+    const totalPrice = computed(() => {
+        const price = currentItem()?.price || 0
+        return price * quantity()
+    })
+    const displayStats = computed(() => {
+        const stats = currentItem()?.stats || {}
+        const params = guiData().playerParams || {}
+        const order = ['atk', 'def', 'pdef', 'sdef', 'str', 'dex', 'int', 'agi', 'maxHp', 'maxSp']
+        const labels = {
+            atk: 'ATK',
+            def: 'DEF',
+            pdef: 'PDEF',
+            sdef: 'SDEF',
+            str: 'STR',
+            dex: 'DEX',
+            int: 'INT',
+            agi: 'AGI',
+            maxHp: 'MAX HP',
+            maxSp: 'MAX SP'
+        }
+        const orderedKeys = order.filter((key) => stats[key] !== undefined)
+        const extraKeys = Object.keys(stats).filter((key) => !order.includes(key))
+        const keys = orderedKeys.concat(extraKeys)
+        const list = []
+        for (const key of keys) {
+            const delta = stats[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: labels[key] || key.toUpperCase(),
+                delta,
+                current,
+                next
+            })
+        }
+        return list
+    })
+    const nav = createTabindexNavigator(selectedItem, { count: () => filteredItems().length }, 'wrap')
+    const navTab = createTabindexNavigator(selectedTab, { count: () => tabs.length }, 'wrap')
+    const navMode = createTabindexNavigator(selectedModeIndex, { count: () => 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) {
+        if (!item) return true
+        const price = item?.price || 0
+        if (price <= 0) return true
+        if (tradeMode() === 'sell') {
+            const qty = item?.quantity ?? 0
+            return qty <= 0
+        }
+        return gold() < price
+    }
+
+    function backToMode() {
+        return function() {
+            tradeView.set('mode')
+        }
+    }
+
+    function changeQuantity(delta) {
+        return function() {
+            const limit = maxQuantity()
+            if (limit <= 0) return
+            const 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() {
+            const item = currentItem()
+            if (!item || isItemDisabled(item)) {
+                quantityDialogOpen.set(false)
+                return
+            }
+            const action = tradeMode() === 'buy' ? 'buyItem' : 'sellItem'
+            onInteraction(action, { id: item.id, nb: quantity() })
+            quantityDialogOpen.set(false)
+        }
+    }
+
+    effect(() => {
+        const count = filteredItems().length
+        if (selectedItem() >= count) {
+            selectedItem.set(Math.max(0, count - 1))
+        }
+    })
+
+    const modeControls = signal({
+        left: {
+            repeat: true,
+            bind: keyboardControls.left,
+            throttle: 150,
+            keyDown() {
+                navMode.next(-1)
+            }
+        },
+        right: {
+            repeat: true,
+            bind: keyboardControls.right,
+            throttle: 150,
+            keyDown() {
+                navMode.next(1)
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                const mode = selectedModeIndex() === 0 ? 'buy' : 'sell'
+                tradeMode.set(mode)
+                selectedItem.set(0)
+                quantity.set(1)
+                tradeView.set('items')
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                onFinish()
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+
+    const itemControls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                if (quantityDialogOpen()) {
+                    changeQuantity(1)()
+                    return
+                }
+                nav.next(-1)
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (quantityDialogOpen()) {
+                    changeQuantity(-1)()
+                    return
+                }
+                nav.next(1)
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (quantityDialogOpen()) {
+                    const item = currentItem()
+                    if (!item || isItemDisabled(item)) {
+                        quantityDialogOpen.set(false)
+                        return
+                    }
+                    const action = tradeMode() === 'buy' ? 'buyItem' : 'sellItem'
+                    onInteraction(action, { id: item.id, nb: quantity() })
+                    quantityDialogOpen.set(false)
+                    return
+                }
+                const item = currentItem()
+                if (!isItemDisabled(item)) {
+                    quantityDialogOpen.set(true)
+                }
+            }
+        },
+        escape: {
+            bind: keyboardControls.escape,
+            keyDown() {
+                if (quantityDialogOpen()) {
+                    quantityDialogOpen.set(false)
+                    return
+                }
+                tradeView.set('mode')
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+
+    const tabControls = signal({
+        left: {
+            repeat: true,
+            bind: keyboardControls.left,
+            throttle: 150,
+            keyDown() {
+                if (quantityDialogOpen()) return
+                navTab.next(-1)
+            }
+        },
+        right: {
+            repeat: true,
+            bind: keyboardControls.right,
+            throttle: 150,
+            keyDown() {
+                if (quantityDialogOpen()) return
+                navTab.next(1)
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    })
+</script>

package/src/components/gui/title-screen.ce

@@ -0,0 +1,163 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-title-screen rpg-anim-fade-in">
+        <div class="rpg-ui-title-screen-header rpg-anim-float">
+            <div class="rpg-ui-title-screen-title">{titleText()}</div>
+            @if (subtitleText()) {
+                <div class="rpg-ui-title-screen-subtitle">{subtitleText()}</div>
+            }
+        </div>
+        <Navigation tabindex={selectedEntry} controls={controls}>
+            <div class="rpg-ui-menu rpg-ui-title-screen-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>
+        @if (versionText()) {
+            <div class="rpg-ui-title-screen-version">{versionText()}</div>
+        }
+    </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 { data, onInteraction } = defineProps({
+        entries: {
+            default: () => []
+        },
+        saveLoad: {
+            default: () => ({})
+        },
+        localActions: {
+            default: false
+        }
+    });
+
+    const { entries, title, subtitle, version, saveLoad, localActions } = data();
+
+    const defaultEntries = [
+        { id: "start", label: "Start" },
+        { id: "load", label: "Load" }
+    ];
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const titleText = computed(() => resolveProp(title) || "RPG");
+    const subtitleText = computed(() => resolveProp(subtitle) || "");
+    const versionText = computed(() => resolveProp(version) || "");
+    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 === "start") {
+                guiService.hide(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() {
+                if (guiService.isDisplaying(PrebuiltGui.Save)) return;
+                moveSelection(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (guiService.isDisplaying(PrebuiltGui.Save)) return;
+                moveSelection(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (guiService.isDisplaying(PrebuiltGui.Save)) return;
+                triggerSelect(selectedEntry());
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+</script>

package/src/components/index.ts

@@ -1,4 +1,7 @@
 import EventLayerComponent from "./scenes/event-layer.ce";
 import CharacterComponent from "./character.ce";
 
+// Prebuilt sprite components
+export { HpBar } from "./prebuilt";
+
 export { EventLayerComponent, CharacterComponent }