80 lines
No EOL
2.3 KiB
Vue
80 lines
No EOL
2.3 KiB
Vue
<template>
|
|
<div class="flex <md:flex-col gap-15 justify-center">
|
|
<div>
|
|
<div class="font-bold text-lg pb-2 pl-2">Active special cards</div>
|
|
<div class="p-4 border border-dark-200 rounded-xl flex flex-col gap-5 flex-wrap w-full">
|
|
<div
|
|
v-if="game.state.activeSpecialCards.length === 0"
|
|
class="font-fat opacity-40 text-xl w-50 flex p-2"
|
|
>
|
|
<span>There are none.</span>
|
|
</div>
|
|
<SpecialCard
|
|
v-for="card in game.state.activeSpecialCards"
|
|
:key="card.id"
|
|
:id="card.id"
|
|
:owner-id="card.ownerId"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-14 max-w-1200px flex-grow <md:pl-3 pb-5">
|
|
<PlayerCards v-for="playerId in reorderedPlayerIds" :key="playerId" :player-id="playerId"/>
|
|
<div class="flex gap-5 justify-end items-center transform transition ease duration-500">
|
|
<template v-if="game.state.phase === 'end'">
|
|
<BigButton
|
|
class="bg-gradient-to-br from-green-700 to-green-800"
|
|
v-if="game.isOwnGame"
|
|
@click="game.newRound()"
|
|
>
|
|
New round
|
|
</BigButton>
|
|
</template>
|
|
<template v-else>
|
|
<div class="font-fat opacity-20 text-3xl pr-2">
|
|
<template v-if="game.isBust">You are bust.</template>
|
|
</div>
|
|
<BigButton
|
|
class="bg-gradient-to-br from-red-800 to-red-900 uppercase"
|
|
:disabled="!game.isYourTurn || !game.mayHit"
|
|
@click="game.hit()"
|
|
>
|
|
Hit
|
|
</BigButton>
|
|
<BigButton
|
|
class="bg-gradient-to-br from-blue-800 to-blue-900 uppercase"
|
|
:disabled="!game.isYourTurn || game.isForcedToHit"
|
|
@click="game.stay()"
|
|
>
|
|
Stay
|
|
</BigButton>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<GameEndModal/>
|
|
</div>
|
|
</template>
|
|
|
|
<style module lang="scss">
|
|
|
|
</style>
|
|
|
|
<script setup lang="ts">
|
|
import { useGame } from "../clientGame"
|
|
import PlayerCards from "./PlayerCards.vue"
|
|
import BigButton from "./BigButton.vue"
|
|
import { computed } from "vue"
|
|
import { useAuth } from "../auth"
|
|
import GameEndModal from "./GameEndModal.vue"
|
|
import SpecialCard from "./SpecialCard.vue"
|
|
|
|
const game = useGame()
|
|
const auth = useAuth()
|
|
|
|
const reorderedPlayerIds = computed(() => {
|
|
const ids = game.state.players.map(p => p.id)
|
|
const selfIndex = ids.findIndex(id => id === auth.requiredUser.id)
|
|
let front = ids.slice(0, selfIndex + 1)
|
|
let back = ids.slice(selfIndex + 1)
|
|
return [...back, ...front]
|
|
})
|
|
</script> |