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

Add error for mobile devices.

Browse source
This commit is contained in:
Oliver-Akins 2020-12-18 18:11:19 -07:00
parent 351318ece4
commit 56c44133d5
1 changed files with 26 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/App.vue
View file

@ -1,9 +1,22 @@
<template>
<div id="app" class="maximize">
<CreateJoin v-if="gameState == `login`" />
<GameLobby v-else-if="gameState == `lobby`" />
<InGame v-else-if="gameState == `in-game`" />
<Attributions />
<div v-if="!isMobile" class="maximize">
<CreateJoin v-if="gameState == `login`" />
<GameLobby v-else-if="gameState == `lobby`" />
<InGame v-else-if="gameState == `in-game`" />
<Attributions />
</div>
<div
v-else
class="error"
>
<h1 class="centre">Ghost Writer Online</h1>
<p class="centre">
To use this site you must be using a laptop, desktop, or iPad.
If you are on one of those devices and you still see this message,
</p>
</div>
</div>
</template>
@ -25,6 +38,9 @@ export default {
gameState() {
return this.$store.state.view;
},
isMobile () {
return navigator == null || navigator.userAgent.match(/iPhone|iPod|Android/) != null;
},
},
methods: {},
}
@ -44,4 +60,10 @@ html, body {
padding: 0;
margin: 0;
}
.error {
border: solid 2px red;
margin: 50% auto;
width: 90%;
}
</style>