From d6e2d03ac6f058c726a5e0b4ec42dbfa7323df35 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Wed, 10 Dec 2025 13:23:44 +0100
Subject: [PATCH 1/3] feat(ui): Main Menu

Changed construction of mainmenu to render children. Added a rules section.
---
 src/components/DefaultMenu.vue   |  21 ++++++
 src/components/MainMenuBoxes.vue |   7 ++
 src/components/Rules.vue         | 107 +++++++++++++++++++++++++++++++
 src/main.ts                      |   5 +-
 src/router/index.ts              |  45 ++++++++-----
 src/views/CreateGame.vue         |  29 +++------
 src/views/JoinGameView.vue       |   9 ---
 src/views/MainMenuView.vue       |  11 +---
 8 files changed, 179 insertions(+), 55 deletions(-)
 create mode 100644 src/components/DefaultMenu.vue
 create mode 100644 src/components/Rules.vue

diff --git a/src/components/DefaultMenu.vue b/src/components/DefaultMenu.vue
new file mode 100644
index 0000000..434e116
--- /dev/null
+++ b/src/components/DefaultMenu.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
+</script>
+
+<template>
+  <header class="text-center q-mb-xl">
+  <p
+    class="text-h5 text-grey-4 q-mt-md"
+    style="max-width: 900px; margin-left: auto; margin-right: auto;"
+  >
+    Welcome to KnockOutWhist! In this game you have to "knock-out" your opponents until you are the last player standing.
+    Do you have what it takes to be crowned the champion?
+  </p>
+  </header>
+  <MainMenuBoxes />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/MainMenuBoxes.vue b/src/components/MainMenuBoxes.vue
index 3b6ab03..38e9897 100644
--- a/src/components/MainMenuBoxes.vue
+++ b/src/components/MainMenuBoxes.vue
@@ -23,6 +23,13 @@ const menuItems = [
     icon: 'settings',
     routeName: 'settings',
     color: 'grey-8'
+  },
+  {
+    title: 'Rules',
+    description: 'Look at the rules to have a clear understanding for playing the game.',
+    icon: 'settings',
+    routeName: 'rules-Game',
+    color: 'grey-8'
   }
 ];
 
diff --git a/src/components/Rules.vue b/src/components/Rules.vue
new file mode 100644
index 0000000..964dfe8
--- /dev/null
+++ b/src/components/Rules.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="q-pa-md row justify-center">
+    <div style="width: 100%; max-width: 980px; min-width: 980px;">
+
+      <q-card class="rules-card bg-grey-10 text-white shadow-10">
+
+        <q-card-section class="text-center bg-grey-9 q-py-md">
+          <div class="text-h5 text-weight-bold rules-title">
+            <q-icon name="menu_book" class="q-mr-sm" /> Game Rules Overview
+          </div>
+        </q-card-section>
+
+        <q-card-section class="q-pa-none">
+
+          <q-list class="rules-list">
+
+            <QExpansionItem
+              icon="groups"
+              label="Players"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                Two to seven players. The aim is to be the last player left in the game.
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="style"
+              label="Equipment & Card Ranks"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                <p>A standard 52-card pack is used.</p>
+                <p>In each suit, cards rank from highest to lowest: **A K Q J 10 9 8 7 6 5 4 3 2**.</p>
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="casino"
+              label="Deal and Trumps"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                <div class="text-subtitle1 text-primary q-mb-sm">First Hand (Deal)</div>
+                <p>The dealer deals seven cards to each player. One card is turned up to determine the trump suit for the round.</p>
+                <q-separator inset dark class="q-my-sm"/>
+                <div class="text-subtitle1 text-primary q-mb-sm">Subsequent Hands (Deal)</div>
+                <p>The deal rotates clockwise. The player who took the most tricks in the previous hand selects the trump suit. If there's a tie, players cut cards to decide who calls trumps. **One fewer card is dealt in each successive hand until the final hand consists of one card each.**</p>
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="play_circle_outline"
+              label="Play & Winning a Trick"
+              header-class="text-weight-bold bg-grey-8"
+            >
+              <q-card-section>
+                <div class="text-subtitle1 text-primary q-mb-sm">Play</div>
+                <p>The player to the dealer's left (eldest hand) leads the first trick. Any card can be led. Other players must follow suit if possible. A player with no cards of the suit led may play any card.</p>
+
+                <div class="text-subtitle1 text-primary q-my-sm">Winning a Trick</div>
+                <p>The highest card of the suit led wins, **unless** a trump is played, in which case the highest trump wins. The winner of the trick leads the next.</p>
+
+                <div class="text-subtitle1 text-primary q-my-sm">Leading Trumps</div>
+                <p>Some rules disallow leading trumps before the suit has been 'broken' (a trump has been played to the lead of another suit). Leading trumps is always permissible if a player holds only trumps.</p>
+              </q-card-section>
+            </QExpansionItem>
+
+            <QExpansionItem
+              icon="flare"
+              label="Knockout & Dog's Life (Special Rules)"
+              header-class="text-weight-bold bg-red-9"
+            >
+              <q-card-section>
+                <div class="text-subtitle1 text-red-4 q-mb-sm">Knockout</div>
+                <p>At the end of each hand, any player who took no tricks is knocked out and takes no further part in the game.</p>
+
+                <div class="text-subtitle1 text-red-4 q-my-sm">Winning the Game</div>
+                <p>The game is won when a player takes all the tricks in a round, as all other players are knocked out, leaving only one player remaining.</p>
+
+                <q-separator inset dark class="q-my-sm"/>
+
+                <div class="text-subtitle1 text-red-4 q-my-sm">Dog's Life (Optional)</div>
+                <p>The first player who takes no tricks is awarded a "dog's life". In the next hand, that player is dealt one card and can decide which trick to play it to. Each time a trick is played the dog may either play the card or knock on the table and wait to play it later. If the dog wins a trick, the player to the left leads the next and the dog re-enters the game properly in the next hand. If the dog fails, they are knocked out.</p>
+              </q-card-section>
+            </QExpansionItem>
+
+          </q-list>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rules-card {
+  width: 100%;
+  border: 2px solid #5a5a5a;
+}
+.rules-list .q-item {
+  border-bottom: 1px solid #333;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 13dd503..a7d595c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,7 +5,7 @@ import App from './App.vue'
 import router from './router'
 import Particles from "@tsparticles/vue3";
 import { loadFull } from "tsparticles";
-import { Quasar, Notify } from 'quasar'
+import { Quasar, Notify, QExpansionItem } from 'quasar'
 import '@quasar/extras/material-icons/material-icons.css'
 import 'quasar/dist/quasar.css'
 import { createPinia } from 'pinia'
@@ -22,6 +22,9 @@ app.use(Quasar, {
   plugins: {
     Notify
   },
+  components: {
+    QExpansionItem
+  }
 })
 app.use(VueAxios, axios)
 app.use(Particles, {
diff --git a/src/router/index.ts b/src/router/index.ts
index 0c2ed87..9ca6e56 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,8 +3,10 @@ import LoginView from '../views/LoginView.vue'
 import MainMenuView from '../views/MainMenuView.vue'
 import createGameView from '../views/CreateGame.vue'
 import joinGameView from "@/views/JoinGameView.vue";
+import defaultMenu from "../components/DefaultMenu.vue"
 import axios from "axios";
 import { useUserInfo } from "@/composables/useUserInfo";
+import rulesView from "../components/Rules.vue";
 
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
@@ -12,10 +14,35 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'mainmenu',
+      path: '/mainmenu/',
       component: MainMenuView,
-      meta: { requiresAuth: true }
+      meta: { requiresAuth: false },
+      children: [
+        {
+          path: '',
+          name: 'mainmenu',
+          component: defaultMenu,
+          meta: { requiresAuth: false }
+        },
+        {
+          path: 'create',
+          name: 'create-Game',
+          component: createGameView,
+          meta: {requiresAuth: false }
+        },
+        {
+          path: 'join',
+          name: 'join-Game',
+          component: joinGameView,
+          meta: {requiresAuth: false }
+        },
+        {
+          path: 'rules',
+          name: 'rules-Game',
+          component: rulesView,
+          meta: {requiresAuth: false }
+        },
+      ],
     },
     {
       path: '/login',
@@ -23,18 +50,6 @@ const router = createRouter({
       component: LoginView,
       meta: { requiresAuth: false }
     },
-    {
-      path: '/create',
-      name: 'create-Game',
-      component: createGameView,
-      meta: { requiresAuth: true }
-    },
-    {
-      path: '/join',
-      name: 'join-Game',
-      component: joinGameView,
-      meta: { requiresAuth: true }
-    }
   ],
 })
 
diff --git a/src/views/CreateGame.vue b/src/views/CreateGame.vue
index bcfde33..6544af4 100644
--- a/src/views/CreateGame.vue
+++ b/src/views/CreateGame.vue
@@ -30,24 +30,16 @@ const createGameQuasar = async () => {
 </script>
 
 <template>
-  <q-layout>
-    <q-page-container>
-      <q-page class="flex justify-start items-center column ">
-        <header class="text-center q-mb-xl">
-          <h1 class="game-title text-white q-my-none">
-            KnockOutWhist
-          </h1>
-          <p
-            class="text-h5 text-grey-4 q-mt-md"
-            style="max-width: 900px; margin-left: auto; margin-right: auto;"
-          >
-            Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
-            to play with and you are ready to go!
-          </p>
-        </header>
-
+  <header class="text-center q-mb-xl">
+    <p
+      class="text-h5 text-grey-4 q-mt-md"
+      style="max-width: 900px; margin-left: auto; margin-right: auto;"
+    >
+      Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
+      to play with and you are ready to go!
+    </p>
+  </header>
         <div class="q-pa-md" style="width: 100%; max-width: 400px;">
-
           <div>
             <q-input
               v-model="lobbyName"
@@ -108,9 +100,6 @@ const createGameQuasar = async () => {
           </div>
 
         </div>
-      </q-page>
-    </q-page-container>
-  </q-layout>
 </template>
 
 <style scoped>
diff --git a/src/views/JoinGameView.vue b/src/views/JoinGameView.vue
index 9dd9678..bebc3ba 100644
--- a/src/views/JoinGameView.vue
+++ b/src/views/JoinGameView.vue
@@ -27,13 +27,7 @@ const startGameQuasar = async() => {
 </script>
 
 <template>
-  <q-layout>
-    <q-page-container>
-      <q-page class="flex justify-start items-center column ">
         <header class="text-center q-mb-xl">
-          <h1 class="game-title text-white q-my-none">
-            KnockOutWhist
-          </h1>
           <p
             class="text-h5 text-grey-4 q-mt-md"
             style="max-width: 900px; margin-left: auto; margin-right: auto;"
@@ -70,9 +64,6 @@ const startGameQuasar = async() => {
           </div>
 
         </div>
-      </q-page>
-    </q-page-container>
-  </q-layout>
 </template>
 
 <style scoped>
diff --git a/src/views/MainMenuView.vue b/src/views/MainMenuView.vue
index 4cc2ce2..75a84c9 100644
--- a/src/views/MainMenuView.vue
+++ b/src/views/MainMenuView.vue
@@ -11,17 +11,8 @@ import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
           <h1 class="game-title text-white q-my-none">
             KnockOutWhist
           </h1>
-          <p
-            class="text-h5 text-grey-4 q-mt-md"
-            style="max-width: 900px; margin-left: auto; margin-right: auto;"
-          >
-            Welcome to KnockOutWhist! In this game you have to "knock-out" your opponents until you are the last player standing.
-            Do you have what it takes to be crowned the champion?
-          </p>
         </header>
-
-        <MainMenuBoxes />
-
+          <router-view></router-view>
       </q-page>
     </q-page-container>
   </q-layout>
-- 
2.52.0


From 3e71801c079529ec754706cd3a9d8e5878a5f6d4 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Wed, 10 Dec 2025 13:25:16 +0100
Subject: [PATCH 2/3] fix(ui): Mainmenu

Changed requiresAuth to true
---
 src/router/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 9ca6e56..670bc03 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,25 +22,25 @@ const router = createRouter({
           path: '',
           name: 'mainmenu',
           component: defaultMenu,
-          meta: { requiresAuth: false }
+          meta: { requiresAuth: true }
         },
         {
           path: 'create',
           name: 'create-Game',
           component: createGameView,
-          meta: {requiresAuth: false }
+          meta: {requiresAuth: true }
         },
         {
           path: 'join',
           name: 'join-Game',
           component: joinGameView,
-          meta: {requiresAuth: false }
+          meta: {requiresAuth: true }
         },
         {
           path: 'rules',
           name: 'rules-Game',
           component: rulesView,
-          meta: {requiresAuth: false }
+          meta: {requiresAuth: true }
         },
       ],
     },
-- 
2.52.0


From 6163e7b482e9ca9d295a515a53487aa856ac6479 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Wed, 10 Dec 2025 13:28:42 +0100
Subject: [PATCH 3/3] fix(ui): Mainmenu

Changed requiresAuth to true
---
 src/router/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/index.ts b/src/router/index.ts
index 670bc03..908614e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -16,7 +16,7 @@ const router = createRouter({
     {
       path: '/mainmenu/',
       component: MainMenuView,
-      meta: { requiresAuth: false },
+      meta: { requiresAuth: true },
       children: [
         {
           path: '',
-- 
2.52.0