@rpgjs/client 4.3.0 → 5.0.0-alpha.0

package/src/Components/Component.ts

@@ -1,515 +0,0 @@
-import { Direction, HookClient, RpgCommonPlayer, RpgPlugin, RpgShape, Utils } from "@rpgjs/common"
-import { ComponentObject, LayoutObject, LayoutOptions, LayoutPositionEnum, PlayerType, PositionXY } from "@rpgjs/types"
-import { Subject, Subscription, map, filter, tap, distinctUntilChanged, takeUntil, finalize  } from "rxjs"
-import { log } from "../Logger"
-import { Scene } from "../Scene/Scene"
-import { RpgSprite } from "../Sprite/Player"
-import { AbstractComponent } from "./AbstractComponent"
-import { BarComponent } from "./BarComponent"
-import { ShapeComponent } from "./ShapeComponent"
-import { DebugComponent } from "./DebugComponent"
-import { ImageComponent } from "./ImageComponent"
-import { TextComponent } from "./TextComponent"
-import { TileComponent } from "./TileComponent"
-import { Container, Sprite } from "pixi.js"
-
-type SpriteInfo = {
-    width: number,
-    height: number,
-    x: number,
-    y: number,
-    anchor: { x: number, y: number },
-    spriteWidth: number
-    spriteHeight: number
-}
-
-export interface IComponent {
-    id: string,
-    value: any
-}
-
-const layoutObject = {
-    lines: []
-}
-
-const layoutTypes: LayoutPositionEnum[] = ['top', 'bottom', 'left', 'right']
-
-export class RpgComponent<T = any> extends Container {
-    /** @internal */
-    tilesOverlay: any
-    /** @internal */
-    h: number = 1
-    /** @internal */
-    w: number = 1
-    
-    animationIsPlaying: boolean = false
-    
-    protected _x: number = 0
-    protected _y: number = 0
-    private _rotation: number = 0
-    protected teleported: number = 0
-    protected map: string = ''
-    protected z: number = 0
-    protected fixed: boolean = false
-    private components: LayoutObject<any> = {
-        top: layoutObject,
-        bottom: layoutObject,
-        left: layoutObject,
-        right: layoutObject,
-        center: layoutObject
-    }
-    private direction: number = 0
-    private container: Container = new Container()
-
-    private containersLayout: {
-        [key in LayoutPositionEnum]: Container
-    } = {} as any
-
-    private subscriptionGraphic: Subscription
-    private layoutNotifierClear: { [key in LayoutPositionEnum]: Subject<void> } = {
-        top: new Subject(),
-        bottom: new Subject(),
-        left: new Subject(),
-        right: new Subject(),
-        center: new Subject()
-    }
-    private registerComponents: Map<string, any> = new Map()
-    private dragMode?: {
-        data: any,
-        dragging: boolean
-    }
-
-    readonly game = this.scene.game
-    readonly id: string = this.data.id
-
-    constructor(private data: RpgCommonPlayer | RpgShape, private scene: Scene) {
-        super()
-        this.setPosition(false)
-        this.registerComponents.set(RpgSprite.id, RpgSprite)
-        this.registerComponents.set(TextComponent.id, TextComponent)
-        this.registerComponents.set(ShapeComponent.id, ShapeComponent)
-        this.registerComponents.set(TileComponent.id, TileComponent)
-        this.registerComponents.set(ImageComponent.id, ImageComponent)
-        this.registerComponents.set(BarComponent.id, BarComponent)
-        this.registerComponents.set(DebugComponent.id, DebugComponent)
-
-        this.addChild(this.container)
-
-        for (let layout of [...layoutTypes, 'center']) {
-            this.containersLayout[layout] = new Container()
-            this.container.addChild(this.containersLayout[layout])
-        }
-
-        RpgPlugin.emit(HookClient.AddSprite, this)
-        RpgPlugin.emit(HookClient.SceneAddSprite, [this.scene, this], true)
-
-        this.game.listenObject(data.id)
-            .pipe(
-                takeUntil(this.game.getDeleteNotifier(data.id)),
-                map(object => object?.paramsChanged),
-                tap(() => {
-                    RpgPlugin.emit(HookClient.ChangesSprite, [this, this.logic?.['paramsChanged'], this.logic?.['prevParamsChanged']], true)
-                }),
-                filter(object => {
-                    return this.logic?.['componentChanged']
-                })
-            )
-            .subscribe((val) => {
-                if (this.logic) {
-                    this.updateComponents(this.logic?.['componentChanged'])
-                    this.logic['componentChanged'] = undefined
-                }
-            })
-
-    }
-
-    /** 
-     * the direction of the sprite
-     * 
-     * @prop {Direction} dir
-     * @readonly
-     * @memberof RpgSprite
-     * */
-    get dir(): Direction {
-        return this.direction
-    }
-
-    /** 
-    * To know if the sprite is a player
-    * 
-    * @prop {boolean} isPlayer
-    * @readonly
-    * @memberof RpgSprite
-    * */
-    get isPlayer(): boolean {
-        return this.data.type == PlayerType.Player
-    }
-
-    /** 
-     * To know if the sprite is an event
-     * 
-     * @prop {boolean} isEvent
-     * @readonly
-     * @memberof RpgSprite
-     * */
-    get isEvent(): boolean {
-        return this.data.type == PlayerType.Event
-    }
-
-    /** 
-     * To know if the sprite is a shape
-     * 
-     * @prop {boolean} isShape
-     * @since 3.0.0-rc
-     * @readonly
-     * @memberof RpgSprite
-     * */
-    get isShape(): boolean {
-        return Utils.isInstanceOf(this.data, RpgShape)
-    }
-
-    /** 
-     * To know if the sprite is the sprite controlled by the player
-     * 
-     * @prop {boolean} isCurrentPlayer
-     * @readonly
-     * @memberof RpgSprite
-     * */
-    get isCurrentPlayer(): boolean {
-        return this.data.id === this.scene.game.playerId
-    }
-
-    /** 
-     * Retrieves the logic of the sprite
-     * 
-     * @prop {RpgSpriteLogic} logic
-     * @readonly
-     * @since 3.0.0-beta.4
-     * @memberof RpgSprite
-     * */
-    get logic(): RpgCommonPlayer | RpgShape | null {
-        return this.scene.game.world.getAll(this.data.id)
-    }
-
-    get guiDisplay(): boolean {
-        return (this.logic as RpgCommonPlayer).guiDisplay
-    }
-
-    set guiDisplay(val: boolean) {
-        (this.logic as RpgCommonPlayer).guiDisplay = val
-        this.game.setObject(this.logic?.id, {
-            object: this.logic,
-            paramsChanged: {
-                guiDisplay: val
-            }
-        })
-    }
-
-    setPosition(smooth: boolean = true) {
-        if (this.isShape) {
-            const { width, height, x, y } = this.data as RpgShape
-            this.w = width
-            this.h = height
-            this._x = Math.floor(x)
-            this._y = Math.floor(y)
-        }
-        else {
-            const { position, direction } = this.data as RpgCommonPlayer
-            this._x = position?.x ?? 0
-            this._y = position?.y ?? 0
-            this.z = position?.z ?? 0
-            this.direction = direction
-        }
-        this._rotation = this.data['rotation'] ?? 0
-        if (!smooth) {
-            this.x = this._x
-            this.y = this._y
-            this.angle = this._rotation
-        }
-    }
-
-    // TODO
-    /*drag() {
-        this.interactive = true
-        const filter = new filters.ColorMatrixFilter();
-
-        const onDragEnd = () => {
-            if (!this.dragMode) return
-            this.dragMode.dragging = false
-            this.dragMode.data = null
-        }
-
-        this
-            .on('pointerdown', (event) => {
-                this.dragMode = {
-                    data: event.data,
-                    dragging: true
-                }
-            })
-            .on('pointerup', onDragEnd)
-            .on('pointerupoutside', onDragEnd)
-            .on('pointermove', () => {
-                if (!this.dragMode) return
-                const { dragging, data } = this.dragMode
-                if (dragging) {
-                    const newPosition = data.getLocalPosition(this.parent)
-                    this.x = newPosition.x
-                    this.y = newPosition.y
-                }
-            })
-    }*/
-
-    update(obj: any, objChanged: any, time: number, deltaRatio: number): { moving: boolean } {
-        if (this.dragMode?.dragging) return { moving: true }
-
-        const { speed, teleported, map, fixed } = obj
-        this.data = obj
-        this.setPosition()
-        const renderSpeed = speed * deltaRatio
-        if (this._rotation != this.angle) {
-            this.angle += Math.min(renderSpeed, this._rotation - this.angle)
-        }
-
-        let moving = obj.moving ?? false
-
-        if (!fixed) {
-            if (teleported != this.teleported || map != this.map) {
-                this.x = this._x
-                this.y = this._y
-                this.teleported = teleported
-                this.map = map
-            }
-
-            this.parent.parent.zIndex = this._y
-
-            obj.posX = this._x
-            obj.posY = this._y
-
-            if (this._x > this.x) {
-                this.x += Math.min(renderSpeed, this._x - this.x)
-                moving = true
-            }
-
-            if (this._x < this.x) {
-                this.x -= Math.min(renderSpeed, this.x - this._x)
-                moving = true
-            }
-
-            if (this._y > this.y) {
-                this.y += Math.min(renderSpeed, this._y - this.y)
-                moving = true
-            }
-
-            if (this._y < this.y) {
-                this.y -= Math.min(renderSpeed, this.y - this._y)
-                moving = true
-            }
-        }
-
-        this.callMethodInComponents('update', [obj, { moving }, deltaRatio])
-        this.onUpdate(obj)
-
-        return {
-            moving
-        }
-    }
-
-    showAnimation(graphic: string | string[], animationName: string) {
-        return this.callMethodInComponents('showAnimation', [graphic, animationName])
-    }
-
-    /**
-    * Recover the position according to the graphic
-    * Normally, the position is that of the hitbox but, we retrieve the top left corner of the graphic
-    * 
-    * You can also pass the `middle` value as first parameter to retrieve the positions from the middle of the sprite
-    * 
-    * @title Get Positions of Graphic
-    * @method sprite.getPositionsOfGraphic(align)
-    * @param {string} [align] middle
-    * @returns { x: number, y: number }
-    * @memberof RpgSprite
-    */
-    getPositionsOfGraphic(align: string): PositionXY {
-        let sprite: RpgSprite | undefined
-        // if no component (no graphic for example)
-        if (this.components.center?.lines.length !== 0) {
-            sprite = this.containersLayout.center.getChildAt(0) as RpgSprite
-        }
-        const isMiddle = align == 'middle'
-        return {
-            x: this.x - this.w * (sprite?.anchor.x ?? 1) + (isMiddle ? this.w / 2 : 0),
-            y: this.y - this.h * (sprite?.anchor.y ?? 1) + (isMiddle ? this.h / 2 : 0)
-        }
-    }
-
-    /**
-     * Get the container by position (center, left, right, top, bottom)
-     * 
-     * @param {LayoutPositionEnum} [position=center]
-     * @returns {PIXI.Container}
-     * 
-     * */
-    getLayoutContainer(position: LayoutPositionEnum = 'center'): Container {
-        return this.containersLayout[position]
-    }
-
-    /**
-     * Get Current Scene. Scene is a map, battle, menu, etc.
-     * @returns {T}
-     */
-    getScene<T>(): T {
-        return this.scene as any
-    }
-
-    // Hooks
-    onInit() { }
-    onUpdate(obj) { }
-    onMove() { }
-    onChanges(data, old) { }
-
-    private callMethodInComponents(name: string, params: unknown[]) {
-        for (let component of this.getLayoutContainer().children) {
-            if (component[name]) component[name](...params)
-        }
-    }
-
-    private createGrid(position: LayoutPositionEnum, gridArray: any, options: LayoutOptions, sprite: SpriteInfo): Container {
-        const gridContainer = new Sprite();
-        const { height, spriteWidth, spriteHeight } = sprite
-        const width = options.width ?? spriteWidth ?? sprite.width
-        const gridHeight = options.height ?? 20
-        const hitBoxWidth = this.logic?.hitbox.w ?? 0
-        const middleWidth = hitBoxWidth / 2 - width / 2
-        const posX = gridContainer.x + (options.marginLeft ?? 0) - (options.marginRight ?? 0)
-        const posY = gridContainer.y + (this.logic?.hitbox.h ?? 0) + (options.marginTop ?? 0) - (options.marginBottom ?? 0)
-
-        switch (position) {
-            case 'top':
-                gridContainer.x = posX + middleWidth
-                gridContainer.y = posY - spriteHeight
-                gridContainer.y -= (gridArray.length * gridHeight)
-                break;
-            case 'bottom':
-                gridContainer.x = posX + middleWidth
-                gridContainer.y = posY
-                break;
-            case 'left':
-                gridContainer.x = posX - width - (hitBoxWidth < spriteWidth ? hitBoxWidth / 2 : 0)
-                gridContainer.y = posY - spriteHeight
-                break;
-            case 'right':
-                gridContainer.x = posX + width + (hitBoxWidth > spriteWidth ? hitBoxWidth / 2 : 0)
-                gridContainer.y = posY - spriteHeight
-        }
-
-        for (let y = 0; y < gridArray.length; y++) {
-            const columns = gridArray[y].col.length;
-            const cellWidth = (width / columns);
-            for (let x = 0; x < columns; x++) {
-                const params: ComponentObject<any> = gridArray[y].col[x];
-                const component = this.applyComponent(params)
-                component.onRender$
-                    .pipe(
-                        takeUntil(this.layoutNotifierClear[position]),
-                        finalize(() => {
-                            component.onRemove()
-                        })
-                    )
-                    .subscribe(() => {
-                        component.x = Math.round((x * cellWidth) + (cellWidth / 2) - (component.width / 2))
-                        component.y = Math.round((y * gridHeight) + (gridHeight / 2) - (component.height / 2))
-                    })
-                component.onInit({
-                    width: cellWidth,
-                    height: gridHeight
-                })
-                gridContainer.addChild(component)
-            }
-        }
-
-        return gridContainer
-    }
-
-    private applyComponent(component: ComponentObject<any>): AbstractComponent<any, any> {
-        const compClass = this.registerComponents.get(component.id)
-        if (!compClass) {
-            throw log(`Impossible to find ${component.id} component`)
-        }
-        return new compClass(this, component.value)
-    }
-
-    private createComponentCenter(components: LayoutObject<any>) {
-        const lines = components.center?.lines || []
-
-        this.getLayoutContainer().removeChildren()
-
-        for (let { col } of lines) {
-            for (let component of col) {
-                const instance = this.applyComponent(component)
-                if (instance.onInit) instance.onInit({
-                    width: this.logic?.width ?? this.width,
-                    height: this.logic?.height ?? this.height
-                })
-                this.getLayoutContainer().addChild(instance)
-            }
-        }
-
-        this.components = components
-    }
-
-    private refreshComponents(components: LayoutObject<any>, sprite: SpriteInfo) {
-        for (let type of layoutTypes) {
-            const layout = components[type]
-            if (layout?.lines) {
-                const layoutContainer = this.getLayoutContainer(type)
-                layoutContainer.removeChildren()
-                this.layoutNotifierClear[type].next()
-                layoutContainer.addChild(this.createGrid(type, layout.lines, layout, sprite))
-            }
-        }
-    }
-
-    private updateComponents(components: LayoutObject<any>) {
-        const graphicChanged: boolean = !!components.center?.lines
-
-        if (graphicChanged) {
-            this.createComponentCenter(components)
-        }
-
-        if (this.subscriptionGraphic) this.subscriptionGraphic.unsubscribe()
-
-        const child = this.getLayoutContainer().children[0]
-
-        if (child instanceof RpgSprite) {
-            this.subscriptionGraphic = (child as RpgSprite).animationSprite()
-                .pipe(
-                    takeUntil(this.game.getDeleteNotifier(this.id)),
-                    filter((sprite: any) => sprite),
-                    distinctUntilChanged((p: any, q: any) =>
-                        p.width === q.width &&
-                        p.height === q.height &&
-                        p.anchor.x === q.anchor.x &&
-                        p.anchor.y === q.anchor.y),
-                )
-                .subscribe((sprite) => {
-                    this.refreshComponents(components, sprite)
-                })
-        }
-        else {
-            this.refreshComponents(components, {
-                width: this.data.width,
-                height: this.data.height,
-                anchor: {
-                    x: 0,
-                    y: 0
-                },
-                x: 0,
-                y: 0,
-                spriteHeight: this.data.height,
-                spriteWidth: this.data.width
-            })
-        }
-
-    }
-}

package/src/Components/DebugComponent.ts

@@ -1,36 +0,0 @@
-import { Utils } from "@rpgjs/common"
-import { AbstractComponent, CellInfo } from "./AbstractComponent"
-import { DebugComponentObject } from "@rpgjs/types"
-import { Graphics } from "pixi.js"
-
-export class DebugComponent extends AbstractComponent<DebugComponentObject, Graphics> {
-    static readonly id: string = 'debug'
-    color: string = '#ff0000'
-    cacheParams: string[] = ['map', 'position.x', 'position.y']
-    private container: Graphics = new Graphics()
-
-    onInit(cell: CellInfo) {
-        this.addChild(this.container)
-        this.updateRender(this.component.logic)
-        this.eventMode = 'static'
-        this.on('pointerdown', () => {
-            console.log(this.component.logic)
-        })
-        super.onInit(cell)
-    }
-
-    updateRender(object: any) {
-        const hitbox = object.hitbox
-        const { pos, w, h } = hitbox
-        this.container.clear()
-        const { value: color, alpha } = Utils.hexaToNumber(this.color)
-        this.container.beginFill(color, alpha)
-        this.container.drawRect(
-            0,
-            0,
-            w,
-            h
-        );
-        this.container.endFill()
-    }
-}

package/src/Components/ImageComponent.ts

@@ -1,30 +0,0 @@
-import { Container, Sprite } from "pixi.js"
-import { ImageComponentObject } from "@rpgjs/types"
-import { SceneMap } from "../Scene/Map"
-import { AbstractComponent, CellInfo } from "./AbstractComponent"
-
-export class ImageComponent extends AbstractComponent<ImageComponentObject, Container> {
-    static readonly id: string = 'image'
-    cacheParams: string[] = []
-    source: string = ''
-
-    onInit(cell: CellInfo) {
-        super.onInit(cell)
-        this.setImage()
-    }
-
-    private setImage() {
-        if (typeof this.value == 'string') {
-            this.source = this.value
-        } else  {
-            this.source = this.value.source
-        }
-        this.updateRender({})
-    }
-
-    updateRender(object: any) {
-        this.removeChildren()
-        const engine = this.component.getScene<SceneMap>().game.clientEngine
-        this.addChild(Sprite.from(engine.getResourceUrl(this.source)))
-    }
-}

package/src/Components/ShapeComponent.ts

@@ -1,64 +0,0 @@
-import { Utils } from "@rpgjs/common"
-import { AbstractComponent, CellInfo } from "./AbstractComponent"
-import { ShapeComponentObject } from "@rpgjs/types"
-import { Graphics } from "pixi.js"
-
-export class ShapeComponent extends AbstractComponent<ShapeComponentObject, Graphics> {
-    static readonly id: string = 'shape'
-    private type: ShapeComponentObject['value']['type'] = this.value.type
-    private container: Graphics = new Graphics()
-    cacheParams: string[] = []
-
-    onInit(cell: CellInfo) {
-        this.cell = cell
-        this.updateRender(this.component.logic)
-        this.addChild(this.container)
-        super.onInit(cell)
-    }
-
-    updateRender(object: any) {
-        const value = this.value as any
-        const height = this.getValue(object, value.height) ?? this.cell?.height ?? 0
-        const width = this.getValue(object, value.width) ?? this.cell?.width ?? 0
-
-        this.container.clear()
-        const { value: color, alpha } = Utils.hexaToNumber(this.value.fill)
-        this.container.beginFill(color, alpha)
-       
-        if (value.line) {
-            const { value: color, alpha } = Utils.hexaToNumber(value.line.color ?? this.value.fill)
-            this.container.lineStyle(
-                this.getValue(object, value.line.width) ?? 1,
-                color,
-                this.getValue(object, value.line.alpha) ?? alpha
-            )
-        }
-
-        switch (this.type) {
-            case 'circle':
-                this.container.drawCircle(0, 0, this.getValue(object, value.radius))
-                break;
-            case 'ellipse':
-                this.container.drawEllipse(0, 0, width, height)
-                break;
-            case 'line':
-                if  (!value.line) {
-                    this.container.lineStyle(1, color, alpha)
-                }
-                this.container.moveTo(this.getValue(object, value.x1), this.getValue(object, value.y1))
-                this.container.lineTo(this.getValue(object, value.x2), this.getValue(object, value.y2))
-                break;
-            case 'polygon':
-                this.container.drawPolygon(value.points)
-                break;
-            case 'rounded-rect':
-                this.container.drawRoundedRect(0, 0, width, height, value.radius)
-                break;
-            default:
-                this.container.drawRect(0, 0, width, height)
-                break;
-        }
-
-        this.container.endFill()
-    }
-}

package/src/Components/TextComponent.ts

@@ -1,33 +0,0 @@
-import { TextComponentObject } from "@rpgjs/types"
-import { Graphics, Text } from "pixi.js"
-import { AbstractComponent } from "./AbstractComponent"
-
-export class TextComponent extends AbstractComponent<TextComponentObject, Text> {
-    static readonly id: string = 'text'
-    cacheParams: string[] = []
-    private container: Text = new Text('')
-    private originValue: string = ''
-
-    onInit(cell: Graphics) {
-        if (typeof this.value == 'string') {
-            this.container.text = this.value
-        } else if (this.value.style) {
-            this.container.style = this.value.style
-            this.container.text = this.value.text
-        }
-        this.container.style = {
-            ...this.container.style,
-            wordWrapWidth: cell.width
-        }
-        this.parseTextAndCache(this.container.text)
-        this.originValue = this.container.text
-        // first render for replace variable and remove {}
-        this.updateRender(this.component.logic)
-        this.addChild(this.container)
-        super.onInit(cell)
-    }
-
-    updateRender(object: any) {
-        this.container.text = this.replaceText(object, this.originValue)
-    }
-}