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

22
web/src/App.vue
View file

@ -1,10 +1,23 @@
<template> <template>
<div id="app" class="maximize"> <div id="app" class="maximize">
<div v-if="!isMobile" class="maximize">
<CreateJoin v-if="gameState == `login`" /> <CreateJoin v-if="gameState == `login`" />
<GameLobby v-else-if="gameState == `lobby`" /> <GameLobby v-else-if="gameState == `lobby`" />
<InGame v-else-if="gameState == `in-game`" /> <InGame v-else-if="gameState == `in-game`" />
<Attributions /> <Attributions />
</div> </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> </template>
<script> <script>
@ -25,6 +38,9 @@ export default {
gameState() { gameState() {
return this.$store.state.view; return this.$store.state.view;
}, },
isMobile () {
return navigator == null || navigator.userAgent.match(/iPhone|iPod|Android/) != null;
},
}, },
methods: {}, methods: {},
} }
@ -44,4 +60,10 @@ html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.error {
border: solid 2px red;
margin: 50% auto;
width: 90%;
}
</style> </style>