From 8bede05e07c2eb10df82bb9c1b7b36e5d7cb8f8c Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 2 Jan 2021 00:34:47 -0700
Subject: [PATCH] Add support leaving/deleting game

---
 web/src/App.vue         | 13 +++++++++----
 web/src/views/Lobby.vue | 31 ++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 7ab8af6..4aa0092 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -95,10 +95,16 @@ export default {
 				this.handleError(data);
 			} else {
 				this.alert = {
-					message: `The game has been ended.`,
-					type: `info`
-				}
+					message: `The game has been ended by the host.`,
+					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;
 }
 
diff --git a/web/src/views/Lobby.vue b/web/src/views/Lobby.vue
index bb1a405..9283c5f 100644
--- a/web/src/views/Lobby.vue
+++ b/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>