@rpgjs/client 5.0.0-beta.22 → 5.0.0-beta.24

package/dist/components/gui/dialogbox/index.ce.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n    <div\n        class=\"rpg-ui-dialog-container\"\n        data-position={dialogPosition()}\n        data-full-width={isFullWidth() ? \"true\" : \"false\"}\n        data-has-face={hasFace() ? \"true\" : \"false\"}\n    >\n        <div class=\"rpg-ui-dialog rpg-anim-fade-in\">\n            <div class=\"rpg-ui-dialog-body\">\n               <div>\n                    @if (speakerName()) {\n                        <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n                    }\n                    <div class=\"rpg-ui-dialog-content\">\n                        {displayMessage()}\n                    </div>\n                    @if (hasChoices()) {\n                        <Navigation tabindex={selectedItem} controls={controls}>\n                            <div class=\"rpg-ui-dialog-choices\">\n                                @for ((choice,index) of dialogChoices()) {\n                                    <div\n                                        class=\"rpg-ui-dialog-choice\"\n                                        class={{active: selectedItem() === index}}\n                                        tabindex={index}\n                                        data-choice-index={index}\n                                        click={selectChoice(index)}\n                                    >{{ choice.text }}</div>\n                                }\n                            </div>\n                        </Navigation>\n                    }\n                </div>\n                @if (hasFace()) {\n                    <div class=\"rpg-ui-dialog-face\">\n                        <DOMSprite\n                            sheet={faceSheet(dialogFace())}\n                            width=\"100%\"\n                            height=\"100%\"\n                            objectFit=\"contain\"\n                        />\n                    </div>\n                }\n            </div>\n            @if (showIndicator) {\n                <div class=\"rpg-ui-dialog-indicator\"></div>\n            }\n        </div>\n    </div>\n</DOMContainer>\n    \n<script>\n    import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { delay } from \"@rpgjs/common\";\n    import { getKeyboardControlBind } from \"../../../services/actionInput\";\n\n    const engine = inject(RpgClientEngine);\n    const currentPlayer = engine.scene.currentPlayer\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    engine.stopProcessingInput = true;\n\n    const selectedItem = signal(0)\n    const ACTION_OPEN_GUARD_MS = 150;\n    const openedAt = Date.now();\n\n    const {\n        data,\n        onFinish,\n        onInteraction,\n        guiOpenId\n    } = defineProps();\n\n    const dialogData = computed(() => data() || {});\n    const dialogChoices = computed(() => Array.isArray(dialogData().choices) ? dialogData().choices : []);\n    const message = computed(() => dialogData().message);\n    const speaker = computed(() => dialogData().speaker);\n    const position = computed(() => dialogData().position);\n    const typewriterEffect = computed(() => dialogData().typewriterEffect);\n    const fullWidth = computed(() => dialogData().fullWidth || false);\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const normalizeOpenId = (value) => {\n        const resolved = resolveProp(value);\n        return typeof resolved === \"string\" && resolved.length > 0 ? resolved : undefined;\n    };\n\n    const speakerName = computed(() => {\n        const value = resolveProp(speaker());\n        return value ? String(value) : \"\";\n    });\n\n    const dialogPosition = computed(() => resolveProp(position()) || \"bottom\");\n    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n    const dialogFace = computed(() => resolveProp(dialogData().face));\n    const hasFace = computed(() => {\n        const value = dialogFace();\n        return !!(value && value.id);\n    });\n\n    const displayMessage = signal(\"\");\n    const fullMessage = signal(\"\");\n    const isTyping = signal(false);\n    let typewriterTimer = null;\n    let rootElement = null;\n\n    mount((element) => {\n        rootElement = element;\n    });\n\n    const startTypewriter = (text) => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        displayMessage.set(\"\");\n        if (!text) return;\n        let index = 0;\n        isTyping.set(true);\n        typewriterTimer = setInterval(() => {\n            index += 1;\n            displayMessage.set(text.slice(0, index));\n            if (index >= text.length) {\n                clearInterval(typewriterTimer);\n                typewriterTimer = null;\n                isTyping.set(false);\n            }\n        }, 20);\n    };\n\n    const finishTyping = () => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        typewriterTimer = null;\n        displayMessage.set(fullMessage());\n        isTyping.set(false);\n    };\n\n    effect(() => {\n        const text = resolveProp(message()) || \"\";\n        fullMessage.set(text);\n        const useTypewriter = resolveProp(typewriterEffect()) !== false;\n        if (!useTypewriter) {\n            finishTyping();\n            return;\n        }\n        startTypewriter(text);\n    });\n\n\n    const hasChoices = computed(() => dialogChoices().length > 0);\n    const showIndicator = computed(() => !hasChoices() && !isTyping());\n    const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');\n\n    function selectChoice(index) {\n        return function() {\n            selectedItem.set(index);\n            onSelect(index);\n        }\n    }\n\n    function _onFinish(value) {\n        if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));\n    }\n\n    const onSelect = (index) => {\n        _onFinish(index);\n    };\n\n    const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(1);\n            }\n        },\n        action: {\n            bind: getKeyboardControlBind(keyboardControls.action),\n            keyDown() {\n                if (!canAcceptAction()) {\n                    return;\n                }\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (!hasChoices()) return;\n                onSelect(selectedItem());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n    \n    const dialogControls = signal({\n        action: {\n            bind: getKeyboardControlBind(keyboardControls.action),\n            keyDown() {\n                if (!canAcceptAction()) {\n                    return;\n                }\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (hasChoices()) return;\n                _onFinish();\n            }\n        },\n    })\n\n    const faceSheet = (faceValue) => {\n        if (!faceValue || !faceValue.id) {\n            return undefined;\n        }\n        return {\n            definition: engine.getSpriteSheet(faceValue.id),\n            playing: faceValue.expression || \"default\",\n        };\n    }\n\n    mount((element) => {\n        return () => {\n            // Wait destroy is finished before start processing input\n            delay(() => {\n                engine.stopProcessingInput = false;\n            })\n        }\n  })\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"index.ce.js","names":[],"sources":["../../../../src/components/gui/dialogbox/index.ce"],"sourcesContent":["<DOMContainer width=\"100%\" height=\"100%\" controls={dialogControls}>\n    <div class=\"rpg-ui-dialog-layer\" click={closeDialogFromPointer}>\n        <button class=\"rpg-ui-close-button\" type=\"button\" title=\"Close\" aria-label=\"Close dialog\" click={closeDialogFromPointer}>x</button>\n        <div\n            class=\"rpg-ui-dialog-container\"\n            data-position={dialogPosition()}\n            data-full-width={isFullWidth() ? \"true\" : \"false\"}\n            data-has-face={hasFace() ? \"true\" : \"false\"}\n        >\n            <div class=\"rpg-ui-dialog rpg-anim-fade-in\" click={stopEvent}>\n                <div class=\"rpg-ui-dialog-body\">\n                   <div>\n                        @if (speakerName()) {\n                            <div class=\"rpg-ui-dialog-speaker\">{speakerName()}</div>\n                        }\n                        <div class=\"rpg-ui-dialog-content\">\n                            {displayMessage()}\n                        </div>\n                        @if (hasChoices()) {\n                            <Navigation tabindex={selectedItem} controls={controls}>\n                                <div class=\"rpg-ui-dialog-choices\">\n                                    @for ((choice,index) of dialogChoices()) {\n                                        <div\n                                            class=\"rpg-ui-dialog-choice\"\n                                            class={{active: selectedItem() === index}}\n                                            tabindex={index}\n                                            data-choice-index={index}\n                                            click={selectChoice(index)}\n                                        >{{ choice.text }}</div>\n                                    }\n                                </div>\n                            </Navigation>\n                        }\n                    </div>\n                    @if (hasFace()) {\n                        <div class=\"rpg-ui-dialog-face\">\n                            <DOMSprite\n                                sheet={faceSheet(dialogFace())}\n                                width=\"100%\"\n                                height=\"100%\"\n                                objectFit=\"contain\"\n                            />\n                        </div>\n                    }\n                </div>\n                @if (showIndicator) {\n                    <div class=\"rpg-ui-dialog-indicator\"></div>\n                }\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n    \n<script>\n    import { effect, signal, computed, createTabindexNavigator, mount } from \"canvasengine\";\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { delay } from \"@rpgjs/common\";\n    import { getKeyboardControlBind } from \"../../../services/actionInput\";\n\n    const engine = inject(RpgClientEngine);\n    const currentPlayer = engine.scene.currentPlayer\n    const keyboardControls = engine.globalConfig.keyboardControls;\n\n    engine.stopProcessingInput = true;\n\n    const selectedItem = signal(0)\n    const ACTION_OPEN_GUARD_MS = 150;\n    const openedAt = Date.now();\n\n    const {\n        data,\n        onFinish,\n        onInteraction,\n        guiOpenId\n    } = defineProps();\n\n    const dialogData = computed(() => data() || {});\n    const dialogChoices = computed(() => Array.isArray(dialogData().choices) ? dialogData().choices : []);\n    const message = computed(() => dialogData().message);\n    const speaker = computed(() => dialogData().speaker);\n    const position = computed(() => dialogData().position);\n    const typewriterEffect = computed(() => dialogData().typewriterEffect);\n    const fullWidth = computed(() => dialogData().fullWidth || false);\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const normalizeOpenId = (value) => {\n        const resolved = resolveProp(value);\n        return typeof resolved === \"string\" && resolved.length > 0 ? resolved : undefined;\n    };\n\n    const speakerName = computed(() => {\n        const value = resolveProp(speaker());\n        return value ? String(value) : \"\";\n    });\n\n    const dialogPosition = computed(() => resolveProp(position()) || \"bottom\");\n    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);\n    const dialogFace = computed(() => resolveProp(dialogData().face));\n    const hasFace = computed(() => {\n        const value = dialogFace();\n        return !!(value && value.id);\n    });\n\n    const displayMessage = signal(\"\");\n    const fullMessage = signal(\"\");\n    const isTyping = signal(false);\n    let typewriterTimer = null;\n    let rootElement = null;\n\n    mount((element) => {\n        rootElement = element;\n    });\n\n    const startTypewriter = (text) => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        displayMessage.set(\"\");\n        if (!text) return;\n        let index = 0;\n        isTyping.set(true);\n        typewriterTimer = setInterval(() => {\n            index += 1;\n            displayMessage.set(text.slice(0, index));\n            if (index >= text.length) {\n                clearInterval(typewriterTimer);\n                typewriterTimer = null;\n                isTyping.set(false);\n            }\n        }, 20);\n    };\n\n    const finishTyping = () => {\n        if (typewriterTimer) clearInterval(typewriterTimer);\n        typewriterTimer = null;\n        displayMessage.set(fullMessage());\n        isTyping.set(false);\n    };\n\n    effect(() => {\n        const text = resolveProp(message()) || \"\";\n        fullMessage.set(text);\n        const useTypewriter = resolveProp(typewriterEffect()) !== false;\n        if (!useTypewriter) {\n            finishTyping();\n            return;\n        }\n        startTypewriter(text);\n    });\n\n\n    const hasChoices = computed(() => dialogChoices().length > 0);\n    const showIndicator = computed(() => !hasChoices() && !isTyping());\n    const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');\n\n    function selectChoice(index) {\n        return function() {\n            selectedItem.set(index);\n            onSelect(index);\n        }\n    }\n\n    function _onFinish(value) {\n        if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));\n    }\n\n    const stopEvent = (event) => {\n        event?.stopPropagation?.();\n    };\n\n    const closeDialog = () => {\n        _onFinish();\n    };\n\n    const closeDialogFromPointer = (event) => {\n        stopEvent(event);\n        closeDialog();\n    };\n\n    const onSelect = (index) => {\n        _onFinish(index);\n    };\n\n    const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;\n\n    const controls = signal({\n        up: {\n            repeat: true,\n            bind: keyboardControls.up,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(-1);\n            }\n        },\n        down: {\n            repeat: true,\n            bind: keyboardControls.down,\n            throttle: 150,\n            keyDown() {\n                if (!hasChoices()) return;\n                nav.next(1);\n            }\n        },\n        action: {\n            bind: getKeyboardControlBind(keyboardControls.action),\n            keyDown() {\n                if (!canAcceptAction()) {\n                    return;\n                }\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (!hasChoices()) return;\n                onSelect(selectedItem());\n            }\n        },\n        gamepad: {\n            enabled: true\n        }\n    });\n    \n    const dialogControls = signal({\n        action: {\n            bind: getKeyboardControlBind(keyboardControls.action),\n            keyDown() {\n                if (!canAcceptAction()) {\n                    return;\n                }\n                if (isTyping()) {\n                    finishTyping();\n                    return;\n                }\n                if (hasChoices()) return;\n                _onFinish();\n            }\n        },\n    })\n\n    const faceSheet = (faceValue) => {\n        if (!faceValue || !faceValue.id) {\n            return undefined;\n        }\n        return {\n            definition: engine.getSpriteSheet(faceValue.id),\n            playing: faceValue.expression || \"default\",\n        };\n    }\n\n    mount((element) => {\n        return () => {\n            // Wait destroy is finished before start processing input\n            delay(() => {\n                engine.stopProcessingInput = false;\n            })\n        }\n  })\n</script>\n"],"mappings":"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"}

package/dist/components/gui/hud/hud.ce.js

@@ -39,8 +39,8 @@ function component($$props) {
 		attrs: { class: "rpg-avatar-face" }
 	}, h(DOMSprite, {
 		sheet: computed(() => faceSheet(face())),
-		width: 64,
-		height: 64,
+		width: "100%",
+		height: "100%",
 		objectFit: "contain"
 	}))), h(DOMElement, {
 		element: "div",

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

@@ -1 +1 @@
-{"version":3,"file":"hud.ce.js","names":[],"sources":["../../../../src/components/gui/hud/hud.ce"],"sourcesContent":["<DOMContainer>\n    <div class=\"rpg-hud\">\n        <div class=\"rpg-avatar\">\n            @if (hasFace()) {\n                <div class=\"rpg-avatar-face\">\n                    <DOMSprite \n                        sheet={faceSheet(face())} \n                        width={64} \n                        height={64} \n                        objectFit=\"contain\" \n                    />\n                </div>\n            }\n            <div class=\"rpg-avatar-level\">{{ level() }}</div>\n        </div>\n        <div class=\"rpg-status-bars\">\n            <div class=\"rpg-bar-container\">\n                <span class=\"rpg-bar-text\">HP {{ hp() }}/{{ hpMax() }}</span>\n                <div class=\"rpg-bar-fill health\" style={{width: percentHp}}></div>\n            </div>\n            <div class=\"rpg-bar-container\">\n                <span class=\"rpg-bar-text\">SP {{ sp() }}/{{ spMax() }}</span>\n                <div class=\"rpg-bar-fill mana\" style={{width: percentSp}}></div>\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n\n<script>\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { computed } from \"canvasengine\";\n    import { getEntityProp } from \"../../../utils/getEntityProp\";\n\n    const engine = inject(RpgClientEngine)\n    const currentPlayer = engine.scene.currentPlayer\n    const { data } = defineProps();\n    const { faceset } = data();\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const face = computed(() => resolveProp(data().faceset));\n\n    const hasFace = computed(() => {\n        const value = face();\n        return !!(value && value.id);\n    });\n    const faceSheet = (faceValue) => ({\n        definition: engine.getSpriteSheet(faceValue.id),\n        playing: faceValue.expression || \"default\",\n    });\n    const hp = getEntityProp(currentPlayer, \"hp\")\n    const hpMax = getEntityProp(currentPlayer, \"params.maxHp\")\n    const percentHp = computed(() => (hp() / hpMax() * 100) + '%')\n\n    const sp = getEntityProp(currentPlayer, \"sp\")\n    const spMax = getEntityProp(currentPlayer, \"params.maxSp\")\n    const percentSp = computed(() => (sp() / spMax() * 100) + '%')\n\n    const level = getEntityProp(currentPlayer, \"level\")\n</script>\n    \n"],"mappings":";;;;;AAWM,SAAS,UAAM,SAAA;CACT,SAAA,OAAA;CACJ,MAAK,cAAe,eAAe,OAAO;CACrC,eAAA,OAAA;CACL,MAAK,SAAU,OAAO,eAAM;CACpC,MAAM,gBAAgB,OAAM,MAAI;CAChC,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,EAAE,YAAY,KAAC;CACrB,MAAM,eAAW,UAAA,OAAA,UAAA,aAAA,MAAA,IAAA;CACjB,MAAM,OAAO,eAAe,YAAI,KAAU,EAAA,OAAA,CAAA;CAC1C,MAAM,UAAU,eAAa;EACzB,MAAM,QAAO,KAAI;EACjB,OAAO,CAAC,EAAE,SAAG,MAAA;CACjB,CAAC;CACD,MAAM,aAAG,eAAA;EACP,YAAY,OAAA,eAAA,UAAA,EAAA;;CAEd;CACA,MAAI,KAAO,cAAW,eAAe,IAAK;CAC1C,MAAI,QAAS,cAAe,eAAe,cAAG;CAC9C,MAAI,YAAS,eAAiB,GAAA,IAAA,MAAa,IAAA,MAAA,GAAA;CAC3C,MAAI,KAAO,cAAE,eAA2B,IAAI;;CAE5C,MAAI,YAAc,eAAQ,GAAA,IAAe,MAAA,IAAA,MAAA,GAAA;CACzC,MAAI,QAAM,cAAgB,eAAa,OAAA;CAEnC,OADgB,EAAC,cAAa,MAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,UAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,aAAA;CAAA,GAAA,CAAA,KAAA,eAAA,QAAA,CAAA,SAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kBAAA;CAAA,GAAA,EAAA,WAAA;EAAA,OAAA,eAAA,UAAA,KAAA,CAAA,CAAA;EAAA,OAAA;EAAA,QAAA;EAAA,WAAA;CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,mBAAA;EAAA,aAAA,eAAA,MAAA,CAAA;CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kBAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,oBAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,eAAA;EAAA,aAAA,eAAA,QAAA,GAAA,IAAA,MAAA,MAAA,CAAA;CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,OAAA,EAAA,OAAA,UAAA;EAAA;CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,oBAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,eAAA;EAAA,aAAA,eAAA,QAAA,GAAA,IAAA,MAAA,MAAA,CAAA;CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,OAAA,EAAA,OAAA,UAAA;EAAA;CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACf;;AAGf,IAAM,iBAAmB"}
+{"version":3,"file":"hud.ce.js","names":[],"sources":["../../../../src/components/gui/hud/hud.ce"],"sourcesContent":["<DOMContainer>\n    <div class=\"rpg-hud\">\n        <div class=\"rpg-avatar\">\n            @if (hasFace()) {\n                <div class=\"rpg-avatar-face\">\n                    <DOMSprite \n                        sheet={faceSheet(face())} \n                        width=\"100%\" \n                        height=\"100%\" \n                        objectFit=\"contain\" \n                    />\n                </div>\n            }\n            <div class=\"rpg-avatar-level\">{{ level() }}</div>\n        </div>\n        <div class=\"rpg-status-bars\">\n            <div class=\"rpg-bar-container\">\n                <span class=\"rpg-bar-text\">HP {{ hp() }}/{{ hpMax() }}</span>\n                <div class=\"rpg-bar-fill health\" style={{width: percentHp}}></div>\n            </div>\n            <div class=\"rpg-bar-container\">\n                <span class=\"rpg-bar-text\">SP {{ sp() }}/{{ spMax() }}</span>\n                <div class=\"rpg-bar-fill mana\" style={{width: percentSp}}></div>\n            </div>\n        </div>\n    </div>\n</DOMContainer>\n\n<script>\n    import { inject } from \"../../../core/inject\";\n    import { RpgClientEngine } from \"../../../RpgClientEngine\";\n    import { computed } from \"canvasengine\";\n    import { getEntityProp } from \"../../../utils/getEntityProp\";\n\n    const engine = inject(RpgClientEngine)\n    const currentPlayer = engine.scene.currentPlayer\n    const { data } = defineProps();\n    const { faceset } = data();\n\n    const resolveProp = (value) => typeof value === \"function\" ? value() : value;\n    const face = computed(() => resolveProp(data().faceset));\n\n    const hasFace = computed(() => {\n        const value = face();\n        return !!(value && value.id);\n    });\n    const faceSheet = (faceValue) => ({\n        definition: engine.getSpriteSheet(faceValue.id),\n        playing: faceValue.expression || \"default\",\n    });\n    const hp = getEntityProp(currentPlayer, \"hp\")\n    const hpMax = getEntityProp(currentPlayer, \"params.maxHp\")\n    const percentHp = computed(() => (hp() / hpMax() * 100) + '%')\n\n    const sp = getEntityProp(currentPlayer, \"sp\")\n    const spMax = getEntityProp(currentPlayer, \"params.maxSp\")\n    const percentSp = computed(() => (sp() / spMax() * 100) + '%')\n\n    const level = getEntityProp(currentPlayer, \"level\")\n</script>\n    \n"],"mappings":";;;;;AAWM,SAAS,UAAM,SAAA;CACT,SAAA,OAAA;CACJ,MAAK,cAAe,eAAe,OAAO;CACrC,eAAA,OAAA;CACL,MAAK,SAAU,OAAO,eAAM;CACpC,MAAM,gBAAgB,OAAM,MAAI;CAChC,MAAM,EAAE,SAAS,YAAY;CAC7B,MAAM,EAAE,YAAY,KAAC;CACrB,MAAM,eAAW,UAAA,OAAA,UAAA,aAAA,MAAA,IAAA;CACjB,MAAM,OAAO,eAAe,YAAI,KAAU,EAAA,OAAA,CAAA;CAC1C,MAAM,UAAU,eAAa;EACzB,MAAM,QAAO,KAAI;EACjB,OAAO,CAAC,EAAE,SAAG,MAAA;CACjB,CAAC;CACD,MAAM,aAAG,eAAA;EACP,YAAY,OAAA,eAAA,UAAA,EAAA;;CAEd;CACA,MAAI,KAAO,cAAW,eAAe,IAAK;CAC1C,MAAI,QAAS,cAAe,eAAe,cAAG;CAC9C,MAAI,YAAS,eAAiB,GAAA,IAAA,MAAa,IAAA,MAAA,GAAA;CAC3C,MAAI,KAAO,cAAE,eAA2B,IAAI;;CAE5C,MAAI,YAAc,eAAQ,GAAA,IAAe,MAAA,IAAA,MAAA,GAAA;CACzC,MAAI,QAAM,cAAgB,eAAa,OAAA;CAEnC,OADgB,EAAC,cAAa,MAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,UAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,aAAA;CAAA,GAAA,CAAA,KAAA,eAAA,QAAA,CAAA,SAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kBAAA;CAAA,GAAA,EAAA,WAAA;EAAA,OAAA,eAAA,UAAA,KAAA,CAAA,CAAA;EAAA,OAAA;EAAA,QAAA;EAAA,WAAA;CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,mBAAA;EAAA,aAAA,eAAA,MAAA,CAAA;CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,kBAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,oBAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,eAAA;EAAA,aAAA,eAAA,QAAA,GAAA,IAAA,MAAA,MAAA,CAAA;CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,OAAA,EAAA,OAAA,UAAA;EAAA;CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,oBAAA;CAAA,GAAA,CAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA,EAAA,OAAA,eAAA;EAAA,aAAA,eAAA,QAAA,GAAA,IAAA,MAAA,MAAA,CAAA;CAAA,CAAA,GAAA,EAAA,YAAA;EAAA,SAAA;EAAA,OAAA;GAAA,OAAA;GAAA,OAAA,EAAA,OAAA,UAAA;EAAA;CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACf;;AAGf,IAAM,iBAAmB"}

package/dist/components/gui/menu/items-menu.ce.js

@@ -105,6 +105,13 @@ function component($$props) {
 			confirmItem.set(null);
 		});
 	};
+	const stopEvent = (event) => {
+		event?.stopPropagation?.();
+	};
+	const cancelConfirmFromPointer = (event) => {
+		stopEvent(event);
+		cancelConfirm();
+	};
 	function confirmSelect(index) {
 		return function() {
 			selectedConfirm.set(index);
@@ -296,10 +303,26 @@ function component($$props) {
 		})])))])]),
 		cond(confirmOpen, () => h(DOMElement, {
 			element: "div",
-			attrs: { class: "rpg-ui-menu-confirm" }
-		}, h(DOMElement, {
+			attrs: {
+				class: "rpg-ui-menu-confirm",
+				click: cancelConfirmFromPointer
+			}
+		}, [h(DOMElement, {
+			element: "button",
+			attrs: {
+				class: "rpg-ui-close-button",
+				type: "button",
+				title: "Close",
+				"aria-label": "Close confirmation",
+				click: cancelConfirmFromPointer
+			},
+			textContent: "x"
+		}), h(DOMElement, {
 			element: "div",
-			attrs: { class: "rpg-ui-menu-confirm-card" }
+			attrs: {
+				class: "rpg-ui-menu-confirm-card",
+				click: stopEvent
+			}
 		}, [h(DOMElement, {
 			element: "div",
 			attrs: { class: "rpg-ui-menu-confirm-title" },
@@ -319,7 +342,7 @@ function component($$props) {
 				click: confirmSelect(index)
 			},
 			textContent: option.label
-		}))))])))
+		}))))])]))
 	]));
 }
 var __ce_component = component;

package/dist/components/gui/menu/items-menu.ce.js.map

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

package/dist/components/gui/menu/main-menu.ce.js

@@ -112,6 +112,24 @@ function component($$props) {
 			view.set("menu");
 		});
 	};
+	const stopEvent = (event) => {
+		event?.stopPropagation?.();
+	};
+	const closeSaveOverlayFromPointer = (event) => {
+		stopEvent(event);
+		closeSaveOverlay();
+	};
+	const closeMenu = () => {
+		if (saveOverlay()) {
+			closeSaveOverlay();
+			return;
+		}
+		onFinish();
+	};
+	const closeMenuFromPointer = (event) => {
+		stopEvent(event);
+		closeMenu();
+	};
 	const confirmExit = () => {
 		if (onInteraction) onInteraction("exit");
 	};
@@ -210,11 +228,18 @@ function component($$props) {
 		gamepad: { enabled: true }
 	});
 	mount((element) => {
+		const inputLockToken = {};
+		const previousStopProcessingInput = engine.stopProcessingInput;
+		const previousGamePause = engine.gamePause();
+		engine.__rpgMainMenuInputLock = inputLockToken;
+		engine.stopProcessingInput = true;
 		engine.gamePause.set(true);
 		return () => {
 			delay(() => {
-				engine.stopProcessingInput = false;
-				engine.gamePause.set(false);
+				if (engine.__rpgMainMenuInputLock !== inputLockToken) return;
+				engine.__rpgMainMenuInputLock = void 0;
+				engine.stopProcessingInput = previousStopProcessingInput;
+				engine.gamePause.set(previousGamePause);
 			});
 		};
 	});
@@ -223,177 +248,207 @@ function component($$props) {
 		height: "100%",
 		controls: menuControls
 	}, h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu rpg-anim-fade-in" }
-	}, [h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-layout" }
-	}, [h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel" }
-	}, [h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-menu-header" },
-		textContent: computed(() => t("rpg.menu.title"))
-	}), h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-list" }
-	}, loop(computed(() => menuEntries()), (entry, index) => h(DOMElement, {
 		element: "div",
 		attrs: {
-			class: ["rpg-ui-menu-item", computed(() => ({ disabled: isMenuDisabled(entry) }))],
-			"data-selected": computed(() => selectedMenu() === index ? "true" : "false"),
-			tabindex: index,
-			click: selectMenu(index)
-		},
-		textContent: entry.label
-	})))]), h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-right" }
+			class: "rpg-ui-main-menu rpg-anim-fade-in",
+			click: closeMenuFromPointer
+		}
 	}, [
-		cond(computed(() => view() === "menu"), () => h(DOMElement, {
+		h(DOMElement, {
 			element: "div",
-			attrs: { class: "rpg-ui-panel" }
+			attrs: { class: "rpg-ui-main-menu-backdrop" }
+		}),
+		h(DOMElement, {
+			element: "button",
+			attrs: {
+				class: "rpg-ui-close-button",
+				type: "button",
+				title: "Close",
+				"aria-label": "Close menu",
+				click: closeMenuFromPointer
+			},
+			textContent: "x"
+		}),
+		h(DOMElement, {
+			element: "div",
+			attrs: {
+				class: "rpg-ui-main-menu-layout",
+				click: stopEvent
+			}
+		}, [h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel" }
+		}, [h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-menu-header" },
+			textContent: computed(() => t("rpg.menu.title"))
+		}), h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-main-menu-list" }
+		}, loop(computed(() => menuEntries()), (entry, index) => h(DOMElement, {
+			element: "div",
+			attrs: {
+				class: ["rpg-ui-menu-item", computed(() => ({ disabled: isMenuDisabled(entry) }))],
+				"data-selected": computed(() => selectedMenu() === index ? "true" : "false"),
+				tabindex: index,
+				click: selectMenu(index)
+			},
+			textContent: entry.label
+		})))]), h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-main-menu-right" }
 		}, [
-			h(DOMElement, {
-				element: "div",
-				attrs: { class: "rpg-ui-main-menu-section-title" },
-				textContent: computed(() => t("rpg.menu.status"))
-			}),
-			h(DOMElement, {
+			cond(computed(() => view() === "menu"), () => h(DOMElement, {
 				element: "div",
-				attrs: { class: "rpg-ui-main-menu-status-card" }
+				attrs: { class: "rpg-ui-panel" }
 			}, [
 				h(DOMElement, {
 					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-block" }
-				}, [h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-label" },
-					textContent: computed(() => t("rpg.menu.level"))
-				}), h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-value" },
-					textContent: computed(() => level())
-				})]),
+					attrs: { class: "rpg-ui-main-menu-section-title" },
+					textContent: computed(() => t("rpg.menu.status"))
+				}),
 				h(DOMElement, {
 					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-block" }
-				}, [h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-label" },
-					textContent: computed(() => t("rpg.menu.gold"))
-				}), h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-value" },
-					textContent: computed(() => gold())
-				})]),
+					attrs: { class: "rpg-ui-main-menu-status-card" }
+				}, [
+					h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-block" }
+					}, [h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-label" },
+						textContent: computed(() => t("rpg.menu.level"))
+					}), h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-value" },
+						textContent: computed(() => level())
+					})]),
+					h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-block" }
+					}, [h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-label" },
+						textContent: computed(() => t("rpg.menu.gold"))
+					}), h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-value" },
+						textContent: computed(() => gold())
+					})]),
+					h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-block" }
+					}, [h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-label" },
+						textContent: computed(() => "HP " + hp() + "/" + hpMax())
+					}), h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-bar" }
+					}, h(DOMElement, {
+						element: "div",
+						attrs: {
+							class: "rpg-ui-main-menu-status-bar-fill hp",
+							style: { width: hpPercent }
+						}
+					}))]),
+					h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-block" }
+					}, [h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-label" },
+						textContent: computed(() => "SP " + sp() + "/" + spMax())
+					}), h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-bar" }
+					}, h(DOMElement, {
+						element: "div",
+						attrs: {
+							class: "rpg-ui-main-menu-status-bar-fill sp",
+							style: { width: spPercent }
+						}
+					}))]),
+					h(DOMElement, {
+						element: "div",
+						attrs: {
+							class: "rpg-ui-main-menu-status-block",
+							style: { gridColumn: "span 2" }
+						}
+					}, [h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-label" },
+						textContent: computed(() => "EXP " + exp() + "/" + expForNextlevel())
+					}), h(DOMElement, {
+						element: "div",
+						attrs: { class: "rpg-ui-main-menu-status-bar" }
+					}, h(DOMElement, {
+						element: "div",
+						attrs: {
+							class: "rpg-ui-main-menu-status-bar-fill exp",
+							style: { width: expPercent }
+						}
+					}))])
+				]),
 				h(DOMElement, {
 					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-block" }
-				}, [h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-label" },
-					textContent: computed(() => "HP " + hp() + "/" + hpMax())
-				}), h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-bar" }
-				}, h(DOMElement, {
-					element: "div",
-					attrs: {
-						class: "rpg-ui-main-menu-status-bar-fill hp",
-						style: { width: hpPercent }
-					}
-				}))]),
+					attrs: { class: "rpg-ui-main-menu-section-title" },
+					textContent: computed(() => t("rpg.menu.parameters"))
+				}),
 				h(DOMElement, {
 					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-block" }
-				}, [h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-label" },
-					textContent: computed(() => "SP " + sp() + "/" + spMax())
-				}), h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-bar" }
-				}, h(DOMElement, {
-					element: "div",
-					attrs: {
-						class: "rpg-ui-main-menu-status-bar-fill sp",
-						style: { width: spPercent }
-					}
-				}))]),
-				h(DOMElement, {
+					attrs: { class: "rpg-ui-main-menu-params" }
+				}, loop(paramsList, (param, index) => h(DOMElement, {
 					element: "div",
-					attrs: {
-						class: "rpg-ui-main-menu-status-block",
-						style: { gridColumn: "span 2" }
-					}
+					attrs: { class: "rpg-ui-main-menu-param" }
 				}, [h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-label" },
-					textContent: computed(() => "EXP " + exp() + "/" + expForNextlevel())
+					element: "span",
+					textContent: param.label
 				}), h(DOMElement, {
-					element: "div",
-					attrs: { class: "rpg-ui-main-menu-status-bar" }
-				}, h(DOMElement, {
-					element: "div",
-					attrs: {
-						class: "rpg-ui-main-menu-status-bar-fill exp",
-						style: { width: expPercent }
-					}
-				}))])
-			]),
-			h(DOMElement, {
-				element: "div",
-				attrs: { class: "rpg-ui-main-menu-section-title" },
-				textContent: computed(() => t("rpg.menu.parameters"))
-			}),
-			h(DOMElement, {
-				element: "div",
-				attrs: { class: "rpg-ui-main-menu-params" }
-			}, loop(paramsList, (param, index) => h(DOMElement, {
-				element: "div",
-				attrs: { class: "rpg-ui-main-menu-param" }
-			}, [h(DOMElement, {
-				element: "span",
-				textContent: param.label
-			}), h(DOMElement, {
-				element: "span",
-				textContent: param.value
-			})])))
-		])),
-		cond(computed(() => view() === "items"), () => h(__ce_component$2, {
-			data,
-			onInteraction,
-			onBack: goBack
-		})),
-		cond(computed(() => view() === "skills"), () => h(__ce_component$3, {
-			data,
-			onBack: goBack
-		})),
-		cond(computed(() => view() === "equip"), () => h(__ce_component$4, {
-			data,
-			onInteraction,
-			onBack: goBack
-		})),
-		cond(computed(() => view() === "options"), () => h(__ce_component$5, { onBack: goBack })),
-		cond(computed(() => view() === "exit"), () => h(__ce_component$6, {
-			onConfirm: confirmExit,
-			onBack: goBack
-		}))
-	])]), cond(saveOverlay, () => h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-overlay" }
-	}, [h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-overlay-backdrop" }
-	}), h(DOMElement, {
-		element: "div",
-		attrs: { class: "rpg-ui-main-menu-overlay-content" }
-	}, h(__ce_component$1, {
-		data: saveLoadData,
-		onFinish: closeSaveOverlay
-	}))]))]));
+					element: "span",
+					textContent: param.value
+				})])))
+			])),
+			cond(computed(() => view() === "items"), () => h(__ce_component$2, {
+				data,
+				onInteraction,
+				onBack: goBack
+			})),
+			cond(computed(() => view() === "skills"), () => h(__ce_component$3, {
+				data,
+				onBack: goBack
+			})),
+			cond(computed(() => view() === "equip"), () => h(__ce_component$4, {
+				data,
+				onInteraction,
+				onBack: goBack
+			})),
+			cond(computed(() => view() === "options"), () => h(__ce_component$5, { onBack: goBack })),
+			cond(computed(() => view() === "exit"), () => h(__ce_component$6, {
+				onConfirm: confirmExit,
+				onBack: goBack
+			}))
+		])]),
+		cond(saveOverlay, () => h(DOMElement, {
+			element: "div",
+			attrs: { class: "rpg-ui-main-menu-overlay" }
+		}, [h(DOMElement, {
+			element: "div",
+			attrs: {
+				class: "rpg-ui-main-menu-overlay-backdrop",
+				click: closeSaveOverlayFromPointer
+			}
+		}), h(DOMElement, {
+			element: "div",
+			attrs: {
+				class: "rpg-ui-main-menu-overlay-content",
+				click: stopEvent
+			}
+		}, h(__ce_component$1, {
+			data: saveLoadData,
+			onFinish: closeSaveOverlay
+		}))]))
+	]));
 }
 var __ce_component = component;
 //#endregion