From c86232cf6a56f4b48e6012b930c24c994a8519eb Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Mon, 13 May 2024 15:41:43 +0200
Subject: [PATCH] Change CardPreview component to use only card ID

---
 components/CardPreview.vue       |  12 +-
 components/CardsGrouped.vue      |   2 +-
 components/LoginView.vue         |   8 +-
 components/MarketCards.vue       |  11 +-
 components/PlayerListElement.vue |   2 +-
 components/PlayerSlot.vue        |   6 +-
 components/RulesDisplay.vue      | 446 +++++++++++++++++--------------
 components/SelfView.vue          |  10 +-
 8 files changed, 266 insertions(+), 231 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index e9067f1..2d1621f 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -3,7 +3,7 @@ import type { Card } from '~/netcode/Card';
 
 
 export interface Props {
-    data: Card | null | undefined
+    card_id: number | undefined
     locked?: boolean
     wrapped?: boolean
 }
@@ -18,7 +18,7 @@ const emit = defineEmits(["click"])
 const childCount = ref<number>(0)
 
 function cardClick() {
-    if (!props.data) return
+    if (!props.card_id) return
     emit("click")
 }
 
@@ -30,7 +30,7 @@ const rotation = ref(0)
 
 
 watch(
-    () => props.data,
+    () => props.card_id,
     () => {
         rotation.value = Math.random() > .5 ? 2 : -2
     },
@@ -43,10 +43,10 @@ watch(
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
-        <img :class="`card_image`" v-if="props.data"
-            :src="'/cards/' + data?.card_id?.toString().padStart(3, '0') + '.png'" draggable="false">
+        <img :class="`card_image`" v-if="props.card_id"
+            :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>
 
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index ae14fb3..c4eb3d3 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<Props>(), {
     <div>
         <div class="cards_container">
             <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>
                 </CardPreview>
             </template>
diff --git a/components/LoginView.vue b/components/LoginView.vue
index b051141..541b3aa 100644
--- a/components/LoginView.vue
+++ b/components/LoginView.vue
@@ -17,12 +17,12 @@ async function discordLogin() {
         <div class="title">
             Entrez dans le Royaume de Héron !
         </div>
-        
+
         <div class="middle-row">
             <div class="icon">
-                <CardPreview :data=null></CardPreview>
+                <CardPreview :card_id="undefined"></CardPreview>
             </div>
-            
+
             <div v-if="goStore.current_game?.started">
                 <b>Mode spectateur</b>
             </div>
@@ -90,7 +90,7 @@ async function discordLogin() {
     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);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 footer {
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 316e5c2..1f8d57e 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -9,10 +9,11 @@ const isTurn = computed(() => goStore.self && goStore.current_game?.started && (
 
 <template>
     <div id="market">
-        <CardPreview :data="null"></CardPreview>
+        <CardPreview :card_id="undefined"></CardPreview>
         <div class="separator"></div>
-        <CardPreview :data="c" 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">
+        <CardPreview :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="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
                     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>
         </CardPreview>
         <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)!)">
             <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)!)">
                     BUY
                 </button>
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
index c655b10..487969a 100644
--- a/components/PlayerListElement.vue
+++ b/components/PlayerListElement.vue
@@ -44,7 +44,7 @@ const props = defineProps<Props>()
         <div class="view">
             <PlayerSlot :player="player" :hide_stack_and_discard="true" v-if="view == 'main'" />
             <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>
             </template>
 
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 496461a..84b08d8 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -66,7 +66,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
             </div>
             <div :class="`discard ${discard_unwrapped ? 'unwrapped' : ''}`">
                 <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">
 
                         <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">
                 <!-- 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
                         v-if="props.player.turn && c && isSelf && (props.player.turn.discard_markers + props.player.turn.fuck_u_markers) > 0"
                         @click.stop="discard(c)">
@@ -118,7 +118,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
                     </button>
                 </CardPreview>
                 <!-- 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">
 
                     <template v-if="c && isSelf && isPlayerTurn && props.player.turn">
diff --git a/components/RulesDisplay.vue b/components/RulesDisplay.vue
index 773c16d..93aae29 100644
--- a/components/RulesDisplay.vue
+++ b/components/RulesDisplay.vue
@@ -6,213 +6,246 @@ 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 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"></CardPreview>
+                    <CardPreview :card_id="19"></CardPreview>
+                    <CardPreview :card_id="36"></CardPreview>
+                    <CardPreview :card_id="46"></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"></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"></CardPreview>
+                    <CardPreview :card_id="59"></CardPreview>
+                    <CardPreview :card_id="58"></CardPreview>
+                    <CardPreview :card_id="57"></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"></CardPreview>
+                    <CardPreview :card_id="52"></CardPreview>
+                    <CardPreview :card_id="43"></CardPreview>
+                </div>
+                <p>&#8203;</p>
+                <h3>Objets & actions</h3>
+                <div class="card-row">
+                    <CardPreview :card_id="56"></CardPreview>
+                    <CardPreview :card_id="52"></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"></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"></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"></CardPreview>
+                    <CardPreview :card_id="19"></CardPreview>
+                    <CardPreview :card_id="36"></CardPreview>
+                    <CardPreview :card_id="46"></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"></CardPreview>
+                    <CardPreview :card_id="3"></CardPreview>
+                    <CardPreview :card_id="1"></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"></CardPreview>
+                    <CardPreview :card_id="34"></CardPreview>
+                    <CardPreview :card_id="40"></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"></CardPreview>
+                    <CardPreview :card_id="46"></CardPreview>
+                    <CardPreview :card_id="47"></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"></CardPreview>
+                    <CardPreview :card_id="25"></CardPreview>
+                    <CardPreview :card_id="19"></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"></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>
+            </section>
         </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 :data="{card_id: 6}"></CardPreview>
-                <CardPreview :data="{card_id: 19}"></CardPreview>
-                <CardPreview :data="{card_id: 36}"></CardPreview>
-                <CardPreview :data="{card_id: 46}"></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></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 :data="{card_id: 56}"></CardPreview>
-                <CardPreview :data="{card_id: 59}"></CardPreview>
-                <CardPreview :data="{card_id: 58}"></CardPreview>
-                <CardPreview :data="{card_id: 57}"></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 :data="{card_id: 56}"></CardPreview>
-                <CardPreview :data="{card_id: 52}"></CardPreview>
-                <CardPreview :data="{card_id: 43}"></CardPreview>
-            </div>
-            <p>&#8203;</p>
-            <h3>Objets & actions</h3>
-            <div class="card-row">
-                <CardPreview :data="{card_id: 56}"></CardPreview>
-                <CardPreview :data="{card_id: 52}"></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 :data="{card_id: 43}"></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 :data="{card_id: 49}"></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 :data="{card_id: 6}"></CardPreview>
-                <CardPreview :data="{card_id: 19}"></CardPreview>
-                <CardPreview :data="{card_id: 36}"></CardPreview>
-                <CardPreview :data="{card_id: 46}"></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 :data="{card_id: 13}"></CardPreview>
-                <CardPreview :data="{card_id: 3}"></CardPreview>
-                <CardPreview :data="{card_id: 1}"></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 :data="{card_id: 39}"></CardPreview>
-                <CardPreview :data="{card_id: 34}"></CardPreview>
-                <CardPreview :data="{card_id: 40}"></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 :data="{card_id: 52}"></CardPreview>
-                <CardPreview :data="{card_id: 46}"></CardPreview>
-                <CardPreview :data="{card_id: 47}"></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 :data="{card_id: 24}"></CardPreview>
-                <CardPreview :data="{card_id: 25}"></CardPreview>
-                <CardPreview :data="{card_id: 19}"></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 :data="{card_id: 14}"></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>
-        </section>
-    </div>
-  </div>
 
 </template>
 
@@ -225,7 +258,8 @@ const router = useRouter();
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 100vw;;
+    width: 100vw;
+    ;
 }
 
 .text-content {
diff --git a/components/SelfView.vue b/components/SelfView.vue
index a8b3de2..85d1d0b 100644
--- a/components/SelfView.vue
+++ b/components/SelfView.vue
@@ -8,9 +8,9 @@ const isTurn = computed(() => goStore.self?.team == goStore.current_game?.curren
 
 <template>
     <div :class="'player ' + (isTurn ? 'turn' : '')">
-        <button v-if="goStore.self && goStore.self?.team != goStore.self?.team" id="end_turn"
-            @click="useEffect(goStore.self!.turn.find_effect(CardEffects.MAKE_DISCARD)!, goStore.self)"
-            :disabled="!goStore.self!.turn.find_effect(CardEffects.MAKE_DISCARD)">
+        <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)"
+            :disabled="!goStore.self.turn.find_effect(CardEffects.MAKE_DISCARD)">
             make Discard</button>
         <div id="turn_data">
             <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 class="cards_container" id="self_hand">
-            <CardPreview :data="c" v-for="  c  in  goStore.self?.hand  " @click="c && playCard(c)">
-                <button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
+            <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 && (goStore.self.turn.discard_markers ?? 0) > 0"
                     @click="discard(c!)">DISCARD</button>
             </CardPreview>
         </div>