feat(ui): FRO-34 Lobby (#21)

Started with Lobby Component

Co-authored-by: LQ63 <lkhermann@web.de>
Co-authored-by: Janis <janis-e@gmx.de>
Reviewed-on: #21
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

src/components/ingame/GameInfoC.vue

@@ -11,7 +11,7 @@ const {trumpsuit, firstCard} = toRefs(props)
 
 
 const trumpName = computed(() => {
-  switch (trumpsuit.value.path.charAt(trumpsuit.value.path.length - 1)) {
+  switch (trumpsuit.value.identifier.charAt(1) as string) {
     case 'S':
       return 'Spades'
     case 'H':
@@ -36,14 +36,12 @@ const trumpName = computed(() => {
 
     <div class="q-mt-md">
       <div class="text-subtitle1 q-mb-xs q-font-medium">First Card</div>
-      <div id="first-card-container" class="q-pa-sm bg-grey-2 rounded shadow-2"
+      <div id="first-card-container" class="q-pa-sm rounded shadow-2"
            style="display:inline-block;">
         <q-img v-if="firstCard" :src="firstCard.path" alt="First Card" class="firstbox"
                style="width: 80px; border-radius: 6px;"/>
-        <div v-else class="q-pa-sm"
-             style="width: 80px; height: 120px; display:flex; align-items:center; justify-content:center; border-radius:6px; background: #ffffff; color: #666;">
-          No image
-        </div>
+        <q-img v-else src="/images/cards/1B.png" alt="First Card" class="firstbox"
+               style="width: 80px; border-radius: 6px;"/>
       </div>
     </div>
   </div>

src/components/ingame/HandC.vue

@@ -1,42 +1,40 @@
 <script lang="ts" setup>
-import {toRefs} from 'vue'
-import type {Hand, Player} from "@/types/GameSubTypes.ts";
 import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo} from "@/types/GameTypes.ts";
+import {useQuasar} from "quasar";
+import { ref } from 'vue';
 
 const wb = useWebSocket()
+const wi = useIngame()
+const $q = useQuasar();
 
-const props = defineProps<{
-  hand: Hand
-  isHandInactive?: boolean
-  self: Player | null
-}>()
+const wiggleIdx = ref<number | null>(null)
+let wiggleTimer: ReturnType<typeof setTimeout> | null = null
 
-const { hand, isHandInactive, self } = toRefs(props)
+function triggerWiggle(index: number) {
+  // clear previous timer if any
+  if (wiggleTimer) clearTimeout(wiggleTimer)
+  wiggleIdx.value = index
+  wiggleTimer = setTimeout(() => {
+    wiggleIdx.value = null
+    wiggleTimer = null
+  }, 700)
+}
 
-function handlePlayCard(element: any, index: number | null) {
+function handlePlayCard(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;
+    .catch((error) => {
+      triggerWiggle(index)
+
+      $q.notify({
+        message: error.message,
+        color: "negative",
+        position: "top"
+      })
+
     })
 }
 
@@ -52,16 +50,16 @@ function getCardImagePath(cardPath: string) {
 </script>
 
 <template>
-  <div class="bottom-div hand-container">
-    <div id="card-slide" :class="'ingame-cards-slide ' + (isHandInactive ? 'inactive' : '' )">
+  <div class="hand-container">
+    <div id="card-slide" class="ingame-cards-slide">
       <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 v-for="card in (<GameInfo>wi.data)?.hand?.cards" :key="card.identifier" :class="['handcard', { wiggle: wiggleIdx === card.idx }]">
+          <div class="card-btn" aria-label="Play card">
+            <q-img :src="getCardImagePath(card.path)" v-on:click="handlePlayCard(card.idx)" :alt="card.identifier" class="card" />
           </div>
         </div>
       </div>
-      <div v-if="self?.dogLife" class="dog-actions">
+      <div v-if="(<GameInfo>wi.data)?.self?.dogLife" class="dog-actions">
         <q-btn color="negative" label="Skip Turn" @click="handleSkipDogLife" />
       </div>
     </div>
@@ -119,6 +117,18 @@ function getCardImagePath(cardPath: string) {
   width:120px;
   border-radius:6px
 }
+.wiggle {
+  animation: wiggle 700ms ease-in-out;
+}
+
+@keyframes wiggle {
+  0% { transform: translateY(0) rotate(0deg); }
+  15% { transform: translateY(-8px) rotate(-6deg); }
+  35% { transform: translateY(0) rotate(6deg); }
+  55% { transform: translateY(-4px) rotate(-3deg); }
+  75% { transform: translateY(0) rotate(2deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
 
 @media (max-height: 500px) {
   .card {

src/components/ingame/PlayedCardsC.vue

@@ -6,12 +6,15 @@ const props = defineProps<{ trick: Trick }>()
 const {trick } = toRefs(props)
 
 const playedCards = computed(() => {
-  return [...trick.value.cards].map(card => {
-    return {
-      cardId: card[1].path,
-      player: card[0].name
-    }
-  })
+  if (!trick.value) return []
+  let result: { cardId: string, player: string }[] = []
+  for (const key in trick.value.cards) {
+    result.push({
+      cardId: trick.value.cards[key]?.path ?? '',
+      player: key
+    })
+  }
+  return result;
 })
 
 function getCardImagePath(cardPath: string) {

src/components/ingame/ScoreboardC.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import type {Round} from "@/types/GameSubTypes.ts";
+import {computed, type ComputedRef} from "vue";
 
 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
-  }
+const playerScores: ComputedRef<PlayerScore[]> = computed(() => {
+  return props.currentRound.playersIn.map(player => {
+    return {
+      name: player.name,
+      tricks: props.currentRound.trickList.filter(trick => {
+        return trick.winner?.id === player.id
+      }).length
+    }
+  })
 })
 </script>
 

src/components/ingame/TurnC.vue

@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import {computed, toRefs} from 'vue'
 import type {PlayerQueue} from "@/types/GameSubTypes.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo} from "@/types/GameTypes.ts";
 
-const props = defineProps<{
-  queue: PlayerQueue
-}>()
-
-const safeNextPlayers = computed(() => props.queue.players ?? [])
+const ig = useIngame()
+const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue.currentPlayer)
+const queue = computed(() => { return (<GameInfo>ig.data).playerQueue.queue ?? []})
 </script>
 
 <template>
-  <q-card flat class="turn-tracker-container q-pa-md">
+  <q-card flat class="turn-tracker-container q-pa-md no-background">
     <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
+          currentPlayer?.name
         }}</div>
 
-      <div v-if="safeNextPlayers.length > 0" class="q-mt-md">
+      <div v-if="queue.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 v-for="player in queue" :key="player.id">
             <q-item-section>
               <div class="text-body1 text-primary">{{ player.name }}</div>
             </q-item-section>
@@ -35,4 +35,7 @@ const safeNextPlayers = computed(() => props.queue.players ?? [])
 .turn-tracker-container {
   max-width: 320px;
 }
+.no-background {
+  background: none !important;
+}
 </style>