From 62932b94e7b8da782c46a93bd2a4e4323ea863df Mon Sep 17 00:00:00 2001
From: Soenke <soenke@soenke-wilken.de>
Date: Sun, 14 Sep 2025 04:31:39 +0200
Subject: [PATCH] fix: rout when creating game

---
 .../src/pages/game/createLocalGamePage.vue    | 165 +++++++++++++++++-
 .../src/pages/game/gameModeSelectPage.vue     |   9 +
 2 files changed, 172 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/game/createLocalGamePage.vue b/frontend/src/pages/game/createLocalGamePage.vue
index a17c1f9..5496d7e 100644
--- a/frontend/src/pages/game/createLocalGamePage.vue
+++ b/frontend/src/pages/game/createLocalGamePage.vue
@@ -1,7 +1,168 @@
 <template>
-    CreateLocalGame
+    <div class="q-pa-md flex flex-center">
+        <q-card
+            class="q-pa-lg shadow-3"
+            style="width: 400px; max-width: 90vw; border-radius: 16px;"
+        >   
+            <q-card-section>
+                <div class="text-h6 q-mt-md">Local Game</div>
+
+                <div class="text-subtitle2 text-black">
+                    Game ID: {{ gameID }}
+                </div>
+            </q-card-section>
+
+            <q-separator />
+
+            <q-card-section>
+                <div class="text-h6 q-mt-md">Players:</div>
+                
+                <li v-for="plr in gamePlayers" :key="plr.username">
+                    <div class="text-subtitle2 text-black">{{ plr.username }}</div>
+                </li>
+            </q-card-section>
+
+            <q-separator />
+
+            <q-card-actions align="center">
+              <q-btn
+                    v-if="gameCreator === user.id"
+                    label="Start Game!"
+                    color="primary"
+                    @click="startGame"
+                    rounded
+                    unelevated
+                    size="lg"
+                    class="full-width"
+              />
+            </q-card-actions>
+        </q-card>
+    </div>
 </template>
 
 <script setup>
-//
+import { ref, onMounted, onUnmounted  } from "vue";
+import { useQuasar, LocalStorage } from "quasar";
+import { api } from 'src/boot/axios';
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const $q = useQuasar();
+const gameID = ref();
+const gameCreator = ref(null);
+const gamePlayers = ref([]);
+const user = ref({ username:"", id:0 });
+var canUpdate = false
+
+const storedUser = LocalStorage.getItem("user")
+if (storedUser) {
+    console.log(storedUser)
+    user.value = storedUser
+} else {
+    router.push("/user/username")
+}
+
+const storedgameID = LocalStorage.getItem("gameID")
+if (storedgameID) {
+    console.log(storedgameID)
+    gameID.value = storedgameID
+
+    api.get(`/api/games/${gameID.value}`)
+
+    .then(function (response) {
+        console.log(response);
+
+        gameCreator.value = response.data.creator
+
+        canUpdate = true
+    })
+
+    .catch(function (error) {
+        console.log(error);
+
+        $q.notify({
+            type: "negative",
+            message: error.response.data.error,
+        });
+    });
+
+} else {
+    router.push("/")
+}
+
+async function update() {
+    if (!canUpdate) {return}
+
+    api.get(`/api/games/${gameID.value}/players`)
+
+    .then(function (response) {
+        gamePlayers.value = response.data
+    })
+    
+    .catch(function (error) {
+        console.log(error);
+
+        $q.notify({
+            type: "negative",
+            message: error.response.data.error,
+        });
+    });
+
+    api.get(`/api/games/${gameID.value}`)
+
+    .then(function (response) {
+        if (!response.data.is_open) {
+            router.push("/game")
+        }
+    })
+    
+    .catch(function (error) {
+        console.log(error);
+
+        $q.notify({
+            type: "negative",
+            message: error.response.data.error,
+        });
+    });
+}
+
+async function startGame() {
+
+    api.patch(`/api/games/${gameID.value}/lock`, {
+        user: user.value.id
+    })
+    
+    .then(function (response) {
+        console.log(response);
+
+        $q.notify({
+            type: "positive",
+            message: "Success!",
+        });
+
+        router.push("/game")
+    })
+    
+    .catch(function (error) {
+        console.log(error);
+
+        $q.notify({
+            type: "negative",
+            message: error.response.data.error,
+        });
+    });
+}
+
+let intervalId = null
+
+onMounted(() => {
+    update()
+
+    intervalId = setInterval(update, 1000)
+})
+
+onUnmounted(() => {
+    clearInterval(intervalId)
+})
+
 </script>
diff --git a/frontend/src/pages/game/gameModeSelectPage.vue b/frontend/src/pages/game/gameModeSelectPage.vue
index 0bcc2c6..e997f4f 100644
--- a/frontend/src/pages/game/gameModeSelectPage.vue
+++ b/frontend/src/pages/game/gameModeSelectPage.vue
@@ -73,6 +73,15 @@ async function CreateGame(is_local) {
 
   .then(function (response) {
     console.log(response)
+
+    LocalStorage.setItem("gameID", response.data.game.id)
+
+    if (is_local) {
+      router.push("/game/local/create")
+    } else {
+      router.push("/game/online/create")
+    }
+
     $q.notify({
       type: "positive",
       message: `Success!`,