ci: bump version to v0.12.0

Reviewed-on: #19
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>

CHANGELOG.md

@@ -83,3 +83,23 @@
 ### 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))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.9.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-24 Create Played Cards Component ([#17](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/17)) ([21db939](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/21db939d342c72f5ad5fad3b4f873e902d1e5a0f))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.10.0...0.0.0) (2025-12-10)
+
+### Features
+
+* **ui:** FRO-13 User Component ([#18](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/18)) ([f05f10e](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/f05f10ea56b21f15cefbc76277ead5806eb1cf18))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.11.0...0.0.0) (2025-12-10)
+
+### Features
+
+* FRO-25 Create Game Info Component ([#19](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/19)) ([06f27d6](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/06f27d6813f625af25e734de3dcbcf07b10f3a1a))

src/components/User.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { useUserInfo } from "@/composables/useUserInfo.ts";
+import { useRouter } from 'vue-router';
+import {useQuasar} from "quasar";
+import axios from "axios";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
+const $q = useQuasar()
+let userinfo = useUserInfo();
+const router = useRouter();
+
+const handleLogoff = () => {
+
+  axios.post(`${api}/logout`, {}, {withCredentials: true}).then((response) => {
+    const responseData = response.data
+    console.log("Response" + responseData.status)
+    $q.notify({
+      message: `You successfully logged out!`,
+      color: 'green-6',
+      icon: 'check_circle',
+      position: 'top'
+    });
+    router.push({ name: 'login' });
+  }).catch((err) => {
+    console.log("ERROR:" + err)
+    $q.notify({
+      message: `Something went wrong`,
+      color: 'red-6',
+      icon: 'cancel',
+      position: 'top'
+    });
+  })
+
+}
+</script>
+
+<template>
+  <div class="row items-center q-gutter-x-md">
+
+    <div
+      v-if="userinfo.username"
+      class="text-body1 text-weight-medium row items-center q-gutter-x-sm cursor-pointer relative-position"
+    >
+      <div id="user-menu-target" class="row items-center q-gutter-x-sm" style="min-width: 150px">
+        <q-icon name="account_circle" size="md" />
+        <span>{{ userinfo.username }}</span>
+        <q-icon name="arrow_drop_down" size="sm" />
+      </div>
+
+      <q-menu
+        target="#user-menu-target"
+        anchor="bottom right"
+        self="top right"
+      >
+        <q-list style="max-width: 150px" class="bg-dark">
+          <q-item
+            clickable
+            v-close-popup
+            @click="handleLogoff"
+            class="text-negative"
+          >
+            <q-item-section avatar>
+              <q-icon name="logout" color="negative" />
+            </q-item-section>
+            <q-item-section>Log Off</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </div>
+
+    <div v-else class="text-caption text-grey-4">
+      Not Logged In
+    </div>
+
+  </div>
+</template>
+<style scoped>
+#user-menu-target:hover {
+  opacity: 0.8;
+}
+</style>

src/components/ingame/GameInfo.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type {Card} from "@/types/GameSubTypes.ts";
+import {computed, toRefs} from "vue";
+
+const props = defineProps<{
+  trumpsuit: Card
+  firstCard: Card | null
+}>()
+const {trumpsuit, firstCard} = toRefs(props)
+
+
+
+const trumpName = computed(() => {
+  switch (trumpsuit.value.path.charAt(trumpsuit.value.path.length - 1)) {
+    case 'S':
+      return 'Spades'
+    case 'H':
+      return 'Hearts'
+    case 'D':
+      return 'Diamonds'
+    case 'C':
+      return 'Clubs'
+    default:
+      return 'Unknown'
+  }
+})
+
+</script>
+
+<template>
+  <div>
+    <div class="q-mb-sm">
+      <div class="text-h6 q-mb-xs q-font-medium">Trumpsuit</div>
+      <div id="trumpsuit" class="text-h5 text-primary">{{ trumpName }}</div>
+    </div>
+
+    <div class="q-mt-md">
+      <div class="text-subtitle1 q-mb-xs q-font-medium">First Card</div>
+      <div id="first-card-container" class="q-pa-sm bg-grey-2 rounded shadow-2"
+           style="display:inline-block;">
+        <q-img v-if="firstCard" :src="firstCard.path" alt="First Card" class="firstbox"
+               style="width: 80px; border-radius: 6px;"/>
+        <div v-else class="q-pa-sm"
+             style="width: 80px; height: 120px; display:flex; align-items:center; justify-content:center; border-radius:6px; background: #ffffff; color: #666;">
+          No image
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.firstbox {
+  width: 80px;
+  border-radius: 6px;
+}
+</style>

src/components/ingame/PlayedCards.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import {computed, defineProps, toRefs} from 'vue'
+import type {Trick} from "@/types/GameSubTypes.ts";
+const props = defineProps<{ trick: Trick }>()
+
+const {trick } = toRefs(props)
+
+const playedCards = computed(() => {
+  return [...trick.value.cards].map(card => {
+    return {
+      cardId: card[1].path,
+      player: card[0].name
+    }
+  })
+})
+
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+</script>
+
+<template>
+  <div class="row items-center justify-center q-gutter-sm" id="trick-cards-content">
+    <div v-for="(play, index) in playedCards" :key="index" class="col-auto">
+      <q-card flat class="bg-transparent trick-card" style="width: 7rem; backdrop-filter: blur(4px);">
+        <q-card-section class="q-pa-sm q-pb-xs">
+          <q-img :src="getCardImagePath(play.cardId)" alt="card" style="border-radius: 6px; width:100%" />
+        </q-card-section>
+        <q-card-section class="q-pa-sm q-pt-xs text-center bg-transparent">
+          <div class="text-subtitle2 text-grey-7">{{ play.player }}</div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.trick-card {
+  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
+}
+</style>

src/types/GameSubTypes.ts

@@ -34,7 +34,7 @@ type Round = {
 }
 
 type Trick = {
-  cards: { [player: string]: Card }
+  cards: Map<Player, Card>
   firstCard: Card | null
   winner: Player | null
 }

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
-  await delay(3000)
-  isLoading.value = false;
+  axios.post(`${api}/joinGame`, {gameId: lobbyCode.value.toString()}, {withCredentials: true}).then(response => {
+    const responseData = response.data
     $q.notify({
       message: `Lobby "${lobbyCode.value}" erfolgreich gefunden`,
       color: 'green-6',
       icon: 'check_circle',
       position: 'top'
     });
-  router.push({ name: 'mainmenu'});
+    router.push("/lobby")
+  }).catch(() => {
+    $q.notify({
+      message: `Lobby "${lobbyCode.value}" nicht gefunden`,
+      color: 'red-6',
+      icon: 'cancel',
+      position: 'top'
+    })
+  }).finally(() =>
+    isLoading.value = false
+  )
 }
 </script>
 

src/views/MainMenuView.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
-import MainMenuBoxes from "@/components/MainMenuBoxes.vue";
+import UserStatusArea from '../components/User.vue'
 </script>
 
 <template>
   <q-layout view="hHh lpR fFf" class="font-roboto">
-    <q-page-container>
-      <q-page class="flex justify-start items-center column">
+    <q-header elevated class="bg-dark text-white">
+      <q-toolbar>
+        <q-toolbar-title class="q-ml-md">
+        </q-toolbar-title>
 
-        <header class="text-center q-mb-xl">
-          <h1 class="game-title text-white q-my-none">
+        <UserStatusArea />
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <q-page class="flex justify-start items-center column q-pa-md"> <header class="text-center q-mb-xl q-mt-md"> <h1 class="game-title text-white q-my-none">
         KnockOutWhist
       </h1>
       </header>

versions.env

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