56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<script lang="ts" setup>
|
|
import type {Card} from "@/types/GameSubTypes.ts";
|
|
import {computed, toRefs} from "vue";
|
|
|
|
const props = defineProps<{
|
|
trumpsuit: Card
|
|
firstCard: Card | null
|
|
}>()
|
|
const {trumpsuit, firstCard} = toRefs(props)
|
|
|
|
|
|
|
|
const trumpName = computed(() => {
|
|
switch (trumpsuit.value.identifier.charAt(1) as string) {
|
|
case 'S':
|
|
return 'Spades'
|
|
case 'H':
|
|
return 'Hearts'
|
|
case 'D':
|
|
return 'Diamonds'
|
|
case 'C':
|
|
return 'Clubs'
|
|
default:
|
|
return 'Unknown'
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="q-mb-sm">
|
|
<div class="text-h6 q-mb-xs q-font-medium">Trumpsuit</div>
|
|
<div id="trumpsuit" class="text-h5 text-primary">{{ trumpName }}</div>
|
|
</div>
|
|
|
|
<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 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;"/>
|
|
<q-img v-else src="/images/cards/1B.png" alt="First Card" class="firstbox"
|
|
style="width: 80px; border-radius: 6px;"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.firstbox {
|
|
width: 80px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|