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, type Effect } from "@/netcode/Effect";

export interface Props {
    player: Player;
    hide_stack_and_discard?: boolean;
    discard_unwrapped?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    hide_stack_and_discard: () => false,
    discard_unwrapped: () => false,
})

const isPlayerTurn = computed(() => props.player.team === goStore.game?.current_turn);
const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
const isSelfTurn = computed(() => goStore.self?.team === goStore.game?.current_turn)
const isPlayerEnemy = computed(() => goStore.self?.team !== props.player.team)

function run_effect(
    effect_type: CardEffects,
    target: Player | Card
) {
    const effect = goStore.self?.turn.find_effect(effect_type).value;
    if (!effect) {
        return;
    }
    useEffect(effect, target);
}

const make_discard = (target: Player) =>
    run_effect(CardEffects.MAKE_DISCARD, target);
const sacrifice = (target: Card) => run_effect(CardEffects.SACRIFICE, target);
const stun = (target: Card) => run_effect(CardEffects.STUN, target)
const restack_discarded_champion = (target: Card) => run_effect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_DISCARDED_CARD, target)

</script>

<template>
    <div :class="`player ${isPlayerTurn ? 'turn' : ''} ${discard_unwrapped ? 'discard_unwrapped' : ''}`">
        <template v-if="!hide_stack_and_discard">
            <div class="stack">

                <CardsGrouped :stack="props.player.stack_pile">
                    <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
                </CardsGrouped>
                <span>stack =</span>
            </div>
            <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
                <CardsGrouped :stack="props.player.discard_pile" v-if="!props.discard_unwrapped"> </CardsGrouped>
                <CardPreview v-if="props.discard_unwrapped" :data="c" v-for="c in props.player.discard_pile">
                    <template v-if="c && isSelf && isPlayerTurn">

                        <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE).value"
                            @click.stop="sacrifice(c)">
                            SACRIFICE
                        </button>
                        <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CHAMPION).value"
                            @click.stop="restack_discarded_champion(c)">
                            RESTACK_DISCARDED_CHAMPION
                        </button>
                        <button v-if="goStore.self?.turn.find_effect(CardEffects.RESTACK_DISCARDED_CARD).value"
                            @click.stop="restack_discarded_card(c)">
                            RESTACK_DISCARDED_CARD
                        </button>

                    </template>
                </CardPreview>
            </div>
        </template>
        <div id="player_banner">
            <div id="player_info">
                <img v-if="props.player.image" :src="props.player.image">
                <b>{{ props.player.username }}</b>
            </div>
            <div id="player_stats">
                <PlayerStats :player="props.player"></PlayerStats>
            </div>
        </div>
        <div id="current_player_board">
            <button @click.stop="damage_team(props.player.team)" v-if="isSelfTurn && isPlayerEnemy"
                :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0">
                Damage
            </button>
            <button v-if="isSelfTurn && isPlayerEnemy" @click.stop="make_discard(props.player)"
                :disabled="!goStore.self?.turn.find_effect(CardEffects.MAKE_DISCARD).value">
                make Discard
            </button>
            <br />

            <div class="cards_container">
                <!-- HAND -->
                <CardPreview :data="c" v-for="c in props.player.hand" @click="c && playCard(c)">
                    <button v-if="c && isSelf && props.player.turn.discard_markers > 0" @click.stop="discard(c)">
                        DISCARD
                    </button>
                </CardPreview>
                <!-- BOARD -->
                <CardPreview :data="c" v-for="c in props.player.board" @click="lockCard(c)"
                    :locked="c.uuid in props.player.turn.cards_locked">

                    <template v-if="c && isSelf && isPlayerTurn">
                        <template v-if="c.uuid in props.player.turn.cards_locked"
                            v-for="e in props.player.turn.effects_availables">
                            <button v-if="e.card == c" @click.stop="useEffect(e)" :disabled="!e.usable">
                                EFFECT<br>
                                {{ e.effect + " " + (e.effect_type ?? '') }}
                            </button>
                        </template>
                        <template v-if="!(c.uuid in props.player.turn.cards_locked)">
                            <button v-if="props.player.turn.discard_markers > 0" @click.stop="discard(c)">
                                DISCARD
                            </button>
                            <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE).value"
                                @click.stop="sacrifice(c)">
                                SACRIFICE
                            </button>
                            <button @click.stop="lockCard(c)"
                                :disabled="(props.player.turn.discard_markers > 0 && c !== props.player.turn.discard_marker_card) || props.player.turn.fuck_u_markers > 0">
                                LOCK
                            </button>
                        </template>
                    </template>
                    <template v-if="isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0">
                        <button :disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0"
                            @click.stop="damage_champion(c)">
                            DAMAGE
                        </button>
                        <button v-if="goStore.self?.turn.find_effect(CardEffects.STUN).value" @click.stop="stun(c)">
                            STUN
                        </button>
                    </template>
                </CardPreview>
            </div>
        </div>
    </div>
</template>

<style scoped>
.stack,
.discard,
.cards_container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap-reverse;
}

.stack {
    grid-area: stack;
}

.discard {
    margin-top: 50px;
    grid-area: discard;
    justify-content: start;
}

.player {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: min-content min-content 1fr;
    /* border-top: 5px solid black; */
    grid-template-areas:
        "player_stats   player_stats"
        "stack          player"
        "discard        player";
    transition: all 1s;
}

.player.turn {
    margin-bottom: 75px;
}

.player.discard_unwrapped {
    grid-template-areas:
        "player_stats   player_stats"
        "stack          player"
        "discard        discard";
}

#current_player_board {
    grid-area: player;
}

.turn_icon {
    position: relative;
}

#player_banner {
    display: flex;
    grid-area: player_stats;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    padding-top: 1em;
    z-index: 1;
}

#player_info {
    display: flex;
    align-items: center;
}

#player_stats {
    display: flex;
    grid-area: player_stats;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

#player_banner img {
    height: 50px;
    border-radius: 25px;
}

.turn_icon img {
    height: 50px;
}

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