<template>
    <v-container>
        <v-row :class="closeClass">
            <PlayerHP :hp="props.stats.hp" />
        </v-row>
        <v-row>
            <v-col cols="4"></v-col>
            <v-col cols="8">
                <PlayerItems :items="props.stats.items" />
            </v-col>
        </v-row>
    </v-container>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { Player } from '@/lib/game';

export interface Props {
    stats: Player
    dealer: boolean
}

const props = defineProps<Props>();

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>
