@rpgjs/client 3.2.0 → 3.3.0

package/lib/Components/AbstractComponent.d.ts

@@ -0,0 +1,31 @@
+import { ComponentObject } from "@rpgjs/types";
+import { RpgComponent } from "./Component";
+import { GameEngineClient } from "../GameEngine";
+export declare type CellInfo = {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+};
+export declare abstract class AbstractComponent<TypeComponent extends ComponentObject<any>, ContainerType extends PIXI.Container | PIXI.Text | PIXI.Sprite | PIXI.Graphics> extends PIXI.Container {
+    protected component: RpgComponent;
+    protected value: TypeComponent['value'];
+    private _onRender$;
+    private _onDestroy$;
+    readonly onRender$: import("rxjs").Observable<AbstractComponent<TypeComponent, ContainerType>>;
+    protected readonly game: GameEngineClient;
+    protected firstRender: boolean;
+    private style;
+    private cacheText;
+    protected cell?: CellInfo;
+    constructor(component: RpgComponent, value: TypeComponent['value']);
+    getStyle<T>(): T;
+    protected parseTextAndCache(text: string): string[];
+    protected replaceText(object: any, text: string): string;
+    protected getValue(object: any, expression: any): any;
+    private verifyParams;
+    onInit(cell: CellInfo): void;
+    abstract updateRender(object: any, firstRender: boolean): void;
+    abstract cacheParams: string[];
+    onRemove(): void;
+}

package/lib/Components/AbstractComponent.js

@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbstractComponent = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const REGEXP_VAR = /{([^\}]+)}/g;
+class AbstractComponent extends PIXI.Container {
+    constructor(component, value) {
+        var _a;
+        super();
+        this.component = component;
+        this.value = value;
+        this._onRender$ = new rxjs_1.Subject();
+        this._onDestroy$ = new rxjs_1.Subject();
+        this.onRender$ = this._onRender$.asObservable();
+        this.game = this.component.game;
+        this.firstRender = true;
+        this.style = (_a = this.value) === null || _a === void 0 ? void 0 : _a.style;
+        this.cacheText = {};
+    }
+    getStyle() {
+        return this.style || {};
+    }
+    parseTextAndCache(text) {
+        // 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;
+    }
+    replaceText(object, text) {
+        return text.replace(REGEXP_VAR, (match, key) => {
+            var _a;
+            const value = (0, lodash_get_1.default)(object, key);
+            if (value !== undefined) {
+                this.cacheText[key] = value;
+                return value !== null && value !== void 0 ? value : '';
+            }
+            return (_a = value !== null && value !== void 0 ? value : this.cacheText[key]) !== null && _a !== void 0 ? _a : '';
+        });
+    }
+    getValue(object, expression) {
+        if (typeof expression === 'string') {
+            const value = (0, lodash_get_1.default)(object, expression);
+            if (value !== undefined) {
+                if (this.cacheParams.indexOf(expression) === -1)
+                    this.cacheParams.push(expression);
+                return value;
+            }
+        }
+        return expression;
+    }
+    verifyParams() {
+        var _a;
+        const params = this.component.logic;
+        for (const param of this.cacheParams) {
+            if ((0, lodash_get_1.default)(params, param) === undefined) {
+                throw new Error(`Param ${param} not found in object ${(_a = this.component.logic) === null || _a === void 0 ? void 0 : _a.id}`);
+            }
+        }
+    }
+    onInit(cell) {
+        var _a;
+        this.cell = cell;
+        this.verifyParams();
+        const render = (object) => {
+            const opacity = this.getValue(object, this.getStyle().opacity || this.value.opacity);
+            if (opacity !== undefined) {
+                this.alpha = Math.min(opacity, 1);
+            }
+        };
+        render(this.component.logic);
+        const objectId = (_a = this.component.logic) === null || _a === void 0 ? void 0 : _a.id;
+        this.game.listenObject(objectId)
+            .pipe((0, operators_1.takeUntil)(this._onDestroy$), (0, operators_1.filter)(object => {
+            const params = object === null || object === void 0 ? void 0 : object.paramsChanged;
+            if (!params)
+                return false;
+            for (const param of this.cacheParams) {
+                if ((0, lodash_get_1.default)(params, param))
+                    return true;
+            }
+            return false;
+        }))
+            .subscribe(({ object }) => {
+            this.updateRender(object, this.firstRender);
+            render(object);
+            this.firstRender = false;
+            this._onRender$.next(this);
+        });
+    }
+    onRemove() {
+        this._onDestroy$.next();
+        this._onDestroy$.complete();
+    }
+}
+exports.AbstractComponent = AbstractComponent;
+//# sourceMappingURL=AbstractComponent.js.map

package/lib/Components/AbstractComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractComponent.js","sourceRoot":"","sources":["../../src/Components/AbstractComponent.ts"],"names":[],"mappings":"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"}

package/lib/Components/BarComponent.d.ts

@@ -0,0 +1,20 @@
+import { BarComponentObject } from "@rpgjs/types";
+import { AbstractComponent, CellInfo } from "./AbstractComponent";
+export declare class BarComponent extends AbstractComponent<BarComponentObject, PIXI.Container> {
+    static readonly id: string;
+    private barContainer;
+    private barFill;
+    private textContainer;
+    private barHeight;
+    private text;
+    private barStyle;
+    private currentValue;
+    private maxValue;
+    private nextValue;
+    private notifier;
+    cacheParams: string[];
+    private get barWidth();
+    onInit(cell: CellInfo): void;
+    updateRender(object: any, firstRender: boolean): void;
+    onRemove(): void;
+}

package/lib/Components/BarComponent.js

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarComponent = void 0;
+const common_1 = require("@rpgjs/common");
+const AbstractComponent_1 = require("./AbstractComponent");
+const lodash_get_1 = __importDefault(require("lodash.get"));
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const DEFAULT_COLOR = '#000000';
+class BarComponent extends AbstractComponent_1.AbstractComponent {
+    constructor() {
+        var _a;
+        super(...arguments);
+        this.barContainer = new PIXI.Graphics();
+        this.barFill = new PIXI.Graphics();
+        this.textContainer = new PIXI.Text('');
+        this.barHeight = ((_a = this.value.style) === null || _a === void 0 ? void 0 : _a.height) || 7;
+        this.text = this.value.text || '';
+        this.barStyle = this.getStyle();
+        this.currentValue = 0;
+        this.maxValue = 0;
+        this.nextValue = 0;
+        this.notifier = new rxjs_1.Subject();
+        this.cacheParams = [];
+    }
+    get barWidth() {
+        var _a, _b;
+        return ((_a = this.barStyle) === null || _a === void 0 ? void 0 : _a.width) || ((_b = this.cell) === null || _b === void 0 ? void 0 : _b.width) || 0;
+    }
+    onInit(cell) {
+        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;
+        this.barContainer.beginFill(common_1.Utils.hexaToNumber(bgColor));
+        const paramsRect = [0, 0, this.barWidth, this.barHeight];
+        if (borderWidth) {
+            this.barContainer.lineStyle(borderWidth, common_1.Utils.hexaToNumber(borderColor), borderWidth);
+        }
+        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, firstRender) {
+        var _a, _b, _c, _d, _e;
+        this.currentValue = this.nextValue;
+        this.nextValue = (_b = (_a = (0, lodash_get_1.default)(object, this.value.current)) !== null && _a !== void 0 ? _a : this.nextValue) !== null && _b !== void 0 ? _b : 0;
+        this.maxValue = (_c = (0, lodash_get_1.default)(object, this.value.max)) !== null && _c !== void 0 ? _c : this.maxValue;
+        const style = this.barStyle;
+        const borderRadius = (_d = style === null || style === void 0 ? void 0 : style.borderRadius) !== null && _d !== void 0 ? _d : 0;
+        const borderWidth = (_e = style === null || style === void 0 ? void 0 : style.borderWidth) !== null && _e !== void 0 ? _e : 0;
+        // first render
+        if (firstRender) {
+            this.currentValue = this.nextValue;
+        }
+        const getColor = (value) => {
+            let determineLastColor = DEFAULT_COLOR;
+            const percent = Math.max(0, (value / this.maxValue) * 100);
+            const perPercent = style.perPercent;
+            if (perPercent) {
+                for (const p in perPercent) {
+                    if (percent <= +p) {
+                        determineLastColor = perPercent[p].fillColor;
+                        break;
+                    }
+                }
+            }
+            else {
+                determineLastColor = this.value.style.fillColor;
+            }
+            return determineLastColor;
+        };
+        let colors = [];
+        if (style) {
+            // TODO: add transition color
+            colors = (0, common_1.transitionColor)(getColor(this.currentValue), getColor(this.nextValue), 1);
+        }
+        else {
+            colors = (0, common_1.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();
+            this.barFill.beginFill(common_1.Utils.hexaToNumber(fillColor !== null && fillColor !== void 0 ? fillColor : DEFAULT_COLOR));
+            const percent = Math.max(0, (currentValue / this.maxValue));
+            const bWidth = borderWidth / 4;
+            const paramsRect = [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.assign(Object.assign({}, 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((0, operators_1.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 = 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();
+    }
+}
+exports.BarComponent = BarComponent;
+BarComponent.id = 'bar';
+//# sourceMappingURL=BarComponent.js.map

package/lib/Components/BarComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarComponent.js","sourceRoot":"","sources":["../../src/Components/BarComponent.ts"],"names":[],"mappings":"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"}

package/lib/Components/ColorComponent.d.ts

@@ -1,8 +1,10 @@
-import { RpgComponent } from "./Component";
-export declare class ColorComponent extends PIXI.Graphics {
-    private component;
-    color: string;
+import { AbstractComponent, CellInfo } from "./AbstractComponent";
+import { ColorComponentObject } from "@rpgjs/types";
+export declare class ColorComponent extends AbstractComponent<ColorComponentObject, PIXI.Graphics> {
     static readonly id: string;
-    constructor(component: RpgComponent, color: string);
-    setBackgroundColor(): void;
+    color: string;
+    cacheParams: string[];
+    private container;
+    onInit(cell: CellInfo): void;
+    updateRender(object: any): void;
 }

package/lib/Components/ColorComponent.js

@@ -1,18 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorComponent = void 0;
-class ColorComponent extends PIXI.Graphics {
-    constructor(component, color) {
-        super();
-        this.component = component;
-        this.color = color;
-        this.setBackgroundColor();
+const common_1 = require("@rpgjs/common");
+const AbstractComponent_1 = require("./AbstractComponent");
+class ColorComponent extends AbstractComponent_1.AbstractComponent {
+    constructor() {
+        super(...arguments);
+        this.color = '#000000';
+        this.cacheParams = [];
+        this.container = new PIXI.Graphics();
     }
-    setBackgroundColor() {
-        const color = this.color.replace('#', '');
-        this.beginFill(parseInt(color, 16));
-        this.drawRect(0, 0, this.component.w, this.component.h);
-        this.endFill();
+    onInit(cell) {
+        if (typeof this.value == 'string') {
+            this.color = this.value;
+        }
+        else {
+            this.color = this.value.color;
+        }
+        this.updateRender({});
+        this.addChild(this.container);
+        super.onInit(cell);
+    }
+    updateRender(object) {
+        var _a, _b, _c, _d;
+        this.container.clear();
+        this.container.beginFill(common_1.Utils.hexaToNumber(this.color));
+        this.container.drawRect(0, 0, (_b = (_a = this.cell) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0, (_d = (_c = this.cell) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
+        this.container.endFill();
     }
 }
 exports.ColorComponent = ColorComponent;

package/lib/Components/ColorComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorComponent.js","sourceRoot":"","sources":["../../src/Components/ColorComponent.ts"],"names":[],"mappings":";;;AAEA,MAAa,cAAe,SAAQ,IAAI,CAAC,QAAQ;IAG7C,YAAoB,SAAuB,EAAS,KAAa;QAC7D,KAAK,EAAE,CAAA;QADS,cAAS,GAAT,SAAS,CAAc;QAAS,UAAK,GAAL,KAAK,CAAQ;QAE7D,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC7B,CAAC;IAED,kBAAkB;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAA;QACzC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAA;QACnC,IAAI,CAAC,QAAQ,CACT,CAAC,EACD,CAAC,EACD,IAAI,CAAC,SAAS,CAAC,CAAC,EAChB,IAAI,CAAC,SAAS,CAAC,CAAC,CACnB,CAAC;QACF,IAAI,CAAC,OAAO,EAAE,CAAA;IAClB,CAAC;;AAlBL,wCAmBC;AAlBmB,iBAAE,GAAW,OAAO,CAAA"}
+{"version":3,"file":"ColorComponent.js","sourceRoot":"","sources":["../../src/Components/ColorComponent.ts"],"names":[],"mappings":";;;AAAA,0CAAqC;AACrC,2DAAiE;AAGjE,MAAa,cAAe,SAAQ,qCAAsD;IAA1F;;QAEI,UAAK,GAAW,SAAS,CAAA;QACzB,gBAAW,GAAa,EAAE,CAAA;QAClB,cAAS,GAAkB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAA;IAwB1D,CAAC;IAtBG,MAAM,CAAC,IAAc;QACjB,IAAI,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;SAC1B;aAAM;YACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAA;SAChC;QACD,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;QACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAC7B,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC;IAED,YAAY,CAAC,MAAW;;QACpB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAA;QACtB,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,cAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QACxD,IAAI,CAAC,SAAS,CAAC,QAAQ,CACnB,CAAC,EACD,CAAC,EACD,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,mCAAI,CAAC,EACrB,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,mCAAI,CAAC,CACzB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;IAC5B,CAAC;;AA3BL,wCA4BC;AA3BmB,iBAAE,GAAW,OAAO,CAAA"}

package/lib/Components/Component.d.ts

@@ -1,5 +1,5 @@
 import { Direction, RpgCommonPlayer, RpgShape } from "@rpgjs/common";
-import { PositionXY } from "@rpgjs/types";
+import { LayoutPositionEnum, PositionXY } from "@rpgjs/types";
 import { Scene } from "../Scene/Scene";
 export interface IComponent {
     id: string;
@@ -18,8 +18,13 @@ export declare class RpgComponent<T = any> extends PIXI.Container {
     private components;
     private direction;
     private container;
+    private containersLayout;
+    private subscriptionGraphic;
+    private layoutNotifierClear;
     private registerComponents;
     private dragMode?;
+    readonly game: import("../GameEngine").GameEngineClient;
+    readonly id: string;
     constructor(data: RpgCommonPlayer | RpgShape, scene: Scene);
     /**
      * the direction of the sprite
@@ -92,11 +97,27 @@ export declare class RpgComponent<T = any> extends PIXI.Container {
     * @memberof RpgSprite
     */
     getPositionsOfGraphic(align: string): PositionXY;
-    private callMethodInComponents;
-    private updateComponents;
+    /**
+     * Get the container by position (center, left, right, top, bottom)
+     *
+     * @param {LayoutPositionEnum} [position=center]
+     * @returns {PIXI.Container}
+     *
+     * */
+    getLayoutContainer(position?: LayoutPositionEnum): PIXI.Container;
+    /**
+     * Get Current Scene. Scene is a map, battle, menu, etc.
+     * @returns {T}
+     */
     getScene<T>(): T;
     onInit(): void;
     onUpdate(obj: any): void;
     onMove(): void;
     onChanges(data: any, old: any): void;
+    private callMethodInComponents;
+    private createGrid;
+    private applyComponent;
+    private createComponentCenter;
+    private refreshComponents;
+    private updateComponents;
 }