Adding a special scene to wait for server reconnection

front/src/Phaser/Game/GameManager.ts

@@ -2,12 +2,18 @@ import {GameScene} from "./GameScene";
 import {
     Connexion,
     GroupCreatedUpdatedMessageInterface,
-    ListMessageUserPositionInterface, MessageUserJoined, MessageUserMovedInterface, MessageUserPositionInterface, Point
+    ListMessageUserPositionInterface,
+    MessageUserJoined,
+    MessageUserMovedInterface,
+    MessageUserPositionInterface,
+    Point,
+    PointInterface
 } from "../../Connexion";
 import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer";
 import {getMapKeyByUrl} from "../Login/LogincScene";
 import ScenePlugin = Phaser.Scenes.ScenePlugin;
 import {AddPlayerInterface} from "./AddPlayerInterface";
+import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
 
 export enum StatusGameManagerEnum {
     IN_PROGRESS = 1,
@@ -174,6 +180,16 @@ export class GameManager {
         }
         return sceneKey;
     }
+
+    private oldSceneKey : string;
+    switchToDisconnectedScene(): void {
+        this.oldSceneKey = this.currentGameScene.scene.key;
+        this.currentGameScene.scene.start(ReconnectingSceneName);
+    }
+
+    reconnectToGameScene(lastPositionShared: PointInterface) {
+        this.currentGameScene.scene.start(this.oldSceneKey, { initPosition: lastPositionShared });
+    }
 }
 
 export const gameManager = new GameManager();

front/src/Phaser/Game/GameScene.ts

@@ -3,7 +3,7 @@ import {
     GroupCreatedUpdatedMessageInterface,
     MessageUserJoined,
     MessageUserMovedInterface,
-    MessageUserPositionInterface
+    MessageUserPositionInterface, PointInterface, PositionInterface
 } from "../../Connexion";
 import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "../Player/Player";
 import { DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
@@ -19,6 +19,10 @@ export enum Textures {
     Player = "male1"
 }
 
+interface GameSceneInitInterface {
+    initPosition: PointInterface|null
+}
+
 export class GameScene extends Phaser.Scene {
     GameManager : GameManager;
     Terrains : Array<Phaser.Tilemaps.Tileset>;
@@ -33,6 +37,7 @@ export class GameScene extends Phaser.Scene {
     startX = 704;// 22 case
     startY = 32; // 1 case
     circleTexture: CanvasTexture;
+    initPosition: PositionInterface;
 
     MapKey: string;
     MapUrlFile: string;
@@ -85,7 +90,9 @@ export class GameScene extends Phaser.Scene {
     }
 
     //hook initialisation
-    init() {}
+    init(initData : GameSceneInitInterface) {
+        this.initPosition = initData.initPosition;
+    }
 
     //hook create scene
     create(): void {
@@ -209,7 +216,13 @@ export class GameScene extends Phaser.Scene {
     /**
      * @param layer
      */
-    private startUser(layer: ITiledMapLayer){
+    private startUser(layer: ITiledMapLayer): void {
+        if (this.initPosition !== undefined) {
+            this.startX = this.initPosition.x;
+            this.startY = this.initPosition.y;
+            return;
+        }
+
         let tiles : any = layer.data;
         tiles.forEach((objectKey : number, key: number) => {
             if(objectKey === 0){

front/src/Phaser/Reconnecting/ReconnectingScene.ts

@@ -0,0 +1,38 @@
+import {gameManager} from "../Game/GameManager";
+import {TextField} from "../Components/TextField";
+import {TextInput} from "../Components/TextInput";
+import {ClickButton} from "../Components/ClickButton";
+import Image = Phaser.GameObjects.Image;
+import Rectangle = Phaser.GameObjects.Rectangle;
+import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
+import {cypressAsserter} from "../../Cypress/CypressAsserter";
+
+export const ReconnectingSceneName = "ReconnectingScene";
+enum ReconnectingTextures {
+    icon = "icon",
+    mainFont = "main_font"
+}
+
+export class ReconnectingScene extends Phaser.Scene {
+    private reconnectingField: TextField;
+    private logo: Image;
+
+    constructor() {
+        super({
+            key: ReconnectingSceneName
+        });
+    }
+
+    preload() {
+        this.load.image(ReconnectingTextures.icon, "resources/logos/tcm_full.png");
+        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
+        this.load.bitmapFont(ReconnectingTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+    }
+
+    create() {
+        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, ReconnectingTextures.icon);
+        this.add.existing(this.logo);
+
+        this.reconnectingField = new TextField(this, 10, this.game.renderer.height - 35, "Connection lost. Reconnecting...");
+    }
+}