From e41eda9979fa37404d55ecf01754acbba8a2e660 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 23 May 2020 16:13:37 +0200
Subject: [PATCH] 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');
+
     }
 }