lq64
bb6355d9ed
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>
47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import {computed, defineProps, toRefs} from 'vue'
|
|
import type {Trick} from "@/types/GameSubTypes.ts";
|
|
const props = defineProps<{ trick: Trick }>()
|
|
|
|
const {trick } = toRefs(props)
|
|
|
|
const playedCards = computed(() => {
|
|
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) {
|
|
if (!cardPath) return ''
|
|
if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
|
|
return `/${cardPath}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row items-center justify-center q-gutter-sm" id="trick-cards-content">
|
|
<div v-for="(play, index) in playedCards" :key="index" class="col-auto">
|
|
<q-card flat class="bg-transparent trick-card" style="width: 7rem; backdrop-filter: blur(4px);">
|
|
<q-card-section class="q-pa-sm q-pb-xs">
|
|
<q-img :src="getCardImagePath(play.cardId)" alt="card" style="border-radius: 6px; width:100%" />
|
|
</q-card-section>
|
|
<q-card-section class="q-pa-sm q-pt-xs text-center bg-transparent">
|
|
<div class="text-subtitle2 text-grey-7">{{ play.player }}</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.trick-card {
|
|
box-shadow: 0 1px 6px rgba(0,0,0,0.08);
|
|
}
|
|
</style>
|