Add custom image from errors thrown by the API

This commit is contained in:
CEC
2022-04-19 10:50:01 +02:00
parent ec2b23f32f
commit 5d360c8770
4 changed files with 18 additions and 37 deletions
+13 -4
View File
@@ -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";