From d47aad2ead1ad1f16b652657e0cb155a6278de48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9sar=20Cardinale?= <c.cardinale@workadventu.re>
Date: Wed, 4 May 2022 10:13:18 +0200
Subject: [PATCH] Change lost connection page to the new one (#2161)

* Change lost connection page to the new one
---
 front/src/Components/UI/ErrorScreen.svelte |  52 ++++++++++++---------
 front/src/Components/UI/images/error.png   | Bin 0 -> 4422 bytes
 front/src/Phaser/Game/GameScene.ts         |  29 ++++++++++--
 front/src/Stores/ErrorScreenStore.ts       |   5 +-
 front/src/i18n/de-DE/warning.ts            |   2 +
 front/src/i18n/en-US/warning.ts            |   2 +
 front/src/i18n/fr-FR/menu.ts               |   2 +-
 front/src/i18n/fr-FR/warning.ts            |   2 +
 front/src/i18n/zh-CN/warning.ts            |   2 +
 9 files changed, 67 insertions(+), 29 deletions(-)
 create mode 100644 front/src/Components/UI/images/error.png

diff --git a/front/src/Components/UI/ErrorScreen.svelte b/front/src/Components/UI/ErrorScreen.svelte
index 11ab8ca4..8056bf94 100644
--- a/front/src/Components/UI/ErrorScreen.svelte
+++ b/front/src/Components/UI/ErrorScreen.svelte
@@ -11,14 +11,17 @@
     import reload from "../images/reload.png";
     let errorScreen = get(errorScreenStore);
 
+    import error from "./images/error.png";
+    let errorLogo = errorScreen?.image ?? error;
+
     function click() {
-        if (errorScreen.type === "unauthorized") void connectionManager.logout();
+        if (errorScreen?.type === "unauthorized") void connectionManager.logout();
         else window.location.reload();
     }
-    let details = errorScreen.details;
-    let timeVar = errorScreen.timeToRetry ?? 0;
+    let details = errorScreen?.details ?? "";
+    let timeVar = errorScreen?.timeToRetry ?? 0;
 
-    if (errorScreen.type === "retry") {
+    if (errorScreen?.type === "retry") {
         let interval = setInterval(() => {
             if (timeVar <= 1000) click();
             timeVar -= 1000;
@@ -29,24 +32,29 @@
     $: detailsStylized = (details ?? "").replace("{time}", `${timeVar / 1000}`);
 </script>
 
-<main class="errorScreen" transition:fly={{ y: -200, duration: 500 }}>
-    <div style="width: 90%;">
-        <img src={logo} alt="WorkAdventure" class="logo" />
-        <div><img src={$errorScreenStore.image} alt="" class="icon" /></div>
-        {#if $errorScreenStore.type !== "retry"}<h2>{$errorScreenStore.title}</h2>{/if}
-        <p>{$errorScreenStore.subtitle}</p>
-        {#if $errorScreenStore.type !== "retry"}<p class="code">Code : {$errorScreenStore.code}</p>{/if}
-        <p class="details">
-            {detailsStylized}{#if $errorScreenStore.type === "retry"}<div class="loading" />{/if}
-        </p>
-        {#if ($errorScreenStore.type === "retry" && $errorScreenStore.canRetryManual) || $errorScreenStore.type === "unauthorized"}
-            <button type="button" class="nes-btn is-primary button" on:click={click}>
-                {#if $errorScreenStore.type === "retry"}<img src={reload} alt="" class="reload" />{/if}
-                {$errorScreenStore.buttonTitle}
-            </button>
-        {/if}
-    </div>
-</main>
+{#if $errorScreenStore}
+    <main class="errorScreen" transition:fly={{ y: -200, duration: 500 }}>
+        <div style="width: 90%;">
+            <img src={logo} alt="WorkAdventure" class="logo" />
+            <div><img src={errorLogo} alt="Error logo" class="icon" /></div>
+            {#if $errorScreenStore.type !== "retry"}<h2>{$errorScreenStore.title}</h2>{/if}
+            {#if $errorScreenStore.subtitle}<p>{$errorScreenStore.subtitle}</p>{/if}
+            {#if $errorScreenStore.type !== "retry"}<p class="code">Code : {$errorScreenStore.code}</p>{/if}
+            <p class="details">
+                {detailsStylized}
+                {#if $errorScreenStore.type === "retry" || $errorScreenStore.type === "reconnecting"}
+                    <div class="loading" />
+                {/if}
+            </p>
+            {#if ($errorScreenStore.type === "retry" && $errorScreenStore.canRetryManual) || $errorScreenStore.type === "unauthorized"}
+                <button type="button" class="nes-btn is-primary button" on:click={click}>
+                    {#if $errorScreenStore.type === "retry"}<img src={reload} alt="" class="reload" />{/if}
+                    {$errorScreenStore.buttonTitle}
+                </button>
+            {/if}
+        </div>
+    </main>
+{/if}
 
 <style lang="scss">
     main.errorScreen {
diff --git a/front/src/Components/UI/images/error.png b/front/src/Components/UI/images/error.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec2ea9eea186fada13a88d47b7d858bec4551641
GIT binary patch
literal 4422
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
PKM0D6mGKiJTEssA=lHpR

literal 0
HcmV?d00001

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 9d1d9f2a..5100b90c 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -76,6 +76,7 @@ import { contactPageStore } from "../../Stores/MenuStore";
 import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
 import { audioManagerFileStore } from "../../Stores/AudioManagerStore";
 import { currentPlayerGroupLockStateStore } from "../../Stores/CurrentPlayerGroupStore";
+import { errorScreenStore } from "../../Stores/ErrorScreenStore";
 
 import EVENT_TYPE = Phaser.Scenes.Events;
 import Texture = Phaser.Textures.Texture;
@@ -90,7 +91,7 @@ import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
-import { locale } from "../../i18n/i18n-svelte";
+import LL, { locale } from "../../i18n/i18n-svelte";
 import { availabilityStatusStore, localVolumeStore } from "../../Stores/MediaStore";
 import { StringUtils } from "../../Utils/StringUtils";
 import { startLayerNamesStore } from "../../Stores/StartLayerNamesStore";
@@ -100,7 +101,7 @@ import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
 import CancelablePromise from "cancelable-promise";
 import { Deferred } from "ts-deferred";
 import { SuperLoaderPlugin } from "../Services/SuperLoaderPlugin";
-import { PlayerDetailsUpdatedMessage } from "../../Messages/ts-proto-generated/protos/messages";
+import { ErrorScreenMessage, PlayerDetailsUpdatedMessage } from "../../Messages/ts-proto-generated/protos/messages";
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -597,14 +598,30 @@ export class GameScene extends DirtyScene {
             if (this.isReconnecting) {
                 setTimeout(() => {
                     this.scene.sleep();
-                    this.scene.launch(ReconnectingSceneName);
+                    errorScreenStore.setError(
+                        ErrorScreenMessage.fromPartial({
+                            type: "reconnecting",
+                            code: "CONNECTION_LOST",
+                            title: get(LL).warning.connectionLostTitle(),
+                            details: get(LL).warning.connectionLostSubtitle(),
+                        })
+                    );
+                    //this.scene.launch(ReconnectingSceneName);
                 }, 0);
             } else if (this.connection === undefined) {
                 // Let's wait 1 second before printing the "connecting" screen to avoid blinking
                 setTimeout(() => {
                     if (this.connection === undefined) {
                         this.scene.sleep();
-                        this.scene.launch(ReconnectingSceneName);
+                        errorScreenStore.setError(
+                            ErrorScreenMessage.fromPartial({
+                                type: "reconnecting",
+                                code: "CONNECTION_LOST",
+                                title: get(LL).warning.connectionLostTitle(),
+                                details: get(LL).warning.connectionLostSubtitle(),
+                            })
+                        );
+                        //this.scene.launch(ReconnectingSceneName);
                     }
                 }, 1000);
             }
@@ -888,7 +905,9 @@ export class GameScene extends DirtyScene {
                 // Analyze tags to find if we are admin. If yes, show console.
 
                 if (this.scene.isSleeping()) {
-                    this.scene.stop(ReconnectingSceneName);
+                    const error = get(errorScreenStore);
+                    if (error && error?.type === "reconnecting") errorScreenStore.delete();
+                    //this.scene.stop(ReconnectingSceneName);
                 }
 
                 //init user position and play trigger to check layers properties
diff --git a/front/src/Stores/ErrorScreenStore.ts b/front/src/Stores/ErrorScreenStore.ts
index 564afb92..3e2827ba 100644
--- a/front/src/Stores/ErrorScreenStore.ts
+++ b/front/src/Stores/ErrorScreenStore.ts
@@ -5,13 +5,16 @@ import { ErrorScreenMessage } from "../Messages/ts-proto-generated/protos/messag
  * A store that contains one error of type WAError to be displayed.
  */
 function createErrorScreenStore() {
-    const { subscribe, set } = writable<ErrorScreenMessage>(undefined);
+    const { subscribe, set } = writable<ErrorScreenMessage | undefined>(undefined);
 
     return {
         subscribe,
         setError: (e: ErrorScreenMessage): void => {
             set(e);
         },
+        delete: () => {
+            set(undefined);
+        },
     };
 }
 
diff --git a/front/src/i18n/de-DE/warning.ts b/front/src/i18n/de-DE/warning.ts
index 4d1f4738..49739854 100644
--- a/front/src/i18n/de-DE/warning.ts
+++ b/front/src/i18n/de-DE/warning.ts
@@ -14,6 +14,8 @@ const warning: NonNullable<Translation["warning"]> = {
     },
     importantMessage: "Wichtige Nachricht",
     connectionLost: "Verbindungen unterbrochen. Wiederverbinden...",
+    connectionLostTitle: "Verbindungen unterbrochen",
+    connectionLostSubtitle: "Wiederverbinden",
 };
 
 export default warning;
diff --git a/front/src/i18n/en-US/warning.ts b/front/src/i18n/en-US/warning.ts
index 7bf83c87..ee235c4f 100644
--- a/front/src/i18n/en-US/warning.ts
+++ b/front/src/i18n/en-US/warning.ts
@@ -13,6 +13,8 @@ const warning: BaseTranslation = {
     },
     importantMessage: "Important message",
     connectionLost: "Connection lost. Reconnecting...",
+    connectionLostTitle: "Connection lost",
+    connectionLostSubtitle: "Reconnecting",
 };
 
 export default warning;
diff --git a/front/src/i18n/fr-FR/menu.ts b/front/src/i18n/fr-FR/menu.ts
index 6eae52d2..9e368d37 100644
--- a/front/src/i18n/fr-FR/menu.ts
+++ b/front/src/i18n/fr-FR/menu.ts
@@ -121,7 +121,7 @@ const menu: NonNullable<Translation["menu"]> = {
         },
     },
     sub: {
-        profile: "Profile",
+        profile: "Profil",
         settings: "Paramètres",
         invite: "Inviter",
         credit: "Crédits",
diff --git a/front/src/i18n/fr-FR/warning.ts b/front/src/i18n/fr-FR/warning.ts
index 11a8ab99..f063b4ed 100644
--- a/front/src/i18n/fr-FR/warning.ts
+++ b/front/src/i18n/fr-FR/warning.ts
@@ -13,6 +13,8 @@ const warning: NonNullable<Translation["warning"]> = {
     },
     importantMessage: "Message important",
     connectionLost: "Connexion perdue. Reconnexion...",
+    connectionLostTitle: "Connexion perdue",
+    connectionLostSubtitle: "Reconnexion",
 };
 
 export default warning;
diff --git a/front/src/i18n/zh-CN/warning.ts b/front/src/i18n/zh-CN/warning.ts
index 628fa671..8f092916 100644
--- a/front/src/i18n/zh-CN/warning.ts
+++ b/front/src/i18n/zh-CN/warning.ts
@@ -13,6 +13,8 @@ const warning: NonNullable<Translation["warning"]> = {
     },
     importantMessage: "重要消息",
     connectionLost: "连接丢失。重新连接中...",
+    connectionLostTitle: "连接丢失。",
+    connectionLostSubtitle: "重新连接中",
 };
 
 export default warning;