From 97a9f857586eb41feb056d7af0a5d8553d2bcf80 Mon Sep 17 00:00:00 2001
From: Janis <janis.e.20@gmx.de>
Date: Wed, 10 Dec 2025 14:16:14 +0100
Subject: [PATCH] feat: FRO-20 Create scoreboard component (#12)

Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/12
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>
---
 src/components/ingame/Scoreboard.vue | 69 ++++++++++++++++++++++++++++
 src/types/GameSubTypes.ts            |  1 +
 2 files changed, 70 insertions(+)
 create mode 100644 src/components/ingame/Scoreboard.vue

diff --git a/src/components/ingame/Scoreboard.vue b/src/components/ingame/Scoreboard.vue
new file mode 100644
index 0000000..1bff232
--- /dev/null
+++ b/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>
diff --git a/src/types/GameSubTypes.ts b/src/types/GameSubTypes.ts
index be51be6..b8e2f9d 100644
--- a/src/types/GameSubTypes.ts
+++ b/src/types/GameSubTypes.ts
@@ -28,6 +28,7 @@ type PodiumPlayer = {
 
 type Round = {
   trumpSuit: Card
+  playersIn: Player[]
   firstRound: boolean
   trickList: Trick[]
 }