51 lines
No EOL
1.6 KiB
Vue
51 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<Modal :is-active="isActive" @close-request="isActive = false">
|
|
<div v-if="game.state.phase === 'end'" class="p-10 text-center">
|
|
<div class="h-11 transform -translate-y-35 opacity-90 text-40">
|
|
<CrownIcon v-if="singleWinner !== null"/>
|
|
<HandshakeIcon v-else/>
|
|
</div>
|
|
<div class="font-fat text-6xl">
|
|
{{ singleWinner?.name ?? "Draw" }}
|
|
</div>
|
|
<div class="text-3xl pt-5 font-bold">
|
|
<template v-if="singleWinner !== null">
|
|
wins with
|
|
<span class="text-green-500">{{ getNumberCardsSum(singleWinner.numberCards) }}</span>
|
|
point{{ getNumberCardsSum(singleWinner.numberCards) === 1 ? "" : "s" }}.
|
|
</template>
|
|
<template v-else>
|
|
between {{ naturallyJoinEnumeration(game.state.winnerIds.map(id => game.state.players.find(p => p.id === id).name)) }}
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from "vue"
|
|
import { useGame, useGameActionNotification } from "../clientGame"
|
|
import Modal from "./Modal.vue"
|
|
import CrownIcon from "virtual:icons/ph/crown-simple-duotone"
|
|
import HandshakeIcon from "virtual:icons/ph/handshake-duotone"
|
|
import { getNumberCardsSum } from "../../shared/game/state"
|
|
import { naturallyJoinEnumeration } from "../../shared/util"
|
|
|
|
const game = useGame()
|
|
const isActive = ref(false)
|
|
|
|
const singleWinner = computed(() => {
|
|
const winnerIds = game.state.winnerIds
|
|
return winnerIds?.length === 1 ? game.state.players.find(p => p.id === winnerIds[0])! : null
|
|
})
|
|
|
|
useGameActionNotification(action => {
|
|
if (action.type === "end") {
|
|
isActive.value = true
|
|
}
|
|
})
|
|
</script> |