46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<template>
|
|
<v-container>
|
|
<v-row :class="closeClass">
|
|
<v-sheet v-if="props.dealer && stats.cuffs" class="mr-4 text-button" :elevation="2">CUFFED</v-sheet>
|
|
<PlayerHP :hp="props.stats.hp" />
|
|
<v-sheet v-if="!props.dealer && stats.cuffs" class="ml-4 text-button" :elevation="2">CUFFED</v-sheet>
|
|
</v-row>
|
|
<v-row class="d-flex flex-fill">
|
|
<v-col v-if="!props.dealer" cols="4"></v-col>
|
|
<v-col cols="8">
|
|
<PlayerItems :items="props.stats.items" :disabled="props.disabled" @item="(evt: number) => emit('item', evt)" />
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { Player } from '@/lib/game';
|
|
|
|
export interface Props {
|
|
/**
|
|
* The status of the player to show.
|
|
*/
|
|
stats: Player;
|
|
/**
|
|
* Whether this is the dealer's side, for alignment.
|
|
*/
|
|
dealer: boolean;
|
|
/**
|
|
* Whether the controls are disabled.
|
|
*/
|
|
disabled: boolean;
|
|
}
|
|
|
|
export interface Emits {
|
|
(e: 'item', k: number): void;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const closeClass = computed(() => ({ 'd-flex': true, 'justify-end': props.dealer, 'justify-start': !props.dealer }));
|
|
const farClass = computed(() => ({ 'd-flex': true, 'justify-end': !props.dealer, 'justify-start': props.dealer }));
|
|
</script>
|