Add support leaving/deleting game

web/src/App.vue

@@ -95,10 +95,16 @@ export default {
 				this.handleError(data);
 			} else {
 				this.alert = {
-					message: `The game has been ended.`,
+					message: `The game has been ended by the host.`,
-					type: `info`
+					type: `info`,
-				}
+				};
 				this.$store.commit(`resetState`);
+				setTimeout(() => {
+					this.alert = {
+						message: null,
+						type: null,
+					};
+				}, 2000)
 			};
 		},
 	},
@@ -137,7 +143,6 @@ html, body {
 }
 .alert-bar.info {
 	background-color: #7289da;
-	font-size: large;
 	color: #000000;
 }
 

web/src/views/Lobby.vue

@@ -23,6 +23,11 @@
 			/>
 		</div>
 		<div class="flex-row">
+			<button
+				@click.stop="exitGame()"
+			>
+				{{ $store.state.is_host ? `Delete` : `Leave`}} Game
+			</button>
 			<button
 				class="clickable"
 				@click.stop=""
@@ -64,7 +69,31 @@ export default {
 				status: 418,
 				message: `Failed to copy game URL`,
 			});
-		}
+		},
+		exitGame() {
+			// The user is the host, they can't leave the game, so kick
+			// everyone from the game.
+			if (this.$store.state.is_host) {
+				this.$socket.client.emit(`DeleteGame`, {
+					game_code: this.$store.state.game_code
+				});
+			}
+
+			// Just a normal user, they can leave the game just fine
+			else {
+				this.$socket.client.emit(`LeaveGame`, {
+					game_code: this.$store.state.game_code
+				});
+			};
+		},
+	},
+	sockets: {
+		GameLeft(data) {
+			if (data.status < 200 || 300 <= data.status) {
+				return this.$emit(`error`, data);
+			};
+			this.$store.commit(`resetState`);
+		},
 	},
 }
 </script>