@rpgjs/client 4.1.2 → 4.2.0

package/src/Renderer.ts

@@ -1,4 +1,4 @@
-import { RpgPlugin, HookClient, Utils } from '@rpgjs/common'
+import { RpgPlugin, HookClient, Utils, InjectContext } from '@rpgjs/common'
 import { SceneMap } from './Scene/Map'
 import { Scene } from './Scene/Scene'
 import { Scene as PresetScene } from './Presets/Scene'
@@ -10,6 +10,7 @@ import { Subject, forkJoin } from 'rxjs'
 import { GameEngineClient } from './GameEngine'
 import { SpinnerGraphic } from './Effects/Spinner'
 import { autoDetectRenderer, Container, EventBoundary, FederatedEvent, FederatedPointerEvent, Graphics, ICanvas, IRenderer } from 'pixi.js'
+import { KeyboardControls } from './KeyboardControls'
 
 const { elementToPositionAbsolute } = Utils
 
@@ -22,7 +23,17 @@ enum ContainerName {
     Map = 'map'
 }
 
+export const EVENTS_MAP = {
+    MouseEvent: ['click', 'dblclick', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'contextmenu', 'wheel'],
+    KeyboardEvent: ['keydown', 'keyup', 'keypress', 'keydownoutside', 'keyupoutside', 'keypressoutside'],
+    PointerEvent: ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointercancel'],
+    TouchEvent: ['touchstart', 'touchend', 'touchmove', 'touchcancel']
+};
+
 export class RpgRenderer {
+    private gameEngine: GameEngineClient = this.context.inject(GameEngineClient)
+    private clientEngine: RpgClientEngine = this.context.inject(RpgClientEngine)
+
     public vm: ComponentPublicInstance
     public app: App
     public readonly stage: Container = new Container()
@@ -38,7 +49,6 @@ export class RpgRenderer {
     private _height: number = 400
     private canvasEl: HTMLElement
     private selector: HTMLElement
-    private gameEngine: GameEngineClient = this.clientEngine.gameEngine
     private loadingScene = {
         transitionIn: new Subject(),
         transitionOut: new Subject()
@@ -47,7 +57,7 @@ export class RpgRenderer {
     private prevObjectScene: any = {}
     public transitionMode: TransitionMode = TransitionMode.Fading
 
-    constructor(private clientEngine: RpgClientEngine) {
+    constructor(private context: InjectContext) {
         this.clientEngine.tick.subscribe(({ timestamp, deltaRatio, frame, deltaTime }) => {
             this.draw(timestamp, deltaTime, deltaRatio, frame)
         })
@@ -81,8 +91,8 @@ export class RpgRenderer {
         this.spinner.y = h * 0.5
     }
 
-    get canvas(): ICanvas {
-        return this.renderer.view
+    get canvas(): HTMLCanvasElement {
+        return this.renderer.view as HTMLCanvasElement
     }
 
     get height(): number {
@@ -135,9 +145,24 @@ export class RpgRenderer {
         this.fadeContainer.visible = false
         this.fadeContainer.alpha = 0
 
-        await RpgGui._initialize(this.clientEngine, this.guiEl)
+        await RpgGui._initialize(this.context, this.guiEl)
 
         this.resize()
+        this.bindMouseControls()
+
+    }
+
+    private bindMouseControls() {
+        const controlInstance = this.context.inject(KeyboardControls)
+        const controls = controlInstance.getControls()
+        for (let key in controls) {
+            const { actionName } = controls[key]
+            if (EVENTS_MAP.MouseEvent.includes(key)) {
+                this.canvas.addEventListener(key, (e) => {
+                    controlInstance.applyControl(actionName)
+                })
+            }
+        }
     }
 
     /** @internal */
@@ -205,7 +230,7 @@ export class RpgRenderer {
             this.loadingScene.transitionOut.complete()
         }
         if (this.transitionMode == TransitionMode.Fading) {
-            new TransitionScene(this.clientEngine, this.fadeContainer)
+            new TransitionScene(this.context, this.fadeContainer)
                 .addFadeOut()
                 .onComplete(finish)
                 .start()
@@ -232,7 +257,7 @@ export class RpgRenderer {
             switch (name) {
                 case PresetScene.Map:
                     const sceneClass = scenes[PresetScene.Map] || SceneMap
-                    this.scene = new sceneClass(this.gameEngine, this.renderer, {
+                    this.scene = new sceneClass(this.context, this.renderer, {
                         screenWidth: this.renderer.screen.width,
                         screenHeight: this.renderer.screen.height,
                         drawMap: this.options.drawMap
@@ -248,7 +273,7 @@ export class RpgRenderer {
                 RpgPlugin.emit(HookClient.AfterSceneLoading, this.scene)
             }
             if (this.transitionMode == TransitionMode.Fading) {
-                new TransitionScene(this.clientEngine, this.fadeContainer)
+                new TransitionScene(this.context, this.fadeContainer)
                     .addFadeIn()
                     .onComplete(finish)
                     .start()
@@ -273,11 +298,18 @@ export class RpgRenderer {
      * @returns {void}
      */
     propagateEvent(ev: MouseEvent) {
+        const rect = this.canvas.getBoundingClientRect();
+        const canvasX = rect.left + window.scrollX;
+        const canvasY = rect.top + window.scrollY;
+        const realX = ev.clientX - canvasX;
+        const realY = ev.clientY - canvasY;
         const boundary = new EventBoundary(this.stage);
         const event = new FederatedPointerEvent(boundary)
-        event.global.set(ev.clientX, ev.clientY);
+        event.global.set(realX, realY);
         event.type = ev.type;
-        this.getScene<SceneMap>()?.viewport?.emit(event.type as any, event)
+        const hitTestTarget = boundary.hitTest(realX, realY);
+        hitTestTarget?.dispatchEvent(event)
+        this.canvas.dispatchEvent(new MouseEvent(ev.type, ev))
     }
 
     /***
@@ -290,14 +322,7 @@ export class RpgRenderer {
      * @returns {void}
      */
     addPropagateEventsFrom(el: HTMLElement) {
-        const eventMap = {
-            MouseEvent: ['click', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave', 'mouseover', 'mouseout', 'contextmenu', 'wheel'],
-            KeyboardEvent: ['keydown', 'keyup', 'keypress', 'keydownoutside', 'keyupoutside', 'keypressoutside'],
-            PointerEvent: ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'pointerenter', 'pointerleave', 'pointercancel'],
-            TouchEvent: ['touchstart', 'touchend', 'touchmove', 'touchcancel']
-        };
-
-        for (let [_Constructor, events] of Object.entries(eventMap)) {
+        for (let [_Constructor, events] of Object.entries(EVENTS_MAP)) {
             for (let type of events) {
                 el.addEventListener(type, (e) => {
                     const _class = window[_Constructor] ?? MouseEvent

package/src/Resources.ts

@@ -1,5 +1,4 @@
 import { RpgClientEngine } from "./RpgClientEngine"
-import { Utils } from '@rpgjs/common'
 
 /**
 * Get/Set images in resources

package/src/RpgClientEngine.ts

@@ -15,6 +15,7 @@ import {
     RpgCommonMap,
     Scheduler,
     Control,
+    InjectContext,
 } from '@rpgjs/common'
 import { RpgSound } from './Sound/RpgSound'
 import { SceneMap } from './Scene/Map'
@@ -48,6 +49,7 @@ export class RpgClientEngine {
      * 
      * @prop {RpgRenderer} [renderer]
      * @readonly
+     * @deprecated Use `inject(RpgRenderer)` instead. Will be removed in v5
      * @memberof RpgClientEngine
      * */
     public renderer: RpgRenderer
@@ -74,6 +76,7 @@ export class RpgClientEngine {
      * Get the class managing the keyboard
      * 
      * @prop {KeyboardControls} [controls]
+     * @deprecated Use `inject(KeyboardControls)` instead. Will be removed in v5
      * @readonly
      * @memberof RpgClientEngine
      * */
@@ -107,6 +110,10 @@ export class RpgClientEngine {
     private serverFps: number = 60
     private scheduler: Scheduler = new Scheduler()
     private _serverUrl: string = ''
+    /**
+     * * @deprecated Use `inject(GameEngineClient)` instead. Will be removed in v5
+     */
+    public gameEngine = this.context.inject(GameEngineClient)
 
     /**
      * Read objects synchronized with the server
@@ -124,7 +131,7 @@ export class RpgClientEngine {
 
     envs?: object = {}
 
-    constructor(public gameEngine: GameEngineClient, private options) {
+    constructor(private context: InjectContext, private options) {
         this.envs = options.envs || {}
         this.tick.subscribe(({ timestamp, deltaTime }) => {
             if (timestamp != -1) this.step(timestamp, deltaTime)
@@ -132,9 +139,9 @@ export class RpgClientEngine {
     }
 
     private async _init() {
-        this.renderer = new RpgRenderer(this)
+        this.renderer = this.context.inject(RpgRenderer)
 
-        const pluginLoadRessource = async (hookName: string, type: string) => {
+        const pluginLoadResource = async (hookName: string, type: string) => {
             const resource = this.options[type] || []
             this.options[type] = [
                 ...Utils.arrayFlat(await RpgPlugin.emit(hookName, resource)) || [],
@@ -142,9 +149,9 @@ export class RpgClientEngine {
             ]
         }
 
-        await pluginLoadRessource(HookClient.AddSpriteSheet, 'spritesheets')
-        await pluginLoadRessource(HookClient.AddGui, 'gui')
-        await pluginLoadRessource(HookClient.AddSound, 'sounds')
+        await pluginLoadResource(HookClient.AddSpriteSheet, 'spritesheets')
+        await pluginLoadResource(HookClient.AddGui, 'gui')
+        await pluginLoadResource(HookClient.AddSound, 'sounds')
 
         this.renderer.options = {
             selector: '#rpg',
@@ -170,8 +177,8 @@ export class RpgClientEngine {
             const id: any = isString(sound) ? extractId(sound) : undefined
             this.addSound(sound, id)
         })
-        
-        // obsolete
+
+        // deprecated
         if (typeof __RPGJS_PRODUCTION__ != 'undefined' && __RPGJS_PRODUCTION__) {
             if ('serviceWorker' in navigator) {
                 window.addEventListener('load', () => {
@@ -180,7 +187,7 @@ export class RpgClientEngine {
             }
         }
 
-        this.controls = new KeyboardControls(this)
+        this.controls = this.context.inject(KeyboardControls)
     }
 
     private addResource(resourceClass, cb) {
@@ -333,7 +340,7 @@ export class RpgClientEngine {
             }
             // @ts-ignore
             const envUrl = this.envs.VITE_SERVER_URL
-            this.connection(
+            await this.connection(
                 serverUri.url ? serverUri.url + ':' + serverUri.port :
                     envUrl ? envUrl : undefined
             )
@@ -420,7 +427,7 @@ export class RpgClientEngine {
      * @returns {void}
      * @memberof RpgClientEngine
      */
-    connection(uri?: string) {
+    async connection(uri?: string) {
         const { standalone } = this.gameEngine
 
         this._serverUrl = uri || ''
@@ -451,12 +458,16 @@ export class RpgClientEngine {
             RpgPlugin.emit(HookClient.ConnectedError, [this, err, this.socket], true)
         })
 
-        this.socket.on('preLoadScene', (name: string) => {
-            if (this.lastScene == name) {
+        this.socket.on('preLoadScene', ({ id, reconnect }: { id: string, reconnect?: boolean }) => {
+            if (this.lastScene == id) {
                 return
             }
-            this.lastScene = name
-            this.renderer.transitionScene(name)
+            this.lastScene = id
+            this.renderer.transitionScene(id)
+            if (reconnect) {
+                this.roomJoin.next('')
+                this.roomJoin.complete() 
+            }
         })
 
         this.socket.on(SocketEvents.GameReload, () => {
@@ -467,7 +478,7 @@ export class RpgClientEngine {
             this.renderer.loadScene(name, data)
         })
 
-        this.socket.on(SocketEvents.ChangeServer, ({ url, port }) => {
+        this.socket.on(SocketEvents.ChangeServer, async({ url, port }) => {
             const connection = url + ':' + port
             if (this.lastConnection == connection) {
                 return
@@ -617,7 +628,7 @@ export class RpgClientEngine {
                             paramsChanged,
                             isShape
                         })
-                        
+
                         // perform actions on the sprite after creation/update
                         callAction(key, paramsChanged)
                     }
@@ -651,7 +662,7 @@ export class RpgClientEngine {
         RpgGui._setSocket(this.socket)
 
         if (standalone) {
-            this.socket.connection({
+            await this.socket.connection({
                 auth: {
                     token: this.session
                 }

package/src/Scene/Map.ts

@@ -1,14 +1,13 @@
-import { RpgCommonMap, RpgPlugin, HookClient, RpgShape, Utils, RpgCommonPlayer } from '@rpgjs/common'
+import { RpgCommonMap, RpgPlugin, HookClient, RpgShape, Utils, RpgCommonPlayer, InjectContext } from '@rpgjs/common'
 import TileMap from '../Tilemap'
 import * as _PixiViewport from 'pixi-viewport'
 import { type Viewport } from 'pixi-viewport'
 import { Scene, SceneObservableData, SceneSpriteLogic } from './Scene'
 import { spritesheets } from '../Sprite/Spritesheets'
 import { RpgSound } from '../Sound/RpgSound'
-import { GameEngineClient } from '../GameEngine'
 import { TiledLayerType, TiledMap } from '@rpgjs/tiled'
 import { RpgComponent } from '../Components/Component'
-import { CameraOptions } from '@rpgjs/types'
+import { type CameraOptions } from '@rpgjs/types'
 import { Assets, Container, Point, IRenderer, DisplayObjectEvents, utils, FederatedPointerEvent } from 'pixi.js'
 import { EventLayer } from './EventLayer'
 
@@ -53,10 +52,11 @@ export class SceneMap extends Scene {
     shapes = {}
 
     constructor(
-        public game: GameEngineClient,
+        protected context: InjectContext,
         private renderer: IRenderer,
-        private options: { screenWidth?: number, screenHeight?: number, drawMap?: boolean } = {}) {
-        super(game)
+        private options: { screenWidth?: number, screenHeight?: number, drawMap?: boolean } = {}
+    ) {
+        super(context)
         if (options.drawMap === undefined) this.options.drawMap = true
         this.onInit()
     }
@@ -97,7 +97,7 @@ export class SceneMap extends Scene {
 
         RpgCommonMap.bufferClient.set(obj.id, this.gameMap)
 
-        this.tilemap = new TileMap(this.gameMap.getData(), this.game.renderer)
+        this.tilemap = new TileMap(this.context, this.gameMap.getData())
 
         // TODO: Remove this
         Assets.reset()
@@ -370,6 +370,7 @@ export class SceneMap extends Scene {
         this.viewport.on(eventName, (...args) => {
             const ev: FederatedPointerEvent = args[0] as any
             const pos = ev.getLocalPosition(this.viewport as Viewport)
+            if (ev.defaultPrevented) return
             cb(pos, ev)
         })
     }

package/src/Scene/Scene.ts

@@ -1,4 +1,4 @@
-import { RpgPlugin, HookClient, DefaultInput } from '@rpgjs/common'
+import { RpgPlugin, HookClient, DefaultInput, InjectContext } from '@rpgjs/common'
 import { KeyboardControls } from '../KeyboardControls'
 import RpgSprite from '../Sprite/Character'
 import { Animation } from '../Effects/Animation'
@@ -29,7 +29,7 @@ export abstract class Scene {
     protected objects: Map<string, RpgComponent> = new Map()
     protected animationLayer: Container = new Container()
 
-    private controls: KeyboardControls
+    private controls: KeyboardControls = this.context.inject(KeyboardControls)
     private animations: Animation[] = []
 
     private _data: BehaviorSubject<SceneObservableData> = new BehaviorSubject({
@@ -37,6 +37,11 @@ export abstract class Scene {
         partial: {}
     })
 
+    /**
+     *  @deprecated Use `inject(GameEngineClient)` instead. Will be removed in v5
+     */
+    public game: GameEngineClient = this.context.inject(GameEngineClient)
+
     /**
      * Listen to the movement of objects on stage
      * 
@@ -63,9 +68,8 @@ export abstract class Scene {
         [key: string]: any
     }> = new Subject()
 
-    constructor(public game: GameEngineClient) {
+    constructor(protected context: InjectContext) {
         const { globalConfig } = this.game.clientEngine
-        this.controls = this.game.clientEngine.controls
         const mergeInputs = {
             ...DefaultInput,
             ...(globalConfig.inputs || {})

package/src/Tilemap/index.ts

@@ -1,4 +1,4 @@
-import { Utils } from '@rpgjs/common'
+import { InjectContext, Utils } from '@rpgjs/common'
 import ImageLayer from './ImageLayer'
 import TileLayer from './TileLayer'
 import TileSet from './TileSet'
@@ -25,9 +25,9 @@ export default class TileMap extends Container {
     } = {}
     private tilesLayer: Container = new Container()
     private frameTile: number = 0
+    private renderer: RpgRenderer = this.context.inject(RpgRenderer)
 
-
-    constructor(private data: MapInfo, private renderer: RpgRenderer) {
+    constructor(private context: InjectContext, private data: MapInfo) {
         super()
         this.x = 0
         this.y = 0

package/src/clientEntryPoint.ts

@@ -1,6 +1,7 @@
-import { HookClient, loadModules, ModuleType } from '@rpgjs/common'
+import { InjectContext, HookClient, loadModules, ModuleType } from '@rpgjs/common'
 import { GameEngineClient } from './GameEngine'
 import { RpgClientEngine } from './RpgClientEngine'
+import { setInject } from './inject'
 
 interface RpgClientEntryPointOptions {
     /** 
@@ -142,7 +143,8 @@ export default (modules: ModuleType[], options: RpgClientEntryPointOptions): Rpg
         }
     })
 
-    const gameEngine = new GameEngineClient()
-    const clientEngine = new RpgClientEngine(gameEngine, options)
-    return clientEngine
+    const context = new InjectContext()
+    setInject(context)
+
+    return context.inject(RpgClientEngine, [options])
 }

package/src/index.ts

@@ -1,6 +1,7 @@
 export { Direction, Control, Input, PrebuiltGui, HookServer, HookClient, RpgPlugin, RpgModule, RpgCommonPlayer as RpgSpriteLogic } from '@rpgjs/common'
 export { default as entryPoint } from './clientEntryPoint'
 export type { RpgClient, RpgSceneHooks, RpgSceneMapHooks, RpgSpriteHooks, RpgClientEngineHooks } from './RpgClient'
+export { RpgRenderer } from './Renderer'
 export { Scene as RpgScene } from './Scene/Scene'
 export { RpgClientEngine } from './RpgClientEngine'
 export { Spritesheet } from './Sprite/Spritesheet'
@@ -16,6 +17,7 @@ export { SceneMap as RpgSceneMap } from './Scene/Map'
 export { RpgGui } from './Gui/Gui';
 export { Timeline, Ease } from './Effects/Timeline';
 export { RpgComponent, RpgComponent as RpgSprite } from './Components/Component'
+export { KeyboardControls } from './KeyboardControls'
 export { World, room } from 'simple-room-client'
 
 import { spritesheets } from './Sprite/Spritesheets'
@@ -23,4 +25,5 @@ import { sounds } from './Sound/Sounds'
 export const RpgResource = {
     spritesheets,
     sounds
-}
+}
+export { inject } from './inject'

package/src/inject.ts

@@ -0,0 +1,34 @@
+import { InjectContext } from "@rpgjs/common";
+
+let instanceContext: InjectContext | null = null
+
+/**
+ * Dependency injection function for RPGJS client side.
+ * 
+ * This client-side `inject` function is used to retrieve instances of various classes within the RPGJS framework, 
+ * specifically for client-side modules. It enables developers to access singleton instances of key classes such as 
+ * `RpgClientEngine`, `KeyboardControls`, and `RpgRenderer`. Utilizing `inject` on the client side promotes modular 
+ * and maintainable code by simplifying dependency management.
+ *
+ * @template T The class type that you want to retrieve an instance of, relevant to client-side modules.
+ * @returns {T} Returns the singleton instance of the specified class, ensuring only one instance is used client-side.
+ * @since 4.2.0
+ *
+ * @example
+ * ```ts
+ * // Example of injecting the RpgClientEngine
+ * import { inject, RpgClientEngine } from '@rpgjs/client'
+ * const client = inject(RpgClientEngine)
+ * ```
+ */
+export function inject<T>(service: new (...args: any[]) => T, args: any[] = []): T {
+    return instanceContext!.inject(service, args);
+}
+
+export function setInject(context: InjectContext) {
+    instanceContext = context;
+}
+
+export function clearInject() {
+    instanceContext = null
+}