KnockOutWhist-Frontend/src/components/ingame/TrumpC.vue

<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>