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

* Change lost connection page to the new one
2022-05-04 10:13:18 +02:00 · 2022-05-04 10:13:18 +02:00 · d47aad2ead
commit d47aad2ead
parent fb9f8adb21
9 changed files with 67 additions and 29 deletions
--- 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 {
--- a/front/src/Components/UI/images/error.png
+++ b/front/src/Components/UI/images/error.png
--- 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
--- 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);
+        },
    };
 }

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