front/components/PlayerSlot.vue

<script setup lang="ts">
import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
import type { Card } from '~/netcode/Card';
import type { Player } from '~/netcode/Player';
import { CardEffects } from '@/netcode/Effect'
import { CardType } from '~/netcode/Card';

export interface Props {
    player: Player
}
const props = defineProps<Props>()

const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)

const discard_unwrapped = ref(false)



</script>

<template>
    <div :class="'player ' + (isTurn ? 'turn' : '')">
        <button @click="heal" v-if="props.player.team == goStore.self?.team"
            :disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
            Heal
        </button>
        <button @click="damage_team(props.player.team)" v-if="props.player.team != goStore.self?.team"
            :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
            Damage
        </button>
        <button v-if="props.player.team != goStore.self?.team"
            @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
            :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
            make Discard</button>

        <div id="turn_data">
            <div class="turn_icon">
                <img src="/images/champion-shield.png" />
                <span class="turn_icon_number">
                    {{ props.player.team.health }}
                </span>
            </div>
            <div class="turn_icon">
                <img src="/images/heal.png" />
                <span class="turn_icon_number">
                    {{ props.player.turn.heal_reserve }}
                </span>
            </div>
            <div class="turn_icon">
                <img src="/images/damage.png" />
                <span class="turn_icon_number">
                    {{ props.player.turn.damage_reserve }}
                </span>
            </div>
            <div class="turn_icon">
                <img src="/images/gold.png" />
                <span class="turn_icon_number">
                    {{ props.player.turn.gold_reserve }}
                </span>
            </div>
            <span>discard_markers = {{ props.player.turn.discard_markers }} </span>
        </div>

        <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
                <button v-if="e" @click="useEffect(e)" :disabled="!e.usable">
                    {{ e.effect + ' ' + e.effect_type }}
                </button>

            </div></span>
        <br>
        username = <b>{{ props.player.username }}</b>
        <br>

        hand =
        <div class="cards_container">
            <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
                <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
                <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
                    @click="discard(c)">DISCARD</button>
            </CardPreview>
        </div>
        <button v-if="isSelf && isTurn && props.player.hand.length > 1"
            @click="playAllCards(props.player.hand as Card[])">PLAY
            ALL</button>
        <br>
        board =
        <div class="cards_container">
            <CardPreview :data="c" v-for="  c   in   props.player.board  " @click="lockCard(c)"
                :locked="c.uuid in props.player.turn.cards_locked">
                <button v-if="isSelf && isTurn && props.player.turn.discard_markers > 0"
                    @click="discard(c)">DISCARD</button>
                <button v-if="isSelf && isTurn && props.player.turn.discard_markers == 0" @click="lockCard(c)"
                    :disabled="c.uuid in props.player.turn.cards_locked">
                    LOCK
                </button>
                <button
                    v-if="isSelf && isTurn && props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
                    :disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>


                <div>{{ c.health_as_champion }}</div>
                <button
                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && (c.health_as_champion ?? 0) > 0"
                    :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
                    @click="damage_champion(c)">DAMAGE</button>
                <button
                    v-if="!isSelf && !isTurn && goStore.self?.team == goStore.game?.current_turn && goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.STUN) && e.usable) && (c.health_as_champion ?? 0) > 0"
                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STUN) && e.usable)!, c)">STUN</button>
            </CardPreview>
        </div>

        <div class="stack_and_discard">
            <CardSlot :stack="props.player.stack_pile">
                <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
            </CardSlot>
            <div class="separator"></div>
            <div class="separator"></div>

            <CardSlot :stack="props.player.discard_pile">

            </CardSlot>
        </div>


    </div>
</template>

<style scoped>
.stack_and_discard {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;

}

.player {
    border-top: 5px solid black;
}

.turn {
    background: lightgreen;
}

.turn_icon {
    position: relative;
}

#turn_data {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.turn_icon img {
    height: 50px;
}

.turn_icon_number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>