From 3eba056253ed015b779f41acac66b20547c702e4 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 7 Jul 2024 18:26:19 +0200
Subject: [PATCH 01/21] Feat : implement per effects

---
 assets/images/cards/heron-svg/001.svg |  2 +-
 assets/images/cards/heron-svg/002.svg |  2 +-
 assets/images/cards/heron-svg/003.svg |  2 +-
 assets/images/cards/heron-svg/005.svg |  4 ++--
 assets/images/cards/heron-svg/006.svg |  2 +-
 assets/images/cards/heron-svg/007.svg |  4 ++--
 assets/images/cards/heron-svg/008.svg |  2 +-
 assets/images/cards/heron-svg/009.svg |  2 +-
 assets/images/cards/heron-svg/010.svg |  2 +-
 assets/images/cards/heron-svg/011.svg |  2 +-
 assets/images/cards/heron-svg/012.svg |  2 +-
 assets/images/cards/heron-svg/013.svg |  2 +-
 assets/images/cards/heron-svg/014.svg |  2 +-
 assets/images/cards/heron-svg/016.svg |  2 +-
 assets/images/cards/heron-svg/017.svg |  4 ++--
 assets/images/cards/heron-svg/018.svg |  4 ++--
 assets/images/cards/heron-svg/019.svg |  2 +-
 assets/images/cards/heron-svg/020.svg |  2 +-
 assets/images/cards/heron-svg/023.svg |  2 +-
 assets/images/cards/heron-svg/025.svg |  2 +-
 assets/images/cards/heron-svg/026.svg |  2 +-
 assets/images/cards/heron-svg/027.svg |  2 +-
 assets/images/cards/heron-svg/030.svg |  2 +-
 assets/images/cards/heron-svg/031.svg |  2 +-
 assets/images/cards/heron-svg/033.svg |  2 +-
 assets/images/cards/heron-svg/034.svg |  2 +-
 assets/images/cards/heron-svg/036.svg |  2 +-
 assets/images/cards/heron-svg/037.svg |  4 ++--
 assets/images/cards/heron-svg/038.svg |  2 +-
 assets/images/cards/heron-svg/039.svg |  2 +-
 assets/images/cards/heron-svg/040.svg |  4 ++--
 assets/images/cards/heron-svg/041.svg |  4 ++--
 assets/images/cards/heron-svg/042.svg |  2 +-
 assets/images/cards/heron-svg/043.svg |  2 +-
 assets/images/cards/heron-svg/045.svg |  2 +-
 assets/images/cards/heron-svg/046.svg |  2 +-
 assets/images/cards/heron-svg/047.svg |  4 ++--
 assets/images/cards/heron-svg/048.svg |  2 +-
 assets/images/cards/heron-svg/049.svg |  2 +-
 assets/images/cards/heron-svg/050.svg |  2 +-
 assets/images/cards/heron-svg/051.svg |  2 +-
 assets/images/cards/heron-svg/052.svg |  2 +-
 assets/images/cards/heron-svg/053.svg |  4 ++--
 assets/images/cards/heron-svg/054.svg |  2 +-
 assets/images/cards/heron-svg/060.svg |  4 ++--
 assets/images/cards/heron-svg/061.svg |  4 ++--
 assets/images/cards/heron-svg/062.svg |  4 ++--
 assets/images/cards/heron-svg/063.svg |  4 ++--
 assets/images/cards/heron-svg/064.svg |  2 +-
 assets/images/cards/heron-svg/065.svg |  2 +-
 assets/images/cards/heron-svg/066.svg |  2 +-
 assets/images/cards/heron-svg/067.svg |  2 +-
 assets/images/cards/heron-svg/068.svg |  2 +-
 assets/images/cards/heron-svg/069.svg |  4 ++--
 assets/images/cards/heron-svg/070.svg |  2 +-
 assets/images/cards/heron-svg/071.svg |  2 +-
 assets/images/cards/heron-svg/072.svg |  4 ++--
 assets/images/cards/heron-svg/073.svg |  2 +-
 assets/images/cards/heron-svg/074.svg |  2 +-
 assets/images/cards/heron-svg/078.svg |  2 +-
 assets/images/cards/heron-svg/079.svg |  2 +-
 assets/images/cards/heron-svg/080.svg |  2 +-
 assets/images/cards/heron-svg/081.svg |  2 +-
 assets/images/cards/heron-svg/082.svg |  2 +-
 assets/images/cards/heron-svg/086.svg |  2 +-
 assets/images/cards/heron-svg/091.svg |  2 +-
 assets/images/cards/heron-svg/092.svg |  2 +-
 assets/images/cards/heron-svg/094.svg |  2 +-
 assets/images/cards/heron-svg/095.svg |  2 +-
 assets/images/cards/heron-svg/099.svg |  2 +-
 assets/images/cards/heron-svg/101.svg |  2 +-
 assets/images/cards/heron-svg/102.svg |  2 +-
 components/CardPreview.vue            |  4 ++++
 components/CardsGrouped.vue           |  1 +
 components/MarketCards.vue            |  2 +-
 pages/game/[id].vue                   | 14 ++++++++++++++
 public/sounds/destroy.mp3             |  3 +++
 77 files changed, 110 insertions(+), 88 deletions(-)
 create mode 100644 public/sounds/destroy.mp3

diff --git a/assets/images/cards/heron-svg/001.svg b/assets/images/cards/heron-svg/001.svg
index c3b3b74..0af7b2d 100644
--- a/assets/images/cards/heron-svg/001.svg
+++ b/assets/images/cards/heron-svg/001.svg
@@ -41,7 +41,7 @@
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
 <circle cx="30" cy="40.0" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
diff --git a/assets/images/cards/heron-svg/002.svg b/assets/images/cards/heron-svg/002.svg
index 46ff698..5093687 100644
--- a/assets/images/cards/heron-svg/002.svg
+++ b/assets/images/cards/heron-svg/002.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-6.666666666666667" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque Champion</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/003.svg b/assets/images/cards/heron-svg/003.svg
index 61819c8..71ddbad 100644
--- a/assets/images/cards/heron-svg/003.svg
+++ b/assets/images/cards/heron-svg/003.svg
@@ -39,7 +39,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(77.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
diff --git a/assets/images/cards/heron-svg/005.svg b/assets/images/cards/heron-svg/005.svg
index 7307f9d..8447d5a 100644
--- a/assets/images/cards/heron-svg/005.svg
+++ b/assets/images/cards/heron-svg/005.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(107.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -59,7 +59,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(3)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(3)}" v-on:click="effectClick(3)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Mobilisez un Champion</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/006.svg b/assets/images/cards/heron-svg/006.svg
index 2bee63c..03b33de 100644
--- a/assets/images/cards/heron-svg/006.svg
+++ b/assets/images/cards/heron-svg/006.svg
@@ -57,7 +57,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/007.svg b/assets/images/cards/heron-svg/007.svg
index faf5c3c..ed8c43a 100644
--- a/assets/images/cards/heron-svg/007.svg
+++ b/assets/images/cards/heron-svg/007.svg
@@ -41,7 +41,7 @@
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
 <circle cx="30" cy="40.0" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -54,7 +54,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque Champion</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/008.svg b/assets/images/cards/heron-svg/008.svg
index 4bc4bec..a332fbf 100644
--- a/assets/images/cards/heron-svg/008.svg
+++ b/assets/images/cards/heron-svg/008.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque autre</tspan><tspan x="0" dy="1em">Garde que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/009.svg b/assets/images/cards/heron-svg/009.svg
index d048139..d08cb5c 100644
--- a/assets/images/cards/heron-svg/009.svg
+++ b/assets/images/cards/heron-svg/009.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque autre Champion</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/010.svg b/assets/images/cards/heron-svg/010.svg
index 573552d..dacff5c 100644
--- a/assets/images/cards/heron-svg/010.svg
+++ b/assets/images/cards/heron-svg/010.svg
@@ -56,7 +56,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Mobilisez un Champion</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/011.svg b/assets/images/cards/heron-svg/011.svg
index 0a52bbc..2d05a80 100644
--- a/assets/images/cards/heron-svg/011.svg
+++ b/assets/images/cards/heron-svg/011.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-6.666666666666667" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque Champion</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(107.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/012.svg b/assets/images/cards/heron-svg/012.svg
index 043e1d3..6ff5aec 100644
--- a/assets/images/cards/heron-svg/012.svg
+++ b/assets/images/cards/heron-svg/012.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque Champion</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/013.svg b/assets/images/cards/heron-svg/013.svg
index c521ba8..37f7631 100644
--- a/assets/images/cards/heron-svg/013.svg
+++ b/assets/images/cards/heron-svg/013.svg
@@ -36,7 +36,7 @@
 </g>
 </g>
 <rect x="0" y="65" width="298" height="200" />
-<image x="0" y="65" width="298" height="200" xlink:href="lancersiz3.png" />
+<image x="0" y="65" width="298" height="200" xlink:href="../../img/skins/heron/013.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
diff --git a/assets/images/cards/heron-svg/014.svg b/assets/images/cards/heron-svg/014.svg
index 476e82a..298d2ef 100644
--- a/assets/images/cards/heron-svg/014.svg
+++ b/assets/images/cards/heron-svg/014.svg
@@ -41,7 +41,7 @@
 <path d="M10,45 L264,45" stroke="black" stroke-width="1" />
 <path d="M10,90 L264,90" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,26.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,26.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez deux cartes.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/016.svg b/assets/images/cards/heron-svg/016.svg
index ef393d4..48a5e18 100644
--- a/assets/images/cards/heron-svg/016.svg
+++ b/assets/images/cards/heron-svg/016.svg
@@ -50,7 +50,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">stack_next_action_bought</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/017.svg b/assets/images/cards/heron-svg/017.svg
index 67ff321..68f1dd0 100644
--- a/assets/images/cards/heron-svg/017.svg
+++ b/assets/images/cards/heron-svg/017.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/018.svg b/assets/images/cards/heron-svg/018.svg
index f7a68e6..37d4750 100644
--- a/assets/images/cards/heron-svg/018.svg
+++ b/assets/images/cards/heron-svg/018.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-11.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Mettez la prochaine carte dont</tspan><tspan x="0" dy="1em">vous faites l'acquisition ce tour-ci</tspan><tspan x="0" dy="1em"> dans votre main.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/019.svg b/assets/images/cards/heron-svg/019.svg
index 7e273fb..d44ee99 100644
--- a/assets/images/cards/heron-svg/019.svg
+++ b/assets/images/cards/heron-svg/019.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-6.666666666666667" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Assomez le champion ciblé. </tspan><tspan x="0" dy="1em">Piochez une carte.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/020.svg b/assets/images/cards/heron-svg/020.svg
index 02abf00..24842b7 100644
--- a/assets/images/cards/heron-svg/020.svg
+++ b/assets/images/cards/heron-svg/020.svg
@@ -50,7 +50,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/023.svg b/assets/images/cards/heron-svg/023.svg
index 18f05d9..fcdb5b3 100644
--- a/assets/images/cards/heron-svg/023.svg
+++ b/assets/images/cards/heron-svg/023.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/025.svg b/assets/images/cards/heron-svg/025.svg
index 7d1a46b..98cba25 100644
--- a/assets/images/cards/heron-svg/025.svg
+++ b/assets/images/cards/heron-svg/025.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/026.svg b/assets/images/cards/heron-svg/026.svg
index 13e6c00..2f73e4a 100644
--- a/assets/images/cards/heron-svg/026.svg
+++ b/assets/images/cards/heron-svg/026.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-11.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Mettez la prochaine carte dont</tspan><tspan x="0" dy="1em">vous faites l'acquisition ce tour-ci</tspan><tspan x="0" dy="1em">au dessus de votre pioche.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/027.svg b/assets/images/cards/heron-svg/027.svg
index 588fe62..9b89986 100644
--- a/assets/images/cards/heron-svg/027.svg
+++ b/assets/images/cards/heron-svg/027.svg
@@ -39,7 +39,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">restack_discarded_card</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/030.svg b/assets/images/cards/heron-svg/030.svg
index f9e6dbe..b2e3719 100644
--- a/assets/images/cards/heron-svg/030.svg
+++ b/assets/images/cards/heron-svg/030.svg
@@ -50,7 +50,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/031.svg b/assets/images/cards/heron-svg/031.svg
index f702140..25eb564 100644
--- a/assets/images/cards/heron-svg/031.svg
+++ b/assets/images/cards/heron-svg/031.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/033.svg b/assets/images/cards/heron-svg/033.svg
index 6e0abdc..8d0a33f 100644
--- a/assets/images/cards/heron-svg/033.svg
+++ b/assets/images/cards/heron-svg/033.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/034.svg b/assets/images/cards/heron-svg/034.svg
index 5478080..ba57f20 100644
--- a/assets/images/cards/heron-svg/034.svg
+++ b/assets/images/cards/heron-svg/034.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/036.svg b/assets/images/cards/heron-svg/036.svg
index eef65bf..46e49a0 100644
--- a/assets/images/cards/heron-svg/036.svg
+++ b/assets/images/cards/heron-svg/036.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/037.svg b/assets/images/cards/heron-svg/037.svg
index 0f0ffe7..cd2ec1c 100644
--- a/assets/images/cards/heron-svg/037.svg
+++ b/assets/images/cards/heron-svg/037.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/038.svg b/assets/images/cards/heron-svg/038.svg
index 8ed5c42..cba038b 100644
--- a/assets/images/cards/heron-svg/038.svg
+++ b/assets/images/cards/heron-svg/038.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/039.svg b/assets/images/cards/heron-svg/039.svg
index 55583df..75a945f 100644
--- a/assets/images/cards/heron-svg/039.svg
+++ b/assets/images/cards/heron-svg/039.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/040.svg b/assets/images/cards/heron-svg/040.svg
index e8b5693..ca13219 100644
--- a/assets/images/cards/heron-svg/040.svg
+++ b/assets/images/cards/heron-svg/040.svg
@@ -41,7 +41,7 @@
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
 <circle cx="30" cy="40.0" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier jusqu'à deux</tspan><tspan x="0" dy="1em">cartes de votre main et/ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -54,7 +54,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/041.svg b/assets/images/cards/heron-svg/041.svg
index c1f50b5..cc18566 100644
--- a/assets/images/cards/heron-svg/041.svg
+++ b/assets/images/cards/heron-svg/041.svg
@@ -41,14 +41,14 @@
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
 <circle cx="30" cy="40.0" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,43.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,43.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Mettez un champion de votre défausse</tspan><tspan x="0" dy="1em">au dessus de votre pioche.</tspan></text>
 </g>
 </g>
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/042.svg b/assets/images/cards/heron-svg/042.svg
index 753f144..1f6d718 100644
--- a/assets/images/cards/heron-svg/042.svg
+++ b/assets/images/cards/heron-svg/042.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">L'adversaire ciblé</tspan><tspan x="0" dy="1em">se défausse d'une carte.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/043.svg b/assets/images/cards/heron-svg/043.svg
index 1166347..1753041 100644
--- a/assets/images/cards/heron-svg/043.svg
+++ b/assets/images/cards/heron-svg/043.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/045.svg b/assets/images/cards/heron-svg/045.svg
index 1491ac0..1f3be62 100644
--- a/assets/images/cards/heron-svg/045.svg
+++ b/assets/images/cards/heron-svg/045.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">L'adversaire ciblé se défausse d'une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/046.svg b/assets/images/cards/heron-svg/046.svg
index 35bb8a9..ad4739e 100644
--- a/assets/images/cards/heron-svg/046.svg
+++ b/assets/images/cards/heron-svg/046.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez piocher une carte, puis</tspan><tspan x="0" dy="1em"> vous défausser d'une carte.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/047.svg b/assets/images/cards/heron-svg/047.svg
index 97c36d2..79fc60e 100644
--- a/assets/images/cards/heron-svg/047.svg
+++ b/assets/images/cards/heron-svg/047.svg
@@ -41,7 +41,7 @@
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
 <circle cx="30" cy="40.0" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez piocher une carte, puis</tspan><tspan x="0" dy="1em"> vous défausser d'une carte.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -54,7 +54,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez piocher une carte, puis</tspan><tspan x="0" dy="1em"> vous défausser d'une carte.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/048.svg b/assets/images/cards/heron-svg/048.svg
index 3a676dc..71a42c4 100644
--- a/assets/images/cards/heron-svg/048.svg
+++ b/assets/images/cards/heron-svg/048.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,45)">
 <g class="svg_effect">
 <circle cx="30" cy="22.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,26.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,26.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">L'adversaire ciblé</tspan><tspan x="0" dy="1em">se défausse d'une carte.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/049.svg b/assets/images/cards/heron-svg/049.svg
index e3bbc95..5f54024 100644
--- a/assets/images/cards/heron-svg/049.svg
+++ b/assets/images/cards/heron-svg/049.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/050.svg b/assets/images/cards/heron-svg/050.svg
index 0b534bc..2629915 100644
--- a/assets/images/cards/heron-svg/050.svg
+++ b/assets/images/cards/heron-svg/050.svg
@@ -39,7 +39,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez piocher jusqu'à deux cartes,</tspan><tspan x="0" dy="1em">défaussez-vous ensuite d'autant de cartes</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/051.svg b/assets/images/cards/heron-svg/051.svg
index b67e03a..628ab10 100644
--- a/assets/images/cards/heron-svg/051.svg
+++ b/assets/images/cards/heron-svg/051.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">L'adversaire ciblé</tspan><tspan x="0" dy="1em">se défausse d'une carte.</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/052.svg b/assets/images/cards/heron-svg/052.svg
index a604696..8cfab0a 100644
--- a/assets/images/cards/heron-svg/052.svg
+++ b/assets/images/cards/heron-svg/052.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">L'adversaire ciblé se défausse d'une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/053.svg b/assets/images/cards/heron-svg/053.svg
index ffbd13b..03af76c 100644
--- a/assets/images/cards/heron-svg/053.svg
+++ b/assets/images/cards/heron-svg/053.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">L'adversaire ciblé se défausse d'une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">L'adversaire ciblé</tspan><tspan x="0" dy="1em">se défausse d'une carte.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/054.svg b/assets/images/cards/heron-svg/054.svg
index 9af8a9d..1218fe1 100644
--- a/assets/images/cards/heron-svg/054.svg
+++ b/assets/images/cards/heron-svg/054.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque autre x</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/060.svg b/assets/images/cards/heron-svg/060.svg
index dccfffe..bb0ea05 100644
--- a/assets/images/cards/heron-svg/060.svg
+++ b/assets/images/cards/heron-svg/060.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-11.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Mettez la prochaine carte dont</tspan><tspan x="0" dy="1em">vous faites l'acquisition ce tour-ci</tspan><tspan x="0" dy="1em"> dans votre main.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/061.svg b/assets/images/cards/heron-svg/061.svg
index 50e5926..f491acc 100644
--- a/assets/images/cards/heron-svg/061.svg
+++ b/assets/images/cards/heron-svg/061.svg
@@ -40,14 +40,14 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,43.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,43.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">L'adversaire ciblé se défausse d'une carte. </tspan><tspan x="0" dy="1em">restack_discarded_card</tspan></text>
 </g>
 </g>
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/062.svg b/assets/images/cards/heron-svg/062.svg
index 306083a..61c2318 100644
--- a/assets/images/cards/heron-svg/062.svg
+++ b/assets/images/cards/heron-svg/062.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez deux cartes.</text>
 </g>
 <g transform="translate(107.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -59,7 +59,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(3)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(3)}" v-on:click="effectClick(3)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">prepare_all_champions</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/063.svg b/assets/images/cards/heron-svg/063.svg
index 2ae7feb..bbe811d 100644
--- a/assets/images/cards/heron-svg/063.svg
+++ b/assets/images/cards/heron-svg/063.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">cheaper_champions_passive</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">control_opposing_champion_passive</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/064.svg b/assets/images/cards/heron-svg/064.svg
index 848bd1b..5e9d487 100644
--- a/assets/images/cards/heron-svg/064.svg
+++ b/assets/images/cards/heron-svg/064.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">+ x None</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/065.svg b/assets/images/cards/heron-svg/065.svg
index 7a80399..50eb65b 100644
--- a/assets/images/cards/heron-svg/065.svg
+++ b/assets/images/cards/heron-svg/065.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">damage_all_champions</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/066.svg b/assets/images/cards/heron-svg/066.svg
index 409a4f1..339de64 100644
--- a/assets/images/cards/heron-svg/066.svg
+++ b/assets/images/cards/heron-svg/066.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">restack_discarded_action</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/067.svg b/assets/images/cards/heron-svg/067.svg
index ef51f8b..4cd51e9 100644
--- a/assets/images/cards/heron-svg/067.svg
+++ b/assets/images/cards/heron-svg/067.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,71.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque Champion x</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/068.svg b/assets/images/cards/heron-svg/068.svg
index 7c15369..ca6cdea 100644
--- a/assets/images/cards/heron-svg/068.svg
+++ b/assets/images/cards/heron-svg/068.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,43.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,43.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">buy_for_free</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/069.svg b/assets/images/cards/heron-svg/069.svg
index edb9055..00e380e 100644
--- a/assets/images/cards/heron-svg/069.svg
+++ b/assets/images/cards/heron-svg/069.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-6.666666666666667" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">damage_all_champions </tspan><tspan x="0" dy="1em">Piochez une carte.</tspan></text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -53,7 +53,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(3)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(3)}" v-on:click="effectClick(3)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/070.svg b/assets/images/cards/heron-svg/070.svg
index 2871107..8b636ee 100644
--- a/assets/images/cards/heron-svg/070.svg
+++ b/assets/images/cards/heron-svg/070.svg
@@ -39,7 +39,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">discard_x_and_draw_x</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/071.svg b/assets/images/cards/heron-svg/071.svg
index 859c7fe..ca2a8cb 100644
--- a/assets/images/cards/heron-svg/071.svg
+++ b/assets/images/cards/heron-svg/071.svg
@@ -39,7 +39,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/072.svg b/assets/images/cards/heron-svg/072.svg
index 8ce2f7f..057f6c5 100644
--- a/assets/images/cards/heron-svg/072.svg
+++ b/assets/images/cards/heron-svg/072.svg
@@ -41,7 +41,7 @@
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
 <g class="svg_effect">
 <circle cx="30" cy="40.0" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,70.66666666666667)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 <g transform="translate(137.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
@@ -54,7 +54,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(2)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(2)}" v-on:click="effectClick(2)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">prepare_another_champion</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/073.svg b/assets/images/cards/heron-svg/073.svg
index f890b92..c203b7f 100644
--- a/assets/images/cards/heron-svg/073.svg
+++ b/assets/images/cards/heron-svg/073.svg
@@ -40,7 +40,7 @@
 <g transform="translate(12,265)">
 <g class="svg_effect">
 <circle cx="30" cy="67.5" r="15" fill="gray" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,71.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/074.svg b/assets/images/cards/heron-svg/074.svg
index f16d1bc..3336bd5 100644
--- a/assets/images/cards/heron-svg/074.svg
+++ b/assets/images/cards/heron-svg/074.svg
@@ -51,7 +51,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/078.svg b/assets/images/cards/heron-svg/078.svg
index 6b0988f..9ff1ece 100644
--- a/assets/images/cards/heron-svg/078.svg
+++ b/assets/images/cards/heron-svg/078.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">cheaper_action</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/079.svg b/assets/images/cards/heron-svg/079.svg
index 8af30ce..b42d3ff 100644
--- a/assets/images/cards/heron-svg/079.svg
+++ b/assets/images/cards/heron-svg/079.svg
@@ -43,7 +43,7 @@
 </g>
 <g transform="translate(0,80)">
 <g class="svg_effect">
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/080.svg b/assets/images/cards/heron-svg/080.svg
index 5c40a51..c082dcf 100644
--- a/assets/images/cards/heron-svg/080.svg
+++ b/assets/images/cards/heron-svg/080.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">+ x pour chaque autre Couteau</tspan><tspan x="0" dy="1em">que vous avez en jeu</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/081.svg b/assets/images/cards/heron-svg/081.svg
index a3fbc06..e81c6cf 100644
--- a/assets/images/cards/heron-svg/081.svg
+++ b/assets/images/cards/heron-svg/081.svg
@@ -43,7 +43,7 @@
 </g>
 <g transform="translate(0,80)">
 <g class="svg_effect">
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/082.svg b/assets/images/cards/heron-svg/082.svg
index 4786cc6..1ff80d6 100644
--- a/assets/images/cards/heron-svg/082.svg
+++ b/assets/images/cards/heron-svg/082.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">cheaper_champion</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/086.svg b/assets/images/cards/heron-svg/086.svg
index bcd5889..8b5dba8 100644
--- a/assets/images/cards/heron-svg/086.svg
+++ b/assets/images/cards/heron-svg/086.svg
@@ -43,7 +43,7 @@
 </g>
 <g transform="translate(0,80)">
 <g class="svg_effect">
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/091.svg b/assets/images/cards/heron-svg/091.svg
index 20f5feb..55acb45 100644
--- a/assets/images/cards/heron-svg/091.svg
+++ b/assets/images/cards/heron-svg/091.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-5.5" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">Vous pouvez sacrifier une carte</tspan><tspan x="0" dy="1em">de votre main ou de votre défausse.</tspan></text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/092.svg b/assets/images/cards/heron-svg/092.svg
index e940481..4bb687b 100644
--- a/assets/images/cards/heron-svg/092.svg
+++ b/assets/images/cards/heron-svg/092.svg
@@ -44,7 +44,7 @@
 <g transform="translate(0,80)">
 <g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,31.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">keep_in_hand</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/094.svg b/assets/images/cards/heron-svg/094.svg
index 996a4ff..91e4876 100644
--- a/assets/images/cards/heron-svg/094.svg
+++ b/assets/images/cards/heron-svg/094.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">buy_gem_for_free</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/assets/images/cards/heron-svg/095.svg b/assets/images/cards/heron-svg/095.svg
index 1e1d727..18e6ea7 100644
--- a/assets/images/cards/heron-svg/095.svg
+++ b/assets/images/cards/heron-svg/095.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,71.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">cheaper_skills_passive </tspan><tspan x="0" dy="1em">Piochez une carte.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/099.svg b/assets/images/cards/heron-svg/099.svg
index f51a5a9..df8367b 100644
--- a/assets/images/cards/heron-svg/099.svg
+++ b/assets/images/cards/heron-svg/099.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,71.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">buy_for_free</text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/101.svg b/assets/images/cards/heron-svg/101.svg
index 487ca66..b21c29b 100644
--- a/assets/images/cards/heron-svg/101.svg
+++ b/assets/images/cards/heron-svg/101.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
+<g transform="translate(137.0,71.0)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(0)}" v-on:click="effectClick(0)">
 <text x="0" y="-7.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"><tspan x="0" dy="0em">cheaper_card_if_higher_price </tspan><tspan x="0" dy="1em">Piochez une carte.</tspan></text>
 </g>
 </g>
diff --git a/assets/images/cards/heron-svg/102.svg b/assets/images/cards/heron-svg/102.svg
index c57b608..270b4db 100644
--- a/assets/images/cards/heron-svg/102.svg
+++ b/assets/images/cards/heron-svg/102.svg
@@ -33,7 +33,7 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <g class="svg_effect">
-<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
+<g transform="translate(137.0,101.5)" class="svg_effect" v-bind:class="{used:used_effects_indexes.includes(1)}" v-on:click="effectClick(1)">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">pick_faction</text>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 31231eb..33a3c0b 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -253,4 +253,8 @@ onMounted(() => {
   filter: grayscale(0.6);
   pointer-events: none;
 }
+
+.svg_effect text {
+  cursor: pointer;
+}
 </style>
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index fd9ed01..bed289c 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -147,6 +147,7 @@ onUnmounted(() => {
   flex-direction: row;
   justify-content: space-evenly;
   min-width: 200px;
+  flex-wrap: wrap;
   transition: rotate v-bind("shuffleAnimationSpeed") ease;
 }
 
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 5c1809f..bcc9a26 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -54,7 +54,7 @@ function fireGemCardClick(e: string) {
 
 <style scoped>
 #market {
-  width: min-content;
+  width: max-content;
   display: flex;
   flex-direction: row;
   justify-content: center;
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 80fed70..0ac058b 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -147,6 +147,20 @@ eventSource.addEventListener("message", async (message) => {
       current_game.currentTurn.cardsLocked.push(data.card);
       await delay(settingsStore.animationSpeed);
     });
+  } else if (data.type == "destroyCard") {
+    const fromContainer = containers.value[data.from as string];
+    queueAction(async () => {
+      const index = fromContainer.cards.findIndex(
+        (c) => !c || c._id == data.card
+      );
+      fromContainer.cards.splice(index, 1);
+      await delay(settingsStore.animationSpeed);
+    });
+
+    queueAction(async () => {
+      playSound("/sounds/destroy.mp3");
+      await delay(settingsStore.animationSpeed);
+    });
   } else if (data.type == "joinGame") {
     queueAction(async () => {
       playSound("/sounds/teleport.mp3");
diff --git a/public/sounds/destroy.mp3 b/public/sounds/destroy.mp3
new file mode 100644
index 0000000..a2dfa22
--- /dev/null
+++ b/public/sounds/destroy.mp3
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:748bba7c740371a09657e3f16027c8f57217654dab12f625c9792ef9986ba933
+size 22945

From 50ea1d456fc1c5b2d1beb4a4835d5622654753e4 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 7 Jul 2024 21:21:54 +0200
Subject: [PATCH 02/21] Feat : add buy gem action

---
 components/MarketCards.vue |  4 ++--
 netcode/index.ts           | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index bcc9a26..4fb5ff7 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { buyCard } from "~/netcode";
+import { buyCard, buyGem } from "~/netcode";
 import type { Container, Game } from "~/netcode/interfaces";
 
 export interface Props {
@@ -25,7 +25,7 @@ function marketCardClick(e: string) {
 }
 
 function fireGemCardClick(e: string) {
-  console.log(e);
+  buyGem(props.game._id);
 }
 </script>
 
diff --git a/netcode/index.ts b/netcode/index.ts
index 985018e..eeef18f 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -113,6 +113,17 @@ export async function buyCard(game: string, cardId: string) {
   );
 }
 
+export async function buyGem(game: string) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(`games/${game}/turn/buyGem`, config.public.endpoint).href,
+    {
+      method: "POST",
+      credentials: "include",
+    }
+  );
+}
+
 export async function lockEffect(game: string, effectId: string) {
   const config = useRuntimeConfig();
   await $fetch(

From 9e985ad471981963669d1e95899024046710121d Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 7 Jul 2024 22:01:18 +0200
Subject: [PATCH 03/21] feat(img): ooooh i doubt you could ever imagine

---
 public/img/skins/heron/001.png | 3 +++
 public/img/skins/heron/004.png | 3 +++
 public/img/skins/heron/006.png | 3 +++
 public/img/skins/heron/013.png | 3 +++
 public/img/skins/heron/015.png | 3 +++
 public/img/skins/heron/025.png | 3 +++
 public/img/skins/heron/027.png | 3 +++
 public/img/skins/heron/028.png | 3 +++
 public/img/skins/heron/030.png | 3 +++
 public/img/skins/heron/033.png | 3 +++
 public/img/skins/heron/034.png | 3 +++
 public/img/skins/heron/035.png | 3 +++
 public/img/skins/heron/036.png | 3 +++
 public/img/skins/heron/042.png | 3 +++
 public/img/skins/heron/043.png | 3 +++
 public/img/skins/heron/051.png | 3 +++
 public/img/skins/heron/054.png | 3 +++
 public/img/skins/heron/056.png | 3 +++
 public/img/skins/heron/057.png | 3 +++
 public/img/skins/heron/058.png | 3 +++
 public/img/skins/heron/059.png | 3 +++
 21 files changed, 63 insertions(+)
 create mode 100644 public/img/skins/heron/001.png
 create mode 100644 public/img/skins/heron/004.png
 create mode 100644 public/img/skins/heron/006.png
 create mode 100644 public/img/skins/heron/013.png
 create mode 100644 public/img/skins/heron/015.png
 create mode 100644 public/img/skins/heron/025.png
 create mode 100644 public/img/skins/heron/027.png
 create mode 100644 public/img/skins/heron/028.png
 create mode 100644 public/img/skins/heron/030.png
 create mode 100644 public/img/skins/heron/033.png
 create mode 100644 public/img/skins/heron/034.png
 create mode 100644 public/img/skins/heron/035.png
 create mode 100644 public/img/skins/heron/036.png
 create mode 100644 public/img/skins/heron/042.png
 create mode 100644 public/img/skins/heron/043.png
 create mode 100644 public/img/skins/heron/051.png
 create mode 100644 public/img/skins/heron/054.png
 create mode 100644 public/img/skins/heron/056.png
 create mode 100644 public/img/skins/heron/057.png
 create mode 100644 public/img/skins/heron/058.png
 create mode 100644 public/img/skins/heron/059.png

diff --git a/public/img/skins/heron/001.png b/public/img/skins/heron/001.png
new file mode 100644
index 0000000..a795452
--- /dev/null
+++ b/public/img/skins/heron/001.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a1190340203683650f288d990ed55b39e68776a677a1603cf3c8fa39bef28258
+size 480460
diff --git a/public/img/skins/heron/004.png b/public/img/skins/heron/004.png
new file mode 100644
index 0000000..5815802
--- /dev/null
+++ b/public/img/skins/heron/004.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:47e9eef63fdda685fedb297400baeba0462dc01f3ac53917fa89aa1703424bba
+size 220023
diff --git a/public/img/skins/heron/006.png b/public/img/skins/heron/006.png
new file mode 100644
index 0000000..685eccc
--- /dev/null
+++ b/public/img/skins/heron/006.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0232afd14a067c50925903d2e97b2c9b328cad339ecd6b0a1bf9f84f691ec901
+size 349424
diff --git a/public/img/skins/heron/013.png b/public/img/skins/heron/013.png
new file mode 100644
index 0000000..eeefa23
--- /dev/null
+++ b/public/img/skins/heron/013.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a7aa2e9bcd54be1610ba98d31b4a50a3c63cdabab0797c857f2996f6e3351301
+size 370480
diff --git a/public/img/skins/heron/015.png b/public/img/skins/heron/015.png
new file mode 100644
index 0000000..bd790d5
--- /dev/null
+++ b/public/img/skins/heron/015.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8809800a5861ef7c5a96a87c6177abac5659901e217c2a64a63810e1a7753e2e
+size 385536
diff --git a/public/img/skins/heron/025.png b/public/img/skins/heron/025.png
new file mode 100644
index 0000000..9f97adc
--- /dev/null
+++ b/public/img/skins/heron/025.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:643624c3e6970f7436c5b93c86eadc564576e44d7f6210002149baf45649115b
+size 192316
diff --git a/public/img/skins/heron/027.png b/public/img/skins/heron/027.png
new file mode 100644
index 0000000..e7c2bc7
--- /dev/null
+++ b/public/img/skins/heron/027.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:359391eecd42d29532ca2ca6dd140b6091fdf62381c423f6899fa56d52868b43
+size 204999
diff --git a/public/img/skins/heron/028.png b/public/img/skins/heron/028.png
new file mode 100644
index 0000000..2a9c183
--- /dev/null
+++ b/public/img/skins/heron/028.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9530374959a4cee675128c87a088bf63fd8496b09ea0d4bf4962018016403ff0
+size 238394
diff --git a/public/img/skins/heron/030.png b/public/img/skins/heron/030.png
new file mode 100644
index 0000000..f069c66
--- /dev/null
+++ b/public/img/skins/heron/030.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7550783c5c81aff1e8d787d9356f72d018e9b8cfe13657c941610cdda0a31f5f
+size 232998
diff --git a/public/img/skins/heron/033.png b/public/img/skins/heron/033.png
new file mode 100644
index 0000000..fdb612b
--- /dev/null
+++ b/public/img/skins/heron/033.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7ec9636274657ce2cea03151cba6fbb7dbaa6bc6fedba9a4d720eeb2969ef08b
+size 227198
diff --git a/public/img/skins/heron/034.png b/public/img/skins/heron/034.png
new file mode 100644
index 0000000..b46a396
--- /dev/null
+++ b/public/img/skins/heron/034.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:172a87f3da5817ebec6689d3ab2f12830964dd4218705ce1707f45c0e17716bc
+size 292647
diff --git a/public/img/skins/heron/035.png b/public/img/skins/heron/035.png
new file mode 100644
index 0000000..6d41b18
--- /dev/null
+++ b/public/img/skins/heron/035.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3514cb21c9ea2de670653bee8ceb5a0a1a539bf9ab2b5a5890063add67b93fb6
+size 212294
diff --git a/public/img/skins/heron/036.png b/public/img/skins/heron/036.png
new file mode 100644
index 0000000..54d628c
--- /dev/null
+++ b/public/img/skins/heron/036.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:81c13f1c6ebec01d21205abf6ae1fabb9d6051b8c5bf1cf327ae41da6d110ced
+size 252338
diff --git a/public/img/skins/heron/042.png b/public/img/skins/heron/042.png
new file mode 100644
index 0000000..399fac4
--- /dev/null
+++ b/public/img/skins/heron/042.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bce5561fc53cba1517e26865a3b292b3945d1151318508093dea03180e9493f1
+size 424326
diff --git a/public/img/skins/heron/043.png b/public/img/skins/heron/043.png
new file mode 100644
index 0000000..aba3755
--- /dev/null
+++ b/public/img/skins/heron/043.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9030a35cc4cf663d867ab5ad24948028a5d222daa45ee4ad62765a3f47b80df4
+size 215738
diff --git a/public/img/skins/heron/051.png b/public/img/skins/heron/051.png
new file mode 100644
index 0000000..ba044cd
--- /dev/null
+++ b/public/img/skins/heron/051.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a00c6dccd6f9b8a597d3a4208d7ca2fc56b1d24dbc2197afe59561b66a3d72c1
+size 289338
diff --git a/public/img/skins/heron/054.png b/public/img/skins/heron/054.png
new file mode 100644
index 0000000..c52bdc2
--- /dev/null
+++ b/public/img/skins/heron/054.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5e5f94bff3efbde3bafd560b89840c293db6f0176f3a3cf2faad550380baf45
+size 223567
diff --git a/public/img/skins/heron/056.png b/public/img/skins/heron/056.png
new file mode 100644
index 0000000..7d70c52
--- /dev/null
+++ b/public/img/skins/heron/056.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4f5aca131adaf141483a2871e8646af88a2a5b5626ee20c5b48a76d19e528121
+size 114668
diff --git a/public/img/skins/heron/057.png b/public/img/skins/heron/057.png
new file mode 100644
index 0000000..c63e61c
--- /dev/null
+++ b/public/img/skins/heron/057.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:681ec65aa03d52382be7aaaebd1120502ebfda0fff79421b70de97946fc92ced
+size 108939
diff --git a/public/img/skins/heron/058.png b/public/img/skins/heron/058.png
new file mode 100644
index 0000000..c485b7d
--- /dev/null
+++ b/public/img/skins/heron/058.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8da822a79e1413a84150ade0fb39fdbdd5b227b0df724cf7028eaf5b0b5addc6
+size 115825
diff --git a/public/img/skins/heron/059.png b/public/img/skins/heron/059.png
new file mode 100644
index 0000000..cfb2f71
--- /dev/null
+++ b/public/img/skins/heron/059.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6fd54f9c25826b2b622d9afcf33bcef49e3fe13a901fcf0721d83728f9f58e3f
+size 113895

From 6cdd846d3fc534d2d54b9e1282b1951d0898dd7d Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Mon, 8 Jul 2024 10:46:44 +0200
Subject: [PATCH 04/21] Feat : add card drag

---
 components/CardPreview.vue | 180 +++++++++++++++++++++++++++++++------
 components/MarketCards.vue |  11 +--
 2 files changed, 161 insertions(+), 30 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 33a3c0b..2724b08 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
 });
 
-const emit = defineEmits(["click", "effectClick"]);
+const emit = defineEmits(["click", "effectClick", "drop", "move"]);
 
 const settingsStore = useSettingsStore();
 
@@ -28,12 +28,32 @@ const childCount = ref<number>(0);
 
 const card = ref<HTMLElement>();
 
+const dragStatus = ref<{
+  hasClickedDown: boolean;
+  dragging: boolean;
+  intervalEvent?: ReturnType<typeof setTimeout>;
+}>({
+  hasClickedDown: false,
+  dragging: false,
+});
+const initialOffsetX = ref(0);
+const initialOffsetY = ref(0);
+
+const offsetX = ref(0);
+const offsetY = ref(0);
+const offsetWidth = ref(0);
+const offsetHeight = ref(0);
+
+const translateX = ref(0);
+const translateY = ref(0);
+
 const extension = computed(() => {
   if (settingsStore.cardStyle == CardStyles.SVG) {
     return ".svg";
   }
   return ".png";
 });
+
 function cardClick() {
   if (!props.card_id) return;
   emit("click");
@@ -51,6 +71,8 @@ function mouseenter(e: MouseEvent) {
 }
 function mouseleave(e: MouseEvent) {
   isZooming.value = false;
+  dragStatus.value.dragging = false;
+  clearTimeout(dragStatus.value.intervalEvent);
 }
 
 function rightClickDown(e: MouseEvent) {
@@ -61,8 +83,102 @@ function rightClickUp(e: MouseEvent) {
   isZooming.value = false;
 }
 
+function startDrag(e: MouseEvent) {
+  dragStatus.value.dragging = true;
+  translateX.value = 0;
+  translateY.value = 0;
+  const cardElement = card.value;
+  if (!cardElement) {
+    return;
+  }
+  initialOffsetX.value = e.offsetX;
+  initialOffsetY.value = e.offsetY;
+  offsetX.value = cardElement.offsetLeft + e.offsetX;
+  offsetY.value = cardElement.offsetTop + e.offsetY;
+  translateX.value = e.pageX - offsetX.value;
+  translateY.value = e.pageY - offsetY.value;
+}
+function leftClickDown(e: MouseEvent) {
+  dragStatus.value.hasClickedDown = true;
+  window.addEventListener("mousemove", mouseMove, false);
+}
+
+function leftClickUpGlobal(e: MouseEvent) {
+  dragStatus.value.dragging = false;
+  clearTimeout(dragStatus.value.intervalEvent);
+  window.removeEventListener("mousemove", mouseMove, false);
+}
+
+function leftClickUp(e: MouseEvent) {
+  if (dragStatus.value.dragging == false && dragStatus.value.hasClickedDown) {
+    dragStatus.value.hasClickedDown = false;
+    cardClick();
+    return;
+  }
+
+  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
+    dragStatus.value.dragging = false;
+    dragStatus.value.hasClickedDown = false;
+    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
+  }
+}
+
+const sensitivity = 0.5;
+function mouseMove(e: MouseEvent) {
+  if (
+    dragStatus.value.hasClickedDown &&
+    !dragStatus.value.dragging &&
+    Math.sqrt(Math.abs(e.movementX * e.movementY)) > sensitivity
+  ) {
+    startDrag(e);
+  }
+
+  const cardElement = card.value;
+  if (!cardElement) {
+    return;
+  }
+  // console.log(cardElement.offsetLeft);
+  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
+  offsetY.value = cardElement.offsetTop + initialOffsetY.value;
+
+  translateX.value = e.pageX - offsetX.value;
+  translateY.value = e.pageY - offsetY.value;
+
+  emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
+}
+
+defineExpose({
+  offsetX,
+  offsetY,
+  offsetWidth,
+  offsetHeight,
+  uuid: props.card?._id,
+});
+
 onMounted(() => {
-  card.value?.style.setProperty("--random-seed", -Math.random() * 10 + "s");
+  window.addEventListener("mouseup", leftClickUpGlobal, false);
+  const cardElement = card.value;
+  if (!cardElement) {
+    return;
+  }
+  offsetX.value = cardElement.offsetLeft;
+  offsetY.value = cardElement.offsetTop;
+  offsetWidth.value = cardElement.offsetWidth;
+  offsetHeight.value = cardElement.offsetHeight;
+  cardElement.offsetWidth;
+});
+
+onRenderTriggered(() => {
+  const cardElement = card.value;
+  if (!cardElement) {
+    return;
+  }
+  offsetX.value = cardElement.offsetLeft;
+  offsetY.value = cardElement.offsetTop;
+});
+onUnmounted(() => {
+  window.removeEventListener("mouseup", leftClickUpGlobal, false);
+  // window.addEventListener("mousemove", mouseMove, false);
 });
 </script>
 
@@ -71,6 +187,7 @@ onMounted(() => {
     ref="card"
     class="card"
     :class="{
+      dragging: dragStatus.dragging,
       active: childCount > 0,
       wrapped,
       unlocked: !props.locked,
@@ -78,18 +195,13 @@ onMounted(() => {
       no_effects: noEffects || !props.locked,
     }"
     @contextmenu.prevent="false"
-    @click.left="cardClick"
     @mousedown.right="rightClickDown"
     @mouseup.right="rightClickUp"
-    @mouseenter="mouseenter"
-    @mouseleave="mouseleave"
+    @mousedown.left="leftClickDown"
+    @mouseup.left="leftClickUp"
   >
-    <div
-      id="contextMenuButtons"
-      :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }"
-    >
-      <slot></slot>
-    </div>
+    <div id="overlay"><slot></slot></div>
+
     <template v-if="props.card_id">
       <!-- <svg
         width="180"
@@ -146,10 +258,41 @@ onMounted(() => {
   justify-content: center;
   margin-bottom: 0px;
   margin-top: var(--margin-bottom);
-  transition: all 0.075s cubic-bezier(1, 1.81, 0.59, 1.42);
+  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   pointer-events: all;
   max-height: var(--max-height);
   max-width: var(--max-width);
+  /* cursor: grab; */
+}
+
+#overlay {
+  position: absolute;
+  z-index: 111;
+}
+
+.card.unlocked {
+  margin-top: 0px;
+  margin-bottom: var(--margin-bottom);
+  transform: translateY(calc(var(--margin-bottom) * -0.25));
+  filter: drop-shadow(
+    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
+  );
+  cursor: pointer;
+}
+
+.card:not(svg) {
+  cursor: grab;
+}
+
+.card.dragging {
+  transform: translateX(v-bind("translateX + 'px'"))
+    translateY(v-bind("translateY + 'px'"));
+  cursor: grabbing;
+  z-index: 999;
+}
+
+.card.dragging > svg {
+  transform: scale(110%);
 }
 
 .card.active {
@@ -172,15 +315,6 @@ onMounted(() => {
     drop-shadow(-0.5px -0.5px 0.5px gray);
 }
 
-.card.unlocked {
-  margin-top: 0px;
-  margin-bottom: var(--margin-bottom);
-  transform: translateY(calc(var(--margin-bottom) * -0.25));
-  filter: drop-shadow(
-    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
-  );
-}
-
 .card.zoom {
   transform: scale(200%);
   z-index: 10;
@@ -207,10 +341,6 @@ onMounted(() => {
   pointer-events: none;
 }
 
-.card.no_effects {
-  cursor: pointer;
-}
-
 #contextMenuButtons > * {
   flex: 1;
   border-radius: 12px;
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 4fb5ff7..c9766ff 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -30,7 +30,7 @@ function fireGemCardClick(e: string) {
 </script>
 
 <template>
-  <div id="market">
+  <div class="market">
     <CardsGrouped
       :container="marketStack"
       :wrapped="true"
@@ -53,22 +53,23 @@ function fireGemCardClick(e: string) {
 </template>
 
 <style scoped>
-#market {
+.market {
   width: max-content;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   z-index: 2;
-  position: relative;
+  /* position: relative; */
   gap: 2px;
   margin: 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
   border-radius: 10px;
-  filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6));
-  backdrop-filter: blur(5px) brightness(80%);
+  isolation: initial;
+  /* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
+  /* backdrop-filter: blur(5px) brightness(80%); */
   background: rgba(155, 62, 62, 0.46);
 }
 

From 6bef7778e8006c864e6fa063f10d05e086b90593 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Mon, 8 Jul 2024 11:22:29 +0200
Subject: [PATCH 05/21] Feat : move card and keep position on array reorder

---
 components/CardPreview.vue  | 70 +++++++++++++++++++++++++++----------
 components/CardsGrouped.vue | 12 +++++++
 2 files changed, 64 insertions(+), 18 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 2724b08..8e0e312 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -20,7 +20,14 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
 });
 
-const emit = defineEmits(["click", "effectClick", "drop", "move"]);
+const emit = defineEmits([
+  "click",
+  "effectClick",
+  "drop",
+  "move",
+  "startMove",
+  "stopMove",
+]);
 
 const settingsStore = useSettingsStore();
 
@@ -39,6 +46,9 @@ const dragStatus = ref<{
 const initialOffsetX = ref(0);
 const initialOffsetY = ref(0);
 
+const mousePageX = ref(0);
+const mousePageY = ref(0);
+
 const offsetX = ref(0);
 const offsetY = ref(0);
 const offsetWidth = ref(0);
@@ -71,8 +81,6 @@ function mouseenter(e: MouseEvent) {
 }
 function mouseleave(e: MouseEvent) {
   isZooming.value = false;
-  dragStatus.value.dragging = false;
-  clearTimeout(dragStatus.value.intervalEvent);
 }
 
 function rightClickDown(e: MouseEvent) {
@@ -84,6 +92,7 @@ function rightClickUp(e: MouseEvent) {
 }
 
 function startDrag(e: MouseEvent) {
+  emit("startMove");
   dragStatus.value.dragging = true;
   translateX.value = 0;
   translateY.value = 0;
@@ -91,20 +100,31 @@ function startDrag(e: MouseEvent) {
   if (!cardElement) {
     return;
   }
+  mousePageX.value = e.pageX;
+  mousePageY.value = e.pageY;
   initialOffsetX.value = e.offsetX;
   initialOffsetY.value = e.offsetY;
   offsetX.value = cardElement.offsetLeft + e.offsetX;
   offsetY.value = cardElement.offsetTop + e.offsetY;
-  translateX.value = e.pageX - offsetX.value;
-  translateY.value = e.pageY - offsetY.value;
+  translateX.value = mousePageX.value - offsetX.value;
+  translateY.value = mousePageY.value - offsetY.value;
 }
+
 function leftClickDown(e: MouseEvent) {
   dragStatus.value.hasClickedDown = true;
   window.addEventListener("mousemove", mouseMove, false);
 }
 
 function leftClickUpGlobal(e: MouseEvent) {
-  dragStatus.value.dragging = false;
+  mousePageX.value = e.pageX;
+  mousePageY.value = e.pageY;
+
+  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
+    dragStatus.value.dragging = false;
+    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
+    emit("stopMove");
+  }
+  dragStatus.value.hasClickedDown = false;
   clearTimeout(dragStatus.value.intervalEvent);
   window.removeEventListener("mousemove", mouseMove, false);
 }
@@ -115,12 +135,6 @@ function leftClickUp(e: MouseEvent) {
     cardClick();
     return;
   }
-
-  if (dragStatus.value.dragging && dragStatus.value.hasClickedDown) {
-    dragStatus.value.dragging = false;
-    dragStatus.value.hasClickedDown = false;
-    emit("drop", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
-  }
 }
 
 const sensitivity = 0.5;
@@ -137,14 +151,16 @@ function mouseMove(e: MouseEvent) {
   if (!cardElement) {
     return;
   }
+  mousePageX.value = e.pageX;
+  mousePageY.value = e.pageY;
   // console.log(cardElement.offsetLeft);
   offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
   offsetY.value = cardElement.offsetTop + initialOffsetY.value;
 
-  translateX.value = e.pageX - offsetX.value;
-  translateY.value = e.pageY - offsetY.value;
+  translateX.value = mousePageX.value - offsetX.value;
+  translateY.value = mousePageY.value - offsetY.value;
 
-  emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
+  // emit("move", { x: e.pageX, y: e.pageY, uuid: props.card?._id });
 }
 
 defineExpose({
@@ -168,14 +184,30 @@ onMounted(() => {
   cardElement.offsetWidth;
 });
 
-onRenderTriggered(() => {
+// onRenderTriggered(() => {
+//   const cardElement = card.value;
+//   if (!cardElement) {
+//     return;
+//   }
+//   offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
+//   offsetY.value = cardElement.offsetTop + initialOffsetY.value;
+
+//   translateX.value = mousePageX.value - offsetX.value;
+//   translateY.value = mousePageY.value - offsetY.value;
+// });
+
+onUpdated(() => {
   const cardElement = card.value;
   if (!cardElement) {
     return;
   }
-  offsetX.value = cardElement.offsetLeft;
-  offsetY.value = cardElement.offsetTop;
+  offsetX.value = cardElement.offsetLeft + initialOffsetX.value;
+  offsetY.value = cardElement.offsetTop + initialOffsetY.value;
+
+  translateX.value = mousePageX.value - offsetX.value;
+  translateY.value = mousePageY.value - offsetY.value;
 });
+
 onUnmounted(() => {
   window.removeEventListener("mouseup", leftClickUpGlobal, false);
   // window.addEventListener("mousemove", mouseMove, false);
@@ -199,6 +231,8 @@ onUnmounted(() => {
     @mouseup.right="rightClickUp"
     @mousedown.left="leftClickDown"
     @mouseup.left="leftClickUp"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
   >
     <div id="overlay"><slot></slot></div>
 
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index bed289c..d0595b1 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -87,6 +87,16 @@ function endAnimation() {
 onUnmounted(() => {
   // containerEvents.delete(props.container._id);
 });
+
+const interval = ref<ReturnType<typeof setInterval>>();
+function startMove() {
+  interval.value = setInterval(() => {
+    props.container.cards.sort((a, b) => Math.random() - 0.5);
+  }, 1000);
+}
+function stopMove() {
+  clearInterval(interval.value);
+}
 </script>
 
 <template>
@@ -98,6 +108,8 @@ onUnmounted(() => {
       <CardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
+        @startMove="startMove"
+        @stopMove="stopMove"
         v-for="c in cards"
         :card_id="c.cardId"
         :wrapped="wrapped"

From 2709bb799c7acf8b1f67390311496b8ad49b9bdc Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sat, 13 Jul 2024 16:49:22 +0200
Subject: [PATCH 06/21] Feat : add prepare token

---
 components/CardPreview.vue           |  8 ++---
 components/CardsGrouped.vue          | 37 +++++++++++++++-------
 components/MarketCards.vue           | 27 ++++++++++++++--
 components/PlayerSlot.vue            | 10 ++++--
 components/tokens/TokenComponent.vue | 37 ++++++++++++++++++++++
 netcode/interfaces.ts                | 47 +++++++++++++++++++++++++++-
 pages/game/[id].vue                  |  9 +++++-
 7 files changed, 154 insertions(+), 21 deletions(-)
 create mode 100644 components/tokens/TokenComponent.vue

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 8e0e312..35145c5 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -234,8 +234,6 @@ onUnmounted(() => {
     @mouseenter="mouseenter"
     @mouseleave="mouseleave"
   >
-    <div id="overlay"><slot></slot></div>
-
     <template v-if="props.card_id">
       <!-- <svg
         width="180"
@@ -270,7 +268,7 @@ onUnmounted(() => {
         "
         draggable="false"
       />
-      <div></div>
+      <div id="overlay"><slot></slot></div>
     </template>
 
     <img
@@ -301,7 +299,9 @@ onUnmounted(() => {
 
 #overlay {
   position: absolute;
-  z-index: 111;
+  top: 20%;
+  width: calc(100% - 8%);
+  height: 49%;
 }
 
 .card.unlocked {
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index d0595b1..6e418fc 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { delay } from "~/netcode/events";
-import type { Card, Container, PlayingTurn } from "~/netcode/interfaces";
+import type {
+  Card,
+  Container,
+  Effect,
+  PlayingTurn,
+} from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   container: Container;
@@ -8,12 +14,14 @@ export interface Props {
   wrapped?: boolean;
   hidden?: boolean;
   noEffects?: boolean;
+  tokens?: Effect[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
   wrapped: () => false,
   hidden: () => false,
   noEffects: () => false,
+  tokens: () => [],
 });
 
 const emit = defineEmits(["cardClick", "effectClick"]);
@@ -34,6 +42,7 @@ const animationSpeed = computed(() => settingsStore.animationSpeed + "ms");
 const shuffleAnimationSpeed = computed(
   () => settingsStore.animationSpeed * 2 + "ms"
 );
+
 function populateContainer() {}
 
 // const rotate = ref(false);
@@ -89,14 +98,16 @@ onUnmounted(() => {
 });
 
 const interval = ref<ReturnType<typeof setInterval>>();
-function startMove() {
-  interval.value = setInterval(() => {
-    props.container.cards.sort((a, b) => Math.random() - 0.5);
-  }, 1000);
-}
-function stopMove() {
-  clearInterval(interval.value);
-}
+// function startMove() {
+//   interval.value = setInterval(() => {
+//     props.container.cards.sort((a, b) => Math.random() - 0.5);
+//   }, 1000);
+// }
+// function stopMove() {
+//   clearInterval(interval.value);
+// }
+
+function useToken(token: Effect, card: Card) {}
 </script>
 
 <template>
@@ -108,8 +119,6 @@ function stopMove() {
       <CardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
-        @startMove="startMove"
-        @stopMove="stopMove"
         v-for="c in cards"
         :card_id="c.cardId"
         :wrapped="wrapped"
@@ -126,6 +135,12 @@ function stopMove() {
         },[] as number[])"
         :noEffects="noEffects"
       >
+        <template v-for="t in tokens">
+          <TokenComponent
+            :token="t"
+            @useToken="useToken(t, c)"
+          ></TokenComponent>
+        </template>
       </CardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index c9766ff..ae58416 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { buyCard, buyGem } from "~/netcode";
-import type { Container, Game } from "~/netcode/interfaces";
+import { CardEffects, type Container, type Game } from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
   game: Game;
@@ -27,6 +28,25 @@ function marketCardClick(e: string) {
 function fireGemCardClick(e: string) {
   buyGem(props.game._id);
 }
+
+const marketTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.STACK_NEXT_CARD_BOUGHT,
+      CardEffects.STACK_NEXT_ACTION_BOUGHT,
+      CardEffects.PLAY_NEXT_CARD_BOUGHT,
+    ].includes(t.effect)
+  )
+);
+
+const gemsTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.STACK_NEXT_CARD_BOUGHT,
+      CardEffects.PLAY_NEXT_CARD_BOUGHT,
+    ].includes(t.effect)
+  )
+);
 </script>
 
 <template>
@@ -41,13 +61,16 @@ function fireGemCardClick(e: string) {
       :container="market"
       @cardClick="marketCardClick"
       :noEffects="true"
-    ></CardsGrouped>
+      :tokens="marketTokens"
+    >
+    </CardsGrouped>
     <div class="separator"></div>
     <CardsGrouped
       :container="fire_gems"
       :wrapped="true"
       @cardClick="fireGemCardClick"
       :noEffects="true"
+      :tokens="gemsTokens"
     ></CardsGrouped>
   </div>
 </template>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 20fa2ca..166cf9b 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
-import type { Game, Player } from "~/netcode/interfaces";
+import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
 import { useTurnStore } from "~/stores/turnStore";
 
 export interface Props {
@@ -37,8 +37,13 @@ const isSelf = computed(
 );
 const isSelfTurn = computed(() => isSelf && isPlayerTurn);
 
+const cardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [CardEffects.SACRIFICE, CardEffects.PREPARE].includes(t.effect)
+  )
+);
+
 const warningText = ref("Effets restants!");
-const turnStore = useTurnStore();
 
 // const make_discard = (target: Player) =>
 //     clientStore.findUseEffect(CardEffects.MAKE_DISCARD, target);
@@ -172,6 +177,7 @@ function effectClick(cardUUID: string, effectIndex: number) {
         :playingTurn="props.game.currentTurn"
         @cardClick="boardCardClick"
         @effectClick="effectClick"
+        :tokens="cardTokens"
       >
       </CardsGrouped>
 
diff --git a/components/tokens/TokenComponent.vue b/components/tokens/TokenComponent.vue
new file mode 100644
index 0000000..65b8520
--- /dev/null
+++ b/components/tokens/TokenComponent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Effect } from "~/netcode/interfaces";
+
+type Props = {
+  token: Effect;
+};
+const props = defineProps<Props>();
+
+const emit = defineEmits(["useToken"]);
+
+function onClick(e: MouseEvent) {
+  emit("useToken", props.token);
+}
+</script>
+
+<template>
+  <div @click.stop="onClick" @mousedown.left.stop="" id="token">
+    {{ props.token.effect }}
+  </div>
+</template>
+
+<style scoped>
+#token {
+  width: 50px;
+  height: 50px;
+  background: white;
+  border: 1px solid white;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: 0.2s all;
+  border-radius: 15px;
+}
+
+#token:hover {
+  border: 1px solid red;
+}
+</style>
diff --git a/netcode/interfaces.ts b/netcode/interfaces.ts
index 4f49097..4c4d8b3 100644
--- a/netcode/interfaces.ts
+++ b/netcode/interfaces.ts
@@ -1,3 +1,46 @@
+export enum CardEffects {
+  //Base
+  GOLD = "gold",
+  DAMAGE = "damage",
+  HEAL = "heal",
+  PREPARE = "prepare",
+  STUN = "stun",
+  SACRIFICE = "sacrifice",
+  DRAW = "draw",
+  DRAW_AND_DISCARD = "draw_and_discard",
+  MAKE_DISCARD = "make_discard",
+  RESTACK_DISCARDED_CHAMPION = "restack_discarded_champion",
+  RESTACK_DISCARDED_CARD = "restack_discarded_card",
+  STACK_NEXT_ACTION_BOUGHT = "stack_next_action_bought",
+  STACK_NEXT_CARD_BOUGHT = "stack_next_card_bought",
+  PLAY_NEXT_CARD_BOUGHT = "play_next_card_bought",
+
+  //DLCs
+  BUY_FOR_FREE = "buy_for_free",
+
+  //Journeys
+  DAMAGE_ALL_CHAMPIONS = "damage_all_champions",
+
+  //Journeys: Hunters
+  DISCARD_X_AND_DRAW_X = "discard_x_and_draw_x",
+  PREPARE_ANOTHER_CHAMPION = "prepare_another_champion",
+  //Journey: Travelers
+  PREPARE_ALL_CHAMPIONS = "prepare_all_champions",
+  CHEAPER_CHAMPION = "cheaper_champion",
+  CHEAPER_CHAMPIONS_PASSIVE = "cheaper_champions_passive",
+  CHEAPER_ACTION = "cheaper_action",
+  CONTROL_OPPOSING_CHAMPION_PASSIVE = "control_opposing_champion_passive",
+
+  RESTACK_DISCARDED_ACTION = "restack_discarded_action",
+
+  //Ancestry
+  KEEP_IN_HAND = "keep_in_hand",
+  BUY_GEM_FOR_FREE = "buy_gem_for_free",
+  CHEAPER_SKILLS_PASSIVE = "cheaper_skills_passive",
+  CHEAPER_CARD_IF_HIGHER_PRICE = "cheaper_card_if_higher_price",
+  PICK_FACTION = "pick_faction",
+}
+
 export interface GameObject {
   _id: string;
 }
@@ -47,7 +90,9 @@ export interface Container extends GameObject {
   shuffling?: boolean;
 }
 
-export interface Effect extends GameObject {}
+export interface Effect extends GameObject {
+  effect: CardEffects;
+}
 export interface Card extends GameObject {
   cardId: number;
   effects: Effect[];
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 0ac058b..7fc468d 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -171,6 +171,14 @@ eventSource.addEventListener("message", async (message) => {
       current_game.currentTurn.lockedEffects.push(data.effect);
       await delay(settingsStore.animationSpeed);
     });
+  } else if (data.type == "unlockEffect") {
+    queueAction(async () => {
+      const effectIndex = current_game.currentTurn.lockedEffects.findIndex(
+        data.effect
+      );
+      current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
+      await delay(settingsStore.animationSpeed);
+    });
   } else if (data.type == "currentTurn.updateGold") {
     queueAction(async () => {
       console.log(`adding gold amount : ` + data.operation);
@@ -298,7 +306,6 @@ onUnmounted(() => {
       :fire_gems="game.fireGems"
       :marketStack="game.marketStack"
     ></MarketCards>
-    <div id="turnStats">{{ game.currentTurn.tokens }}</div>
     <div id="player_list_container">
       <div id="player_list">
         <PlayerListElement

From b1c9644941d61db5b697a8e8f4beac6f159cc9f3 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sat, 13 Jul 2024 21:37:55 +0200
Subject: [PATCH 07/21] Feat : add ability to use tokens

---
 components/CardsGrouped.vue |  8 +++++---
 components/MarketCards.vue  | 16 ++++++++++++++--
 components/PlayerSlot.vue   | 22 ++++++++++++++++++++--
 netcode/index.ts            | 18 ++++++++++++++++++
 pages/game/[id].vue         |  8 ++++++++
 5 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 6e418fc..9a1aebf 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<Props>(), {
   tokens: () => [],
 });
 
-const emit = defineEmits(["cardClick", "effectClick"]);
+const emit = defineEmits(["cardClick", "effectClick", "tokenClick"]);
 
 const settingsStore = useSettingsStore();
 
@@ -107,7 +107,9 @@ const interval = ref<ReturnType<typeof setInterval>>();
 //   clearInterval(interval.value);
 // }
 
-function useToken(token: Effect, card: Card) {}
+function tokenClick(token: Effect, card: Card) {
+  emit("tokenClick", { token, card });
+}
 </script>
 
 <template>
@@ -138,7 +140,7 @@ function useToken(token: Effect, card: Card) {}
         <template v-for="t in tokens">
           <TokenComponent
             :token="t"
-            @useToken="useToken(t, c)"
+            @useToken="tokenClick(t, c)"
           ></TokenComponent>
         </template>
       </CardPreview>
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index ae58416..b13eb7e 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { buyCard, buyGem } from "~/netcode";
-import { CardEffects, type Container, type Game } from "~/netcode/interfaces";
+import { buyCard, buyGem, useToken } from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Container,
+  type Effect,
+  type Game,
+} from "~/netcode/interfaces";
 import TokenComponent from "./tokens/TokenComponent.vue";
 
 export interface Props {
@@ -47,6 +53,10 @@ const gemsTokens = computed(() =>
     ].includes(t.effect)
   )
 );
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id);
+}
 </script>
 
 <template>
@@ -62,6 +72,7 @@ const gemsTokens = computed(() =>
       @cardClick="marketCardClick"
       :noEffects="true"
       :tokens="marketTokens"
+      @tokenClick="tokenClick"
     >
     </CardsGrouped>
     <div class="separator"></div>
@@ -71,6 +82,7 @@ const gemsTokens = computed(() =>
       @cardClick="fireGemCardClick"
       :noEffects="true"
       :tokens="gemsTokens"
+      @tokenClick="tokenClick"
     ></CardsGrouped>
   </div>
 </template>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 166cf9b..83a6589 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,6 +1,19 @@
 <script setup lang="ts">
-import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
-import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
+import {
+  endTurn,
+  joinGame,
+  lockCard,
+  lockEffect,
+  startGame,
+  useToken,
+} from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
 import { useTurnStore } from "~/stores/turnStore";
 
 export interface Props {
@@ -119,6 +132,10 @@ function effectClick(cardUUID: string, effectIndex: number) {
 // function check_for_guard(player: Player) {
 //     return player.board.some(c => c.guard === true)
 // }
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id, props.player._id);
+}
 </script>
 
 <template>
@@ -178,6 +195,7 @@ function effectClick(cardUUID: string, effectIndex: number) {
         @cardClick="boardCardClick"
         @effectClick="effectClick"
         :tokens="cardTokens"
+        @tokenClick="tokenClick"
       >
       </CardsGrouped>
 
diff --git a/netcode/index.ts b/netcode/index.ts
index eeef18f..3b26f88 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -124,6 +124,24 @@ export async function buyGem(game: string) {
   );
 }
 
+export async function useToken(
+  game: string,
+  tokenId: string,
+  cardId: string,
+  playerId?: string
+) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(`games/${game}/turn/useToken/${tokenId}`, config.public.endpoint)
+      .href,
+    {
+      method: "POST",
+      credentials: "include",
+      body: { cardId, playerId },
+    }
+  );
+}
+
 export async function lockEffect(game: string, effectId: string) {
   const config = useRuntimeConfig();
   await $fetch(
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 7fc468d..6727b80 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -194,6 +194,14 @@ eventSource.addEventListener("message", async (message) => {
       current_game.currentTurn.tokens.push(data.token);
       await delay(settingsStore.animationSpeed);
     });
+  } else if (data.type == "currentTurn.useToken") {
+    queueAction(async () => {
+      const index = current_game.currentTurn.tokens.findIndex(
+        (t) => t._id == data.tokenId
+      );
+      current_game.currentTurn.tokens.splice(index, 1);
+      await delay(settingsStore.animationSpeed);
+    });
   } else if (data.type == "team.updateHealth") {
     queueAction(async () => {
       const team = game.value?.teams.find((t) => t._id == data.team);

From 3c5b30be9eb1a4c57852bd74e85247390fe56125 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 00:05:55 +0200
Subject: [PATCH 08/21] Feat : add most token effects

---
 components/CardsGrouped.vue      | 45 ++++++++++++++++++++-----
 components/PlayerListElement.vue | 39 +++++++++++++++++++++-
 components/PlayerSlot.vue        |  5 ++-
 netcode/index.ts                 | 56 ++++++++++++++++++++++++++++++++
 netcode/interfaces.ts            | 11 +++++++
 pages/game/[id].vue              | 21 ++++++++++++
 6 files changed, 166 insertions(+), 11 deletions(-)

diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 9a1aebf..1fb5182 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { delay } from "~/netcode/events";
-import type {
-  Card,
-  Container,
-  Effect,
-  PlayingTurn,
+import {
+  CardEffects,
+  CardType,
+  type Card,
+  type Container,
+  type Effect,
+  type PlayingTurn,
 } from "~/netcode/interfaces";
 import TokenComponent from "./tokens/TokenComponent.vue";
 
@@ -15,6 +17,7 @@ export interface Props {
   hidden?: boolean;
   noEffects?: boolean;
   tokens?: Effect[];
+  championsKillable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
   hidden: () => false,
   noEffects: () => false,
   tokens: () => [],
+  championsKillable: () => false,
 });
 
 const emit = defineEmits(["cardClick", "effectClick", "tokenClick"]);
@@ -110,6 +114,8 @@ const interval = ref<ReturnType<typeof setInterval>>();
 function tokenClick(token: Effect, card: Card) {
   emit("tokenClick", { token, card });
 }
+
+function damageChampion() {}
 </script>
 
 <template>
@@ -121,15 +127,15 @@ function tokenClick(token: Effect, card: Card) {
       <CardPreview
         @click="$emit('cardClick', c._id)"
         @effectClick="$emit('effectClick', c._id, $event)"
-        v-for="c in cards"
-        :card_id="c.cardId"
+        v-for="(c, i) in cards"
+        :card_id="c?.cardId"
         :wrapped="wrapped"
-        :key="c._id"
+        :key="c?._id || i"
         :card="c"
         :locked="
           !playingTurn || playingTurn?.cardsLocked.includes(c._id.toString())
         "
-        :used_effects_indexes="c.effects?.reduce( (prev,e, i)=>{
+        :used_effects_indexes="c?.effects?.reduce( (prev,e, i)=>{
           if(playingTurn?.lockedEffects.includes(e._id)){
             prev.push(i)
           }
@@ -141,8 +147,29 @@ function tokenClick(token: Effect, card: Card) {
           <TokenComponent
             :token="t"
             @useToken="tokenClick(t, c)"
+            v-if="
+              !(
+                t.effect == CardEffects.SACRIFICE &&
+                (!playingTurn ||
+                  playingTurn?.cardsLocked.includes(c._id.toString()))
+              ) &&
+              !(
+                t.effect == CardEffects.PREPARE &&
+                c.cardType == CardType.CHAMPION
+              ) &&
+              !(
+                t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
+                c.cardType != CardType.ACTION
+              ) &&
+              t.effect == CardEffects.STUN &&
+              c.cardType == CardType.CHAMPION &&
+              championsKillable
+            "
           ></TokenComponent>
         </template>
+        <button v-if="championsKillable && c.cardType == CardType.CHAMPION">
+          Damage
+        </button>
       </CardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
diff --git a/components/PlayerListElement.vue b/components/PlayerListElement.vue
index 9feb932..f194206 100644
--- a/components/PlayerListElement.vue
+++ b/components/PlayerListElement.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { Game, Player } from "~/netcode/interfaces";
+import { damagePlayer, makeDiscard } from "~/netcode";
+import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
 
 const emit = defineEmits(["click"]);
 
@@ -15,6 +16,24 @@ const props = withDefaults(defineProps<Props>(), {
   isTurn: () => false,
   self: () => false,
 });
+
+const authStore = useAuthStore();
+const playerList = computed(() =>
+  props.game!.teams.reduce((acc, t) => acc.concat(t.players), [] as Player[])
+);
+
+const selfPlayer = computed(() =>
+  authStore.logged
+    ? playerList.value?.find((p) => p.user.userId == authStore.selfUser.userId)
+    : undefined
+);
+
+function makeDiscardClick() {
+  makeDiscard(props.game._id, props.player._id);
+}
+function damage() {
+  damagePlayer(props.game._id, props.player._id, 1);
+}
 </script>
 
 <template>
@@ -48,6 +67,24 @@ const props = withDefaults(defineProps<Props>(), {
         <PlayerStats :game="props.game" :player="props.player"> </PlayerStats>
         <!-- </template> -->
       </div>
+      <button
+        v-if="
+          game.currentTurn.tokens.some(
+            (t) => t.effect == CardEffects.MAKE_DISCARD
+          ) &&
+          props.player._id != selfPlayer?._id &&
+          !isTurn
+        "
+        @click.stop="makeDiscardClick"
+      >
+        Make Discard
+      </button>
+      <button
+        v-if="props.player._id != selfPlayer?._id && !isTurn"
+        @click.stop="damage"
+      >
+        Damage
+      </button>
     </div>
   </div>
 </template>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 83a6589..2bd2216 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -52,7 +52,9 @@ const isSelfTurn = computed(() => isSelf && isPlayerTurn);
 
 const cardTokens = computed(() =>
   props.game.currentTurn.tokens.filter((t) =>
-    [CardEffects.SACRIFICE, CardEffects.PREPARE].includes(t.effect)
+    [CardEffects.SACRIFICE, CardEffects.PREPARE, CardEffects.STUN].includes(
+      t.effect
+    )
   )
 );
 
@@ -196,6 +198,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
         @effectClick="effectClick"
         :tokens="cardTokens"
         @tokenClick="tokenClick"
+        :championsKillable="!isSelf && isSelfTurn.value"
       >
       </CardsGrouped>
 
diff --git a/netcode/index.ts b/netcode/index.ts
index 3b26f88..1d8fbbf 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -153,3 +153,59 @@ export async function lockEffect(game: string, effectId: string) {
     }
   );
 }
+
+export async function makeDiscard(
+  game: string,
+  playerId: string,
+  amount: number = 1
+) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(
+      `games/${game}/turn/makeDiscard/${playerId}`,
+      config.public.endpoint
+    ).href,
+    {
+      method: "POST",
+      credentials: "include",
+    }
+  );
+}
+
+export async function damagePlayer(
+  game: string,
+  playerId: string,
+  amount: number = 1
+) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(
+      `games/${game}/turn/damagePlayer/${playerId}`,
+      config.public.endpoint
+    ).href,
+    {
+      method: "POST",
+      credentials: "include",
+      body: { amount },
+    }
+  );
+}
+
+export async function damageChampion(
+  game: string,
+  playerId: string,
+  cardId: string
+) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(
+      `games/${game}/turn/damageChampion/${cardId}`,
+      config.public.endpoint
+    ).href,
+    {
+      method: "POST",
+      credentials: "include",
+      body: { playerId },
+    }
+  );
+}
diff --git a/netcode/interfaces.ts b/netcode/interfaces.ts
index 4c4d8b3..654e47a 100644
--- a/netcode/interfaces.ts
+++ b/netcode/interfaces.ts
@@ -41,6 +41,16 @@ export enum CardEffects {
   PICK_FACTION = "pick_faction",
 }
 
+export enum CardType {
+  HERO = "hero",
+  HERO_ABILITY = "hero_ability",
+  CURRENCY = "currency",
+  WEAPON = "weapon",
+  CHAMPION = "champion",
+  ACTION = "action",
+  ITEM = "item",
+}
+
 export interface GameObject {
   _id: string;
 }
@@ -95,5 +105,6 @@ export interface Effect extends GameObject {
 }
 export interface Card extends GameObject {
   cardId: number;
+  cardType: CardType;
   effects: Effect[];
 }
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 6727b80..c052418 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -4,6 +4,7 @@ import { subscribe } from "~/netcode";
 import { delay } from "~/netcode/events";
 import { type Container, type Game, type Player } from "~/netcode/interfaces";
 import { playSound } from "~/helpers/audioHelpers";
+import TokenComponent from "~/components/tokens/TokenComponent.vue";
 
 const config = useRuntimeConfig();
 const settingsStore = useSettingsStore();
@@ -211,6 +212,20 @@ eventSource.addEventListener("message", async (message) => {
       console.log(`adding health amount : ` + data.operation);
       team.health = data.health;
     });
+  } else if (data.type == "killTeam") {
+    queueAction(async () => {
+      const index = game.value?.teams.findIndex((t) => t._id == data.teamId);
+      if (!index) {
+        console.error("team index not found. Desyncs might happen");
+        await refresh();
+        return;
+      }
+      game.value?.teams.splice(index, 1);
+    });
+  } else if (data.type == "endGame") {
+    queueAction(async () => {
+      alert("game Ended");
+    });
   }
 });
 
@@ -314,6 +329,12 @@ onUnmounted(() => {
       :fire_gems="game.fireGems"
       :marketStack="game.marketStack"
     ></MarketCards>
+    <div>
+      <TokenComponent
+        :token="t"
+        v-for="t in game.currentTurn.tokens"
+      ></TokenComponent>
+    </div>
     <div id="player_list_container">
       <div id="player_list">
         <PlayerListElement

From 2e201fa14e629553ae26aacd056d87dc0f8ad46e Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 00:19:16 +0200
Subject: [PATCH 09/21] Feat : allow damage champion

---
 components/CardsGrouped.vue | 17 ++++++++++++++---
 components/PlayerSlot.vue   |  5 +++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 1fb5182..84c85f5 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -28,7 +28,12 @@ const props = withDefaults(defineProps<Props>(), {
   championsKillable: () => false,
 });
 
-const emit = defineEmits(["cardClick", "effectClick", "tokenClick"]);
+const emit = defineEmits([
+  "cardClick",
+  "effectClick",
+  "tokenClick",
+  "damageChampionClick",
+]);
 
 const settingsStore = useSettingsStore();
 
@@ -115,7 +120,9 @@ function tokenClick(token: Effect, card: Card) {
   emit("tokenClick", { token, card });
 }
 
-function damageChampion() {}
+function damageChampionClick(card: Card) {
+  emit("damageChampionClick", card);
+}
 </script>
 
 <template>
@@ -167,7 +174,11 @@ function damageChampion() {}
             "
           ></TokenComponent>
         </template>
-        <button v-if="championsKillable && c.cardType == CardType.CHAMPION">
+        <button
+          v-if="championsKillable && c.cardType == CardType.CHAMPION"
+          @click.stop="damageChampionClick(c)"
+          @mousedown.left.stop=""
+        >
           Damage
         </button>
       </CardPreview>
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 2bd2216..bdb0321 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  damageChampion,
   endTurn,
   joinGame,
   lockCard,
@@ -138,6 +139,9 @@ function effectClick(cardUUID: string, effectIndex: number) {
 function tokenClick({ card, token }: { card: Card; token: Effect }) {
   useToken(props.game._id, token._id, card._id, props.player._id);
 }
+function damageChampionClick(card: Card) {
+  damageChampion(props.game._id, props.player._id, card._id);
+}
 </script>
 
 <template>
@@ -199,6 +203,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
         :tokens="cardTokens"
         @tokenClick="tokenClick"
         :championsKillable="!isSelf && isSelfTurn.value"
+        @damageChampionClick="damageChampionClick"
       >
       </CardsGrouped>
 

From fde462166c8e01150164e40f43f7f42444360052 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 00:19:24 +0200
Subject: [PATCH 10/21] Fix : fuckU markers not showing

---
 components/PlayerStats.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/PlayerStats.vue b/components/PlayerStats.vue
index f5f0d97..cdd0f52 100644
--- a/components/PlayerStats.vue
+++ b/components/PlayerStats.vue
@@ -28,21 +28,21 @@ const isTurn = computed(
     </span>
   </div>
   <div class="turn_icon" v-if="isTurn">
-        <img src="/img/gold.png" class="icon_img" draggable="false" />
-        <span class="turn_icon_number">
-            {{ game.currentTurn.gold }}
-        </span>
-    </div>
-    <div class="turn_icon" v-if="isTurn">
-        <img src="/img/damage.png" class="icon_img" draggable="false" />
-        <span class="turn_icon_number">
-            {{ game.currentTurn.damage }}
-        </span>
-    </div>
+    <img src="/img/gold.png" class="icon_img" draggable="false" />
+    <span class="turn_icon_number">
+      {{ game.currentTurn.gold }}
+    </span>
+  </div>
+  <div class="turn_icon" v-if="isTurn">
+    <img src="/img/damage.png" class="icon_img" draggable="false" />
+    <span class="turn_icon_number">
+      {{ game.currentTurn.damage }}
+    </span>
+  </div>
   <div class="turn_icon">
     <img src="/img/fuck.svg" class="icon_img" draggable="false" />
     <span class="turn_icon_number">{{
-      (isTurn && (player.discardMarkers ?? 0) + (player.fuckUMarkers ?? 0)) || 0
+      (player.discardMarkers ?? 0) + (player.fuckUMarkers ?? 0)
     }}</span>
   </div>
 </template>

From 8dc263ab5003414078386f0163c96b24b5c407f3 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 14:49:05 +0200
Subject: [PATCH 11/21] Chore : various fixes

---
 components/CardPreview.vue  | 85 +++++++++++++++++++++----------------
 components/CardsGrouped.vue | 44 ++++++++++++-------
 components/PlayerSlot.vue   |  8 ++++
 netcode/index.ts            | 14 +++++-
 pages/game/[id].vue         | 54 +++++++++++++++++++++--
 5 files changed, 147 insertions(+), 58 deletions(-)

diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 35145c5..539fe10 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -10,6 +10,7 @@ export interface Props {
   interactible?: boolean;
   noEffects?: boolean;
   used_effects_indexes?: number[];
+  discardable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   locked: () => true,
   interactible: () => true,
   noEffects: () => false,
+  discardable: () => false,
 });
 
 const emit = defineEmits([
@@ -225,6 +227,7 @@ onUnmounted(() => {
       unlocked: !props.locked,
       zoom: isZooming,
       no_effects: noEffects || !props.locked,
+      discardable,
     }"
     @contextmenu.prevent="false"
     @mousedown.right="rightClickDown"
@@ -281,43 +284,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.card {
-  --max-height: 250px;
-  --max-width: 179px;
-  --margin-bottom: calc(var(--max-height) * 0.05);
-  position: relative;
-  display: flex;
-  justify-content: center;
-  margin-bottom: 0px;
-  margin-top: var(--margin-bottom);
-  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  pointer-events: all;
-  max-height: var(--max-height);
-  max-width: var(--max-width);
-  /* cursor: grab; */
-}
-
-#overlay {
-  position: absolute;
-  top: 20%;
-  width: calc(100% - 8%);
-  height: 49%;
-}
-
-.card.unlocked {
-  margin-top: 0px;
-  margin-bottom: var(--margin-bottom);
-  transform: translateY(calc(var(--margin-bottom) * -0.25));
-  filter: drop-shadow(
-    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
-  );
-  cursor: pointer;
-}
-
-.card:not(svg) {
-  cursor: grab;
-}
-
 .card.dragging {
   transform: translateX(v-bind("translateX + 'px'"))
     translateY(v-bind("translateY + 'px'"));
@@ -421,4 +387,49 @@ onUnmounted(() => {
 .svg_effect text {
   cursor: pointer;
 }
+
+.card {
+  --max-height: 250px;
+  --max-width: 179px;
+  --margin-bottom: calc(var(--max-height) * 0.05);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0px;
+  margin-top: var(--margin-bottom);
+  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  pointer-events: all;
+  max-height: var(--max-height);
+  max-width: var(--max-width);
+  /* cursor: grab; */
+}
+
+.card:not(svg) {
+  cursor: grab;
+}
+
+#overlay {
+  position: absolute;
+  top: 20%;
+  width: calc(100% - 8%);
+  height: 49%;
+}
+
+.card.unlocked {
+  margin-top: 0px;
+  margin-bottom: var(--margin-bottom);
+  transform: translateY(calc(var(--margin-bottom) * -0.25));
+  filter: drop-shadow(
+    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
+  );
+  cursor: pointer;
+}
+
+.card.discardable {
+  cursor: not-allowed;
+}
+
+.card.discardable svg {
+  pointer-events: none;
+}
 </style>
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 84c85f5..436484e 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -18,6 +18,7 @@ export interface Props {
   noEffects?: boolean;
   tokens?: Effect[];
   championsKillable?: boolean;
+  discardable?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
   tokens: () => [],
   championsKillable: () => false,
+  discardable: () => false,
 });
 
 const emit = defineEmits([
@@ -33,6 +35,7 @@ const emit = defineEmits([
   "effectClick",
   "tokenClick",
   "damageChampionClick",
+  "discardCardClick",
 ]);
 
 const settingsStore = useSettingsStore();
@@ -123,6 +126,10 @@ function tokenClick(token: Effect, card: Card) {
 function damageChampionClick(card: Card) {
   emit("damageChampionClick", card);
 }
+
+function discardCardClick(card: Card) {
+  emit("discardCardClick", card);
+}
 </script>
 
 <template>
@@ -149,28 +156,24 @@ function damageChampionClick(card: Card) {
           return prev
         },[] as number[])"
         :noEffects="noEffects"
+        :discardable="discardable"
       >
         <template v-for="t in tokens">
           <TokenComponent
             :token="t"
             @useToken="tokenClick(t, c)"
             v-if="
-              !(
-                t.effect == CardEffects.SACRIFICE &&
-                (!playingTurn ||
-                  playingTurn?.cardsLocked.includes(c._id.toString()))
-              ) &&
-              !(
-                t.effect == CardEffects.PREPARE &&
-                c.cardType == CardType.CHAMPION
-              ) &&
-              !(
-                t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
-                c.cardType != CardType.ACTION
-              ) &&
-              t.effect == CardEffects.STUN &&
-              c.cardType == CardType.CHAMPION &&
-              championsKillable
+              (t.effect == CardEffects.SACRIFICE &&
+                playingTurn &&
+                !playingTurn?.cardsLocked.includes(c._id.toString())) ||
+              (t.effect == CardEffects.PREPARE &&
+                c.cardType == CardType.CHAMPION) ||
+              (t.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT &&
+                c.cardType == CardType.ACTION) ||
+              (t.effect == CardEffects.STUN &&
+                c.cardType == CardType.CHAMPION &&
+                championsKillable) ||
+              t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT
             "
           ></TokenComponent>
         </template>
@@ -181,6 +184,15 @@ function damageChampionClick(card: Card) {
         >
           Damage
         </button>
+        <button
+          v-if="
+            discardable && !playingTurn?.cardsLocked.includes(c._id.toString())
+          "
+          @mousedown.left.stop=""
+          @click.stop="discardCardClick(c)"
+        >
+          Discard
+        </button>
       </CardPreview>
     </TransitionGroup>
     <!-- <img :class="`card_image`" :src="'/cards/background.png'" draggable="false"> -->
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index bdb0321..7a58ed7 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   damageChampion,
+  discardCard,
   endTurn,
   joinGame,
   lockCard,
@@ -142,6 +143,9 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
 function damageChampionClick(card: Card) {
   damageChampion(props.game._id, props.player._id, card._id);
 }
+function discardCardClick(card: Card) {
+  discardCard(props.game._id, card._id);
+}
 </script>
 
 <template>
@@ -203,7 +207,11 @@ function damageChampionClick(card: Card) {
         :tokens="cardTokens"
         @tokenClick="tokenClick"
         :championsKillable="!isSelf && isSelfTurn.value"
+        :discardable="
+          (player.fuckUMarkers > 0 || player.discardMarkers > 0) && isSelf
+        "
         @damageChampionClick="damageChampionClick"
+        @discardCardClick="discardCardClick"
       >
       </CardsGrouped>
 
diff --git a/netcode/index.ts b/netcode/index.ts
index 1d8fbbf..29fcd44 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -127,7 +127,7 @@ export async function buyGem(game: string) {
 export async function useToken(
   game: string,
   tokenId: string,
-  cardId: string,
+  cardId?: string,
   playerId?: string
 ) {
   const config = useRuntimeConfig();
@@ -209,3 +209,15 @@ export async function damageChampion(
     }
   );
 }
+
+export async function discardCard(game: string, cardId: string) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(`games/${game}/turn/discardCard/${cardId}`, config.public.endpoint)
+      .href,
+    {
+      method: "POST",
+      credentials: "include",
+    }
+  );
+}
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index c052418..12806b3 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -1,8 +1,13 @@
 <script setup lang="ts">
 import LoadingScreen from "~/components/LoadingScreen.vue";
-import { subscribe } from "~/netcode";
+import { subscribe, useToken } from "~/netcode";
 import { delay } from "~/netcode/events";
-import { type Container, type Game, type Player } from "~/netcode/interfaces";
+import {
+  type Container,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
 import { playSound } from "~/helpers/audioHelpers";
 import TokenComponent from "~/components/tokens/TokenComponent.vue";
 
@@ -174,7 +179,7 @@ eventSource.addEventListener("message", async (message) => {
     });
   } else if (data.type == "unlockEffect") {
     queueAction(async () => {
-      const effectIndex = current_game.currentTurn.lockedEffects.findIndex(
+      const effectIndex = current_game.currentTurn.lockedEffects.indexOf(
         data.effect
       );
       current_game.currentTurn.lockedEffects.splice(effectIndex, 1);
@@ -212,6 +217,42 @@ eventSource.addEventListener("message", async (message) => {
       console.log(`adding health amount : ` + data.operation);
       team.health = data.health;
     });
+  } else if (data.type == "player.addFuckUMarker") {
+    queueAction(async () => {
+      console.log(`adding fuckUMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot add fuckU Markers : player not found");
+      }
+      targetPlayer.fuckUMarkers = data.fuckUMarkers;
+    });
+  } else if (data.type == "player.removeFuckUMarker") {
+    queueAction(async () => {
+      console.log(`adding fuckUMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot remove fuckU Markers : player not found");
+      }
+      targetPlayer.fuckUMarkers = data.fuckUMarkers;
+    });
+  } else if (data.type == "player.addDiscardMarker") {
+    queueAction(async () => {
+      console.log(`adding discardMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot add discard Markers : player not found");
+      }
+      targetPlayer.discardMarkers = data.discardMarkers;
+    });
+  } else if (data.type == "player.removeDiscardMarker") {
+    queueAction(async () => {
+      console.log(`adding fuckUMarkers : ` + data.operation);
+      const targetPlayer = playerList.value.find((p) => p._id == data.playerId);
+      if (!targetPlayer) {
+        throw new Error("Cannot remove discard Markers : player not found");
+      }
+      targetPlayer.discardMarkers = data.discardMarkers;
+    });
   } else if (data.type == "killTeam") {
     queueAction(async () => {
       const index = game.value?.teams.findIndex((t) => t._id == data.teamId);
@@ -290,6 +331,10 @@ function focusPlayer(p: Player) {
 //     focusPlayer(first_player)
 // })
 
+function useTokenClick(t: Effect) {
+  console.log(t);
+  useToken(game.value!._id, t._id);
+}
 onUnmounted(() => {
   eventSource.close();
 });
@@ -333,6 +378,7 @@ onUnmounted(() => {
       <TokenComponent
         :token="t"
         v-for="t in game.currentTurn.tokens"
+        @useToken="useTokenClick"
       ></TokenComponent>
     </div>
     <div id="player_list_container">
@@ -482,7 +528,7 @@ onUnmounted(() => {
 
 .slide-left-enter-active,
 .slide-left-leave-active {
-  transition: all v-bind("turnChangeAnimationSpeed") ease-out;
+  transition: all v-bind("settingsStore.animationSpeed * 2 + 'ms'") ease-out;
 }
 
 .slide-left-enter-from {

From df9e7a2e13cd5d4f9b3a7154bad26918b017a847 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 15:54:22 +0200
Subject: [PATCH 12/21] Feat : add discard view

---
 components/CardsGrouped.vue   |   7 ++-
 components/DiscardOverlay.vue | 104 ++++++++++++++++++++++++++++++++++
 pages/game/[id].vue           |  18 +++++-
 3 files changed, 127 insertions(+), 2 deletions(-)
 create mode 100644 components/DiscardOverlay.vue

diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 436484e..57679d6 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -173,7 +173,12 @@ function discardCardClick(card: Card) {
               (t.effect == CardEffects.STUN &&
                 c.cardType == CardType.CHAMPION &&
                 championsKillable) ||
-              t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT
+              t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT ||
+              t.effect == CardEffects.RESTACK_DISCARDED_CARD ||
+              (t.effect == CardEffects.RESTACK_DISCARDED_ACTION &&
+                c.cardType == CardType.ACTION) ||
+              (t.effect == CardEffects.RESTACK_DISCARDED_CHAMPION &&
+                c.cardType == CardType.CHAMPION)
             "
           ></TokenComponent>
         </template>
diff --git a/components/DiscardOverlay.vue b/components/DiscardOverlay.vue
new file mode 100644
index 0000000..d3a4758
--- /dev/null
+++ b/components/DiscardOverlay.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { buyCard, buyGem, useToken } from "~/netcode";
+import {
+  CardEffects,
+  type Card,
+  type Container,
+  type Effect,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
+import TokenComponent from "./tokens/TokenComponent.vue";
+
+export interface Props {
+  game: Game;
+  discard: Container;
+  player: Player;
+}
+
+const props = defineProps<Props>();
+
+const authStore = useAuthStore();
+
+const emit = defineEmits(["close"]);
+function marketCardClick(e: string) {
+  buyCard(props.game._id, e);
+}
+
+function fireGemCardClick(e: string) {
+  buyGem(props.game._id);
+}
+
+const discardTokens = computed(() =>
+  props.game.currentTurn.tokens.filter((t) =>
+    [
+      CardEffects.RESTACK_DISCARDED_ACTION,
+      CardEffects.RESTACK_DISCARDED_CARD,
+      CardEffects.RESTACK_DISCARDED_CHAMPION,
+    ].includes(t.effect)
+  )
+);
+
+function tokenClick({ card, token }: { card: Card; token: Effect }) {
+  useToken(props.game._id, token._id, card._id);
+}
+</script>
+
+<template>
+  <div class="overlay">
+    <button @click="$emit('close')">Close</button>
+    <span>Discard of {{ player.user.username }}</span>
+
+    <div class="discard_unwrapped" @click.stop>
+      <CardsGrouped
+        :container="discard"
+        :wrapped="false"
+        :hidden="false"
+        :tokens="discardTokens"
+        :noEffects="true"
+        @tokenClick="tokenClick"
+      ></CardsGrouped>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+span {
+  background: white;
+}
+.overlay {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+</style>
+
+<style>
+.discard_unwrapped {
+  width: max-content;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  /* position: relative; */
+  gap: 2px;
+  margin: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  border-radius: 10px;
+  /* filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, 0.6)); */
+  /* backdrop-filter: blur(5px) brightness(80%); */
+  background: rgba(60, 47, 117, 0.46);
+  /* left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%); */
+}
+</style>
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 12806b3..a33296f 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -335,6 +335,10 @@ function useTokenClick(t: Effect) {
   console.log(t);
   useToken(game.value!._id, t._id);
 }
+
+function showDiscard() {
+  discard_unwrapped.value = true;
+}
 onUnmounted(() => {
   eventSource.close();
 });
@@ -362,7 +366,12 @@ onUnmounted(() => {
           :class="{ invisible: discard_unwrapped }"
           @click="() => (discard_unwrapped = true)"
         >
-          <CardsGrouped :container="focusedPlayer.discard" :wrapped="true">
+          <CardsGrouped
+            :container="focusedPlayer.discard"
+            :wrapped="true"
+            @card-click="showDiscard"
+            :no-effects="true"
+          >
           </CardsGrouped>
         </div>
       </div>
@@ -405,6 +414,13 @@ onUnmounted(() => {
         ></PlayerSlot>
       </Transition>
     </div>
+    <DiscardOverlay
+      v-show="discard_unwrapped"
+      :game="game"
+      :player="focusedPlayer"
+      :discard="focusedPlayer.discard"
+      @close="discard_unwrapped = false"
+    ></DiscardOverlay>
     <ResultDialog
       :isVisible="showResults"
       :won="isWinner"

From 3e3284d8c4a8e7a29e704fe523147b7de69c94ed Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@noreply.git.legonzaur.fr>
Date: Sun, 14 Jul 2024 14:12:38 +0000
Subject: [PATCH 13/21] Update .gitea/workflows/build.yml

---
 .gitea/workflows/build.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml
index f38970a..1e81ac1 100644
--- a/.gitea/workflows/build.yml
+++ b/.gitea/workflows/build.yml
@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - main
+      - feat/netcode-rework
 
 jobs:
   release-image:

From 7fd07b5a6a56d604655b128cedda43d47278ca32 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 16:24:23 +0200
Subject: [PATCH 14/21] Chore : add .env.example

---
 .env.example | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..a809479
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,3 @@
+NUXT_PUBLIC_ENDPOINT=http://localhost:8765
+NUXT_PUBLIC_DISCORD_LOGIN_ENDPOINT=https://discord.com/oauth2/authorize?client_id=
+NUXT_DEV_MODE=TRUE
\ No newline at end of file

From 3330704670d60fa1596949fcef56a686b2a6014d Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 16:43:14 +0200
Subject: [PATCH 15/21] Chore : force to use env vars

---
 nuxt.config.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index bb9e48c..11cccf3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,9 +4,8 @@ export default defineNuxtConfig({
   ssr: false,
   runtimeConfig: {
     public: {
-      endpoint: "http://localhost:8765", // can be overridden by NUXT_PUBLIC_ENDPOINT environment variable
-      discordLoginEndpoint:
-        "https://discord.com/oauth2/authorize?client_id=460020057867681792&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8765%2Flogin&scope=identify",
+      endpoint: process.env.NUXT_PUBLIC_ENDPOINT, // can be overridden by NUXT_PUBLIC_ENDPOINT environment variable
+      discordLoginEndpoint: process.env.NUXT_PUBLIC_DISCORD_LOGIN_ENDPOINT,
     },
   },
   modules: ["@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt"],

From baf2fc27a96d761e746dba232a997fedaad1d045 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 16:46:44 +0200
Subject: [PATCH 16/21] Fix : allow correct api endpoint to be set

---
 netcode/index.ts | 71 ++++++++++++++++--------------------------------
 1 file changed, 24 insertions(+), 47 deletions(-)

diff --git a/netcode/index.ts b/netcode/index.ts
index 29fcd44..10c78e4 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -2,7 +2,7 @@ import type { Game, User } from "./interfaces";
 
 export function subscribe(endpoint: string) {
   const config = useRuntimeConfig();
-  const evtSource = new EventSource(new URL(endpoint, config.public.endpoint), {
+  const evtSource = new EventSource(config.public.endpoint + endpoint, {
     withCredentials: true,
   });
 
@@ -11,12 +11,9 @@ export function subscribe(endpoint: string) {
 
 export async function getLobby() {
   const config = useRuntimeConfig();
-  const req = await useFetch<Array<Game>>(
-    new URL("/games", config.public.endpoint).href,
-    {
-      credentials: "include",
-    }
-  );
+  const req = await useFetch<Array<Game>>(config.public.endpoint + "/games", {
+    credentials: "include",
+  });
   if (req.data.value == null) {
     throw new Error("Lobby answer is empty");
   }
@@ -26,7 +23,7 @@ export async function getLobby() {
 export async function whoami() {
   const config = useRuntimeConfig();
   const { data, pending, error, refresh } = await useFetch<User>(
-    new URL("/whoami", config.public.endpoint).href,
+    config.public.endpoint + "/whoami",
     {
       credentials: "include",
     }
@@ -48,13 +45,10 @@ export async function whoami() {
 
 export async function createGame() {
   const config = useRuntimeConfig();
-  const res = await $fetch<Game>(
-    new URL("/games", config.public.endpoint).href,
-    {
-      method: "POST",
-      credentials: "include",
-    }
-  );
+  const res = await $fetch<Game>(config.public.endpoint + "/games", {
+    method: "POST",
+    credentials: "include",
+  });
   console.log(res);
   navigateTo("/game/" + res._id);
 }
@@ -62,7 +56,7 @@ export async function createGame() {
 export async function startGame(game: string) {
   const config = useRuntimeConfig();
   const res = await $fetch<Game>(
-    new URL(`games/${game}/start`, config.public.endpoint).href,
+    config.public.endpoint + `games/${game}/start`,
     {
       method: "POST",
       credentials: "include",
@@ -73,7 +67,7 @@ export async function startGame(game: string) {
 export async function joinGame(game: string) {
   const config = useRuntimeConfig();
   const res = await $fetch<Game>(
-    new URL(`games/${game}/join`, config.public.endpoint).href,
+    config.public.endpoint + `games/${game}/join`,
     {
       method: "POST",
       credentials: "include",
@@ -83,7 +77,7 @@ export async function joinGame(game: string) {
 
 export async function endTurn(game: string) {
   const config = useRuntimeConfig();
-  await $fetch(new URL(`games/${game}/endTurn`, config.public.endpoint).href, {
+  await $fetch(config.public.endpoint + `games/${game}/endTurn`, {
     method: "POST",
     credentials: "include",
   });
@@ -92,8 +86,7 @@ export async function endTurn(game: string) {
 export async function lockCard(game: string, cardId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(`games/${game}/turn/lockCard/${cardId}`, config.public.endpoint)
-      .href,
+    config.public.endpoint + `games/${game}/turn/lockCard/${cardId}`,
     {
       method: "POST",
       credentials: "include",
@@ -104,8 +97,7 @@ export async function lockCard(game: string, cardId: string) {
 export async function buyCard(game: string, cardId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(`games/${game}/turn/buyCard/${cardId}`, config.public.endpoint)
-      .href,
+    config.public.endpoint + `games/${game}/turn/buyCard/${cardId}`,
     {
       method: "POST",
       credentials: "include",
@@ -115,13 +107,10 @@ export async function buyCard(game: string, cardId: string) {
 
 export async function buyGem(game: string) {
   const config = useRuntimeConfig();
-  await $fetch(
-    new URL(`games/${game}/turn/buyGem`, config.public.endpoint).href,
-    {
-      method: "POST",
-      credentials: "include",
-    }
-  );
+  await $fetch(config.public.endpoint + `games/${game}/turn/buyGem`, {
+    method: "POST",
+    credentials: "include",
+  });
 }
 
 export async function useToken(
@@ -132,8 +121,7 @@ export async function useToken(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(`games/${game}/turn/useToken/${tokenId}`, config.public.endpoint)
-      .href,
+    config.public.endpoint + `games/${game}/turn/useToken/${tokenId}`,
     {
       method: "POST",
       credentials: "include",
@@ -145,8 +133,7 @@ export async function useToken(
 export async function lockEffect(game: string, effectId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(`games/${game}/turn/lockEffect/${effectId}`, config.public.endpoint)
-      .href,
+    config.public.endpoint + `games/${game}/turn/lockEffect/${effectId}`,
     {
       method: "POST",
       credentials: "include",
@@ -161,10 +148,7 @@ export async function makeDiscard(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(
-      `games/${game}/turn/makeDiscard/${playerId}`,
-      config.public.endpoint
-    ).href,
+    config.public.endpoint + `games/${game}/turn/makeDiscard/${playerId}`,
     {
       method: "POST",
       credentials: "include",
@@ -179,10 +163,7 @@ export async function damagePlayer(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(
-      `games/${game}/turn/damagePlayer/${playerId}`,
-      config.public.endpoint
-    ).href,
+    config.public.endpoint + `games/${game}/turn/damagePlayer/${playerId}`,
     {
       method: "POST",
       credentials: "include",
@@ -198,10 +179,7 @@ export async function damageChampion(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(
-      `games/${game}/turn/damageChampion/${cardId}`,
-      config.public.endpoint
-    ).href,
+    config.public.endpoint + `games/${game}/turn/damageChampion/${cardId}`,
     {
       method: "POST",
       credentials: "include",
@@ -213,8 +191,7 @@ export async function damageChampion(
 export async function discardCard(game: string, cardId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    new URL(`games/${game}/turn/discardCard/${cardId}`, config.public.endpoint)
-      .href,
+    config.public.endpoint + `games/${game}/turn/discardCard/${cardId}`,
     {
       method: "POST",
       credentials: "include",

From 0f771b12d553eaf0b8fcd62e138d53a556bed92b Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 16:57:24 +0200
Subject: [PATCH 17/21] Fix : game page not using correct endpoint

---
 pages/game/[id].vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index a33296f..17d3025 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -23,12 +23,9 @@ const {
   pending,
   error,
   refresh,
-} = await useFetch<Game>(
-  new URL(`/games/${gameId}`, config.public.endpoint).href,
-  {
-    credentials: "include",
-  }
-);
+} = await useFetch<Game>(config.public.endpoint + `/games/${gameId}`, {
+  credentials: "include",
+});
 
 if (game.value == null) {
   navigateTo("/lobby");

From 90dfe57a4958bc279307470d05b35166b6fe0da9 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 14 Jul 2024 17:05:11 +0200
Subject: [PATCH 18/21] Fix : add missing slash on routes

---
 netcode/index.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/netcode/index.ts b/netcode/index.ts
index 10c78e4..b73725a 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -56,7 +56,7 @@ export async function createGame() {
 export async function startGame(game: string) {
   const config = useRuntimeConfig();
   const res = await $fetch<Game>(
-    config.public.endpoint + `games/${game}/start`,
+    config.public.endpoint + `/games/${game}/start`,
     {
       method: "POST",
       credentials: "include",
@@ -67,7 +67,7 @@ export async function startGame(game: string) {
 export async function joinGame(game: string) {
   const config = useRuntimeConfig();
   const res = await $fetch<Game>(
-    config.public.endpoint + `games/${game}/join`,
+    config.public.endpoint + `/games/${game}/join`,
     {
       method: "POST",
       credentials: "include",
@@ -77,7 +77,7 @@ export async function joinGame(game: string) {
 
 export async function endTurn(game: string) {
   const config = useRuntimeConfig();
-  await $fetch(config.public.endpoint + `games/${game}/endTurn`, {
+  await $fetch(config.public.endpoint + `/games/${game}/endTurn`, {
     method: "POST",
     credentials: "include",
   });
@@ -86,7 +86,7 @@ export async function endTurn(game: string) {
 export async function lockCard(game: string, cardId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/lockCard/${cardId}`,
+    config.public.endpoint + `/games/${game}/turn/lockCard/${cardId}`,
     {
       method: "POST",
       credentials: "include",
@@ -97,7 +97,7 @@ export async function lockCard(game: string, cardId: string) {
 export async function buyCard(game: string, cardId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/buyCard/${cardId}`,
+    config.public.endpoint + `/games/${game}/turn/buyCard/${cardId}`,
     {
       method: "POST",
       credentials: "include",
@@ -107,7 +107,7 @@ export async function buyCard(game: string, cardId: string) {
 
 export async function buyGem(game: string) {
   const config = useRuntimeConfig();
-  await $fetch(config.public.endpoint + `games/${game}/turn/buyGem`, {
+  await $fetch(config.public.endpoint + `/games/${game}/turn/buyGem`, {
     method: "POST",
     credentials: "include",
   });
@@ -121,7 +121,7 @@ export async function useToken(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/useToken/${tokenId}`,
+    config.public.endpoint + `/games/${game}/turn/useToken/${tokenId}`,
     {
       method: "POST",
       credentials: "include",
@@ -133,7 +133,7 @@ export async function useToken(
 export async function lockEffect(game: string, effectId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/lockEffect/${effectId}`,
+    config.public.endpoint + `/games/${game}/turn/lockEffect/${effectId}`,
     {
       method: "POST",
       credentials: "include",
@@ -148,7 +148,7 @@ export async function makeDiscard(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/makeDiscard/${playerId}`,
+    config.public.endpoint + `/games/${game}/turn/makeDiscard/${playerId}`,
     {
       method: "POST",
       credentials: "include",
@@ -163,7 +163,7 @@ export async function damagePlayer(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/damagePlayer/${playerId}`,
+    config.public.endpoint + `/games/${game}/turn/damagePlayer/${playerId}`,
     {
       method: "POST",
       credentials: "include",
@@ -179,7 +179,7 @@ export async function damageChampion(
 ) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/damageChampion/${cardId}`,
+    config.public.endpoint + `/games/${game}/turn/damageChampion/${cardId}`,
     {
       method: "POST",
       credentials: "include",
@@ -191,7 +191,7 @@ export async function damageChampion(
 export async function discardCard(game: string, cardId: string) {
   const config = useRuntimeConfig();
   await $fetch(
-    config.public.endpoint + `games/${game}/turn/discardCard/${cardId}`,
+    config.public.endpoint + `/games/${game}/turn/discardCard/${cardId}`,
     {
       method: "POST",
       credentials: "include",

From c48363e9c3a89404de8d2ad4e61736e834c0ba0f Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Mon, 15 Jul 2024 17:55:06 +0200
Subject: [PATCH 19/21] Fix :  add stack next card token to shop

---
 components/CardsGrouped.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 57679d6..4c98145 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -174,6 +174,7 @@ function discardCardClick(card: Card) {
                 c.cardType == CardType.CHAMPION &&
                 championsKillable) ||
               t.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT ||
+              t.effect == CardEffects.STACK_NEXT_CARD_BOUGHT ||
               t.effect == CardEffects.RESTACK_DISCARDED_CARD ||
               (t.effect == CardEffects.RESTACK_DISCARDED_ACTION &&
                 c.cardType == CardType.ACTION) ||

From 7a338fe5fcae26dcdac17777205670f76d4e74d3 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Mon, 15 Jul 2024 18:07:40 +0200
Subject: [PATCH 20/21] Fix : sacrifice on Discard

---
 components/DiscardOverlay.vue | 1 +
 components/PlayerSlot.vue     | 8 ++++----
 pages/game/[id].vue           | 1 -
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/DiscardOverlay.vue b/components/DiscardOverlay.vue
index d3a4758..986b1bc 100644
--- a/components/DiscardOverlay.vue
+++ b/components/DiscardOverlay.vue
@@ -35,6 +35,7 @@ const discardTokens = computed(() =>
       CardEffects.RESTACK_DISCARDED_ACTION,
       CardEffects.RESTACK_DISCARDED_CARD,
       CardEffects.RESTACK_DISCARDED_CHAMPION,
+      CardEffects.SACRIFICE,
     ].includes(t.effect)
   )
 );
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 7a58ed7..55c42a1 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -53,10 +53,10 @@ const isSelf = computed(
 const isSelfTurn = computed(() => isSelf && isPlayerTurn);
 
 const cardTokens = computed(() =>
-  props.game.currentTurn.tokens.filter((t) =>
-    [CardEffects.SACRIFICE, CardEffects.PREPARE, CardEffects.STUN].includes(
-      t.effect
-    )
+  props.game.currentTurn.tokens.filter(
+    (t) =>
+      [CardEffects.PREPARE, CardEffects.STUN].includes(t.effect) ||
+      (CardEffects.SACRIFICE == t.effect && isSelf)
   )
 );
 
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 17d3025..dd86776 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -32,7 +32,6 @@ if (game.value == null) {
   throw new Error("game not found");
 }
 
-console.log(game);
 const containers = computed<Record<string, Container>>(() => ({
   [game.value!.fireGems._id]: game.value!.fireGems,
   [game.value!.market._id]: game.value!.market,

From 44b840e2bcafad5877bb842bedac94dcb5c2753b Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Tue, 16 Jul 2024 18:14:48 +0200
Subject: [PATCH 21/21] Fix : allow sacrifice on discard

---
 components/DiscardOverlay.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/DiscardOverlay.vue b/components/DiscardOverlay.vue
index 986b1bc..0989d37 100644
--- a/components/DiscardOverlay.vue
+++ b/components/DiscardOverlay.vue
@@ -57,6 +57,7 @@ function tokenClick({ card, token }: { card: Card; token: Effect }) {
         :hidden="false"
         :tokens="discardTokens"
         :noEffects="true"
+        :playingTurn="game.currentTurn"
         @tokenClick="tokenClick"
       ></CardsGrouped>
     </div>