From 36858f8747c235ac7565c123fbb9bdb85bbbac6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 23 May 2020 15:43:26 +0200 Subject: [PATCH 1/2] Adding a special scene to wait for server reconnection --- front/src/Connexion.ts | 6 ++- front/src/Phaser/Game/GameManager.ts | 18 ++++++++- front/src/Phaser/Game/GameScene.ts | 19 ++++++++-- .../Phaser/Reconnecting/ReconnectingScene.ts | 38 +++++++++++++++++++ front/src/index.ts | 4 +- 5 files changed, 78 insertions(+), 7 deletions(-) create mode 100644 front/src/Phaser/Reconnecting/ReconnectingScene.ts diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index 1b963129..1f4d26cd 100644 --- a/front/src/Connexion.ts +++ b/front/src/Connexion.ts @@ -210,14 +210,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) { @@ -342,11 +342,13 @@ 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 4a003b33..9aa6ece7 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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; @@ -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){ diff --git a/front/src/Phaser/Reconnecting/ReconnectingScene.ts b/front/src/Phaser/Reconnecting/ReconnectingScene.ts new file mode 100644 index 00000000..02e9f321 --- /dev/null +++ b/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..."); + } +} 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", From e41eda9979fa37404d55ecf01754acbba8a2e660 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sat, 23 May 2020 16:13:37 +0200 Subject: [PATCH 2/2] Prettifying lost connection screen --- front/src/Connexion.ts | 2 -- .../Phaser/Reconnecting/ReconnectingScene.ts | 20 ++++++++++++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index 1f4d26cd..874ecc7d 100644 --- a/front/src/Connexion.ts +++ b/front/src/Connexion.ts @@ -341,12 +341,10 @@ 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/Reconnecting/ReconnectingScene.ts b/front/src/Phaser/Reconnecting/ReconnectingScene.ts index 02e9f321..273820b7 100644 --- a/front/src/Phaser/Reconnecting/ReconnectingScene.ts +++ b/front/src/Phaser/Reconnecting/ReconnectingScene.ts @@ -6,6 +6,7 @@ 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 { @@ -16,6 +17,7 @@ enum ReconnectingTextures { export class ReconnectingScene extends Phaser.Scene { private reconnectingField: TextField; private logo: Image; + private cat: Sprite; constructor() { super({ @@ -27,12 +29,28 @@ export class ReconnectingScene extends Phaser.Scene { 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, 10, this.game.renderer.height - 35, "Connection lost. Reconnecting..."); + 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'); + } }