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

WIP : better layout

Browse Source
This commit is contained in:
legonzaur
2024-05-30 00:21:39 +02:00
parent 6ae1ce701d
commit 4d66dea14c
6 changed files with 209 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+8 -1
View File
@@ -79,6 +79,7 @@ onMounted(() => {
max-width: 256px;
position: relative;
display: flex;
justify-content: center;
margin-bottom: 0px;
margin-top: var(--margin-bottom);
transition: filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
@@ -94,6 +95,7 @@ onMounted(() => {
.card_image {
max-height: var(--max-height);
z-index: 1;
height: var(--max-height);
}
.card_image.outlined {
@@ -138,7 +140,12 @@ onMounted(() => {
}
.card.wrapped {
max-width: 10px;
max-height: 6px;
margin: 0;
}
.card.wrapped .card_image {
filter: drop-shadow(.5px .5px .5px gray) drop-shadow(-.5px -.5px .5px gray);
}
#contextMenuButtons {
components/CardsGrouped.vue
+16 -19
View File
@@ -12,41 +12,38 @@ const props = withDefaults(defineProps<Props>(), {
</script>
<template>
<div>
<div class="cards_container">
<template v-if="props.stack.length > 0" v-for="c in props.stack">
<CardPreview :card_id="c?.card_id" :wrapped="true">
<slot></slot>
</CardPreview>
</template>
<template v-if="props.stack.length == 0">
<div class="empty">
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
</div>
<div class="cards_container">
<template v-if="props.stack.length > 0" v-for="c in props.stack">
<CardPreview :card_id="c?.card_id" :wrapped="true">
<slot></slot>
</CardPreview>
</template>
<template v-if="props.stack.length == 0">
<div class="empty">
<img :class="`card_image`" :src="'/cards/background.png'" draggable="false">
</div>
</template>
</div>
</template>
</div>
</template>
<style scoped>
.cards_container::before {
width: calc(185px - 10px);
height: calc(250px - 10px);
display: block;
content: "";
height: 0;
width: 0;
}
.cards_container {
display: flex;
flex-direction: row-reverse;
flex-direction: column-reverse;
justify-content: center;
min-width: 200px;
}
.empty {
max-width: 10px;
max-height: 10px;
}
.empty>.card_image {
components/MarketCards.vue
+57 -16
View File
@@ -2,35 +2,59 @@
import goStore, { buy, useEffect } from '@/netcode';
import { CardEffects, type Effect } from '@/netcode/Effect'
import { CardType } from '@/netcode/Card'
import gsap from 'gsap'
const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
const clientStore = useClientSideStore()
const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
function onBeforeEnter(el: Element) {
(el as HTMLElement).style.visibility = "hidden"
const element = el as HTMLElement
element.style.top = element.offsetTop + "px"
element.style.left = element.offsetLeft + "px"
element.style.zIndex = "999"
}
function onEnter(el: any, done: () => unknown) {
console.log("enter")
// setTimeout(() => {
// el.style.visibility = null
// done()
// }, 1000)
done()
}
</script>
<template>
<div id="market">
<CardPreview :tilted="false" :card_id="undefined"></CardPreview>
<div class="separator"></div>
<CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
@click="c && buy(c)">
<template
v-if="isTurn && goStore.self?.turn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
<button @click.stop="buy(c)">BUY</button>
<button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, c);"
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN HAND</button>
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, c)"
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN STACK (generic)</button>
<TransitionGroup name="market_card">
<CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
:key="c?.card_id" @click="c && buy(c)">
<template
v-if="isTurn && goStore.self?.turn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
<button @click.stop="buy(c)">BUY</button>
<button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, c);"
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN HAND</button>
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, c)"
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
BUY IN STACK (generic)</button>
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_ACTION_BOUGHT, c)"
v-if="c.card_type == CardType.ACTION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
BUY IN STACK (actions)</button>
</template>
</CardPreview>
<button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_ACTION_BOUGHT, c)"
v-if="c.card_type == CardType.ACTION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
BUY IN STACK (actions)</button>
</template>
</CardPreview>
</TransitionGroup>
<div class="separator"></div>
<CardPreview :tilted="false" :card_id="goStore.current_game?.gem_stack.at(-1)?.card_id"
@click="buy(goStore.current_game?.gem_stack.at(-1)!)">
@@ -52,6 +76,23 @@ const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
</template>
<style scoped>
/* .market_card-leave-active,
.market_card-move {
display: none;
}
.market_card-enter-from {
transform: translate(-500px);
}
.market_card-enter-active,
.market_card-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
} */
</style>
<style scoped>
#market {
width: min-content;
components/PlayerListElement.vue
+89 -116
View File
@@ -2,152 +2,125 @@
import goStore from '@/netcode';
import type { Player } from "~/netcode/Player";
const emit = defineEmits(['click'])
const view = ref<"main" | "discard">("main")
function show(data: "main" | "discard") {
view.value = data
}
export interface Props {
player: Player;
focused?: Player
}
const props = defineProps<Props>()
</script>
<template>
<div :class="`player_list_element ${goStore.self === props.player ? 'self' : ''}`">
<!-- <AnimatedBackground v-if="goStore.self === props.player" :color-start="[.0, .3, .3]" :color-end="[.0, 1, 1]" /> -->
<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 class="player_list_element" @click="$emit('click')"
:class="{ self: props.player == goStore.self, focused: props.focused == props.player, isTurn: props.player.team == goStore.current_game?.current_turn }">
<div id="player_banner" class="small">
<div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
prêt...
</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 class="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
<div id="player_info">
<PlayerIcon :player="props.player"></PlayerIcon>
</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 id="player_stats">
<template v-if="goStore.current_game?.started">
<PlayerStats :player="props.player">
</PlayerStats>
</template>
</div>
</div>
<div class="view">
<PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
<template v-if="view == 'discard'">
<CardPreview :tilted="false" v-for=" card in player.discard_pile " :card_id="card.card_id">
</CardPreview>
</template>
</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;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
padding-right: 1em;
}
.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: 5px solid black;
min-height: 200px;
position: relative;
}
.player_list_element.self {
/* background-image: url('/images/bg-grass.png'); */
}
.view {
border-radius: 10px;
margin: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
transform: translate(-2.5px, -7.5px);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
box-sizing: border-box;
transition: all .1s;
width: 300px;
cursor: pointer
}
.player_list_element::before {
border-radius: 10px;
background: rgb(15, 179, 255);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .5;
}
.player_list_element.focused {
filter: unset;
transform: unset;
}
.player_list_element.isTurn::before {
opacity: .1;
}
.player_list_element.self::before {
background: rgb(33, 177, 76);
}
#player_banner {
display: flex;
grid-area: player_stats;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
z-index: 1;
pointer-events: none;
}
#player_banner.small {
flex-direction: row
}
#player_banner>* {
pointer-events: all;
}
#player_stats {
display: flex;
grid-area: player_stats;
flex-direction: row;
align-items: 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;
.ready-bubble {
color: white;
padding: 0.5em;
border-radius: 1em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.view #contextMenuButtons button:not(.enemy_action) {
display: none
.ready {
background-color: green;
}
.not-ready {
background-color: maroon;
}
</style>
components/PlayerSlot.vue
+38 -173
View File
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
hide_stack_and_discard: () => false,
})
const discard_unwrapped = ref(false)
const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
@@ -38,8 +38,8 @@ const make_discard = (target: Player) =>
clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
const sacrifice = (target: Card) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
const stun = (target: Card) => clientStore.findUseEffect(CardEffects.STUN, target)
const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
// const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
// const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
const prepare_champion = (target: Card) => clientStore.findUseEffect(CardEffects.PREPARE, target)
@@ -92,70 +92,19 @@ function check_for_guard(player: Player) {
</script>
<template>
<div class="player" :class="{ turn: isPlayerTurn, discard_unwrapped, self: isSelf }">
<template v-if="!hide_stack_and_discard">
<div class="stack">
<div class="player" :class="{ turn: isPlayerTurn, self: isSelf }">
<div id="player_banner" class="big">test</div>
<div id="turn_buttons">
<button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
@click="checkEndTurn">END TURN</button>
<CardsGrouped :stack="props.player.stack_pile">
<!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
</CardsGrouped>
</div>
<div class="discard" :class="{ invisible: discard_unwrapped }" @click="() => discard_unwrapped = true">
<CardsGrouped :stack="props.player.discard_pile" :visible="!discard_unwrapped"> </CardsGrouped>
</div>
<div class="discard_overlay" v-if="discard_unwrapped">
<CardPreview :tilted="false" v-if="discard_unwrapped" :card_id="c.card_id"
v-for="c in props.player.discard_pile">
<template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
<button
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.SACRIFICE) && e.usable)"
@click.stop="sacrifice(c)">
SACRIFICE
</button>
<button
v-if="c.card_type == CardType.CHAMPION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
@click.stop="restack_discarded_champion(c)">
RESTACK_DISCARDED_CHAMPION
</button>
<button
v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
@click.stop="restack_discarded_card(c)">
RESTACK_DISCARDED_CARD
</button>
</template>
</CardPreview>
</div>
<div :id="`discard_unwrapped_bg`" :class="`${discard_unwrapped ? 'unwrapped' : ''}`"
@click="() => discard_unwrapped = false"></div>
</template>
<div id="player_banner" :class="hide_stack_and_discard ? 'small' : 'big'">
<div class="ready-bubble not-ready" v-if="!props.player.ready && !goStore.current_game?.started">Pas encore
prêt...
</div>
<div class="ready-bubble ready" v-if="props.player.ready && !goStore.current_game?.started">Prêt!</div>
<div id="player_info">
<PlayerIcon :player="props.player"></PlayerIcon>
</div>
<div id="player_stats">
<template v-if="goStore.current_game?.started">
<PlayerStats :player="props.player">
</PlayerStats>
<template v-if="!hide_stack_and_discard">
<button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isSelfTurn }"
@click="checkEndTurn">END TURN</button>
<div class="warning"
:class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
/!\<br>{{ warningText }}
</div>
</template>
</template>
<div class="warning"
:class="{ 'warning-fire-gem': warningText == 'P\'tite Fire gem?', 'visible': warning }">
/!\<br>{{ warningText }}
</div>
</div>
<div id="current_player_board">
<div class="other_player_buttons_container">
<button @click.stop="damage_team(props.player.team)"
@@ -179,13 +128,16 @@ function check_for_guard(player: Player) {
<div class="cards_container">
<!-- HAND -->
<CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
<button
v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
@click.stop="discard(c)">
DISCARD
</button>
</CardPreview>
<template v-if="props.player != goStore.self">
<CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
<button
v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
@click.stop="discard(c)">
DISCARD
</button>
</CardPreview>
</template>
<!-- BOARD -->
<CardPreview :card_id="c.card_id" v-for="c in props.player.board" @click="lockCard(c)"
:locked="props.player.turn && c.uuid in props.player.turn.cards_locked">
@@ -269,6 +221,13 @@ function check_for_guard(player: Player) {
background-color: rgba(255, 165, 0, 0.7);
}
#turn_buttons {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
#end_turn {
z-index: 10;
height: 100%;
@@ -305,74 +264,24 @@ function check_for_guard(player: Player) {
visibility: hidden;
}
.discard_overlay {
z-index: 9;
display: flex;
/* background: blue; */
pointer-events: none;
gap: 2px;
flex-wrap: wrap-reverse;
align-content: flex-end;
cursor: default;
position: absolute;
padding-bottom: inherit;
padding-left: 40px;
height: calc(100% - 64px);
padding-top: 64px;
width: calc(100% -40px);
margin-left: 0;
}
#discard_unwrapped_bg {
display: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 8;
background: rgba(0, 0, 0, 0.5);
pointer-events: all;
padding: inherit;
}
#discard_unwrapped_bg.unwrapped {
display: block;
}
.player {
display: grid;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content min-content 1fr;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
/* border-top: 5px solid black; */
grid-template-areas:
"player_stats player_stats"
"stack player"
"discard player";
"player_stats"
"player";
transition: all 1s;
justify-items: center;
/* margin-bottom: -75px;
padding-bottom: 75px; */
}
.discard_overlay {
grid-template-areas:
"player_stats player_stats"
"stack player";
}
#current_player_board {
grid-area: player;
}
.other_player_buttons_container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0 5px;
}
.damage_button {
background-color: #ff4d4d;
color: white;
@@ -454,28 +363,6 @@ function check_for_guard(player: Player) {
}
#player_banner {
display: flex;
grid-area: player_stats;
flex-direction: row;
align-items: center;
justify-content: center;
position: sticky;
top: 0;
padding-top: 1em;
z-index: 1;
pointer-events: none;
}
#player_banner.small {
flex-direction: column
}
#player_banner>* {
pointer-events: all;
}
#player_info {
display: flex;
align-items: center;
@@ -483,9 +370,9 @@ function check_for_guard(player: Player) {
}
#player_banner.big {
padding: 0;
/* padding: 0;
left: 50%;
transform: translateX(-50%);
transform: translateX(-50%); */
max-width: min-content;
border: 5px solid black;
border-radius: 10px;
@@ -493,13 +380,7 @@ function check_for_guard(player: Player) {
backdrop-filter: blur(5px) brightness(80%) hue-rotate(0deg) grayscale(80%);
}
#player_stats {
display: flex;
grid-area: player_stats;
flex-direction: row;
align-items: center;
justify-content: center;
}
#player_banner img {
height: 50px;
@@ -545,22 +426,6 @@ function check_for_guard(player: Player) {
/* Remove shadow on click */
}
.ready-bubble {
color: white;
padding: 0.5em;
border-radius: 1em;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 3%;
}
.ready {
background-color: green;
}
.not-ready {
background-color: maroon;
}
.suicide_effect {
background: linear-gradient(to bottom right, #666666, #ccc);
color: red;
netcode/interfaces
Submodule
+1
Submodule netcode/interfaces added at 89c03fe650