@rpgjs/client 4.3.0 → 5.0.0-alpha.1

package/src/components/character.ce

@@ -0,0 +1,104 @@
+<Container x y zIndex={y} viewportFollow={isMe} controls>
+  <Particle emit={@emitParticleTrigger} settings={@particleSettings} zIndex={1000} name={particleName} />
+  @for (graphicId of graphics) {
+    <Sprite sheet={@sheet(@graphicId)} direction tint />
+  }
+  <!-- <Ellipse 
+    x={shadow.@x} 
+    y={shadow.@y} 
+    width={shadow.@width} 
+    height={shadow.@height} 
+    color="black" 
+    blur={10} 
+    alpha={0.5}
+  /> -->
+</Container>
+
+<script>
+  import { signal, effect, mount, computed } from "canvasengine";
+  import { Particle } from "@canvasengine/presets";
+  import { GameEngineToken } from "@rpgjs/common";
+  import { RpgClientEngine } from "../RpgClientEngine";
+  import { inject } from "../core/inject";  
+  import { Direction } from "@rpgjs/common";
+  import Hit from "./effects/hit.ce";
+
+  const { object, id, isMe } = defineProps();
+
+  const client = inject(RpgClientEngine);
+
+  const spritesheets = client.spritesheets;
+
+  const x = object.x;
+  const y = object.y;
+  const tint = object.tint;
+  const direction = object.direction;
+  const animationName = object.animationName;
+  const emitParticleTrigger = object.emitParticleTrigger;
+  const particleSettings = client.particleSettings;
+  const particleName = object.particleName;
+  const graphics = object.graphics;
+
+  const hitbox = object.hitbox;
+  const widthShadow = 10;
+  const shadow = computed(() => ({
+    x: hitbox().w / 2,
+    y: hitbox().h - (hitbox().h / 2),
+    width: hitbox().w + widthShadow,
+    height: hitbox().h,
+  }))
+  const canControls = () => isMe() && object.canMove()
+  const keyboardControls = client.globalConfig.keyboardControls;
+
+  const controls = signal({
+    down: {
+      repeat: true,
+      bind: keyboardControls.down,
+      keyDown() {
+        if (canControls()) client.processInput({ input: Direction.Down })
+      },
+    },
+    up: {
+      repeat: true,
+      bind: keyboardControls.up,
+      keyDown() {
+        if (canControls()) client.processInput({ input: Direction.Up })
+      },
+    },
+    left: {
+      repeat: true,
+      bind: keyboardControls.left,
+      keyDown() {
+        if (canControls()) client.processInput({ input: Direction.Left })
+      },
+    },
+    right: {
+      repeat: true,
+      bind: keyboardControls.right,
+      keyDown() {
+        if (canControls()) client.processInput({ input: Direction.Right })
+      },
+    },
+    action: {
+      bind: keyboardControls.action,
+      keyDown() {
+        if (canControls()) {
+          client.processAction({ action: 'action' })
+          // particleName.set('hit') 
+          // emitParticleTrigger.start()
+          // object.flash('red')
+        }
+      },
+    },
+  });
+
+  const sheet = (graphicId) => {
+    return {
+      definition: spritesheets.get(graphicId),
+      playing: animationName,
+      params: {
+        direction
+      },
+    };
+  }
+</script>

package/src/components/effects/animation.ce

@@ -0,0 +1,19 @@
+<Sprite sheet x y anchor={0.5} />
+
+<script>
+  import { signal } from "canvasengine";
+  import { RpgClientEngine } from "../../RpgClientEngine";
+  import { inject } from "../../core/inject";
+
+  const { x, y, name, onFinish } = defineProps();
+
+  const client = inject(RpgClientEngine);
+  const spritesheets = client.spritesheets;
+
+  const sheet = {
+    definition: spritesheets.get(name()),
+    playing: 'default',
+    onFinish
+  };
+
+</script>

package/src/components/effects/hit.ce

@@ -0,0 +1,87 @@
+<Text x y zIndex={10000} color scale size={30} text />
+
+<script>
+  import { animatedSignal, mount, signal, tick } from "canvasengine";
+  import { Direction } from "@rpgjs/common";
+  const {
+    text,
+    direction,
+    onFinish,
+    duration,
+    color,
+    x: positionX,
+    y: positionY
+  } = defineProps({
+    duration: {
+      default: 1000
+    },
+    color: {
+      default: 'black'
+    }
+  });
+
+  const scale = animatedSignal(1, {
+    duration: duration(),
+  });
+
+  // Generate random initial position
+  const randomPosition = () => Math.floor(Math.random() * 60);
+  const initialY = randomPosition();
+  const x = signal(positionX());
+  const y = signal(positionY() - initialY);
+
+  // Initial velocity
+  let velocityX = 0;
+  let velocityY = 0;
+
+  // Set initial velocity based on direction
+  const speed = 200;
+  switch (direction()) {
+    case Direction.Left:
+      velocityX = speed;
+      break;
+    case Direction.Right:
+      velocityX = -speed;
+      break;
+    case Direction.Up:
+      velocityY = speed;
+      break;
+    case Direction.Down:
+      velocityY = -speed;
+      break;
+  }
+
+  // Add some randomness to the velocity
+  velocityX += (Math.random() - 0.5) * 100;
+  velocityY += (Math.random() - 0.5) * 100;
+
+  const gravity = 500; // Gravity effect
+  const deceleration = 0.98; // Deceleration factor
+
+  mount(() => {
+    scale.set(0.1);
+  });
+
+  let elapsedTime = 0;
+
+  tick(({ deltaTime }) => {
+    elapsedTime += deltaTime;
+    
+    if (elapsedTime < duration()) {
+      // Update position
+      x.update((x) => x + (velocityX * deltaTime) / 1000);
+      y.update((y) => y + (velocityY * deltaTime) / 1000);
+
+      // Apply gravity
+      velocityY += (gravity * deltaTime) / 1000;
+
+      // Apply deceleration
+      velocityX *= deceleration;
+      velocityY *= deceleration;
+    } else {
+      if (onFinish) {
+        onFinish();
+      }
+    }
+  });
+</script>

package/src/components/effects/index.ts

@@ -0,0 +1,7 @@
+import Hit from "./hit.ce";
+import Animation from "./animation.ce";
+
+export const PrebuiltEffects = {
+    Hit,
+    Animation
+}

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

@@ -0,0 +1,194 @@
+<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>
+<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;
+        }
+
+        // If text is still typing, just skip (fast forward) the animation
+        if (!isTextCompleted()) {
+          triggerSkip.start();
+          isTextCompleted.set(true);
+        }
+        else {
+          const isFinished = currentTextIndex() === texts.length - 1;
+          currentTextIndex.update((index) => {
+            if (index < texts.length - 1) {
+              return index + 1;
+            }
+            return index;
+          });
+          isChoiceDisplayed.set(false);
+          isTextCompleted.set(false);
+          if (isFinished && onFinish) {
+            onFinish();
+          } 
+        }
+      },
+    },
+  });
+
+  const onSelect = (index) => {
+    onFinish(index);
+  }
+  
+  effect(() => {
+    if (choices().length != 0) {
+      isChoiceDisplayed.set(true);
+    }
+  });
+</script>

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

@@ -0,0 +1,23 @@
+<Container>
+    <Rect width height color="#595971" alpha visible={isSelected} />
+    <Container flexDirection="row" alignItems="center" justifyContent="center">
+        <Text text color="#fff" fontSize={18} margin={10} />
+    </Container>
+</Container>
+
+<script>
+import { animatedSignal } from "canvasengine";
+
+const { text, isSelected } = defineProps();
+
+const alpha = animatedSignal(1, {
+    repeatType: "reverse",
+    duration: 500,
+    repeat: Infinity,
+});
+
+alpha.set(0.5);
+
+const height = 40;
+const width = 256;
+</script>

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

@@ -0,0 +1,67 @@
+<Container controls flexDirection="column" margin={[0, 0, 0, 50]}>
+    @for ((item,index) of items) { 
+      <ItemMenu text={@item.@text} isSelected={@selected(@index)} /> 
+    }
+</Container>
+
+<script>
+  import { signal, computed, mount } from "canvasengine";
+  import ItemMenu from "./itemMenu.ce";
+  import { RpgClientEngine } from "../../../RpgClientEngine";
+  import { inject } from "../../../core/inject";
+
+  const {
+    items,
+    wrapAround,
+    onSelect,
+    selectedIndex,
+  } = defineProps();
+
+  const client = inject(RpgClientEngine);
+  const keyboardControls = client.globalConfig.keyboardControls;
+
+  const selected = (index) => {
+    return computed(() => {
+      return index === selectedIndex();
+    })
+  }
+
+  mount((element) => {
+    return () => {
+      element.directives.controls.onDestroy()
+    }
+  })
+
+  const controls = signal({
+    down: {
+      bind: keyboardControls.down,
+      keyDown() {
+        selectedIndex.update((currentIndex) => {
+          if (wrapAround) {
+            return (currentIndex + 1) % items().length;
+          } else {
+            return Math.min(currentIndex + 1, items().length - 1);
+          }
+        });
+      },
+    },
+    up: {
+      bind: keyboardControls.up,
+      keyDown() {
+        selectedIndex.update((currentIndex) => {
+          if (wrapAround) {
+            return (currentIndex - 1 + items().length) % items().length;
+          } else {
+            return Math.max(currentIndex - 1, 0);
+          }
+        });
+      },
+    },
+    enter: {
+      bind: keyboardControls.action,
+      keyDown() {
+        onSelect?.(selectedIndex());
+      },
+    },
+  });
+</script>

package/src/components/gui/index.ts

@@ -0,0 +1,5 @@
+import Dialogbox from "./dialogbox/index.ce";
+
+export const PrebuiltGui = {
+    Dialogbox
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+import EventLayerComponent from "./scenes/event-layer.ce";
+
+export { EventLayerComponent }

package/src/components/scenes/canvas.ce

@@ -0,0 +1,51 @@
+<Canvas width={@engine.width} height={@engine.height}>
+  <Viewport worldWidth worldHeight clamp>
+    @if (sceneData) {
+      <SceneMap />
+    }
+  </Viewport>
+  @for (gui of gui) {
+    <Container display="flex">
+      @if (gui.display) {
+        <gui.component ...gui.data() onFinish={(data) => {
+          onGuiFinish(gui, data)
+        }} onInteraction={(name, data) => {
+          onGuiInteraction(gui, name, data)
+        }} /> 
+      }
+    </Container>
+  } 
+</Canvas>
+
+<script>
+  import { signal, computed, effect } from "canvasengine";
+  import { inject } from "../../core/inject";
+  import { RpgClientEngine } from "../../RpgClientEngine";
+  import SceneMap from './draw-map.ce'
+  import { RpgGui } from "../../Gui/Gui";
+
+  const engine = inject(RpgClientEngine);
+  const guiService = inject(RpgGui);
+  const sceneData = engine.sceneMap.data
+  const gui = guiService.gui
+  const worldWidth = computed(() => sceneData()?.width)
+  const worldHeight = computed(() => sceneData()?.height)
+
+  effect(() => {
+     if (sceneData() && !sceneData().component) {
+       throw new Error("Warning ! You need to define a component for the scene. Use provideLoadMap() to define a component for the scene.")
+     }
+  })
+
+  const onGuiFinish = (gui, data) => {
+    guiService.guiClose(gui.name, data)
+  }
+
+  const onGuiInteraction = (gui, name, data) => {
+    guiService.guiInteraction(gui.name, name, data)
+  }
+  
+  const clamp = {
+    direction: "all"
+  }
+</script>

package/src/components/scenes/draw-map.ce

@@ -0,0 +1,56 @@
+<Container sound={backgroundMusic} >
+  <Container sound={backgroundAmbientSound} />
+
+  <!-- <Sprite image={map.@fullImage} scale /> -->
+
+  <sceneComponent() data={map.@data} />
+  
+  <!-- <Container sortableChildren={true}>
+    @for (obj of middleLayer) {
+      <ElementMap ...obj image={map.@gridImage} scale /> 
+    }
+
+    @for ((event,id) of events) {
+      <Character id={id} object={event} isMe={false}  />
+    }
+  
+    @for ((player,id) of players) {
+      <Character id={id} object={player} isMe={true} />
+    }
+  </Container> -->
+
+  @for (effect of effects) {
+    <Container>
+      @for (animation of effect.current) {
+        <effect.component ...animation />
+      }
+    </Container>
+  }
+</Container>
+
+<script>
+    import { effect, signal, computed, mount } from 'canvasengine'
+    import { inject } from "../../core/inject";
+    import { RpgClientEngine } from "../../RpgClientEngine";
+
+    const engine = inject(RpgClientEngine);
+    const effects = engine.effects
+    const map = engine.sceneMap.data
+    const sceneComponent = computed(() => map()?.component)
+    const mapParams = map().params
+    const animations = engine.sceneMap.animations
+    const backgroundMusic = { src: mapParams?.backgroundMusic, autoplay: true, loop: true }
+    const backgroundAmbientSound = { src: mapParams?.backgroundAmbientSound, autoplay: true, loop: true }
+    
+    const data = signal(map().data)
+    // const middleLayer = computed(() => data().filter(obj => obj.layer === 1))
+    // const topLayer = computed(() => data().filter(obj => obj.layer === 2))
+
+    const scale = mapParams?.scale || 1
+    const worldWidth = (mapParams?.width || 2048) * scale
+    const worldHeight = (mapParams?.height || 2048) * scale
+   
+    const clamp = {
+      direction: "all"
+    }
+</script>

package/src/components/scenes/element-map.ce

@@ -0,0 +1,23 @@
+<Sprite image rectangle x y zIndex />
+
+<script>
+const {
+    image,
+    rect,
+    drawIn,
+    id,
+} = defineProps()
+
+const rectangle = {
+    x: rect[0],
+    y: rect[1],
+    width: rect[2],
+    height: rect[3]
+}
+
+const x = drawIn[0]
+const y = drawIn[1]
+
+const zIndex = y + rectangle.height
+</script>
+

package/src/components/scenes/event-layer.ce

@@ -0,0 +1,20 @@
+<Container sortableChildren={true}>
+    @for ((event,id) of events) {
+        <Character id={id} object={event} isMe={false}  />
+    }
+
+    @for ((player,id) of players) {
+        <Character id={id} object={player} isMe={true} />
+    }
+</Container>
+
+<script>
+    import { effect, signal, computed, mount } from 'canvasengine'
+    import { inject } from "../../core/inject";
+    import { RpgClientEngine } from "../../RpgClientEngine";
+    import Character from "../character.ce";
+   
+    const engine = inject(RpgClientEngine);
+    const players = engine.sceneMap.players
+    const events = engine.sceneMap.events
+</script>

package/src/core/inject.ts

@@ -0,0 +1,17 @@
+import { Context, inject as injector } from "@signe/di";
+
+export let context: Context | null = null
+
+export function inject<T>(service: (new (...args: any[]) => T) | string, _context?: Context): T {
+    const c = _context ?? context
+    if (!c) throw new Error("Context is not set. use setInject() to set the context");
+    return injector(c, service);
+}
+
+export function setInject(_context: Context) {
+    context = _context;
+}
+
+export function clearInject() {
+    context = null
+}