ci: bump version to v0.14.0

feat(ui): FRO-5 Animation Card Played (#23 )
Added a fade Up Out animation. Also added a sliding animation for the remaining cards Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #23 Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
2025-12-15 09:08:10 +00:00 · 2025-12-15 10:06:02 +01:00
7 changed files with 50 additions and 192 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -109,3 +109,9 @@
 ### Features

 * **ui:** FRO-35 Animations ([#22](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/22)) ([d73b4f3](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/d73b4f396be89b4f8ce2a446afe47c604cfe8598))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.13.0...0.0.0) (2025-12-15)
+
+### Features
+
+* **ui:** FRO-34 Lobby ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/21)) ([bb6355d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/bb6355d9ed6745b4852a52040d880ee1dcc6d797))
+* **ui:** FRO-5 Animation Card Played ([#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/23)) ([70a44fd](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/70a44fd1ea119d43f875e6cfac56fb25747d8913))
--- a/src/components/Ingame.vue
+++ b/src/components/Ingame.vue
@@ -1,30 +1,15 @@
 <script setup lang="ts">

 import {useIngame} from "@/composables/useIngame.ts";
-import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
+import type {GameInfo} from "@/types/GameTypes.ts";
 import HandC from "@/components/ingame/HandC.vue";
 import GameInfoC from "@/components/ingame/GameInfoC.vue";
 import PlayedCardsC from "@/components/ingame/PlayedCardsC.vue";
 import ScoreboardC from "@/components/ingame/ScoreboardC.vue";
 import TurnC from "@/components/ingame/TurnC.vue";
-import TrumpC from "@/components/ingame/TrumpC.vue";
-import {storeToRefs} from "pinia";
-import {ref, toRefs, watch} from "vue";

 const ig = useIngame()
-const { state } = toRefs(ig)

-const cachedGameInfo = ref<GameInfo | null>(null)
-
-watch(
-  () => ig.data,
-  (newData) => {
-    if (state.value === 'InGame' && newData) {
-      cachedGameInfo.value = newData as GameInfo
-    }
-  },
-  { deep: true, immediate: true }
-)
 </script>

 <template>
@@ -32,46 +17,34 @@ watch(
    <q-page-container>
      <q-page class="game-field-background vh-100 ingame-side-shadow">
        <div class="py-5 container-xxl">
-          <transition
-            appear
-            enter-active-class="animate__animated animate__fadeInDown"
-            leave-active-class="animate__animated animate__fadeOutDown"
-          >
-            <div
-              v-if="state === 'SelectTrump'"
-              class="full-overlay-blur"
-              style="z-index: 2000;"
-            >
-              <TrumpC />
-            </div>
-          </transition>
+
          <div class="fit row wrap justify-center items-center content-start">
            <div class="mt-5 ml-4 self-start col-2">
-              <TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/>
+              <TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
            </div>

            <div class="text-center col-6">
-              <ScoreboardC v-if="(cachedGameInfo as GameInfo)?.currentRound" :current-round="(cachedGameInfo as GameInfo).currentRound!" />
+              <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
            </div>


            <div class="mt-5 ml-4 self-end col-2" style="margin-left: 6em">
-              <GameInfoC v-if="(cachedGameInfo as GameInfo)?.currentRound"
-                         :first-card="(cachedGameInfo as GameInfo).currentTrick?.firstCard ?? null"
-                         :trumpsuit="(cachedGameInfo as GameInfo).currentRound!.trumpSuit"/>
+              <GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
+                         :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
+                         :trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
            </div>
          </div>

          <div class="fit row wrap justify-center items-center content-start">
            <div class="mt-4 ml-4 col-3 justify-content-center">
              <div class="d-flex justify-content-center g-3 mb-5">
-                <PlayedCardsC v-if="(cachedGameInfo as GameInfo)?.currentTrick" :trick="(cachedGameInfo as GameInfo).currentTrick!" />
+                <PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
              </div>
            </div>
          </div>
          <div class="q-gutter-sm mt-4 bottom-div justify-content-center row" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
            <div class="flex justify-center col-12">
-              <HandC v-if="(cachedGameInfo as GameInfo)?.hand && (cachedGameInfo as GameInfo)?.self"/>
+              <HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
            </div>
          </div>

@@ -104,17 +77,4 @@ watch(
  text-align: center;
  padding: 10px;
 }
-.full-overlay-blur {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  backdrop-filter: blur(5px);
-  background-color: rgba(0, 0, 0, 0.2);
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
 </style>
--- a/src/components/ingame/HandC.vue
+++ b/src/components/ingame/HandC.vue
@@ -25,8 +25,7 @@ function triggerWiggle(index: number) {
 function handlePlayCard(index: number | null) {
  if (index === null) return

-  wb.sendAndWait("PlayCard", { cardindex: index })
-    .catch((error) => {
+  wb.sendAndWait("PlayCard", { cardindex: index }).catch((error) => {
      triggerWiggle(index)

      $q.notify({
@@ -37,7 +36,14 @@ function handlePlayCard(index: number | null) {

    })
 }
-
+function onBeforeLeave(el: Element) {
+  const element = el as HTMLElement;
+  const { marginLeft, marginTop, width, height } = window.getComputedStyle(element);
+  element.style.left = `${element.offsetLeft - parseFloat(marginLeft)}px`;
+  element.style.top = `${element.offsetTop - parseFloat(marginTop)}px`;
+  element.style.width = width;
+  element.style.height = height;
+}
 function handleSkipDogLife() {
  //TODO: Add some animation or feedback for skipping turn
 }
@@ -52,13 +58,19 @@ function getCardImagePath(cardPath: string) {
 <template>
  <div class="hand-container">
    <div id="card-slide" class="ingame-cards-slide">
-      <div class="cards-row">
+      <transition-group
+        tag="div"
+        class="cards-row"
+        name="card-move"
+        enter-active-class="animate__animated animate__fadeIn"
+        @before-leave="onBeforeLeave"
+        move-class="card-moving">
        <div v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]">
          <div class="card-btn" aria-label="Play card">
            <q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" />
          </div>
        </div>
-      </div>
+      </transition-group>
      <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
        <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
      </div>
@@ -136,4 +148,18 @@ function getCardImagePath(cardPath: string) {
    border-radius: 4px;
  }
 }
+.card-moving {
+  transition: transform 0.5s ease;
+  transition-delay: 1s;
+}
+.card-move-leave-active {
+  position: absolute;
+  transition: all 0.5s ease;
+  pointer-events: none;
+}
+
+.card-move-leave-to {
+  opacity: 0;
+  transform: translateY(-400px);
+}
 </style>
--- a/src/components/ingame/TrumpC.vue
+++ b/src/components/ingame/TrumpC.vue
@@ -1,134 +0,0 @@
-<script setup lang="ts" >
-import {useWebSocket} from "@/composables/useWebsocket.ts";
-import {useIngame} from "@/composables/useIngame.ts";
-import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
-import {useQuasar} from "quasar";
-import { ref } from 'vue';
-
-const wb = useWebSocket()
-const wi = useIngame()
-const trumpInf = wi.data as TrumpInfo
-const trumpSuits = [
-  "/images/cards/AS.png",
-  "/images/cards/AH.png",
-  "/images/cards/AD.png",
-  "/images/cards/AC.png"
-]
-const $q = useQuasar();
-function getCardImagePath(cardPath: string) {
-  if (!cardPath) return ''
-  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
-  return `/${cardPath}`
-}
-function selectTrump(trumpSuitIndex: number) {
-  wb.sendAndWait("PickTrumpsuit", { suitIndex: trumpSuitIndex }).then(
-    $q.notify({
-      message: "You've successfully picked your trumpsuit",
-      color: "positive",
-      position: "top"
-    })
-
-  ).catch((error) => {
-      $q.notify({
-        message: error.message,
-        color: "negative",
-        position: "top"
-      })
-    })
-}
-</script>
-<template>
-    <q-card v-if="trumpInf.chooser?.name === trumpInf.self?.name" class="player-profile-card" flat bordered>
-      <q-card-section class="bg-white text-dark text-center q-py-lg">
-        <div class="text-h3 text-weight-bolder">
-          {{ trumpInf.self?.name || "Loading Player..."}}
-        </div>
-      </q-card-section>
-
-      <q-card-section class="bg-light-green-7 text-dark text-center q-py-lg">
-        <div class="text-h4 text-weight-bolder">
-          <q-icon name="emoji_events" class="q-mr-sm" />
-          You won the last round!
-          <q-icon name="emoji_events" class="q-mr-sm" />
-        </div>
-      </q-card-section>
-
-      <q-card-section class="q-py-md text-center bg-dark">
-        <div class="text-h6 q-mb-sm">Select a trumpsuit</div>
-        <div class="row justify-center q-gutter-sm">
-          <q-card v-for="(path, index) in trumpSuits" :key="index" class="q-pa-xs cursor-pointer trump-card-choice">
-            <q-img
-              :src="getCardImagePath(path)"
-              @click="selectTrump(index)"
-              :alt="path"
-              class="card"
-            />
-          </q-card>
-        </div>
-      </q-card-section>
-
-      <q-separator color="grey-7" style="opacity: 0.9;" />
-
-      <q-card-section class="q-pa-md text-center bg-dark">
-        <div class="text-h6 q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
-        <div class="row wrap justify-center q-gutter-sm">
-
-          <div v-for="card in trumpInf.selfHand?.cards || []" :key="card.idx!" >
-            <q-img
-              :src="getCardImagePath(card.path)"
-              :alt="card.identifier"
-              class="card"
-            />
-          </div>
-
-        </div>
-      </q-card-section>
-    </q-card>
-  <q-card
-    v-else
-    class="player-profile-card text-center"
-    flat
-    bordered
-    style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
-  >
-    <q-card-section class="q-pa-lg">
-      <q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
-      <div class="text-h5 text-grey-8">
-        Waiting for {{ trumpInf.chooser?.name || 'the other player' }} to select the trump suit...
-      </div>
-    </q-card-section>
-
-    <q-separator />
-    <q-card-section class="q-pa-md text-center bg-dark">
-      <div class="text-h6 text-white q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
-      <div class="row wrap justify-center q-gutter-sm">
-
-        <div v-for="card in trumpInf.selfHand?.cards || []" :key="card.idx!" >
-          <q-img
-            :src="getCardImagePath(card.path)"
-            :alt="card.identifier"
-            class="card"
-          />
-        </div>
-
-      </div>
-    </q-card-section>
-
-  </q-card>
-</template>
-
-<style scoped>
-.card {
-  width:120px;
-  border-radius:6px
-}
-.player-profile-card {
-  max-width: 1000px;
-}
-.trump-card-choice {
-  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
-}
-.trump-card-choice:hover {
-  transform: translateY(-8px);
-}
-</style>
--- a/src/components/ingame/TurnC.vue
+++ b/src/components/ingame/TurnC.vue
@@ -5,8 +5,8 @@ import {useIngame} from "@/composables/useIngame.ts";
 import type {GameInfo} from "@/types/GameTypes.ts";

 const ig = useIngame()
-const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
-const queue = computed(() => { return (<GameInfo>ig.data).playerQueue?.queue ?? []})
+const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue.currentPlayer)
+const queue = computed(() => { return (<GameInfo>ig.data).playerQueue.queue ?? []})
 </script>

 <template>
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -33,7 +33,7 @@ ui.requestState().then(() => {

 <template>
  <div class="lobby-background">
-    <Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/>
+    <Ingame v-if="state === 'InGame'"/>
    <lobby-component v-if="state === 'Lobby'"/>
  </div>
 </template>
--- a/versions.env
+++ b/versions.env
@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=13
+MINOR=14
 PATCH=0