ci: bump version to v0.7.0

Added functionality to create Game so that it creates a game in the Backend

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #14
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

CHANGELOG.md

@@ -63,3 +63,18 @@
 ### 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))

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/types/GameSubTypes.ts

@@ -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,16 +18,21 @@ const createGameQuasar = async () => {
     return;
   }
   isLoading.value = true;
-  //TODO: Implement Logic to Create the Game and Redirect to Lobby
+  axios.post(`${api}/createGame`, {lobbyname: lobbyName.value, playeramount: playerAmount.value.toString()}, {withCredentials: true}).then((response) => {
-  await delay(3000)
+    const responseData = response.data
-  isLoading.value = false;
+    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>
 

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(() =>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=4
+MINOR=7
 PATCH=0