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

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

@@ -1,194 +1,220 @@
-<Container justifyContent="center" alignItems="center" width="100%" height="100%">
-  <Container
-    ref="dialogbox"
-    scale={{ x: scaleX }}
-    anchor={[0.5, 0.5]}
-    width={700}
-    height
-    controls
-    positionType="absolute"
-    bottom={10}
-  >
-  <Rect width={700} height={250} color="#1a1a2e" />
-    <Rect
-      x={0}
-      y={0}
-      width={700}
-      height
-      color="#1a1a2e"
-      alpha={0.9}
-      borderRadius={10}
-      border
-      shadow
-    />
-      <Container
-        flexDirection="row"
-        width={700}
-        height
-        alpha={contentOpacity}
-      >
-        <Container flexDirection="column">
-          <Text
-            text
-            color="#fff"
-            fontSize={18}
-            margin={40}
-            typewriter
-            style={textStyle}
-          />
-          @if (visibleSelection) {
-            <Selection selectedIndex={0} items={choices} onSelect />
-          }
-        </Container>
-    </Container>
-</Container>  
-
-  
-</Container>
+<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>
+                    @if (hasChoices()) {
+                        <Navigation tabindex={selectedItem} controls={controls}>
+                            <div class="rpg-ui-dialog-choices">
+                                @for ((choice,index) of choices) {
+                                    <div
+                                        class="rpg-ui-dialog-choice"
+                                        class={{active: selectedItem() === index}}
+                                        tabindex={index}
+                                        data-choice-index={index}
+                                        click={selectChoice(index)}
+                                    >{{ choice.text }}</div>
+                                }
+                            </div>
+                        </Navigation>
+                    }
+                </div>
+                @if (hasFace()) {
+                    <div class="rpg-ui-dialog-face">
+                        <DOMSprite
+                            sheet={faceSheet(dialogFace())}
+                            width="100%"
+                            height="100%"
+                            objectFit="contain"
+                        />
+                    </div>
+                }
+            </div>
+            @if (showIndicator) {
+                <div class="rpg-ui-dialog-indicator"></div>
+            }
+        </div>
+    </div>
+</DOMContainer>
+    
 <script>
-  import Selection from './selection.ce'
-
-  import {
-    animatedSignal,
-    computed,
-    effect,
-    signal,
-    trigger,
-    mount
-  } from "canvasengine";
-
-  import { inject } from "../../../core/inject";
-  import { RpgClientEngine } from "../../../RpgClientEngine";
-
-  const {
-    message,
-    choices: _choices,
-    onFinish,
-    onInteraction
-  } = defineProps();
-
-  const client = inject(RpgClientEngine);
-  const keyboardControls = client.globalConfig.keyboardControls;
-
-  client.stopProcessingInput = true;
-  let isDestroyed = false;
-
-  const texts = [message()]
-  const height = signal(250);
-  const isTextCompleted = signal(false);
-
-  const drawSpeaker = (g) => {
-    g.beginFill(0xffa500); // Orange color
-    g.lineStyle(2, 0x000000); // Black border
-    g.moveTo(0, 0);
-    g.lineTo(70, 0);
-    g.lineTo(80, 15);
-    g.lineTo(70, 30);
-    g.lineTo(0, 30);
-    g.lineTo(0, 0);
-    g.endFill();
-  };
-
-  const border = signal({ width: 5, color: "#595971" });
-  const shadow = signal({ color: "#000", blur: 10, offsetX: 10, offsetY: 10 });
-
-  const contentOpacity = animatedSignal(0, {
-    duration: 1000,
-  });
-
-  const scaleX = animatedSignal(0, {
-    duration: 500,
-  });
-
-  scaleX.set(1);
-  contentOpacity.set(1);
-
-  const currentTextIndex = signal(0);
-  const currentText = computed(() => texts?.[currentTextIndex()] ?? '');
-  const isChoiceDisplayed = signal(false);
-
-  const text = computed(() => {
-    const current = currentText();
-    return typeof current === "string" ? current : current.text;
-  });
-
-  const choices = computed(() => {
-    //const current = currentText();
-    //return typeof current === "string" ? null : current.choices;
-    return _choices;
-  });
-
-  const visibleSelection = computed(() => isChoiceDisplayed() && choices().length != 0)
-
-  const triggerSkip = trigger();
-
-  const typewriter = {
-    speed: 0.3,
-    skip: triggerSkip,
-    onComplete: () => {
-      isTextCompleted.set(true);
-    }
-  }
-
-  const textStyle = {
-    wordWrap: true,
-    wordWrapWidth: 700 - 256 - 80
-  }
-
-  const face = signal({ x: 0, y: 0, width: 256, height: 256 });
-
-  mount((element) => {
-    const [dialogbox] = element.props.children
-    return () => {
-      dialogbox.directives.controls.onDestroy()
-      isDestroyed = true;
-      // Wait destroy is finished before start processing input
-      setTimeout(() => {
-        client.stopProcessingInput = false;
-      }, 500)
-    }
-  })
-
-  const controls = signal({
-    next: {
-      bind: keyboardControls.action,
-      keyDown(e) {
-        if (isDestroyed) return;
-        if (isChoiceDisplayed()) {
-          // If choices are displayed, do nothing (wait for selection)
-          return;
+    import { effect, signal, computed, createTabindexNavigator, mount } from "canvasengine";
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { delay } from "@rpgjs/common";
+
+    const engine = inject(RpgClientEngine);
+    const currentPlayer = engine.scene.currentPlayer
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    engine.stopProcessingInput = true;
+
+    const selectedItem = signal(0)
+    let isDestroyed = false;
+
+    const {
+        data,
+        onFinish,
+        onInteraction
+    } = defineProps();
+
+    const { message, choices, face, speaker, position, typewriterEffect, autoClose } = data();
+    const fullWidth = computed(() => data().fullWidth || false);
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+
+    const speakerName = computed(() => {
+        const value = resolveProp(speaker);
+        return value ? String(value) : "";
+    });
+
+    const dialogPosition = computed(() => resolveProp(position) || "bottom");
+    const isFullWidth = computed(() => resolveProp(fullWidth) !== false);
+    const dialogFace = computed(() => resolveProp(face));
+    const hasFace = computed(() => {
+        const value = dialogFace();
+        return !!(value && value.id);
+    });
+
+    const displayMessage = signal("");
+    const fullMessage = signal("");
+    const isTyping = signal(false);
+    let typewriterTimer = null;
+    let rootElement = null;
+
+    mount((element) => {
+        rootElement = element;
+    });
+
+    const startTypewriter = (text) => {
+        if (typewriterTimer) clearInterval(typewriterTimer);
+        displayMessage.set("");
+        if (!text) return;
+        let index = 0;
+        isTyping.set(true);
+        typewriterTimer = setInterval(() => {
+            index += 1;
+            displayMessage.set(text.slice(0, index));
+            if (index >= text.length) {
+                clearInterval(typewriterTimer);
+                typewriterTimer = null;
+                isTyping.set(false);
+            }
+        }, 20);
+    };
+
+    const finishTyping = () => {
+        if (typewriterTimer) clearInterval(typewriterTimer);
+        typewriterTimer = null;
+        displayMessage.set(fullMessage());
+        isTyping.set(false);
+    };
+
+    effect(() => {
+        const text = resolveProp(message) || "";
+        fullMessage.set(text);
+        const useTypewriter = resolveProp(typewriterEffect) !== false;
+        if (!useTypewriter) {
+            finishTyping();
+            return;
         }
+        startTypewriter(text);
+    });
+
 
-        // If text is still typing, just skip (fast forward) the animation
-        if (!isTextCompleted()) {
-          triggerSkip.start();
-          isTextCompleted.set(true);
+    const hasChoices = computed(() => choices.length > 0);
+    const showIndicator = computed(() => !hasChoices() && !isTyping());
+    const nav = createTabindexNavigator(selectedItem, { count: () => choices.length }, 'wrap');
+
+    function selectChoice(index) {
+        return function() {
+            selectedItem.set(index);
+            onSelect(index);
         }
-        else {
-          const isFinished = currentTextIndex() === texts.length - 1;
-          currentTextIndex.update((index) => {
-            if (index < texts.length - 1) {
-              return index + 1;
+    }
+
+    function _onFinish(value) {
+        if (onFinish) onFinish(value);
+    }
+
+    const onSelect = (index) => {
+        _onFinish(index);
+    };
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                if (!hasChoices()) return;
+                nav.next(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                if (!hasChoices()) return;
+                nav.next(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (isTyping()) {
+                    finishTyping();
+                    return;
+                }
+                if (!hasChoices()) return;
+                onSelect(selectedItem());
             }
-            return index;
-          });
-          isChoiceDisplayed.set(false);
-          isTextCompleted.set(false);
-          if (isFinished && onFinish) {
-            onFinish();
-          } 
+        },
+        gamepad: {
+            enabled: true
         }
-      },
-    },
-  });
-
-  const onSelect = (index) => {
-    onFinish(index);
-  }
-  
-  effect(() => {
-    if (choices().length != 0) {
-      isChoiceDisplayed.set(true);
+    });
+    
+    const dialogControls = signal({
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                if (isTyping()) {
+                    finishTyping();
+                    return;
+                }
+                if (hasChoices()) return;
+                _onFinish();
+            }
+        },
+    })
+
+    const faceSheet = (faceValue) => {
+        return {
+            definition: engine.getSpriteSheet(faceValue.id),
+            playing: faceValue.expression || "default",
+        };
     }
-  });
-</script>
+
+    mount((element) => {
+        return () => {
+            isDestroyed = true;
+            // Wait destroy is finished before start processing input
+            delay(() => {
+                engine.stopProcessingInput = false;
+            })
+        }
+  })
+</script>

package/src/components/gui/gameover.ce

@@ -0,0 +1,158 @@
+<DOMContainer width="100%" height="100%">
+    <div class="rpg-ui-gameover-screen rpg-anim-fade-in">
+        <div class="rpg-ui-gameover-splatter rpg-ui-gameover-splatter-left"></div>
+        <div class="rpg-ui-gameover-splatter rpg-ui-gameover-splatter-right"></div>
+        <div class="rpg-ui-gameover-splatter rpg-ui-gameover-splatter-center"></div>
+        <div class="rpg-ui-gameover-header rpg-anim-shake">
+            <div class="rpg-ui-gameover-title">{titleText()}</div>
+            @if (subtitleText()) {
+                <div class="rpg-ui-gameover-subtitle">{subtitleText()}</div>
+            }
+        </div>
+        <Navigation tabindex={selectedEntry} controls={controls}>
+            <div class="rpg-ui-menu rpg-ui-gameover-menu rpg-anim-slide-up">
+                @for ((entry,index) of entryList()) {
+                    <div
+                        class="rpg-ui-menu-item"
+                        class={{disabled: isEntryDisabled(entry)}}
+                        data-selected={selectedEntry() === index ? "true" : "false"}
+                        tabindex={index}
+                        click={selectEntry(index)}
+                    >{entry.label}</div>
+                }
+            </div>
+        </Navigation>
+    </div>
+</DOMContainer>
+
+<script>
+    import { signal, computed, effect } from "canvasengine";
+    import { PrebuiltGui } from "@rpgjs/common";
+    import { inject } from "../../core/inject";
+    import { RpgClientEngine } from "../../RpgClientEngine";
+    import { RpgGui } from "../../Gui/Gui";
+
+    const engine = inject(RpgClientEngine);
+    const guiService = inject(RpgGui);
+    const keyboardControls = engine.globalConfig.keyboardControls;
+
+    const { entries, title, subtitle, saveLoad, localActions, onInteraction } = defineProps({
+        entries: {
+            default: () => []
+        },
+        saveLoad: {
+            default: () => ({})
+        },
+        localActions: {
+            default: false
+        }
+    });
+
+    const defaultEntries = [
+        { id: "title", label: "Title Screen" },
+        { id: "load", label: "Load Game" }
+    ];
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const titleText = computed(() => resolveProp(title) || "Game Over");
+    const subtitleText = computed(() => resolveProp(subtitle) || "");
+    const localActionsEnabled = computed(() => resolveProp(localActions) === true);
+
+    const entryList = computed(() => {
+        const list = resolveProp(entries);
+        if (Array.isArray(list) && list.length) return list;
+        return defaultEntries;
+    });
+
+    const isEntryDisabled = (entry) => {
+        if (!entry) return true;
+        if (entry.disabled) return true;
+        if (entry.enabled === false) return true;
+        return false;
+    };
+
+    const selectedEntry = signal(0);
+    const selectableIndexes = computed(() => {
+        const list = entryList();
+        return list
+            .map((entry, index) => (isEntryDisabled(entry) ? null : index))
+            .filter((value) => value !== null);
+    });
+
+    effect(() => {
+        const available = selectableIndexes();
+        if (!available.length) return;
+        const current = selectedEntry();
+        if (!available.includes(current)) {
+            selectedEntry.set(available[0]);
+        }
+    });
+
+    const moveSelection = (delta) => {
+        const available = selectableIndexes();
+        if (!available.length) return;
+        const current = selectedEntry();
+        const currentIndex = Math.max(0, available.indexOf(current));
+        const nextIndex = (currentIndex + delta + available.length) % available.length;
+        selectedEntry.set(available[nextIndex]);
+    };
+
+    const triggerSelect = (index) => {
+        const list = entryList();
+        const entry = list[index];
+        if (!entry || isEntryDisabled(entry)) return;
+        if (localActionsEnabled()) {
+            if (entry.id === "title") {
+                guiService.hide(PrebuiltGui.Gameover);
+                guiService.display(PrebuiltGui.TitleScreen);
+            }
+            if (entry.id === "load") {
+                const config = resolveProp(saveLoad) || {};
+                const slots = Array.isArray(config.slots) ? config.slots : [null, null, null];
+                guiService.display(PrebuiltGui.Save, {
+                    ...config,
+                    mode: config.mode || "load",
+                    slots
+                });
+            }
+        }
+        if (onInteraction) {
+            onInteraction("select", { id: entry.id, index, entry });
+        }
+    };
+
+    function selectEntry(index) {
+        return function() {
+            selectedEntry.set(index);
+            triggerSelect(index);
+        };
+    }
+
+    const controls = signal({
+        up: {
+            repeat: true,
+            bind: keyboardControls.up,
+            throttle: 150,
+            keyDown() {
+                moveSelection(-1);
+            }
+        },
+        down: {
+            repeat: true,
+            bind: keyboardControls.down,
+            throttle: 150,
+            keyDown() {
+                moveSelection(1);
+            }
+        },
+        action: {
+            bind: keyboardControls.action,
+            keyDown() {
+                triggerSelect(selectedEntry());
+            }
+        },
+        gamepad: {
+            enabled: true
+        }
+    });
+</script>

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

@@ -0,0 +1,61 @@
+<DOMContainer>
+    <div class="rpg-hud">
+        <div class="rpg-avatar">
+            @if (hasFace()) {
+                <div class="rpg-avatar-face">
+                    <DOMSprite 
+                        sheet={faceSheet(face())} 
+                        width={64} 
+                        height={64} 
+                        objectFit="contain" 
+                    />
+                </div>
+            }
+            <div class="rpg-avatar-level">{{ level() }}</div>
+        </div>
+        <div class="rpg-status-bars">
+            <div class="rpg-bar-container">
+                <span class="rpg-bar-text">HP {{ hp() }}/{{ hpMax() }}</span>
+                <div class="rpg-bar-fill health" style={{width: percentHp}}></div>
+            </div>
+            <div class="rpg-bar-container">
+                <span class="rpg-bar-text">SP {{ sp() }}/{{ spMax() }}</span>
+                <div class="rpg-bar-fill mana" style={{width: percentSp}}></div>
+            </div>
+        </div>
+    </div>
+</DOMContainer>
+
+<script>
+    import { inject } from "../../../core/inject";
+    import { RpgClientEngine } from "../../../RpgClientEngine";
+    import { computed } from "canvasengine";
+    import { getEntityProp } from "../../../utils/getEntityProp";
+
+    const engine = inject(RpgClientEngine)
+    const currentPlayer = engine.scene.currentPlayer
+    const { data } = defineProps();
+    const { faceset } = data();
+
+    const resolveProp = (value) => typeof value === "function" ? value() : value;
+    const face = computed(() => resolveProp(data().faceset));
+
+    const hasFace = computed(() => {
+        const value = face();
+        return !!(value && value.id);
+    });
+    const faceSheet = (faceValue) => ({
+        definition: engine.getSpriteSheet(faceValue.id),
+        playing: faceValue.expression || "default",
+    });
+    const hp = getEntityProp(currentPlayer, "hp")
+    const hpMax = getEntityProp(currentPlayer, "params.maxHp")
+    const percentHp = computed(() => (hp() / hpMax() * 100) + '%')
+
+    const sp = getEntityProp(currentPlayer, "sp")
+    const spMax = getEntityProp(currentPlayer, "params.maxSp")
+    const percentSp = computed(() => (sp() / spMax() * 100) + '%')
+
+    const level = getEntityProp(currentPlayer, "level")
+</script>
+    

package/src/components/gui/index.ts

@@ -1,5 +1,31 @@
-import Dialogbox from "./dialogbox/index.ce";
+import DialogboxComponent from "./dialogbox/index.ce";
+import BoxComponent from "./box.ce";
+import ShopComponent from "./shop/shop.ce";
+import HudComponent from "./hud/hud.ce";
+import SaveLoadComponent from "./save-load.ce";
+import MainMenuComponent from "./menu/main-menu.ce";
+import ItemsMenuComponent from "./menu/items-menu.ce";
+import SkillsMenuComponent from "./menu/skills-menu.ce";
+import EquipMenuComponent from "./menu/equip-menu.ce";
+import OptionsMenuComponent from "./menu/options-menu.ce";
+import ExitMenuComponent from "./menu/exit-menu.ce";
+import NotificationComponent from "./notification/notification.ce";
+import TitleScreenComponent from "./title-screen.ce";
+import GameoverComponent from "./gameover.ce";
 
-export const PrebuiltGui = {
-    Dialogbox
-}
+export {
+    DialogboxComponent,
+    BoxComponent,
+    ShopComponent,
+    HudComponent,
+    SaveLoadComponent,
+    MainMenuComponent,
+    ItemsMenuComponent,
+    SkillsMenuComponent,
+    EquipMenuComponent,
+    OptionsMenuComponent,
+    ExitMenuComponent,
+    NotificationComponent,
+    TitleScreenComponent,
+    GameoverComponent
+}