Feat : add game deletion

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;

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>
 

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) {