Fix prettier for the front

This commit is contained in:
CEC 2022-04-12 11:22:58 +02:00
parent c3289e8a01
commit bf40bd2f3b
6 changed files with 149 additions and 141 deletions

View File

@ -16,7 +16,6 @@
import ErrorDialog from "./UI/ErrorDialog.svelte";
import ErrorScreen from "./UI/ErrorScreen.svelte";
export let game: Game;
</script>

View File

@ -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>

View File

@ -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;
@ -484,7 +484,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;

View File

@ -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);
}

View File

@ -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;

View File

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