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

experimental css changes

Browse Source
This commit is contained in:
legonzaur
2024-05-01 14:26:20 +02:00
parent 7536f0e3d5
commit 55c6b47767
6 changed files with 60 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.vue
+6
View File
@@ -18,3 +18,9 @@ let username = ref<string>('legonzaur')
<GameBoard></GameBoard>
</div>
</template>
<style>
html {
text-align: center;
}
</style>
components/CardPreview.vue
+2 -2
View File
@@ -3,7 +3,7 @@ import type { Card } from '~/netcode/Card';
export interface Props {
data?: Card | null
data: Card | null | undefined
locked?: boolean
}
@@ -15,7 +15,7 @@ const buttonsElement = ref<HTMLElement | null>(null)
const rightClicked = ref(false)
function cardClick() {
if (props.data == null) return
if (!props.data) return
emit("click")
}
components/CardSlot.vue
+5 -13
View File
@@ -9,20 +9,19 @@ const props = withDefaults(defineProps<Props>(), {
stack: () => [],
})
const wrapped = ref(false)
const unwrapped = ref(false)
</script>
<template>
{{ props.stack?.length }}
<input type="checkbox" v-model="wrapped" />
<input type="checkbox" v-model="unwrapped" />
<div class="cards_container">
<CardPreview v-if="!wrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
<CardPreview v-if="!unwrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
<slot></slot>
</CardPreview>
<template v-if="wrapped" v-for="c in props.stack">
<template v-if="unwrapped" v-for="c in props.stack">
<CardPreview :data="c">
<slot></slot>
</CardPreview>
@@ -31,11 +30,4 @@ const wrapped = ref(false)
</template>
<style scoped>
.cards_container {
display: flex;
flex-direction: row;
}
</style>
</template>
components/GameBoard.vue
+1
View File
@@ -71,5 +71,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
.cards_container {
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
components/PlayerSlot.vue
+40
View File
@@ -112,7 +112,46 @@ const discard_unwrapped = ref(false)
</CardPreview>
</div>
stack =
<CardSlot :stack="props.player.stack_pile">
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
</CardSlot>
<br>
discard =
{{ props.player.discard_pile.length }}
<input type="checkbox" v-model="discard_unwrapped" />
<CardPreview v-if="!discard_unwrapped && props.player.discard_pile.length > 0"
: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="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
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_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 && 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>
</div>
</template>
@@ -134,6 +173,7 @@ const discard_unwrapped = ref(false)
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
}
.turn_icon img {
components/SelfView.vue
+6 -7
View File
@@ -61,16 +61,15 @@ const discard_unwrapped = ref(false)
</div>
</div>
<div class="cards_container" id="self_hand">
<button v-if="isSelf && isTurn && props.player.hand.length > 1"
@click="playAllCards(props.player.hand as Card[])">
PLAY ALL
</button>
<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>
<button v-if="isSelf && isTurn && props.player.hand.length > 1"
@click="playAllCards(props.player.hand as Card[])">
PLAY ALL
</button>
</div>
<span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
@@ -118,7 +117,7 @@ const discard_unwrapped = ref(false)
{{ props.player.discard_pile.length }}
<input type="checkbox" v-model="discard_unwrapped" />
<CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1) ?? null">
<CardPreview v-if="!discard_unwrapped" :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="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
STACK</button> -->
@@ -128,7 +127,7 @@ const discard_unwrapped = ref(false)
@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_unwrapped" 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>