heronfief/front
3
1
Fork 0
Code Issues 44 Pull Requests 1 Actions Packages Projects Releases 1 Activity

Front rewrite

Browse Source
This commit is contained in:
legonzaur
2024-05-05 18:53:16 +02:00
parent e70cddefc1
commit d12d4f67ff
16 changed files with 508 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+6
View File
@@ -0,0 +1,6 @@
{
"files.exclude": {
"**/.nuxt/": true,
"**/node_modules": true
}
}
app.vue
+40 -14
View File
@@ -1,22 +1,33 @@
<script setup lang="ts">
import { ref } from "vue";
import { ref } from 'vue';
import goStore, { register, setReady } from '@/netcode';
let username = ref<string>('legonzaur')
import goStore, { register, setReady } from "@/netcode";
let username = ref<string>("legonzaur");
</script>
<template>
<input v-if="!goStore.self && !goStore.game?.started" type="text" v-model="username">
<button v-if="!goStore.self && !goStore.game?.started" @click="register(username)">LOGIN</button>
<input @change="setReady(($event.target as HTMLInputElement).checked)" v-if="goStore.self && !goStore.game?.started"
type="checkbox" id="ready">
<label v-if="goStore.self && !goStore.game?.started" for="scales">Ready</label>
<div>
<GameBoard></GameBoard>
<div id="game_status">
<template v-if="!goStore.self">
<div v-if="goStore.game?.started">
<b>SPECTATOR MODE</b>
</div>
<template v-if="!goStore.game?.started">
<input type="text" v-model="username" />
<button @click="register(username)">LOGIN</button>
</template>
</template>
<template v-if="goStore.self && !goStore.game?.started">
<input @change="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready" />
<label for="ready">Ready</label>
</template>
</div>
<GameBoard></GameBoard>
</template>
<style>
@@ -26,5 +37,20 @@ html {
body {
margin: 0;
height: 100vh;
}
</style>
#__nuxt {
height: 100%;
user-select: none;
}
#game_status {
position: fixed;
z-index: 1;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, .75);
}
</style>
components/CardPreview.vue
+32 -44
View File
@@ -15,20 +15,13 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits(["click"])
const buttonsElement = ref<HTMLElement | null>(null)
const rightClicked = ref(false)
const childCount = ref<number>(0)
function cardClick() {
if (!props.data) return
emit("click")
}
function contextmenu(e: MouseEvent) {
if (buttonsElement.value?.childElementCount === 0) { return }
buttonsElement.value?.setAttribute("style", `top:${e.clientY + 10}px;left:${e.clientX + 10}px`)
rightClicked.value = true
}
const rotation = ref(0)
// onBeforeUpdate(() => {
@@ -45,40 +38,45 @@ watch(
</script>
<template>
<div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`"
@contextmenu.prevent="false" @click.left="cardClick" @click.right="contextmenu"
:style="`rotate:${rotation}deg;`">
<img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
:src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'">
<img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="!props.data"
:src="'/cards/background.png'">
</div>
<div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
<div id="contextMenuButtons" ref="buttonsElement">
<div :class="`card ${childCount > 0 ? 'active' : ''} ${wrapped ? 'wrapped' : ''}`" @contextmenu.prevent="false"
@click.left="cardClick" :style="`rotate:${rotation}deg;`">
<div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
<slot></slot>
</div>
<img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="props.data"
:src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false">
<img :class="`card_image ${props.locked ? 'locked' : ''}`" v-if="!props.data" :src="'/cards/background.png'"
draggable="false">
</div>
</template>
<style scoped>
.card {
transition: 0.025s rotate linear;
transition: max-width .125s linear;
max-width: 256px;
position: relative;
display: flex;
}
.card.active {
cursor: pointer
}
.card.active:hover #contextMenuButtons {
transform: translateY(100%);
}
.card_image {
max-height: 250px;
transition: all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
margin-top: 15px;
margin-bottom: 0px
z-index: 1;
}
.card_image.outlined {
@@ -89,39 +87,29 @@ watch(
.card_image.locked {
/* filter: brightness(0.5); */
filter: drop-shadow(5px 15px 2px rgba(0, 0, 0, .60));
margin-top: 0px;
margin-bottom: 15px;
}
.card.wrapped {
max-width: 10px;
}
.card.wrapped:last-child {
max-width: 256px;
}
.card_image {
max-height: 250px;
}
.hidden {
display: none;
}
#contextMenu {
z-index: 5;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
/* background: rgba(0, 0, 0, .5); */
}
#contextMenuButtons {
position: absolute;
display: flex;
flex-direction: column;
flex-direction: row;
bottom: 0;
width: 100%;
transform: translateY(0);
transition: 0.1s transform cubic-bezier(0.075, 0.82, 0.165, 1);
}
</style>
<style>
#contextMenuButtons>* {
flex: 1;
border-radius: 10px;
}
</style>
components/CardSlot.vue → components/CardsGrouped.vue
+11 -7
View File
@@ -9,16 +9,13 @@ const props = withDefaults(defineProps<Props>(), {
stack: () => [],
})
const unwrapped = ref(false)
</script>
<template>
<div>
<input type="checkbox" v-model="unwrapped" class="checkbox" />
<div class="cards_container">
<template v-if="props.stack.length > 0" v-for="c in props.stack">
<CardPreview :data="c" :wrapped="!unwrapped">
<CardPreview :data="c" :wrapped="true">
<slot></slot>
</CardPreview>
</template>
@@ -29,9 +26,16 @@ const unwrapped = ref(false)
</template>
<style scoped>
.cards_container::before {
width: calc(185px - 10px);
display: block;
content: "";
height: 0;
}
.cards_container {
position: relative;
max-width: 30vw;
grid-auto-columns: auto;
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
</style>
components/GameBoard.vue
+51 -58
View File
@@ -1,72 +1,65 @@
<script setup lang="ts">
import goStore, { buy, useEffect } from '@/netcode';
import { CardEffects } from '@/netcode/Effect'
import { CardType } from '@/netcode/Card'
const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
import goStore from '~/netcode';
import type { Player } from '~/netcode/Player';
const current_players = computed<Array<Player>>(() => Array.from(goStore.players.values()).filter(p => p.team === goStore.game?.current_turn))
</script>
<template>
<div @contextmenu.prevent="false">
<div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
<div>
market_amount = {{ goStore.game?.market_stack?.length }}
<br>
<div class="cards_container">
<CardSlot :stack="goStore.game?.gem_stack">
<template v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0">
<button @click="buy(goStore.game.gem_stack.at(-1)!)">
BUY
</button>
<button
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
:disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
BUY IN HAND</button>
<button
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
:disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
BUY IN STACK(generic)
</button>
</template>
</CardSlot>
<CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
<template v-if="isTurn && c">
<button @click="buy(c)"
:disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>
<button
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
:disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
BUY IN HAND</button>
<button
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, c)"
:disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
BUY IN STACK (generic)</button>
<button v-if="c.card_type == CardType.ACTION"
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)!, c)"
:disabled="(goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost) || !goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)">
BUY IN STACK (actions)</button>
</template>
</CardPreview>
</div>
<div @contextmenu.prevent="false" id="game_board">
<div id="market">
<MarketCards></MarketCards>
</div>
<div>
<PlayerList>
</PlayerList>
<div id="player_list">
<PlayerListElement v-for="[l, p] in goStore.players" :player="p">
</PlayerListElement>
</div>
<div id="current_player">
<PlayerSlot v-for="p in current_players" :player="p"></PlayerSlot>
</div>
<SelfView></SelfView>
</div>
</template>
<style>
.cards_container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
<style scoped>
#game_board {
display: grid;
grid-template-columns: 1fr 400px;
grid-template-rows: min-content 1fr;
grid-template-areas:
"market player_list"
"current_player player_list";
height: 100%;
}
.separator {
margin-left: 100px;
#player_list,
#current_player {
overflow: scroll;
}
#market {
grid-area: market;
background-image: url("/images/bg-sand.png");
padding: 10px;
}
#current_player {
grid-area: current_player;
background-image: url("/images/bg-grass.png");
padding-left: 70px;
}
#player_list {
grid-area: player_list;
border-left: 5px solid black;
border-bottom: 5px solid black;
height: 100%;
background-image: url("/images/bg-grass.png");
}
</style>
<style>
#player_list .card_image {
max-width: 64px;
}
</style>
components/MarketCards.vue
+63
View File
@@ -0,0 +1,63 @@
<script setup lang="ts">
import goStore, { buy, useEffect } from '@/netcode';
import { CardEffects } from '@/netcode/Effect'
import { CardType } from '@/netcode/Card'
const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
</script>
<template>
<div id="market">
<CardPreview :data="null"></CardPreview>
<div class="separator"></div>
<CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
<template v-if="isTurn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
<button @click="buy(c)">BUY</button>
<button @click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
BUY IN HAND</button>
<button @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, c)"
v-if="goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
BUY IN STACK (generic)</button>
<button @click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)!, c)"
v-if="c.card_type == CardType.ACTION && goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_ACTION_BOUGHT)">
BUY IN STACK (actions)</button>
</template>
</CardPreview>
<div class="separator"></div>
<CardPreview :data="goStore.game?.gem_stack.at(-1)" @click="buy(goStore.game?.gem_stack.at(-1)!)">
<template
v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.game?.gem_stack.at(-1)?.cost ?? Infinity)">
<button @click="buy(goStore.game.gem_stack.at(-1)!)">
BUY
</button>
<button
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
BUY IN HAND</button>
<button
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
v-if="goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
BUY IN STACK(generic)
</button>
</template>
</CardPreview>
</div>
</template>
<style scoped>
#market {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: 2;
position: relative;
}
.separator {
width: 50px;
}
</style>
components/PlayerList.vue
-11
View File
@@ -1,11 +0,0 @@
<script setup lang="ts">
import goStore from '@/netcode';
</script>
<template>
<div v-for="[k, l] in goStore.players">
<PlayerSlot :player="l" v-if="l !== goStore.self" :key="k" />
</div>
<SelfView v-if="goStore.self"></SelfView>
</template>
components/PlayerListElement.vue
+137
View File
@@ -0,0 +1,137 @@
<script setup lang="ts">
import goStore from '@/netcode';
import type { Player } from "~/netcode/Player";
const view = ref<"main" | "discard">("main")
function show(data: "main" | "discard") {
view.value = data
}
export interface Props {
player: Player;
}
const props = defineProps<Props>()
</script>
<template>
<div class="player_list_element">
<div class="button" id="player_list_buttons">
<div class="main_button" @click="show('main')">
<div class="tooltip">Board</div>
<img :src="`/cards/${player.board.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
draggable="false" :class="view === 'main' && 'selected'">
<span class="button_card_number">{{ player.board.length }}</span>
</div>
<div class="stack_button">
<div class="tooltip">Stack</div>
<img :src="'/cards/background.png'" draggable="false">
<span class="button_card_number">{{ player.stack_pile.length }}</span>
</div>
<div class="discard_button" @click="show('discard')">
<div class="tooltip">Discard</div>
<img :src="`/cards/${player.discard_pile.at(-1)?.card_id.toString().padStart(3, '0') ?? 'background'}.png`"
draggable="false" :class="view === 'discard' && 'selected'">
<span class="button_card_number">{{ player.discard_pile.length }}</span>
</div>
</div>
<div class="view">
<PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
<CardPreview v-for=" card in player.discard_pile " :data="card" v-if="view == 'discard'">
</CardPreview>
</div>
</div>
</template>
<style scoped>
.button>div>img:not(.selected) {
filter: brightness(.5)
}
.tooltip {
visibility: visible;
position: absolute;
transition: .1s transform;
background: white;
right: 0;
}
.button {
display: flex;
flex-direction: column;
align-items: stretch;
z-index: 1;
}
.button>div {
flex: 1 1 0;
border-right: 5px solid black;
width: 45px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.button>div:not(.stack_button) {
cursor: pointer;
}
.button div:hover .tooltip {
visibility: visible;
transform: translateX(100%);
}
.button_card_number {
font-size: 2em;
position: absolute;
text-shadow: white 0 0 1px;
}
.button>div:not(:last-child) {
border-bottom: 5px solid black;
}
.player_list_element {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas:
"button player";
border-bottom: 5px solid black;
min-height: 200px;
}
.view {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
</style>
<style>
#player_list_buttons img {
max-width: 100%;
object-fit: contain;
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: auto 0;
}
</style>
components/PlayerSlot.vue
+134 -118
View File
@@ -1,156 +1,172 @@
<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';
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
player: Player;
hide_stack_and_discard?: boolean;
}
const props = defineProps<Props>()
const isTurn = computed(() => props.player.team == goStore.game?.current_turn)
const isSelf = computed(() => props.player.uuid == goStore.self?.uuid)
const props = withDefaults(defineProps<Props>(), {
hide_stack_and_discard: () => false,
})
const discard_unwrapped = ref(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);
if (!effect) {
return;
}
useEffect(effect, target);
}
const make_discard = (target: Player) =>
run_effect(CardEffects.DISCARD, target);
const sacrifice = (target: Card) => run_effect(CardEffects.SACRIFICE, target);
const stun = (target: Card) => run_effect(CardEffects.STUN, target)
</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.find_effect(CardEffects.DISCARD)!, props.player)"
:disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
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 :class="`player ${isPlayerTurn ? 'turn' : ''}`">
<template v-if="!hide_stack_and_discard">
<div class="stack">
<span>stack =</span>
<CardsGrouped :stack="props.player.stack_pile">
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
</CardsGrouped>
</div>
<div class="turn_icon">
<img src="/images/heal.png" />
<span class="turn_icon_number">
{{ props.player.turn.heal_reserve }}
</span>
<div class="discard">
<CardsGrouped :stack="props.player.discard_pile"> </CardsGrouped>
</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>
</template>
<div id="player_stats">
<PlayerStats :player="props.player"></PlayerStats>
<b>{{ props.player.username }}</b>
</div>
<div id="current_player_board">
<button @click="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="make_discard(props.player)"
:disabled="!goStore.self?.turn.find_effect(CardEffects.DISCARD)">
make Discard
</button>
<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 />
<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="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">
<button v-if="props.player.turn.discard_markers > 0" @click="discard(c)">
DISCARD
</button>
<button
v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE) && !(c.uuid in props.player.turn.cards_locked)"
@click="sacrifice(c)">
SACRIFICE
</button>
<button
v-if="c && isSelf && isPlayerTurn && !(c.uuid in (goStore.self?.turn.cards_locked ?? []))"
@click="lockCard(c)">
LOCK
</button>
</template>
<button v-if="isPlayerEnemy && isSelfTurn && (c.health_as_champion ?? 0) > 0"
:disabled="(goStore.self?.turn.damage_reserve ?? 0) <= 0" @click="damage_champion(c)">
DAMAGE
</button>
<button
v-if="isPlayerEnemy && isSelfTurn && goStore.self?.turn.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
@click="stun(c)">
STUN
</button>
</CardPreview>
</div>
</div>
<span>discard_markers = {{ props.player.turn.discard_markers }} </span>
<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.find_effect(CardEffects.SACRIFICE)"
:disabled="!goStore.self || !c || c.uuid in props.player.turn.cards_locked"
@click="useEffect(props.player.turn.find_effect(CardEffects.SACRIFICE)!, 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.find_effect(CardEffects.STUN) && (c.health_as_champion ?? 0) > 0"
@click="useEffect(goStore.self.turn.find_effect(CardEffects.STUN)!, 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 {
.stack,
.discard,
.cards_container {
display: flex;
flex-direction: row-reverse;
flex-direction: row;
justify-content: center;
flex-wrap: wrap-reverse;
}
.stack {
grid-area: stack;
}
.discard {
grid-area: discard;
}
.player {
border-top: 5px solid black;
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";
}
.turn {
background: lightgreen;
#current_player_board {
grid-area: player;
}
.turn_icon {
position: relative;
}
#turn_data {
#player_stats {
display: flex;
flex-direction: row;
align-items: flex-start;
grid-area: player_stats;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
padding-top: 1em;
z-index: 1;
}
.turn_icon img {
@@ -163,4 +179,4 @@ const discard_unwrapped = ref(false)
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</style>
components/PlayerStats.vue
+12 -9
View File
@@ -11,32 +11,30 @@ const props = defineProps<Props>()
</script>
<template>
<div class="turn_icon">
<img src="/images/heal.png" />
<span class="turn_icon_number">
{{ player.turn.heal_reserve }}
</span>
<span class="icon_img">🖕</span>
<span class="turn_icon_number">{{ player.turn.discard_markers }}</span>
</div>
<div class="turn_icon">
<img src="/images/damage.png" />
<img src="/images/damage.png" class="icon_img" draggable="false" />
<span class="turn_icon_number">
{{ player.turn.damage_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/gold.png" />
<img src="/images/gold.png" class="icon_img" draggable="false" />
<span class="turn_icon_number">
{{ player.turn.gold_reserve }}
</span>
</div>
<div class="turn_icon">
<img src="/images/champion-shield.png" />
<img src="/images/champion-shield.png" class="icon_img" draggable="false" />
<span class="turn_icon_number">
{{ player.team.health }}
</span>
</div>
</template>
<style scoped>
@@ -45,12 +43,17 @@ const props = defineProps<Props>()
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
.turn_icon img {
img.icon_img {
height: 50px;
}
span.icon_img {
font-size: 50px;
}
.turn_icon_number {
position: absolute;
text-shadow: white 0 0 1px;
components/SelfView.vue
+7 -80
View File
@@ -1,21 +1,13 @@
<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)">
@@ -31,78 +23,16 @@ const discard_unwrapped = ref(false)
@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>
.cards_container {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.stack_and_discard {
display: flex;
flex-direction: row-reverse;
@@ -114,10 +44,6 @@ const discard_unwrapped = ref(false)
border-top: 5px solid black;
}
.turn {
background: lightgreen;
}
#play_all {
display: flex;
flex-direction: row;
@@ -132,6 +58,7 @@ const discard_unwrapped = ref(false)
display: flex;
flex-direction: column;
align-items: flex-start;
/* background: lightgreen; */
}
netcode/Effect.ts
+6 -3
View File
@@ -57,13 +57,16 @@ export function create_effect(input: EffectNetcode, register: GameObjectRegister
return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.mutex))
}
if (prop == "usable") {
if (target.effect_type == EffectType.FACTION_COMBO) {
if (target.effect_type === EffectType.FACTION_COMBO) {
if (!register.self) { return false }
// ugly bastard
const card = register.self.value?.board.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
let cardLocked = register.self.value?.turn.cards_locked
if(!cardLocked) { return false }
let cardList = Object.values(cardLocked)
const card = cardList.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
if (!card) { return false }
return register.self.value?.board.some(c => c !== card && c.faction === card.faction)
return cardList.some(c => c !== card && c.faction === card.faction)
}
return true
}
netcode/Turn.ts
-1
View File
@@ -8,7 +8,6 @@ export interface TurnNetcode extends GameObjectNetcode {
champions_health: { [key: string]: string }
discard_markers: number
damage_reserve: number
heal_reserve: number
gold_reserve: number
}
public/images/bg-darkgrass.png
LFS
BIN
View File
Binary file not shown.
public/images/bg-grass.png
LFS
BIN
View File
Binary file not shown.
public/images/bg-sand.png
LFS
BIN
View File
Binary file not shown.