@rpgjs/common 3.3.2 → 4.0.0-beta.10

package/src/Color.ts

@@ -0,0 +1,29 @@
+type RGB = [number, number, number];
+
+function hexToRGB(hex: string): RGB {
+    let r = parseInt(hex.substring(0, 2), 16);
+    let g = parseInt(hex.substring(2, 4), 16);
+    let b = parseInt(hex.substring(4, 6), 16);
+    return [r, g, b];
+}
+
+function RGBToHex(rgb: RGB): string {
+    let r = rgb[0].toString(16).padStart(2, '0');
+    let g = rgb[1].toString(16).padStart(2, '0');
+    let b = rgb[2].toString(16).padStart(2, '0');
+    return r + g + b;
+}
+
+export function transitionColor(startColor: string, endColor: string, steps: number): string[] {
+    let startRGB = hexToRGB(startColor.replace('#', ''));
+    let endRGB = hexToRGB(endColor.replace('#', ''));
+    let deltaRGB = [(endRGB[0] - startRGB[0]) / steps, (endRGB[1] - startRGB[1]) / steps, (endRGB[2] - startRGB[2]) / steps];
+
+    let colors: string[] = [];
+    for (let i = 0; i < steps; i++) {
+        let color = [startRGB[0] + deltaRGB[0] * i, startRGB[1] + deltaRGB[1] * i, startRGB[2] + deltaRGB[2] * i];
+        colors.push(RGBToHex(color as any));
+    }
+    colors.push(endColor.replace('#', ''));
+    return colors;
+}

package/src/DefaultInput.ts

@@ -0,0 +1,26 @@
+import { Controls, Input, Control } from '@rpgjs/types'
+
+export const DefaultInput: Controls = {
+    [Control.Up]: {
+        repeat: true,
+        bind: Input.Up
+    },
+    [Control.Down]: {
+        repeat: true,
+        bind: Input.Down
+    },
+    [Control.Right]: {
+        repeat: true,
+        bind: Input.Right
+    },
+    [Control.Left]: {
+        repeat: true,
+        bind: Input.Left
+    },
+    [Control.Action]: {
+        bind: [Input.Space, Input.Enter]
+    },
+    [Control.Back]: {
+        bind: Input.Escape
+    }
+} 

package/src/Event.ts

@@ -0,0 +1,3 @@
+import { RpgCommonPlayer } from './Player'
+
+export class RpgCommonEvent extends RpgCommonPlayer {}

package/src/EventEmitter.ts

@@ -0,0 +1,52 @@
+import { isPromise } from './Utils'
+
+export class EventEmitter {
+    private listeners: {
+        [eventName: string]: Function[]
+    } = {}
+
+    private listenersOnce: {
+        [eventName: string]: Function
+    } = {}
+
+    once(name: string, cb: Function): EventEmitter {
+        this.listenersOnce[name] = cb
+        return this
+    }
+
+    on(name: string, cb: Function): EventEmitter {
+        if (!this.listeners[name]) this.listeners[name] = []
+        this.listeners[name].push(cb)
+        return this
+    }
+
+    emit(name: string, data?: any, rest: boolean = false): Promise<any[]> {
+        const ret: any = []
+        if (this.listeners[name]) {
+            for (let listener of this.listeners[name]) {
+                if (rest) ret.push(listener(...data))
+                else ret.push(listener(data))
+            }
+        }
+        else if (this.listenersOnce[name]) {
+            if (rest) ret.push(this.listenersOnce[name](...data))
+            else ret.push(this.listenersOnce[name](data))
+        }
+        return Promise.all(ret.map(val => {
+            if (!isPromise(val)) {
+                return Promise.resolve(val)
+            }
+            return val
+        }))
+    }
+
+    off(name: string) {
+        delete this.listeners[name]
+        delete this.listenersOnce[name]
+    }
+
+    clear() {
+        this.listeners = {}
+        this.listenersOnce = {}
+    }
+}

package/src/Game.ts

@@ -0,0 +1,150 @@
+import Utils, { generateUID, isClass } from './Utils'
+import { EventEmitter } from './EventEmitter'
+import { RpgCommonPlayer } from './Player'
+import { constructor, Control, Controls, Direction } from '@rpgjs/types'
+import { RpgPlugin } from './Plugin'
+import { GameWorker } from './Worker'
+import { HitObject } from './Hit'
+import { RpgShape } from './Shape'
+import { TiledObjectClass } from '@rpgjs/tiled'
+
+export enum GameSide {
+    Server = 'server',
+    Client = 'client',
+    Worker = 'worker'
+}
+
+export class RpgCommonGame extends EventEmitter {
+    events: any
+    world: any
+
+    constructor(public side: GameSide) {
+        super()
+        this.events = {} // events for all player in map
+    }
+
+    get isWorker() {
+        return this.side == 'worker'
+    }
+
+    start(world) {
+        this.world = world
+    }
+
+    createWorkers(options: any) {
+        return new GameWorker(options)
+    }
+
+    addObject(_class, playerId?: string) {
+        let event
+        if (!playerId) playerId = generateUID()
+        if (isClass(_class)) {
+            event = new _class(this, playerId)
+        }
+        else {
+            event = _class
+        }
+        return event
+    }
+
+    addPlayer(playerClass, playerId?: string) {
+        const player = this.addObject(playerClass, playerId)
+        return player
+    }
+
+    addEvent<T>(eventClass: constructor<T>, eventId?: string): T {
+        const event = this.addObject(eventClass, eventId)
+        return event
+    }
+
+    addShape(obj: HitObject): RpgShape {
+        const id = obj.name = (obj.name || generateUID()) as string
+        const shape = new RpgShape(obj as TiledObjectClass)
+        shape.name = id
+        return shape
+    }
+
+    async processInput<RpgPlayer extends RpgCommonPlayer>(playerId: string, controls?: Controls): Promise<{
+        player: RpgPlayer,
+        inputs: string[]
+    }> {
+        const player: RpgPlayer = this.world.getObject(playerId)
+        const inputs: string[] = []
+
+        if (!player) return {
+            player,
+            inputs
+        }
+
+        const routesMove: any = []
+        
+        while (player.pendingMove.length > 0) {
+            const inputData = player.pendingMove.shift()
+            
+            let { input, deltaTimeInt } = inputData as any
+            let moving = false
+
+            if (controls && controls[input]) {
+                const control = controls[input]
+                const now = Date.now()
+                const inputTime = player.inputsTimestamp[input] || 0
+
+                if (inputTime >= now) {
+                    continue
+                }
+
+                if (control.delay) {
+                    let duration: number
+                    let otherControls: (string | Control)[] = []
+
+                    if (typeof control.delay == 'number') {
+                        duration = control.delay
+                    }
+                    else {
+                        duration  = control.delay.duration
+                        if (control.delay.otherControls) {
+                            otherControls = control.delay.otherControls
+                        }
+                    }
+
+                    player.inputsTimestamp[input] = now + duration
+
+                    for (let control of otherControls) {
+                        player.inputsTimestamp[control] = now + duration
+                    }
+                }                
+            }
+            
+            if (input == Control.Action) {
+                await player.triggerCollisionWith(RpgCommonPlayer.ACTIONS.ACTION)
+            }
+            else if (
+                input == Direction.Left ||
+                input == Direction.Right ||
+                input == Direction.Up ||
+                input == Direction.Down
+            ) {
+                moving = true
+                const isMove = await player.moveByDirection(+input, deltaTimeInt || 1)
+                if (isMove) {
+                    routesMove.push(inputData)
+                }
+            }
+            // TODO, is Worker
+            // verify if is server because, rpg mode causes a bug (see #184)
+            if (this.side == GameSide.Server) {
+                await RpgPlugin.emit('Server.onInput', [player, {
+                    ...inputData,
+                    moving
+                }], true)
+            }
+
+            inputs.push(input)
+        }
+
+        return {
+            player,
+            inputs
+        }
+    }
+}

package/src/Hit.ts

@@ -0,0 +1,70 @@
+import { HitEllipse, HitObject, HitType } from '@rpgjs/types'
+import  SAT from 'sat'
+import { isInstanceOf } from './Utils'
+export { HitType, HitObject } from '@rpgjs/types'
+
+class HitClass {
+
+    createObjectHitbox(x: number, y: number, z: number, w: number, h: number): SAT.Box {
+        return new SAT.Box(new SAT.Vector(x, y - z), w, h)
+    }
+    
+    getHitbox(obj: HitObject, offset?: { x: number, y: number }): {
+        hitbox: SAT,
+        type?: string,
+        name?: string
+    } {
+        let hitbox: SAT, type: string | undefined
+        if (!offset) offset = { x: 0, y: 0 }
+        const x = obj.x + offset.x
+        const y = obj.y + offset.y
+        if ('ellipse' in obj || obj.type == HitType.Circle) {
+            type = HitType.Circle
+            const radius = (<HitEllipse>obj).width / 2
+            hitbox = new SAT.Circle(new SAT.Vector(x + radius, y + radius), radius)
+        }
+        else if ('polygon' in obj) {
+            type = HitType.Polygon
+            hitbox = new SAT.Polygon(new SAT.Vector(x, y), obj.polygon.map(pos => new SAT.Vector(+pos.x, +pos.y)))
+        }
+        else if (!('polygon' in obj) && ('width' in obj) && ('height' in obj)) {
+            type = HitType.Box
+            hitbox = new SAT.Box(new SAT.Vector(x, y), obj.width, obj.height)
+        }
+        else {
+            hitbox = new SAT.Vector(x, y)
+            type = obj.type
+        }
+        return { 
+            hitbox,
+            type,
+            name: obj.name
+        }
+    }
+
+    testPolyCollision(type: string, hit1: SAT, hit2: SAT): boolean {
+        let collided = false
+        if (type == HitType.Box) {
+            if (hit1.pos.x <= hit2.pos.x + hit2.w &&
+                hit1.pos.x + hit1.w >= hit2.pos.x &&
+                hit1.pos.y <= hit2.pos.y + hit2.h &&
+                hit1.h + hit1.pos.y >= hit2.pos.y) {
+                return true
+             }
+            return false
+        }
+        if (isInstanceOf(hit1, SAT.Box)) hit1 = hit1.toPolygon()
+        if (isInstanceOf(hit2, SAT.Box)) hit2 = hit2.toPolygon()
+        switch (type) {
+            case HitType.Circle:
+                collided = SAT.testPolygonCircle(hit1, hit2)
+            break
+            case HitType.Polygon:
+                collided = SAT.testPolygonPolygon(hit1, hit2)
+            break
+        }
+        return collided
+    }
+}
+
+export const Hit = new HitClass()

package/src/Logger.ts

@@ -0,0 +1,7 @@
+export function log(message) {
+    return new Error(`[RPGJS] - ${message}`)
+}
+
+export function warning(...message) {
+    console.warn('[RPGJS Warning]', ...message)
+}

package/src/Map.ts

@@ -0,0 +1,335 @@
+import { HitObject } from './Hit'
+import SAT from 'sat'
+import Utils, { random, intersection, generateUID, isString } from './Utils'
+import { RpgShape } from './Shape'
+import { Hit } from './Hit'
+import { VirtualGrid } from './VirtualGrid'
+import { RpgCommonWorldMaps } from './WorldMaps'
+import { TiledLayer, TiledLayerType, TiledMap, Layer, Tileset, Tile, TiledObject, TiledObjectClass, MapClass } from '@rpgjs/tiled'
+import { Vector2d } from './Vector2d'
+import { AbstractObject } from './AbstractObject'
+import { RpgCommonGame } from './Game'
+import { Observable, map, Subject, takeUntil, mergeMap, from, filter } from 'rxjs'
+import { HitBox, MovingHitbox, Tick } from '@rpgjs/types'
+
+const buffer = new Map()
+const bufferClient = new Map()
+
+export interface TileInfo {
+    tiles: Tile[]
+    hasCollision: boolean | undefined
+    isClimbable?: boolean | undefined
+    isOverlay: boolean | undefined
+    objectGroups: TiledObjectClass[],
+    tileIndex: number
+}
+
+export interface LayerInfo {
+    type: string,
+    name: string,
+    opacity: number,
+    visible: boolean,
+    properties: any,
+    objects: HitObject[]
+    tiles: Tile[]
+}
+
+
+export class RpgCommonMap extends MapClass {
+    /** 
+     * @title map id
+     * @readonly
+     * @prop {string} [id]
+     * @memberof Map
+     * */
+     readonly id: string
+
+    grid: VirtualGrid
+    gridShapes: VirtualGrid
+    gridTiles: VirtualGrid
+
+    get tileWidth() {
+        return this.tilewidth
+    }
+
+    get tileHeight() {
+        return this.tileheight
+    }
+    
+    /** 
+     * @title Layers of map
+     * @prop {object[]} [layers]
+     * @readonly
+     * @memberof Map
+     * @memberof RpgSceneMap
+     * */
+    
+    /** @internal */
+    shapes: {
+        [shapeName: string]: RpgShape
+    } = {}
+
+    private worldMapParent: RpgCommonWorldMaps | undefined
+
+    /** 
+     * Retrieves the X position of the map in the world (0 if no world assigned)
+     * 
+     * @title World X Position
+     * @prop {number} [worldX]
+     * @readonly
+     * @since 3.0.0-beta.8
+     * @memberof Map
+     * */
+    get worldX() {
+        return this.getInWorldMaps()?.getMapInfo(this.id)?.x || 0
+    }
+
+    /** 
+     * Retrieves the Y position of the map in the world (0 if no world assigned)
+     * 
+     * @title World Y Position
+     * @prop {number} [worldY]
+     * @readonly
+     * @since 3.0.0-beta.8
+     * @memberof Map
+     * */
+    get worldY() {
+        return this.getInWorldMaps()?.getMapInfo(this.id)?.y || 0
+    }
+
+    /**
+     * Memorize the maps so you don't have to make a new request or open a file each time you load a map
+     */
+    static get buffer() {
+        return buffer
+    }
+
+    /**
+     * In RPG mode, to avoid confusion with buffer, we have a new variable to memorize the maps
+     */
+    static get bufferClient() {
+        return bufferClient
+    }
+
+    load(data: TiledMap) {
+        super.load(data)
+        this.gridTiles = new VirtualGrid(this.width, this.tileWidth, this.tileHeight)
+        this.grid = new VirtualGrid(this.width, this.tileWidth, this.tileHeight).zoom(10)
+        this.gridShapes = new VirtualGrid(this.width, this.tileWidth, this.tileHeight).zoom(20)
+    }
+
+    /**
+     * Create a shape dynamically on the map
+     * 
+     * Object:
+     *  - (number) x: Position X
+     *  - (number) y: Position Y
+     *  - (number) width: Width
+     *  - (number) height: Height
+     *  - (object) properties (optionnal): 
+     *      - (number) z: Position Z
+     *      - (hexadecimal) color: Color (shared with client)
+     *      - (boolean) collision
+     *      - You can your own properties
+     * 
+     * @title Create Shape
+     * @since 3.0.0-beta.3
+     * @method map.createShape(obj)
+     * @param {object} obj
+     * @returns {RpgShape}
+     * @memberof Map
+     */
+    createShape(obj: HitObject): RpgShape {
+        const id = obj.name = (obj.name || generateUID()) as string
+        const shape = new RpgShape(obj as TiledObjectClass)
+        this.shapes[id] = shape
+        if (!shape.isShapePosition()) {
+            this.gridShapes.insertInCells(id, shape.getSizeBox(this.tileWidth))
+        }
+        // trick to sync with client
+        return this.shapes[id]
+    }
+
+    /**
+     * Delete a shape
+     * 
+     * @title Delete Shape
+     * @method map.removeShape(name)
+     * @param {string} name Name of shape
+     * @returns {void}
+     * @memberof Map
+     */
+    removeShape(name: string) {
+        // TODO: out players after delete shape
+        //this.shapes = this.shapes.filter(shape => shape.name != name)
+        delete this.shapes[name]
+    }
+
+    clearShapes() {
+        this.shapes = {}
+    }
+
+    /**
+     * Return all shapes on the map
+     * 
+     * @title Get Shapes
+     * @method map.getShapes()
+     * @returns {RpgShape[]}
+     * @memberof Map
+     * @memberof RpgSceneMap
+     */
+    getShapes(): RpgShape[] {
+        return Object.values(this.shapes)
+    }
+
+    /**
+     * Returns a shape by its name. Returns undefined is nothing is found
+     * 
+     * @title Get Shape by name
+     * @method map.getShape(name)
+     * @param {string} name Name of shape
+     * @returns {RpgShape[] | undefined}
+     * @memberof Map
+     * @memberof RpgSceneMap
+     */
+    getShape(name: string): RpgShape | undefined {
+        return this.getShapes().find(shape => shape.name == name)
+    }
+    
+    getPositionByShape(filter: (shape: RpgShape) => {}): { x: number, y: number, z: number } | null {
+        const startsFind = this.getShapes().filter(filter)
+        if (startsFind.length) {
+            const start = startsFind[random(0, startsFind.length-1)]
+            return { x: start.hitbox.x, y: start.hitbox.y, z: start.properties.z * this.zTileHeight || 0 }
+        }
+        return null
+    }
+
+    /**
+     * Get tile and verify collision with hitbox
+     * @param hitbox 
+     * @param x 
+     * @param y 
+     * @param z 
+     * @returns TileInfo
+     */
+    getTile(hitbox, x: number, y: number, z: [number, number] = [0, 0]): TileInfo {
+        const tile = {...this.getTileByPosition(x, y, z)}
+        const tilePos = this.getTileOriginPosition(x, y)
+        if (tile.objectGroups) {        
+            for (let object of tile.objectGroups) {
+                const hit = Hit.getHitbox(object, {
+                    x: tilePos.x,
+                    y: tilePos.y
+                })
+                if (hit.type) {
+                    const collided = Hit.testPolyCollision(hit.type, hit.hitbox, hitbox)
+                    if (collided) {
+                        tile.hasCollision = true
+                    }
+                }
+            }
+        }
+        return tile
+    }
+
+    /**
+     * Assign the map to a world
+
+     * @title Assign the map to a world
+     * @method map.setInWorldMaps(name)
+     * @param {RpgWorldMaps} worldMap world maps
+     * @since 3.0.0-beta.8
+     * @memberof Map
+     */
+    setInWorldMaps(worldMap: RpgCommonWorldMaps) {
+        this.worldMapParent = worldMap
+    }
+
+    /**
+     * Remove this map from the world
+     * @title Remove this map from the world
+     * @method map.removeFromWorldMaps()
+     * @returns {boolean | undefined}
+     * @since 3.0.0-beta.8
+     * @memberof Map
+     */
+    removeFromWorldMaps(): boolean | undefined {
+        return this.worldMapParent?.removeMap(this.id)
+    }
+
+     /**
+     * Recover the world attached to this map (`undefined` if no world attached)
+
+     * @title Get attached World
+     * @method map.getInWorldMaps()
+     * @return {RpgCommonWorldMaps | undefined}
+     * @since 3.0.0-beta.8
+     * @memberof Map
+     */
+    getInWorldMaps(): RpgCommonWorldMaps | undefined {
+        return this.worldMapParent
+    }
+
+    boundingMap(nextPosition: Vector2d, hitbox: SAT): { bounding: boolean, nextPosition: Vector2d } | null {
+        let bounding = false
+        if (nextPosition.x < 0) {
+            nextPosition.x = 0
+            bounding = true
+        }
+        else if (nextPosition.y < 0) {
+            nextPosition.y = 0
+            bounding = true
+        }
+        else if (nextPosition.x > this.widthPx - hitbox.w) {
+            nextPosition.x = this.widthPx - hitbox.w
+            bounding = true
+        }
+        else if (nextPosition.y > this.heightPx - hitbox.h) {
+            nextPosition.y = this.heightPx - hitbox.h
+            bounding = true
+        }
+        return {
+            bounding,
+            nextPosition
+        }
+    }
+
+    _createMovingHitbox<T extends RpgCommonGame>(
+        gameEngine: T,
+        tick$: Observable<Tick>,
+        mapId: string,
+        hitboxes: Pick<HitBox, 'width' | 'height' | 'x' | 'y'>[],
+        options: MovingHitbox = {}
+    ): Observable<AbstractObject> {
+        const object = new AbstractObject(gameEngine, Utils.generateUID())
+        object.disableVirtualGrid = true
+        object.map = mapId
+        object.speed = options.speed ?? 1
+        let i = 0
+        let frame = 0
+        const destroyHitbox$ = new Subject<AbstractObject>()
+        return tick$.pipe(
+            takeUntil(destroyHitbox$),
+            filter(() => {
+                frame++
+                return frame % object.speed == 0
+            }),
+            map(() => {
+                const hitbox = hitboxes[i]
+                if (!hitbox) {
+                    destroyHitbox$.next(object)
+                    destroyHitbox$.complete()
+                    return object
+                }
+                object.position.x = hitbox.x
+                object.position.y = hitbox.y
+                object.setHitbox(hitbox.width, hitbox.height)
+                i++
+                return object
+            }),
+            mergeMap((object) => from(object.isCollided(object.position, { allSearch: true }))),
+            map(() => object)
+        )
+    }
+}