From 21db939d342c72f5ad5fad3b4f873e902d1e5a0f Mon Sep 17 00:00:00 2001
From: Janis <janis.e.20@gmx.de>
Date: Wed, 10 Dec 2025 16:46:34 +0100
Subject: [PATCH] feat: FRO-24 Create Played Cards Component (#17)

Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/17
Reviewed-by: lq64 <lq@blackhole.local>
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>
---
 src/components/ingame/PlayedCards.vue | 43 +++++++++++++++++++++++++++
 src/types/GameSubTypes.ts             |  2 +-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ingame/PlayedCards.vue

diff --git a/src/components/ingame/PlayedCards.vue b/src/components/ingame/PlayedCards.vue
new file mode 100644
index 0000000..027ca69
--- /dev/null
+++ b/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>
diff --git a/src/types/GameSubTypes.ts b/src/types/GameSubTypes.ts
index 4ad4626..378da40 100644
--- a/src/types/GameSubTypes.ts
+++ b/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
 }