@rpgjs/client 4.3.0 → 5.0.0-alpha.0

package/src/GameEngine.ts

@@ -1,289 +0,0 @@
-import { RpgCommonGame, RpgCommonPlayer, GameSide, RpgShape } from "@rpgjs/common";
-import { BehaviorSubject, combineLatest, Observable, Subject, map } from "rxjs";
-import { RpgRenderer } from "./Renderer";
-import { RpgClientEngine } from "./RpgClientEngine";
-import { LayoutObject, ObjectFixture, ObjectFixtureList } from "@rpgjs/types";
-
-export class GameEngineClient extends RpgCommonGame {
-    playerId: string
-    standalone: boolean
-    clientEngine: RpgClientEngine
-    renderer: RpgRenderer
-
-    private _objects: BehaviorSubject<ObjectFixtureList> = new BehaviorSubject({})
-    private _obsObjects: {
-        [id: string]: BehaviorSubject<ObjectFixture>
-    } = {}
-    private _obsObjectsDeleteNotifier$: {
-        [id: string]: Subject<void>
-    } = {}
-    private _shapes: BehaviorSubject<ObjectFixtureList> = new BehaviorSubject({})
-    private _objectsChanged: BehaviorSubject<ObjectFixtureList> = new BehaviorSubject({})
-
-    world = {
-        getObjects: this.getObjects.bind(this),
-        getObject: (id: string): RpgCommonPlayer | null => {
-            const obj = this.getObject(id)
-            if (!obj) return null
-            return obj.object
-        },
-        getShape: (id: string): RpgShape | null => {
-            const obj = this.getShape(id)
-            if (!obj) return null
-            return obj.object
-        },
-        getAll: (id: string): RpgCommonPlayer | RpgShape | null => {
-            const obj = this.getObjectAndShape(id)
-            if (!obj) return null
-            return obj.object
-        },
-        removeObject: this.removeObject.bind(this),
-        getObjectsOfGroup: () => {
-            return {
-                ...this.getObjects(),
-                ...this.events
-            }
-        },
-        getShapesOfGroup: () => {
-            return this.getShapes()
-        }
-    }
-
-    initialize() {
-        super.initialize(GameSide.Client)
-    }
-
-    private _get(prop: '_objects' | '_shapes', id: string): ObjectFixture | null {
-        const objects = this[prop].value
-        const val = objects[id]
-        if (!val) return null
-        return val
-    }
-
-    get objectsChanged(): Observable<{ [id: string]: ObjectFixture }> {
-        return this._objectsChanged.asObservable()
-    }
-
-    setObjectsChanged(val: {
-        [playerId: string]: ObjectFixture
-    }) {
-        this._objectsChanged.next(val)
-    }
-
-    listenObject(id: string): Observable<ObjectFixture> {
-        return this._obsObjects[id].asObservable()
-    }
-
-    get objects(): Observable<{ [id: string]: ObjectFixture }> {
-        return this._objects.asObservable()
-    }
-
-    get shapes(): Observable<{ [id: string]: ObjectFixture }> {
-        return this._shapes.asObservable()
-    }
-
-    get all(): Observable<{ [id: string]: ObjectFixture }> {
-        return combineLatest([
-            this.objects,
-            this.shapes
-        ]).pipe(
-            map(([objects, shapes]) => {
-                return {
-                    ...objects,
-                    ...shapes
-                }
-            })
-        )
-    }
-
-    getShapes(): { [id: string]: ObjectFixture } {
-        return this._shapes.value
-    }
-
-    getObjects(): { [id: string]: ObjectFixture } {
-        return this._objects.value
-    }
-
-    getObject(id: string): ObjectFixture | null {
-        return this._get('_objects', id)
-    }
-
-    getShape(id: string): ObjectFixture | null {
-        return this._get('_shapes', id)
-    }
-
-    getObjectAndShape(id: string): ObjectFixture | null {
-        let obj = this.getObject(id)
-        if (!obj) obj = this.getShape(id)
-        return obj
-    }
-
-    resetObjects() {
-        for (let id in this._obsObjectsDeleteNotifier$) {
-            this._obsObjectsDeleteNotifier$[id].next()
-            this._obsObjectsDeleteNotifier$[id].complete()
-            this._obsObjects[id].complete()
-        }
-        this._obsObjectsDeleteNotifier$ = {}
-        this._obsObjects = {}
-        this._objects.next({})
-        this._shapes.next({})
-    }
-
-    getDeleteNotifier(id: string): Observable<void> {
-        return this._obsObjectsDeleteNotifier$[id].asObservable()
-    }
-
-    private _remove(prop: '_objects' | '_shapes', id: string) {
-        const logic = prop == '_objects' ? this.getObject(id) : this.getShape(id)
-        if (logic) {
-            const objects = { ...this[prop].value } // clone
-            delete objects[id]
-            this._obsObjectsDeleteNotifier$[id].next()
-            this._obsObjectsDeleteNotifier$[id].complete()
-            this._obsObjects[id].complete()
-            delete this._obsObjects[id]
-            delete this._obsObjectsDeleteNotifier$[id]
-            this[prop].next(objects)
-            return true
-        }
-        return false
-    }
-
-    removeObject(id: string): boolean {
-        if (this.events[id]) {
-            delete this.events[id]
-        }
-        return this._remove('_objects', id)
-    }
-
-    removeShape(id: string): boolean {
-        return this._remove('_shapes', id)
-    }
-
-    removeObjectAndShape(id: string): boolean {
-        let bool = this.removeObject(id)
-        if (!bool) bool = this.removeShape(id)
-        return bool
-    }
-
-    static toArray(obj: any, prop: string) {
-        if (obj[prop]) obj[prop] = Object.values(obj[prop])
-    }
-
-    updateObject(obj) {
-        const {
-            playerId: id,
-            params,
-            localEvent,
-            paramsChanged,
-            isShape
-        } = obj
-        if (paramsChanged.components) {
-            paramsChanged.layout = {
-                center: {
-                    lines: [
-                        {
-                            col: paramsChanged.components
-                        }
-                    ]
-                }
-            }
-        }
-        const layoutToArray = (params) => {
-            const layout = params.layout as LayoutObject<any> | undefined
-            if (layout) {
-                ['center', 'top', 'right', 'bottom', 'left'].forEach((key) => {
-                    if (!layout[key]) return
-                    GameEngineClient.toArray(layout[key], 'lines')
-                    if (!layout[key].lines) return
-                    layout[key].lines.map(layout => {
-                        GameEngineClient.toArray(layout, 'col')
-                    })
-                })
-            }
-        }
-        layoutToArray(params)
-        GameEngineClient.toArray(params, 'polygon')
-        const isMe = () => id == this.playerId
-        let logic
-        let teleported = false
-        let propName = '_objects'
-
-        const createObsForObject = (data) => {
-            this._obsObjectsDeleteNotifier$[id] = new Subject()
-            this._obsObjects[id] = new BehaviorSubject(data)
-        }
-
-        if (isShape) {
-            propName = '_shapes'
-            logic = this.world.getShape(id)
-            if (!logic) {
-                logic = this.addShape(params)
-                createObsForObject({ logic })
-            }
-        }
-        else {
-            if (localEvent) {
-                logic = this.events[id]
-                if (!logic) {
-                    logic = this.addEvent(RpgCommonPlayer, id)
-                    createObsForObject({ logic })
-                    this.events[id] = {
-                        object: logic
-                    }
-                }
-                else {
-                    logic = logic.object
-                }
-            }
-            else {
-                logic = this.world.getObject(id)
-            }
-            if (!logic) {
-                logic = this.addPlayer(RpgCommonPlayer, id)
-                createObsForObject({ logic })
-            }
-        }
-        logic.prevParamsChanged = Object.assign({}, logic)
-        for (let key in params) {
-            if (!localEvent &&
-                (key == 'position' ||
-                    (key == 'direction' && paramsChanged && paramsChanged.position))) {
-                if (isMe() && logic.canMove) continue
-            }
-            logic[key] = params[key]
-        }
-        if (paramsChanged) {
-            layoutToArray(paramsChanged)
-            if (paramsChanged.layout) logic.componentChanged = paramsChanged.layout
-            if (paramsChanged.teleported) {
-                teleported = true
-                logic.position = { ...params.position } // clone
-                logic.direction = params.direction
-            }
-            if (!logic.paramsChanged) logic.paramsChanged = {}
-            logic.paramsChanged = paramsChanged
-        }
-
-        const newObject = {
-            object: logic,
-            paramsChanged
-        }
-
-        this.setObject(id, newObject)
-
-        return newObject
-    }
-
-    setObject(id: string, newObject) {
-        const propName = newObject.object instanceof RpgShape ? '_shapes' : '_objects'
-        this[propName].next({
-            ...this[propName].value,
-            ...{
-                [id]: newObject
-            }
-        })
-        this._obsObjects[id].next(newObject)
-    }
-}

package/src/Gui/React.ts

@@ -1,193 +0,0 @@
-import { createRoot } from 'react-dom/client';
-import { createElement, Fragment, useState, createContext, useEffect, useContext, useCallback, useSyncExternalStore, useRef } from 'react'
-import { RpgClientEngine } from '../RpgClientEngine';
-import { EVENTS_MAP, RpgRenderer } from '../Renderer';
-import { BehaviorSubject, map, tap, combineLatest, Subject } from 'rxjs';
-import type { Gui } from './Gui';
-import { inject } from '../inject';
-import { RpgPlugin } from '@rpgjs/common';
-
-export { useStore } from '@nanostores/react'
-export const RpgReactContext = createContext({} as any)
-
-// TODO
-export const useObjects = () => {
-    const [objects, setObjects] = useState([] as any[])
-    const { rpgObjects } = useContext(RpgReactContext)
-    useEffect(() => {
-        rpgObjects
-            .pipe(
-                map((objects: any) => Object.values(objects).map((obj: any) => obj.object))
-            )
-            .subscribe(setObjects)
-    }, [])
-    return objects
-}
-
-// TODO
-export const useCurrentPlayer = () => {
-    const { rpgCurrentPlayer } = useContext(RpgReactContext);
-
-    const currentPlayerRef = useRef({});
-    let _onChanges
-
-    const subscribe = (onChanges) => {
-        _onChanges = onChanges
-        return () => {
-            _onChanges = null
-        }
-    }
-
-    useEffect(() => {
-        const ob$ = rpgCurrentPlayer
-            .pipe(
-                map((player: any) => player.object),
-                tap((player: any) => currentPlayerRef.current = player)
-            );
-        const subscription = ob$.subscribe(() => {
-            _onChanges?.()
-        });
-        return () => subscription.unsubscribe();
-    }, []);
-
-    return useSyncExternalStore(subscribe, () => currentPlayerRef.current);
-}
-
-export const useEventPropagator = () => {
-    const ref = useRef(null);
-    useEffect(() => {
-        if (ref.current) {
-            const element = ref.current as HTMLElement;
-            const eventListeners = {};
-            const renderer = inject(RpgRenderer)
-
-            EVENTS_MAP.MouseEvent.forEach(eventType => {
-                const listener = event => renderer.propagateEvent(event)
-                element.addEventListener(eventType, listener);
-                eventListeners[eventType] = listener;
-            });
-
-            return () => {
-                EVENTS_MAP.MouseEvent.forEach(eventType => {
-                    element.removeEventListener(eventType, eventListeners[eventType]);
-                });
-            };
-        }
-    }, [ref]);
-    return ref
-};
-
-export class ReactGui {
-    private app: any
-    private clientEngine: RpgClientEngine
-    private renderer: RpgRenderer
-    private _gui: BehaviorSubject<any[]> = new BehaviorSubject([] as any)
-    //private _tooltips: BehaviorSubject<any[]> = new BehaviorSubject([] as any)
-
-    constructor(rootEl: HTMLDivElement, parentGui: Gui) {
-        this.app = createRoot(rootEl)
-        this.clientEngine = parentGui.clientEngine
-        this.renderer = this.clientEngine.renderer
-
-        const GuiTooltip = (ui): any => {
-            return () => {
-                const [_tooltip, setTooltip] = useState<any[]>([])
-                useEffect(() => {
-                    parentGui.listenTooltipObjects.subscribe(setTooltip)
-                    // force combineLatest to emit first value
-                    parentGui.currentScene?.objectsMoving.next({})
-                }, [parentGui.currentScene])
-                return parentGui.tooltipFilter(_tooltip).map(sprite => createElement('div', {
-                    style: parentGui.tooltipPosition({ x: sprite.position.x, y: sprite.position.y }),
-                    key: sprite.id,
-                }, createElement(ui.gui, {
-                    spriteData: sprite,
-                    ...(ui.data || {}),
-                })))
-            }
-        }
-
-        const GuiWrapper = () => {
-            const [_gui, setGui] = useState<any[]>([])
-            useEffect(() => {
-                this._gui.subscribe(gui => setGui(gui))
-            }, [])
-
-            return createElement(RpgReactContext.Provider, {
-                value: parentGui.getInjectObject()
-            },
-                ..._gui.filter(ui => ui.display && !ui.attachToSprite).map(ui => createElement('div', {
-                    key: ui.name,
-                    style: { 'pointerEvents': 'auto' },
-                },
-                    createElement(ui.gui, ui.data || {})
-                )),
-                ..._gui.filter(ui => ui.display && ui.attachToSprite).map(ui => createElement('div', {
-                    key: ui.name,
-                    style: { 'pointerEvents': 'auto' },
-                }, createElement(GuiTooltip(ui)))),
-            )
-        }
-
-        this.app.render(
-            createElement(GuiWrapper)
-        )
-    }
-
-    set gui(val) {
-        let array: any = []
-        for (let key in val) {
-            // ignore vuejs component
-            if (!val[key].isFunction) continue
-            array.push(val[key])
-        }
-        this._gui.next(array)
-    }
-}
-
-type onReadyCallback<T = any> = (object: { client: RpgClientEngine, server: T } ) => void
-type RpgGameProps = {
-    onReady?: onReadyCallback
-    modules?: any[]
-}
-
-export function RpgGame({
-    onReady,
-    modules
-}: RpgGameProps) {
-    const divRef = useRef(null)
-
-    useEffect(() => {
-        let client: RpgClientEngine, server: any
-
-        // @ts-ignore
-        const engine = window.RpgStandalone
-        engine(modules).then((val) => {
-            if (val.client) {
-                client = val.client
-                server = val.server
-            }
-            else {
-                client = val
-                server = null
-            }
-            onReady?.({
-                client,
-                server
-            })
-        })
-
-        return () => {
-            server?.world.clear()
-            client.reset()
-            RpgPlugin.clear()
-            server?.io.clear()
-            server?.io.events.clear()
-            server?.stop()
-            if (divRef.current) (divRef.current as HTMLDivElement).innerHTML = ''
-        }
-
-    }, [modules])
-
-    return createElement('div', { id: 'rpg', ref: divRef })
-}

package/src/Gui/Vue.ts

@@ -1,154 +0,0 @@
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createBlock as _createBlock, mergeProps as _mergeProps, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode } from "vue"
-import { App, ComponentPublicInstance, createApp } from 'vue'
-import { RpgCommonPlayer, Utils } from '@rpgjs/common'
-import { EVENTS_MAP, RpgRenderer } from '../Renderer'
-import { GameEngineClient } from '../GameEngine'
-import { RpgClientEngine } from '../RpgClientEngine'
-import type { Gui } from './Gui'
-import { Scene } from '../Scene/Scene'
-
-interface VueInstance extends ComponentPublicInstance {
-    gui: GuiList,
-    tooltips: RpgCommonPlayer[]
-}
-
-interface GuiOptions {
-    data: any,
-    attachToSprite: boolean
-    display: boolean,
-    name: string
-}
-
-interface GuiList {
-    [guiName: string]: GuiOptions
-}
-
-interface VueInstance extends ComponentPublicInstance {
-    gui: GuiList,
-    tooltips: RpgCommonPlayer[]
-}
-
-const _hoisted_1 = {
-    id: "tooltips",
-    style: { "position": "absolute", "top": "0", "left": "0" }
-}
-function render(_ctx, _cache) {
-    return (_openBlock(), _createElementBlock("div", {}, [
-        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.fixedGui, (ui) => {
-            return (_openBlock(), _createElementBlock(_Fragment, null, [
-                (ui.display)
-                    ? (_openBlock(), _createBlock(_resolveDynamicComponent(ui.name), _normalizeProps(_mergeProps({ key: 0, style: { pointerEvents: 'auto' } }, ui.data)), null, 16 /* FULL_PROPS */))
-                    : _createCommentVNode("v-if", true)
-            ], 64 /* STABLE_FRAGMENT */))
-        }), 256 /* UNKEYED_FRAGMENT */)),
-        _createElementVNode("div", _hoisted_1, [
-            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.attachedGui, (ui) => {
-                return (_openBlock(), _createElementBlock(_Fragment, null, [
-                    (ui.display)
-                        ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.tooltipFilter(_ctx.tooltips, ui), (tooltip) => {
-                            return (_openBlock(), _createElementBlock("div", {
-                                style: _normalizeStyle(_ctx.tooltipPosition(tooltip.position))
-                            }, [
-                                (_openBlock(), _createBlock(_resolveDynamicComponent(ui.name), _mergeProps({ ...ui.data, spriteData: tooltip, style: { pointerEvents: 'auto' } }, {
-                                    ref_for: true,
-                                    ref: ui.name
-                                }), null, 16 /* FULL_PROPS */))
-                            ], 4 /* STYLE */))
-                        }), 256 /* UNKEYED_FRAGMENT */))
-                        : _createCommentVNode("v-if", true)
-                ], 64 /* STABLE_FRAGMENT */))
-            }), 256 /* UNKEYED_FRAGMENT */))
-        ])
-    ], 32 /* HYDRATE_EVENTS */))
-}
-
-
-export class VueGui {
-    private renderer: RpgRenderer
-    private gameEngine: GameEngineClient
-    private clientEngine: RpgClientEngine
-    private app: App
-    private vm: VueInstance
-    private socket
-
-    constructor(rootEl: HTMLDivElement, private parentGui: Gui) {
-        this.clientEngine = parentGui.clientEngine
-        this.renderer = this.clientEngine.renderer
-        this.gameEngine = this.clientEngine.gameEngine
-        const { gui } = parentGui
-
-        const obj = {
-            render,
-            data() {
-                return {
-                    gui: {},
-                    tooltips: []
-                }
-            },
-            provide: () => {
-                return parentGui.getInjectObject()
-            },
-            computed: {
-                fixedGui() {
-                    return Object.values(this.gui).filter((gui: any) => !gui.attachToSprite)
-                },
-                attachedGui() {
-                    return Object.values(this.gui).filter((gui: any) => gui.attachToSprite)
-                }
-            },
-            methods: {
-                tooltipPosition: parentGui.tooltipPosition.bind(parentGui),
-                tooltipFilter: parentGui.tooltipFilter.bind(parentGui)
-            }
-        }
-
-        this.app = createApp(obj)
-
-        const guiVue = Object.values(gui).filter(ui => !Utils.isFunction(ui))
-
-        for (let ui of guiVue) {
-            this.app.component(ui.name, ui.gui)
-        }
-
-        this.app.directive('propagate', {
-            mounted: (el, binding) => {
-                el.eventListeners = {};
-                EVENTS_MAP.MouseEvent.forEach(eventType => {
-                    const callback = (ev) => {
-                        this.renderer.propagateEvent(ev);
-                    };
-                    el.eventListeners[eventType] = callback;
-                    el.addEventListener(eventType, callback);
-                });
-            },
-            unmounted(el, binding) {
-                EVENTS_MAP.MouseEvent.forEach(eventType => {
-                    const callback = el.eventListeners[eventType];
-                    if (callback) {
-                        el.removeEventListener(eventType, callback);
-                    }
-                });
-            }
-        })
-
-        this.vm = this.app.mount(rootEl) as VueInstance
-        this.renderer.app = this.app
-        this.renderer.vm = this.vm
-    }
-
-    _setSceneReady() {
-        this.parentGui.listenTooltipObjects.subscribe((tooltips) => {
-            this.vm.tooltips = [...tooltips]
-        })
-        this.parentGui.currentScene?.objectsMoving.next({})
-    }
-
-    set gui(val) {
-        for (let key in val) {
-            // ignore react component
-            if (val[key].isFunction) continue
-            this.vm.gui[key] = val[key]
-        }
-        this.vm.gui = Object.assign({}, this.vm.gui)
-    }
-}

package/src/Interfaces/Character.ts

@@ -1,7 +0,0 @@
-import { RpgSprite } from '../Sprite/Player'
-
-export interface ISpriteCharacter {
-    onCharacterWalk(sprite: RpgSprite): void
-    onCharacterStand(sprite: RpgSprite): void
-    onCharacterAction(sprite: RpgSprite): void
-}

package/src/Interfaces/Scene.ts

@@ -1,9 +0,0 @@
-import * as PIXI from 'pixi.js'
-
-export interface IScene {
-    load(obj: object): any
-    draw(t: number, dt: number, frame: number)
-    removeObject(id: string)
-    addObject(obj: object, id: string)
-    updateScene(obj: { data: object, partial: object })
-}