From b5d89d4fe912faca686b97dc8b903d9ff7e36ece Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Tue, 27 Aug 2024 12:05:17 +0200
Subject: [PATCH] Feat : add game deletion

---
 app.vue                                   |  8 ++++++++
 components/game/modal/ConfigureDialog.vue | 24 ++++++++++++++++++++++-
 netcode/index.ts                          |  4 ++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 05db36e..0b6c7b5 100644
--- a/app.vue
+++ b/app.vue
@@ -71,6 +71,10 @@ button.yellow {
   background-color: rgba(255, 165, 0, 0.7);
 }
 
+button.red {
+  background-color: rgba(255, 0, 0, 0.7);
+}
+
 button:hover:enabled {
   background-color: #45a049;
 }
@@ -78,6 +82,10 @@ button.yellow:hover {
   background-color: rgba(255, 165, 0, 0.8);
 }
 
+button.red:hover {
+  background-color: rgba(255, 0, 0, 0.8);
+}
+
 #__nuxt {
   height: 100%;
   user-select: none;
diff --git a/components/game/modal/ConfigureDialog.vue b/components/game/modal/ConfigureDialog.vue
index 09f7c1d..7cd9ba6 100644
--- a/components/game/modal/ConfigureDialog.vue
+++ b/components/game/modal/ConfigureDialog.vue
@@ -1,14 +1,28 @@
 <script setup lang="ts">
-import { kickPlayer } from "~/netcode";
+import { deleteGame, kickPlayer } from "~/netcode";
 import type { Game } from "~/netcode/interfaces";
 
 export interface Props {
   game: Game;
 }
 
+const deletionConfirmation = ref("Delete Game");
+
 const props = defineProps<Props>();
 
 const isVisible = ref(false);
+
+watch(isVisible, () => {
+  deletionConfirmation.value = "Delete Game";
+});
+
+function deleteButtonClick() {
+  if (deletionConfirmation.value == "Delete Game") {
+    deletionConfirmation.value = "Are you sure?";
+  } else {
+    deleteGame(props.game._id);
+  }
+}
 </script>
 
 <template>
@@ -50,6 +64,14 @@ const isVisible = ref(false);
         </div>
       </template>
     </template>
+    <div class="dialog-header">
+      <h3>Danger Zone</h3>
+    </div>
+    <div class="dialog-header">
+      <button class="red" @click="deleteButtonClick">
+        {{ deletionConfirmation }}
+      </button>
+    </div>
   </div>
 </template>
 
diff --git a/netcode/index.ts b/netcode/index.ts
index aeefc14..8b6742d 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -52,6 +52,10 @@ export async function startGame(game: string) {
 
 export async function deleteGame(game: string) {
   const config = useRuntimeConfig();
+  const res = await $fetch<Game>(config.public.endpoint + `/games/${game}`, {
+    method: "DELETE",
+    credentials: "include",
+  });
 }
 
 export async function joinGame(game: string) {