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

card locking and event triggering WIP

Browse Source
This commit is contained in:
legonzaur
2024-04-25 00:32:40 +02:00
parent cb3a470f53
commit 56cbe9bab4
6 changed files with 81 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.vue
+10
View File
@@ -1,8 +1,10 @@
<script setup lang="ts">
import { ref } from 'vue';
const cards = useState<{ [key: string]: any }>('cards', () => ({}))
const effects = useState<{ [key: string]: any }>('effects', () => ({}))
const players = useState<{ [key: string]: any }>('players', () => ({}))
const teams = useState<{ [key: string]: any }>('teams', () => ({}))
const turns = useState<{ [key: string]: any }>('turns', () => ({}))
const self = useState<string>('self')
const gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
@@ -14,6 +16,10 @@ let username = ref<string>('legonzaur')
const createObject = {
"effect": (data: any) => {
effects.value[data.uuid] = data
gameObjects.value[data.uuid] = data
},
"card": (data: any) => {
cards.value[data.uuid] = data
gameObjects.value[data.uuid] = data
@@ -29,6 +35,10 @@ const createObject = {
"team": (data: any) => {
teams.value[data.uuid] = data
gameObjects.value[data.uuid] = data
},
"turn": (data: any) => {
turns.value[data.uuid] = data
gameObjects.value[data.uuid] = data
}
} as { [id: string]: (data: Object) => any }
components/CardPreview.vue
+12 -6
View File
@@ -2,6 +2,7 @@
export interface Props {
data?: string
locked?: boolean
}
const props = defineProps<Props>()
@@ -24,15 +25,15 @@ function contextmenu(e: MouseEvent) {
</script>
<template>
<div :class="`card ${Number(buttonsElement?.childElementCount) > 0 ? 'active' : ''}`" @contextmenu.prevent="false"
@click.left="cardClick" @click.right="contextmenu">
<img :class="`card_image ${rightClicked ? 'outlined' : ''}`" v-if="props.data"
:src="'/cards/' + cards[props.data].card_id.toString().padStart(3, '0') + '.jpg'">
<span v-if="props.data === null">
HIDDEN
</span>
<img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`" v-if="props.data"
:src="'/cards/' + cards[props.data]?.card_id.toString().padStart(3, '0') + '.jpg'">
<img :class="`card_image ${rightClicked ? 'outlined' : ''} ${props.locked ? 'locked' : ''}`"
v-if="props.data === null" :src="'/cards/background.jpg'">
</div>
<div :class="rightClicked ? '' : 'hidden'" id="contextMenu" @click.self.prevent="rightClicked = false">
@@ -53,6 +54,11 @@ function contextmenu(e: MouseEvent) {
outline-offset: -2px;
}
.card_image.locked {
outline: 2px solid green;
outline-offset: -2px;
}
.card_image {
max-height: 150px;
}
components/CardSlot.vue
+10 -7
View File
@@ -14,16 +14,19 @@ const wrapped = ref(false)
<template>
{{ props.stack?.length }}
<input type="checkbox" v-model="wrapped" />
<div class="cards_container">
<CardPreview v-if="!wrapped" :data="props.stack.at(-1)">
<slot></slot>
</CardPreview>
<template v-if="wrapped" v-for="c in props.stack">
<CardPreview :data="c">
<CardPreview v-if="!wrapped" :data="props.stack.at(-1)">
<slot></slot>
</CardPreview>
</template>
<template v-if="wrapped" v-for="c in props.stack">
<CardPreview :data="c">
<slot></slot>
</CardPreview>
</template>
</div>
</template>
components/GameBoard.vue
+8 -24
View File
@@ -2,9 +2,10 @@
const props = defineProps(['game'])
const self = useState<string>('self')
const gameObject = useState<{ [key: string]: any }>('gameObject')
const cards = useState<{ [key: string]: any }>('cards')
const socket = useState<WebSocket>('socket')
const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.turn))
const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.current_turn))
async function buy(cardId: string) {
socket.value.send(JSON.stringify({
@@ -14,22 +15,6 @@ async function buy(cardId: string) {
}))
}
async function buy_in_hand(cardId: string) {
socket.value.send(JSON.stringify({
type: "temp_action",
data_type: "buy_in_hand",
data: cardId
}))
}
async function buy_on_stack(cardId: string) {
socket.value.send(JSON.stringify({
type: "temp_action",
data_type: "buy_on_stack",
data: cardId
}))
}
async function endTurn() {
socket.value.send(JSON.stringify({
type: "action",
@@ -41,8 +26,7 @@ async function endTurn() {
</script>
<template>
<div>
<div @contextmenu.prevent="false">
<button v-if="isTurn" @click="endTurn">END TURN</button>
<div v-if="!self"><b>SPECTATOR MODE</b></div>
<div>
@@ -54,12 +38,12 @@ async function endTurn() {
<CardPreview :data="c" v-for="c in props.game.market">
<template v-if="isTurn && c">
<button @click="buy(c)">BUY</button>
<button @click="buy_in_hand(c)">
<!-- <button @click="buy_in_hand(c)">
BUY IN HAND
</button>
<button @click="buy_on_stack(c)">
BUY ON STACK
</button>
</button> -->
</template>
</CardPreview>
</div>
@@ -71,17 +55,17 @@ async function endTurn() {
<button @click="buy(props.game.gem_stack.at(-1))">
BUY
</button>
<button @click="buy_in_hand(props.game.gem_stack.at(-1))">
<!-- <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
BUY IN HAND
</button>
<button @click="buy_on_stack(props.game.gem_stack.at(-1))">
BUY ON STACK
</button>
</button> -->
</template>
</CardSlot>
</div>
<div>
<PlayerList :players="props.game?.players" :current_team="game.turn"></PlayerList>
<PlayerList :players="props.game?.players" :current_team="game.current_turn"></PlayerList>
</div>
</div>
</template>
components/PlayerSlot.vue
+38 -35
View File
@@ -1,11 +1,15 @@
<script setup lang="ts">
const props = defineProps(['player', 'current_team'])
const teams = useState<{ [key: string]: any }>('teams')
const effects = useState<{ [key: string]: any }>('effects')
const self = useState<string>('self')
const turns = useState<{ [key: string]: any }>('turns')
const socket = useState<WebSocket>('socket')
const isTurn = computed(() => props.player.team == props.current_team)
const isSelf = computed(() => props.player.uuid == self.value)
const selfTurn = computed(() => turns.value[props.player?.turn as string])
const discard_wrapped = ref(false)
@@ -19,27 +23,27 @@ function playAllCards() {
function playCard(cardId: string) {
socket.value.send(JSON.stringify({
type: "action",
data_type: "play_cards",
data_type: "play_card",
data: cardId
}))
}
function draw() {
function lockCard(cardId: string) {
socket.value.send(JSON.stringify({
type: "action",
data_type: "draw",
data: 1
}))
}
function play_from_discard(cardId: string) {
socket.value.send(JSON.stringify({
type: "temp_action",
data_type: "play_from_discard",
data_type: "lock_card",
data: cardId
}))
}
function useEffect(effectId: string, target?: string) {
console.log({ effect_id: effectId, target })
socket.value.send(JSON.stringify({
type: "action",
data_type: "use_effect",
data: { effect_id: effectId, target }
}))
}
function discard(cardId: string) {
socket.value.send(JSON.stringify({
type: "action",
@@ -48,21 +52,6 @@ function discard(cardId: string) {
}))
}
function sacrifice(cardId: any) {
socket.value.send(JSON.stringify({
type: "action",
data_type: "sacrifice",
data: cardId
}))
}
function put_on_stack_from_discard(cardId: any) {
socket.value.send(JSON.stringify({
type: "temp_action",
data_type: "put_on_stack_from_discard",
data: cardId
}))
}
function setHealth(event: Event) {
socket.value.send(JSON.stringify({
type: "temp_action",
@@ -74,6 +63,19 @@ function setHealth(event: Event) {
<template>
<div :class="'player ' + (isTurn ? 'turn' : '')">
<div id="turn" v-if="turns[props.player?.turn]">
champions_health = {{ turns[props.player?.turn].champions_health }} <br>
heal_reserve = {{ turns[props.player?.turn].heal_reserve }} <br>
damage_reserve = {{ turns[props.player?.turn].damage_reserve }} <br>
gold_reserve = {{ turns[props.player?.turn].gold_reserve }} <br>
discard_markers = {{ turns[props.player?.turn].discard_markers }} <br>
effects_availables = <div v-for="e in turns[props.player?.turn].effects_availables" :key="e"
@click="useEffect(e)">
{{ effects[e].effect + '*' + 1 }}
</div>
</div>
<div v-if="isSelf"><b>YOU</b></div>
username = <b>{{ props.player.username }}</b>
<br>
@@ -85,7 +87,7 @@ function setHealth(event: Event) {
<div class="cards_container">
<CardPreview :data="c" v-for="c in props.player.hand">
<button v-if="isSelf && isTurn" @click="playCard(c)">PLAY</button>
<button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
<button v-if="isSelf && isTurn && selfTurn.discard_markers > 0" @click="discard(c)">DISCARD</button>
</CardPreview>
</div>
<button v-if="isSelf && isTurn && props.player.hand.length > 1" @click="playAllCards">PLAY
@@ -93,15 +95,16 @@ function setHealth(event: Event) {
<br>
board =
<div class="cards_container">
<CardPreview :data="c" v-for="c in props.player.board">
<button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
<button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button>
<CardPreview :data="c" v-for="c in props.player.board"
:locked="turns[props.player?.turn].cards_locked.includes(c)">
<button v-if="isSelf && isTurn && selfTurn.discard_markers > 0" @click="discard(c)">DISCARD</button>
<button v-if="isSelf && isTurn && selfTurn.discard_markers == 0" @click="lockCard(c)">LOCK</button>
</CardPreview>
</div>
<br>
stack =
<CardSlot :stack="props.player.stack_pile">
<button v-if="isSelf && isTurn" @click="draw">DRAW</button>
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
</CardSlot>
<br>
discard =
@@ -110,17 +113,17 @@ function setHealth(event: Event) {
<input type="checkbox" v-model="discard_wrapped" />
<CardPreview v-if="!discard_wrapped" :data="props.player.discard_pile.at(-1)">
<button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
<!-- <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>
<button v-if="isSelf && isTurn" @click="sacrifice(props.player.discard_pile.at(-1))">SACRIFICE</button> -->
</CardPreview>
<template v-if="discard_wrapped" 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="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" @click="sacrifice(c)">SACRIFICE</button> -->
</CardPreview>
</template>
public/cards/background.jpg
LFS
BIN
View File
Binary file not shown.