From ecb38510de53b811eaaee2a39fc1ae423aed71c6 Mon Sep 17 00:00:00 2001
From: Janis <janis.e.20@gmx.de>
Date: Wed, 10 Dec 2025 15:10:54 +0100
Subject: [PATCH] feat: FRO-21 Create Turn Component (#13)

Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/13
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/Turn.vue | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/ingame/Turn.vue

diff --git a/src/components/ingame/Turn.vue b/src/components/ingame/Turn.vue
new file mode 100644
index 0000000..12f4478
--- /dev/null
+++ b/src/components/ingame/Turn.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {PlayerQueue} from "@/types/GameSubTypes.ts";
+
+const props = defineProps<{
+  queue: PlayerQueue
+}>()
+
+const safeNextPlayers = computed(() => props.queue.players ?? [])
+</script>
+
+<template>
+  <q-card flat class="turn-tracker-container q-pa-md">
+    <q-card-section>
+      <div class="text-subtitle2 q-mb-xs">Current Player</div>
+      <div id="current-player-name" class="text-h6 text-weight-bold text-positive">{{
+          props.queue.currentPlayer?.name
+        }}</div>
+
+      <div v-if="safeNextPlayers.length > 0" class="q-mt-md">
+        <div id="next-players-text" class="text-subtitle2 q-mb-xs">Next Players</div>
+        <q-list id="next-players-container" dense>
+          <q-item v-for="player in safeNextPlayers" :key="player.id">
+            <q-item-section>
+              <div class="text-body1 text-primary">{{ player.name }}</div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped>
+.turn-tracker-container {
+  max-width: 320px;
+}
+</style>