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

Playtest

Browse Source
This commit is contained in:
legonzaur
2024-04-26 16:08:04 +02:00
parent 6e9077404a
commit d0816f9fc9
9 changed files with 169 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+3 -1
View File
@@ -9,12 +9,14 @@ export interface Props {
const props = defineProps<Props>()
const emit = defineEmits(["click"])
const buttonsElement = ref<HTMLElement | null>(null)
const rightClicked = ref(false)
function cardClick() {
if (props.data == null) return
console.log(JSON.parse(JSON.stringify(props.data.effects)))
emit("click")
}
function contextmenu(e: MouseEvent) {
components/GameBoard.vue
+26 -9
View File
@@ -1,5 +1,7 @@
<script setup lang="ts">
import goStore, { buy, endTurn } from '@/netcode';
import goStore, { buy, endTurn, 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))
@@ -14,15 +16,22 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
<br>
market =
<div class="cards_container">
<CardPreview :data="c" v-for="c in goStore.game?.market">
<CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
<template v-if="isTurn && c">
<button @click="buy(c)">BUY</button>
<!-- <button @click="buy_in_hand(c)">
BUY IN HAND
</button>
<button @click="buy_on_stack(c)">
BUY ON STACK
</button> -->
<button @click="buy(c)"
:disabled="goStore.self === undefined || c.cost === undefined || goStore.self?.turn.gold_reserve < c.cost">BUY</button>
<button
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, c)"
:disabled="(goStore.self === undefined || c.cost === undefined || goStore.self.turn.gold_reserve < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN HAND</button>
<button
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, c)"
:disabled="(goStore.self === undefined || c.cost === undefined || goStore.self.turn.gold_reserve < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN STACK (generic)</button>
<button v-if="c.card_type == CardType.ACTION"
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)!, c)"
:disabled="(goStore.self === undefined || c.cost === undefined || goStore.self.turn.gold_reserve < c.cost) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
BUY IN STACK (actions)</button>
</template>
</CardPreview>
</div>
@@ -34,6 +43,14 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
<button @click="buy(goStore.game.gem_stack.at(-1)!)">
BUY
</button>
<button
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
:disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)!.cost === undefined || goStore.self.turn.gold_reserve < goStore.game.gem_stack.at(-1)!.cost!) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN HAND</button>
<button
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)!, goStore.game.gem_stack.at(-1))"
:disabled="(goStore.self === undefined || goStore.game.gem_stack.at(-1)?.cost === undefined || goStore.self.turn.gold_reserve < (goStore.game.gem_stack.at(-1)?.cost ?? Infinity)) || !goStore.self!.turn.effects_availables.some(e => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN STACK (generic)</button>
<!-- <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
BUY IN HAND
</button>
components/PlayerList.vue
+10 -2
View File
@@ -2,10 +2,18 @@
import goStore from '@/netcode';
const players = useState<{ [key: string]: any }>('players')
const player = computed(() => Array.from(goStore.players.keys()).sort((k) => {
if (goStore.self?.uuid === k) {
return -1
} else {
return 1
}
}))
</script>
<template>
<div v-for="[i, p] in goStore.players">
<PlayerSlot :player="p" />
<div v-for="k in player">
<PlayerSlot :player="goStore.players.get(k)!" />
</div>
</template>
components/PlayerSlot.vue
+64 -21
View File
@@ -1,7 +1,9 @@
<script setup lang="ts">
import goStore, { useEffect, playCard, playAllCards, discard, lockCard } from '~/netcode';
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
@@ -11,7 +13,7 @@ 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_wrapped = ref(false)
const discard_unwrapped = ref(false)
@@ -19,15 +21,28 @@ const discard_wrapped = ref(false)
<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" v-if="props.player.turn">
champions_health = {{ props.player.turn.champions_health }} <br>
heal_reserve = {{ props.player.turn.heal_reserve }} <br>
damage_reserve = {{ props.player.turn.damage_reserve }} <br>
gold_reserve = {{ props.player.turn.gold_reserve }} <br>
discard_markers = {{ props.player.turn.discard_markers }} <br>
effects_availables = <div v-for="e in props.player.turn.effects_availables" :key="e.uuid"
@click="useEffect(e)">
{{ e.effect + '*' + 1 }}
effects_availables = <div v-for="e in props.player.turn.effects_availables">
<button v-if="e" @click="useEffect(e)">
{{ e.effect + ' ' + e.effect_type }}
</button>
</div>
</div>
@@ -35,13 +50,11 @@ const discard_wrapped = ref(false)
<div v-if="isSelf"><b>YOU</b></div>
username = <b>{{ props.player.username }}</b>
<br>
health =
<template v-if="!isSelf">{{ player.team.health }}</template>
<!-- <input type="number" :value="player.team.health" v-if="isSelf" @change="setHealth" /> -->
health = {{ props.player.team.health }}
<br>
hand =
<div class="cards_container">
<CardPreview :data="c" v-for="c in props.player.hand">
<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>
@@ -53,13 +66,28 @@ const discard_wrapped = ref(false)
<br>
board =
<div class="cards_container">
<CardPreview :data="c" v-for="c in props.player.board"
:locked="Object.values(props.player.turn.cards_locked).includes(c)">
<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)">LOCK</button>
<button v-if="!isSelf && !isTurn"></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>
<br>
@@ -71,20 +99,35 @@ const discard_wrapped = ref(false)
discard =
{{ props.player.discard_pile.length }}
<input type="checkbox" v-model="discard_wrapped" />
<input type="checkbox" v-model="discard_unwrapped" />
<CardPreview v-if="!discard_wrapped" :data="props.player.discard_pile.at(-1) ?? null">
<CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1) ?? null">
<!-- <button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
<button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
STACK</button>
<button v-if="isSelf && isTurn" @click="sacrifice(props.player.discard_pile.at(-1))">SACRIFICE</button> -->
STACK</button> -->
<button v-if="isSelf && isTurn"
:disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
</CardPreview>
<template v-if="discard_wrapped" v-for="c in props.player.discard_pile">
<template v-if="discard_unwrapped" v-for="c in props.player.discard_pile ">
<CardPreview :data="c">
<!-- <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="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button> -->
-->
<button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
:disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
(champion)</button>
<button v-if="isSelf && isTurn"
:disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
(card)</button>
<button v-if="isSelf && isTurn"
:disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
@click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
</CardPreview>
</template>
netcode/Card.ts
+4 -3
View File
@@ -1,6 +1,7 @@
import type { GameObjectRegister } from "."
import type { Effect } from "./Effect"
import type { GameObjectNetcode } from "./GameObject"
import type { Turn } from "./Turn"
enum CardRole {
PERSONAL = "personal",
@@ -8,7 +9,7 @@ enum CardRole {
FIRE_GEM = "fire_gem"
}
enum CardType {
export enum CardType {
HERO = "hero",
HERO_ABILITY = "hero_ability",
CURRENCY = "currency",
@@ -48,10 +49,10 @@ export function create_card(input: CardNetcode, register: GameObjectRegister) {
const card = new Proxy<any>(input, {
get(target: CardNetcode, prop, reciever) {
if (prop == "effects") {
return target.effects.map((e) => register.effects[e])
return target.effects.map((e) => register.effects.get(e))
}
if (prop == "health_as_champion") {
return Object.values(register.turns).find(e => e.champions_health.has(card))?.champions_health.get(card)
return Array.from(register.turns.values()).find(e => e.champions_health.has(card.uuid))?.champions_health.get(card.uuid)
}
return Reflect.get(target, prop, reciever);
},
netcode/Effect.ts
+33 -16
View File
@@ -1,7 +1,7 @@
import { GameObjectRegister } from "."
import type { GameObjectNetcode } from "./GameObject"
enum CardEffects {
export enum CardEffects {
GOLD = "gold",
DAMAGE = "damage",
HEAL = "heal",
@@ -18,14 +18,14 @@ enum CardEffects {
PLAY_NEXT_CARD_BOUGHT = "play_next_card_bought"
}
enum EffectTimes {
export enum EffectTimes {
PER_CHAMPION = "per_champion",
PER_OTHER_CHAMPION = "per_other_champion",
PER_OTHER_GUARD = "per_other_guard",
PER_CARD_OF_SAME_FACTION = "per_card_of_same_faction"
}
enum EffectType {
export enum EffectType {
CHAMPION_ACTION = "champion_action",
SUICIDE = "suicide",
FACTION_COMBO = "faction_combo"
@@ -43,21 +43,38 @@ export interface EffectNetcode extends GameObjectNetcode {
export type Effect = Omit<EffectNetcode, 'sub_effects' | 'mutex'> & {
sub_effects: { [key: string]: Effect }
mutex: { [key: string]: Effect }
usable: boolean
}
export function create_effect(input: EffectNetcode, register: GameObjectRegister) {
return new Proxy<any>(input, {
get(target, prop, reciever) {
if (prop == "sub_effects") {
return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.sub_effects))
const effect =
new Proxy<any>(input, {
get(target: EffectNetcode, prop, reciever) {
if (prop == "sub_effects") {
return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.sub_effects))
}
if (prop == "mutex") {
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 (!register.self) { return false }
// ugly bastard
const card = register.self.board.find(c => c.effects.map(e => e.uuid).includes(effect.uuid))
if (!card) { return false }
console.log(
register.self.board.some(c => c !== card && c.faction === card.faction)
)
return register.self.board.some(c => c !== card && c.faction === card.faction)
}
return true
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
if (prop == "mutex") {
return Object.fromEntries(Object.entries(register.effects).filter(([i, v]) => i in target.mutex))
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
return Reflect.set(target, prop, val, receiver);
}
}) as Effect
}) as Effect
return effect
}
netcode/Game.ts
+5 -4
View File
@@ -20,15 +20,16 @@ export type Game = Omit<GameNetcode, 'market_stack' | 'market' | 'gem_stack' | '
}
export function create_game(input: GameNetcode, register: GameObjectRegister) {
return new Proxy<any>(input, {
get(target, prop, reciever) {
get(target: GameNetcode, prop, reciever) {
if (prop == "market_stack") {
return input.market_stack.map(e => register.cards.get(e))
return target.market_stack.map(e => register.cards.get(e))
}
if (prop == "market") {
return input.market.map(e => register.cards.get(e))
console.log(target)
return target.market.map(e => register.cards.get(e))
}
if (prop == "gem_stack") {
return input.gem_stack.map(e => register.cards.get(e))
return target.gem_stack.map(e => register.cards.get(e))
}
if (prop == "current_turn") {
return register.teams.get(input.current_turn)
netcode/Turn.ts
+4 -5
View File
@@ -16,13 +16,13 @@ export interface TurnNetcode extends GameObjectNetcode {
export type Turn = Omit<TurnNetcode, 'cards_locked' | 'effects_availables' | 'champions_health'> & {
cards_locked: { [key: string]: Card }
effects_availables: Array<Effect>
champions_health: Map<Card, number>
champions_health: Map<string, number>
}
export function create_turn(input: TurnNetcode, register: GameObjectRegister) {
return new Proxy<any>(input, {
get(target: TurnNetcode, prop, reciever) {
if (prop == "card_locked") {
return target.cards_locked.map(e => register.cards.get(e))
if (prop == "cards_locked") {
return Object.fromEntries(target.cards_locked.map(e => [e, register.cards.get(e)]))
}
if (prop == "effects_availables") {
return target.effects_availables.map(e => register.effects.get(e))
@@ -30,14 +30,13 @@ export function create_turn(input: TurnNetcode, register: GameObjectRegister) {
if (prop == "champions_health") {
const healths = new Map()
for (const c in target.champions_health) {
healths.set(register.cards.get(c), target.champions_health[c])
healths.set(register.cards.get(c)?.uuid, target.champions_health[c])
}
return healths
}
return Reflect.get(target, prop, reciever);
},
set(target, prop, val, receiver) {
console.log(isReactive(target))
return Reflect.set(target, prop, val, receiver);
}
}) as Turn
netcode/index.ts
+20 -4
View File
@@ -1,5 +1,5 @@
import { type Card, create_card, type CardNetcode } from "./Card"
import { type Effect, create_effect, type EffectNetcode } from "./Effect"
import { type Effect, create_effect, type EffectNetcode, EffectType, CardEffects } from "./Effect"
import { type Game, create_game, type GameNetcode } from "./Game"
import type { GameObjectNetcode } from "./GameObject"
import { type Player, create_player, type PlayerNetcode } from "./Player"
@@ -176,16 +176,24 @@ export function lockCard(card: Card) {
data_type: "lock_card",
data: card.uuid
}))
card.effects.forEach(e => {
if (e.effect_type !== EffectType.SUICIDE && e.usable && [CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)) {
for (let i = 0; i < e.amount; i++) {
useEffect(e)
}
}
})
}
export function useEffect(effect: Effect, target?: Effect | Card | Player | Team) {
console.log({ effect_id: effect.uuid, target: target?.uuid })
socket.send(JSON.stringify({
type: "action",
data_type: "use_effect",
data: { effect_id: effect.uuid, target: target?.uuid }
}))
}
export function discard(card: Card) {
socket.send(JSON.stringify({
type: "action",
@@ -202,10 +210,18 @@ export function heal() {
}))
}
export function damage(target: Team) {
export function damage_team(target: Team) {
socket.send(JSON.stringify({
type: "action",
data_type: "damage",
data_type: "damage_team",
data: target.uuid
}))
}
export function damage_champion(target: Card) {
socket.send(JSON.stringify({
type: "action",
data_type: "damage_champion",
data: target.uuid
}))
}