ci: bump version to v0.9.0

Added join game functionality

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

CHANGELOG.md

@@ -78,3 +78,13 @@
 ### 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))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.8.0...0.0.0) (2025-12-10)
+
+### Features
+
+* **api:** FRO-15 Join Game ([#16](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/16)) ([14e001c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/14e001cae67592c5ea15786905aa3574df9a9e6c))

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

@@ -11,7 +11,7 @@ type Hand = {
 type Player = {
   id: string
   name: string
-  dogLife: string
+  dogLife: boolean
 }
 
 type PlayerQueue = {

src/views/JoinGameView.vue

@@ -2,27 +2,37 @@
 import {ref} from "vue";
 import { useRouter } from 'vue-router';
 import {useQuasar} from "quasar";
+import axios from "axios";
 const router = useRouter();
 const lobbyCode = ref('');
 const isLoading = ref(false);
 const $q = useQuasar();
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 const startGameQuasar = async() => {
   if (!lobbyCode.value) {
     $q.notify({ message: 'Lobby-Name wird benötigt', color: 'red', position: 'top', icon: 'cancel' });
     return;
   }
   isLoading.value = true;
-  //TODO: Implement Logic to Start the Game and Redirect to Ingame
+  axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => {
-  await delay(3000)
+    const responseData = response.data
-  isLoading.value = false;
+    $q.notify({
-  $q.notify({
+      message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
-    message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
+      color: 'green-6',
-    color: 'green-6',
+      icon: 'check_circle',
-    icon: 'check_circle',
+      position: 'top'
-    position: 'top'
+    });
-  });
+    router.push("/lobby")
-  router.push({ name: 'mainmenu'});
+  }).catch(() => {
+    $q.notify({
+      message: `Lobby "${lobbyCode.value}" nicht gefunden`,
+      color: 'red-6',
+      icon: 'cancel',
+      position: 'top'
+    })
+  }).finally(() =>
+    isLoading.value = false
+  )
 }
 </script>
 

versions.env

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