From 56c44133d5cf31a08d59280101b87d0f1ac12266 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Fri, 18 Dec 2020 18:11:19 -0700
Subject: [PATCH] Add error for mobile devices.

---
 web/src/App.vue | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index f170168..e2df581 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -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>
\ No newline at end of file