@rpgjs/client 3.3.1 → 4.0.0-beta.1

package/lib/RpgClientEngine.js

@@ -1,36 +1,26 @@
-"use strict";
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RpgClientEngine = void 0;
-const KeyboardControls_1 = require("./KeyboardControls");
-const Renderer_1 = require("./Renderer");
-const Spritesheets_1 = require("./Sprite/Spritesheets");
-const Sounds_1 = require("./Sound/Sounds");
-const simple_room_client_1 = require("simple-room-client");
-const rxjs_1 = require("rxjs");
-const ajax_1 = require("rxjs/ajax");
-const RpgGui_1 = require("./RpgGui");
-const common_1 = require("@rpgjs/common");
-const RpgSound_1 = require("./Sound/RpgSound");
-const Spritesheet_1 = require("./Sprite/Spritesheet");
-const Logger_1 = require("./Logger");
-const Sound_1 = require("./Sound/Sound");
-const types_1 = require("@rpgjs/types");
-class RpgClientEngine {
+import { KeyboardControls } from './KeyboardControls';
+import { RpgRenderer } from './Renderer';
+import { _initSpritesheet, spritesheets } from './Sprite/Spritesheets';
+import { _initSound, sounds } from './Sound/Sounds';
+import { World } from 'simple-room-client';
+import { BehaviorSubject, Subject, lastValueFrom } from 'rxjs';
+import { ajax } from 'rxjs/ajax';
+import { RpgGui } from './RpgGui';
+import { PrebuiltGui, Utils, RpgPlugin, HookClient, RpgCommonMap, Scheduler, } from '@rpgjs/common';
+import { RpgSound } from './Sound/RpgSound';
+import { Spritesheet } from './Sprite/Spritesheet';
+import { log } from './Logger';
+import { Sound } from './Sound/Sound';
+import { PlayerType, SocketEvents, SocketMethods } from '@rpgjs/types';
+import { Assets, utils } from 'pixi.js';
+import * as PIXI from 'pixi.js';
+export class RpgClientEngine {
     constructor(gameEngine, options) {
         this.gameEngine = gameEngine;
         this.options = options;
@@ -42,19 +32,18 @@ class RpgClientEngine {
         * @memberof RpgClientEngine
         * */
         this.globalConfig = {};
-        this._tick = new rxjs_1.BehaviorSubject({
+        this._tick = new BehaviorSubject({
             timestamp: -1,
             deltaTime: 0,
             frame: 0,
             deltaRatio: 1
         });
-        this.keyChange = new rxjs_1.Subject();
-        this.roomJoin = new rxjs_1.Subject();
+        this.keyChange = new Subject();
+        this.roomJoin = new Subject();
         this.hasBeenDisconnected = false;
         this.serverChanging = false;
         this.isTeleported = false;
         this.lastTimestamp = 0;
-        this.frame = 0;
         this.clientFrames = new Map();
         this.serverFrames = new Map();
         this.session = null;
@@ -63,7 +52,7 @@ class RpgClientEngine {
         this.matchMakerService = null;
         this.assetsPath = 'assets';
         this.serverFps = 60;
-        this.scheduler = new common_1.Scheduler();
+        this.scheduler = new Scheduler();
         /**
          * Read objects synchronized with the server
          *
@@ -82,44 +71,51 @@ class RpgClientEngine {
                 this.step(timestamp, deltaTime);
         });
     }
-    _init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.renderer = new Renderer_1.RpgRenderer(this);
-            const pluginLoadRessource = (hookName, type) => __awaiter(this, void 0, void 0, function* () {
-                const resource = this.options[type] || [];
-                this.options[type] = [
-                    ...common_1.Utils.arrayFlat(yield common_1.RpgPlugin.emit(hookName, resource)) || [],
-                    ...resource
-                ];
-            });
-            yield pluginLoadRessource(common_1.HookClient.AddSpriteSheet, 'spritesheets');
-            yield pluginLoadRessource(common_1.HookClient.AddGui, 'gui');
-            yield pluginLoadRessource(common_1.HookClient.AddSound, 'sounds');
-            this.renderer.options = Object.assign({ selector: '#rpg', selectorCanvas: '#canvas', selectorGui: '#gui', canvas: {}, gui: [], spritesheets: [], sounds: [] }, this.options);
-            this.io = this.options.io;
-            if (this.options.serverFps)
-                this.serverFps = this.options.serverFps;
-            this.globalConfig = this.options.globalConfig;
-            if (this.globalConfig.assetsPath)
-                this.assetsPath = this.globalConfig.assetsPath;
-            this.gameEngine.standalone = this.options.standalone;
-            this.gameEngine.renderer = this.renderer;
-            this.gameEngine.clientEngine = this;
-            this.addSpriteSheet(this.renderer.options.spritesheets);
-            this.addSound(this.renderer.options.sounds);
-            if (typeof __RPGJS_PRODUCTION__ != 'undefined' && __RPGJS_PRODUCTION__) {
-                if ('serviceWorker' in navigator) {
-                    window.addEventListener('load', () => {
-                        navigator.serviceWorker.register('/service-worker.js');
-                    });
-                }
+    async _init() {
+        this.renderer = new RpgRenderer(this);
+        const pluginLoadRessource = async (hookName, type) => {
+            const resource = this.options[type] || [];
+            this.options[type] = [
+                ...Utils.arrayFlat(await RpgPlugin.emit(hookName, resource)) || [],
+                ...resource
+            ];
+        };
+        await pluginLoadRessource(HookClient.AddSpriteSheet, 'spritesheets');
+        await pluginLoadRessource(HookClient.AddGui, 'gui');
+        await pluginLoadRessource(HookClient.AddSound, 'sounds');
+        this.renderer.options = {
+            selector: '#rpg',
+            selectorCanvas: '#canvas',
+            selectorGui: '#gui',
+            canvas: {},
+            gui: [],
+            spritesheets: [],
+            sounds: [],
+            ...this.options
+        };
+        this.io = this.options.io;
+        if (this.options.serverFps)
+            this.serverFps = this.options.serverFps;
+        this.globalConfig = this.options.globalConfig;
+        if (this.globalConfig.assetsPath)
+            this.assetsPath = this.globalConfig.assetsPath;
+        this.gameEngine.standalone = this.options.standalone;
+        this.gameEngine.renderer = this.renderer;
+        this.gameEngine.clientEngine = this;
+        this.addSpriteSheet(this.renderer.options.spritesheets);
+        this.addSound(this.renderer.options.sounds);
+        if (typeof __RPGJS_PRODUCTION__ != 'undefined' && __RPGJS_PRODUCTION__) {
+            if ('serviceWorker' in navigator) {
+                window.addEventListener('load', () => {
+                    navigator.serviceWorker.register('/service-worker.js');
+                });
             }
-            this.controls = new KeyboardControls_1.KeyboardControls(this);
-        });
+        }
+        this.controls = new KeyboardControls(this);
     }
     addResource(resourceClass, cb) {
         let array = resourceClass;
-        if (!common_1.Utils.isArray(resourceClass)) {
+        if (!Utils.isArray(resourceClass)) {
             array = [resourceClass];
         }
         cb(array, this);
@@ -145,44 +141,49 @@ class RpgClientEngine {
     addSpriteSheet(spritesheetClass, id) {
         if (typeof spritesheetClass === 'string') {
             if (!id) {
-                throw (0, Logger_1.log)('Please, specify the resource ID (second parameter)');
+                throw log('Please, specify the resource ID (second parameter)');
             }
             let AutoSpritesheet = class AutoSpritesheet {
             };
             AutoSpritesheet = __decorate([
-                (0, Spritesheet_1.Spritesheet)({
+                Spritesheet({
                     id,
                     image: this.getResourceUrl(spritesheetClass)
                 })
             ], AutoSpritesheet);
             spritesheetClass = AutoSpritesheet;
         }
-        this.addResource(spritesheetClass, Spritesheets_1._initSpritesheet);
+        this.addResource(spritesheetClass, _initSpritesheet);
         return spritesheetClass;
     }
     addSound(soundClass, id) {
         if (typeof soundClass === 'string') {
             if (!id) {
-                throw (0, Logger_1.log)('Please, specify the resource ID (second parameter)');
+                throw log('Please, specify the resource ID (second parameter)');
             }
             let AutoSound = class AutoSound {
             };
             AutoSound = __decorate([
-                (0, Sound_1.Sound)({
+                Sound({
                     id,
                     sound: this.getResourceUrl(soundClass)
                 })
             ], AutoSound);
             soundClass = AutoSound;
         }
-        this.addResource(soundClass, Sounds_1._initSound);
+        this.addResource(soundClass, _initSound);
         return soundClass;
     }
     getResourceUrl(source) {
         if (source.startsWith('data:')) {
             return source;
         }
-        return this.assetsPath + '/' + common_1.Utils.basename(source);
+        // @ts-ignore
+        const staticDir = import.meta.env.VITE_BUILT;
+        if (staticDir) {
+            return this.assetsPath + '/' + Utils.basename(source);
+        }
+        return source;
     }
     /**
      * Starts the client side and connects to the server
@@ -192,40 +193,39 @@ class RpgClientEngine {
      * @returns {Promise< void >}
      * @memberof RpgClientEngine
      */
-    start(options = {
+    async start(options = {
         renderLoop: true
     }) {
-        return __awaiter(this, void 0, void 0, function* () {
-            PIXI.utils.skipHello();
-            yield this._init();
-            yield this.renderer.init();
-            const { maxFps } = this.options;
-            if (options.renderLoop) {
-                this.scheduler.start({
-                    maxFps
-                });
-                // The processing is outside the rendering loop because if the FPS are lower (or higher) then the sending to the server would be slower or faster. Here it is constant
-                setInterval(() => {
-                    this.processInput();
-                }, common_1.Utils.fps2ms(this.serverFps));
-            }
-            const ret = yield common_1.RpgPlugin.emit(common_1.HookClient.Start, this);
-            this.matchMakerService = this.options.globalConfig.matchMakerService;
-            const hasFalseValue = ret.findIndex(el => el === false) != -1;
-            if (!hasFalseValue) {
-                let serverUri = {};
-                if (this.matchMakerService) {
-                    if (common_1.Utils.isFunction(this.matchMakerService)) {
-                        serverUri = this.matchMakerService();
-                    }
-                    else {
-                        // todo: change toPromise (RXJS v7+)
-                        serverUri = yield ajax_1.ajax.getJSON(this.matchMakerService).toPromise();
-                    }
+        await this._init();
+        await this.renderer.init();
+        const { maxFps } = this.options;
+        if (options.renderLoop) {
+            this.scheduler.start({
+                maxFps
+            });
+            // The processing is outside the rendering loop because if the FPS are lower (or higher) then the sending to the server would be slower or faster. Here it is constant
+            setInterval(() => {
+                this.processInput();
+            }, Utils.fps2ms(this.serverFps));
+        }
+        const ret = await RpgPlugin.emit(HookClient.Start, this);
+        this.matchMakerService = this.options.globalConfig.matchMakerService;
+        const hasFalseValue = ret.findIndex(el => el === false) != -1;
+        if (!hasFalseValue) {
+            let serverUri = {};
+            if (this.matchMakerService) {
+                if (Utils.isFunction(this.matchMakerService)) {
+                    serverUri = this.matchMakerService();
+                }
+                else {
+                    serverUri = await lastValueFrom(ajax.getJSON(this.matchMakerService));
                 }
-                this.connection(serverUri.url ? serverUri.url + ':' + serverUri.port : undefined);
             }
-        });
+            // @ts-ignore
+            const envUrl = import.meta.env.VITE_SERVER_URL;
+            this.connection(serverUri.url ? serverUri.url + ':' + serverUri.port :
+                envUrl ? envUrl : undefined);
+        }
     }
     /**
      * Display the next frame. Useful for unit tests
@@ -239,23 +239,22 @@ class RpgClientEngine {
     nextFrame(timestamp) {
         this.scheduler.nextTick(timestamp);
     }
-    sendInput(actionName) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const player = this.player;
-            if (!player)
-                return;
-            if (player.canMove) {
-                player.pendingMove.push({
-                    input: actionName,
-                    frame: this.frame
-                });
-            }
-        });
+    async sendInput(actionName) {
+        const player = this.player;
+        if (!player)
+            return;
+        if (player.canMove) {
+            player.pendingMove.push({
+                input: actionName,
+                frame: this.scheduler.frame
+            });
+        }
     }
     get player() {
         return this.gameEngine.world.getObject(this.gameEngine.playerId);
     }
     serverReconciliation(player) {
+        let garbage = [];
         this.serverFrames.forEach((serverData, frame) => {
             const { data: serverPos, time: serverTime } = serverData;
             const client = this.clientFrames.get(frame);
@@ -266,37 +265,38 @@ class RpgClientEngine {
                     player.position.y = serverPos.y;
             }
             player.position.z = serverPos.z;
+            garbage.push(frame);
+        });
+        garbage.forEach(frame => {
             this.serverFrames.delete(frame);
             this.clientFrames.delete(frame);
         });
+        garbage = [];
     }
-    step(t, dt) {
-        return __awaiter(this, void 0, void 0, function* () {
-            common_1.RpgPlugin.emit(common_1.HookClient.Step, [this, t, dt], true);
-        });
+    async step(t, dt) {
+        RpgPlugin.emit(HookClient.Step, [this, t, dt], true);
     }
-    processInput() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const player = this.player;
-            this.controls.preStep();
-            if (player) {
-                if (player.pendingMove.length > 0) {
-                    const { inputs: inputEvent } = yield this.gameEngine.processInput(this.gameEngine.playerId, this.controls.options);
-                    if (inputEvent.length == 0)
-                        return;
-                    this.clientFrames.set(this.frame, {
-                        data: player.position,
-                        time: Date.now()
-                    });
-                    if (this.socket) {
-                        this.socket.emit('move', { input: inputEvent, frame: this.frame });
-                    }
-                    common_1.RpgPlugin.emit(common_1.HookClient.SendInput, [this, inputEvent], true);
+    async processInput() {
+        const player = this.player;
+        this.controls.preStep();
+        if (player) {
+            if (player.pendingMove.length > 0) {
+                const { inputs: inputEvent } = await this.gameEngine.processInput(this.gameEngine.playerId, this.controls.options);
+                if (inputEvent.length == 0)
+                    return;
+                const frame = Date.now();
+                this.clientFrames.set(frame, {
+                    data: player.position.copy(),
+                    time: frame
+                });
+                if (this.socket) {
+                    this.socket.emit('move', { input: inputEvent, frame });
                 }
-                if (player.canMove)
-                    this.serverReconciliation(player);
+                RpgPlugin.emit(HookClient.SendInput, [this, inputEvent], true);
             }
-        });
+            if (player.canMove)
+                this.serverReconciliation(player);
+        }
     }
     /**
      *Connect to the server
@@ -319,9 +319,9 @@ class RpgClientEngine {
             this.socket = this.io;
         }
         this.socket.on('connect', () => {
-            if (RpgGui_1.RpgGui.exists(common_1.PrebuiltGui.Disconnect))
-                RpgGui_1.RpgGui.hide(common_1.PrebuiltGui.Disconnect);
-            common_1.RpgPlugin.emit(common_1.HookClient.Connected, [this, this.socket], true);
+            if (RpgGui.exists(PrebuiltGui.Disconnect))
+                RpgGui.hide(PrebuiltGui.Disconnect);
+            RpgPlugin.emit(HookClient.Connected, [this, this.socket], true);
             this.hasBeenDisconnected = false;
         });
         this.socket.on('playerJoined', (playerEvent) => {
@@ -329,7 +329,7 @@ class RpgClientEngine {
             this.session = playerEvent.session;
         });
         this.socket.on('connect_error', (err) => {
-            common_1.RpgPlugin.emit(common_1.HookClient.ConnectedError, [this, err, this.socket], true);
+            RpgPlugin.emit(HookClient.ConnectedError, [this, err, this.socket], true);
         });
         this.socket.on('preLoadScene', (name) => {
             if (this.lastScene == name) {
@@ -338,10 +338,13 @@ class RpgClientEngine {
             this.lastScene = name;
             this.renderer.transitionScene(name);
         });
-        this.socket.on('loadScene', ({ name, data }) => {
+        this.socket.on(SocketEvents.GameReload, () => {
+            window.location.reload();
+        });
+        this.socket.on(SocketEvents.LoadScene, ({ name, data }) => {
             this.renderer.loadScene(name, data);
         });
-        this.socket.on('changeServer', ({ url, port }) => {
+        this.socket.on(SocketEvents.ChangeServer, ({ url, port }) => {
             const connection = url + ':' + port;
             if (this.lastConnection == connection) {
                 return;
@@ -356,30 +359,30 @@ class RpgClientEngine {
         });
         this.socket.on('changeTile', ({ tiles, x, y }) => {
             const scene = this.renderer.getScene();
-            scene === null || scene === void 0 ? void 0 : scene.changeTile(x, y, tiles);
+            scene?.changeTile(x, y, tiles);
         });
-        this.socket.on(types_1.SocketEvents.CallMethod, ({ objectId, params, name }) => {
+        this.socket.on(SocketEvents.CallMethod, ({ objectId, params, name }) => {
             const scene = this.renderer.getScene();
-            const sprite = scene === null || scene === void 0 ? void 0 : scene.getPlayer(objectId);
+            const sprite = scene?.getPlayer(objectId);
             if (!sprite)
                 return;
             switch (name) {
-                case types_1.SocketMethods.ShowAnimation:
-                    scene === null || scene === void 0 ? void 0 : scene.showAnimation({
+                case SocketMethods.ShowAnimation:
+                    scene?.showAnimation({
                         attachTo: sprite,
                         graphic: params[0],
                         animationName: params[1],
                         replaceGraphic: params[2]
                     });
                     break;
-                case types_1.SocketMethods.CameraFollow:
+                case SocketMethods.CameraFollow:
                     const [spriteId, options] = params;
-                    scene === null || scene === void 0 ? void 0 : scene.cameraFollowSprite(spriteId, options);
+                    scene?.cameraFollowSprite(spriteId, options);
                     break;
-                case types_1.SocketMethods.PlaySound:
-                    RpgSound_1.RpgSound.play(params[0]);
+                case SocketMethods.PlaySound:
+                    RpgSound.play(params[0]);
                     break;
-                case types_1.SocketMethods.ModeMove:
+                case SocketMethods.ModeMove:
                     const player = this.player;
                     const { checkCollision } = params[0];
                     if (player) {
@@ -389,9 +392,9 @@ class RpgClientEngine {
             }
         });
         let lastRoomId = '';
-        this.subscriptionWorld = simple_room_client_1.World.listen(this.socket)
+        this.subscriptionWorld = World.listen(this.socket)
             .value
-            .subscribe((val) => {
+            .subscribe(async (val) => {
             const scene = this.renderer.getScene();
             if (!val.data) {
                 return;
@@ -408,6 +411,19 @@ class RpgClientEngine {
             const change = (prop, root = val, localEvent = false) => {
                 const list = root.data[prop];
                 const partial = root.partial[prop];
+                const isShape = prop == 'shapes';
+                if (!partial) {
+                    return;
+                }
+                if (val.resetProps.indexOf(prop) != -1) {
+                    const objects = isShape ? this.gameEngine.getShapes() : this.gameEngine.getObjects();
+                    for (let key in objects) {
+                        const obj = objects[key];
+                        if (obj) {
+                            this.gameEngine.removeObjectAndShape(key);
+                        }
+                    }
+                }
                 for (let key in partial) {
                     const obj = list[key];
                     const paramsChanged = partial ? partial[key] : undefined;
@@ -416,11 +432,10 @@ class RpgClientEngine {
                     }
                     if (!obj)
                         continue;
-                    const isShape = prop == 'shapes';
                     if (!isShape) {
                         obj.type = {
-                            users: types_1.PlayerType.Player,
-                            events: types_1.PlayerType.Event
+                            users: PlayerType.Player,
+                            events: PlayerType.Event
                         }[prop];
                     }
                     if (prop == 'users' && this.gameEngine.playerId == key) {
@@ -434,11 +449,12 @@ class RpgClientEngine {
                                     data: obj,
                                     partial: paramsChanged,
                                     time: val.time,
-                                    roomId: val.roomId
+                                    roomId: val.roomId,
+                                    resetProps: val.resetProps
                                 }, true);
                             }
                         }
-                        if ((partialRoom === null || partialRoom === void 0 ? void 0 : partialRoom.pos) && (partialRoom === null || partialRoom === void 0 ? void 0 : partialRoom.frame) !== undefined) {
+                        if (partialRoom?.pos && partialRoom?.frame !== undefined) {
                             this.serverFrames.set(partialRoom.frame, {
                                 data: partialRoom.pos,
                                 time: Date.now()
@@ -470,12 +486,12 @@ class RpgClientEngine {
             if (this.serverChanging) {
                 return;
             }
-            if (RpgGui_1.RpgGui.exists(common_1.PrebuiltGui.Disconnect))
-                RpgGui_1.RpgGui.display(common_1.PrebuiltGui.Disconnect);
-            common_1.RpgPlugin.emit(common_1.HookClient.Disconnect, [this, reason, this.socket], true);
+            if (RpgGui.exists(PrebuiltGui.Disconnect))
+                RpgGui.display(PrebuiltGui.Disconnect);
+            RpgPlugin.emit(HookClient.Disconnect, [this, reason, this.socket], true);
             this.hasBeenDisconnected = true;
         });
-        RpgGui_1.RpgGui._setSocket(this.socket);
+        RpgGui._setSocket(this.socket);
         if (standalone) {
             this.socket.connection({
                 auth: {
@@ -486,7 +502,7 @@ class RpgClientEngine {
         this.serverChanging = false;
     }
     get world() {
-        return simple_room_client_1.World;
+        return World;
     }
     // shortcuts
     /**
@@ -544,14 +560,19 @@ class RpgClientEngine {
     reset() {
         this.subscriptionWorld.unsubscribe();
         this.world.reset();
-        Spritesheets_1.spritesheets.clear();
-        Sounds_1.sounds.clear();
-        PIXI.Loader.shared.reset();
-        PIXI.utils.clearTextureCache();
-        RpgGui_1.RpgGui.clear();
-        common_1.RpgCommonMap.bufferClient.clear();
-        RpgSound_1.RpgSound.clear();
+        spritesheets.clear();
+        sounds.clear();
+        Assets.reset();
+        utils.clearTextureCache();
+        for (let textureUrl in utils.BaseTextureCache) {
+            delete utils.BaseTextureCache[textureUrl];
+        }
+        for (let textureUrl in utils.TextureCache) {
+            delete utils.TextureCache[textureUrl];
+        }
+        RpgGui.clear();
+        RpgCommonMap.bufferClient.clear();
+        RpgSound.clear();
     }
 }
-exports.RpgClientEngine = RpgClientEngine;
 //# sourceMappingURL=RpgClientEngine.js.map