feat(ui): Main Menu

Changed construction of mainmenu to render children. Added a rules section.

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>

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'
   }
 ];
 

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>

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

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: '/',
+      path: '/mainmenu/',
-      name: '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 }
-    }
   ],
 })
 

src/views/CreateGame.vue

@@ -30,24 +30,16 @@ const createGameQuasar = async () => {
 </script>
 
 <template>
-  <q-layout>
+  <header class="text-center q-mb-xl">
-    <q-page-container>
+    <p
-      <q-page class="flex justify-start items-center column ">
+      class="text-h5 text-grey-4 q-mt-md"
-        <header class="text-center q-mb-xl">
+      style="max-width: 900px; margin-left: auto; margin-right: auto;"
-          <h1 class="game-title text-white q-my-none">
+    >
-            KnockOutWhist
+      Are you ready to play? Please select a lobbyname of your choice, the amount of players you want
-          </h1>
+      to play with and you are ready to go!
-          <p
+    </p>
-            class="text-h5 text-grey-4 q-mt-md"
+  </header>
-            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>

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>

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>
-
+          <router-view></router-view>
-        <MainMenuBoxes />
-
       </q-page>
     </q-page-container>
   </q-layout>