front/components/SelfView.vue

<script setup lang="ts">
import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } 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">
            <button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>
            <PlayerStats v-if="goStore.self" :player='goStore.self'></PlayerStats>
        </div>

        <div class="cards_container" id="self_hand">
            <CardPreview :data="c" v-for="  c  in  goStore.self?.hand  " @click="c && playCard(c)">
                <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;
}

#play_all {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 10em;
}

#turn_data {
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


#self_hand {
    position: fixed;
    z-index: 1;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    left: 70px;
    bottom: -50px;
    max-width: 100vw;
    justify-content: flex-start;
    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
    transform: translateY(150px)
}

#self_hand:hover {
    transform: translateY(0px);
}

#end_turn {
    width: 50px;
    height: 50px;
}
</style>

<style>
#turn_data * {
    margin: 2.5px 0 2.5px 0;
}

#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>