From d36319e35bb83a5ebf3d93ec60b101227887ac60 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Mon, 15 Mar 2021 18:39:39 -0600
Subject: [PATCH] Add a disconnect error that appears if the client loses
 connection

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

diff --git a/web/src/App.vue b/web/src/App.vue
index 51dc946..30430ad 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,16 @@
 <template>
 	<div id="app" class="maximize">
+		<transition name="top-slide">
+			<div
+				id="disconnect-error"
+				v-if="$socket.disconnected"
+			>
+				No connection to the game server.
+				<br>
+				If you are in the middle of a game, reload the website and you
+				can reconnect to the game by using the EXACT same name.
+			</div>
+		</transition>
 		<div v-if="!isMobile" class="maximize">
 			<transition name="top-slide">
 				<div
@@ -126,6 +137,21 @@ html, body {
 	margin: 0;
 }
 
+#disconnect-error {
+	background-color: red;
+	justify-content: center;
+	font-weight: bolder;
+	text-align: center;
+	position: fixed;
+	display: flex;
+	color: black;
+	padding: 10px;
+	width: 100vw;
+	z-index: 50;
+	left: 0;
+	top: 0;
+}
+
 .alert-bar {
 	justify-content: center;
 	align-items: center;