Fix prettier for the front
This commit is contained in:
CEC
parent
074f43d16c
commit
d972b3a2e6
@ -16,7 +16,6 @@
|
||||
import ErrorDialog from "./UI/ErrorDialog.svelte";
|
||||
import ErrorScreen from "./UI/ErrorScreen.svelte";
|
||||
|
||||
|
||||
export let game: Game;
|
||||
</script>
|
||||
|
||||
|
||||
@ -7,152 +7,151 @@
|
||||
import cup from "../images/cup.png";
|
||||
import reload from "../images/reload.png";
|
||||
import external from "../images/external-link.png";
|
||||
import {get} from "svelte/store";
|
||||
import { get } from "svelte/store";
|
||||
|
||||
let errorScreen = get(errorScreenStore);
|
||||
|
||||
function click(){
|
||||
if(errorScreen.urlToRedirect) window.location.replace(errorScreen.urlToRedirect);
|
||||
else if(errorScreen.type === 'redirect' && window.history.length > 2) history.back();
|
||||
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') {
|
||||
if (errorScreen.type === "retry") {
|
||||
setInterval(() => {
|
||||
if (timeVar <= 1000) click();
|
||||
timeVar -= 1000;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
$: detailsStylized = details.replace("{time}", `${timeVar/1000}`);
|
||||
|
||||
$: 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.type === 'retry'?cup:error} alt="" class="icon"/></div>
|
||||
{#if $errorScreenStore.type !== 'retry'}<h2>{$errorScreenStore.title}</h2>{/if}
|
||||
<img src={logo} alt="WorkAdventure" class="logo" />
|
||||
<div><img src={$errorScreenStore.type === "retry" ? cup : error} 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"></div>{/if}</p>
|
||||
{#if ($errorScreenStore.type === 'retry' && $errorScreenStore.canRetryManual) || ($errorScreenStore.type === 'redirect' && (window.history.length > 2 || $errorScreenStore.urlToRedirect))}
|
||||
{#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 === "redirect" && (window.history.length > 2 || $errorScreenStore.urlToRedirect))}
|
||||
<div class="button" on:click={click}>
|
||||
<img src={$errorScreenStore.type === 'retry'?reload:external} alt="" class="reload"/>
|
||||
<img src={$errorScreenStore.type === "retry" ? reload : external} alt="" class="reload" />
|
||||
{$errorScreenStore.buttonTitle}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main.errorScreen {
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-width: 300px;
|
||||
z-index: 700;
|
||||
overflow-y: scroll;
|
||||
padding: 20px 0;
|
||||
.logo{
|
||||
width: 50%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.icon{
|
||||
height: 125px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
h2 {
|
||||
font-family: "Press Start 2P";
|
||||
padding: 5px;
|
||||
font-size: 30px;
|
||||
}
|
||||
p {
|
||||
font-family: "Press Start 2P";
|
||||
}
|
||||
p.code{
|
||||
font-size: 12px;
|
||||
opacity: .6;
|
||||
user-select: text;
|
||||
}
|
||||
p.details{
|
||||
font-size: 12px;
|
||||
max-width: 80%;
|
||||
margin: 0 auto 35px auto;
|
||||
}
|
||||
.loading{
|
||||
display: inline-block;
|
||||
min-width: 20px;
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.loading:after {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
-webkit-animation: ellipsis steps(4,end) 900ms infinite;
|
||||
animation: ellipsis steps(4,end) 900ms infinite;
|
||||
content: "\2026";
|
||||
width: 0;
|
||||
font-family: "Press Start 2P";
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -19px;
|
||||
}
|
||||
main.errorScreen {
|
||||
pointer-events: auto;
|
||||
width: 100%;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-width: 300px;
|
||||
z-index: 700;
|
||||
overflow-y: scroll;
|
||||
padding: 20px 0;
|
||||
.logo {
|
||||
width: 50%;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.icon {
|
||||
height: 125px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
h2 {
|
||||
font-family: "Press Start 2P";
|
||||
padding: 5px;
|
||||
font-size: 30px;
|
||||
}
|
||||
p {
|
||||
font-family: "Press Start 2P";
|
||||
}
|
||||
p.code {
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
user-select: text;
|
||||
}
|
||||
p.details {
|
||||
font-size: 12px;
|
||||
max-width: 80%;
|
||||
margin: 0 auto 35px auto;
|
||||
}
|
||||
.loading {
|
||||
display: inline-block;
|
||||
min-width: 20px;
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.loading:after {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
-webkit-animation: ellipsis steps(4, end) 900ms infinite;
|
||||
animation: ellipsis steps(4, end) 900ms infinite;
|
||||
content: "\2026";
|
||||
width: 0;
|
||||
font-family: "Press Start 2P";
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -19px;
|
||||
}
|
||||
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
@keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes ellipsis {
|
||||
to {
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
cursor: pointer;
|
||||
background-image: url('../images/button-large.png');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 2px;
|
||||
font-family: "Press Start 2P";
|
||||
font-size: 14px;
|
||||
.reload{
|
||||
margin-top: -4px;
|
||||
width: 22px;
|
||||
}
|
||||
.button {
|
||||
cursor: pointer;
|
||||
background-image: url("../images/button-large.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 2px;
|
||||
font-family: "Press Start 2P";
|
||||
font-size: 14px;
|
||||
.reload {
|
||||
margin-top: -4px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
.button:hover {
|
||||
margin-bottom: 0;
|
||||
margin-top: -5px;
|
||||
padding: 18px 22px;
|
||||
font-size: 16px;
|
||||
.reload {
|
||||
margin-top: -5px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button:hover{
|
||||
margin-bottom: 0;
|
||||
margin-top: -5px;
|
||||
padding: 18px 22px;
|
||||
font-size: 16px;
|
||||
.reload{
|
||||
margin-top: -5px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -47,8 +47,8 @@ import { Subject } from "rxjs";
|
||||
import { selectCharacterSceneVisibleStore } from "../Stores/SelectCharacterStore";
|
||||
import { gameManager } from "../Phaser/Game/GameManager";
|
||||
import { SelectCharacterScene, SelectCharacterSceneName } from "../Phaser/Login/SelectCharacterScene";
|
||||
import {errorScreenStore} from "../Stores/ErrorScreenStore";
|
||||
import {WAError} from "../Phaser/Reconnecting/WAError";
|
||||
import { errorScreenStore } from "../Stores/ErrorScreenStore";
|
||||
import { WAError } from "../Phaser/Reconnecting/WAError";
|
||||
|
||||
const manualPingDelay = 20000;
|
||||
|
||||
@ -483,7 +483,7 @@ export class RoomConnection implements RoomConnection {
|
||||
}
|
||||
case "errorV2Message": {
|
||||
this._errorV2MessageStream.next(message.errorV2Message);
|
||||
if(message.errorV2Message.code !== 'retry') this.closed = true;
|
||||
if (message.errorV2Message.code !== "retry") this.closed = true;
|
||||
console.error("An error occurred server side: " + message.errorV2Message.code);
|
||||
errorScreenStore.setError(message.errorV2Message as unknown as WAError);
|
||||
break;
|
||||
|
||||
@ -5,7 +5,7 @@ import { WAError } from "../Reconnecting/WAError";
|
||||
import { waScaleManager } from "../Services/WaScaleManager";
|
||||
import { ReconnectingTextures } from "../Reconnecting/ReconnectingScene";
|
||||
import { localeDetector } from "../../i18n/locales";
|
||||
import {errorScreenStore} from "../../Stores/ErrorScreenStore";
|
||||
import { errorScreenStore } from "../../Stores/ErrorScreenStore";
|
||||
|
||||
export const EntrySceneName = "EntryScene";
|
||||
|
||||
@ -47,17 +47,19 @@ export class EntryScene extends Scene {
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.response.data?.code) {
|
||||
errorScreenStore.setError(new WAError(
|
||||
err.response.data.type,
|
||||
err.response.data.code,
|
||||
err.response.data.title,
|
||||
err.response.data.subtitle,
|
||||
err.response.data.details,
|
||||
err.response.data.timeToRetry,
|
||||
err.response.data.canRetryManual,
|
||||
err.response.data.urlToRedirect,
|
||||
err.response.data.buttonTitle
|
||||
));
|
||||
errorScreenStore.setError(
|
||||
new WAError(
|
||||
err.response.data.type,
|
||||
err.response.data.code,
|
||||
err.response.data.title,
|
||||
err.response.data.subtitle,
|
||||
err.response.data.details,
|
||||
err.response.data.timeToRetry,
|
||||
err.response.data.canRetryManual,
|
||||
err.response.data.urlToRedirect,
|
||||
err.response.data.buttonTitle
|
||||
)
|
||||
);
|
||||
} else {
|
||||
ErrorScene.showError(err, this.scene);
|
||||
}
|
||||
|
||||
@ -4,12 +4,22 @@ export class WAError extends Error {
|
||||
private _title: string;
|
||||
private _subtitle: string;
|
||||
private _details: string;
|
||||
private _timeToRetry:number;
|
||||
private _timeToRetry: number;
|
||||
private _canRetryManual: boolean;
|
||||
private _urlToRedirect: string;
|
||||
private _buttonTitle: string;
|
||||
|
||||
constructor(type: string, code: string, title: string, subtitle: string, details: string, timeToRetry: number, canRetryManual: boolean, urlToRedirect: string, buttonTitle: string) {
|
||||
constructor(
|
||||
type: string,
|
||||
code: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
details: string,
|
||||
timeToRetry: number,
|
||||
canRetryManual: boolean,
|
||||
urlToRedirect: string,
|
||||
buttonTitle: string
|
||||
) {
|
||||
super(title + " - " + subtitle + " - " + details);
|
||||
|
||||
this._type = type;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import {writable} from "svelte/store";
|
||||
import {WAError} from "../Phaser/Reconnecting/WAError";
|
||||
import { writable } from "svelte/store";
|
||||
import { WAError } from "../Phaser/Reconnecting/WAError";
|
||||
|
||||
/**
|
||||
* A store that contains one error of type WAError to be displayed.
|
||||
@ -9,9 +9,7 @@ function createErrorScreenStore() {
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
setError: (
|
||||
e: WAError
|
||||
): void => set(e),
|
||||
setError: (e: WAError): void => set(e),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user