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

Merge branch 'feat/panels-visuals' into feat/netcode-rework

Browse Source
This commit is contained in:
legonzaur
2024-05-30 19:28:30 +02:00
parent 60ab679756 83fe97a427
commit c0e02defa8
21 changed files with 1337 additions and 898 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/GameBoard.vue
-144
View File
@@ -1,144 +0,0 @@
<script setup lang="ts">
import goStore from '~/netcode';
import type { Player } from '~/netcode/Player';
import { playSound } from '~/helpers/audioHelpers';
const current_players = computed<Array<Player>>(() => Array.from(goStore.current_game?.players ?? []).filter(p => p.team === goStore.current_game?.current_turn))
watch(
() => goStore.current_game?.current_turn?.uuid,
() => {
if (goStore.current_game?.current_turn?.uuid == goStore.self?.team?.uuid) {
playSound('/sounds/ding.mp3')
}
})
watch(
() => goStore.current_game?.losers,
() => {
if (goStore.self?.uuid && goStore.current_game?.losers && goStore.current_game.losers.includes(goStore.self.uuid)) {
showLoserScreen()
}
})
watch(
() => goStore.current_game?.ended,
() => {
if (goStore.current_game?.ended && goStore.self?.uuid && goStore.current_game?.losers && !goStore.current_game.losers.includes(goStore.self.uuid)) {
showWinnerScreen()
}
})
watch(
() => goStore.current_game?.players,
(newList, oldList) => {
if (!oldList || !newList) { return }
if (goStore.current_game?.started) { return }
if (newList?.length > oldList.length) {
playSound('/sounds/teleport.mp3')
}
})
const showResults = ref(false)
const showOptions = ref(false)
const isWinner = ref(false)
function showLoserScreen() {
// playSound('/sounds/ding.mp3')
showResults.value = true
isWinner.value = false
}
function showWinnerScreen() {
// playSound('/sounds/ding.mp3')
showResults.value = true
isWinner.value = true
}
</script>
<template>
<div @contextmenu.prevent="false" id="game_board">
<AnimatedBackground></AnimatedBackground>
<div id="market">
<MarketCards></MarketCards>
</div>
<div id="player_list_container">
<div id="player_list">
<PlayerListElement v-for="p in goStore.current_game?.players" :player="p">
</PlayerListElement>
</div>
</div>
<div id="current_player">
<template v-for="p in current_players">
<!-- <AnimatedBackground :color-start="goStore.self == p ? [.0, .3, .3] : undefined"
:color-end="goStore.self == p ? [.0, 1, 1] : undefined" /> -->
<PlayerSlot :player="p"></PlayerSlot>
</template>
</div>
</div>
<ResultDialog :isVisible="showResults" :won="isWinner" :players="goStore.current_game?.players"
@close="showResults = false">
</ResultDialog>
<GlobalOverlay></GlobalOverlay>
<SelfView></SelfView>
</template>
<style scoped>
#game_board {
display: grid;
grid-template-columns: 1fr 450px;
grid-template-rows: min-content 1fr;
grid-template-areas:
"market player_list"
"current_player player_list";
height: 100%;
}
#player_list,
#current_player {
overflow: auto;
position: relative;
isolation: isolate;
/* background: url('/images/bg-darkgrass.png'); */
}
#current_player {
grid-area: current_player;
}
#market {
display: flex;
flex-direction: row;
justify-content: center;
}
#player_list_container {
grid-area: player_list;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
/* background-image: url("/images/bg-darkgrass.png"); */
}
#player_list {
min-height: 90%;
background: rgba(0, 0, 0, 0.35);
border: 5px solid #000;
border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
margin: 10px;
backdrop-filter: blur(10px) contrast(90%) brightness(165%);
background: rgba(26, 70, 91, 0.7);
}
</style>
<style>
#player_list .card {
--max-height: 90px;
}
</style>
components/LobbyView.vue
-244
View File
@@ -1,244 +0,0 @@
<script setup lang="ts">
import goStore, { netcode_create_game, join_game } from '~/netcode';
import { playSound } from '~/helpers/audioHelpers';
import { ref } from 'vue';
const erika_alive = ref(true);
const router = useRouter();
function killErika() {
playSound('/sounds/splat1.mp3')
erika_alive.value = false;
}
</script>
<template>
<div class="background">
<div class="title">
Entrez dans le Royaume de Héron !
</div>
<div class="middle-row">
<div class="create-game-zone">
<button @click="netcode_create_game">Create Game</button>
</div>
<div class="games-list-zone">
<div v-for="g in goStore.lobby?.games">
<button v-if="g" @click="join_game(g.uuid)" :class="goStore.discordId == g.owner ? 'own_game' : ''">
<template v-if="g.started && g.ended">
GAME OVER
</template>
<template v-if="g.players.every(p => p.discord_id !== goStore.discordId)">
<template v-if="!g.started">
JOIN
</template>
<template v-if="g.started && !g.ended">
SPECTATE
</template>
</template>
<template v-if="g.players.some(p => p.discord_id == goStore.discordId)">
<template v-if="!g.started">
JOIN BACK
</template>
<template v-if="g.started && !g.ended">
CONTINUE
</template>
</template>
<br>
{{ g.players.length }} current players:<br><span>{{ g.players.map(p => p.username).join(",")
}}</span>
</button>
</div>
</div>
</div>
<div class="overlay" v-if="erika_alive">
<div class="erika-zone">
<img @click="router.push({ path: 'rules' })" class="overlay-image"
src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
alt="pétasse" />
<div class="overlay-button">
<button class="kill-erika-button" @click.stop="killErika()">Tuer Erika</button>
</div>
</div>
<div class="speech-bubble" @click.prevent.self>
<p>Ohoho!<br>Je suis Erika Furudo, la détective la plus forte du monde !</p>
<p>Je vais vous montrer comment jouer à Héron Realms !</p>
<p>Cliquez moi-dessus pour afficher les <span style="color: red">règles</span>.</p>
<p>Ou sinon, commencez direct en créant une partie ou rejoingnant une partie existante.</p>
</div>
</div>
</div>
</template>
<style scoped>
.background {
background-color: #f0f0f0;
background-image: url('https://www.pockettactics.com/wp-content/sites/pockettactics/2023/01/fire-emblem-engage-review-29.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.title {
font-family: 'Kanit', 'Roboto', sans-serif;
font-size: 64px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 100px;
}
.middle-row {
display: flex;
flex-direction: column;
gap: 100px;
margin-bottom: 100px;
}
.create-game-zone {
display: flex;
flex-direction: column;
gap: 10px;
button {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin: auto;
cursor: pointer;
border-radius: 12px;
padding: 10px 24px;
height: 50px;
transition-duration: 0.4s;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
.games-list-zone {
display: flex;
flex-direction: column;
gap: 20px;
button {
background-color: rgba(0, 0, 0, 0.8);
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin: auto;
cursor: pointer;
border-radius: 12px;
padding: 20px 24px;
height: 120px;
transition-duration: 0.4s;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
button.own_game {
border: solid yellow 5px;
}
}
.overlay {
height: 100%;
width: 100%;
position: absolute;
pointer-events: none;
}
.erika-zone {
position: absolute;
top: 60%;
display: flex;
justify-content: right;
z-index: 2;
height: 40%;
width: 100%;
object-fit: cover;
.overlay-image {
position: absolute;
height: 100%;
cursor: pointer;
pointer-events: all;
}
.overlay-button {
position: absolute;
z-index: 1;
width: 300px;
box-sizing: border-box;
pointer-events: none;
.kill-erika-button {
display: none;
pointer-events: all;
background-color: #f44336;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin: auto;
cursor: pointer;
border-radius: 12px;
padding: 10px 24px;
height: 50px;
transition-duration: 0.4s;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
}
}
.speech-bubble {
position: absolute;
top: 60%;
right: 260px;
z-index: 1;
background-color: rgba(225, 225, 225, 0.8);
padding: 10px;
border-radius: 10px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
font-family: 'Kanit', 'Roboto', sans-serif;
font-size: 16px;
color: black;
text-align: center;
max-width: 420px;
line-height: 1.5;
}
.erika-zone:hover {
.overlay-button {
.kill-erika-button {
display: inline-block;
}
}
}
</style>
components/LoginView.vue
-106
View File
@@ -1,106 +0,0 @@
<script setup lang="ts">
import goStore, { netcode_create_game, join_game } from '~/netcode';
const config = useRuntimeConfig()
async function discordLogin() {
await navigateTo(config.public.discordLoginEndpoint, {
external: true
})
}
</script>
<template>
<div class="background">
<div class="title">
Entrez dans le Royaume de Héron !
</div>
<div class="middle-row">
<div class="icon">
<CardPreview :card_id="undefined"></CardPreview>
</div>
<div v-if="goStore.current_game?.started">
<b>Mode spectateur</b>
</div>
<template v-if="!goStore.current_game?.started">
<!-- <input type="text" v-model="username" />
<button @click="register(username)">LOGIN</button> -->
<button class="menu-button" @click="discordLogin()">Se connecter via Discord</button>
</template>
</div>
<footer>
<p>
Héron Realms n'est en aucun cas affilié à Hero Realms.<br>
Le concept et certains noms de cartes sont la propriété de Wise Wizard Games.<br>
Les illustrations sont la propriété de leurs auteurs respectifs (il y en a plein).<br>
Ce magnifique fond d'écran est tiré de Fire Emblem: Engage.<br>
Programmeur principal, owner du projet: Legonzaur
</p>
</footer>
</div>
</template>
<style scoped>
.background {
background-color: #f0f0f0;
background-image: url('https://www.pockettactics.com/wp-content/sites/pockettactics/2023/01/fire-emblem-engage-review-29.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
.title {
font-family: 'Kanit', 'Roboto', sans-serif;
font-size: 64px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 100px;
}
.middle-row {
display: flex;
flex-direction: row;
gap: 100px;
margin-bottom: 100px;
}
.menu-button {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin: auto;
cursor: pointer;
border-radius: 12px;
padding: 20px 24px;
height: 120px;
transition-duration: 0.4s;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
footer {
position: absolute;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
color: white;
width: 100%;
font-family: 'Roboto', sans-serif;
font-size: 12px;
text-align: center;
}
</style>
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/PlayerIcon.vue
+2 -2
View File
@@ -12,7 +12,7 @@ const props = defineProps<Props>()
<template>
<div class="player-icon-container">
<img class="avatar" v-if="props.player.image" :src="props.player.image">
<img class="avatar" v-if="props.player.image" :src="props.player.image" draggable="false">
<b class="player-name">{{ props.player.username }}</b>
</div>
</template>
@@ -31,7 +31,7 @@ const props = defineProps<Props>()
.player-name {
font-size: 20px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: 10px;
color: white;
components/PlayerListElement.vue
+88 -121
View File
@@ -2,7 +2,8 @@
import goStore from '@/netcode';
import type { Player } from "~/netcode/Player";
const settingsStore = useSettingsStore()
const emit = defineEmits(['click'])
const view = ref<"main" | "discard">("main")
@@ -10,150 +11,116 @@ 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/${settingsStore.cardStyle}/${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/${settingsStore.cardStyle}/${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: hidden;
position: absolute;
transition: .1s transform;
background: white;
right: -0px;
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
padding-right: 1em;
transition-property: visibility, transform;
transition-duration: 0.5s, 0.1s;
transition-timing-function: ease-in-out, ease-in-out;
}
.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;
display: block;
transform: translateX(100%);
transition-duration: 0, 0.1s;
}
.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
+46 -167
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)
@@ -91,70 +91,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)"
@@ -178,13 +127,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">
@@ -268,6 +220,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%;
@@ -304,52 +263,16 @@ 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;
<<<<<<< HEAD
/* margin-bottom: -75px;
padding-bottom: 75px; */
}
@@ -358,20 +281,16 @@ function check_for_guard(player: Player) {
grid-template-areas:
"player_stats player_stats"
"stack player";
=======justify-items: center;
/* margin-bottom: -75px;
padding-bottom: 75px; */
>>>>>>>feat/panels-visuals
}
#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;
@@ -453,28 +372,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;
@@ -482,23 +379,21 @@ function check_for_guard(player: Player) {
}
#player_banner.big {
padding: 0;
<<<<<<< HEAD padding: 0;
left: 50%;
transform: translateX(-50%);
max-width: min-content;
=======
/* padding: 0;
left: 50%;
transform: translateX(-50%); */
>>>>>>>feat/panels-visuals max-width: min-content;
border: 5px solid black;
border-radius: 10px;
filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
backdrop-filter: blur(5px) brightness(80%) grayscale(80%);
}
#player_stats {
display: flex;
grid-area: player_stats;
flex-direction: row;
align-items: center;
justify-content: center;
}
#player_banner img {
height: 50px;
@@ -544,22 +439,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;
components/PlayerStats.vue
+5 -5
View File
@@ -17,20 +17,20 @@ const props = defineProps<Props>()
{{ player.team?.health }}
</span>
</div>
<div class="turn_icon">
<!-- <div class="turn_icon" v-if="showTurnData">
<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">
<div class="turn_icon" v-if="showTurnData">
<img src="/images/damage.png" class="icon_img" draggable="false" />
<span class="turn_icon_number">
{{ player.turn?.damage_reserve }}
</span>
</div>
</div> -->
<div class="turn_icon">
<span class="icon_img">🖕</span>
<img src="/images/fuck.svg" class="icon_img" draggable="false" />
<span class="turn_icon_number">{{ (player.turn?.discard_markers ?? 0) + (player.turn?.fuck_u_markers ?? 0)
}}</span>
</div>
@@ -47,11 +47,11 @@ const props = defineProps<Props>()
display: flex;
justify-content: center;
align-items: center;
height: 50px;
}
img.icon_img {
height: 50px;
width: 50px;
}
span.icon_img {
components/RulesDisplay.vue
-319
View File
@@ -1,319 +0,0 @@
<script setup lang="ts">
import type { Card } from '~/netcode/Card';
const router = useRouter();
</script>
<template>
<div class="background">
<div class="overlay-2">
<div class="erika-zone-2">
<img @click="router.push({ path: '/' })" class="overlay-image"
src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
alt="pétasse" />
</div>
</div>
<div class="text-content">
<h1>Règles de Héron Realms</h1>
<section>
<p>Héron Realms, c'est un jeu de <span style="text-decoration:line-through;">héron building</span>
deck-building.</p>
<p>Tout le monde part d'un même deck de base.</p>
<p>Le but du jeu est de l'enrichir pour obtenir de quoi gagner.</p>
<p>Et comme la violence est une solution universelle, ça se traduit en battre ses adversaires.</p>
<p>&#8203;</p>
<p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
<div class="card-row">
<CardPreview :card_id="6" :tilted="false"></CardPreview>
<CardPreview :card_id="19" :tilted="false"></CardPreview>
<CardPreview :card_id="36" :tilted="false"></CardPreview>
<CardPreview :card_id="46" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<hr>
<p>&#8203;</p>
<h2>Objectif</h2>
<p>L'unique objectif du jeu est d'être le dernier en lice. Pour y arriver, il faut descendre les Points
de Vie de vos adversaires à 0 en partant de 50.</p>
<p>
Le moyen principal d'y arriver, c'est de faire des <span style="color: red">Dégats</span> <img
src="/images/damage.png" class="icon_img" draggable="false" />. Tout le reste des mécaniques du
jeu sont là pour vous faciliter la tâche,
ou pour mettre des bâtons dans les roues de vos adversaires.
</p>
<p>&#8203;</p>
<hr>
<h2>Deckbuilding</h2>
<p>Comme c'est un jeu de "deckbuilding", on va expliquer ce qu'est le "deck" et ce qui nous permet de le
"build".</p>
<div class="card-row">
<CardPreview :card_id="undefined" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<p>
Le deck d'un joueur est-ce qui constitue sa pioche, qui lui permettra ensuite de constituer sa main
(la main est préparée à la fin du tour et permet de jouer le tour d'après).
</p>
<p>
Quand la pioche est vide, elle est recyclée à partir de sa défausse.
</p>
<p>
La défausse est ce qui contient les cartes déjà jouées. Mais aussi celles qui sont achetées! Elle
finit par être mélangée pour former la nouvelle pioche.
</p>
<p>&#8203;</p>
<hr>
<h2>Deck de base</h2>
<p>
Tout le monde commence avec 10 cartes divisées en 4 types:
</p>
<ul>
<li>7x Or (1)</li>
<li>1x Or (2)</li>
<li>1x Dégats (1)</li>
<li>1x Dégats (2)</li>
</ul>
<div class="card-row">
<CardPreview :card_id="56" :tilted="false"></CardPreview>
<CardPreview :card_id="59" :tilted="false"></CardPreview>
<CardPreview :card_id="58" :tilted="false"></CardPreview>
<CardPreview :card_id="57" :tilted="false"></CardPreview>
</div>
<p>
La pioche est formée au hasard: on peut donc avoir une main de départ avec 5 or et 2 dégats, ou 3 or
et 4 dégats, ou 4 or et 3 dégats, etc.
</p>
<p>
A partir de sa main, on peut jouer des cartes. Ces cartes peuvent déclencher des effets: on peut
considérer qu'ils vont dans un "pool commun", et qu'on peut les utiliser dans
l'ordre qu'on souhaite. 1 de dégats et 2 de dégats me donnent 3 ressources de dégats que je split
comme je veux ensuite. Pareil pour l'or et pour le soin, qui sont les 3 ressources
principales du jeu.
</p>
<p>&#8203;</p>
<hr>
<h2>Types de cartes</h2>
<p>
Les cartes sont divisées en 3 catégories: objets, actions et champions.
</p>
<div class="card-row">
<CardPreview :card_id="56" :tilted="false"></CardPreview>
<CardPreview :card_id="52" :tilted="false"></CardPreview>
<CardPreview :card_id="43" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<h3>Objets & actions</h3>
<div class="card-row">
<CardPreview :card_id="56" :tilted="false"></CardPreview>
<CardPreview :card_id="52" :tilted="false"></CardPreview>
</div>
<p>
Par simplicité, disons que les objets et les actions sont pareil: on les joue, ils font un effet
disponible durant le tour actuel, et ils sont défaussés.
</p>
<h3>Champions (& gardes)</h3>
<div class="card-row">
<CardPreview :card_id="43" :tilted="false"></CardPreview>
</div>
<p>
Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à
chaque tour (en les mobilisant).
</p>
<p>Ils ont une défense <img src="/images/champion-shield.png" style="height: 30px" draggable="false" />
indiquée en bas à droite et ils ne sont assommés (défaussés) que si on leur fait des dégats =
défense.</p>
<p>Ces dégats doivent être faits d'un coup. Je ne peux pas faire un peu de dégats pendant un tour, et un
peu le tour d'après pour les tuer.</p>
<div class="card-row">
<CardPreview :card_id="49" :tilted="false"></CardPreview>
</div>
<p>
Par ailleurs, certains champions sont des Gardes <img src="/images/champion-shield-guard.png"
style="height: 30px" draggable="false" /> (ils ont un bouclier noir), ce qui veut dire qu'on est
obligés de les tuer pour faire des dégats à des champions non-gardes ou au joueur.
</p>
<p>
(J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur
directement ou ses champions.)
Incidentellement, ça veut dire qu'avec seulement 2 de dégats, je ne peux rien faire à un joueur avec
un garde à 3 de défense.
</p>
<p>&#8203;</p>
<hr>
<h2>Building</h2>
<p>
Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous
avez suivi, constituera la prochaine pioche.
Avec le jeu de base, <span style="color: darkgoldenrod">l'or</span> <img src="/images/gold.png"
class="icon_img" draggable="false" /> sert exclusivement à accomplir ce but: acheter des cartes.
</p>
<div class="card-row">
<CardPreview :card_id="6" :tilted="false"></CardPreview>
<CardPreview :card_id="19" :tilted="false"></CardPreview>
<CardPreview :card_id="36" :tilted="false"></CardPreview>
<CardPreview :card_id="46" :tilted="false"></CardPreview>
</div>
<p>
Un marché est mis à disposition de tous les joueurs, mettant à disposition 5 cartes (pas ici parce
que j'ai pas la place).
</p>
<p>
Ces cartes ont chacune un coût indiqué en haut à droite.
Il faut au moins autant d'or que ce qui est indiqué pour acheter une carte. Une carte achetée laisse
la place à une nouvelle carte directement, qu'on peut
décider d'acheter juste après (tant qu'on a l'argent).
</p>
<p>
Il ne nous reste plus qu'à comprendre ce que font les cartes du marché, puisqu'elles sont plus
complexes (et bien plus fortes) que votre deck de base.
Prenons des exemples!
</p>
<hr>
<h2>Couleurs</h2>
<p>
La première chose qui ne vous échappera pas, c'est qu'on a 4 couleurs différentes pour les cartes.
</p>
<p>&#8203;</p>
<div class="card-row">
<CardPreview :card_id="13" :tilted="false"></CardPreview>
<CardPreview :card_id="3" :tilted="false"></CardPreview>
<CardPreview :card_id="1" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<p>Les cartes <span style="color: darkgoldenrod">jaunes</span> sont les cartes Empire.</p>
<p>Elles font beaucoup de soin, et activent souvent des effets de pioche.</p>
<p>&#8203;</p>
<div class="card-row">
<CardPreview :card_id="39" :tilted="false"></CardPreview>
<CardPreview :card_id="34" :tilted="false"></CardPreview>
<CardPreview :card_id="40" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<p>Les cartes <span style="color: red">rouges</span> sont les cartes Necros.</p>
<p>Elles sont les seules à pouvoir sacrifier des cartes pour les sortir de son deck de façon permanente.
</p>
<p>&#8203;</p>
<div class="card-row">
<CardPreview :card_id="52" :tilted="false"></CardPreview>
<CardPreview :card_id="46" :tilted="false"></CardPreview>
<CardPreview :card_id="47" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<p>Les cartes <span style="color: darkgreen">vertes</span> sont les cartes Sauvages.</p>
<p>Elles font beaucoup de dégats, et forcent vos adversaires à jouer moins de cartes.</p>
<p>&#8203;</p>
<div class="card-row">
<CardPreview :card_id="24" :tilted="false"></CardPreview>
<CardPreview :card_id="25" :tilted="false"></CardPreview>
<CardPreview :card_id="19" :tilted="false"></CardPreview>
</div>
<p>&#8203;</p>
<p>Les cartes <span style="color: darkblue">bleues</span> sont les cartes Guilde.</p>
<p>Elles donnent beaucoup d'or, assomment les champions adverses et manipulent votre pioche.</p>
<p>&#8203;</p>
<hr>
<h2>Déclencheurs</h2>
<p>Les effets de cartes peuvent se déclencher pour 3 raisons différentes.</p>
<div class="card-row">
<CardPreview :card_id="14" :tilted="false"></CardPreview>
</div>
<p>Sur cette carte, on peut voir les trois en même temps.</p>
<p>La 1ère ligne s'active tout le temps.</p>
<p>La 2ème ligne est une capacité Allié: il faut une autre carte de la même couleur en jeu pour pouvoir
en profiter.</p>
<p>La 3ème ligne est un Effet Poubelle (différent du sacrifice des cartes rouges): vous pouvez retirer
cette carte de votre jeu pour bénéficier, en plus des autres effets, de l'effet marqué. Mais la
carte sera défaussée à tout jamais.</p>
<p>&#8203;</p>
<hr>
<h2>Effets</h2>
<p>Une variété d'effets peuvent être inclus dans les cartes.</p>
<p>Il y en a plein et les expliquer ici serait relou, alors je vous laisse poser la question en vocal si
vous n'en comprenez pas un.</p>
<p>&#8203;</p>
<hr>
<h2>Activer les cartes dans la version en ligne</h2>
<p>Il suffit de cliquer sur la carte que vous voulez activer dans votre main pour la "LOCK".</p>
<p>Une carte "LOCKED" est considérée en jeu, & peut activer des effets Allié pour d'autres cartes, etc.
</p>
<p>Si vous avez des choix à faire sur la carte, un menu apparaîtra pour vous laisser choisir.</p>
<p>Pour faire des dommages, il y aura un bouton "Damage" sur vos ennemis. Pareil sur leurs champions.
</p>
<p>Quand vous avez un effet "Sacrifice", vous pouvez fouiller votre défausse pour choisir la carte à
sacrifier. Vous pouvez également sacrifier une carte de la main qui n'est pas encore locked!</p>
<h2>Zoomer sur les cartes</h2>
<p>Pour zoomer sur une carte, maintenez votre clic droit.</p>
</section>
</div>
</div>
</template>
<style>
.background {
background-color: #f0f0f0;
background-image: url('/images/bg-darkgrass.png');
background-size: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
;
}
.text-content {
background-color: rgba(255, 255, 255, .75);
padding: 1em;
border-radius: 1em;
max-width: 800px;
margin-top: 2em;
text-align: left;
h1 {
text-align: center;
font-size: 2em;
margin-bottom: 1.5em;
}
p {
margin: 1em 0;
font-size: 1.2em;
}
}
.card-row {
display: flex;
justify-content: center;
gap: 1em;
}
.overlay-2 {
height: 00px;
width: 100%;
position: sticky;
z-index: 2;
top: 0;
pointer-events: none;
.erika-zone-2 {
position: absolute;
top: 300px;
display: flex;
justify-content: right;
z-index: 2;
height: 300px;
width: 100%;
object-fit: cover;
.overlay-image {
position: sticky;
height: 100%;
cursor: pointer;
pointer-events: all;
}
}
}
</style>
components/SelfView.vue
-4
View File
@@ -103,8 +103,4 @@ import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, da
transform: translateY(-40px);
}
.cards_container {
min-width: 250px;
}
</style>