@rpgjs/client 4.3.0 → 5.0.0-alpha.1

package/lib/inject.d.ts

@@ -1,23 +0,0 @@
-import { InjectContext } from "@rpgjs/common";
-/**
- * Dependency injection function for RPGJS client side.
- *
- * This client-side `inject` function is used to retrieve instances of various classes within the RPGJS framework,
- * specifically for client-side modules. It enables developers to access singleton instances of key classes such as
- * `RpgClientEngine`, `KeyboardControls`, and `RpgRenderer`. Utilizing `inject` on the client side promotes modular
- * and maintainable code by simplifying dependency management.
- *
- * @template T The class type that you want to retrieve an instance of, relevant to client-side modules.
- * @returns {T} Returns the singleton instance of the specified class, ensuring only one instance is used client-side.
- * @since 4.2.0
- *
- * @example
- * ```ts
- * // Example of injecting the RpgClientEngine
- * import { inject, RpgClientEngine } from '@rpgjs/client'
- * const client = inject(RpgClientEngine)
- * ```
- */
-export declare function inject<T>(service: new (...args: any[]) => T, args?: any[]): T;
-export declare function setInject(context: InjectContext): void;
-export declare function clearInject(): void;

package/lib/inject.js

@@ -1,30 +0,0 @@
-let instanceContext = null;
-/**
- * Dependency injection function for RPGJS client side.
- *
- * This client-side `inject` function is used to retrieve instances of various classes within the RPGJS framework,
- * specifically for client-side modules. It enables developers to access singleton instances of key classes such as
- * `RpgClientEngine`, `KeyboardControls`, and `RpgRenderer`. Utilizing `inject` on the client side promotes modular
- * and maintainable code by simplifying dependency management.
- *
- * @template T The class type that you want to retrieve an instance of, relevant to client-side modules.
- * @returns {T} Returns the singleton instance of the specified class, ensuring only one instance is used client-side.
- * @since 4.2.0
- *
- * @example
- * ```ts
- * // Example of injecting the RpgClientEngine
- * import { inject, RpgClientEngine } from '@rpgjs/client'
- * const client = inject(RpgClientEngine)
- * ```
- */
-export function inject(service, args = []) {
-    return instanceContext.inject(service, args);
-}
-export function setInject(context) {
-    instanceContext = context;
-}
-export function clearInject() {
-    instanceContext = null;
-}
-//# sourceMappingURL=inject.js.map

package/lib/inject.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inject.js","sourceRoot":"","sources":["../src/inject.ts"],"names":[],"mappings":"AAEA,IAAI,eAAe,GAAyB,IAAI,CAAA;AAEhD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,MAAM,CAAI,OAAkC,EAAE,OAAc,EAAE;IAC1E,OAAO,eAAgB,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,OAAsB;IAC5C,eAAe,GAAG,OAAO,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,WAAW;IACvB,eAAe,GAAG,IAAI,CAAA;AAC1B,CAAC"}

package/rpg.toml

@@ -1,14 +0,0 @@
-[compilerOptions.build]
-  pwaEnabled = false
-  outputDir = "./browser"
-
-[vite.build.lib]
-    entry = "src/index.ts"
-    name = "RpgClient"
-    fileName = "rpg.client"
-
-[vite.build.rollupOptions.output]
-  format = "umd"
-
-[vite.build.rollupOptions]
-  external = ["@rpgjs/common", "vue", "rxjs", "react", "react-dom"]

package/src/Components/AbstractComponent.ts

@@ -1,120 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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]
-        this.updateRender(this.component.logic, true)
-        this.firstRender = false
-        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()
-    }
-}