front/components/SelfView.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 { CardEffects } from '@/netcode/Effect'
import { CardType } from '~/netcode/Card';

const isTurn = computed(() => goStore.self?.team == goStore.game?.current_turn)

const discard_unwrapped = ref(false)

</script>

<template>
    <div :class="'player ' + (isTurn ? 'turn' : '')">
        <button @click="heal" v-if="goStore.self?.team == goStore.self?.team"
            :disabled="(goStore.self?.turn.heal_reserve ?? 0) <= 0">
            Heal
        </button>
        <button v-if="goStore.self && goStore.self?.team != goStore.self?.team"
            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.DISCARD)!, goStore.self)"
            :disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
            make Discard</button>
        <div id="turn_data">

            <div class="turn_icon">
                <img src="/images/heal.png" />
                <span class="turn_icon_number">
                    {{ goStore.self?.turn.heal_reserve }}
                </span>
            </div>
            <div class="turn_icon">
                <img src="/images/damage.png" />
                <span class="turn_icon_number">
                    {{ goStore.self?.turn.damage_reserve }}
                </span>
            </div>
            <div class="turn_icon">
                <img src="/images/gold.png" />
                <span class="turn_icon_number">
                    {{ goStore.self?.turn.gold_reserve }}
                </span>
            </div>
            <div class="turn_icon">
                <img src="/images/champion-shield.png" />
                <span class="turn_icon_number">
                    {{ goStore.self?.team.health }}
                </span>
            </div>
        </div>
        <div class="cards_container" id="self_hand">
            <button v-if="isTurn && (goStore.self?.hand.length ?? 0) > 1"
                @click="playAllCards(goStore.self?.hand as Card[])">
                PLAY ALL
            </button>
            <CardPreview :data="c" v-for="  c  in  goStore.self?.hand  " @click="c && playCard(c)">
                <button v-if="c && isTurn" @click="playCard(c)">PLAY</button>
                <button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
                    @click="discard(c!)">DISCARD</button>
            </CardPreview>
        </div>

        <span>discard_markers = {{ goStore.self?.turn.discard_markers }} <br></span>
        <span>effects_availables = <div v-for="e in goStore.self?.turn.effects_availables">
                <button @click="useEffect(e)" :disabled="!e.usable">
                    {{ e.effect + ' ' + e.effect_type + ' ' + e.amount }}
                </button>

            </div></span>
        <br>
        board =
        <div class="cards_container">
            <CardPreview :data="c" v-for="  c in goStore.self?.board  " @click="lockCard(c)"
                :locked="c.uuid in (goStore.self?.turn.cards_locked ?? [])">
                <button v-if="isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
                    @click="discard(c)">DISCARD</button>
                <button v-if="isTurn && goStore.self?.turn.discard_markers == 0" @click="lockCard(c)"
                    :disabled="c.uuid in goStore.self?.turn.cards_locked">
                    LOCK
                </button>
                <button v-if="isTurn && goStore.self!.turn.find_effect(CardEffects.SACRIFICE)"
                    :disabled="!goStore.self || !c || c.uuid in goStore.self?.turn.cards_locked"
                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>

                <button
                    v-if="isTurn && goStore.self!.turn.find_effect(CardEffects.PREPARE) && c.card_type == CardType.CHAMPION"
                    :disabled="!goStore.self || !c || !(c.uuid in goStore.self?.turn.cards_locked)"
                    @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PREPARE)!, c)">PREPARE</button>


                <div>{{ c.health_as_champion }}</div>

            </CardPreview>
        </div>
        <br>

        <div class="stack_and_discard">
            <div>
                <input type="checkbox" v-model="discard_unwrapped" />
                <div class="cards_container">

                    <template v-for="c in  goStore.self?.discard_pile   ">
                        <CardPreview :data="c" :wrapped="!discard_unwrapped">
                            <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
<button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(c)">PUT ON STACK</button>
-->
                            <button v-if="isTurn && c.card_type == CardType.CHAMPION"
                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)"
                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION)!, c)">RESTACK
                                (champion)</button>

                            <button v-if="isTurn"
                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)"
                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD)!, c)">RESTACK
                                (card)</button>
                            <button v-if="isTurn"
                                :disabled="!goStore.self || !c || !goStore.self!.turn.find_effect(CardEffects.SACRIFICE)"
                                @click="useEffect(goStore.self!.turn.find_effect(CardEffects.SACRIFICE)!, c)">SACRIFICE</button>
                        </CardPreview>
                    </template>
                </div>
            </div>

            <CardSlot :stack="goStore.self?.stack_pile">
                <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
            </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_data {
    position: fixed;
    bottom: 0;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.turn_icon {
    position: relative;
}

.turn_icon img {
    height: 50px;
}

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

#self_hand {
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    position: fixed;
    right: 60px;
    bottom: -50px;
    max-width: 100vw;
}
</style>

<style>
#self_hand .card {
    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
    overflow: visible;
}

#self_hand .card:hover {
    transform: translateY(-40px);

}

.cards_container {
    min-width: 250px;
}
</style>