@rpgjs/client 4.0.0-beta.1 → 4.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpgjs/client",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.3",
   "description": "",
   "main": "lib/index.js",
   "types": "./lib/index.d.ts",
@@ -8,20 +8,17 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && tsc-esm-fix  --target='lib'",
     "watch": "tsc -w"
   },
-  "files": [
-    "lib"
-  ],
   "keywords": [],
   "author": "Samuel Ronce",
   "license": "MIT",
   "dependencies": {
     "@pixi/tilemap": "^4.0.0",
-    "@rpgjs/common": "^4.0.0-beta.1",
-    "@rpgjs/tiled": "^4.0.0-beta.1",
-    "@rpgjs/types": "^4.0.0-beta.1",
+    "@rpgjs/common": "^4.0.0-beta.3",
+    "@rpgjs/tiled": "^4.0.0-beta.3",
+    "@rpgjs/types": "^4.0.0-beta.3",
     "@types/howler": "2.2.7",
     "howler": "2.2.3",
     "lodash.get": "^4.4.2",
@@ -32,10 +29,11 @@
     "simple-room-client": "^2.0.3",
     "vue": "^3.2.47"
   },
-  "gitHead": "b12826ef87716da2691da3bae02d7d7c66772789",
+  "gitHead": "952bdc2cecd04ad8dd9341ca0d51bf64efcd2bab",
   "devDependencies": {
     "@types/css-font-loading-module": "^0.0.8",
     "@types/node": "^18.16.0",
     "typescript": "^5.0.4"
-  }
+  },
+  "type": "module"
 }

package/src/Components/AbstractComponent.ts

@@ -0,0 +1,120 @@
+import { ComponentObject } from "@rpgjs/types"
+import { Subject, filter, takeUntil } from "rxjs"
+import { RpgComponent } from "./Component"
+import get from 'lodash.get'
+import { GameEngineClient } from "../GameEngine"
+import { Container, Graphics, Sprite } from "pixi.js"
+
+const REGEXP_VAR = /{([^\}]+)}/g
+
+export type CellInfo = { x?: number, y?: number, width: number, height: number }
+
+export abstract class AbstractComponent<
+    TypeComponent extends ComponentObject<any>,
+    ContainerType extends Container | Text | Sprite | Graphics
+> extends Container {
+    private _onRender$: Subject<AbstractComponent<TypeComponent, ContainerType>> = new Subject()
+    private _onDestroy$: Subject<void> = new Subject()
+    readonly onRender$ = this._onRender$.asObservable()
+    protected readonly game: GameEngineClient = this.component.game
+    protected firstRender: boolean = true
+    private style = this.value?.style
+    private cacheText: {
+        [key: string]: string
+    } = {}
+    protected cell?: CellInfo
+
+    constructor(protected component: RpgComponent, protected value: TypeComponent['value']) {
+        super()
+    }
+
+    getStyle<T>(): T {
+        return this.style || {}
+    }
+
+    protected parseTextAndCache(text: string): string[] {
+        // parse text to get varariable in {} format et cache it
+        const matches = text.matchAll(REGEXP_VAR)
+        this.cacheParams = [
+            ...this.cacheParams,
+            ...Array.from(matches).map(match => match[1])
+        ]
+        return this.cacheParams
+    }
+
+    protected replaceText(object: any, text: string): string {
+        return text.replace(REGEXP_VAR, (match, key) => {
+            const value = get(object, key)
+            if (value !== undefined) {
+                this.cacheText[key] = value
+                return value ?? ''
+            }
+            return value ?? this.cacheText[key] ?? ''
+        })
+    }
+
+    protected getValue(object: any, expression: any): any {
+        if (typeof expression === 'string') {
+            const value = get(object, expression)
+            if (value !== undefined) {
+                if (this.cacheParams.indexOf(expression) === -1) this.cacheParams.push(expression)
+                return value
+            }
+        }
+        return expression
+    }
+
+    private verifyParams(): void | never {
+        const params = this.component.logic
+        for (const param of this.cacheParams) {
+            if (get(params, param) === undefined) {
+                throw new Error(`Param ${param} not found in object ${this.component.logic?.id}`)
+            }
+        }
+    }
+
+    public onInit(cell: CellInfo): void {
+        this.cell = cell
+
+        this.verifyParams()
+
+        const render= (object) => {
+            const opacity = this.getValue(object, this.getStyle<{ opacity: number | undefined }>().opacity || this.value.opacity)
+
+            if (opacity !== undefined) {
+                this.alpha = Math.min(opacity, 1)
+            }
+        }
+
+        render(this.component.logic)
+
+        const objectId = this.component.logic?.id
+
+        this.game.listenObject(objectId)
+            .pipe(
+                takeUntil(this._onDestroy$),
+                filter(object => {
+                    const params = object?.paramsChanged
+                    if (!params) return false
+                    for (const param of this.cacheParams) {
+                        if (get(params, param)) return true
+                    }
+                    return false
+                })
+            )
+            .subscribe(({ object }) => {
+                this.updateRender(object, this.firstRender)
+                render(object)
+                this.firstRender = false
+                this._onRender$.next(this)
+            })
+    }
+
+    abstract updateRender(object: any, firstRender: boolean): void
+    abstract cacheParams: string[]
+
+    onRemove() {
+        this._onDestroy$.next()
+        this._onDestroy$.complete()
+    }
+}

package/src/Components/BarComponent.ts

@@ -0,0 +1,179 @@
+import { BarComponentObject } from "@rpgjs/types"
+import { Utils, transitionColor } from "@rpgjs/common"
+import { AbstractComponent, CellInfo } from "./AbstractComponent"
+import get from 'lodash.get'
+import { Subject, takeUntil } from "rxjs"
+import { Container, Graphics, Text } from "pixi.js"
+
+const DEFAULT_COLOR = '#000000'
+
+export class BarComponent extends AbstractComponent<BarComponentObject, Container> {
+    static readonly id: string = 'bar'
+    private barContainer: Graphics = new Graphics();
+    private barFill: Graphics = new Graphics();
+    private textContainer: Text = new Text('')
+    private barHeight: number = this.value.style?.height || 7;
+    private text: string = this.value.text || ''
+    private barStyle = this.getStyle<BarComponentObject['value']['style']>()
+    private currentValue: number = 0;
+    private maxValue: number = 0;
+    private nextValue: number = 0;
+    private notifier: Subject<void> = new Subject()
+    cacheParams: string[] = []
+
+    private get barWidth() {
+        return this.barStyle?.width || this.cell?.width || 0
+    }
+
+    onInit(cell: CellInfo) {
+        if (!this.value.style) {
+            this.value.style = {
+                fillColor: '#ffffff',
+            }
+        }
+        const { bgColor = DEFAULT_COLOR, borderColor = DEFAULT_COLOR, borderWidth = 1, borderRadius = 0 } = this.barStyle || {}
+        this.cell = cell
+        const { value: color, alpha } = Utils.hexaToNumber(bgColor)
+        this.barContainer.beginFill(color, alpha)
+        const paramsRect: [number, number, number, number] = [0, 0, this.barWidth, this.barHeight]
+        if (borderWidth) {
+            const { value: color, alpha } = Utils.hexaToNumber(borderColor)
+            this.barContainer.lineStyle(borderWidth, color, alpha);
+        }
+        if (borderRadius) {
+            this.barContainer.drawRoundedRect(...paramsRect, borderRadius);
+        }
+        else {
+            this.barContainer.drawRect(...paramsRect);
+        }
+        this.barContainer.endFill();
+        this.textContainer.style = {
+            fontSize: 10,
+            fill: '#ffffff',
+            fontWeight: 'bold'
+        }
+        // 5 is the padding
+        this.textContainer.y -= this.barHeight + this.textContainer.height - 5
+        if (this.text) this.addChild(this.textContainer)
+        this.addChild(this.barContainer);
+        this.barContainer.addChild(this.barFill);
+        this.cacheParams = [this.value.current, this.value.max]
+        super.onInit(cell)
+    }
+
+    updateRender(object: any, firstRender: boolean) {
+        this.currentValue = this.nextValue;
+        this.nextValue = get(object, this.value.current) ?? this.nextValue ?? 0;
+        this.maxValue = get(object, this.value.max) ?? this.maxValue;
+        const style = this.barStyle
+        const borderRadius = style?.borderRadius ?? 0
+        const borderWidth = style?.borderWidth ?? 0
+
+        // first render
+        if (firstRender) {
+            this.currentValue = this.nextValue;
+        }
+
+        const getColor = (value: number) => {
+            let determineLastColor = DEFAULT_COLOR
+            const percent = Math.max(0, (value / this.maxValue) * 100);
+            const perPercent = (style as any).perPercent;
+            if (perPercent) {
+                for (const p in perPercent) {
+                    if (percent <= +p) {
+                        determineLastColor = perPercent[p].fillColor;
+                        break;
+                    }
+                }
+            } else {
+                determineLastColor = (this.value.style as any).fillColor;
+            }
+            return determineLastColor
+        }
+
+        let colors: string[] = []
+        if (style) {
+            // TODO: add transition color
+            colors = transitionColor(getColor(this.currentValue), getColor(this.nextValue), 1)
+        }
+        else {
+            colors = transitionColor(DEFAULT_COLOR, DEFAULT_COLOR, 1)
+        }
+
+        const render = (up = false) => {
+            let currentValue = ~~this.currentValue
+            if (currentValue < 0) currentValue = 0
+            if (currentValue > this.maxValue) currentValue = this.maxValue
+            const percentBetween = ~~Math.max(0, ((currentValue - this.nextValue) * 100) / this.nextValue)
+            const colorIndex = Math.max(Math.floor((100 - percentBetween) / (100 / (colors.length - 1))), 0)
+            let fillColor = colors[colorIndex]
+            this.barFill.clear()
+            const { value: color, alpha } = Utils.hexaToNumber(fillColor ?? DEFAULT_COLOR)
+            this.barFill.beginFill(color, alpha)
+            const percent = Math.max(0, (currentValue / this.maxValue))
+            const bWidth = borderWidth / 4
+            const paramsRect: [number, number, number, number] = [bWidth, bWidth, percent * this.barWidth - bWidth, this.barHeight - bWidth]
+            if (percent > 0) {
+                if (borderRadius) {
+                    this.barFill.drawRoundedRect(...paramsRect, borderRadius)
+                }
+                else {
+                    this.barFill.drawRect(...paramsRect)
+                }
+            }
+            this.textContainer.text = this.replaceText({
+                ...object,
+                $current: currentValue,
+                $percent: Math.round(percent * 100),
+                $max: this.maxValue
+            }, this.text)
+            this.barFill.endFill();
+        }
+
+        if (firstRender) {
+            render();
+            return;
+        }
+
+        this.notifier.next()
+
+        this.game.clientEngine.tick
+            .pipe(
+                takeUntil(this.notifier)
+            )
+            .subscribe(() => {
+                // speed of animation, calculate the difference between the current value and the next value to determine the speed
+                const speed = Math.abs(this.currentValue - this.nextValue) / 10;
+                let up: boolean = false;
+
+                // if the current value is less than the next value, add the speed to the current value
+                if (this.currentValue < this.nextValue) {
+                    this.currentValue += speed
+                    up = true;
+                }
+
+                // if the current value is greater than the next value, subtract the speed from the current value
+                else if (this.currentValue > this.nextValue) {
+                    this.currentValue -= speed
+                    up = false;
+                }
+
+                render(up)
+
+                const currentValue = Math.round(this.currentValue)
+
+                if (!up && (~~currentValue <= ~~this.nextValue || currentValue <= 0)) {
+                    this.notifier.next()
+                }
+                else if (up && (~~currentValue >= ~~this.nextValue || currentValue >= this.maxValue)) {
+                    this.notifier.next()
+                }
+            })
+    }
+
+    onRemove() {
+        this.notifier.next()
+        this.notifier.complete()
+        super.onRemove()
+    }
+}