ci: bump version to v0.8.0

Reviewed-on: #15
Reviewed-by: lq64 <lq@blackhole.local>
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>

CHANGELOG.md

@@ -58,3 +58,28 @@
 ### Reverts
 
 * deleted MainMenuBoxes.vue ([#10](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/10)) ([4582306](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/458230622bcf0a5d6f5fe5cec028ab46651b6760))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.3.1...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-17 Added Rule Component and changed Mainmenu structure ([#11](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/11)) ([adbe2be](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/adbe2be5345b95cd3bcd9deba936614b489268fd))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.4.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-20 Create scoreboard component ([#12](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/12)) ([97a9f85](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/97a9f857586eb41feb056d7af0a5d8553d2bcf80))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.5.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-21 Create Turn Component ([#13](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/13)) ([ecb3851](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/ecb38510de53b811eaaee2a39fc1ae423aed71c6))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.6.0...0.0.0) (2025-12-10)
+
+### Features
+
+* **api:** FRO-14 Create Game ([#14](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/14)) ([df61db2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/df61db2730b5e6b2796cbe58d1d224f1d5d6f085))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.7.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-23 Create Player Hand Component ([#15](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/15)) ([b20ec0a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/b20ec0a3638649155f2f9c5984014d75eb2ba618))

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/components/ingame/Hand.vue

@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import {toRefs} from 'vue'
+import type {Hand, Player} from "@/types/GameSubTypes.ts";
+
+const props = defineProps<{
+  hand: Hand
+  isHandInactive?: boolean
+  self: Player | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'play-card', idx: number): void
+  (e: 'skip-dog'): void
+}>()
+
+const { hand, isHandInactive, self } = toRefs(props)
+
+function handlePlayCard(idx: number | null) {
+  if (idx === null) return
+  if (isHandInactive?.value) return
+  emit('play-card', idx)
+}
+
+function handleSkipDogLife() {
+  emit('skip-dog')
+}
+
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+</script>
+
+<template>
+  <div class="bottom-div hand-container">
+    <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
+      <div class="cards-row">
+        <div v-for="card in hand.cards" :key="card.identifier" class="handcard">
+          <div class="card-btn" @click="handlePlayCard(card.idx)" aria-label="Play card">
+            <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
+          </div>
+        </div>
+      </div>
+      <div v-if="self?.dogLife" class="dog-actions">
+        <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bottom-div {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 1400px;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+}
+.hand-container {
+  margin-left: 0;
+  margin-right: 0;
+}
+.ingame-cards-slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.cards-row {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: center;
+}
+.handcard {
+  border-radius: 6px;
+}
+.card-btn {
+  padding: 0;
+  min-width: 0;
+  border-radius: 6px;
+}
+.inactive {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.dog-actions {
+  margin-top: 8px;
+}
+.handcard :hover {
+  box-shadow: 3px 3px 3px #000000;
+}
+.card {
+  width:120px;
+  border-radius:6px
+}
+
+@media (max-height: 500px) {
+  .card {
+    width: 80px;
+    border-radius: 4px;
+  }
+}
+</style>

src/components/ingame/Scoreboard.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type {Round} from "@/types/GameSubTypes.ts";
+
+interface PlayerScore { name: string; tricks: number }
+const props = defineProps<{ currentRound: Round }>()
+const playerScores: PlayerScore[] = props.currentRound.playersIn.map(player => {
+  return {
+    name: player.name,
+    tricks: props.currentRound.trickList.filter(trick => {
+      return trick.winner?.id === player.id
+    }).length
+  }
+})
+</script>
+
+<template>
+  <q-card class="score-card q-mt-md" id="score-table-container">
+    <q-card-section class="row items-center q-px-md q-pt-md">
+      <div class="col">
+        <div class="text-h6 fw-bold">Tricks Won</div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-list dense class="q-pa-sm">
+      <q-item class="score-header">
+        <q-item-section style="width:50%">PLAYER</q-item-section>
+        <q-item-section side style="width:50%" class="text-right">TRICKS</q-item-section>
+      </q-item>
+
+      <q-separator inset />
+
+      <div v-if="playerScores.length">
+        <q-item v-for="player in playerScores" :key="player.name" class="score-row">
+          <q-item-section style="width:50%" class="text-truncate">{{ player.name }}</q-item-section>
+          <q-item-section side style="width:50%" class="text-right">{{ player.tricks }}</q-item-section>
+        </q-item>
+      </div>
+
+      <div v-else>
+        <q-item>
+          <q-item-section class="text-grey">No scores yet</q-item-section>
+        </q-item>
+      </div>
+    </q-list>
+  </q-card>
+</template>
+
+<style scoped>
+.score-card {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
+}
+
+.score-header {
+  font-weight: 700;
+  color: #000000;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.score-row {
+  color: #000000;
+}
+
+.text-right { text-align: right; }
+</style>

src/components/ingame/Turn.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {PlayerQueue} from "@/types/GameSubTypes.ts";
+
+const props = defineProps<{
+  queue: PlayerQueue
+}>()
+
+const safeNextPlayers = computed(() => props.queue.players ?? [])
+</script>
+
+<template>
+  <q-card flat class="turn-tracker-container q-pa-md">
+    <q-card-section>
+      <div class="text-subtitle2 q-mb-xs">Current Player</div>
+      <div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
+          props.queue.currentPlayer?.name
+        }}</div>
+
+      <div v-if="safeNextPlayers.length > 0" class="q-mt-md">
+        <div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
+        <q-list id="next-players-container" dense>
+          <q-item v-for="player in safeNextPlayers" :key="player.id">
+            <q-item-section>
+              <div class="text-body1 text-primary">{{ player.name }}</div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped>
+.turn-tracker-container {
+  max-width: 320px;
+}
+</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,29 +14,42 @@ const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'mainmenu',
+      path: '/mainmenu/',
       component: MainMenuView,
+      meta: { requiresAuth: true },
+      children: [
+        {
+          path: '',
+          name: 'mainmenu',
+          component: defaultMenu,
           meta: { requiresAuth: true }
         },
+        {
+          path: 'create',
+          name: 'create-Game',
+          component: createGameView,
+          meta: {requiresAuth: true }
+        },
+        {
+          path: 'join',
+          name: 'join-Game',
+          component: joinGameView,
+          meta: {requiresAuth: true }
+        },
+        {
+          path: 'rules',
+          name: 'rules-Game',
+          component: rulesView,
+          meta: {requiresAuth: true }
+        },
+      ],
+    },
     {
       path: '/login',
       name: 'login',
       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/types/GameSubTypes.ts

@@ -11,7 +11,7 @@ type Hand = {
 type Player = {
   id: string
   name: string
-  dogLife: string
+  dogLife: boolean
 }
 
 type PlayerQueue = {
@@ -28,6 +28,7 @@ type PodiumPlayer = {
 
 type Round = {
   trumpSuit: Card
+  playersIn: Player[]
   firstRound: boolean
   trickList: Trick[]
 }

src/views/CreateGame.vue

@@ -2,7 +2,9 @@
 import { ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useRouter } from 'vue-router';
+import axios from "axios";
 
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 const lobbyName = ref('');
 const isPublic = ref(false);
 const playerAmount = ref(2);
@@ -16,27 +18,26 @@ const createGameQuasar = async () => {
     return;
   }
   isLoading.value = true;
-  //TODO: Implement Logic to Create the Game and Redirect to Lobby
-  await delay(3000)
-  isLoading.value = false;
+  axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => {
+    const responseData = response.data
+    console.log("Response" + responseData.status)
     $q.notify({
-      message: `Lobby "${lobbyName.value}" erfolgreich erstellt!`,
+      message: `Lobby "${lobbyName.value}" erfolgreich erstellt mit gameId ${responseData.gameId}!`,
       color: 'green-6',
       icon: 'check_circle',
       position: 'top'
     });
-    router.push({ name: 'mainmenu'});
+    router.push("/lobby")
+  }).catch((err) => {
+    console.log("ERROR:" + err)
+  }).finally(() =>
+    isLoading.value = false
+  )
 }
 </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;"
@@ -45,9 +46,7 @@ const createGameQuasar = async () => {
       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 +107,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/LoginView.vue

@@ -80,7 +80,7 @@ const onSubmit = () => {
   loginError.value = ''
   axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
     uInfo.setUserInfo(response.data.user.username, response.data.user.id)
-    router.push("/")
+    router.push("/mainmenu")
   }).catch(() => {
     loginError.value = 'Invalid username or password'
   }).finally(() =>

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>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=3
-PATCH=1
+MINOR=8
+PATCH=0