Feat : add game deletion

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>