@rpgjs/client 5.0.0-beta.4 → 5.0.0-beta.6

package/dist/components/gui/shop/shop.ce.js.map

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

package/dist/components/gui/title-screen.ce.js

@@ -157,7 +157,8 @@ function component($$props) {
 		}))
 	]));
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=title-screen.ce.js.map

package/dist/components/gui/title-screen.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"title-screen.ce.js","names":[],"sources":["../../../src/components/gui/title-screen.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-title-screen rpg-anim-fade-in\">\n        <div class=\"rpg-ui-title-screen-header rpg-anim-float\">\n            <div class=\"rpg-ui-title-screen-title\">{titleText()}</div>\n            @if (subtitleText()) {\n                <div class=\"rpg-ui-title-screen-subtitle\">{subtitleText()}</div>\n            }\n        </div>\n        <Navigation tabindex={selectedEntry} controls={controls}>\n            <div class=\"rpg-ui-menu rpg-ui-title-screen-menu rpg-anim-slide-up\">\n                @for ((entry,index) of entryList()) {\n                    <div\n                        class=\"rpg-ui-menu-item\"\n                        class={{disabled: isEntryDisabled(entry)}}\n                        data-selected={selectedEntry() === index ? \"true\" : \"false\"}\n                        tabindex={index}\n                        click={selectEntry(index)}\n                    >{entry.label}</div>\n                }\n            </div>\n        </Navigation>\n        @if (versionText()) {\n            <div class=\"rpg-ui-title-screen-version\">{versionText()}</div>\n        }\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, effect } from \"canvasengine\";\n    import { PrebuiltGui } from \"@rpgjs/common\";\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { RpgGui } from \"../../Gui/Gui\";\n\n    const engine = inject(RpgClientEngine);\n    const guiService = inject(RpgGui);\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const { data, onInteraction } = defineProps({\n        entries: {\n            default: () => []\n        },\n        saveLoad: {\n            default: () => ({})\n        },\n        localActions: {\n            default: false\n        }\n    });\n\n    const { entries, title, subtitle, version, saveLoad, localActions } = data();\n\n    const defaultEntries = [\n        { id: \"start\", label: \"Start\" },\n        { id: \"load\", label: \"Load\" }\n    ];\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const titleText = computed(() => resolveProp(title) || \"RPG\");\n    const subtitleText = computed(() => resolveProp(subtitle) || \"\");\n    const versionText = computed(() => resolveProp(version) || \"\");\n    const localActionsEnabled = computed(() => resolveProp(localActions) === true);\n\n    const entryList = computed(() => {\n        const list = resolveProp(entries);\n        if (Array.isArray(list) && list.length) return list;\n        return defaultEntries;\n    });\n\n    const isEntryDisabled = (entry) => {\n        if (!entry) return true;\n        if (entry.disabled) return true;\n        if (entry.enabled === false) return true;\n        return false;\n    };\n\n    const selectedEntry = signal(0);\n    const selectableIndexes = computed(() => {\n        const list = entryList();\n        return list\n            .map((entry, index) => (isEntryDisabled(entry) ? null : index))\n            .filter((value) => value !== null);\n    });\n\n    effect(() => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        if (!available.includes(current)) {\n            selectedEntry.set(available[0]);\n        }\n    });\n\n    const moveSelection = (delta) => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        const currentIndex = Math.max(0, available.indexOf(current));\n        const nextIndex = (currentIndex + delta + available.length) % available.length;\n        selectedEntry.set(available[nextIndex]);\n    };\n\n    const triggerSelect = (index) => {\n        const list = entryList();\n        const entry = list[index];\n        if (!entry || isEntryDisabled(entry)) return;\n        if (localActionsEnabled()) {\n            if (entry.id === \"start\") {\n                guiService.hide(PrebuiltGui.TitleScreen);\n            }\n            if (entry.id === \"load\") {\n                const config = resolveProp(saveLoad) || {};\n                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];\n                guiService.display(PrebuiltGui.Save, {\n                    ...config,\n                    mode: config.mode || \"load\",\n                    slots\n                });\n            }\n        }\n        if (onInteraction) {\n            onInteraction(\"select\", { id: entry.id, index, entry });\n        }\n    };\n\n    function selectEntry(index) {\n        return function() {\n            selectedEntry.set(index);\n            triggerSelect(index);\n        };\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                triggerSelect(selectedEntry());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"title-screen.ce.js","names":[],"sources":["../../../src/components/gui/title-screen.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\">\n    <div class=\"rpg-ui-title-screen rpg-anim-fade-in\">\n        <div class=\"rpg-ui-title-screen-header rpg-anim-float\">\n            <div class=\"rpg-ui-title-screen-title\">{titleText()}</div>\n            @if (subtitleText()) {\n                <div class=\"rpg-ui-title-screen-subtitle\">{subtitleText()}</div>\n            }\n        </div>\n        <Navigation tabindex={selectedEntry} controls={controls}>\n            <div class=\"rpg-ui-menu rpg-ui-title-screen-menu rpg-anim-slide-up\">\n                @for ((entry,index) of entryList()) {\n                    <div\n                        class=\"rpg-ui-menu-item\"\n                        class={{disabled: isEntryDisabled(entry)}}\n                        data-selected={selectedEntry() === index ? \"true\" : \"false\"}\n                        tabindex={index}\n                        click={selectEntry(index)}\n                    >{entry.label}</div>\n                }\n            </div>\n        </Navigation>\n        @if (versionText()) {\n            <div class=\"rpg-ui-title-screen-version\">{versionText()}</div>\n        }\n    </div>\n</DOMContainer>\n\n<script>\n    import { signal, computed, effect } from \"canvasengine\";\n    import { PrebuiltGui } from \"@rpgjs/common\";\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { RpgGui } from \"../../Gui/Gui\";\n\n    const engine = inject(RpgClientEngine);\n    const guiService = inject(RpgGui);\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    const { data, onInteraction } = defineProps({\n        entries: {\n            default: () => []\n        },\n        saveLoad: {\n            default: () => ({})\n        },\n        localActions: {\n            default: false\n        }\n    });\n\n    const { entries, title, subtitle, version, saveLoad, localActions } = data();\n\n    const defaultEntries = [\n        { id: \"start\", label: \"Start\" },\n        { id: \"load\", label: \"Load\" }\n    ];\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const titleText = computed(() => resolveProp(title) || \"RPG\");\n    const subtitleText = computed(() => resolveProp(subtitle) || \"\");\n    const versionText = computed(() => resolveProp(version) || \"\");\n    const localActionsEnabled = computed(() => resolveProp(localActions) === true);\n\n    const entryList = computed(() => {\n        const list = resolveProp(entries);\n        if (Array.isArray(list) && list.length) return list;\n        return defaultEntries;\n    });\n\n    const isEntryDisabled = (entry) => {\n        if (!entry) return true;\n        if (entry.disabled) return true;\n        if (entry.enabled === false) return true;\n        return false;\n    };\n\n    const selectedEntry = signal(0);\n    const selectableIndexes = computed(() => {\n        const list = entryList();\n        return list\n            .map((entry, index) => (isEntryDisabled(entry) ? null : index))\n            .filter((value) => value !== null);\n    });\n\n    effect(() => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        if (!available.includes(current)) {\n            selectedEntry.set(available[0]);\n        }\n    });\n\n    const moveSelection = (delta) => {\n        const available = selectableIndexes();\n        if (!available.length) return;\n        const current = selectedEntry();\n        const currentIndex = Math.max(0, available.indexOf(current));\n        const nextIndex = (currentIndex + delta + available.length) % available.length;\n        selectedEntry.set(available[nextIndex]);\n    };\n\n    const triggerSelect = (index) => {\n        const list = entryList();\n        const entry = list[index];\n        if (!entry || isEntryDisabled(entry)) return;\n        if (localActionsEnabled()) {\n            if (entry.id === \"start\") {\n                guiService.hide(PrebuiltGui.TitleScreen);\n            }\n            if (entry.id === \"load\") {\n                const config = resolveProp(saveLoad) || {};\n                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];\n                guiService.display(PrebuiltGui.Save, {\n                    ...config,\n                    mode: config.mode || \"load\",\n                    slots\n                });\n            }\n        }\n        if (onInteraction) {\n            onInteraction(\"select\", { id: entry.id, index, entry });\n        }\n    };\n\n    function selectEntry(index) {\n        return function() {\n            selectedEntry.set(index);\n            triggerSelect(index);\n        };\n    }\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                moveSelection(1);\n            }\n        },\n        action: {\n            bind: keyboardControls.action,\n            keyDown() {\n                if (guiService.isDisplaying(PrebuiltGui.Save)) return;\n                triggerSelect(selectedEntry());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n</script>\n"],"mappings":"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"}

package/dist/components/prebuilt/hp-bar.ce.js

@@ -106,7 +106,8 @@ function component($$props) {
 		h(Graphics, { draw: drawBorder })
 	])];
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=hp-bar.ce.js.map

package/dist/components/prebuilt/hp-bar.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"hp-bar.ce.js","names":[],"sources":["../../../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.x} y={position.y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = object.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return object.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = object._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"mappings":";;AAOC,SAAA,UAAA,SAAA;AACsB,UAAC,QAAY;CAEhC,MAAS,EAAA,WADe,eAAe,QACL,EAAA;CACtC,MAAI,WAAS;CACb,MAAI,YAAc;CAClB,MAAC,eAAA;CACD,MAAG,cAAA;CACH,MAAK,UAAA;CACL,MAAE,UAAa;CACf,MAAC,cAAA;CACD,MAAK,cAAU;CACf,MAAE,eAAe,WAAa,UAAW;CACzC,MAAI,aAAQ,YAAA,UAAA;CACZ,MAAM,kBAAkB,KAAE,MAAK,aAAA,EAAA;CAC/B,MAAI,SAAA,OAAA;CACJ,MAAG,YAAA,eAAA;AACC,SAAA,OAAA,YAAA,IAAA;GACF;;AAGE,UADU,OAAY,UAAG,IAAW,EAAA,EACtB,SAAO;GACvB;CACF,MAAC,YAAA,eAAA;EACG,MAAG,MAAK,OAAW;AACpB,MAAA,OAAS,EACX,QAAA;EACG,MAAM,UAAU,WAAC,GAAA;AAClB,SAAQ,KAAK,IAAE,GAAA,KAAU,IAAC,GAAA,QAAA,CAAA;GAC5B;CACD,MAAM,kBAAkB,eAAe,WAAE,EAAA;EACtC,UAAS;EACX,QAAA;EACA,CAAC;AACF,cAAY;EACV,MAAA,aAAS,WAAA;;GAEV;CACD,MAAM,WAAW,gBAAgB;;EAEjC,GAAO,CAAC,YAAW;;CAEnB,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,iBAAA;EACC,MAAM,QAAQ,eAAI;AAElB,MAAA,UAAc,KAAK,QAAO,cAAW,EACnC,QAAS,cAAI;AAEf,SAAM,KAAM,IAAI,GAAG,MAAI;GAC3B;;EAEI,MAAM,UAAQ,WAAY;AAC9B,MAAM,UAAY,GAAA,QAAA;WAGZ,UAAe,GAAA,QAAA;WAGR,UAAI,IAAA,QAAA;;GAMjB;;AAEI,IAAA,UAAY,GAAE,GAAA,UAAA,WAAA,aAAA;AAClB,IAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;GAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;AACnB,IAAA,UAAW,GAAA,GAAA,UAAA,WAAA,aAAA;AACV,IAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,WAAW;;AAErB,KAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,YAAA;AACX,KAAA,KAAA,EAAW,OAAE,YAAa,EAAA,CAAO;;;CAGvC,MAAM,iBAAiB,MAAM;;AAEzB,MAAI,QAAQ,GAAG;AAChB,KAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,YAAA;AACP,KAAE,KAAK;IAAE,OAAK;IAAA,OAAA;IAAA,CAAA;;;CAGtB,MAAM,cAAS,MAAO;;AAEpB,IAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;GACG,CAAC;;WAEJ,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;GAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,gBAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,YAAA,CAAA;EAAA,CAAA,CAAA"}
+{"version":3,"file":"hp-bar.ce.js","names":[],"sources":["../../../src/components/prebuilt/hp-bar.ce"],"sourcesContent":["<!-- \n  HP Bar Component\n  \n  A beautiful, animated health bar component for displaying player HP above sprites.\n  Features a gradient color based on HP level, smooth animations, and modern styling.\n  \n  ## Design\n  \n  The bar changes color dynamically based on HP percentage:\n  - Green (#4ade80) when HP > 60% - Healthy state\n  - Yellow (#facc15) when HP 30-60% - Caution state  \n  - Orange (#fb923c) when HP 15-30% - Danger state\n  - Red (#ef4444) when HP < 15% - Critical state\n  \n  @example\n  ```ts\n  import HpBar from './hp-bar.ce';\n  \n  // In module configuration\n  export default defineModule<RpgClient>({\n    sprite: {\n      componentsInFront: [HpBar]\n    }\n  })\n  ```\n-->\n\n<Container x={position.x} y={position.y}>\n  <!-- Background shadow for depth effect -->\n  <Graphics draw={drawShadow} x={1} y={1} />\n  \n  <!-- Main background -->\n  <Graphics draw={drawBackground} />\n  \n  <!-- HP fill bar -->\n  <Graphics draw={drawFill} />\n  \n  <!-- Highlight overlay for 3D effect -->\n  <Graphics draw={drawHighlight} />\n  \n  <!-- Border frame -->\n  <Graphics draw={drawBorder} />\n</Container>\n\n<script>\nimport { computed, animatedSignal, effect } from \"canvasengine\";\n\nconst { object } = defineProps();\n\n// ====================\n// Configuration\n// ====================\n\n/** Total width of the HP bar in pixels */\nconst barWidth = 50;\n\n/** Total height of the HP bar in pixels */\nconst barHeight = 8;\n\n/** Border radius for rounded corners */\nconst borderRadius = 4;\n\n/** Inner border radius for the fill bar */\nconst innerRadius = 3;\n\n/** Padding between background and fill */\nconst padding = 1;\n\n/** Background color (dark theme) */\nconst bgColor = 0x16213e;\n\n/** Shadow color */\nconst shadowColor = 0x000000;\n\n/** Border color */\nconst borderColor = 0x4a5568;\n\n// ====================\n// Calculated dimensions\n// ====================\n\n/** Maximum fill width */\nconst maxFillWidth = barWidth - (padding * 2);\n\n/** Fill height */\nconst fillHeight = barHeight - (padding * 2);\n\n/** Highlight height (half of fill) */\nconst highlightHeight = Math.floor(fillHeight / 2);\n\n// ====================\n// Reactive HP values\n// ====================\n\n/** Gets hitbox dimensions for positioning */\nconst hitbox = object.hitbox;\n\n/**\n * Gets the current HP value from the player object\n * Uses hpSignal which is synchronized from the server\n */\nconst currentHp = computed(() => {\n  return object.hpSignal?.() ?? 0;\n});\n\n/**\n * Gets the maximum HP value from player parameters\n * Reads from _param.maxHp which contains calculated stats\n */\nconst maxHp = computed(() => {\n  const params = object._param?.() ?? {};\n  return params.maxHp ?? 100;\n});\n\n/**\n * Calculates HP percentage (0 to 1)\n */\nconst hpPercent = computed(() => {\n  const max = maxHp();\n  if (max <= 0) return 0;\n  const percent = currentHp() / max;\n  return Math.max(0, Math.min(1, percent));\n});\n\n// ====================\n// Animated values\n// ====================\n\n/**\n * Animated percentage for smooth bar transitions\n */\nconst animatedPercent = animatedSignal(hpPercent(), {\n  duration: 300,\n  easing: 'easeOutCubic'\n});\n\n// Update animated value when HP changes\neffect(() => {\n  const newPercent = hpPercent();\n  animatedPercent.set(newPercent);\n});\n\n// ====================\n// Visual calculations\n// ====================\n\n/**\n * Position of the bar relative to the sprite\n */\nconst position = computed(() => ({\n  x: (hitbox().w / 2) - (barWidth / 2),\n  y: -barHeight - 8\n}));\n\n/**\n * Current width of the HP fill based on animated percentage\n */\nconst fillWidth = computed(() => {\n  const percent = animatedPercent();\n  const width = maxFillWidth * percent;\n  // Ensure minimum visible width when HP > 0\n  if (percent > 0 && width < innerRadius * 2) {\n    return innerRadius * 2;\n  }\n  return Math.max(0, width);\n});\n\n/**\n * Determines HP bar color based on current HP percentage\n * Returns hex color number for PixiJS\n * \n * ## Color Thresholds\n * - Green (0x4ade80): HP > 60% - Healthy\n * - Yellow (0xfacc15): HP 30-60% - Caution\n * - Orange (0xfb923c): HP 15-30% - Danger\n * - Red (0xef4444): HP < 15% - Critical\n */\nconst hpColorHex = computed(() => {\n  const percent = hpPercent();\n  \n  if (percent > 0.6) {\n    return 0x4ade80; // Green - healthy\n  } else if (percent > 0.3) {\n    return 0xfacc15; // Yellow - caution\n  } else if (percent > 0.15) {\n    return 0xfb923c; // Orange - danger\n  } else {\n    return 0xef4444; // Red - critical\n  }\n});\n\n// ====================\n// Drawing functions\n// ====================\n\n/**\n * Draws the shadow behind the HP bar for depth effect\n */\nconst drawShadow = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: shadowColor, alpha: 0.3 });\n};\n\n/**\n * Draws the main background of the HP bar\n */\nconst drawBackground = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.fill({ color: bgColor, alpha: 0.9 });\n};\n\n/**\n * Draws the HP fill bar with dynamic color\n */\nconst drawFill = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, fillHeight, innerRadius);\n    g.fill({ color: hpColorHex() });\n  }\n};\n\n/**\n * Draws the highlight overlay for 3D effect\n */\nconst drawHighlight = (g) => {\n  const width = fillWidth();\n  if (width > 0) {\n    g.roundRect(padding, padding, width, highlightHeight, innerRadius);\n    g.fill({ color: 0xffffff, alpha: 0.25 });\n  }\n};\n\n/**\n * Draws the border frame around the HP bar\n * \n * Uses PixiJS Graphics API to create a rounded rectangle stroke\n * that serves as a visual border for the bar.\n * \n * @param g - PixiJS Graphics object\n * \n * @example\n * ```html\n * <Graphics draw={drawBorder} />\n * ```\n */\nconst drawBorder = (g) => {\n  g.roundRect(0, 0, barWidth, barHeight, borderRadius);\n  g.stroke({ \n    color: borderColor, \n    width: 1,\n    alpha: 0.7\n  });\n};\n</script>\n"],"mappings":";;AAOC,SAAA,UAAA,SAAA;AACsB,UAAC,QAAY;CAEhC,MAAS,EAAA,WADe,eAAe,QACL,EAAA;CACtC,MAAI,WAAS;CACb,MAAI,YAAc;CAClB,MAAC,eAAA;CACD,MAAG,cAAA;CACH,MAAK,UAAA;CACL,MAAE,UAAa;CACf,MAAC,cAAA;CACD,MAAK,cAAU;CACf,MAAE,eAAe,WAAa,UAAW;CACzC,MAAI,aAAQ,YAAA,UAAA;CACZ,MAAM,kBAAkB,KAAE,MAAK,aAAA,EAAA;CAC/B,MAAI,SAAA,OAAA;CACJ,MAAG,YAAA,eAAA;AACC,SAAA,OAAA,YAAA,IAAA;GACF;;AAGE,UADU,OAAY,UAAG,IAAW,EAAA,EACtB,SAAO;GACvB;CACF,MAAC,YAAA,eAAA;EACG,MAAG,MAAK,OAAW;AACpB,MAAA,OAAS,EACX,QAAA;EACG,MAAM,UAAU,WAAC,GAAA;AAClB,SAAQ,KAAK,IAAE,GAAA,KAAU,IAAC,GAAA,QAAA,CAAA;GAC5B;CACD,MAAM,kBAAkB,eAAe,WAAE,EAAA;EACtC,UAAS;EACX,QAAA;EACA,CAAC;AACF,cAAY;EACV,MAAA,aAAS,WAAA;;GAEV;CACD,MAAM,WAAW,gBAAgB;;EAEjC,GAAO,CAAC,YAAW;;CAEnB,MAAM,YAAY,eAAI;EACnB,MAAA,UAAA,iBAAA;EACC,MAAM,QAAQ,eAAI;AAElB,MAAA,UAAc,KAAK,QAAO,cAAW,EACnC,QAAS,cAAI;AAEf,SAAM,KAAM,IAAI,GAAG,MAAI;GAC3B;;EAEI,MAAM,UAAQ,WAAY;AAC9B,MAAM,UAAY,GAAA,QAAA;WAGZ,UAAe,GAAA,QAAA;WAGR,UAAI,IAAA,QAAA;;GAMjB;;AAEI,IAAA,UAAY,GAAE,GAAA,UAAA,WAAA,aAAA;AAClB,IAAM,KAAA;GAAA,OAAc;GAAQ,OAAA;GAAA,CAAA;;CAE5B,MAAM,kBAAgB,MAAA;AACnB,IAAA,UAAW,GAAA,GAAA,UAAA,WAAA,aAAA;AACV,IAAE,KAAK;GAAE,OAAO;GAAE,OAAA;GAAA,CAAA;;CAEtB,MAAI,YAAa,MAAO;EACxB,MAAM,QAAY,WAAW;;AAErB,KAAC,UAAQ,SAAA,SAAA,OAAA,YAAA,YAAA;AACX,KAAA,KAAA,EAAW,OAAE,YAAa,EAAA,CAAO;;;CAGvC,MAAM,iBAAiB,MAAM;;AAEzB,MAAI,QAAQ,GAAG;AAChB,KAAA,UAAY,SAAA,SAAA,OAAA,iBAAA,YAAA;AACP,KAAE,KAAK;IAAE,OAAK;IAAA,OAAA;IAAA,CAAA;;;CAGtB,MAAM,cAAS,MAAO;;AAEpB,IAAA,OAAA;GACM,OAAI;GACJ,OAAA;GACN,OAAA;GACG,CAAC;;WAEJ,EAAA,WAAA;EAAA,GAAA,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA;EAAA,EAAA,UAAA;GAAA,MAAA;GAAA,GAAA;GAAA,GAAA;GAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,gBAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,eAAA,CAAA;EAAA,EAAA,UAAA,EAAA,MAAA,YAAA,CAAA;EAAA,CAAA,CAAA;;AAIC,IAAM,iBAEH"}

package/dist/components/prebuilt/light-halo.ce.js

@@ -63,7 +63,8 @@ function component($$props) {
 		y: position.y
 	}, h(Graphics, { draw: drawHalo }));
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=light-halo.ce.js.map

package/dist/components/prebuilt/light-halo.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"light-halo.ce.js","names":[],"sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;AACqB,UAAA,QAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,QACoE,EAAA;CACtE,MAAG,gBAAmB,eAAa,cAAe,IAAG,GAAI;CACzD,MAAE,qBAAA,eAAA,mBAAA,IAAA,GAAA;CACF,MAAI,iBAAkB,eAAa,eAAe,IAAA,GAAQ;CAC1D,MAAI,sBAAwB,eAAU,oBAAyB,IAAI,GAAI;CACvE,MAAI,eAAiB,eAAe,aAAE,IAAe,KAAI;CACzD,MAAI,kBAAiB,eAAiB,gBAAe,IAAK,KAAO;CACjE,MAAI,gBAAiB,eAAgB,cAAC,IAAiB,SAAG;CAC1D,MAAI,OAAS,OAAO,EAAC;CACrB,MAAI,gBAAiB,eAAgB;EACjC,MAAA,IAAU,MAAM;EAClB,MAAA,OAAA,eAAA;EACF,MAAO,YAAA,oBAAA;EACL,MAAO,QAAA,cAAA;AAKP,SAAS,QAHM,KAAA,IAAA,IAAA,MAEC,GADL,KAAA,IAAA,IAAA,QAAA,IAAA,GAAA,MACK,MACP;GACT;CACF,MAAE,iBAAA,eAAA;EACE,MAAA,IAAA,MAAa;;EAEb,MAAM,YAAY,qBAAA;EACnB,MAAM,QAAK,iBAAQ;;EAItB,MAAM,WAAA,KAAoB,QAAC,GAAU,MAAK;AAC1C,SAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,QAAA,CAAA;GAC7D;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,QAAA,CAAA,IAAc;;EAEnB,EAAE;CACH,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,gBAAa;EACjC,MAAU,QAAG,eAAS;kCAEpB;AAEC,IAAA,YAAc;AAEjB,IAAM,UAAA,CAAA,WAAgB;AAGpB,IAAA,OAAM,GAAA,GAAW,OAAC;AAClB,IAAA,KAAM;GACP;GACI,OAAQ;GACX,CAAA;AAEA,IAAA,OAAM,GAAA,GAAA,SAAiB,GAAO;AAC/B,IAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;;AAGF,YAAW;AACR,OAAA,QAAW,MAAO,IAAA,EAAA;GACnB;AAEM,QADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA,CACpB"}
+{"version":3,"file":"light-halo.ce.js","names":[],"sources":["../../../src/components/prebuilt/light-halo.ce"],"sourcesContent":["<Container x={position.x} y={position.y}>\n  <Graphics draw={drawHalo}  />\n</Container>\n\n<script>\nimport { computed, signal, tick, mount } from \"canvasengine\";\nimport { BlurFilter } from \"pixi.js\";\n\n/**\n * Component props for LightHalo\n * \n * All props are signals (even static ones) and must be read with `()`.\n * Props are optional and will use default values if not provided.\n * \n * @property {Object} object - The sprite object (required)\n * @property {number|Signal<number>} [baseRadius] - Base radius of the light halo in pixels (default: 30)\n * @property {number|Signal<number>} [radiusVariation] - Radius variation range (halo will pulse between baseRadius ± radiusVariation) (default: 10)\n * @property {number|Signal<number>} [baseOpacity] - Base opacity of the light halo (0 to 1) (default: 0.6)\n * @property {number|Signal<number>} [opacityVariation] - Opacity variation range (halo will fade between baseOpacity ± opacityVariation) (default: 0.3)\n * @property {number|Signal<number>} [sizeSpeed] - Animation speed for size pulsing (higher = faster) (default: 0.002)\n * @property {number|Signal<number>} [opacitySpeed] - Animation speed for opacity fading (higher = faster) (default: 0.003)\n * @property {number|Signal<number>} [lightColor] - Color of the light halo (hex value, warm yellow-white by default: 0xffffaa)\n */\nconst { \n  object, \n  baseRadius,\n  radiusVariation,\n  baseOpacity,\n  opacityVariation,\n  sizeSpeed,\n  opacitySpeed,\n  lightColor\n} = defineProps();\n\n// ====================\n// Props with default values\n// ====================\n\nconst getBaseRadius = computed(() => baseRadius?.() ?? 30);\nconst getRadiusVariation = computed(() => radiusVariation?.() ?? 10);\nconst getBaseOpacity = computed(() => baseOpacity?.() ?? 0.6);\nconst getOpacityVariation = computed(() => opacityVariation?.() ?? 0.3);\nconst getSizeSpeed = computed(() => sizeSpeed?.() ?? 0.002);\nconst getOpacitySpeed = computed(() => opacitySpeed?.() ?? 0.003);\nconst getLightColor = computed(() => lightColor?.() ?? 0xffffaa);\n\n// ====================\n// Animation state\n// ====================\n\n/** Time counter for animations */\nconst time = signal(0);\n\n/**\n * Current radius of the halo with pulsing animation\n * Uses multiple sine waves for more organic movement\n */\nconst currentRadius = computed(() => {\n  const t = time();\n  const base = getBaseRadius();\n  const variation = getRadiusVariation();\n  const speed = getSizeSpeed();\n  \n  // Combine two sine waves for less predictable pulsing\n  const pulse1 = Math.sin(t * speed);\n  const pulse2 = Math.sin(t * speed * 1.5) * 0.5;\n  const combinedPulse = (pulse1 + pulse2) / 1.5;\n  \n  return base + (combinedPulse * variation);\n});\n\n/**\n * Current opacity of the halo with fading animation\n * Includes a subtle flicker effect\n */\nconst currentOpacity = computed(() => {\n  const t = time();\n  const base = getBaseOpacity();\n  const variation = getOpacityVariation();\n  const speed = getOpacitySpeed();\n  \n  // Main breathing cycle\n  const fade = Math.sin(t * speed);\n  \n  // Subtle high-frequency flicker (candle-like)\n  const flicker = (Math.random() - 0.5) * 0.1;\n  \n  return Math.max(0, Math.min(1, base + (fade * variation) + flicker));\n});\n\n// ====================\n// Position calculations\n// ====================\n\nconst hitbox = object.hitbox;\n\nconst position = computed(() => ({\n  x: hitbox().w / 2,\n  y: hitbox().h / 2\n}));\n\n// ====================\n// Drawing function\n// ====================\n\n// Create filters once to avoid recreation on every frame\nconst blurFilter = new BlurFilter({ strength: 20, quality: 3 });\n\n/**\n * Draws the light halo effect with realistic diffusion\n */\nconst drawHalo = (g) => {\n  const radius = currentRadius();\n  const opacity = currentOpacity();\n  const color = getLightColor();\n  \n  if (opacity <= 0 || radius <= 0) return;\n\n  // Set blend mode to ADD for glowing light effect\n  g.blendMode = 'add';\n  \n  // Apply blur filter for soft light diffusion\n  g.filters = [blurFilter];\n  \n  // Draw main light source\n  // The blur filter will spread this out into a nice gradient\n  g.circle(0, 0, radius);\n  g.fill({ \n    color: color, \n    alpha: opacity \n  });\n  \n  // Draw a smaller, brighter core\n  g.circle(0, 0, radius * 0.4);\n  g.fill({ \n    color: 0xffffff, \n    alpha: opacity * 0.5 \n  });\n};\n\n// ====================\n// Animation loop\n// ====================\ntick(() => {\n  time.update(t => t + 1);\n});\n</script>\n\n"],"mappings":";;;AAQE,SAAA,UAAA,SAAA;AACqB,UAAA,QAAA;CAEhB,MAAM,EAAG,QAAQ,YAAO,iBAAsB,aAAa,kBAAI,WAAA,cAAA,eADpE,eAAA,QACoE,EAAA;CACtE,MAAG,gBAAmB,eAAa,cAAe,IAAG,GAAI;CACzD,MAAE,qBAAA,eAAA,mBAAA,IAAA,GAAA;CACF,MAAI,iBAAkB,eAAa,eAAe,IAAA,GAAQ;CAC1D,MAAI,sBAAwB,eAAU,oBAAyB,IAAI,GAAI;CACvE,MAAI,eAAiB,eAAe,aAAE,IAAe,KAAI;CACzD,MAAI,kBAAiB,eAAiB,gBAAe,IAAK,KAAO;CACjE,MAAI,gBAAiB,eAAgB,cAAC,IAAiB,SAAG;CAC1D,MAAI,OAAS,OAAO,EAAC;CACrB,MAAI,gBAAiB,eAAgB;EACjC,MAAA,IAAU,MAAM;EAClB,MAAA,OAAA,eAAA;EACF,MAAO,YAAA,oBAAA;EACL,MAAO,QAAA,cAAA;AAKP,SAAS,QAHM,KAAA,IAAA,IAAA,MAEC,GADL,KAAA,IAAA,IAAA,QAAA,IAAA,GAAA,MACK,MACP;GACT;CACF,MAAE,iBAAA,eAAA;EACE,MAAA,IAAA,MAAa;;EAEb,MAAM,YAAY,qBAAA;EACnB,MAAM,QAAK,iBAAQ;;EAItB,MAAM,WAAA,KAAoB,QAAC,GAAU,MAAK;AAC1C,SAAM,KAAA,IAAc,GAAG,KAAA,IAAS,GAAG,OAAG,OAAY,YAAW,QAAA,CAAA;GAC7D;CACA,MAAM,SAAA,OAAe;CACrB,MAAM,WAAA,gBAA2B;EACjC,GAAM,QAAA,CAAA,IAAc;;EAEnB,EAAE;CACH,MAAG,aAAU,IAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,CAAA;CACb,MAAM,YAAY,MAAI;;EAElB,MAAK,UAAW,gBAAa;EACjC,MAAU,QAAG,eAAS;kCAEpB;AAEC,IAAA,YAAc;AAEjB,IAAM,UAAA,CAAA,WAAgB;AAGpB,IAAA,OAAM,GAAA,GAAW,OAAC;AAClB,IAAA,KAAM;GACP;GACI,OAAQ;GACX,CAAA;AAEA,IAAA,OAAM,GAAA,GAAA,SAAiB,GAAO;AAC/B,IAAA,KAAA;GACO,OAAO;GACb,OAAA,UAAA;;;AAGF,YAAW;AACR,OAAA,QAAW,MAAO,IAAA,EAAA;GACnB;AAEM,QADY,EAAE,WAAW;EAAE,GAAG,SAAA;EAAA,GAAA,SAAA;EAAA,EAAA,EAAA,UAAA,EAAA,MAAA,UAAA,CAAA,CACpB;;AAGhB,IAAM,iBAEE"}

package/dist/components/scenes/canvas.ce.js

@@ -1,5 +1,5 @@
 import { inject } from "../../core/inject.js";
-import component$1 from "./draw-map.ce.js";
+import __ce_component$1 from "./draw-map.ce.js";
 import { RpgGui } from "../../Gui/Gui.js";
 import { RpgClientEngine } from "../../RpgClientEngine.js";
 import { Canvas, Container, Viewport, computed, cond, effect, h, loop, useDefineProps, useProps } from "canvasengine";
@@ -35,7 +35,7 @@ function component($$props) {
 		worldHeight,
 		clamp: { direction: "all" },
 		sortableChildren: true
-	}, cond(sceneData, () => h(component$1))), loop(guiList, (gui) => h(Container, { display: "flex" }, cond(gui.display, () => h(gui.component, {
+	}, cond(sceneData, () => h(__ce_component$1))), loop(guiList, (gui) => h(Container, { display: "flex" }, cond(gui.display, () => h(gui.component, {
 		data: gui.data,
 		dependencies: gui.dependencies,
 		onFinish: (data) => {
@@ -46,7 +46,8 @@ function component($$props) {
 		}
 	}))))]);
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=canvas.ce.js.map

package/dist/components/scenes/canvas.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"mappings":";;;;;;;AAaM,SAAS,UAAA,SAAA;AACP,UAAA,QAAA;AACS,gBAAA,QAAA;CACf,MAAA,SAAA,OAAA,gBAAA;CACF,MAAE,aAAM,OAAA,OAAA;;CAER,MAAC,UAAM,eAAA;AACL,SAAS,OAAO,OAAC,WAAiB,KAAE,CAAI,CAAC,QAAC,QAAa,CAAA,IAAA,eAAA;GACvD;CACF,MAAE,aAAS,eAAuB,WAAO,EAAA,MAAA;CACzC,MAAE,cAAgB,eAAiB,WAAE,EAAA,OAAA;AACrC,cAAW;AACT,MAAM,WAAW,IAAI,CAAC,WAAQ,CAAA,UAAA,OAAA,IAAA,MAAA,oHAAA;GAG9B;CACF,MAAE,eAAkB,KAAM,SAAS;AACjC,cAAc;AACZ,cAAc,SAAO,IAAA,MAAW,KAAO;IACxC;;CAEH,MAAE,oBAAoB,KAAS,MAAM,SAAS;;;AAWzC,QALF,EAAA,QAAA;EAAA,OAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA,CAAA,EAAA,UAAA;EAAA;EAAA;EAAA,OAAA,EAFC,WAAS,OAEV;EAAA,kBAAA;EAAA,EAAA,KAAA,iBAAA,EAAA,YAAA,CAAA,CAAA,EAAA,KAAA,UAAA,QAAA,EAAA,WAAA,EAAA,SAAA,QAAA,EAAA,KAAA,IAAA,eAAA,EAAA,IAAA,WAAA;EAAA,MAAA,IAAA;EAAA,cAAA,IAAA;EAAA,WAAA,SAAA;;;EAEK,gBAAoB,MAAO,SAAE;AACzB,oBAAI,KAAA,MAAA,KAAA;;EACV,CAAA,CAAA,CAAU,CAAC,CAAA,CACZ"}
+{"version":3,"file":"canvas.ce.js","names":[],"sources":["../../../src/components/scenes/canvas.ce"],"sourcesContent":["<Canvas width={engine.width} height={engine.height}>\n  <Viewport worldWidth worldHeight clamp sortableChildren={true}>\n    @if (sceneData) {\n      <SceneMap />\n    }\n  </Viewport>\n  @for (gui of guiList) {\n      <Container display=\"flex\">\n        @if (gui.display) {\n          <gui.component data={gui.data} dependencies={gui.dependencies} onFinish={(data) => {\n            onGuiFinish(gui, data)\n          }} onInteraction={(name, data) => {\n            onGuiInteraction(gui, name, data)\n          }} /> \n        }\n      </Container>\n  }\n</Canvas>\n\n<script>\n  import { signal, computed, effect } from \"canvasengine\";\n  import { inject } from \"../../core/inject\";\n  import { RpgClientEngine } from \"../../RpgClientEngine\";\n  import SceneMap from './draw-map.ce'\n  import { RpgGui } from \"../../Gui/Gui\";\n  import { delay } from \"@rpgjs/common\";\n\n  const engine = inject(RpgClientEngine);\n  const guiService = inject(RpgGui);\n  const sceneData = engine.sceneMap.data\n  const guiList = computed(() => {\n    return Object.values(guiService.gui()).filter((gui) => !gui.attachToSprite)\n  })\n  const worldWidth = computed(() => sceneData()?.width)\n  const worldHeight = computed(() => sceneData()?.height)\n\n  effect(() => {\n     if (sceneData() && !sceneData().component) {\n       throw new Error(\"Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.\")\n     }\n  })\n\n  const onGuiFinish = (gui, data) => {\n    delay(() => {\n      guiService.guiClose(gui.name, data)\n    })\n  }\n\n  const onGuiInteraction = (gui, name, data) => {\n    guiService.guiInteraction(gui.name, name, data)\n  }\n  \n  const clamp = {\n    direction: \"all\"\n  }\n</script>\n"],"mappings":";;;;;;;AAaM,SAAS,UAAA,SAAA;AACP,UAAA,QAAA;AACS,gBAAA,QAAA;CACf,MAAA,SAAA,OAAA,gBAAA;CACF,MAAE,aAAM,OAAA,OAAA;;CAER,MAAC,UAAM,eAAA;AACL,SAAS,OAAO,OAAC,WAAiB,KAAE,CAAI,CAAC,QAAC,QAAa,CAAA,IAAA,eAAA;GACvD;CACF,MAAE,aAAS,eAAuB,WAAO,EAAA,MAAA;CACzC,MAAE,cAAgB,eAAiB,WAAE,EAAA,OAAA;AACrC,cAAW;AACT,MAAM,WAAW,IAAI,CAAC,WAAQ,CAAA,UAAA,OAAA,IAAA,MAAA,oHAAA;GAG9B;CACF,MAAE,eAAkB,KAAM,SAAS;AACjC,cAAc;AACZ,cAAc,SAAO,IAAA,MAAW,KAAO;IACxC;;CAEH,MAAE,oBAAoB,KAAS,MAAM,SAAS;;;AAWzC,QALF,EAAA,QAAA;EAAA,OAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA,CAAA,EAAA,UAAA;EAAA;EAAA;EAAA,OAAA,EAFC,WAAS,OAEV;EAAA,kBAAA;EAAA,EAAA,KAAA,iBAAA,EAAA,iBAAA,CAAA,CAAA,EAAA,KAAA,UAAA,QAAA,EAAA,WAAA,EAAA,SAAA,QAAA,EAAA,KAAA,IAAA,eAAA,EAAA,IAAA,WAAA;EAAA,MAAA,IAAA;EAAA,cAAA,IAAA;EAAA,WAAA,SAAA;;;EAEK,gBAAoB,MAAO,SAAE;AACzB,oBAAI,KAAA,MAAA,KAAA;;EACV,CAAA,CAAA,CAAU,CAAC,CAAA,CACZ;;AAGH,IAAM,iBAEN"}

package/dist/components/scenes/draw-map.ce.js

@@ -78,7 +78,8 @@ function component($$props) {
 		cond(weatherProps, () => h(Weather, weatherProps()))
 	]);
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=draw-map.ce.js.map

package/dist/components/scenes/draw-map.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"draw-map.ce.js","names":[],"sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>\n  <Container sound={backgroundAmbientSound} />\n\n  @if (map() && sceneComponent()) {\n    <sceneComponent() data={map().data} params={map().params} />\n  }\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n\n  @if (weatherProps) {\n    <Weather ...weatherProps() />\n  }\n</Container>\n\n<script>\n    import { NoiseFilter } from 'pixi-filters';\n    import { effect, signal, computed, mount, on, tick } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { Weather } from '@canvasengine/presets'\n\n    const engine = inject(RpgClientEngine);\n    const componentAnimations = engine.componentAnimations\n    const map = engine.sceneMap?.data\n    const sceneComponent = computed(() => map()?.component)\n    const sceneParams = map()?.params\n    const mapParams = map()?.params\n    const animations = engine.sceneMap.animations\n    const weather = engine.sceneMap.weather\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const data = signal(map()?.data)\n\n    const scale = mapParams?.scale || 1\n    const worldWidth = (mapParams?.width || 2048) * scale\n    const worldHeight = (mapParams?.height || 2048) * scale\n   \n    const clamp = {\n      direction: \"all\"\n    }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n\n    const weatherProps = computed(() => {\n      const state = weather?.()\n      if (!state) {\n        return null\n      }\n      const validEffects = ['rain', 'snow', 'fog', 'cloud']\n      if (!validEffects.includes(state.effect)) {\n        return null\n      }\n      const params = state.params ?? {}\n      return {\n        effect: state.effect,\n        speed: params.speed,\n        windDirection: params.windDirection,\n        windStrength: params.windStrength,\n        density: params.density,\n        maxDrops: params.maxDrops,\n        height: params.height,\n        scale: params.scale,\n        sunIntensity: params.sunIntensity,\n        sunAngle: params.sunAngle,\n        raySpread: params.raySpread,\n        rayTwinkle: params.rayTwinkle,\n        rayTwinkleSpeed: params.rayTwinkleSpeed,\n        zIndex: params.zIndex ?? 1000,\n        alpha: params.alpha,\n        blendMode: params.blendMode,\n      }\n    })\n</script>\n"],"mappings":";;;;;AASM,SAAmB,UAAA,SAAmB;AACnC,UAAmB,QAAY;AAClC,gBAAA,QAAA;CACA,MAAA,SAAS,OAAA,gBAAA;CACf,MAAE,sBAAA,OAAA;;CAEF,MAAM,iBAAe,eAAA,KAAA,EAAA,UAAA;AACL,MAAA,EAAA;CAChB,MAAE,YAAA,KAAA,EAAA;AACS,QAAA,SAAA;;CAEX,MAAC,kBAAM;EAAA,KAAA,WAAA;EAAA,UAAA;EAAA,MAAA;EAAA;CACP,MAAI,yBAA2B;EAAE,KAAK,WAAQ;EAAA,UAAA;EAAA,MAAA;EAAA;AACjC,QAAO,KAAC,EAAM,KAAE;CAC7B,MAAI,QAAS,WAAS,SAAY;AACrB,EAAA,WAAkB,SAAS,QAAG;AACvB,EAAC,WAAS,UAAY,QAAQ;CAIlD,MAAI,cAAY;EACZ,SAAM,OAAA;EACN,WAAM;EACN,UAAM;EACN,WAAM;EACN,WAAM;EACT;CACD,MAAI,eAAM,eAA0B;;AAEhC,MAAA,CAAK,MAAA,QAAA;AAIL,MAAA,CAAK;GADe;GAAU;GAAQ;GAAO;GAC5B,CAAC,SAAG,MAAW,OAAQ,CAC1C,QAAA;EAEE,MAAE,SAAY,MAAG,UAAA,EAAA;AACjB,SAAA;;GAEA,OAAM,OAAY;GAChB,eAAgB,OAAA;GAChB,cAAa,OAAA;GACb,SAAU,OAAG;GACb,UAAW,OAAE;GACb,QAAU,OAAM;GAClB,OAAA,OAAA;;GAEA,UAAM,OAAe;GACnB,WAAa,OAAC;GACZ,YAAU,OAAA;GACV,iBAAO,OAAA;GACT,QAAA,OAAA,UAAA;GACA,OAAM,OAAA;GACJ,WAAG,OAAa;GACnB;GACH;AAEI,QADc,EAAC,WAAY;EAAE,OAAG;EAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA;EAAA,EAAA,WAAA,EAAA,OAAA,wBAAA,CAAA;EAAA,KAAA,eAAA,KAAA,IAAA,gBAAA,CAAA,QAAA,EAAA,gBAAA,EAAA;GAAA,MAAA,eAAA,KAAA,CAAA,KAAA;GAAA,QAAA,eAAA,KAAA,CAAA,OAAA;GAAA,CAAA,CAAA;EAAA,KAAA,sBAAA,uBAAA,EAAA,WAAA,MAAA,KAAA,mBAAA,UAAA,cAAA,EAAA,mBAAA,WAAA,UAAA,CAAA,CAAA,CAAA;EAAA,KAAA,oBAAA,EAAA,SAAA,cAAA,CAAA,CAAA;EAAA,CACzB"}
+{"version":3,"file":"draw-map.ce.js","names":[],"sources":["../../../src/components/scenes/draw-map.ce"],"sourcesContent":["<Container sound={backgroundMusic} shake={shakeConfig} freeze={engine.gamePause}>\n  <Container sound={backgroundAmbientSound} />\n\n  @if (map() && sceneComponent()) {\n    <sceneComponent() data={map().data} params={map().params} />\n  }\n\n  @for (componentAnimation of componentAnimations) {\n    <Container>\n      @for (animation of componentAnimation.current) {\n        <componentAnimation.component ...animation />\n      }\n    </Container>\n  }\n\n  @if (weatherProps) {\n    <Weather ...weatherProps() />\n  }\n</Container>\n\n<script>\n    import { NoiseFilter } from 'pixi-filters';\n    import { effect, signal, computed, mount, on, tick } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import { Weather } from '@canvasengine/presets'\n\n    const engine = inject(RpgClientEngine);\n    const componentAnimations = engine.componentAnimations\n    const map = engine.sceneMap?.data\n    const sceneComponent = computed(() => map()?.component)\n    const sceneParams = map()?.params\n    const mapParams = map()?.params\n    const animations = engine.sceneMap.animations\n    const weather = engine.sceneMap.weather\n    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }\n    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }\n\n    const data = signal(map()?.data)\n\n    const scale = mapParams?.scale || 1\n    const worldWidth = (mapParams?.width || 2048) * scale\n    const worldHeight = (mapParams?.height || 2048) * scale\n   \n    const clamp = {\n      direction: \"all\"\n    }\n\n    const shakeConfig = {\n      trigger: engine.mapShakeTrigger,\n      intensity: 10,\n      duration: 500,\n      frequency: 10,\n      direction: 'both'\n    }\n\n    const weatherProps = computed(() => {\n      const state = weather?.()\n      if (!state) {\n        return null\n      }\n      const validEffects = ['rain', 'snow', 'fog', 'cloud']\n      if (!validEffects.includes(state.effect)) {\n        return null\n      }\n      const params = state.params ?? {}\n      return {\n        effect: state.effect,\n        speed: params.speed,\n        windDirection: params.windDirection,\n        windStrength: params.windStrength,\n        density: params.density,\n        maxDrops: params.maxDrops,\n        height: params.height,\n        scale: params.scale,\n        sunIntensity: params.sunIntensity,\n        sunAngle: params.sunAngle,\n        raySpread: params.raySpread,\n        rayTwinkle: params.rayTwinkle,\n        rayTwinkleSpeed: params.rayTwinkleSpeed,\n        zIndex: params.zIndex ?? 1000,\n        alpha: params.alpha,\n        blendMode: params.blendMode,\n      }\n    })\n</script>\n"],"mappings":";;;;;AASM,SAAM,UAAa,SAAA;AAChB,UAAmB,QAAY;AAClC,gBAAA,QAAA;CACA,MAAA,SAAS,OAAA,gBAAA;CACf,MAAE,sBAAA,OAAA;;CAEF,MAAM,iBAAe,eAAA,KAAA,EAAA,UAAA;AACL,MAAA,EAAA;CAChB,MAAE,YAAA,KAAA,EAAA;AACS,QAAA,SAAA;;CAEX,MAAC,kBAAM;EAAA,KAAA,WAAA;EAAA,UAAA;EAAA,MAAA;EAAA;CACP,MAAI,yBAA2B;EAAE,KAAK,WAAQ;EAAA,UAAA;EAAA,MAAA;EAAA;AACjC,QAAO,KAAC,EAAM,KAAE;CAC7B,MAAI,QAAS,WAAS,SAAY;AACrB,EAAA,WAAkB,SAAS,QAAG;AACvB,EAAC,WAAS,UAAY,QAAQ;CAIlD,MAAI,cAAY;EACZ,SAAM,OAAA;EACN,WAAM;EACN,UAAM;EACN,WAAM;EACN,WAAM;EACT;CACD,MAAI,eAAM,eAA0B;;AAEhC,MAAA,CAAK,MAAA,QAAA;AAIL,MAAA,CAAK;GADe;GAAU;GAAQ;GAAO;GAC5B,CAAC,SAAG,MAAW,OAAQ,CAC1C,QAAA;EAEE,MAAE,SAAY,MAAG,UAAA,EAAA;AACjB,SAAA;;GAEA,OAAM,OAAY;GAChB,eAAgB,OAAA;GAChB,cAAa,OAAA;GACb,SAAU,OAAG;GACb,UAAW,OAAE;GACb,QAAU,OAAM;GAClB,OAAA,OAAA;;GAEA,UAAM,OAAe;GACnB,WAAa,OAAC;GACZ,YAAU,OAAA;GACV,iBAAO,OAAA;GACT,QAAA,OAAA,UAAA;GACA,OAAM,OAAA;GACJ,WAAG,OAAa;GACnB;GACH;AAEI,QADc,EAAC,WAAY;EAAE,OAAG;EAAA,OAAA;EAAA,QAAA,OAAA;EAAA,EAAA;EAAA,EAAA,WAAA,EAAA,OAAA,wBAAA,CAAA;EAAA,KAAA,eAAA,KAAA,IAAA,gBAAA,CAAA,QAAA,EAAA,gBAAA,EAAA;GAAA,MAAA,eAAA,KAAA,CAAA,KAAA;GAAA,QAAA,eAAA,KAAA,CAAA,OAAA;GAAA,CAAA,CAAA;EAAA,KAAA,sBAAA,uBAAA,EAAA,WAAA,MAAA,KAAA,mBAAA,UAAA,cAAA,EAAA,mBAAA,WAAA,UAAA,CAAA,CAAA,CAAA;EAAA,KAAA,oBAAA,EAAA,SAAA,cAAA,CAAA,CAAA;EAAA,CACzB;;AAGP,IAAE,iBAEA"}

package/dist/components/scenes/event-layer.ce.js

@@ -1,6 +1,6 @@
 import { inject } from "../../core/inject.js";
 import { RpgClientEngine } from "../../RpgClientEngine.js";
-import component$1 from "../character.ce.js";
+import __ce_component$1 from "../character.ce.js";
 import { Container, h, loop, useDefineProps, useProps } from "canvasengine";
 //#region src/components/scenes/event-layer.ce
 function component($$props) {
@@ -11,18 +11,19 @@ function component($$props) {
 	const players = engine.sceneMap.players;
 	const events = engine.sceneMap.events;
 	return h(Container, { sortableChildren: true }, [
-		loop(events, (event, id) => h(component$1, {
+		loop(events, (event, id) => h(__ce_component$1, {
 			id,
 			object: event
 		})),
-		loop(players, (player, id) => h(component$1, {
+		loop(players, (player, id) => h(__ce_component$1, {
 			id,
 			object: player
 		})),
 		loop(children, (child) => h(child))
 	]);
 }
+var __ce_component = component;
 //#endregion
-export { component as default };
+export { __ce_component as default };
 
 //# sourceMappingURL=event-layer.ce.js.map

package/dist/components/scenes/event-layer.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-layer.ce.js","names":[],"sources":["../../../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n\n    @for (child of children) {\n        <child />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n    import LightHalo from \"../prebuilt/light-halo.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const { children } = defineProps()\n    \n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"mappings":";;;;;;AASmB,UAAU,QAAA;CACrB,MAAM,cAAE,eAAA,QAAA;CACZ,MAAA,SAAA,OAAA,gBAAA;CACJ,MAAE,EAAA,aAAS,aAAA;;CAEX,MAAC,SAAM,OAAA,SAAA;AAEH,QADgB,EAAC,WAAS,EAAK,kBAAa,MAAA,EAAA;EAAA,KAAA,SAAA,OAAA,OAAA,EAAA,aAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,UAAA,QAAA,OAAA,EAAA,aAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,MAAA,CAAA;EAAA,CAC5B"}
+{"version":3,"file":"event-layer.ce.js","names":[],"sources":["../../../src/components/scenes/event-layer.ce"],"sourcesContent":["<Container sortableChildren={true}>\n    @for ((event,id) of events) {\n        <Character id={id} object={event}  />\n    }\n\n    @for ((player,id) of players) {\n        <Character id={id} object={player} />\n    }\n\n    @for (child of children) {\n        <child />\n    }\n</Container>\n\n<script>\n    import { effect, signal } from 'canvasengine'\n    import { inject } from \"../../core/inject\";\n    import { RpgClientEngine } from \"../../RpgClientEngine\";\n    import Character from \"../character.ce\";\n    import LightHalo from \"../prebuilt/light-halo.ce\";\n   \n    const engine = inject(RpgClientEngine);\n    const { children } = defineProps()\n    \n    const players = engine.sceneMap.players\n    const events = engine.sceneMap.events\n</script>"],"mappings":";;;;;;AASmB,UAAU,QAAA;CACrB,MAAM,cAAE,eAAA,QAAA;CACZ,MAAA,SAAA,OAAA,gBAAA;CACJ,MAAE,EAAA,aAAS,aAAA;;CAEX,MAAC,SAAM,OAAA,SAAA;AAEH,QADgB,EAAC,WAAS,EAAK,kBAAa,MAAA,EAAA;EAAA,KAAA,SAAA,OAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,UAAA,QAAA,OAAA,EAAA,kBAAA;GAAA;GAAA,QAAA;GAAA,CAAA,CAAA;EAAA,KAAA,WAAA,UAAA,EAAA,MAAA,CAAA;EAAA,CAC5B;;AAGhB,IAAO,iBAED"}

package/dist/index.js

@@ -1,22 +1,22 @@
 import { Context } from "./node_modules/.pnpm/@signe_di@2.9.0/node_modules/@signe/di/dist/index.js";
 import { clearInject, context, inject, setInject } from "./core/inject.js";
 import { AbstractWebsocket, WebSocketToken } from "./services/AbstractSocket.js";
-import component$2 from "./components/gui/dialogbox/index.ce.js";
-import component from "./components/gui/box.ce.js";
-import component$15 from "./components/gui/shop/shop.ce.js";
+import __ce_component$2 from "./components/gui/dialogbox/index.ce.js";
+import __ce_component from "./components/gui/box.ce.js";
+import __ce_component$15 from "./components/gui/shop/shop.ce.js";
 import { getEntityProp } from "./utils/getEntityProp.js";
-import component$8 from "./components/gui/hud/hud.ce.js";
+import __ce_component$8 from "./components/gui/hud/hud.ce.js";
 import { SaveClientService, SaveClientToken, provideSaveClient } from "./services/save.js";
-import component$14 from "./components/gui/save-load.ce.js";
-import component$9 from "./components/gui/menu/items-menu.ce.js";
-import component$16 from "./components/gui/menu/skills-menu.ce.js";
-import component$3 from "./components/gui/menu/equip-menu.ce.js";
-import component$13 from "./components/gui/menu/options-menu.ce.js";
-import component$5 from "./components/gui/menu/exit-menu.ce.js";
-import component$11 from "./components/gui/menu/main-menu.ce.js";
-import component$12 from "./components/gui/notification/notification.ce.js";
-import component$17 from "./components/gui/title-screen.ce.js";
-import component$6 from "./components/gui/gameover.ce.js";
+import __ce_component$14 from "./components/gui/save-load.ce.js";
+import __ce_component$9 from "./components/gui/menu/items-menu.ce.js";
+import __ce_component$16 from "./components/gui/menu/skills-menu.ce.js";
+import __ce_component$3 from "./components/gui/menu/equip-menu.ce.js";
+import __ce_component$13 from "./components/gui/menu/options-menu.ce.js";
+import __ce_component$5 from "./components/gui/menu/exit-menu.ce.js";
+import __ce_component$11 from "./components/gui/menu/main-menu.ce.js";
+import __ce_component$12 from "./components/gui/notification/notification.ce.js";
+import __ce_component$17 from "./components/gui/title-screen.ce.js";
+import __ce_component$6 from "./components/gui/gameover.ce.js";
 import "./components/gui/index.js";
 import { RpgGui } from "./Gui/Gui.js";
 import { LoadMapService, LoadMapToken, provideLoadMap } from "./services/loadMap.js";
@@ -32,13 +32,13 @@ import { Control } from "./services/keyboardControls.js";
 import { provideRpg } from "./services/standalone.js";
 import { provideMmorpg } from "./services/mmorpg.js";
 import { startGame } from "./core/setup.js";
-import component$7 from "./components/prebuilt/hp-bar.ce.js";
-import component$10 from "./components/prebuilt/light-halo.ce.js";
+import __ce_component$7 from "./components/prebuilt/hp-bar.ce.js";
+import __ce_component$10 from "./components/prebuilt/light-halo.ce.js";
 import "./components/prebuilt/index.js";
 import { Presets } from "./presets/index.js";
-import component$1 from "./components/character.ce.js";
-import component$4 from "./components/scenes/event-layer.ce.js";
+import __ce_component$1 from "./components/character.ce.js";
+import __ce_component$4 from "./components/scenes/event-layer.ce.js";
 import "./components/index.js";
 import { withMobile } from "./components/gui/mobile/index.js";
 import { Input, KeyboardControls } from "canvasengine";
-export { AbstractWebsocket, component as BoxComponent, component$1 as CharacterComponent, Context, Control, component$2 as DialogboxComponent, component$3 as EquipMenuComponent, component$4 as EventLayerComponent, component$5 as ExitMenuComponent, component$6 as GameoverComponent, GlobalConfigToken, component$7 as HpBar, component$8 as HudComponent, Input, component$9 as ItemsMenuComponent, KeyboardControls, component$10 as LightHalo, LoadMapService, LoadMapToken, component$11 as MainMenuComponent, component$12 as NotificationComponent, component$13 as OptionsMenuComponent, PrebuiltComponentAnimations, Presets, RpgClientEngine, RpgClientEvent, RpgClientObject, RpgClientPlayer, RpgGui, RpgResource, RpgSound, SaveClientService, SaveClientToken, component$14 as SaveLoadComponent, component$15 as ShopComponent, component$16 as SkillsMenuComponent, Sound, component$17 as TitleScreenComponent, WebSocketToken, clearInject, context, getEntityProp, getSoundMetadata, inject, provideClientGlobalConfig, provideClientModules, provideGlobalConfig, provideLoadMap, provideMmorpg, provideRpg, provideSaveClient, setInject, startGame, withMobile };
+export { AbstractWebsocket, __ce_component as BoxComponent, __ce_component$1 as CharacterComponent, Context, Control, __ce_component$2 as DialogboxComponent, __ce_component$3 as EquipMenuComponent, __ce_component$4 as EventLayerComponent, __ce_component$5 as ExitMenuComponent, __ce_component$6 as GameoverComponent, GlobalConfigToken, __ce_component$7 as HpBar, __ce_component$8 as HudComponent, Input, __ce_component$9 as ItemsMenuComponent, KeyboardControls, __ce_component$10 as LightHalo, LoadMapService, LoadMapToken, __ce_component$11 as MainMenuComponent, __ce_component$12 as NotificationComponent, __ce_component$13 as OptionsMenuComponent, PrebuiltComponentAnimations, Presets, RpgClientEngine, RpgClientEvent, RpgClientObject, RpgClientPlayer, RpgGui, RpgResource, RpgSound, SaveClientService, SaveClientToken, __ce_component$14 as SaveLoadComponent, __ce_component$15 as ShopComponent, __ce_component$16 as SkillsMenuComponent, Sound, __ce_component$17 as TitleScreenComponent, WebSocketToken, clearInject, context, getEntityProp, getSoundMetadata, inject, provideClientGlobalConfig, provideClientModules, provideGlobalConfig, provideLoadMap, provideMmorpg, provideRpg, provideSaveClient, setInject, startGame, withMobile };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.6",
   "description": "RPGJS is a framework for creating RPG/MMORPG games",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,9 +22,9 @@
     "pixi.js": "^8.9.2"
   },
   "dependencies": {
-    "@rpgjs/common": "5.0.0-beta.4",
-    "@rpgjs/server": "5.0.0-beta.4",
-    "@rpgjs/ui-css": "5.0.0-beta.4",
+    "@rpgjs/common": "5.0.0-beta.6",
+    "@rpgjs/server": "5.0.0-beta.6",
+    "@rpgjs/ui-css": "5.0.0-beta.6",
     "@signe/di": "^2.9.0",
     "@signe/room": "^2.9.0",
     "@signe/sync": "^2.9.0",
@@ -32,9 +32,9 @@
     "rxjs": "^7.8.2"
   },
   "devDependencies": {
-    "@canvasengine/compiler": "2.0.0-beta.58",
+    "@canvasengine/compiler": "2.0.0-beta.61",
     "vite": "^8.0.10",
-    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-dts": "^5.0.0",
     "vitest": "^4.1.5"
   },
   "type": "module",

package/src/components/character.ce

@@ -9,6 +9,7 @@
     @for (graphicObj of graphicsSignals) {
       <Sprite 
         sheet={sheet(graphicObj)} 
+        scale={graphicScale(graphicObj)}
         direction 
         tint 
         hitbox
@@ -377,6 +378,18 @@
     };
   }
 
+  const graphicScale = (graphicObject) => {
+    const scale = graphicObject?.scale;
+    if (Array.isArray(scale)) return scale;
+    if (typeof scale === 'number') return [scale, scale];
+    if (scale && typeof scale === 'object') {
+      const x = typeof scale.x === 'number' ? scale.x : 1;
+      const y = typeof scale.y === 'number' ? scale.y : x;
+      return [x, y];
+    }
+    return undefined;
+  }
+
   // Combine animation change detection with movement state from smoothX/smoothY
   const movementAnimations = ['walk', 'stand'];
   const epsilon = 0; // movement threshold to consider the easing still running
@@ -467,4 +480,4 @@
   tick(() => {
     hooks.callHooks("client-sprite-onUpdate").subscribe()
   })
-</script>
+</script>