From 3e10397802cf3d50537490b90956df67d2a3e7e0 Mon Sep 17 00:00:00 2001
From: Soenke <soenke@soenke-wilken.de>
Date: Sat, 13 Sep 2025 00:52:22 +0200
Subject: [PATCH] feat: Create games and setup pages for later

---
 frontend/src/layouts/MainLayout.vue           | 70 +++++++++++++-
 .../src/pages/game/createLocalGamePage.vue    |  7 ++
 .../src/pages/game/createOnlineGamePage.vue   |  7 ++
 .../src/pages/game/gameModeSelectPage.vue     | 92 +++++++++++++++++++
 frontend/src/pages/game/gamePage.vue          |  7 ++
 frontend/src/pages/user/userSettingsPage.vue  |  7 ++
 frontend/src/pages/user/usernamePage.vue      | 21 +++--
 frontend/src/router/routes.js                 | 14 ++-
 8 files changed, 208 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/pages/game/createLocalGamePage.vue
 create mode 100644 frontend/src/pages/game/createOnlineGamePage.vue
 create mode 100644 frontend/src/pages/game/gameModeSelectPage.vue
 create mode 100644 frontend/src/pages/game/gamePage.vue
 create mode 100644 frontend/src/pages/user/userSettingsPage.vue

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
index 95f35dd..a5cfd9f 100644
--- a/frontend/src/layouts/MainLayout.vue
+++ b/frontend/src/layouts/MainLayout.vue
@@ -19,11 +19,71 @@
           </q-item-section>
         </q-item>
 
-        <q-item clickable v-ripple to="/user/username">
-          <q-item-section>
-            Set Username
-          </q-item-section>
-        </q-item>
+        <q-expansion-item
+          label="User"
+          icon="folder"
+          dense
+          expand-separator
+          switch-toggle-side
+        >
+          <q-list padding>
+
+            <q-item clickable v-ripple to="/user/username">
+              <q-item-section>
+                Set Username
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple to="/user/settings">
+              <q-item-section>
+                User Settings
+              </q-item-section>
+            </q-item>
+
+          </q-list>
+
+        </q-expansion-item>
+
+        
+
+        <q-expansion-item
+          label="Game"
+          icon="folder"
+          dense
+          expand-separator
+          switch-toggle-side
+        >
+          <q-list padding>
+
+            <q-item clickable v-ripple to="/game/select">
+              <q-item-section>
+                Create Select Game Type
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple to="/game/local/create">
+              <q-item-section>
+                Create Local Game
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple to="/game/online/create">
+              <q-item-section>
+                Create Online Game
+              </q-item-section>
+            </q-item>
+
+            <q-item clickable v-ripple to="/game">
+              <q-item-section>
+                Game
+              </q-item-section>
+            </q-item>
+
+          </q-list>
+
+        </q-expansion-item>
+
+        
 
         <q-expansion-item
           label="Tests"
diff --git a/frontend/src/pages/game/createLocalGamePage.vue b/frontend/src/pages/game/createLocalGamePage.vue
new file mode 100644
index 0000000..a17c1f9
--- /dev/null
+++ b/frontend/src/pages/game/createLocalGamePage.vue
@@ -0,0 +1,7 @@
+<template>
+    CreateLocalGame
+</template>
+
+<script setup>
+//
+</script>
diff --git a/frontend/src/pages/game/createOnlineGamePage.vue b/frontend/src/pages/game/createOnlineGamePage.vue
new file mode 100644
index 0000000..f44d972
--- /dev/null
+++ b/frontend/src/pages/game/createOnlineGamePage.vue
@@ -0,0 +1,7 @@
+<template>
+    CreateOnlineGame
+</template>
+
+<script setup>
+//
+</script>
diff --git a/frontend/src/pages/game/gameModeSelectPage.vue b/frontend/src/pages/game/gameModeSelectPage.vue
new file mode 100644
index 0000000..0bcc2c6
--- /dev/null
+++ b/frontend/src/pages/game/gameModeSelectPage.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="q-pa-lg flex flex-center" style="gap: 24px;">
+    <q-card
+      class="q-pa-lg shadow-3"
+      style="width: 400px; max-width: 90vw; border-radius: 16px;"
+    >
+      <q-card-section class="text-center">
+        <q-icon name="home" size="48px" color="primary" />
+        <div class="text-h6 q-mt-md">Local</div>
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          label="Go!"
+          color="primary"
+          @click="CreateGame(true)"
+          rounded
+          unelevated
+          size="lg"
+          class="full-width"
+        />
+      </q-card-actions>
+    </q-card>
+
+    <q-card
+      class="q-pa-lg shadow-3"
+      style="width: 400px; max-width: 90vw; border-radius: 16px;"
+    >
+      <q-card-section class="text-center">
+        <q-icon name="public" size="48px" color="primary" />
+        <div class="text-h6 q-mt-md">Online</div>
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          label="Go!"
+          color="primary"
+          @click="CreateGame(false)"
+          rounded
+          unelevated
+          size="lg"
+          class="full-width"
+        />
+      </q-card-actions>
+    </q-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useQuasar, LocalStorage } from "quasar";
+import { api } from 'src/boot/axios';
+
+const $q = useQuasar();
+const router = useRouter()
+const user = ref({ username:"", id:0 });
+
+const storedUser = LocalStorage.getItem("user")
+if (storedUser) {
+  console.log(storedUser)
+  user.value = storedUser
+} else {
+  router.push("/user/username")
+}
+
+async function CreateGame(is_local) {
+  console.log(user.value)
+  api.post("/api/games", {
+    user: user.value.id,
+    is_local: is_local
+  })
+
+  .then(function (response) {
+    console.log(response)
+    $q.notify({
+      type: "positive",
+      message: `Success!`,
+    });
+  })
+
+  .catch(function (error) {
+    console.log(error);
+
+    $q.notify({
+      type: "negative",
+      message: error.response.data.error,
+    });
+  })
+}
+
+</script>
diff --git a/frontend/src/pages/game/gamePage.vue b/frontend/src/pages/game/gamePage.vue
new file mode 100644
index 0000000..44e721a
--- /dev/null
+++ b/frontend/src/pages/game/gamePage.vue
@@ -0,0 +1,7 @@
+<template>
+    Game
+</template>
+
+<script setup>
+//
+</script>
diff --git a/frontend/src/pages/user/userSettingsPage.vue b/frontend/src/pages/user/userSettingsPage.vue
new file mode 100644
index 0000000..94c8caa
--- /dev/null
+++ b/frontend/src/pages/user/userSettingsPage.vue
@@ -0,0 +1,7 @@
+<template>
+    Settings
+</template>
+
+<script setup>
+//
+</script>
diff --git a/frontend/src/pages/user/usernamePage.vue b/frontend/src/pages/user/usernamePage.vue
index 1099a7f..f203d1a 100644
--- a/frontend/src/pages/user/usernamePage.vue
+++ b/frontend/src/pages/user/usernamePage.vue
@@ -41,9 +41,11 @@
 
 <script setup>
 import { ref } from "vue";
-import { useQuasar } from "quasar";
+import { useQuasar, LocalStorage } from "quasar";
 import { api } from 'src/boot/axios';
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
 const $q = useQuasar();
 const user = ref({ username:"", id:0 });
 
@@ -56,30 +58,33 @@ async function setUsername() {
         return;
     }
 
-    api.post('/api/users', {
+    api.post("/api/users", {
       username: user.value.username
     })
     
     .then(function (response) {
       console.log(response);
 
-      localStorage.setItem("username", response.data.username);
-      localStorage.setItem("id", response.data.id);
+      user.value.username = response.data.username
+      user.value.id = response.data.id
+
+      LocalStorage.setItem("user", user.value);
 
       $q.notify({
         type: "positive",
-        message: `Success!`,
+        message: "Success!",
       });
 
+      router.push("/game/select")
     })
     
     .catch(function (error) {
       console.log(error);
 
       $q.notify({
-            type: "negative",
-            message: error.response.data.error,
-        });
+        type: "negative",
+        message: error.response.data.error,
+      });
     });
 }
 </script>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index f83da56..338eac0 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -4,11 +4,17 @@ const routes = [
     component: () => import('layouts/MainLayout.vue'),
     children: [
       { path: '', component: () => import('pages/IndexPage.vue') },
-      { path: 'test_DartPicker', component: () => import('src/pages/test/testDartPickerPage.vue') },
-      { path: 'test_NumbersPage', component: () => import('src/pages/test/testNumbersPage.vue') },
-      { path: 'test_WebSpeechApi', component: () => import('src/pages/test/testWebSpeechApi.vue') },
+      { path: 'test_DartPicker', component: () => import('pages/test/testDartPickerPage.vue') },
+      { path: 'test_NumbersPage', component: () => import('pages/test/testNumbersPage.vue') },
+      { path: 'test_WebSpeechApi', component: () => import('pages/test/testWebSpeechApi.vue') },
 
-      { path: 'user/username', component: () => import('src/pages/user/usernamePage.vue') },
+      { path: 'user/username', component: () => import('pages/user/usernamePage.vue') },
+      { path: '/user/settings', component: () => import('pages/user/userSettingsPage.vue') },
+
+      { path: 'game', component: () => import('pages/game/gamePage.vue') },
+      { path: 'game/select', component: () => import('pages/game/gameModeSelectPage.vue') },
+      { path: 'game/local/create', component: () => import('pages/game/createLocalGamePage.vue') },
+      { path: 'game/online/create', component: () => import('pages/game/createOnlineGamePage.vue') },
 
       { path: 'error', component: () => import('pages/ErrorPage.vue') }
     ],