Oliver/Phantom-Ink-Online
0
0
Fork 0
Code Issues Activity

Change alert bar to have more than only error type

Browse source
This commit is contained in:
Oliver-Akins 2021-01-01 23:38:29 -07:00
parent f79b7abb3e
commit 5cadcfa90a
1 changed files with 45 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web/src/App.vue
View file

@ -3,10 +3,11 @@
<div v-if="!isMobile" class="maximize"> <div v-if="!isMobile" class="maximize">
<transition name="top-slide"> <transition name="top-slide">
<div <div
v-if="error" v-if="alert.message"
class="error-bar" class="alert-bar"
:class="alert.type"
> >
{{ error }} {{ alert.message }}
</div> </div>
</transition> </transition>
<CreateJoin <CreateJoin
@ -25,7 +26,7 @@
</div> </div>
<div <div
v-else v-else
class="error" class="device-error"
> >
<h1 class="centre">Ghost Writer Online</h1> <h1 class="centre">Ghost Writer Online</h1>
<p class="centre"> <p class="centre">
@ -54,7 +55,10 @@ export default {
"InGame": InGame, "InGame": InGame,
}, },
data() {return { data() {return {
error: null alert: {
message: null,
type: null,
},
}}, }},
computed: { computed: {
gameState() { gameState() {
@ -72,9 +76,30 @@ export default {
}, },
methods: { methods: {
handleError(data) { handleError(data) {
this.error = `${data.status}${data.source ? ` @ ${data.source}` : ''} : ${data.message}`; this.alert = {
console.error(`${this.error}${data.extra ? ` ${data.extra}` : ''}`); message: `${data.status}${data.source ? ` @ ${data.source}` : ''} : ${data.message}`,
setTimeout(() => { this.error = null; }, 3000); type: `error`,
};
console.error(`${this.alert.message}${data.extra ? ` ${data.extra}` : ''}`);
setTimeout(() => {
this.alert = {
message: null,
type: null,
};
}, 3000);
},
},
sockets: {
GameDeleted(data) {
if (data.status < 200 || 300 <= data.status) {
this.handleError(data);
} else {
this.alert = {
message: `The game has been ended.`,
type: `info`
}
this.$store.commit(`resetState`);
};
}, },
}, },
} }
@ -95,11 +120,9 @@ html, body {
margin: 0; margin: 0;
} }
.error-bar { .alert-bar {
background-color: #bb0000;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #FFFFFF;
position: fixed; position: fixed;
display: flex; display: flex;
height: 35px; height: 35px;
@ -108,7 +131,17 @@ html, body {
top: 0; top: 0;
} }
.error { .alert-bar.error {
background-color: #bb0000;
color: #FFFFFF;
}
.alert-bar.info {
background-color: #7289da;
font-size: large;
color: #000000;
}
.device-error {
border: solid 2px red; border: solid 2px red;
margin: 50% auto; margin: 50% auto;
width: 90%; width: 90%;