46 lines
No EOL
1.2 KiB
Vue
46 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<Card
|
|
class="bg-gradient-to-br w-50 h-32"
|
|
:class="meta_.type === 'permanent' ? 'from-green-800 to-green-900' : 'from-blue-700 to-blue-800'"
|
|
as-button
|
|
:tags="[{ label: `${count}x`, icon: numberCircleIcons[count] }]"
|
|
:disabled="!game.isYourTurn"
|
|
@click="use()"
|
|
>
|
|
<div class="flex justify-center items-center text-5xl opacity-90 flex-grow">
|
|
<component :is="specialCardIcons[id]"/>
|
|
</div>
|
|
<div class="px-3 pb-2 text-sm flex items-end flex-grow">
|
|
<div>
|
|
{{ meta_.description }}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import Card from "./Card.vue"
|
|
import type { SpecialCardId } from "../shared/game/cards"
|
|
import { numberCircleIcons, specialCardIcons } from "../icons"
|
|
import { specialCardsMeta } from "../shared/game/cards"
|
|
import { computed } from "vue"
|
|
import { useGame } from "../clientGame"
|
|
import { useThrottleFn } from "@vueuse/core"
|
|
|
|
const props = defineProps<{
|
|
id: SpecialCardId
|
|
count: number
|
|
}>()
|
|
|
|
const game = useGame()
|
|
|
|
const meta_ = computed(() => specialCardsMeta[props.id])
|
|
|
|
const use = useThrottleFn(() => {
|
|
game.useSpecialCard(props.id)
|
|
}, 1000)
|
|
</script> |