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

<script lang="ts" setup>
import {toRefs} from 'vue'
import type {Hand, Player} from "@/types/GameSubTypes.ts";
import {useWebSocket} from "@/composables/useWebsocket.ts";

const wb = useWebSocket()

const props = defineProps<{
  hand: Hand
  isHandInactive?: boolean
  self: Player | null
}>()

const { hand, isHandInactive, self } = toRefs(props)

function handlePlayCard(element: any, index: number | null) {
  if (index === null) return
  if (isHandInactive?.value) return
  isHandInactive.value = true

  const wiggleKeyframes = [
    { transform: 'translateX(0)' },
    { transform: 'translateX(-5px)' },
    { transform: 'translateX(5px)' },
    { transform: 'translateX(-5px)' },
    { transform: 'translateX(0)' }
  ];

  const wiggleTiming = {
    duration: 400,
    iterations: 1,
    easing: 'ease-in-out',
    fill: 'forwards'
  };

  wb.sendAndWait("PlayCard", { cardindex: index })
    .catch(() => {
      element.animate(wiggleKeyframes, wiggleTiming);
      isHandInactive.value = false;
    })
}

function handleSkipDogLife() {
  //TODO: Add some animation or feedback for skipping turn
}

function getCardImagePath(cardPath: string) {
  if (!cardPath) return ''
  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
  return `/${cardPath}`
}
</script>

<template>
  <div class="bottom-div hand-container">
    <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
      <div class="cards-row">
        <div v-for="card in hand.cards" :key="card.identifier" class="handcard">
          <div class="card-btn" @click="handlePlayCard(this, card.idx)" aria-label="Play card">
            <q-img :src="getCardImagePath(card.path)" :alt="card.identifier" class="card" />
          </div>
        </div>
      </div>
      <div v-if="self?.dogLife" class="dog-actions">
        <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.bottom-div {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1400px;
  width: 100%;
  margin: 0;
  text-align: center;
  padding: 10px;
}
.hand-container {
  margin-left: 0;
  margin-right: 0;
}
.ingame-cards-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cards-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
}
.handcard {
  border-radius: 6px;
}
.card-btn {
  padding: 0;
  min-width: 0;
  border-radius: 6px;
}
.inactive {
  opacity: 0.6;
  pointer-events: none;
}
.dog-actions {
  margin-top: 8px;
}
.handcard :hover {
  box-shadow: 3px 3px 3px #000000;
}
.card {
  width:120px;
  border-radius:6px
}

@media (max-height: 500px) {
  .card {
    width: 80px;
    border-radius: 4px;
  }
}
</style>