@rpgjs/client 5.0.0-beta.23 → 5.0.0-beta.25

package/src/components/gui/dialogbox/index.ce

@@ -1,49 +1,61 @@
 <DOMContainer width="100%" height="100%" controls={dialogControls}>
-    <div
-        class="rpg-ui-dialog-container"
-        data-position={dialogPosition()}
-        data-full-width={isFullWidth() ? "true" : "false"}
-        data-has-face={hasFace() ? "true" : "false"}
-    >
-        <div class="rpg-ui-dialog rpg-anim-fade-in">
-            <div class="rpg-ui-dialog-body">
-               <div>
-                    @if (speakerName()) {
-                        <div class="rpg-ui-dialog-speaker">{speakerName()}</div>
-                    }
-                    <div class="rpg-ui-dialog-content">
-                        {displayMessage()}
+    <div class="rpg-ui-dialog-layer" click={closeDialogFromPointer}>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close dialog" click={closeDialogFromPointer}>x</button>
+        <div
+            class="rpg-ui-dialog-container"
+            data-position={dialogPosition()}
+            data-full-width={isFullWidth() ? "true" : "false"}
+            data-has-face={hasFace() ? "true" : "false"}
+        >
+            <div class="rpg-ui-dialog rpg-anim-fade-in" click={stopEvent}>
+                <div class="rpg-ui-dialog-body">
+                   <div>
+                        @if (speakerName()) {
+                            <div class="rpg-ui-dialog-speaker">{speakerName()}</div>
+                        }
+                        <div class="rpg-ui-dialog-content">
+                            {displayMessage()}
+                        </div>
+                        @if (hasChoices()) {
+                            <Navigation tabindex={selectedItem} controls={controls}>
+                                <div class="rpg-ui-dialog-choices">
+                                    @for ((choice,index) of dialogChoices()) {
+                                        <div
+                                            class="rpg-ui-dialog-choice"
+                                            class={{active: selectedItem() === index}}
+                                            tabindex={index}
+                                            data-choice-index={index}
+                                            click={selectChoice(index)}
+                                        >{{ choice.text }}</div>
+                                    }
+                                </div>
+                            </Navigation>
+                        }
+                        @if (hasInput()) {
+                            <InputField
+                                data={dialogInput}
+                                layout="dialog"
+                                showMessage={false}
+                                submit={submitInput}
+                                cancel={cancelInput}
+                            />
+                        }
                     </div>
-                    @if (hasChoices()) {
-                        <Navigation tabindex={selectedItem} controls={controls}>
-                            <div class="rpg-ui-dialog-choices">
-                                @for ((choice,index) of dialogChoices()) {
-                                    <div
-                                        class="rpg-ui-dialog-choice"
-                                        class={{active: selectedItem() === index}}
-                                        tabindex={index}
-                                        data-choice-index={index}
-                                        click={selectChoice(index)}
-                                    >{{ choice.text }}</div>
-                                }
-                            </div>
-                        </Navigation>
+                    @if (hasFace()) {
+                        <div class="rpg-ui-dialog-face">
+                            <DOMSprite
+                                sheet={faceSheet(dialogFace())}
+                                width="100%"
+                                height="100%"
+                                objectFit="contain"
+                            />
+                        </div>
                     }
                 </div>
-                @if (hasFace()) {
-                    <div class="rpg-ui-dialog-face">
-                        <DOMSprite
-                            sheet={faceSheet(dialogFace())}
-                            width="100%"
-                            height="100%"
-                            objectFit="contain"
-                        />
-                    </div>
+                @if (showIndicator) {
+                    <div class="rpg-ui-dialog-indicator"></div>
                 }
             </div>
-            @if (showIndicator) {
-                <div class="rpg-ui-dialog-indicator"></div>
-            }
         </div>
     </div>
 </DOMContainer>
@@ -54,6 +66,7 @@
     import { RpgClientEngine } from "../../../RpgClientEngine";
     import { delay } from "@rpgjs/common";
     import { getKeyboardControlBind } from "../../../services/actionInput";
+    import InputField from "../input-field.ce";
 
     const engine = inject(RpgClientEngine);
     const currentPlayer = engine.scene.currentPlayer
@@ -79,6 +92,8 @@
     const position = computed(() => dialogData().position);
     const typewriterEffect = computed(() => dialogData().typewriterEffect);
     const fullWidth = computed(() => dialogData().fullWidth || false);
+    const dialogInput = computed(() => dialogData().input || null);
+    const hasInput = computed(() => !!dialogInput());
 
     const resolveProp = (value) => typeof value === "function" ? value() : value;
     const normalizeOpenId = (value) => {
@@ -146,7 +161,7 @@
 
 
     const hasChoices = computed(() => dialogChoices().length > 0);
-    const showIndicator = computed(() => !hasChoices() && !isTyping());
+    const showIndicator = computed(() => !hasChoices() && !hasInput() && !isTyping());
     const nav = createTabindexNavigator(selectedItem, { count: () => dialogChoices().length }, 'wrap');
 
     function selectChoice(index) {
@@ -160,10 +175,35 @@
         if (onFinish) onFinish(value, normalizeOpenId(guiOpenId));
     }
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const closeDialog = () => {
+        if (hasInput()) {
+            onInteraction?.("cancel");
+            return;
+        }
+        _onFinish();
+    };
+
+    const closeDialogFromPointer = (event) => {
+        stopEvent(event);
+        closeDialog();
+    };
+
     const onSelect = (index) => {
         _onFinish(index);
     };
 
+    const submitInput = (payload) => {
+        onInteraction?.("submit", payload);
+    };
+
+    const cancelInput = () => {
+        onInteraction?.("cancel");
+    };
+
     const canAcceptAction = () => Date.now() - openedAt >= ACTION_OPEN_GUARD_MS;
 
     const controls = signal({
@@ -215,6 +255,7 @@
                     finishTyping();
                     return;
                 }
+                if (hasInput()) return;
                 if (hasChoices()) return;
                 _onFinish();
             }

package/src/components/gui/hud/hud.ce

@@ -5,8 +5,8 @@
                 <div class="rpg-avatar-face">
                     <DOMSprite 
                         sheet={faceSheet(face())} 
-                        width={64} 
-                        height={64} 
+                        width="100%" 
+                        height="100%" 
                         objectFit="contain" 
                     />
                 </div>

package/src/components/gui/index.ts

@@ -12,6 +12,8 @@ import ExitMenuComponent from "./menu/exit-menu.ce";
 import NotificationComponent from "./notification/notification.ce";
 import TitleScreenComponent from "./title-screen.ce";
 import GameoverComponent from "./gameover.ce";
+import InputComponent from "./input.ce";
+import InputFieldComponent from "./input-field.ce";
 
 export {
     DialogboxComponent,
@@ -27,5 +29,7 @@ export {
     ExitMenuComponent,
     NotificationComponent,
     TitleScreenComponent,
-    GameoverComponent
+    GameoverComponent,
+    InputComponent,
+    InputFieldComponent
 }

package/src/components/gui/input-field.ce

@@ -0,0 +1,106 @@
+<form
+  class="rpg-ui-input-form"
+  data-layout={layout()}
+  submit={submitForm}
+  keydown={handleKeydown}
+>
+  @if (showMessage()) {
+    <label class="rpg-ui-input-message" for={fieldId()}>{formData().message}</label>
+  }
+  @if (formData().control === "textarea") {
+    <textarea
+      id={fieldId()}
+      class="rpg-ui-input rpg-ui-input-dialog-field"
+      name="value"
+      value={value}
+      placeholder={formData().placeholder || ""}
+      rows={formData().rows || 4}
+      minlength={formData().minLength}
+      maxlength={formData().maxLength}
+      aria-required={formData().required ? "true" : "false"}
+    ></textarea>
+  }
+  @else {
+    <input
+      id={fieldId()}
+      class="rpg-ui-input rpg-ui-input-dialog-field"
+      name="value"
+      type={formData().type || "text"}
+      value={value}
+      placeholder={formData().placeholder || ""}
+      min={formData().min}
+      max={formData().max}
+      step={formData().step}
+      minlength={formData().minLength}
+      maxlength={formData().maxLength}
+      aria-required={formData().required ? "true" : "false"}
+    />
+  }
+  @if (errorText()) {
+    <div class="rpg-ui-input-error" role="alert">{errorText()}</div>
+  }
+  <div class="rpg-ui-input-actions">
+    @if (showCancelButton()) {
+      <button class="rpg-ui-btn rpg-ui-input-button rpg-ui-input-button-cancel" type="button" click={cancelForm}>
+        {formData().cancelText || t("rpg.input.cancel")}
+      </button>
+    }
+    <button
+      class="rpg-ui-btn rpg-ui-input-button rpg-ui-input-button-confirm"
+      data-variant="primary"
+      type="submit"
+    >
+      {formData().confirmText || t("rpg.input.confirm")}
+    </button>
+  </div>
+</form>
+
+<script>
+  import { computed, effect, signal } from "canvasengine";
+  import { inject } from "../../core/inject";
+  import { RpgClientEngine } from "../../RpgClientEngine";
+
+  const engine = inject(RpgClientEngine);
+  const { t } = engine.i18n();
+  const { data, layout, showMessage } = defineProps({
+    layout: "standalone",
+    showMessage: true,
+  });
+  const { submit, cancel } = defineEmits();
+  const formData = computed(() => data() || {});
+  const value = signal(String(formData().defaultValue ?? ""));
+  const fieldId = computed(() => `rpg-input-value-${layout()}`);
+  const errorText = computed(() => formData().errorKey
+    ? t(formData().errorKey, formData().errorParams || {})
+    : ""
+  );
+  const showCancelButton = computed(() => formData().cancelButton !== false);
+  let focused = false;
+
+  function submitForm(event, collectedData) {
+    const submittedValue = collectedData && Object.prototype.hasOwnProperty.call(collectedData, "value")
+      ? collectedData.value
+      : event?.currentTarget?.elements?.value?.value ?? value();
+    value.set(String(submittedValue ?? ""));
+    submit({ value: submittedValue ?? "" });
+  }
+
+  function cancelForm() {
+    cancel();
+  }
+
+  function handleKeydown(event) {
+    if (event?.key !== "Escape") return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    cancelForm();
+  }
+
+  effect(() => {
+    if (focused) return;
+    focused = true;
+    setTimeout(() => {
+      document.getElementById(fieldId())?.focus?.();
+    });
+  });
+</script>

package/src/components/gui/input.ce

@@ -0,0 +1,26 @@
+<DOMContainer width="100%" height="100%">
+  <div class="rpg-ui-input-layer">
+    <div class="rpg-ui-input-dialog rpg-ui-window rpg-anim-fade-in">
+      @if (title()) {
+        <div class="rpg-ui-window-title">{title()}</div>
+      }
+      <InputField data={data} layout="standalone" submit={submit} cancel={cancel} />
+    </div>
+  </div>
+</DOMContainer>
+
+<script>
+  import { computed } from "canvasengine";
+  import InputField from "./input-field.ce";
+
+  const { data, onInteraction } = defineProps();
+  const title = computed(() => data().title || "");
+
+  function submit(payload) {
+    onInteraction?.("submit", payload);
+  }
+
+  function cancel() {
+    onInteraction?.("cancel");
+  }
+</script>

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

@@ -63,8 +63,9 @@
             </div>
         </div>
         @if (confirmOpen) {
-            <div class="rpg-ui-menu-confirm">
-                <div class="rpg-ui-menu-confirm-card">
+            <div class="rpg-ui-menu-confirm" click={cancelConfirmFromPointer}>
+                <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close confirmation" click={cancelConfirmFromPointer}>x</button>
+                <div class="rpg-ui-menu-confirm-card" click={stopEvent}>
                     <div class="rpg-ui-menu-confirm-title">{t("rpg.menu.use")} {confirmItem()?.name}?</div>
                     <Navigation tabindex={selectedConfirm} controls={confirmControls}>
                         <div class="rpg-ui-menu-confirm-actions">
@@ -197,6 +198,15 @@
         });
     };
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const cancelConfirmFromPointer = (event) => {
+        stopEvent(event);
+        cancelConfirm();
+    };
+
     function confirmSelect(index) {
         return function() {
             selectedConfirm.set(index);

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

@@ -1,6 +1,8 @@
 <DOMContainer width="100%" height="100%" controls={menuControls}>
-    <div class="rpg-ui-main-menu rpg-anim-fade-in">
-        <div class="rpg-ui-main-menu-layout">
+    <div class="rpg-ui-main-menu rpg-anim-fade-in" click={closeMenuFromPointer}>
+        <div class="rpg-ui-main-menu-backdrop"></div>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close menu" click={closeMenuFromPointer}>x</button>
+        <div class="rpg-ui-main-menu-layout" click={stopEvent}>
             <div class="rpg-ui-main-menu-left rpg-ui-menu rpg-ui-panel">
                 <div class="rpg-ui-menu-header">{t("rpg.menu.title")}</div>
                 <div class="rpg-ui-main-menu-list">
@@ -77,8 +79,8 @@
         </div>
         @if (saveOverlay) {
             <div class="rpg-ui-main-menu-overlay">
-                <div class="rpg-ui-main-menu-overlay-backdrop"></div>
-                <div class="rpg-ui-main-menu-overlay-content">
+                <div class="rpg-ui-main-menu-overlay-backdrop" click={closeSaveOverlayFromPointer}></div>
+                <div class="rpg-ui-main-menu-overlay-content" click={stopEvent}>
                     <SaveLoadComponent
                         data={saveLoadData}
                         onFinish={closeSaveOverlay}
@@ -202,6 +204,28 @@
         });
     };
 
+    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");
     };
@@ -285,11 +309,18 @@
     });
 
     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 = undefined;
+                engine.stopProcessingInput = previousStopProcessingInput;
+                engine.gamePause.set(previousGamePause);
             });
         }
     });

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

@@ -1,35 +1,38 @@
 <DOMContainer width="100%" height="100%">
-    <div class="rpg-ui-save-load rpg-anim-fade-in">
-        <div class="rpg-ui-save-load-header">
-            <div class="rpg-ui-save-load-title">{title()}</div>
-            <div class="rpg-ui-save-load-subtitle">{subtitle()}</div>
-        </div>
-        <Navigation tabindex={selectedSlot} controls={controls}>
-            <div class="rpg-ui-save-load-list">
-                @for ((item,displayIndex) of displaySlots) {
-                    <div
-                        class="rpg-ui-save-load-slot"
-                        class={{active: selectedSlot() === displayIndex}}
-                        tabindex={displayIndex}
-                        data-slot-index={displayIndex}
-                        click={selectSlot(displayIndex)}
-                    >
-                        <div class="rpg-ui-save-load-slot-index">{item.label}</div>
-                        @if (item.slot) {
-                            <div class="rpg-ui-save-load-slot-meta">
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
-                                <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
-                            </div>
-                        }
-                        @else {
-                            <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
-                        }
-                    </div>
-                }
+    <div class="rpg-ui-save-load-layer" click={closeSaveLoadFromPointer}>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close save menu" click={closeSaveLoadFromPointer}>x</button>
+        <div class="rpg-ui-save-load rpg-anim-fade-in" click={stopEvent}>
+            <div class="rpg-ui-save-load-header">
+                <div class="rpg-ui-save-load-title">{title()}</div>
+                <div class="rpg-ui-save-load-subtitle">{subtitle()}</div>
             </div>
-        </Navigation>
+            <Navigation tabindex={selectedSlot} controls={controls}>
+                <div class="rpg-ui-save-load-list">
+                    @for ((item,displayIndex) of displaySlots) {
+                        <div
+                            class="rpg-ui-save-load-slot"
+                            class={{active: selectedSlot() === displayIndex}}
+                            tabindex={displayIndex}
+                            data-slot-index={displayIndex}
+                            click={selectSlot(displayIndex)}
+                        >
+                            <div class="rpg-ui-save-load-slot-index">{item.label}</div>
+                            @if (item.slot) {
+                                <div class="rpg-ui-save-load-slot-meta">
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.level")}: {item.slot.level ?? "-"}</div>
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.exp")}: {item.slot.exp ?? "-"}</div>
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.map")}: {item.slot.map ?? "-"}</div>
+                                    <div class="rpg-ui-save-load-slot-line">{t("rpg.save.date")}: {item.slot.date ?? "-"}</div>
+                                </div>
+                            }
+                            @else {
+                                <div class="rpg-ui-save-load-slot-empty">{t("rpg.save.empty-slot")}</div>
+                            }
+                        </div>
+                    }
+                </div>
+            </Navigation>
+        </div>
     </div>
 </DOMContainer>
 
@@ -169,6 +172,20 @@
         }
     }
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.();
+    };
+
+    const closeSaveLoad = () => {
+        if (onFinish) onFinish();
+        gui.hide(PrebuiltGui.Save);
+    };
+
+    const closeSaveLoadFromPointer = (event) => {
+        stopEvent(event);
+        closeSaveLoad();
+    };
+
     const controls = signal({
         up: {
             repeat: true,
@@ -195,8 +212,7 @@
         escape: {
             bind: keyboardControls.escape,
             keyDown() {
-                if (onFinish) onFinish();
-                gui.hide(PrebuiltGui.Save);
+                closeSaveLoad();
             }
         },
         gamepad: {

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

@@ -1,5 +1,7 @@
     <DOMContainer width="100%" height="100%">
-        <div class="rpg-shop-container rpg-anim-fade-in">
+        <div class="rpg-shop-layer" click={closeShopFromPointer}>
+        <button class="rpg-ui-close-button" type="button" title="Close" aria-label="Close shop" click={closeShopFromPointer}>x</button>
+        <div class="rpg-shop-container rpg-anim-fade-in" click={stopEvent}>
             <div class="rpg-shop-header">
                 <div class="rpg-shop-merchant">
                     <div>
@@ -143,8 +145,8 @@
                     </div>
                 }
                 @if (quantityDialogOpen) {
-                    <div class="rpg-shop-modal">
-                        <div class="rpg-shop-modal-card">
+                    <div class="rpg-shop-modal" click={closeQuantityDialogFromPointer}>
+                        <div class="rpg-shop-modal-card" click={stopEvent}>
                             <div class="rpg-shop-modal-title">{{ actionLabel }}</div>
                             <div class="rpg-shop-modal-item">{{ currentItem()?.name || "" }}</div>
                             @if (currentItem()?.quantity !== undefined) {
@@ -174,6 +176,7 @@
                 </div>
             </div>
         </div>
+        </div>
     </DOMContainer>
 
 <script>
@@ -351,6 +354,28 @@
         }
     }
 
+    const stopEvent = (event) => {
+        event?.stopPropagation?.()
+    }
+
+    const closeQuantityDialogFromPointer = (event) => {
+        stopEvent(event)
+        quantityDialogOpen.set(false)
+    }
+
+    const closeShop = () => {
+        if (quantityDialogOpen()) {
+            quantityDialogOpen.set(false)
+            return
+        }
+        onFinish()
+    }
+
+    const closeShopFromPointer = (event) => {
+        stopEvent(event)
+        closeShop()
+    }
+
     function confirmTrade() {
         return function() {
             const item = currentItem()

package/src/i18n.ts

@@ -40,6 +40,17 @@ export const RpgClientBuiltinI18n = {
     "rpg.gameover.title": "Game Over",
     "rpg.gameover.title-screen": "Title Screen",
     "rpg.gameover.load-game": "Load Game",
+    "rpg.input.confirm": "Confirm",
+    "rpg.input.cancel": "Cancel",
+    "rpg.input.error.invalid": "Invalid value.",
+    "rpg.input.error.required": "A value is required.",
+    "rpg.input.error.number": "Enter a valid number.",
+    "rpg.input.error.min": "The value must be at least {min}.",
+    "rpg.input.error.max": "The value must be at most {max}.",
+    "rpg.input.error.step": "The value must use increments of {step}.",
+    "rpg.input.error.min-length": "Enter at least {minLength} characters.",
+    "rpg.input.error.max-length": "Enter no more than {maxLength} characters.",
+    "rpg.input.error.email": "Enter a valid email address.",
     "rpg.shop.default-message": "Welcome to my shop!",
     "rpg.shop.choose-action": "Choose an action",
     "rpg.shop.buy": "Buy",

package/vite.config.ts

@@ -11,7 +11,10 @@ export default defineConfig({
     canvasengine(),
     dts({ 
       include: ['src/**/*.ts'],
-      outDir: 'dist'
+      outDirs: 'dist',
+      afterDiagnostic(diagnostics) {
+        if (diagnostics.length > 0) throw new Error(`Declaration generation failed with ${diagnostics.length} TypeScript diagnostic(s)`)
+      }
     })
   ],
   build: {
@@ -33,4 +36,4 @@ export default defineConfig({
       }
     },
   },
-})
+})