lq64
39898ed03b
Force push of Janis ingame changes Co-authored-by: Janis <janis.e.20@gmx.de> Reviewed-on: #20
44 lines
1.3 KiB
Vue
44 lines
1.3 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(() => {
|
|
return [...trick.value.cards].map(card => {
|
|
return {
|
|
cardId: card[1].path,
|
|
player: card[0].name
|
|
}
|
|
})
|
|
})
|
|
|
|
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>
|