_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix prettier for the front

Browse Source
This commit is contained in:
CEC 2022-04-12 11:22:58 +02:00
parent 074f43d16c
commit d972b3a2e6
6 changed files with 149 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/Components/App.svelte
View File

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

235
front/src/Components/UI/ErrorScreen.svelte
View File

@ -7,152 +7,151 @@
import cup from "../images/cup.png"; import cup from "../images/cup.png";
import reload from "../images/reload.png"; import reload from "../images/reload.png";
import external from "../images/external-link.png"; import external from "../images/external-link.png";
import {get} from "svelte/store"; import { get } from "svelte/store";
let errorScreen = get(errorScreenStore); let errorScreen = get(errorScreenStore);
function click(){ function click() {
if(errorScreen.urlToRedirect) window.location.replace(errorScreen.urlToRedirect); if (errorScreen.urlToRedirect) window.location.replace(errorScreen.urlToRedirect);
else if(errorScreen.type === 'redirect' && window.history.length > 2) history.back(); else if (errorScreen.type === "redirect" && window.history.length > 2) history.back();
else window.location.reload(); else window.location.reload();
} }
let details = errorScreen.details; let details = errorScreen.details;
let timeVar = errorScreen.timeToRetry ?? 0; let timeVar = errorScreen.timeToRetry ?? 0;
if(errorScreen.type === 'retry') { if (errorScreen.type === "retry") {
setInterval(() => { setInterval(() => {
if (timeVar <= 1000) click(); if (timeVar <= 1000) click();
timeVar -= 1000; timeVar -= 1000;
}, 1000); }, 1000);
} }
$: detailsStylized = details.replace("{time}", `${timeVar/1000}`); $: detailsStylized = details.replace("{time}", `${timeVar / 1000}`);
</script> </script>
<main class="errorScreen" transition:fly={{ y: -200, duration: 500 }}> <main class="errorScreen" transition:fly={{ y: -200, duration: 500 }}>
<div style="width: 90%;"> <div style="width: 90%;">
<img src={logo} alt="WorkAdventure" class="logo"/> <img src={logo} alt="WorkAdventure" class="logo" />
<div><img src={$errorScreenStore.type === 'retry'?cup:error} alt="" class="icon"/></div> <div><img src={$errorScreenStore.type === "retry" ? cup : error} alt="" class="icon" /></div>
{#if $errorScreenStore.type !== 'retry'}<h2>{$errorScreenStore.title}</h2>{/if} {#if $errorScreenStore.type !== "retry"}<h2>{$errorScreenStore.title}</h2>{/if}
<p>{$errorScreenStore.subtitle}</p> <p>{$errorScreenStore.subtitle}</p>
{#if $errorScreenStore.type !== 'retry'}<p class="code">Code : {$errorScreenStore.code}</p>{/if} {#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> <p class="details">
{#if ($errorScreenStore.type === 'retry' && $errorScreenStore.canRetryManual) || ($errorScreenStore.type === 'redirect' && (window.history.length > 2 || $errorScreenStore.urlToRedirect))} {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}> <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} {$errorScreenStore.buttonTitle}
</div> </div>
{/if} {/if}
</div> </div>
</main> </main>
<style lang="scss"> <style lang="scss">
main.errorScreen { main.errorScreen {
pointer-events: auto; pointer-events: auto;
width: 100%; width: 100%;
background-color: #000000; background-color: #000000;
color: #FFFFFF; color: #ffffff;
text-align: center; text-align: center;
position: absolute; position: absolute;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
min-width: 300px; min-width: 300px;
z-index: 700; z-index: 700;
overflow-y: scroll; overflow-y: scroll;
padding: 20px 0; padding: 20px 0;
.logo{ .logo {
width: 50%; width: 50%;
margin-bottom: 50px; margin-bottom: 50px;
} }
.icon{ .icon {
height: 125px; height: 125px;
margin-bottom: 25px; margin-bottom: 25px;
} }
h2 { h2 {
font-family: "Press Start 2P"; font-family: "Press Start 2P";
padding: 5px; padding: 5px;
font-size: 30px; font-size: 30px;
} }
p { p {
font-family: "Press Start 2P"; font-family: "Press Start 2P";
} }
p.code{ p.code {
font-size: 12px; font-size: 12px;
opacity: .6; opacity: 0.6;
user-select: text; user-select: text;
} }
p.details{ p.details {
font-size: 12px; font-size: 12px;
max-width: 80%; max-width: 80%;
margin: 0 auto 35px auto; margin: 0 auto 35px auto;
} }
.loading{ .loading {
display: inline-block; display: inline-block;
min-width: 20px; min-width: 20px;
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
} }
.loading:after { .loading:after {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
-webkit-animation: ellipsis steps(4,end) 900ms infinite; -webkit-animation: ellipsis steps(4, end) 900ms infinite;
animation: ellipsis steps(4,end) 900ms infinite; animation: ellipsis steps(4, end) 900ms infinite;
content: "\2026"; content: "\2026";
width: 0; width: 0;
font-family: "Press Start 2P"; font-family: "Press Start 2P";
font-size: 16px; font-size: 16px;
position: absolute; position: absolute;
left: 0; left: 0;
top: -19px; top: -19px;
} }
@keyframes ellipsis { @keyframes ellipsis {
to { to {
width: 1.25em; width: 1.25em;
} }
} }
@-webkit-keyframes ellipsis { @-webkit-keyframes ellipsis {
to { to {
width: 1.25em; width: 1.25em;
} }
} }
.button{ .button {
cursor: pointer; cursor: pointer;
background-image: url('../images/button-large.png'); background-image: url("../images/button-large.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
padding: 16px 20px; padding: 16px 20px;
margin-bottom: 2px; margin-bottom: 2px;
font-family: "Press Start 2P"; font-family: "Press Start 2P";
font-size: 14px; font-size: 14px;
.reload{ .reload {
margin-top: -4px; margin-top: -4px;
width: 22px; 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> </style>

6
front/src/Connexion/RoomConnection.ts
View File

@ -47,8 +47,8 @@ import { Subject } from "rxjs";
import { selectCharacterSceneVisibleStore } from "../Stores/SelectCharacterStore"; import { selectCharacterSceneVisibleStore } from "../Stores/SelectCharacterStore";
import { gameManager } from "../Phaser/Game/GameManager"; import { gameManager } from "../Phaser/Game/GameManager";
import { SelectCharacterScene, SelectCharacterSceneName } from "../Phaser/Login/SelectCharacterScene"; import { SelectCharacterScene, SelectCharacterSceneName } from "../Phaser/Login/SelectCharacterScene";
import {errorScreenStore} from "../Stores/ErrorScreenStore"; import { errorScreenStore } from "../Stores/ErrorScreenStore";
import {WAError} from "../Phaser/Reconnecting/WAError"; import { WAError } from "../Phaser/Reconnecting/WAError";
const manualPingDelay = 20000; const manualPingDelay = 20000;
@ -483,7 +483,7 @@ export class RoomConnection implements RoomConnection {
} }
case "errorV2Message": { case "errorV2Message": {
this._errorV2MessageStream.next(message.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); console.error("An error occurred server side: " + message.errorV2Message.code);
errorScreenStore.setError(message.errorV2Message as unknown as WAError); errorScreenStore.setError(message.errorV2Message as unknown as WAError);
break; break;

26
front/src/Phaser/Login/EntryScene.ts
View File

@ -5,7 +5,7 @@ import { WAError } from "../Reconnecting/WAError";
import { waScaleManager } from "../Services/WaScaleManager"; import { waScaleManager } from "../Services/WaScaleManager";
import { ReconnectingTextures } from "../Reconnecting/ReconnectingScene"; import { ReconnectingTextures } from "../Reconnecting/ReconnectingScene";
import { localeDetector } from "../../i18n/locales"; import { localeDetector } from "../../i18n/locales";
import {errorScreenStore} from "../../Stores/ErrorScreenStore"; import { errorScreenStore } from "../../Stores/ErrorScreenStore";
export const EntrySceneName = "EntryScene"; export const EntrySceneName = "EntryScene";
@ -47,17 +47,19 @@ export class EntryScene extends Scene {
}) })
.catch((err) => { .catch((err) => {
if (err.response.data?.code) { if (err.response.data?.code) {
errorScreenStore.setError(new WAError( errorScreenStore.setError(
err.response.data.type, new WAError(
err.response.data.code, err.response.data.type,
err.response.data.title, err.response.data.code,
err.response.data.subtitle, err.response.data.title,
err.response.data.details, err.response.data.subtitle,
err.response.data.timeToRetry, err.response.data.details,
err.response.data.canRetryManual, err.response.data.timeToRetry,
err.response.data.urlToRedirect, err.response.data.canRetryManual,
err.response.data.buttonTitle err.response.data.urlToRedirect,
)); err.response.data.buttonTitle
)
);
} else { } else {
ErrorScene.showError(err, this.scene); ErrorScene.showError(err, this.scene);
} }

14
front/src/Phaser/Reconnecting/WAError.ts
View File

@ -4,12 +4,22 @@ export class WAError extends Error {
private _title: string; private _title: string;
private _subtitle: string; private _subtitle: string;
private _details: string; private _details: string;
private _timeToRetry:number; private _timeToRetry: number;
private _canRetryManual: boolean; private _canRetryManual: boolean;
private _urlToRedirect: string; private _urlToRedirect: string;
private _buttonTitle: 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); super(title + " - " + subtitle + " - " + details);
this._type = type; this._type = type;

8
front/src/Stores/ErrorScreenStore.ts
View File

@ -1,5 +1,5 @@
import {writable} from "svelte/store"; import { writable } from "svelte/store";
import {WAError} from "../Phaser/Reconnecting/WAError"; import { WAError } from "../Phaser/Reconnecting/WAError";
/** /**
* A store that contains one error of type WAError to be displayed. * A store that contains one error of type WAError to be displayed.
@ -9,9 +9,7 @@ function createErrorScreenStore() {
return { return {
subscribe, subscribe,
setError: ( setError: (e: WAError): void => set(e),
e: WAError
): void => set(e),
}; };
} }