@rpgjs/common 3.3.2 → 4.0.0-beta.10

package/src/Module.ts

@@ -0,0 +1,108 @@
+import { RpgPlugin, HookServer, HookClient } from './Plugin'
+import { isArray, isClass, isFunction, isPromise } from './Utils'
+import { warning } from './Logger'
+
+enum Side {
+    Server = 'server',
+    Client = 'client'
+}
+
+type ModuleSide = {
+    client?: any,
+    server?: any
+}
+
+export type ModuleType = ModuleSide | [ModuleSide, {
+    client?: any,
+    server?: any
+}]
+
+export function RpgModule<T>(options: T) {
+    return (target) => {
+        for (let key in options) {
+            target.prototype[key] = options[key]
+        }
+    }
+}
+
+export async function loadModules(modules, obj, middleware?: Function): Promise<{ playerProps: any }> {
+    const { side, relations } = obj
+    let playerProps = {}
+    for (let module of modules) {
+        if (!module) continue
+        let plug: any = []
+        if (!isArray(module)) {
+            plug = [module]
+        }
+        else {
+            plug = module
+        }
+        const [moduleClassSides, options] = plug
+        const moduleClass = moduleClassSides[side]
+        if (!moduleClass) continue
+        let mod
+        if (options && side == Side.Client && options[Side.Server]) {
+            warning(`Data that may be sensitive (normally visible only on the server side) are made optional and visible on the client side.\nInstead, import the configuration with the server! flag into an import. Example: \n\nimport config from 'server!./config\n\n'`, options[Side.Server])
+        }
+        if (options && !isClass(moduleClass) && isFunction(moduleClass)) {
+            mod = new (moduleClass(options[side]))()
+        }
+        else if (isClass(moduleClass)) {
+            mod = new moduleClass()
+        }
+        else {
+            mod = moduleClass
+        }
+        if (middleware) {
+            mod = middleware(mod)
+            if (isPromise(mod)) {
+                mod = await mod
+            }
+        }
+        const { imports, maps, spritesheets, sounds, gui, scenes, engine, database, worldMaps, scalability, events } = mod
+        if (imports) {
+            await loadModules(imports, obj)
+        }
+        if (maps) {
+            RpgPlugin.on(HookServer.AddMap, () => maps)
+        }
+        if (events) {
+            RpgPlugin.on(HookServer.AddEvent, () => events)
+        }
+        if (worldMaps) {
+            RpgPlugin.on(HookServer.AddWorldMaps, () => worldMaps)
+        }
+        if (database) {
+            RpgPlugin.on(HookServer.AddDatabase, () => database)
+        }
+        if (spritesheets) {
+            RpgPlugin.on(HookClient.AddSpriteSheet, () => spritesheets)
+        }
+        if (sounds) {
+            RpgPlugin.on(HookClient.AddSound, () => sounds)
+        }
+        if (gui) {
+            RpgPlugin.on(HookClient.AddGui, () => gui)
+        }
+        const player = side == Side.Server ? mod.player : mod.sprite
+        const loadRelations = (hook, relatioName) => {
+            if (hook) {
+                for (let method in relations[relatioName]) {
+                    const hookName = relations[relatioName][method]
+                    if (hook[method]) RpgPlugin.on(hookName, hook[method])
+                }
+            }
+        }
+        loadRelations(player, 'player')
+        if (player && player.props) {
+            playerProps = Object.assign(playerProps, player.props)
+        }
+        loadRelations(engine, 'engine')
+        if (scalability) loadRelations(scalability._hooks, 'scalability')
+        if (scenes) loadRelations(scenes.map, 'sceneMap')
+    }
+
+    return {
+        playerProps
+    }
+}

package/src/Player.ts

@@ -0,0 +1,30 @@
+import { PendingMove } from '@rpgjs/types'
+import { AbstractObject } from './AbstractObject'
+
+export const LiteralDirection = {
+    1: 'up',
+    2: 'right',
+    3: 'down',
+    4: 'left'
+}
+
+export class RpgCommonPlayer extends AbstractObject {
+    events: any[] = []
+    layerName: string = ''
+    data: any = {}
+    pendingMove: PendingMove = []
+    inputsTimestamp: {
+        [inputName: string]: number
+    } = {}
+
+    /** 
+    * Display/Hide the GUI attached to this sprite
+    * 
+    * @prop {boolean} guiDisplay
+    * @since 3.0.0-beta.5
+    * @memberof RpgSprite
+    * */
+    guiDisplay: boolean
+}
+
+export default AbstractObject

package/src/Plugin.ts

@@ -0,0 +1,91 @@
+import { EventEmitter } from './EventEmitter'
+import { isArray } from './Utils'
+
+type PluginFunction = (obj: any, options?: any) => void
+type PluginSides = { client: null | PluginFunction, server:  null | PluginFunction }
+export type Plugin = PluginSides | [PluginSides, any]
+
+export enum HookServer {
+    Start = 'Server.Start',
+    Step = "Server.Step",
+    PlayerConnected = 'Server.onConnected',
+    PlayerDisconnected = 'Server.onDisconnected',
+    AddMap = 'Server.AddMap',
+    AddEvent = 'Server.AddEvent',
+    AddWorldMaps = 'Server.AddWorldMaps',
+    AddDatabase = 'Server.AddDatabase',
+    PlayerInput = 'Server.onInput',
+    PlayerJoinMap = 'Server.onJoinMap',
+    PlayerLeaveMap = 'Server.onLeaveMap',
+    PlayerLevelUp = 'Server.onLevelUp',
+    PlayerDead = 'Server.onDead',
+    PlayerInShape = 'Server.onInShape',
+    PlayerOutShape = 'Server.onOutShape',
+    PlayerMove = 'Server.PlayerMove',
+    PlayerCanChangeMap = 'Server.PlayerCanChangeMap',
+    ScalabilityPlayerConnected = 'Server.ScalabilityPlayerConnected',
+    ScalabilityChangeServer = 'Server.ScalabilityChangeServer'
+}
+
+export enum HookClient {
+    Start = 'Client.Start',
+    Step = 'Client.Step',
+    Connected = 'Client.Connected',
+    Disconnect = 'Client.Disconnect',
+    ConnectedError = 'Client.ConnectedError',
+
+    AddSpriteSheet = 'Client.AddSpriteSheet',
+    AddGui = 'Client.AddGui',
+    AddSound = 'Client.AddSound',
+    SendInput = 'Client.SendInput',
+
+    BeforeSceneLoading = 'Client.BeforeSceneLoading',
+    AfterSceneLoading = 'Client.AfterSceneLoading',
+    SceneMapLoading = 'Client.SceneMapLoading',
+    SceneAddSprite = 'Client.SceneAddSprite',
+    SceneOnChanges = 'Client.SceneOnChanges',
+    SceneDraw = 'Client.SceneDraw',
+    SceneRemoveSprite = 'Client.SceneRemoveSprite',
+
+    AddSprite = 'Client.AddSprite',
+    RemoveSprite = 'Client.RemoveSprite',
+    UpdateSprite = 'Client.UpdateSprite',
+    ChangesSprite = 'Client.ChangesSprite',
+    WindowResize = 'Client.WindowResize',
+    SpriteMove = 'Client.SpriteMove'
+}
+
+/**
+ * @deprecated
+ */
+export class PluginSystem extends EventEmitter {
+    private loadPlugins(plugins: Plugin[], shared: any, type: string) {
+        if (!plugins) return
+        for (let plugin of plugins) {
+            if (!plugin) continue
+            let plug: any = []
+            if (!isArray(plugin)) {
+                plug = [plugin]
+            }
+            else {
+                plug = plugin
+            }
+            const [side, options] = plug
+            if (!side[type]) continue
+            side[type]({
+                RpgPlugin,
+                ...shared
+            }, options)
+        }
+    }
+
+    loadServerPlugins(plugins, shared) {
+        this.loadPlugins(plugins, shared, 'server')
+    }
+
+    loadClientPlugins(plugins, shared) {
+        this.loadPlugins(plugins, shared, 'client')
+    }
+}
+
+export const RpgPlugin = new PluginSystem()

package/src/Scheduler.ts

@@ -0,0 +1,88 @@
+import { Tick } from '@rpgjs/types';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { EventEmitter } from './EventEmitter';
+import Utils from './Utils';
+
+export class Scheduler extends EventEmitter {
+    private maxFps?: number
+    private fps: number = 60
+    private deltaTime: number = 0
+    public frame: number = 0
+    private timestamp: number = 0
+    private requestedDelay: number = 0
+    private lastTimestamp: number = 0
+    private _tick: BehaviorSubject<Tick> = new BehaviorSubject({
+        timestamp: 0,
+        deltaTime: 0,
+        frame: 0,
+        deltaRatio: 0
+    })
+
+    get tick(): Observable<Tick> {
+        return this._tick.asObservable()
+    }
+
+    nextTick(timestamp: number) {
+        this.lastTimestamp = this.lastTimestamp || this.timestamp // first
+        this.deltaTime =  Utils.preciseNow() - this.timestamp
+        this.timestamp = timestamp
+        this._tick.next({
+            timestamp: this.timestamp,
+            deltaTime: this.deltaTime,
+            frame: this.frame,
+            deltaRatio: ~~this.deltaTime / ~~Utils.fps2ms(this.fps)
+        })
+        this.lastTimestamp = this.timestamp
+        this.frame++
+    }
+
+    /**
+     * start the schedule
+     * @return {Scheduler} returns this scheduler instance
+     */
+    start(options: {
+        maxFps?: number
+        fps?: number,
+        delay?: number
+    }) {
+        if (options.maxFps) this.maxFps = options.maxFps
+        if (options.fps) this.fps = options.fps
+        if (options.delay) this.requestedDelay = options.delay
+        const requestAnimationFrame = (fn: (timestamp: number) => void) => {
+            if (Utils.isBrowser()) {
+                window.requestAnimationFrame(fn.bind(this))
+            }
+            else {
+                setTimeout(() => {
+                    this.requestedDelay = 0
+                    fn(Utils.preciseNow())
+                }, Utils.fps2ms(this.fps) + this.requestedDelay)
+            }
+        }
+
+        if (!this.maxFps) {
+            const loop = (timestamp: number) => {
+                requestAnimationFrame(loop)
+                this.nextTick(timestamp)
+            }
+            requestAnimationFrame(loop)
+        }
+        else {
+            const msInterval = Utils.fps2ms(this.maxFps)
+            let now = Utils.preciseNow()
+            let then = Utils.preciseNow()
+            const loop = (timestamp: number) => {
+                requestAnimationFrame(loop)
+                now = Utils.preciseNow()
+                const elapsed = now - then
+                if (elapsed > msInterval) {
+                    then = now - (elapsed % msInterval)
+                    this.nextTick(timestamp)
+                }
+            }
+            requestAnimationFrame(loop)
+        }
+
+        return this;
+    }
+}

package/src/Shape.ts

@@ -0,0 +1,300 @@
+import { RpgCommonPlayer } from './Player'
+import { Hit, HitType } from './Hit'
+import { TiledObjectClass } from '@rpgjs/tiled'
+import { PlayerType } from '@rpgjs/types'
+import { Vector2d } from './Vector2d'
+import { AbstractObject } from './AbstractObject'
+
+export enum ShapePositioning {
+    Default = 'default',
+    Center = 'center'
+}
+
+type ShapeObject = TiledObjectClass & {
+    onIn?(player: RpgCommonPlayer)
+    onOut?(player: RpgCommonPlayer)
+    fixEvent?: RpgCommonPlayer,
+    positioning?: ShapePositioning
+}
+
+export class RpgShape extends TiledObjectClass {
+    _hitbox: any
+    type: string = HitType.Box
+    class: string = ''
+    /**
+    * Get/Set name
+    * @title name
+    * @prop { string } name
+    * @memberof Shape
+    */
+    name: string = ''
+    fixEvent?: RpgCommonPlayer
+    private playersIn: {
+        [playerid: string]: boolean
+    } = {}
+    private onIn: (player: RpgCommonPlayer) => void
+    private onOut: (player: RpgCommonPlayer) => void
+    clientContainer: any = null
+    /**
+    * Get/Set positioning
+    * @title positioning
+    * @prop { ShapePositioning } positioning
+    * @default default
+    * @memberof Shape
+    */
+    positioning?: ShapePositioning = ShapePositioning.Default
+    components: any[] = []
+
+    constructor(obj: ShapeObject) {
+        super()
+        Reflect.deleteProperty(obj, 'id')
+        this.set(obj)
+    }
+
+    private setPos(type: string, val: number) {
+        if (!this.hitbox.pos) return
+        if (this.isShapePosition()) {
+            this.hitbox[type] = val
+        }
+        else {
+            this.hitbox.pos[type] = val
+        }
+    }
+
+    get hasCollision(): boolean {
+        return this.getProperty<boolean, boolean>('collision', false)
+    }
+
+    // alias
+    get id(): any {
+        return this.name
+    }
+
+    get hitbox() {
+        if (this.fixEvent) {
+            this._hitbox.pos.x = this.fixEvent.position.x
+            this._hitbox.pos.y = this.fixEvent.position.y
+            switch (this.positioning) {
+                case ShapePositioning.Center:
+                    this._hitbox.pos.x -= this._hitbox.w / 2 - this.fixEvent.hitbox.w / 2
+                    this._hitbox.pos.y -= this._hitbox.h / 2 - this.fixEvent.hitbox.h / 2
+                    break
+            }
+        }
+        return this._hitbox
+    }
+
+    set hitbox(val) {
+        this._hitbox = val
+    }
+
+    /**
+    * Get/Set width
+    * @title width
+    * @prop { number } width
+    * @since 3.0.0-beta.5
+    * @memberof Shape
+    */
+    get width(): number {
+        return this.hitbox.w || 0
+    }
+
+    set width(val: number) {
+        this.setPos('w', val)
+    }
+
+    /**
+    * Get/Set height
+    * @title height
+    * @prop { number } height
+    * @since 3.0.0-beta.5
+    * @memberof Shape
+    */
+    get height(): number {
+        return this.hitbox.h || 0
+    }
+
+    set height(val: number) {
+        this.setPos('h', val)
+    }
+
+    /**
+    * Get/Set x
+    * @title x
+    * @prop { number } x
+    * @memberof Shape
+    */
+    get x(): number {
+        return this.hitbox.x || this.hitbox.pos.x
+    }
+
+    set x(val: number) {
+        this.setPos('x', val)
+    }
+
+    get z(): number | undefined {
+        return this.getProperty<number>('z')
+    }
+
+    /**
+    * Get/Set y
+    * @title y
+    * @prop { number } y
+    * @memberof Shape
+    */
+    get y(): number {
+        return this.hitbox.y || this.hitbox.pos.y
+    }
+
+    set y(val: number) {
+        this.setPos('y', val)
+    }
+
+    get position(): Vector2d {
+        return new Vector2d(this.x, this.y, this.z)
+    }
+
+    /**
+    * Get/Set properties
+
+    * @title Properties
+    * @prop { object } Properties
+    * @memberof Shape
+    */
+
+    isEvent(): boolean {
+        return this.type == PlayerType.Event
+    }
+
+    set(obj: ShapeObject) {
+        const hit = Hit.getHitbox(obj)
+        Object.assign(this, hit)
+        const objClone = { ...obj };
+        // Delete dimension and position because already managed and given by the hitbox above
+        ['width', 'height', 'x', 'y'].forEach((prop) => Reflect.deleteProperty(objClone, prop))
+        Object.assign(this, objClone)
+        const findPoint = (prop: string, isMin: boolean) => {
+            return this.hitbox.points.sort((a, b) => isMin ? a[prop] - b[prop] : b[prop] - a[prop])[0][prop]
+        }
+        if (this.type == HitType.Polygon) {
+            this.hitbox.minX = findPoint('x', true)
+            this.hitbox.maxX = findPoint('x', false)
+            this.hitbox.minY = findPoint('y', true)
+            this.hitbox.maxY = findPoint('y', false)
+        }
+        this.positioning = obj.positioning
+        this.fixEvent = obj.fixEvent
+        this.setComponent()
+    }
+
+    setComponent() {
+        const color = this.getProperty<string>('color')
+        const image = this.getProperty<string>('image')
+        if (color) {
+            this.components = [{
+                id: 'shape', value: {
+                    fill: color
+                }
+            }]
+            return
+        }
+        if (image) {
+            this.components = [{ id: 'image', value: image }]
+            return
+        }
+        if (this.text) {
+            this.components = [{ id: 'text', value: this.text.text }]
+            return
+        }
+        if (this.gid) {
+            this.components = [{ id: 'tile', value: this.gid }]
+            return
+        }
+    }
+
+    getType() {
+        return this.class || this.type
+    }
+
+    async in(player: AbstractObject): Promise<boolean> {
+        if (!this.playerIsIn(player)) {
+            this.playersIn[player.id] = true
+            player.inShapes[this.name] = this
+            await player.execMethod('onInShape', [this])
+            await player.execMethod('onIn', [player], this)
+            return true
+        }
+        return false
+    }
+
+    async out(player: AbstractObject): Promise<boolean> {
+        if (this.playerIsIn(player)) {
+            delete this.playersIn[player.id]
+            delete player.inShapes[this.name]
+            await player.execMethod('onOutShape', [this])
+            await player.execMethod('onOut', [player], this)
+            return true
+        }
+        return false
+    }
+
+    /**
+     * Whether the player is in this shape
+     * 
+     * @title Player is in this shape ?
+     * @method shape.playerIsIn(player)
+     * @returns {boolean}
+     * @memberof Shape
+     */
+    playerIsIn(player: AbstractObject): boolean {
+        return !!this.playersIn[player.id]
+    }
+
+    isShapePosition(): boolean {
+        return this.type !== HitType.Box && this.type !== HitType.Circle && this.type !== HitType.Polygon
+    }
+
+    /**
+      * Recover the player with the shape. You must have used the `attachShape()` method on the player
+      * 
+      * @title Get Player Owner
+      * @method shape.getPlayerOwner()
+      * @returns {RpgPlayer | undefined}
+      * @memberof Shape
+      */
+    getPlayerOwner(): RpgCommonPlayer | undefined {
+        return this.fixEvent
+    }
+
+    /**
+     * We get the rectangle of a shape (box, circle and polygon). We use in the grid system to recover a shape.
+     * Generally we add a margin (size of a tile) to detect if the player enters or leaves a shape
+     * @param margin 
+     * @returns { minX: number, minY: number, maxX: number, maxY: number }
+     */
+    getSizeBox(margin: number = 0): { minX: number, minY: number, maxX: number, maxY: number } {
+        if (this.type == HitType.Circle) {
+            const radius = this.hitbox.r
+            return {
+                minX: this.x - radius - margin,
+                maxX: this.x + radius + margin,
+                minY: this.y - radius - margin,
+                maxY: this.y + radius + margin
+            }
+        }
+        if (this.type == HitType.Polygon) {
+            return {
+                minX: this.x + this.hitbox.minX - margin,
+                maxX: this.x + this.hitbox.maxX + margin,
+                minY: this.y + this.hitbox.minY - margin,
+                maxY: this.y + this.hitbox.maxY + margin
+            }
+        }
+        return {
+            minX: this.x - margin,
+            maxX: this.x + this.width + margin,
+            minY: this.y - margin,
+            maxY: this.y + this.height + margin
+        }
+    }
+}