46 lines
No EOL
1.2 KiB
Vue
46 lines
No EOL
1.2 KiB
Vue
<template>
|
||
<Card
|
||
class="w-35 h-45"
|
||
:class="isUnknown ? 'bg-gradient-to-br from-gray-700 to-gray-800' : 'bg-gradient-to-br from-yellow-600 to-yellow-900'"
|
||
:tags="tags"
|
||
>
|
||
<div class="font-fat text-white relative bottom-1 text-shadow-xl" :class="[isUnknown ? 'text-8xl' : 'text-7xl']">
|
||
{{ isUnknown ? "?" : number }}
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<style module lang="scss">
|
||
|
||
</style>
|
||
|
||
<script setup lang="ts">
|
||
import Card from "./Card.vue"
|
||
import { computed, FunctionalComponent } from "vue"
|
||
import EyeSlashIcon from "virtual:icons/ph/eye-slash"
|
||
import { useGame } from "../clientGame"
|
||
|
||
const props = defineProps<{
|
||
number: number
|
||
isCovert: boolean
|
||
isOwn: boolean
|
||
}>()
|
||
|
||
const game = useGame()
|
||
|
||
const isUnknown = computed(() => props.number === 0)
|
||
const tags = computed(() => {
|
||
const tags: Array<{ icon: FunctionalComponent; label: string }> = []
|
||
|
||
if (props.isCovert && !isUnknown.value) {
|
||
tags.push({
|
||
icon: EyeSlashIcon,
|
||
label: game.state.phase === 'end' && !props.isOwn
|
||
? "You couldn’t see the number on this card during the game"
|
||
: "The other players can’t see the number on this card"
|
||
})
|
||
}
|
||
|
||
return tags
|
||
})
|
||
</script> |