From 6c914b1421030897d47449087dd1694068e84436 Mon Sep 17 00:00:00 2001
From: lq64 <lq@blackhole.local>
Date: Tue, 13 Jan 2026 14:33:35 +0100
Subject: [PATCH] feat(ui): Tie selection (#26)

Added a minimal ui for the tie selection. Tie selection gets sent to the server via websocket and gets response from it.

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/pulls/26
---
 src/components/Ingame.vue      | 17 ++++++
 src/components/ingame/TieC.vue | 98 ++++++++++++++++++++++++++++++++++
 src/views/Game.vue             |  2 +-
 3 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ingame/TieC.vue

diff --git a/src/components/Ingame.vue b/src/components/Ingame.vue
index 72fbdcc..93db660 100644
--- a/src/components/Ingame.vue
+++ b/src/components/Ingame.vue
@@ -10,6 +10,7 @@ import TurnC from "@/components/ingame/TurnC.vue";
 import TrumpC from "@/components/ingame/TrumpC.vue";
 import {storeToRefs} from "pinia";
 import {ref, toRefs, watch} from "vue";
+import TieC from "@/components/ingame/TieC.vue";
 
 const ig = useIngame()
 const { state } = toRefs(ig)
@@ -45,6 +46,22 @@ watch(
               <TrumpC />
             </div>
           </transition>
+
+
+          <transition
+            appear
+            enter-active-class="animate__animated animate__fadeInDown"
+            leave-active-class="animate__animated animate__fadeOutDown"
+          >
+            <div
+              v-if="state === 'TieBreak'"
+              class="full-overlay-blur"
+              style="z-index: 2000;"
+            >
+              <TieC />
+            </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!"/>
diff --git a/src/components/ingame/TieC.vue b/src/components/ingame/TieC.vue
new file mode 100644
index 0000000..873c33e
--- /dev/null
+++ b/src/components/ingame/TieC.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, LobbyInfo, TieInfo, TrumpInfo} from "@/types/GameTypes.ts";
+import {useQuasar} from "quasar";
+import { ref } from 'vue';
+import { computed } from 'vue'
+
+const wb = useWebSocket()
+const wi = useIngame()
+const tieInf = computed(() => wi.data as TieInfo)
+const tieBlankCard = [
+  "/images/cards/AS.png"
+]
+const $q = useQuasar();
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+function selectTie(tieIndex: number) {
+  wb.sendAndWait("PickTie", { cardIndex: tieIndex }).then(
+    $q.notify({
+      message: "You've successfully picked your tieCard",
+      color: "positive",
+      position: "top"
+    })
+
+  ).catch((error) => {
+    $q.notify({
+      message: error.message,
+      color: "negative",
+      position: "top"
+    })
+  })
+}
+const model = ref(1)
+const options = computed(() => {
+  const list = []
+  const max = tieInf.value.highestAmount?.valueOf() || 0
+  for (let i = 1; i <= max; i++) {
+    list.push(i)
+  }
+  return list
+})
+
+</script>
+
+<template>
+  <q-card v-if="tieInf.self?.name === tieInf.currentPlayer?.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">
+        {{ tieInf.self?.name || "Loading Player..."}}
+      </div>
+    </q-card-section>
+    <q-card-section class="bg-dark text-dark text-center q-py-lg">
+      <div class="q-pa-md" style="max-width: 500px">
+        <div class="q-gutter-md">
+          <q-select
+            v-model="model"
+            :options="options"
+            label="Select Amount"
+            filled
+            bg-color="white"
+            label-color="primary"
+            color="primary"
+            popup-content-class="bg-white text-black"
+          />
+          <q-btn
+            color="positive"
+            icon="sports_martial_arts"
+            @click="selectTie(model)"
+            class="full-width"
+          />
+        </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 {{ tieInf.currentPlayer?.name || 'the other player' }} to select card for the tie...
+      </div>
+    </q-card-section>
+  </q-card>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 757562f..663301d 100644
--- 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' || state === 'SelectTrump' || state === 'TieBreak'"/>
     <lobby-component v-if="state === 'Lobby'"/>
   </div>
 </template>