Add custom image from errors thrown by the API

front/src/Components/UI/ErrorScreen.svelte

@@ -2,6 +2,8 @@
     import { fly } from "svelte/transition";
     import { errorScreenStore } from "../../Stores/ErrorScreenStore";
     import { gameManager } from "../../Phaser/Game/GameManager";
+    import { get } from "svelte/store";
+    import {onDestroy} from "svelte";
 
     import logoImg from "../images/logo-min-white.png";
     let logo = gameManager?.currentStartedRoom?.loginSceneLogo ?? logoImg;
@@ -9,22 +11,25 @@
     import cup from "../images/cup.png";
     import reload from "../images/reload.png";
     import external from "../images/external-link.png";
-    import { get } from "svelte/store";
 
     let errorScreen = get(errorScreenStore);
 
-    function click() {
+    const image = errorScreen.image ?? (errorScreen.type === "retry" ? cup : error);
+
+            function click() {
         if (errorScreen.urlToRedirect) window.location.replace(errorScreen.urlToRedirect);
         else if (errorScreen.type === "redirect" && window.history.length > 2) history.back();
         else window.location.reload();
     }
     let details = errorScreen.details;
     let timeVar = errorScreen.timeToRetry ?? 0;
+
     if (errorScreen.type === "retry") {
-        setInterval(() => {
+        let interval = setInterval(() => {
             if (timeVar <= 1000) click();
             timeVar -= 1000;
         }, 1000);
+        onDestroy(() => clearInterval(interval));
     }
 
     $: detailsStylized = details.replace("{time}", `${timeVar / 1000}`);
@@ -33,7 +38,7 @@
 <main class="errorScreen" transition:fly={{ y: -200, duration: 500 }}>
     <div style="width: 90%;">
         <img src={logo} alt="WorkAdventure" class="logo" />
-        <div><img src={$errorScreenStore.type === "retry" ? cup : error} alt="" class="icon" /></div>
+        <div><img src={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}
@@ -74,10 +79,14 @@
         .logo {
             width: 50%;
             margin-bottom: 50px;
+            max-height: 10vh;
+            max-width: 50vw;
         }
         .icon {
             height: 125px;
             margin-bottom: 25px;
+            max-height: 10vh;
+            max-width: 50vw;
         }
         h2 {
             font-family: "Press Start 2P";

messages/protos/messages.proto

@@ -234,6 +234,7 @@ message ErrorScreenMessage {
   bool canRetryManual = 7;
   string urlToRedirect = 8;
   string buttonTitle = 9;
+  string image = 10;
 }
 
 message ItemStateMessage {

pusher/src/Controller/IoSocketController.ts

@@ -22,6 +22,7 @@ import {
     FollowAbortMessage,
     VariableMessage,
     LockGroupPromptMessage,
+    ErrorScreenMessage
 } from "../Messages/generated/messages_pb";
 import { UserMovesMessage } from "../Messages/generated/messages_pb";
 import { parse } from "query-string";
@@ -486,18 +487,7 @@ export class IoSocketController {
                     } else if (ws.reason === "textureInvalid") {
                         socketManager.emitInvalidTextureMessage(ws);
                     } else if (ws.reason === "error") {
-                        socketManager.emitErrorScreenMessage(
-                            ws,
-                            ws.error.type,
-                            ws.error.code,
-                            ws.error.title,
-                            ws.error.subtitle,
-                            ws.error.details,
-                            ws.error.timeToRetry,
-                            ws.error.canRetryManual,
-                            ws.error.urlToRedirect,
-                            ws.error.buttonTitle
-                        );
+                        socketManager.emitErrorScreenMessage(ws, ws.error as ErrorScreenMessage);
                     } else {
                         socketManager.emitConnexionErrorMessage(ws, ws.message);
                     }

pusher/src/Services/SocketManager.ts

@@ -646,29 +646,10 @@ export class SocketManager implements ZoneEventListener {
 
     public emitErrorScreenMessage(
         client: compressors.WebSocket,
-        type: string,
-        code: string,
-        title: string,
-        subtitle: string,
-        details: string,
-        timeToRetry: number,
-        canRetryManual: boolean,
-        urlToRedirect: string,
-        buttonTitle: string
+        error: ErrorScreenMessage
     ) {
-        const errorMessage = new ErrorScreenMessage();
-        errorMessage.setType(type);
-        errorMessage.setCode(code);
-        errorMessage.setTitle(title);
-        errorMessage.setSubtitle(subtitle);
-        errorMessage.setDetails(details);
-        errorMessage.setTimetoretry(timeToRetry);
-        errorMessage.setCanretrymanual(canRetryManual);
-        errorMessage.setUrltoredirect(urlToRedirect);
-        errorMessage.setButtontitle(buttonTitle);
-
         const serverToClientMessage = new ServerToClientMessage();
-        serverToClientMessage.setErrorscreenmessage(errorMessage);
+        serverToClientMessage.setErrorscreenmessage(error);
 
         //if (!client.disconnecting) {
         client.send(serverToClientMessage.serializeBinary().buffer, true);