Merge pull request #106 from Oliver-Akins/dev

v1.3.2

web/src/App.vue

@@ -45,7 +45,7 @@
 				If you are on one of those devices and you still see this message,
 				please contact "ghostwriter{at}resonym.com" with the following information:
 				<br><br>
-				{{ userAgent }}
+				{{ $store.getters.userAgent }}
 			</p>
 		</div>
 	</div>
@@ -76,14 +76,8 @@ export default {
 		gameState() {
 			return this.$store.state.view;
 		},
-		userAgent() {
-			if (navigator == null) {
-				return "Navigator Undefined";
-			};
-			return navigator.userAgent;
-		},
 		isMobile () {
-			return this.userAgent.match(/(Navigator Undefined)|iPhone|iPod|Android/) != null;
+			return this.$store.getters.userAgent.match(/(Navigator Undefined)|iPhone|iPod|Android/) != null;
 		},
 	},
 	methods: {

web/src/store/index.js

@@ -51,6 +51,15 @@ export default new Vuex.Store({
 			};
 			return ``;
 		},
+		userAgent() {
+			if (navigator == null) {
+				return "Navigator Undefined";
+			};
+			return navigator.userAgent;
+		},
+		isFirefox(state, getters) {
+			return getters.userAgent.match(/(Navigator Undefined)|Firefox/g) != null;
+		},
 	},
 	mutations: {
 		resetState(state) {

web/src/views/CreateJoin.vue

@@ -9,6 +9,23 @@
 				>
 			</a>
 		</div>
+		<div
+			v-if="$store.getters.isFirefox"
+		>
+			<div
+				id="firefox-warning"
+				class="error-message"
+			>
+				<p class="centre">
+					<strong>WARNING:</strong>
+					<br>
+					It appears as though you are using the Firefox web browser,
+					please note that Firefox is not recommended for use with
+					this site. Especially while streaming. This is to have the
+					site look as good as possible.
+				</p>
+			</div>
+		</div>
 		<button
 			class="clickable"
 			@click.stop="createGame()"
@@ -174,4 +191,13 @@ button {
 }
 button:hover { background-color: var(--background2-darken); }
 button:focus { background-color: var(--background2-lighten); }
+
+.error-message {
+	border-color: #F00;
+	border-style: solid;
+	border-radius: 5px;
+	border-width: 2px;
+	margin: 0 auto;
+	width: 70%
+}
 </style>

web/src/views/Lobby.vue

@@ -30,6 +30,24 @@
 				@error="$emit(`error`, $event)"
 			/>
 		</div>
+		<div
+			class="flex-row"
+			v-if="$store.getters.isFirefox"
+		>
+			<div
+				id="firefox-warning"
+				class="error-message"
+			>
+				<p class="centre">
+					<strong>WARNING:</strong>
+					<br>
+					It appears as though you are using the Firefox web browser,
+					please note that Firefox is not recommended for use with
+					this site. Especially while streaming. This is to have the
+					site look as good as possible.
+				</p>
+			</div>
+		</div>
 		<div class="flex-row">
 			<button
 				class="clickable"
@@ -174,4 +192,13 @@ div.new-line {
 	width: 100% !important;
 	height: 0px;
 }
+
+.error-message {
+	border-color: #F00;
+	border-style: solid;
+	border-radius: 5px;
+	border-width: 2px;
+	margin-top: 10px;
+	width: 70%
+}
 </style>