48 lines
No EOL
1.4 KiB
Vue
48 lines
No EOL
1.4 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="isUsable"
|
|
:tags="ownerId === undefined ? [] : [{ label: `Owned by ${game.state.players.find(p => p.id === ownerId).name}`, icon: UserIcon }]"
|
|
:disabled="!game.isYourTurn"
|
|
@click="use()"
|
|
>
|
|
<div class="flex justify-center items-center text-5xl opacity-90 flex-grow relative top-1">
|
|
<component :is="specialCardIcons[id]"/>
|
|
</div>
|
|
<div class="px-3 pb-2 text-sm flex items-end flex-grow">
|
|
<div class="text-center">
|
|
{{ 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 { specialCardIcons } from "../icons"
|
|
import { specialCardsMeta } from "../../shared/game/cards"
|
|
import { computed } from "vue"
|
|
import { useGame } from "../clientGame"
|
|
import { useThrottleFn } from "@vueuse/core"
|
|
import UserIcon from "virtual:icons/ph/user-bold"
|
|
|
|
const props = defineProps<{
|
|
id: SpecialCardId
|
|
isUsable?: boolean
|
|
ownerId?: string
|
|
}>()
|
|
|
|
const game = useGame()
|
|
const meta_ = computed(() => specialCardsMeta[props.id])
|
|
|
|
const use = useThrottleFn(() => {
|
|
if (!props.isUsable) return
|
|
game.useSpecialCard(props.id)
|
|
}, 1000)
|
|
</script> |