72 lines
No EOL
2.2 KiB
Vue
72 lines
No EOL
2.2 KiB
Vue
<template>
|
||
<div class="flex flex-col gap-6">
|
||
<div class="font-fat text-2xl relative">
|
||
{{ playerState.name }}
|
||
<template v-if="isYou">(You)</template>
|
||
<span
|
||
class="text-3xl absolute -top-0.5 -left-11 transition"
|
||
:class="game.state.winnerIds?.includes(playerState.id) ? '' : 'opacity-0'"
|
||
>
|
||
<CrownIcon/>
|
||
</span>
|
||
<span
|
||
class="text-2xl absolute top-0.5 -left-10 transition"
|
||
:class="game.state.phase !== 'end' && game.state.activePlayerId === playerState.id ? '' : 'opacity-0'"
|
||
>
|
||
<DotsThreeOutlineIcon/>
|
||
</span>
|
||
</div>
|
||
<div class="flex items-center gap-5 w-full flex-wrap">
|
||
<NumberCard
|
||
v-for="(card, index) in playerState.numberCards"
|
||
:key="[index, card.number].join('-')"
|
||
:number="card.number"
|
||
:is-covert="card.isCovert"
|
||
:is-own="isYou"
|
||
/>
|
||
</div>
|
||
<div v-if="isYou" class="py-4 border border-dark-200 rounded-xl flex gap-5 flex-wrap w-full">
|
||
<div
|
||
v-if="playerState.specialCards.length === 0"
|
||
class="font-fat opacity-40 text-2xl h-32 flex px-4 py-5"
|
||
>
|
||
<span>You don’t have any special cards.</span>
|
||
</div>
|
||
<SpecialCard
|
||
v-for="id in playerState.specialCards"
|
||
:key="id"
|
||
:id="id"
|
||
is-usable
|
||
/>
|
||
</div>
|
||
<div class="font-fat opacity-30 text-3xl">
|
||
{{ getNumberCardsSum(playerState.numberCards) }}
|
||
<template v-if="!isYou && game.state.phase !== 'end' && playerState.numberCards.some(c => c.isCovert)">+ ?</template>
|
||
/ {{ game.state.targetSum }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style module lang="scss">
|
||
|
||
</style>
|
||
|
||
<script setup lang="ts">
|
||
import { useGame } from "../clientGame"
|
||
import { computed } from "vue"
|
||
import NumberCard from "./NumberCard.vue"
|
||
import { useAuth } from "../auth"
|
||
import { getNumberCardsSum } from "../../shared/game/state"
|
||
import CrownIcon from "virtual:icons/ph/crown-simple-bold"
|
||
import DotsThreeOutlineIcon from "virtual:icons/ph/dots-three-outline"
|
||
import SpecialCard from "./SpecialCard.vue"
|
||
|
||
const props = defineProps<{
|
||
playerId: string
|
||
}>()
|
||
|
||
const game = useGame()
|
||
const auth = useAuth()
|
||
const playerState = computed(() => game.state.players.find(p => p.id === props.playerId)!)
|
||
const isYou = computed(() => playerState.value.id === auth.requiredUser.id)
|
||
</script> |