From db7959d7f12d4b9df49d554dd0c53cbe70f53c9c Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 7 Jul 2024 10:45:55 +0200
Subject: [PATCH] Feat : add tokens, handle mutex effects

---
 app.vue                               |  3 +-
 assets/images/cards/heron-svg/001.svg | 17 ++++----
 assets/images/cards/heron-svg/002.svg | 17 ++++----
 assets/images/cards/heron-svg/003.svg | 14 +++----
 assets/images/cards/heron-svg/004.svg | 13 +++---
 assets/images/cards/heron-svg/005.svg | 16 ++++----
 assets/images/cards/heron-svg/006.svg | 17 ++++----
 assets/images/cards/heron-svg/007.svg | 14 +++----
 assets/images/cards/heron-svg/008.svg | 10 ++---
 assets/images/cards/heron-svg/009.svg | 10 ++---
 assets/images/cards/heron-svg/010.svg | 17 ++++----
 assets/images/cards/heron-svg/011.svg | 19 ++++-----
 assets/images/cards/heron-svg/012.svg | 10 ++---
 assets/images/cards/heron-svg/013.svg | 18 +++-----
 assets/images/cards/heron-svg/014.svg | 22 ++++------
 assets/images/cards/heron-svg/015.svg | 11 ++---
 assets/images/cards/heron-svg/016.svg | 15 +++----
 assets/images/cards/heron-svg/017.svg | 14 +++----
 assets/images/cards/heron-svg/018.svg | 14 +++----
 assets/images/cards/heron-svg/019.svg | 17 ++++----
 assets/images/cards/heron-svg/020.svg | 15 +++----
 assets/images/cards/heron-svg/021.svg | 18 +++-----
 assets/images/cards/heron-svg/022.svg | 18 +++-----
 assets/images/cards/heron-svg/023.svg | 15 +++----
 assets/images/cards/heron-svg/024.svg | 18 +++-----
 assets/images/cards/heron-svg/025.svg | 10 ++---
 assets/images/cards/heron-svg/026.svg | 15 +++----
 assets/images/cards/heron-svg/027.svg | 10 ++---
 assets/images/cards/heron-svg/028.svg | 13 +++---
 assets/images/cards/heron-svg/029.svg | 20 ++++-----
 assets/images/cards/heron-svg/030.svg | 15 +++----
 assets/images/cards/heron-svg/031.svg | 17 ++++----
 assets/images/cards/heron-svg/032.svg | 11 ++---
 assets/images/cards/heron-svg/033.svg | 17 ++++----
 assets/images/cards/heron-svg/034.svg | 15 +++----
 assets/images/cards/heron-svg/035.svg | 18 +++-----
 assets/images/cards/heron-svg/036.svg | 10 ++---
 assets/images/cards/heron-svg/037.svg | 14 +++----
 assets/images/cards/heron-svg/038.svg | 10 ++---
 assets/images/cards/heron-svg/039.svg | 17 ++++----
 assets/images/cards/heron-svg/040.svg | 14 +++----
 assets/images/cards/heron-svg/041.svg | 12 +++---
 assets/images/cards/heron-svg/042.svg | 15 +++----
 assets/images/cards/heron-svg/043.svg | 15 +++----
 assets/images/cards/heron-svg/044.svg | 18 +++-----
 assets/images/cards/heron-svg/045.svg | 17 ++++----
 assets/images/cards/heron-svg/046.svg | 17 ++++----
 assets/images/cards/heron-svg/047.svg | 14 +++----
 assets/images/cards/heron-svg/048.svg | 22 ++++------
 assets/images/cards/heron-svg/049.svg | 15 +++----
 assets/images/cards/heron-svg/050.svg | 10 ++---
 assets/images/cards/heron-svg/051.svg | 10 ++---
 assets/images/cards/heron-svg/052.svg | 17 ++++----
 assets/images/cards/heron-svg/053.svg | 14 +++----
 assets/images/cards/heron-svg/054.svg | 10 ++---
 assets/images/cards/heron-svg/055.svg | 18 +++-----
 assets/images/cards/heron-svg/056.svg |  9 ++--
 assets/images/cards/heron-svg/057.svg |  9 ++--
 assets/images/cards/heron-svg/058.svg |  9 ++--
 assets/images/cards/heron-svg/059.svg |  9 ++--
 assets/images/cards/heron-svg/060.svg | 14 +++----
 assets/images/cards/heron-svg/061.svg | 12 +++---
 assets/images/cards/heron-svg/062.svg | 16 ++++----
 assets/images/cards/heron-svg/063.svg | 14 +++----
 assets/images/cards/heron-svg/064.svg | 10 ++---
 assets/images/cards/heron-svg/065.svg | 10 ++---
 assets/images/cards/heron-svg/066.svg | 10 ++---
 assets/images/cards/heron-svg/067.svg |  8 ++--
 assets/images/cards/heron-svg/068.svg | 15 +++----
 assets/images/cards/heron-svg/069.svg | 14 +++----
 assets/images/cards/heron-svg/070.svg | 10 ++---
 assets/images/cards/heron-svg/071.svg | 10 ++---
 assets/images/cards/heron-svg/072.svg | 14 +++----
 assets/images/cards/heron-svg/073.svg |  8 ++--
 assets/images/cards/heron-svg/074.svg | 15 +++----
 assets/images/cards/heron-svg/075.svg | 18 +++-----
 assets/images/cards/heron-svg/076.svg | 13 +++---
 assets/images/cards/heron-svg/077.svg |  9 ++--
 assets/images/cards/heron-svg/078.svg |  8 ++--
 assets/images/cards/heron-svg/079.svg | 13 +++---
 assets/images/cards/heron-svg/080.svg |  8 ++--
 assets/images/cards/heron-svg/081.svg | 13 +++---
 assets/images/cards/heron-svg/082.svg |  8 ++--
 assets/images/cards/heron-svg/083.svg |  9 ++--
 assets/images/cards/heron-svg/084.svg |  9 ++--
 assets/images/cards/heron-svg/085.svg |  2 +-
 assets/images/cards/heron-svg/086.svg | 13 +++---
 assets/images/cards/heron-svg/087.svg |  9 ++--
 assets/images/cards/heron-svg/088.svg |  9 ++--
 assets/images/cards/heron-svg/089.svg |  9 ++--
 assets/images/cards/heron-svg/090.svg | 11 ++---
 assets/images/cards/heron-svg/091.svg |  8 ++--
 assets/images/cards/heron-svg/092.svg | 13 +++---
 assets/images/cards/heron-svg/093.svg |  9 ++--
 assets/images/cards/heron-svg/094.svg |  8 ++--
 assets/images/cards/heron-svg/095.svg |  6 +--
 assets/images/cards/heron-svg/096.svg | 11 ++---
 assets/images/cards/heron-svg/097.svg |  9 ++--
 assets/images/cards/heron-svg/098.svg |  9 ++--
 assets/images/cards/heron-svg/099.svg |  6 +--
 assets/images/cards/heron-svg/100.svg |  9 ++--
 assets/images/cards/heron-svg/101.svg |  6 +--
 assets/images/cards/heron-svg/102.svg |  8 ++--
 components/CardPreview.vue            |  9 +---
 components/CardsGrouped.vue           |  5 ++-
 components/PlayerSlot.vue             | 20 +++++++--
 netcode/index.ts                      | 12 ++++++
 netcode/interfaces.ts                 |  3 +-
 pages/game/[id].vue                   | 16 +++++---
 services/loadCards.ts                 | 59 ++++++++++++++++-----------
 110 files changed, 627 insertions(+), 798 deletions(-)

diff --git a/app.vue b/app.vue
index 38941f5..b091bed 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { compileCards } from "./services/loadCards";
+import { cards, compileCards } from "./services/loadCards";
 import { getCurrentInstance } from "vue";
 // import goStore, { oauth2_register_discord, setup_websocket, heron_cookie_login } from "@/netcode";
 
@@ -17,6 +17,7 @@ if (!app) {
 }
 await compileCards(app);
 
+const _cards = cards;
 console.log("compiling done");
 
 useHead({
diff --git a/assets/images/cards/heron-svg/001.svg b/assets/images/cards/heron-svg/001.svg
index a67dc18..c3b3b74 100644
--- a/assets/images/cards/heron-svg/001.svg
+++ b/assets/images/cards/heron-svg/001.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card1" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card1" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">8</text>
 </g>
@@ -39,26 +39,23 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/002.svg b/assets/images/cards/heron-svg/002.svg
index 0bfd961..46ff698 100644
--- a/assets/images/cards/heron-svg/002.svg
+++ b/assets/images/cards/heron-svg/002.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card2" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card2" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/003.svg b/assets/images/cards/heron-svg/003.svg
index f39fe01..61819c8 100644
--- a/assets/images/cards/heron-svg/003.svg
+++ b/assets/images/cards/heron-svg/003.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card3" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card3" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -38,24 +38,24 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 <g transform="translate(137.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 <g transform="translate(197.0,60.5)" v-bind:class="{used:used_effects_indexes.includes(3)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '3' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(3)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/004.svg b/assets/images/cards/heron-svg/004.svg
index fdfc522..a63a586 100644
--- a/assets/images/cards/heron-svg/004.svg
+++ b/assets/images/cards/heron-svg/004.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card4" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card4" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -38,19 +38,16 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(107.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 <g transform="translate(167.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/005.svg b/assets/images/cards/heron-svg/005.svg
index c5b6e0b..7307f9d 100644
--- a/assets/images/cards/heron-svg/005.svg
+++ b/assets/images/cards/heron-svg/005.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card5" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card5" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -39,27 +39,27 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
 </g>
 <g transform="translate(167.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 5d026ff..2bee63c 100644
--- a/assets/images/cards/heron-svg/006.svg
+++ b/assets/images/cards/heron-svg/006.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card6" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card6" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,28 +39,25 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(107.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 <g transform="translate(167.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 83f4db2..faf5c3c 100644
--- a/assets/images/cards/heron-svg/007.svg
+++ b/assets/images/cards/heron-svg/007.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card7" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card7" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -39,22 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 e93cf6a..4bc4bec 100644
--- a/assets/images/cards/heron-svg/008.svg
+++ b/assets/images/cards/heron-svg/008.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card8" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card8" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/009.svg b/assets/images/cards/heron-svg/009.svg
index df9ca1a..d048139 100644
--- a/assets/images/cards/heron-svg/009.svg
+++ b/assets/images/cards/heron-svg/009.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card9" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card9" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/010.svg b/assets/images/cards/heron-svg/010.svg
index bb5eb80..573552d 100644
--- a/assets/images/cards/heron-svg/010.svg
+++ b/assets/images/cards/heron-svg/010.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card10" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card10" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -39,27 +39,24 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/skins/heron/010.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(107.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 <g transform="translate(167.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 963abe6..0a52bbc 100644
--- a/assets/images/cards/heron-svg/011.svg
+++ b/assets/images/cards/heron-svg/011.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card11" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card11" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -39,31 +39,28 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 <g transform="translate(167.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(3)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '3' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(3)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/012.svg b/assets/images/cards/heron-svg/012.svg
index 0dbd2ac..043e1d3 100644
--- a/assets/images/cards/heron-svg/012.svg
+++ b/assets/images/cards/heron-svg/012.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card12" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card12" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/013.svg b/assets/images/cards/heron-svg/013.svg
index b0986a6..c521ba8 100644
--- a/assets/images/cards/heron-svg/013.svg
+++ b/assets/images/cards/heron-svg/013.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card13" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card13" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
@@ -39,25 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="lancersiz3.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/014.svg b/assets/images/cards/heron-svg/014.svg
index f8d2cdc..476e82a 100644
--- a/assets/images/cards/heron-svg/014.svg
+++ b/assets/images/cards/heron-svg/014.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card14" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card14" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -40,19 +40,16 @@
 <g transform="translate(12,265)">
 <path d="M10,45 L264,45" stroke="black" stroke-width="1" />
 <path d="M10,90 L264,90" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,26.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,26.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez deux cartes.</text>
 </g>
 </g>
 <g transform="translate(0,45)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="22.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,35.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,22.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="15.0" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -60,13 +57,10 @@
 </g>
 </g>
 <g transform="translate(0,90)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="22.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,35.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,22.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="15.0" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
diff --git a/assets/images/cards/heron-svg/015.svg b/assets/images/cards/heron-svg/015.svg
index e5db763..c17e59c 100644
--- a/assets/images/cards/heron-svg/015.svg
+++ b/assets/images/cards/heron-svg/015.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card15" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card15" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -38,13 +38,10 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/016.svg b/assets/images/cards/heron-svg/016.svg
index e5cdcf4..ef393d4 100644
--- a/assets/images/cards/heron-svg/016.svg
+++ b/assets/images/cards/heron-svg/016.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card16" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card16" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,21 +39,18 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 3fc5085..67ff321 100644
--- a/assets/images/cards/heron-svg/017.svg
+++ b/assets/images/cards/heron-svg/017.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card17" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card17" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 200cd40..f7a68e6 100644
--- a/assets/images/cards/heron-svg/018.svg
+++ b/assets/images/cards/heron-svg/018.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card18" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card18" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 8f9b4db..7e273fb 100644
--- a/assets/images/cards/heron-svg/019.svg
+++ b/assets/images/cards/heron-svg/019.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card19" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card19" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">8</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">8</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(3)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '3' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(3)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
diff --git a/assets/images/cards/heron-svg/020.svg b/assets/images/cards/heron-svg/020.svg
index 95f5290..02abf00 100644
--- a/assets/images/cards/heron-svg/020.svg
+++ b/assets/images/cards/heron-svg/020.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card20" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card20" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -39,21 +39,18 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">7</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/021.svg b/assets/images/cards/heron-svg/021.svg
index 4acc778..32aed27 100644
--- a/assets/images/cards/heron-svg/021.svg
+++ b/assets/images/cards/heron-svg/021.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card21" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card21" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -39,25 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/022.svg b/assets/images/cards/heron-svg/022.svg
index a81a65b..7154573 100644
--- a/assets/images/cards/heron-svg/022.svg
+++ b/assets/images/cards/heron-svg/022.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card22" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card22" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,26 +39,20 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/023.svg b/assets/images/cards/heron-svg/023.svg
index 3942042..18f05d9 100644
--- a/assets/images/cards/heron-svg/023.svg
+++ b/assets/images/cards/heron-svg/023.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card23" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card23" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/024.svg b/assets/images/cards/heron-svg/024.svg
index c5c13a9..4c44fc5 100644
--- a/assets/images/cards/heron-svg/024.svg
+++ b/assets/images/cards/heron-svg/024.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card24" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card24" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
@@ -39,25 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/025.svg b/assets/images/cards/heron-svg/025.svg
index 6373be3..7d1a46b 100644
--- a/assets/images/cards/heron-svg/025.svg
+++ b/assets/images/cards/heron-svg/025.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card25" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card25" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/026.svg b/assets/images/cards/heron-svg/026.svg
index 6c87e27..13e6c00 100644
--- a/assets/images/cards/heron-svg/026.svg
+++ b/assets/images/cards/heron-svg/026.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card26" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card26" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 8a38b3c..588fe62 100644
--- a/assets/images/cards/heron-svg/027.svg
+++ b/assets/images/cards/heron-svg/027.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card27" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card27" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -38,12 +38,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/028.svg b/assets/images/cards/heron-svg/028.svg
index 5bc8f54..e6c6c39 100644
--- a/assets/images/cards/heron-svg/028.svg
+++ b/assets/images/cards/heron-svg/028.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card28" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card28" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -38,19 +38,16 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(107.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 <g transform="translate(167.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/029.svg b/assets/images/cards/heron-svg/029.svg
index b30025a..a1b6272 100644
--- a/assets/images/cards/heron-svg/029.svg
+++ b/assets/images/cards/heron-svg/029.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card29" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card29" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,32 +39,26 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(107.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 <g transform="translate(167.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/030.svg b/assets/images/cards/heron-svg/030.svg
index 84e4162..f9e6dbe 100644
--- a/assets/images/cards/heron-svg/030.svg
+++ b/assets/images/cards/heron-svg/030.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card30" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card30" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -39,21 +39,18 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">7</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 11a1c63..f702140 100644
--- a/assets/images/cards/heron-svg/031.svg
+++ b/assets/images/cards/heron-svg/031.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card31" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card31" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/032.svg b/assets/images/cards/heron-svg/032.svg
index 47c8bbb..ded2763 100644
--- a/assets/images/cards/heron-svg/032.svg
+++ b/assets/images/cards/heron-svg/032.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card32" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card32" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -38,13 +38,10 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/033.svg b/assets/images/cards/heron-svg/033.svg
index b1cea46..6e0abdc 100644
--- a/assets/images/cards/heron-svg/033.svg
+++ b/assets/images/cards/heron-svg/033.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card33" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card33" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/034.svg b/assets/images/cards/heron-svg/034.svg
index 04ed4f1..5478080 100644
--- a/assets/images/cards/heron-svg/034.svg
+++ b/assets/images/cards/heron-svg/034.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card34" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card34" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/035.svg b/assets/images/cards/heron-svg/035.svg
index e7f7116..6e34b74 100644
--- a/assets/images/cards/heron-svg/035.svg
+++ b/assets/images/cards/heron-svg/035.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card35" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card35" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -39,25 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/036.svg b/assets/images/cards/heron-svg/036.svg
index 17096d3..eef65bf 100644
--- a/assets/images/cards/heron-svg/036.svg
+++ b/assets/images/cards/heron-svg/036.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card36" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card36" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/037.svg b/assets/images/cards/heron-svg/037.svg
index e125f4b..0f0ffe7 100644
--- a/assets/images/cards/heron-svg/037.svg
+++ b/assets/images/cards/heron-svg/037.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card37" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card37" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">8</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 0658bf1..8ed5c42 100644
--- a/assets/images/cards/heron-svg/038.svg
+++ b/assets/images/cards/heron-svg/038.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card38" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card38" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/039.svg b/assets/images/cards/heron-svg/039.svg
index 6d7b1cd..55583df 100644
--- a/assets/images/cards/heron-svg/039.svg
+++ b/assets/images/cards/heron-svg/039.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card39" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card39" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/040.svg b/assets/images/cards/heron-svg/040.svg
index 69f6799..e8b5693 100644
--- a/assets/images/cards/heron-svg/040.svg
+++ b/assets/images/cards/heron-svg/040.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card40" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card40" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">8</text>
 </g>
@@ -39,22 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 9013582..c1f50b5 100644
--- a/assets/images/cards/heron-svg/041.svg
+++ b/assets/images/cards/heron-svg/041.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card41" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card41" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,16 +39,16 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
+<g transform="translate(137.0,43.5)" v-bind:class="{used:used_effects_indexes.includes(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>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 c114d6c..753f144 100644
--- a/assets/images/cards/heron-svg/042.svg
+++ b/assets/images/cards/heron-svg/042.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card42" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card42" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 61aa524..1166347 100644
--- a/assets/images/cards/heron-svg/043.svg
+++ b/assets/images/cards/heron-svg/043.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card43" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card43" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/044.svg b/assets/images/cards/heron-svg/044.svg
index 4ea278c..012e8f9 100644
--- a/assets/images/cards/heron-svg/044.svg
+++ b/assets/images/cards/heron-svg/044.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card44" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card44" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,26 +39,20 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/045.svg b/assets/images/cards/heron-svg/045.svg
index 9fc4acf..1491ac0 100644
--- a/assets/images/cards/heron-svg/045.svg
+++ b/assets/images/cards/heron-svg/045.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card45" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card45" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/046.svg b/assets/images/cards/heron-svg/046.svg
index 5be9539..35bb8a9 100644
--- a/assets/images/cards/heron-svg/046.svg
+++ b/assets/images/cards/heron-svg/046.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card46" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card46" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/047.svg b/assets/images/cards/heron-svg/047.svg
index 2142ebe..97c36d2 100644
--- a/assets/images/cards/heron-svg/047.svg
+++ b/assets/images/cards/heron-svg/047.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card47" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card47" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">8</text>
 </g>
@@ -39,22 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 e9c3cfe..3a676dc 100644
--- a/assets/images/cards/heron-svg/048.svg
+++ b/assets/images/cards/heron-svg/048.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card48" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card48" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -40,33 +40,27 @@
 <g transform="translate(12,265)">
 <path d="M10,45 L264,45" stroke="black" stroke-width="1" />
 <path d="M10,90 L264,90" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,35.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,22.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="15.0" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,45)">
-<g>
+<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)">
+<g transform="translate(137.0,26.0)" v-bind:class="{used:used_effects_indexes.includes(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>
 </g>
 <g transform="translate(0,90)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="22.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,35.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,22.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="15.0" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/049.svg b/assets/images/cards/heron-svg/049.svg
index fcbb34a..e3bbc95 100644
--- a/assets/images/cards/heron-svg/049.svg
+++ b/assets/images/cards/heron-svg/049.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card49" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card49" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 b82e40f..0b534bc 100644
--- a/assets/images/cards/heron-svg/050.svg
+++ b/assets/images/cards/heron-svg/050.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card50" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card50" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -38,12 +38,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/051.svg b/assets/images/cards/heron-svg/051.svg
index 7496b2d..b67e03a 100644
--- a/assets/images/cards/heron-svg/051.svg
+++ b/assets/images/cards/heron-svg/051.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card51" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card51" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/052.svg b/assets/images/cards/heron-svg/052.svg
index e435c52..a604696 100644
--- a/assets/images/cards/heron-svg/052.svg
+++ b/assets/images/cards/heron-svg/052.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card52" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card52" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
@@ -39,25 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/053.svg b/assets/images/cards/heron-svg/053.svg
index 14e355d..ffbd13b 100644
--- a/assets/images/cards/heron-svg/053.svg
+++ b/assets/images/cards/heron-svg/053.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card53" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card53" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">8</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 42063bc..9af8a9d 100644
--- a/assets/images/cards/heron-svg/054.svg
+++ b/assets/images/cards/heron-svg/054.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card54" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card54" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/055.svg b/assets/images/cards/heron-svg/055.svg
index 72d3949..bafa6a6 100644
--- a/assets/images/cards/heron-svg/055.svg
+++ b/assets/images/cards/heron-svg/055.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card55" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card55" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -39,25 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/056.svg b/assets/images/cards/heron-svg/056.svg
index b6bd1b5..681d33c 100644
--- a/assets/images/cards/heron-svg/056.svg
+++ b/assets/images/cards/heron-svg/056.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card56" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card56" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/057.svg b/assets/images/cards/heron-svg/057.svg
index 0a32293..365f87a 100644
--- a/assets/images/cards/heron-svg/057.svg
+++ b/assets/images/cards/heron-svg/057.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card57" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card57" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/058.svg b/assets/images/cards/heron-svg/058.svg
index d65cb4d..2027835 100644
--- a/assets/images/cards/heron-svg/058.svg
+++ b/assets/images/cards/heron-svg/058.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card58" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card58" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/059.svg b/assets/images/cards/heron-svg/059.svg
index f5186bc..4d038fc 100644
--- a/assets/images/cards/heron-svg/059.svg
+++ b/assets/images/cards/heron-svg/059.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card59" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card59" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/060.svg b/assets/images/cards/heron-svg/060.svg
index 2aa089d..dccfffe 100644
--- a/assets/images/cards/heron-svg/060.svg
+++ b/assets/images/cards/heron-svg/060.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card60" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card60" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 c71bf66..50e5926 100644
--- a/assets/images/cards/heron-svg/061.svg
+++ b/assets/images/cards/heron-svg/061.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card61" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card61" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,15 +39,15 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,43.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,43.5)" v-bind:class="{used:used_effects_indexes.includes(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>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 3b522ed..306083a 100644
--- a/assets/images/cards/heron-svg/062.svg
+++ b/assets/images/cards/heron-svg/062.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card62" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card62" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">8</text>
 </g>
@@ -39,27 +39,27 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 <g transform="translate(167.0,33.0)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 9528ebc..2ae7feb 100644
--- a/assets/images/cards/heron-svg/063.svg
+++ b/assets/images/cards/heron-svg/063.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card63" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card63" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 a738a29..848bd1b 100644
--- a/assets/images/cards/heron-svg/064.svg
+++ b/assets/images/cards/heron-svg/064.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card64" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card64" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/065.svg b/assets/images/cards/heron-svg/065.svg
index 8844a77..7a80399 100644
--- a/assets/images/cards/heron-svg/065.svg
+++ b/assets/images/cards/heron-svg/065.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card65" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card65" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">4</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/066.svg b/assets/images/cards/heron-svg/066.svg
index d82c434..409a4f1 100644
--- a/assets/images/cards/heron-svg/066.svg
+++ b/assets/images/cards/heron-svg/066.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card66" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card66" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -38,13 +38,13 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/067.svg b/assets/images/cards/heron-svg/067.svg
index 8fbe36c..ef51f8b 100644
--- a/assets/images/cards/heron-svg/067.svg
+++ b/assets/images/cards/heron-svg/067.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card67" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card67" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -38,9 +38,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(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 c435667..7c15369 100644
--- a/assets/images/cards/heron-svg/068.svg
+++ b/assets/images/cards/heron-svg/068.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card68" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card68" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,19 +39,16 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,43.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,43.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">buy_for_free</text>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">6</text>
 </g>
diff --git a/assets/images/cards/heron-svg/069.svg b/assets/images/cards/heron-svg/069.svg
index 46089ce..edb9055 100644
--- a/assets/images/cards/heron-svg/069.svg
+++ b/assets/images/cards/heron-svg/069.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card69" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card69" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -39,21 +39,21 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
+<g class="svg_effect">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">7</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 d1ab977..2871107 100644
--- a/assets/images/cards/heron-svg/070.svg
+++ b/assets/images/cards/heron-svg/070.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card70" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card70" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">7</text>
 </g>
@@ -38,12 +38,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">7</text>
 </g>
diff --git a/assets/images/cards/heron-svg/071.svg b/assets/images/cards/heron-svg/071.svg
index 5535e2f..859c7fe 100644
--- a/assets/images/cards/heron-svg/071.svg
+++ b/assets/images/cards/heron-svg/071.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card71" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card71" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -38,12 +38,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
diff --git a/assets/images/cards/heron-svg/072.svg b/assets/images/cards/heron-svg/072.svg
index 64d0bac..8ce2f7f 100644
--- a/assets/images/cards/heron-svg/072.svg
+++ b/assets/images/cards/heron-svg/072.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card72" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card72" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">6</text>
 </g>
@@ -39,22 +39,22 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
+<g transform="translate(137.0,70.66666666666667)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 7ae3a02..f890b92 100644
--- a/assets/images/cards/heron-svg/073.svg
+++ b/assets/images/cards/heron-svg/073.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card73" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card73" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
@@ -38,9 +38,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
+<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)">
+<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(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 b2cab37..f16d1bc 100644
--- a/assets/images/cards/heron-svg/074.svg
+++ b/assets/images/cards/heron-svg/074.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card74" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card74" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">5</text>
 </g>
@@ -39,22 +39,19 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">4</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/075.svg b/assets/images/cards/heron-svg/075.svg
index 2075bfa..5b94435 100644
--- a/assets/images/cards/heron-svg/075.svg
+++ b/assets/images/cards/heron-svg/075.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card75" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card75" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -30,7 +30,7 @@
 </g>
 </g>
 <g transform="translate(260,36)">
-<g class="svg_resource_icon" onclick="console.warn('unknown interaction')">
+<g class="svg_resource_icon" v-on:click="console.warn('unknown interaction')">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">3</text>
 </g>
@@ -39,26 +39,20 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
+<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)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<g class="svg_effect">
 <circle cx="30" cy="27.5" r="15" fill="url(#grad2)" filter="url(#drop-shadow)" />
-<g transform="translate(137.0,45.666666666666664)">
-<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
 <g transform="translate(137.0,27.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="18.333333333333332" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/076.svg b/assets/images/cards/heron-svg/076.svg
index cc079a1..0c62e72 100644
--- a/assets/images/cards/heron-svg/076.svg
+++ b/assets/images/cards/heron-svg/076.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card76" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card76" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,24 +32,21 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(77.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 <g transform="translate(197.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(2)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(2)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/077.svg b/assets/images/cards/heron-svg/077.svg
index d16aad2..c0fef60 100644
--- a/assets/images/cards/heron-svg/077.svg
+++ b/assets/images/cards/heron-svg/077.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card77" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card77" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/078.svg b/assets/images/cards/heron-svg/078.svg
index e2971d2..6b0988f 100644
--- a/assets/images/cards/heron-svg/078.svg
+++ b/assets/images/cards/heron-svg/078.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card78" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card78" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/079.svg b/assets/images/cards/heron-svg/079.svg
index d694465..8af30ce 100644
--- a/assets/images/cards/heron-svg/079.svg
+++ b/assets/images/cards/heron-svg/079.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card79" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card79" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -33,20 +33,17 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
-<g transform="translate(137.0,31.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 de251c9..5c40a51 100644
--- a/assets/images/cards/heron-svg/080.svg
+++ b/assets/images/cards/heron-svg/080.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card80" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card80" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/081.svg b/assets/images/cards/heron-svg/081.svg
index 4b78182..a3fbc06 100644
--- a/assets/images/cards/heron-svg/081.svg
+++ b/assets/images/cards/heron-svg/081.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card81" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card81" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -33,20 +33,17 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
-<g transform="translate(137.0,31.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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 db4407b..4786cc6 100644
--- a/assets/images/cards/heron-svg/082.svg
+++ b/assets/images/cards/heron-svg/082.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card82" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card82" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/083.svg b/assets/images/cards/heron-svg/083.svg
index 936b662..4d68dbe 100644
--- a/assets/images/cards/heron-svg/083.svg
+++ b/assets/images/cards/heron-svg/083.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card83" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card83" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/084.svg b/assets/images/cards/heron-svg/084.svg
index 721cc37..a425cdc 100644
--- a/assets/images/cards/heron-svg/084.svg
+++ b/assets/images/cards/heron-svg/084.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card84" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card84" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/085.svg b/assets/images/cards/heron-svg/085.svg
index 7bd5924..91db7f7 100644
--- a/assets/images/cards/heron-svg/085.svg
+++ b/assets/images/cards/heron-svg/085.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card85" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card85" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
diff --git a/assets/images/cards/heron-svg/086.svg b/assets/images/cards/heron-svg/086.svg
index ca93e8e..bcd5889 100644
--- a/assets/images/cards/heron-svg/086.svg
+++ b/assets/images/cards/heron-svg/086.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card86" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card86" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -33,20 +33,17 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
-<g transform="translate(137.0,31.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/087.svg b/assets/images/cards/heron-svg/087.svg
index 4283359..c4076f6 100644
--- a/assets/images/cards/heron-svg/087.svg
+++ b/assets/images/cards/heron-svg/087.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card87" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card87" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/088.svg b/assets/images/cards/heron-svg/088.svg
index 6586276..cbafeca 100644
--- a/assets/images/cards/heron-svg/088.svg
+++ b/assets/images/cards/heron-svg/088.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card88" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card88" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/089.svg b/assets/images/cards/heron-svg/089.svg
index 3599101..5ac56aa 100644
--- a/assets/images/cards/heron-svg/089.svg
+++ b/assets/images/cards/heron-svg/089.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card89" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card89" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/090.svg b/assets/images/cards/heron-svg/090.svg
index 55744a0..3cf466d 100644
--- a/assets/images/cards/heron-svg/090.svg
+++ b/assets/images/cards/heron-svg/090.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card90" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card90" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,18 +32,15 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(107.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 <g transform="translate(167.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
diff --git a/assets/images/cards/heron-svg/091.svg b/assets/images/cards/heron-svg/091.svg
index 1481c7c..20f5feb 100644
--- a/assets/images/cards/heron-svg/091.svg
+++ b/assets/images/cards/heron-svg/091.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card91" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card91" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -32,12 +32,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/assets/images/cards/heron-svg/092.svg b/assets/images/cards/heron-svg/092.svg
index aad10b0..e940481 100644
--- a/assets/images/cards/heron-svg/092.svg
+++ b/assets/images/cards/heron-svg/092.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card92" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card92" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -33,21 +33,18 @@
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
 <path d="M10,80 L264,80" stroke="black" stroke-width="1" />
-<g>
-<g transform="translate(137.0,70.66666666666667)">
-<text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,40.0)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
 </g>
 </g>
 <g transform="translate(0,80)">
-<g>
+<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)">
+<g transform="translate(137.0,31.0)" v-bind:class="{used:used_effects_indexes.includes(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/093.svg b/assets/images/cards/heron-svg/093.svg
index a9d01c9..3dbd215 100644
--- a/assets/images/cards/heron-svg/093.svg
+++ b/assets/images/cards/heron-svg/093.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card93" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card93" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/094.svg b/assets/images/cards/heron-svg/094.svg
index 457bafc..996a4ff 100644
--- a/assets/images/cards/heron-svg/094.svg
+++ b/assets/images/cards/heron-svg/094.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card94" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card94" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/095.svg b/assets/images/cards/heron-svg/095.svg
index c301078..1e1d727 100644
--- a/assets/images/cards/heron-svg/095.svg
+++ b/assets/images/cards/heron-svg/095.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card95" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card95" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,8 +32,8 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,71.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(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/096.svg b/assets/images/cards/heron-svg/096.svg
index 9b5df4e..cd7a98e 100644
--- a/assets/images/cards/heron-svg/096.svg
+++ b/assets/images/cards/heron-svg/096.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card96" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card96" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,18 +32,15 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(107.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
 </g>
 <g transform="translate(167.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(1)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(1)">
 <circle cx="0" cy="0" r="20" fill="green" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/097.svg b/assets/images/cards/heron-svg/097.svg
index ea988ef..8e594c0 100644
--- a/assets/images/cards/heron-svg/097.svg
+++ b/assets/images/cards/heron-svg/097.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card97" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card97" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">2</text>
 </g>
diff --git a/assets/images/cards/heron-svg/098.svg b/assets/images/cards/heron-svg/098.svg
index ec66600..c4f15f1 100644
--- a/assets/images/cards/heron-svg/098.svg
+++ b/assets/images/cards/heron-svg/098.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card98" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card98" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">5</text>
 </g>
diff --git a/assets/images/cards/heron-svg/099.svg b/assets/images/cards/heron-svg/099.svg
index 08df822..f51a5a9 100644
--- a/assets/images/cards/heron-svg/099.svg
+++ b/assets/images/cards/heron-svg/099.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card99" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card99" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,8 +32,8 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,71.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(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/100.svg b/assets/images/cards/heron-svg/100.svg
index b0a567d..b2986e3 100644
--- a/assets/images/cards/heron-svg/100.svg
+++ b/assets/images/cards/heron-svg/100.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card100" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card100" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,9 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
-<text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
-</g>
+<g class="svg_effect">
 <g transform="translate(137.0,67.5)" v-bind:class="{used:used_effects_indexes.includes(0)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="red" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="white" font-weight="bold" font-family="Helvetica">3</text>
 </g>
diff --git a/assets/images/cards/heron-svg/101.svg b/assets/images/cards/heron-svg/101.svg
index bfb1daf..487ca66 100644
--- a/assets/images/cards/heron-svg/101.svg
+++ b/assets/images/cards/heron-svg/101.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card101" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card101" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,8 +32,8 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,71.0)">
+<g class="svg_effect">
+<g transform="translate(137.0,71.0)" v-bind:class="{used:used_effects_indexes.includes(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 b676ccf..c57b608 100644
--- a/assets/images/cards/heron-svg/102.svg
+++ b/assets/images/cards/heron-svg/102.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="298" height="417" viewBox="0 0 298 417" id="card102" class="card" xmlns:v-bind="https://heron.legonzaur.fr">
+     width="298" height="417" viewBox="0 0 298 417" id="card102" class="card" xmlns:v-bind="https://vuejs.org/guide/essentials/class-and-style.html" xmlns:v-on="https://vuejs.org/guide/essentials/event-handling.html">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -32,12 +32,12 @@
 <rect x="0" y="65" width="298" height="200" />
 <image x="0" y="65" width="298" height="200" xlink:href="../../img/missing.png" />
 <g transform="translate(12,265)">
-<g>
-<g transform="translate(137.0,101.5)">
+<g class="svg_effect">
+<g transform="translate(137.0,101.5)" v-bind:class="{used:used_effects_indexes.includes(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)}">
-<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );">
+<g class="svg_resource_icon" v-on:click="effectClick(0)">
 <circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" />
 <text x="0" y="9" font-size="24" text-anchor="middle" fill="black" font-weight="bold" font-family="Helvetica">1</text>
 </g>
diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 388f4b4..31231eb 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(["click", "effectClick"]);
 
 const settingsStore = useSettingsStore();
 
@@ -61,12 +61,6 @@ function rightClickUp(e: MouseEvent) {
   isZooming.value = false;
 }
 
-function activateEffect(e: CustomEvent) {
-  if (props.card) {
-    console.log(e.detail, props.card?._id);
-  }
-}
-
 onMounted(() => {
   card.value?.style.setProperty("--random-seed", -Math.random() * 10 + "s");
 });
@@ -118,6 +112,7 @@ onMounted(() => {
         v-if="settingsStore.cardStyle == CardStyles.SVG && props.card"
         :card="props.card"
         :used_effects_indexes="used_effects_indexes"
+        @effectClick="emit('effectClick', $event)"
       ></CardComponent>
       <img
         :class="`card_image`"
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index 175963d..fd9ed01 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -16,7 +16,7 @@ const props = withDefaults(defineProps<Props>(), {
   noEffects: () => false,
 });
 
-const emit = defineEmits(["cardClick"]);
+const emit = defineEmits(["cardClick", "effectClick"]);
 
 const settingsStore = useSettingsStore();
 
@@ -97,6 +97,7 @@ onUnmounted(() => {
     <TransitionGroup name="list">
       <CardPreview
         @click="$emit('cardClick', c._id)"
+        @effectClick="$emit('effectClick', c._id, $event)"
         v-for="c in cards"
         :card_id="c.cardId"
         :wrapped="wrapped"
@@ -106,7 +107,7 @@ onUnmounted(() => {
           !playingTurn || playingTurn?.cardsLocked.includes(c._id.toString())
         "
         :used_effects_indexes="c.effects?.reduce( (prev,e, i)=>{
-          if(playingTurn?.effectsUsed.includes(e._id)){
+          if(playingTurn?.lockedEffects.includes(e._id)){
             prev.push(i)
           }
           return prev
diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 405a36c..20fa2ca 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { endTurn, joinGame, lockCard, startGame } from "~/netcode";
+import { endTurn, joinGame, lockCard, lockEffect, startGame } from "~/netcode";
 import type { Game, Player } from "~/netcode/interfaces";
 import { useTurnStore } from "~/stores/turnStore";
 
@@ -92,6 +92,19 @@ function boardCardClick(cardUUID: string) {
   }
   lockCard(props.game._id, cardUUID);
 }
+
+function effectClick(cardUUID: string, effectIndex: number) {
+  const card = props.player.board.cards.find((c) => c._id == cardUUID);
+  if (!card) {
+    console.error("card not found");
+    return;
+  }
+  if (!props.game.currentTurn.cardsLocked.includes(cardUUID)) {
+    return;
+  }
+  const effectUUID = card.effects[effectIndex]._id;
+  lockEffect(props.game._id, effectUUID);
+}
 // function damage_team_all(team: Team) {
 //     for (let i = 0; i < (goStore.self?.turn?.damage_reserve ?? 0); i++) {
 //         damage_team(team)
@@ -158,6 +171,7 @@ function boardCardClick(cardUUID: string) {
         :wrapped="false"
         :playingTurn="props.game.currentTurn"
         @cardClick="boardCardClick"
+        @effectClick="effectClick"
       >
       </CardsGrouped>
 
@@ -270,7 +284,6 @@ function boardCardClick(cardUUID: string) {
   visibility: hidden;
 }
 
-
 .player {
   display: grid;
   grid-template-columns: 1fr;
@@ -282,12 +295,11 @@ function boardCardClick(cardUUID: string) {
     "turn_buttons";
   justify-items: center;
   transition: all 1s;
-
 }
 
 #current_player_board {
   grid-area: player;
-  display:flex;
+  display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
diff --git a/netcode/index.ts b/netcode/index.ts
index d3d8698..985018e 100644
--- a/netcode/index.ts
+++ b/netcode/index.ts
@@ -112,3 +112,15 @@ export async function buyCard(game: string, cardId: string) {
     }
   );
 }
+
+export async function lockEffect(game: string, effectId: string) {
+  const config = useRuntimeConfig();
+  await $fetch(
+    new URL(`games/${game}/turn/lockEffect/${effectId}`, config.public.endpoint)
+      .href,
+    {
+      method: "POST",
+      credentials: "include",
+    }
+  );
+}
diff --git a/netcode/interfaces.ts b/netcode/interfaces.ts
index ecf3de9..4f49097 100644
--- a/netcode/interfaces.ts
+++ b/netcode/interfaces.ts
@@ -5,7 +5,8 @@ export interface GameObject {
 export interface PlayingTurn {
   currentTeam: string;
   cardsLocked: string[];
-  effectsUsed: string[];
+  lockedEffects: string[];
+  tokens: Effect[];
   damage: number;
   gold: number;
 }
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index 359b6c3..80fed70 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -111,7 +111,9 @@ eventSource.addEventListener("message", async (message) => {
     const toContainer = containers.value[data.to as string];
     for (const card of data.cards) {
       queueAction(async () => {
-        const index = fromContainer.cards.findIndex((c) => c._id == card._id);
+        const index = fromContainer.cards.findIndex(
+          (c) => !c || c._id == card._id
+        );
         fromContainer.cards.splice(index, 1);
         await delay(settingsStore.animationSpeed);
       });
@@ -134,7 +136,6 @@ eventSource.addEventListener("message", async (message) => {
       const playingPlayer = current_game.teams.find(
         (t) => t._id == current_game.currentTurn.currentTeam
       )?.players[0];
-      console.log(playingPlayer);
       if (playingPlayer) {
         focusPlayer(playingPlayer);
         await delay(settingsStore.animationSpeed);
@@ -151,9 +152,9 @@ eventSource.addEventListener("message", async (message) => {
       playSound("/sounds/teleport.mp3");
       current_game.teams.push(data.team);
     });
-  } else if (data.type == "useEffect") {
+  } else if (data.type == "lockEffect") {
     queueAction(async () => {
-      current_game.currentTurn.effectsUsed.push(data.effect);
+      current_game.currentTurn.lockedEffects.push(data.effect);
       await delay(settingsStore.animationSpeed);
     });
   } else if (data.type == "currentTurn.updateGold") {
@@ -166,6 +167,11 @@ eventSource.addEventListener("message", async (message) => {
       console.log(`adding damage amount : ` + data.operation);
       current_game.currentTurn.damage = data.damage;
     });
+  } else if (data.type == "currentTurn.addToken") {
+    queueAction(async () => {
+      current_game.currentTurn.tokens.push(data.token);
+      await delay(settingsStore.animationSpeed);
+    });
   } else if (data.type == "team.updateHealth") {
     queueAction(async () => {
       const team = game.value?.teams.find((t) => t._id == data.team);
@@ -278,7 +284,7 @@ onUnmounted(() => {
       :fire_gems="game.fireGems"
       :marketStack="game.marketStack"
     ></MarketCards>
-    <!-- <div id="turnStats">{{ game.currentTurn.gold }} {{ game.currentTurn.damage }}</div> -->
+    <div id="turnStats">{{ game.currentTurn.tokens }}</div>
     <div id="player_list_container">
       <div id="player_list">
         <PlayerListElement
diff --git a/services/loadCards.ts b/services/loadCards.ts
index b2452ce..141b220 100644
--- a/services/loadCards.ts
+++ b/services/loadCards.ts
@@ -9,28 +9,33 @@ export async function compileCards(app: App<any>) {
     eager: true,
   });
 
-  //   const components = await Promise.all(
-  //     Object.entries(svgs).map(async ([k, v]) => {
-  //       const regex = /([\d]+)(?=\.svg)/gm;
-  //       const url = (v as any).default as string;
-  //       let template = await (await fetch(url)).text();
-  //       let arrayTemplate = template.split("\n");
-  //       arrayTemplate.splice(0, 1);
-  //       template = arrayTemplate.join("\n");
+  // const components = await Promise.all(
+  //   Object.entries(svgs).map(async ([k, v]) => {
+  //     const regex = /([\d]+)(?=\.svg)/gm;
+  //     const url = (v as any).default as string;
+  //     let template = await (await fetch(url)).text();
+  //     let arrayTemplate = template.split("\n");
+  //     arrayTemplate.splice(0, 1);
+  //     template = arrayTemplate.join("\n");
 
-  //       return [
-  //         k.match(regex)![0],
-  //         defineComponent({
-  //           props: ["currentTurn", "card"],
-  //           setup(_props) {
-  //             const count = ref(0);
-  //             return { count };
+  //     return [
+  //       k.match(regex)![0],
+  //       defineComponent({
+  //         props: ["used_effects_indexes", "card"],
+  //         setup(_props) {
+  //           const count = ref(0);
+  //           return { count };
+  //         },
+  //         methods: {
+  //           effectClick(effect: number) {
+  //             this.$emit("effectClick", effect);
   //           },
-  //           template: template,
-  //         }),
-  //       ];
-  //     })
-  //   );
+  //         },
+  //         template: template,
+  //       }),
+  //     ];
+  //   })
+  // );
 
   const components = await Promise.all(
     Object.entries(svgs).map(async ([k, v]) => {
@@ -45,10 +50,16 @@ export async function compileCards(app: App<any>) {
         Number(k.match(regex)![0]).toString(),
         markRaw(
           defineAsyncComponent({
-            loader: async () => ({
-              props: ["used_effects_indexes", "card"],
-              template: template,
-            }),
+            loader: async () =>
+              defineComponent({
+                props: ["used_effects_indexes", "card"],
+                methods: {
+                  effectClick(effect: number) {
+                    this.$emit("effectClick", effect);
+                  },
+                },
+                template: template,
+              }),
           })
         ),
       ];