From 983e11ff27ba4bea2335cc83a92c8ddbdf4bfbe2 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Mon, 29 Mar 2021 14:11:06 -0600
Subject: [PATCH] Add FF warning message

---
 web/src/views/CreateJoin.vue | 26 ++++++++++++++++++++++++++
 web/src/views/Lobby.vue      | 27 +++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/web/src/views/CreateJoin.vue b/web/src/views/CreateJoin.vue
index c60b667..bce6bad 100644
--- a/web/src/views/CreateJoin.vue
+++ b/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>
\ No newline at end of file
diff --git a/web/src/views/Lobby.vue b/web/src/views/Lobby.vue
index d5cc05c..78055ce 100644
--- a/web/src/views/Lobby.vue
+++ b/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>
\ No newline at end of file