Add alert bar

src/App.vue

@@ -1,5 +1,14 @@
 <template>
 	<div id="app">
+		<transition mode="out-in" name="top-slide">
+			<div
+				v-if="alert.message"
+				class="alert-bar"
+				:class="alert.classes"
+			>
+				<div>{{ alert.message }}</div>
+			</div>
+		</transition>
 		<WS-Test
 			v-if="state == 'ws-test'"
 		/>
@@ -54,16 +63,41 @@ export default {
 				get a "Start Game" button that allows them to, well... start
 				the game.
 		*/
-		state: `ws-test`,
+		state: `game-type`,
 		game_code: ``,
 		is_host: false,
+		alert: {
+			message: ``,
+			classes: []
+		},
 	}},
 	methods: {},
+	sockets: {
+		disconnect() {
+			this.alert = {
+				message: `Disconnected from the server. Attempting to reconnect.`,
+				classes: [`error`]
+			};
+		},
+		connect_error() {
+			this.alert = {
+				message: `Error: Failed to connect to the server.`,
+				classes: [`error`]
+			}
+		},
+		connect() {
+			this.alert = {
+				message: ``,
+				classes: []
+			}
+		}
+	}
 }
 </script>
 
 <style lang="stylus">
 @import "theme.styl"
+@import "./css/animations.css"
 
 html, body, #app {
 	font-family: $fonts
@@ -75,10 +109,26 @@ html, body, #app {
 
 #app {
 	background-color: $main-background-colour
+	color: $main-text-colour
 	height: 100vh
 	width: 100vw
 }
 
+.alert-bar {
+	justify-content: center
+	position: absolute
+	display: flex
+	width: 100vw
+	z-index: 1
+	left: 0
+	top: 0
+}
+
+.alert-bar.error {
+	background-color: $error-background-colour
+	color: $error-text-colour
+}
+
 .input {
 	background-color: $input-background
 	border-radius: $input-border-radius

src/theme.styl

@@ -12,6 +12,10 @@ $main-background-colour = #23272A
 $main-text-colour = #99AAB5
 
 
+$error-background-colour = #FF0000
+$error-text-colour = white
+
+
 /***********************************************************/
 /* Styling for inputs (not all input types use all values) */