@rpgjs/client 3.3.2 → 4.0.0-beta.3

package/src/Renderer.ts

@@ -0,0 +1,263 @@
+import { RpgPlugin, HookClient } from '@rpgjs/common'
+import { SceneMap } from './Scene/Map'
+import { Scene } from './Scene/Scene'
+import { Scene as PresetScene } from './Presets/Scene'
+import { RpgGui } from './RpgGui'
+import { RpgClientEngine } from './RpgClientEngine'
+import type { App, ComponentPublicInstance } from 'vue'
+import { TransitionScene } from './Effects/TransitionScene'
+import { Subject, forkJoin } from 'rxjs'
+import { GameEngineClient } from './GameEngine'
+import { SpinnerGraphic } from './Effects/Spinner'
+import { autoDetectRenderer, Container, Graphics, ICanvas, IRenderer } from 'pixi.js'
+
+export enum TransitionMode {
+    None,
+    Fading
+}
+
+enum ContainerName {
+    Map = 'map'
+}
+
+export class RpgRenderer {
+    public vm: ComponentPublicInstance
+    public app: App
+    public readonly stage: Container = new Container()
+    private readonly sceneContainer: Container = new Container()
+    private readonly fadeContainer: Graphics = new Graphics()
+    private readonly spinner: SpinnerGraphic = new SpinnerGraphic(this.clientEngine)
+    public options: any = {}
+    public guiEl: HTMLDivElement
+
+    private scene: Scene | null = null
+    private renderer: IRenderer
+    private _width: number = 800
+    private _height: number = 400
+    private canvasEl: HTMLElement
+    private selector: HTMLElement
+    private gameEngine: GameEngineClient = this.clientEngine.gameEngine
+    private loadingScene = {
+        transitionIn: new Subject(),
+        transitionOut: new Subject()
+    }
+    private freeze: boolean = false
+    private prevObjectScene: any = {}
+    public transitionMode: TransitionMode = TransitionMode.Fading
+
+    constructor(private clientEngine: RpgClientEngine) {
+        this.clientEngine.tick.subscribe(({ timestamp, deltaRatio, frame, deltaTime }) => {
+            this.draw(timestamp, deltaTime, deltaRatio, frame)
+        })
+        this.transitionCompleted()
+    }
+
+    /** @internal */
+    async init() {
+        this.onDOMLoaded()
+    }
+
+    /** @internal */
+    _resize(w: number, h: number) {
+        if (!w) w = this.options.canvas.width
+        if (!h) h = this.options.canvas.height
+        const scene = this.getScene<SceneMap>()
+        if (this.scene && scene?.viewport) {
+            scene.viewport.screenWidth = w
+            scene.viewport.screenHeight = h
+        }
+        if (this.vm) {
+            this.vm.$el.style = `width:${w}px;height:${h}px`
+        }
+        this.renderer.resize(w, h)
+        this._width = w
+        this._height = h
+        this.fadeContainer.beginFill(0x00000)
+        this.fadeContainer.drawRect(0, 0, w, h)
+        this.fadeContainer.endFill()
+        this.spinner.x = w * 0.5
+        this.spinner.y = h * 0.5
+    }
+
+    get canvas(): ICanvas {
+        return this.renderer.view
+    }
+
+    get height(): number {
+        return this._height
+    }
+
+    set height(val: number) {
+        this._resize(this._width, val)
+    }
+
+    get width(): number {
+        return this._width
+    }
+
+    set width(val: number) {
+        this._resize(val, this.height)
+    }
+
+    /** @internal */
+    onDOMLoaded() {
+        let options = {
+            antialias: true,
+            ...this.options.canvas
+        };
+        this.renderer = autoDetectRenderer(options)
+        this.selector = document.body.querySelector(this.options.selector)
+        this.guiEl = this.selector.querySelector(this.options.selectorGui)
+        this.canvasEl = this.selector.querySelector(this.options.selectorCanvas)
+
+        if (!this.guiEl) {
+            this.guiEl = document.createElement('div')
+            this.selector.appendChild(this.guiEl)
+        }
+
+        if (!this.canvasEl) {
+            this.selector.insertBefore(this.renderer.view as HTMLCanvasElement, this.selector.firstChild)
+            const [canvas] = document.querySelector(this.options.selector).children
+            canvas.style.position = 'absolute'
+        }
+        else {
+            this.canvasEl.appendChild(this.renderer.view as HTMLCanvasElement)
+        }
+
+        this.stage.addChild(this.sceneContainer)
+        this.stage.addChild(this.fadeContainer)
+        this.fadeContainer.addChild(this.spinner)
+
+        this.fadeContainer.visible = false
+        this.fadeContainer.alpha = 0
+
+        RpgGui._initalize(this.clientEngine)
+
+        this.resize()
+    }
+
+    /** @internal */
+    resize() {
+        const size = () => {
+            const { offsetWidth, offsetHeight } = this.canvasEl || this.selector
+            this._resize(offsetWidth, offsetHeight)
+            RpgPlugin.emit(HookClient.WindowResize)
+        }
+        window.addEventListener('resize', size)
+        size()
+    }
+
+    /** @internal */
+    getScene<T = Scene>(): T | null {
+        return this.scene as any
+    }
+
+    /** @internal */
+    draw(t: number, deltaTime: number, deltaRatio: number, frame: number) {
+        if (!this.renderer) return
+        if (this.scene && !this.freeze) this.scene.draw(t, deltaTime, deltaRatio, frame)
+        this.renderer.render(this.stage)
+    }
+
+    /** @internal */
+    async loadScene(name: string, obj) {
+        const scene = this.getScene<SceneMap | null>()
+        if (scene && scene.data.id == obj.id) {
+            const container = await scene.load(obj, this.prevObjectScene, true)
+            this.sceneContainer.removeChildren()
+            this.sceneContainer.addChild(container)
+            scene.updateTilesOverlayAllSprites()
+            this.scene?.update()
+            return
+        }
+        this.loadingScene.transitionIn.next({ name, obj })
+        this.loadingScene.transitionIn.complete()
+    }
+
+    private async createScene(name: string, obj) {
+        const container = await this.getScene<SceneMap>()?.load(obj, this.prevObjectScene)
+        this.prevObjectScene = { ...obj }
+        this.sceneContainer.children.forEach(child => {
+            if (child.name === ContainerName.Map) this.sceneContainer.removeChild(child)
+        })
+        if (container) {
+            container.name = ContainerName.Map
+            this.sceneContainer.addChild(container)
+        }
+        this.scene?.update()
+    }
+
+    /** @internal */
+    transitionScene(name: string) {
+        this.freeze = true
+        this.fadeContainer.visible = true
+        RpgPlugin.emit(HookClient.BeforeSceneLoading, {
+            name
+        })
+        this.clientEngine.controls.stopInputs()
+        const finish = () => {
+            this.clearScene()
+            this.loadingScene.transitionOut.next(name)
+            this.loadingScene.transitionOut.complete()
+        }
+        if (this.transitionMode == TransitionMode.Fading) {
+            new TransitionScene(this.clientEngine, this.fadeContainer)
+                .addFadeOut()
+                .onComplete(finish)
+                .start()
+        }
+        else {
+            finish()
+        }
+    }
+
+    /** @internal */
+    transitionCompleted() {
+        this.loadingScene = {
+            transitionIn: new Subject(),
+            transitionOut: new Subject()
+        }
+        this.clientEngine.roomJoin = new Subject()
+        forkJoin({
+            in: this.loadingScene.transitionIn,
+            out: this.loadingScene.transitionOut,
+            room: this.clientEngine.roomJoin
+        }).subscribe(async (data: { in: any }) => {
+            const { in: { obj, name } } = data
+            const scenes = this.options.scenes || {}
+            switch (name) {
+                case PresetScene.Map:
+                    const sceneClass = scenes[PresetScene.Map] || SceneMap
+                    this.scene = new sceneClass(this.gameEngine, this.renderer, {
+                        screenWidth: this.renderer.screen.width,
+                        screenHeight: this.renderer.screen.height,
+                        drawMap: this.options.drawMap
+                    })
+                    break;
+            }
+            await this.createScene(name, obj)
+            this.freeze = false
+            const finish = () => {
+                this.clientEngine.controls.listenInputs()
+                this.fadeContainer.visible = false
+                this.transitionCompleted()
+                RpgPlugin.emit(HookClient.AfterSceneLoading, this.scene)
+            }
+            if (this.transitionMode == TransitionMode.Fading) {
+                new TransitionScene(this.clientEngine, this.fadeContainer)
+                    .addFadeIn()
+                    .onComplete(finish)
+                    .start()
+            }
+            else {
+                finish()
+            }
+        })
+    }
+
+    /** @internal */
+    clearScene() {
+        this.scene = null
+        this.sceneContainer.removeChildren()
+    }
+}

package/src/Resources.ts

@@ -0,0 +1,40 @@
+import { RpgClientEngine } from "./RpgClientEngine"
+import { Utils } from '@rpgjs/common'
+
+/**
+* Get/Set images in resources
+ ```ts
+    import { RpgResource } from '@rpg/client'
+    const fileLink = RpgResource.spritesheets.get('resource_id')
+  ```
+* @title Get/Set image link
+* @prop { Map< string, string > } spritesheets
+* @memberof Resources
+*/
+/**
+* Get/Set sounds in resources
+ ```ts
+    import { RpgResource } from '@rpg/client'
+    const fileLink = RpgResource.sounds.get('resource_id')
+  ```
+* @title Get/Set sound link
+* @prop { Map< string, string > } sounds
+* @memberof Resources
+*/
+export function _initResource(memory: Map<string, any>, _resources, prop: string, engine: RpgClientEngine) {
+    for (let resource of _resources) {
+        const pluralProp = prop + 's'
+        if (resource[pluralProp]) {
+            for (let key in resource[pluralProp]) {
+                const instance = new resource()
+                instance[prop] = engine.getResourceUrl(resource[pluralProp][key])
+                memory.set(key, instance)
+            }
+        }
+        else {
+            const instance = new resource(engine)
+            instance[prop] = engine.getResourceUrl(instance[prop])
+            memory.set(resource.id, instance)
+        }
+    }
+}

package/src/RpgClient.ts

@@ -0,0 +1,333 @@
+import { ModuleType } from '@rpgjs/common'
+import { SceneMap } from './Scene/Map'
+import { RpgClientEngine } from './RpgClientEngine'
+import { RpgComponent } from './Components/Component'
+import { Loader } from 'pixi.js'
+
+type RpgClass<T = any> = new (...args: any[]) => T
+
+export interface RpgClientEngineHooks {
+    /**
+     * When the engine is started. If you send false, you prevent the client from connecting to the server
+     * 
+     * @prop { (engine: RpgClientEngine) => boolean | any } [onStart]
+     * @memberof RpgEngineHooks
+     */
+    onStart?: (engine: RpgClientEngine) => boolean | void
+
+    /**
+     * Each frame
+     * 
+     * @prop { (engine: RpgClientEngine, t: number) => boolean | any } [onStep]
+     * @memberof RpgEngineHooks
+     */
+     onStep?: (engine: RpgClientEngine, t?: number, dt?: number) => any
+
+    /**
+     * Recover keys from the pressed keyboard
+     * 
+     * @prop { (engine: RpgClientEngine, obj: { input: string, playerId: number }) => any } [onInput]
+     * @memberof RpgEngineHooks
+     */
+    onInput?: (engine: RpgClientEngine, obj: { input: string, playerId: number }) => any
+
+    /**
+     * Called when the user is connected to the server
+     * 
+     * @prop { (engine: RpgClientEngine, socket: any) => any } [onConnected]
+     * @memberof RpgEngineHooks
+     */
+    onConnected?: (engine: RpgClientEngine, socket: any) => any
+
+    /**
+     * Called when the user is disconnected to the server
+     * 
+     * @prop { (engine: RpgClientEngine, reason: any, socket: any) => any } [onDisconnect]
+     * @memberof RpgEngineHooks
+     */
+    onDisconnect?: (engine: RpgClientEngine, reason: any, socket: any) => any
+
+    /**
+     * Called when there was a connection error
+     * 
+     * @prop { (engine: RpgClientEngine, err: any, socket: any) => any } [onConnectError]
+     * @memberof RpgEngineHooks
+     */
+    onConnectError?: (engine: RpgClientEngine, err: any, socket: any) => any
+
+    /**
+     * Called when window is resized
+     * 
+     * @prop { () => any } [onWindowResize]
+     * @since 3.0.0-beta.4
+     * @memberof RpgEngineHooks
+     */
+    onWindowResize?: () => any
+}
+
+export interface RpgSpriteHooks {
+    /**
+     * As soon as the sprite is initialized
+     * 
+     * @prop { (sprite: RpgSprite) => any } [onInit]
+     * @memberof RpgSpriteHooks
+     */
+    onInit?: (sprite: RpgComponent) => any
+
+    /**
+     * Called when the sprite is deleted
+     * 
+     * @prop { (sprite: RpgSprite) => any } [onDestroy]
+     * @memberof RpgSpriteHooks
+     */
+    onDestroy?: (sprite: RpgComponent) => any
+
+    /**
+     * As soon as a data is changed on the server side (the name for example), you are able to know the new data but also the old data.
+     * 
+     * @prop { (sprite: RpgSprite, data: any, old: any) => any } [onChanges]
+     * @memberof RpgSpriteHooks
+     */
+    onChanges?: (sprite: RpgComponent, data: any, old: any) => any
+
+    /**
+     * At each tick, the method is called
+     * 
+     * @prop { (sprite: RpgSprite, obj: any) => any } [onUpdate]
+     * @memberof RpgSpriteHooks
+     */
+    onUpdate?: (sprite: RpgComponent, obj: any) => any
+
+    /**
+     * When the x, y positions change
+     * 
+     * @prop { (sprite: RpgSprite) => any } [onMove]
+     * @since 3.0.0-beta.4
+     * @memberof RpgSpriteHooks
+     */
+    onMove?: (sprite: RpgComponent) => any
+}
+
+export interface RpgSceneHooks<Scene> {
+     /**
+     * a sprite has been added on the scene
+     * 
+     * @prop { (scene: RpgScene, sprite: RpgComponent) => any } [onAddSprite]
+     * @memberof RpgSceneHooks
+     */
+    onAddSprite?: (scene: Scene, sprite: RpgComponent) => any
+
+     /**
+     * a sprite has been removed on the scene
+     * 
+     * @prop { (scene: RpgScene, sprite: RpgSprite) => any } [onRemoveSprite]
+     * @memberof RpgSceneHooks
+     */
+    onRemoveSprite?: (scene: Scene, sprite: RpgComponent) => any
+
+     /**
+     * Before the scene is loaded
+     * 
+     * @prop { (scene: RpgScene) => any } [onBeforeLoading]
+     * @memberof RpgSceneHooks
+     */
+    onBeforeLoading?: (scene: Scene) => any
+
+     /**
+     *  When the scene is loaded (Image of the loaded tileset, drawing completed and viewport assigned)
+     * 
+     * @prop { (scene: RpgScene) => any } [onAfterLoading]
+     * @memberof RpgSceneHooks
+     */
+    onAfterLoading?: (scene: Scene) => any
+
+     /**
+     * When server data changes on the map (events, players, or other)
+     * 
+     * @prop { (scene: RpgScene, obj: { data: any, partial: any }) => any } [onChanges]
+     * @memberof RpgSceneHooks
+     */
+    onChanges?: (scene: Scene, obj: { data: any, partial: any }) => any
+
+     /**
+     *  the scene is drawn
+     * 
+     * @prop { (scene: RpgScene, t: number) => any } [onDraw]
+     * @memberof RpgSceneHooks
+     */
+    onDraw?: (scene: Scene, t: number) => any
+}
+
+export interface RpgSceneMapHooks extends RpgSceneHooks<SceneMap> {
+    /**
+     * The map and resources are being loaded
+     * 
+     * @prop { (scene: RpgSceneMap, loader: PIXI.Loader) => any } [onMapLoading]
+     * @memberof RpgSceneHooks
+     */
+    onMapLoading?: (scene: SceneMap, loader: Loader) => any
+}
+
+export interface RpgClient {
+    /**
+     * Adding sub-modules
+     * 
+     * @prop { { client: null | Function, server: null | Function }[]} [imports]
+     * @memberof RpgClient
+     */
+    imports?: ModuleType[]
+
+    /**
+     * Object containing the hooks concerning the engine
+     * 
+     * ```ts
+     * import { RpgClientEngine, RpgClientEngineHooks, RpgModule, RpgClient } from '@rpgjs/client'
+     * 
+     * const engine: RpgClientEngineHooks = {
+     *      onConnected(engine: RpgClientEngine) {
+     *          console.log('client is connected')
+     *      }
+     * }
+     * 
+     * @RpgModule<RpgClient>({
+     *      engine
+     * })
+     * class RpgClientModule {}
+     * ```
+     * 
+     * @prop {RpgClientEngineHooks} [engine]
+     * @memberof RpgClient
+     */
+    engine?: RpgClientEngineHooks
+
+    /** 
+     * Array containing the list of spritesheets
+     * An element contains a class with the `@Spritesheet` decorator
+     * 
+     * ```ts
+     * import { Spritesheet, Animation, Direction, RpgClient, RpgModule } from '@rpgjs/client'
+     * 
+     * @Spritesheet({
+     *      id: 'chest',
+     *      image: require('./assets/chest.png'),
+     *      // other options
+     * })
+     * class Chest  { }
+     * 
+     * @RpgModule<RpgClient>({
+     *      spritesheets: [
+     *          Chest
+     *      ]
+     * })
+     * class RpgClientEngine {}
+     * ```
+     * 
+     * [Guide: Create Sprite](/guide/create-sprite.html)
+     * 
+     * @prop {Array<Class>} [spritesheets]
+     * @memberof RpgClient
+     * */
+    spritesheets?: RpgClass[],
+
+    /** 
+     * Array containing the list of VueJS components
+     * 
+     * ```ts
+     * import { RpgClient, RpgModule } from '@rpgjs/client'
+     * 
+     * const component = {
+     *      name: 'my-gui',
+     *      template: `
+     *          <div>
+     *              Component
+     *          </div>
+     *      `
+     * }
+     * 
+     * @RpgModule<RpgClient>({
+     *      gui: [
+     *          component
+     *      ]
+     * })
+     * class RpgClientEngine {}
+     * ```
+     * 
+     * [Guide: Create GUI](/guide/create-gui.html)
+     * 
+     * @prop {Array<Component of VueJS>} [gui]
+     * @memberof RpgClient
+     * */
+    gui?: any[],
+
+    /** 
+     * Array containing the list of sounds
+     * An element contains a class with the `@Sound` decorator
+     * 
+     * ```ts
+     * import { Sound, RpgModule, RpgClient } from '@rpgjs/client'
+     * 
+     * @Sound({
+     *      sounds: {
+     *          town: require('./assets/Town_Theme.ogg')
+     *      }
+     * })
+     * class Sounds {}
+     * 
+     * @RpgModule<RpgClient>({
+     *      sounds: [ Sounds ]
+     * })
+     * class RpgClientEngine {}
+     * ```
+     * 
+     * @prop {Array<Class>} [sounds]
+     * @memberof RpgClient
+     * */
+    sounds?: RpgClass[],
+
+    /** 
+     * Give the `RpgSprite` class. A Sprite represents a player or an event
+     * 
+     * ```ts
+     * import { RpgSprite, RpgSpriteHooks, RpgClient, RpgModule } from '@rpgjs/client'
+     * 
+     * export const sprite: RpgSpriteHooks = {
+     *    onInit(sprite: RpgSprite) {}
+     * }
+     * 
+     * @RpgModule<RpgClient>({
+     *      sprite
+     * })
+     * class RpgClientEngine {}
+     * ``` 
+     * 
+     * @prop {RpgSpriteHooks} [sprite]
+     * @memberof RpgClient
+     * */
+    sprite?: RpgSpriteHooks
+
+    /** 
+     * Reference the scenes of the game. Here you can put your own class that inherits RpgSceneMap
+     * 
+     * ```ts
+     * import { RpgSceneMapHooks, RpgClient, RpgModule } from '@rpgjs/client'
+     * 
+     * export const sceneMap: RpgSceneMapHooks = {
+     *     
+     * }
+     * 
+     * @RpgModule<RpgClient>({
+     *      scenes: {
+     *          // If you put the RpgSceneMap scene, Thhe key is called mandatory `map`
+     *          map: sceneMap
+     *      }
+     * })
+     * class RpgClientEngine {}
+     * ``` 
+     * 
+     * @prop { [sceneName: string]: RpgSceneMapHooks } [scenes]
+     * @memberof RpgClient
+     * */
+    scenes?: {
+        map: RpgSceneMapHooks
+    }
+}