merge from develop

back/src/Controller/AuthenticateController.ts

@@ -1,5 +1,5 @@
 import {URL_ROOM_STARTED} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..."
-import { uuid } from 'uuidv4';
+import { v4 } from 'uuid';
 import {HttpRequest, HttpResponse, TemplatedApp} from "uWebSockets.js";
 import {BaseController} from "./BaseController";
 import {adminApi, AdminApiData} from "../Services/AdminApi";
@@ -50,11 +50,11 @@ export class AuthenticateController extends BaseController {
                         mapUrlStart = data.mapUrlStart;
                         newUrl = this.getNewUrlOnAdminAuth(data)
                     } else if (mapSlug !== null) {
-                        userUuid = uuid();
+                        userUuid = v4();
                         mapUrlStart = mapSlug;
                         newUrl = null;
                     } else {
-                        userUuid = uuid();
+                        userUuid = v4();
                         mapUrlStart = host.replace('api.', 'maps.') + URL_ROOM_STARTED;
                         newUrl = '_/global/'+mapUrlStart;
                     }

back/src/Controller/FileController.ts

@@ -1,6 +1,6 @@
 import {App} from "../Server/sifrr.server";
 
-import {uuid} from "uuidv4";
+import {v4} from "uuid";
 import {HttpRequest, HttpResponse} from "uWebSockets.js";
 import {BaseController} from "./BaseController";
 import { Readable } from 'stream'
@@ -51,7 +51,7 @@ export class FileController extends BaseController {
                 })
 
                 try {
-                    const audioMessageId = uuid();
+                    const audioMessageId = v4();
 
                     const params = await res.formData({
                         onFile: (fieldname: string,

front/src/Administration/ConsoleGlobalMessageManager.ts

@@ -36,10 +36,8 @@ export class ConsoleGlobalMessageManager {
     }
 
     initialise() {
-        try {
+        for (const elem of document.getElementsByClassName(CLASS_CONSOLE_MESSAGE)) {
-            HtmlUtils.removeElementByIdOrFail(CLASS_CONSOLE_MESSAGE);
+            elem.remove();
-        }catch (err){
-            console.error(err);
         }
 
         const typeConsole = document.createElement('input');

front/src/Connexion/ConnectionManager.ts

@@ -11,7 +11,7 @@ interface LoginApiData {
 }
 
 class ConnectionManager {
-    private initPromise: Promise<LoginApiData> = Promise.reject();
+    private initPromise!: Promise<LoginApiData>;
     private mapUrlStart: string|null = null;
 
     private authToken:string|null = null;

front/src/Connexion/RoomConnection.ts

@@ -43,6 +43,7 @@ export class RoomConnection implements RoomConnection {
     private userId: number|null = null;
     private listeners: Map<string, Function[]> = new Map<string, Function[]>();
     private static websocketFactory: null|((url: string)=>any) = null; // eslint-disable-line @typescript-eslint/no-explicit-any
+    private closed: boolean = false;
 
     public static setWebsocketFactory(websocketFactory: (url: string)=>any): void { // eslint-disable-line @typescript-eslint/no-explicit-any
         RoomConnection.websocketFactory = websocketFactory;
@@ -173,6 +174,7 @@ export class RoomConnection implements RoomConnection {
 
     public closeConnection(): void {
         this.socket?.close();
+        this.closed = true;
     }
 
     private toPositionMessage(x : number, y : number, direction : string, moving: boolean): PositionMessage {
@@ -389,6 +391,9 @@ export class RoomConnection implements RoomConnection {
 
     public onServerDisconnected(callback: (event: CloseEvent) => void): void {
         this.socket.addEventListener('close', (event) => {
+            if (this.closed === true) {
+                return;
+            }
             console.log('Socket closed with code '+event.code+". Reason: "+event.reason);
             if (event.code === 1000) {
                 // Normal closure case

front/src/Phaser/Components/TextInput.ts

@@ -38,4 +38,16 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
     getText(): string {
         return this.text;
     }
+
+    setX(x: number): this {
+        super.setX(x);
+        this.underLine.x = x;
+        return this;
+    }
+
+    setY(y: number): this {
+        super.setY(y);
+        this.underLine.y = y+1;
+        return this;
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -45,6 +45,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
 import {RoomConnection} from "../../Connexion/RoomConnection";
 import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
 import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
+import {ResizableScene} from "../Login/ResizableScene";
 
 
 export enum Textures {
@@ -86,7 +87,7 @@ interface DeleteGroupEventInterface {
     groupId: number
 }
 
-export class GameScene extends Phaser.Scene implements CenterListener {
+export class GameScene extends ResizableScene implements CenterListener {
     GameManager : GameManager;
     Terrains : Array<Phaser.Tilemaps.Tileset>;
     CurrentPlayer!: CurrentGamerInterface;
@@ -131,7 +132,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
     private startLayerName: string|undefined;
     private presentationModeSprite!: Sprite;
     private chatModeSprite!: Sprite;
-    private onResizeCallback!: (this: Window, ev: UIEvent) => void;
     private gameMap!: GameMap;
     private actionableItems: Map<number, ActionableItem> = new Map<number, ActionableItem>();
     // The item that can be selected by pressing the space key.
@@ -464,8 +464,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
             this.switchLayoutMode();
         });
 
-        this.onResizeCallback = this.onResize.bind(this);
-        window.addEventListener('resize', this.onResizeCallback);
         this.reposition();
 
         // From now, this game scene will be notified of reposition events
@@ -951,13 +949,12 @@ export class GameScene extends Phaser.Scene implements CenterListener {
         });
 
         const nextSceneKey = this.checkToExit();
-        if(nextSceneKey){
+        if (nextSceneKey) {
             // We are completely destroying the current scene to avoid using a half-backed instance when coming back to the same map.
             this.connection.closeConnection();
             this.simplePeer.unregister();
             this.scene.stop();
             this.scene.remove(this.scene.key);
-            window.removeEventListener('resize', this.onResizeCallback);
             this.scene.start(nextSceneKey.key, {
                 startLayerName: nextSceneKey.hash
             });
@@ -1150,7 +1147,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
         this.connection.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    private onResize(): void {
+    public onResize(): void {
         this.reposition();
 
         // Send new viewport to server

front/src/Phaser/Login/CustomizeScene.ts

@@ -6,6 +6,7 @@ import {LAYERS, loadAllLayers} from "../Entity/body_character";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
+import {ResizableScene} from "./ResizableScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -16,7 +17,7 @@ enum CustomizeTextures{
     arrowUp = "arrow_up",
 }
 
-export class CustomizeScene extends Phaser.Scene {
+export class CustomizeScene extends ResizableScene {
 
     private textField!: TextField;
     private enterField!: TextField;
@@ -35,8 +36,6 @@ export class CustomizeScene extends Phaser.Scene {
     private containersRow: Array<Array<Container>> = new Array<Array<Container>>();
     private activeRow = 0;
 
-    private repositionCallback!: (this: Window, ev: UIEvent) => void;
-
     constructor() {
         super({
             key: CustomizeSceneName
@@ -144,10 +143,6 @@ export class CustomizeScene extends Phaser.Scene {
                 this.moveLayers();
             }
         });
-
-        this.repositionCallback = this.reposition.bind(this);
-        window.addEventListener('resize', this.repositionCallback);
-
     }
     update(time: number, delta: number): void {
         super.update(time, delta);
@@ -249,7 +244,7 @@ export class CustomizeScene extends Phaser.Scene {
         }
      }
 
-     private reposition() {
+     public onResize(): void {
         this.moveLayers();
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;

front/src/Phaser/Login/LoginScene.ts

@@ -7,6 +7,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
 import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
+import {ResizableScene} from "./ResizableScene";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
@@ -15,12 +16,12 @@ enum LoginTextures {
     mainFont = "main_font"
 }
 
-export class LoginScene extends Phaser.Scene {
+export class LoginScene extends ResizableScene {
-    private nameInput: TextInput|null = null;
+    private nameInput!: TextInput;
-    private textField: TextField|null = null;
+    private textField!: TextField;
-    private infoTextField: TextField|null = null;
+    private infoTextField!: TextField;
-    private pressReturnField: TextField|null = null;
+    private pressReturnField!: TextField;
-    private logo: Image|null = null;
+    private logo!: Image;
     private name: string = '';
 
     constructor() {
@@ -93,4 +94,14 @@ export class LoginScene extends Phaser.Scene {
 
         this.scene.start(SelectCharacterSceneName);
     }
+
+    public onResize(ev: UIEvent): void {
+        this.textField.x = this.game.renderer.width / 2;
+        this.nameInput.setX(this.game.renderer.width / 2 - 64);
+        this.pressReturnField.x = this.game.renderer.width / 2;
+        this.logo.x = this.game.renderer.width - 30;
+        this.logo.y = this.game.renderer.height - 20;
+        this.infoTextField.y = this.game.renderer.height - 35;
+    }
+
 }

front/src/Phaser/Login/ResizableScene.ts

@@ -0,0 +1,5 @@
+import {Scene} from "phaser";
+
+export abstract class ResizableScene extends Scene {
+    public abstract onResize(ev: UIEvent): void;
+}

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -5,6 +5,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
 import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
+import {ResizableScene} from "./ResizableScene";
 
 
 //todo: put this constants in a dedicated file
@@ -17,7 +18,7 @@ enum LoginTextures {
     customizeButtonSelected = "customize_button_selected"
 }
 
-export class SelectCharacterScene extends Phaser.Scene {
+export class SelectCharacterScene extends ResizableScene {
     private readonly nbCharactersPerRow = 4;
     private textField!: TextField;
     private pressReturnField!: TextField;
@@ -242,4 +243,26 @@ export class SelectCharacterScene extends Phaser.Scene {
             window.localStorage.setItem('selectedPlayer', String(playerNumber));
         }
     }
+
+    public onResize(ev: UIEvent): void {
+        this.textField.x = this.game.renderer.width / 2;
+        this.pressReturnField.x = this.game.renderer.width / 2;
+        this.logo.x = this.game.renderer.width - 30;
+        this.logo.y = this.game.renderer.height - 20;
+        this.customizeButton.x = this.game.renderer.width / 2;
+        this.customizeButtonSelected.x = this.game.renderer.width / 2;
+
+        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
+            const player = this.players[i];
+
+            const col = i % this.nbCharactersPerRow;
+            const row = Math.floor(i / this.nbCharactersPerRow);
+
+            const [x, y] = this.getCharacterPosition(col, row);
+            player.x = x;
+            player.y = y;
+        }
+        this.updateSelectedPlayer();
+    }
+
 }

front/src/index.ts

@@ -12,6 +12,7 @@ import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
 import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {connectionManager} from "./Connexion/ConnectionManager";
+import {ResizableScene} from "./Phaser/Login/ResizableScene";
 
 //CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
 connectionManager.init();
@@ -55,6 +56,13 @@ window.addEventListener('resize', function (event) {
     const {width, height} = CoWebsiteManager.getGameSize();
 
     game.scale.resize(width / RESOLUTION, height / RESOLUTION);
+
+    // Let's trigger the onResize method of any active scene that is a ResizableScene
+    for (const scene of game.scene.getScenes(true)) {
+        if (scene instanceof ResizableScene) {
+            scene.onResize(event);
+        }
+    }
 });
 CoWebsiteManager.onStateChange(() => {
     const {width, height} = CoWebsiteManager.getGameSize();

front/yarn.lock

@@ -3871,7 +3871,7 @@ quill-delta@^3.6.2:
     extend "^3.0.2"
     fast-diff "1.1.2"
 
-quill@^1.3.7:
+quill@1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
   integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==

website/package-lock.json

@@ -2287,9 +2287,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.4.1",
+      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -3487,13 +3487,6 @@
         "glob": "~7.1.1",
         "lodash": "~4.17.12",
         "minimatch": "~3.0.2"
-      },
-      "dependencies": {
-        "lodash": {
-          "version": "4.17.15",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-        }
       }
     },
     "graceful-fs": {
@@ -4234,9 +4227,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.15",
+      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
     "lodash.get": {
       "version": "4.4.2",
@@ -4721,11 +4714,6 @@
             "which": "^1.2.9"
           }
         },
-        "lodash": {
-          "version": "4.17.15",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-          "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-        },
         "lru-cache": {
           "version": "4.1.5",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",