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

Change CardPreview component to use only card ID

Browse Source
This commit is contained in:
legonzaur
2024-05-13 15:41:43 +02:00
parent 3f66249106
commit c86232cf6a
8 changed files with 266 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/CardPreview.vue
+6 -6
View File
@@ -3,7 +3,7 @@ import type { Card } from '~/netcode/Card';
export interface Props { export interface Props {
data: Card | null | undefined card_id: number | undefined
locked?: boolean locked?: boolean
wrapped?: boolean wrapped?: boolean
} }
@@ -18,7 +18,7 @@ const emit = defineEmits(["click"])
const childCount = ref<number>(0) const childCount = ref<number>(0)
function cardClick() { function cardClick() {
if (!props.data) return if (!props.card_id) return
emit("click") emit("click")
} }
@@ -30,7 +30,7 @@ const rotation = ref(0)
watch( watch(
() => props.data, () => props.card_id,
() => { () => {
rotation.value = Math.random() > .5 ? 2 : -2 rotation.value = Math.random() > .5 ? 2 : -2
}, },
@@ -43,10 +43,10 @@ watch(
<div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }"> <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
<slot></slot> <slot></slot>
</div> </div>
<img :class="`card_image`" v-if="props.data" <img :class="`card_image`" v-if="props.card_id"
:src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false"> :src="'/cards/' + props.card_id.toString().padStart(3, '0') + '.png'" draggable="false">
<img :class="`card_image`" v-if="!props.data" :src="'/cards/background.png'" draggable="false"> <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
</div> </div>
components/CardsGrouped.vue
+1 -1
View File
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
<div> <div>
<div class="cards_container"> <div class="cards_container">
<template v-if="props.stack.length > 0" v-for="c in props.stack"> <template v-if="props.stack.length > 0" v-for="c in props.stack">
<CardPreview :data="c" :wrapped="true"> <CardPreview :card_id="c?.card_id" :wrapped="true">
<slot></slot> <slot></slot>
</CardPreview> </CardPreview>
</template> </template>
components/LoginView.vue
+1 -1
View File
@@ -20,7 +20,7 @@ async function discordLogin() {
<div class="middle-row"> <div class="middle-row">
<div class="icon"> <div class="icon">
<CardPreview :data=null></CardPreview> <CardPreview :card_id="undefined"></CardPreview>
</div> </div>
<div v-if="goStore.current_game?.started"> <div v-if="goStore.current_game?.started">
components/MarketCards.vue
+6 -5
View File
@@ -9,10 +9,11 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
<template> <template>
<div id="market"> <div id="market">
<CardPreview :data="null"></CardPreview> <CardPreview :card_id="undefined"></CardPreview>
<div class="separator"></div> <div class="separator"></div>
<CardPreview :data="c" v-for="c in goStore.current_game?.market" @click="c && buy(c)"> <CardPreview :card_id="c?.card_id" v-for="c in goStore.current_game?.market" @click="c && buy(c)">
<template v-if="isTurn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost"> <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="buy(c)">BUY</button>
<button @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)" <button @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)"> v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
@@ -28,10 +29,10 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
</template> </template>
</CardPreview> </CardPreview>
<div class="separator"></div> <div class="separator"></div>
<CardPreview :data="goStore.current_game?.gem_stack.at(-1)" <CardPreview :card_id="goStore.current_game?.gem_stack.at(-1)?.card_id"
@click="buy(goStore.current_game?.gem_stack.at(-1)!)"> @click="buy(goStore.current_game?.gem_stack.at(-1)!)">
<template <template
v-if="isTurn && goStore.current_game?.gem_stack.length && goStore.current_game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.current_game?.gem_stack.at(-1)?.cost ?? Infinity)"> v-if="isTurn && goStore.self?.turn && goStore.current_game?.gem_stack.length && goStore.current_game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.current_game?.gem_stack.at(-1)?.cost ?? Infinity)">
<button @click.stop="buy(goStore.current_game.gem_stack.at(-1)!)"> <button @click.stop="buy(goStore.current_game.gem_stack.at(-1)!)">
BUY BUY
</button> </button>
components/PlayerListElement.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const props = defineProps<Props>()
<div class="view"> <div class="view">
<PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" /> <PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
<template v-if="view == 'discard'"> <template v-if="view == 'discard'">
<CardPreview v-for=" card in player.discard_pile " :data="card"> <CardPreview v-for=" card in player.discard_pile " :card_id="card.card_id">
</CardPreview> </CardPreview>
</template> </template>
components/PlayerSlot.vue
+3 -3
View File
@@ -66,7 +66,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
</div> </div>
<div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`"> <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
<CardsGrouped :stack="props.player.discard_pile" v-if="!props.discard_unwrapped"> </CardsGrouped> <CardsGrouped :stack="props.player.discard_pile" v-if="!props.discard_unwrapped"> </CardsGrouped>
<CardPreview v-if="props.discard_unwrapped" :data="c" v-for="c in props.player.discard_pile"> <CardPreview v-if="props.discard_unwrapped" :card_id="c.card_id" v-for="c in props.player.discard_pile">
<template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn"> <template v-if="goStore.self?.turn && c && isSelf && isPlayerTurn">
<button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)" @click.stop="sacrifice(c)"> <button v-if="goStore.self?.turn.find_effect(CardEffects.SACRIFICE)" @click.stop="sacrifice(c)">
@@ -110,7 +110,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
<div class="cards_container"> <div class="cards_container">
<!-- HAND --> <!-- HAND -->
<CardPreview :data="c" v-for="c in props.player.hand" @click="c && playCard(c)"> <CardPreview :card_id="c?.card_id" v-for="c in props.player.hand" @click="c && playCard(c)">
<button <button
v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0" v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
@click.stop="discard(c)"> @click.stop="discard(c)">
@@ -118,7 +118,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
</button> </button>
</CardPreview> </CardPreview>
<!-- BOARD --> <!-- BOARD -->
<CardPreview :data="c" v-for="c in props.player.board" @click="lockCard(c)" <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"> :locked="props.player.turn && c.uuid in props.player.turn.cards_locked">
<template v-if="c && isSelf && isPlayerTurn && props.player.turn"> <template v-if="c && isSelf && isPlayerTurn && props.player.turn">
components/RulesDisplay.vue
+96 -62
View File
@@ -9,39 +9,46 @@ const router = useRouter();
<div class="background"> <div class="background">
<div class="overlay-2"> <div class="overlay-2">
<div class="erika-zone-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" /> <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> </div>
<div class="text-content"> <div class="text-content">
<h1>Règles de Héron Realms</h1> <h1>Règles de Héron Realms</h1>
<section> <section>
<p>Héron Realms, c'est un jeu de <span style="text-decoration:line-through;">héron building</span> deck-building.</p> <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>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>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>Et comme la violence est une solution universelle, ça se traduit en battre ses adversaires.</p>
<p>&#8203;</p> <p>&#8203;</p>
<p>Et quoi de mieux pour faire ça que des cartes colorées?</p> <p>Et quoi de mieux pour faire ça que des cartes colorées?</p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 6}"></CardPreview> <CardPreview :card_id="6"></CardPreview>
<CardPreview :data="{card_id: 19}"></CardPreview> <CardPreview :card_id="19"></CardPreview>
<CardPreview :data="{card_id: 36}"></CardPreview> <CardPreview :card_id="36"></CardPreview>
<CardPreview :data="{card_id: 46}"></CardPreview> <CardPreview :card_id="46"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<hr> <hr>
<p>&#8203;</p> <p>&#8203;</p>
<h2>Objectif</h2> <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>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> <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, 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. ou pour mettre des bâtons dans les roues de vos adversaires.
</p> </p>
<p>&#8203;</p> <p>&#8203;</p>
<hr> <hr>
<h2>Deckbuilding</h2> <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> <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"> <div class="card-row">
<CardPreview></CardPreview> <CardPreview :card_id="undefined"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<p> <p>
@@ -53,7 +60,8 @@ const router = useRouter();
</p> </p>
<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. 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>
<p>&#8203;</p> <p>&#8203;</p>
<hr> <hr>
@@ -68,17 +76,20 @@ const router = useRouter();
<li>1x Dégats (2)</li> <li>1x Dégats (2)</li>
</ul> </ul>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 56}"></CardPreview> <CardPreview :card_id="56"></CardPreview>
<CardPreview :data="{card_id: 59}"></CardPreview> <CardPreview :card_id="59"></CardPreview>
<CardPreview :data="{card_id: 58}"></CardPreview> <CardPreview :card_id="58"></CardPreview>
<CardPreview :data="{card_id: 57}"></CardPreview> <CardPreview :card_id="57"></CardPreview>
</div> </div>
<p> <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. 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>
<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 A partir de sa main, on peut jouer des cartes. Ces cartes peuvent déclencher des effets: on peut
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 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. principales du jeu.
</p> </p>
<p>&#8203;</p> <p>&#8203;</p>
@@ -88,61 +99,75 @@ const router = useRouter();
Les cartes sont divisées en 3 catégories: objets, actions et champions. Les cartes sont divisées en 3 catégories: objets, actions et champions.
</p> </p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 56}"></CardPreview> <CardPreview :card_id="56"></CardPreview>
<CardPreview :data="{card_id: 52}"></CardPreview> <CardPreview :card_id="52"></CardPreview>
<CardPreview :data="{card_id: 43}"></CardPreview> <CardPreview :card_id="43"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<h3>Objets & actions</h3> <h3>Objets & actions</h3>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 56}"></CardPreview> <CardPreview :card_id="56"></CardPreview>
<CardPreview :data="{card_id: 52}"></CardPreview> <CardPreview :card_id="52"></CardPreview>
</div> </div>
<p> <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. 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> </p>
<h3>Champions (& gardes)</h3> <h3>Champions (& gardes)</h3>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 43}"></CardPreview> <CardPreview :card_id="43"></CardPreview>
</div> </div>
<p> <p>
Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à chaque tour (en les mobilisant). Les champions sont un peu plus complexes: ils restent sur le terrain, et on peut les utiliser à
chaque tour (en les mobilisant).
</p> </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>Ils ont une défense <img src="/images/champion-shield.png" style="height: 30px" draggable="false" />
<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> 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"> <div class="card-row">
<CardPreview :data="{card_id: 49}"></CardPreview> <CardPreview :card_id="49"></CardPreview>
</div> </div>
<p> <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. 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>
<p> <p>
(J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur directement ou ses champions.) (J'en profite pour préciser qu'on peut en effet, sans garde, choisir d'attaquer le joueur
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. 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>
<p>&#8203;</p> <p>&#8203;</p>
<hr> <hr>
<h2>Building</h2> <h2>Building</h2>
<p> <p>
Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous avez suivi, constituera la prochaine pioche. Passons au "building": on peut acheter des cartes pour les ajouter à notre défausse qui, si vous
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. 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> </p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 6}"></CardPreview> <CardPreview :card_id="6"></CardPreview>
<CardPreview :data="{card_id: 19}"></CardPreview> <CardPreview :card_id="19"></CardPreview>
<CardPreview :data="{card_id: 36}"></CardPreview> <CardPreview :card_id="36"></CardPreview>
<CardPreview :data="{card_id: 46}"></CardPreview> <CardPreview :card_id="46"></CardPreview>
</div> </div>
<p> <p>
Un marché est mis à disposition de tous les joueurs, mettant à disposition 5 cartes (pas ici parce que j'ai pas la place). Un marché est mis à disposition de tous les joueurs, mettant à disposition 5 cartes (pas ici parce
que j'ai pas la place).
</p> </p>
<p> <p>
Ces cartes ont chacune un coût indiqué en haut à droite. 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 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). décider d'acheter juste après (tant qu'on a l'argent).
</p> </p>
<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. 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! Prenons des exemples!
</p> </p>
<hr> <hr>
@@ -152,36 +177,37 @@ const router = useRouter();
</p> </p>
<p>&#8203;</p> <p>&#8203;</p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 13}"></CardPreview> <CardPreview :card_id="13"></CardPreview>
<CardPreview :data="{card_id: 3}"></CardPreview> <CardPreview :card_id="3"></CardPreview>
<CardPreview :data="{card_id: 1}"></CardPreview> <CardPreview :card_id="1"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<p>Les cartes <span style="color: darkgoldenrod">jaunes</span> sont les cartes Empire.</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>Elles font beaucoup de soin, et activent souvent des effets de pioche.</p>
<p>&#8203;</p> <p>&#8203;</p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 39}"></CardPreview> <CardPreview :card_id="39"></CardPreview>
<CardPreview :data="{card_id: 34}"></CardPreview> <CardPreview :card_id="34"></CardPreview>
<CardPreview :data="{card_id: 40}"></CardPreview> <CardPreview :card_id="40"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<p>Les cartes <span style="color: red">rouges</span> sont les cartes Necros.</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>Elles sont les seules à pouvoir sacrifier des cartes pour les sortir de son deck de façon permanente.
</p>
<p>&#8203;</p> <p>&#8203;</p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 52}"></CardPreview> <CardPreview :card_id="52"></CardPreview>
<CardPreview :data="{card_id: 46}"></CardPreview> <CardPreview :card_id="46"></CardPreview>
<CardPreview :data="{card_id: 47}"></CardPreview> <CardPreview :card_id="47"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<p>Les cartes <span style="color: darkgreen">vertes</span> sont les cartes Sauvages.</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>Elles font beaucoup de dégats, et forcent vos adversaires à jouer moins de cartes.</p>
<p>&#8203;</p> <p>&#8203;</p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 24}"></CardPreview> <CardPreview :card_id="24"></CardPreview>
<CardPreview :data="{card_id: 25}"></CardPreview> <CardPreview :card_id="25"></CardPreview>
<CardPreview :data="{card_id: 19}"></CardPreview> <CardPreview :card_id="19"></CardPreview>
</div> </div>
<p>&#8203;</p> <p>&#8203;</p>
<p>Les cartes <span style="color: darkblue">bleues</span> sont les cartes Guilde.</p> <p>Les cartes <span style="color: darkblue">bleues</span> sont les cartes Guilde.</p>
@@ -191,25 +217,32 @@ const router = useRouter();
<h2>Déclencheurs</h2> <h2>Déclencheurs</h2>
<p>Les effets de cartes peuvent se déclencher pour 3 raisons différentes.</p> <p>Les effets de cartes peuvent se déclencher pour 3 raisons différentes.</p>
<div class="card-row"> <div class="card-row">
<CardPreview :data="{card_id: 14}"></CardPreview> <CardPreview :card_id="14"></CardPreview>
</div> </div>
<p>Sur cette carte, on peut voir les trois en même temps.</p> <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 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 2ème ligne est une capacité Allié: il faut une autre carte de la même couleur en jeu pour pouvoir
<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> 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> <p>&#8203;</p>
<hr> <hr>
<h2>Effets</h2> <h2>Effets</h2>
<p>Une variété d'effets peuvent être inclus dans les cartes.</p> <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>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> <p>&#8203;</p>
<hr> <hr>
<h2>Activer les cartes dans la version en ligne</h2> <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>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>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>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>Pour faire des dommages, il y aura un bouton "Damage" sur vos ennemis. Pareil sur leurs champions.
<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> </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>
</section> </section>
</div> </div>
</div> </div>
@@ -225,7 +258,8 @@ const router = useRouter();
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100vw;; width: 100vw;
;
} }
.text-content { .text-content {
components/SelfView.vue
+5 -5
View File
@@ -8,9 +8,9 @@ const isTurn = computed(() => goStore.self?.team == goStore.current_game?.curren
<template> <template>
<div :class="'player ' + (isTurn ? 'turn' : '')"> <div :class="'player ' + (isTurn ? 'turn' : '')">
<button v-if="goStore.self && goStore.self?.team != goStore.self?.team" id="end_turn" <button v-if="goStore.self && goStore.self!.turn && goStore.self?.team != goStore.self?.team" id="end_turn"
@click="useEffect(goStore.self!.turn.find_effect(CardEffects.MAKE_DISCARD)!, goStore.self)" @click="useEffect(goStore.self.turn.find_effect(CardEffects.MAKE_DISCARD)!, goStore.self)"
:disabled="!goStore.self!.turn.find_effect(CardEffects.MAKE_DISCARD)"> :disabled="!goStore.self.turn.find_effect(CardEffects.MAKE_DISCARD)">
make Discard</button> make Discard</button>
<div id="turn_data"> <div id="turn_data">
<button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button> <button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>
@@ -18,8 +18,8 @@ const isTurn = computed(() => goStore.self?.team == goStore.current_game?.curren
</div> </div>
<div class="cards_container" id="self_hand"> <div class="cards_container" id="self_hand">
<CardPreview :data="c" v-for=" c in goStore.self?.hand " @click="c && playCard(c)"> <CardPreview :card_id="c?.card_id" v-for=" c in goStore.self?.hand " @click="c && playCard(c)">
<button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0" <button v-if="c && isTurn && goStore.self?.turn && (goStore.self.turn.discard_markers ?? 0) > 0"
@click="discard(c!)">DISCARD</button> @click="discard(c!)">DISCARD</button>
</CardPreview> </CardPreview>
</div> </div>