Change lost connection page to the new one (#2161)

* Change lost connection page to the new one

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 details = errorScreen?.details ?? "";
-    let timeVar = errorScreen.timeToRetry ?? 0;
+    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 }}>
+{#if $errorScreenStore}
-    <div style="width: 90%;">
+    <main class="errorScreen" transition:fly={{ y: -200, duration: 500 }}>
-        <img src={logo} alt="WorkAdventure" class="logo" />
+        <div style="width: 90%;">
-        <div><img src={$errorScreenStore.image} alt="" class="icon" /></div>
+            <img src={logo} alt="WorkAdventure" class="logo" />
-        {#if $errorScreenStore.type !== "retry"}<h2>{$errorScreenStore.title}</h2>{/if}
+            <div><img src={errorLogo} alt="Error logo" class="icon" /></div>
-        <p>{$errorScreenStore.subtitle}</p>
+            {#if $errorScreenStore.type !== "retry"}<h2>{$errorScreenStore.title}</h2>{/if}
-        {#if $errorScreenStore.type !== "retry"}<p class="code">Code : {$errorScreenStore.code}</p>{/if}
+            {#if $errorScreenStore.subtitle}<p>{$errorScreenStore.subtitle}</p>{/if}
-        <p class="details">
+            {#if $errorScreenStore.type !== "retry"}<p class="code">Code : {$errorScreenStore.code}</p>{/if}
-            {detailsStylized}{#if $errorScreenStore.type === "retry"}<div class="loading" />{/if}
+            <p class="details">
-        </p>
+                {detailsStylized}
-        {#if ($errorScreenStore.type === "retry" && $errorScreenStore.canRetryManual) || $errorScreenStore.type === "unauthorized"}
+                {#if $errorScreenStore.type === "retry" || $errorScreenStore.type === "reconnecting"}
-            <button type="button" class="nes-btn is-primary button" on:click={click}>
+                    <div class="loading" />
-                {#if $errorScreenStore.type === "retry"}<img src={reload} alt="" class="reload" />{/if}
+                {/if}
-                {$errorScreenStore.buttonTitle}
+            </p>
-            </button>
+            {#if ($errorScreenStore.type === "retry" && $errorScreenStore.canRetryManual) || $errorScreenStore.type === "unauthorized"}
-        {/if}
+                <button type="button" class="nes-btn is-primary button" on:click={click}>
-    </div>
+                    {#if $errorScreenStore.type === "retry"}<img src={reload} alt="" class="reload" />{/if}
-</main>
+                    {$errorScreenStore.buttonTitle}
+                </button>
+            {/if}
+        </div>
+    </main>
+{/if}
 
 <style lang="scss">
     main.errorScreen {

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

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);
+        },
     };
 }
 

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;

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;

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",

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;

front/src/i18n/zh-CN/warning.ts

@@ -13,6 +13,8 @@ const warning: NonNullable<Translation["warning"]> = {
     },
     importantMessage: "重要消息",
     connectionLost: "连接丢失。重新连接中...",
+    connectionLostTitle: "连接丢失。",
+    connectionLostSubtitle: "重新连接中",
 };
 
 export default warning;