diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index e5a73aaf..0d4429f5 100644 --- a/front/src/Connexion.ts +++ b/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); }); } diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 6b848aa1..7a439fbe 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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(); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index cce0e939..2ec6ea13 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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; @@ -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){ diff --git a/front/src/Phaser/Reconnecting/ReconnectingScene.ts b/front/src/Phaser/Reconnecting/ReconnectingScene.ts new file mode 100644 index 00000000..273820b7 --- /dev/null +++ b/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'); + + } +} diff --git a/front/src/index.ts b/front/src/index.ts index e6c8ce40..2ab8d91a 100644 --- a/front/src/index.ts +++ b/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",