Merge pull request #122 from thecodingmachine/reconnecting_scene

Adding a special scene to wait for server reconnection

front/src/Connexion.ts

@@ -205,14 +205,14 @@ export class Connexion implements ConnexionInterface {
             });
 
             //if try to reconnect with last position
-            if(this.lastRoom) {
+            /*if(this.lastRoom) {
                 //join the room
                 this.joinARoom(this.lastRoom,
                     this.lastPositionShared ? this.lastPositionShared.x : 0,
                     this.lastPositionShared ? this.lastPositionShared.y : 0,
                     this.lastPositionShared ? this.lastPositionShared.direction : PlayerAnimationNames.WalkDown,
                     this.lastPositionShared ? this.lastPositionShared.moving : false);
-            }
+            }*/
 
             /*if(this.lastPositionShared) {
 
@@ -336,12 +336,12 @@ export class Connexion implements ConnexionInterface {
 
     disconnectServer(): void {
         this.socket.on(EventMessage.CONNECT_ERROR, () => {
-            MessageUI.warningMessage("Trying to connect!");
+            this.GameManager.switchToDisconnectedScene();
         });
 
         this.socket.on(EventMessage.RECONNECT, () => {
-            MessageUI.removeMessage();
             this.connectSocketServer();
+            this.GameManager.reconnectToGameScene(this.lastPositionShared);
         });
     }
 

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

@@ -2,7 +2,7 @@ import {GameManager, gameManager, HasMovedEvent} from "./GameManager";
 import {
     GroupCreatedUpdatedMessageInterface,
     MessageUserMovedInterface,
-    MessageUserPositionInterface
+    MessageUserPositionInterface, PointInterface, PositionInterface
 } from "../../Connexion";
 import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "../Player/Player";
 import { DEBUG_MODE, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
@@ -18,6 +18,10 @@ export enum Textures {
     Player = "male1"
 }
 
+interface GameSceneInitInterface {
+    initPosition: PointInterface|null
+}
+
 export class GameScene extends Phaser.Scene {
     GameManager : GameManager;
     Terrains : Array<Phaser.Tilemaps.Tileset>;
@@ -32,6 +36,7 @@ export class GameScene extends Phaser.Scene {
     startX = 704;// 22 case
     startY = 32; // 1 case
     circleTexture: CanvasTexture;
+    initPosition: PositionInterface;
 
     MapKey: string;
     MapUrlFile: string;
@@ -84,7 +89,9 @@ export class GameScene extends Phaser.Scene {
     }
 
     //hook initialisation
-    init() {}
+    init(initData : GameSceneInitInterface) {
+        this.initPosition = initData.initPosition;
+    }
 
     //hook create scene
     create(): void {
@@ -208,7 +215,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,56 @@
+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";
+import Sprite = Phaser.GameObjects.Sprite;
+
+export const ReconnectingSceneName = "ReconnectingScene";
+enum ReconnectingTextures {
+    icon = "icon",
+    mainFont = "main_font"
+}
+
+export class ReconnectingScene extends Phaser.Scene {
+    private reconnectingField: TextField;
+    private logo: Image;
+    private cat: Sprite;
+
+    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');
+        this.load.spritesheet(
+            'cat',
+            'resources/characters/pipoya/Cat 01-1.png',
+            {frameWidth: 32, frameHeight: 32}
+        );
+    }
+
+    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, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting...");
+        this.reconnectingField.setOrigin(0.5, 0.5).setCenterAlign();
+
+        let cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
+        this.anims.create({
+            key: 'right',
+            frames: this.anims.generateFrameNumbers('cat', { start: 6, end: 8 }),
+            frameRate: 10,
+            repeat: -1
+        });
+        cat.play('right');
+
+    }
+}

front/src/index.ts

@@ -3,13 +3,15 @@ import GameConfig = Phaser.Types.Core.GameConfig;
 import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {cypressAsserter} from "./Cypress/CypressAsserter";
 import {LogincScene} from "./Phaser/Login/LogincScene";
+import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
+import {gameManager} from "./Phaser/Game/GameManager";
 
 const config: GameConfig = {
     title: "Office game",
     width: window.innerWidth / RESOLUTION,
     height: window.innerHeight / RESOLUTION,
     parent: "game",
-    scene: [LogincScene],
+    scene: [LogincScene, ReconnectingScene],
     zoom: RESOLUTION,
     physics: {
         default: "arcade",