diff --git a/components/CardPreview.vue b/components/CardPreview.vue
index 7db63f3..c13e202 100644
--- a/components/CardPreview.vue
+++ b/components/CardPreview.vue
@@ -3,7 +3,8 @@
 // import { useSettingsStore } from '~/stores/settingsStore';
 
 export interface Props {
-    card_id: number | undefined
+    uuid?: string
+    card_id?: number
     locked?: boolean
     wrapped?: boolean
     tilted?: boolean
@@ -35,22 +36,31 @@ function cardClick() {
     emit("click")
 }
 
-const rotation = ref(0)
+const isZooming = ref<boolean>(false)
+
+function mouseenter(e: MouseEvent) {
+    // User is Right Clicking
+    if ((e.buttons & 2) == 2) {
+        isZooming.value = true
+    }
 
-function mouseenter(e: Event) {
     // goStore.hoveredCard = props.card_id
 }
-function mouseleave(e: Event) {
-    // goStore.hoveredCard = undefined
+function mouseleave(e: MouseEvent) {
+    isZooming.value = false
 }
 
-watch(
-    () => props.card_id,
-    () => {
-        props.wrapped ? rotation.value = (Math.random() * 4) - 2 : rotation.value = Math.random() > .5 ? 2 : -2
-    },
-    { immediate: true })
+function rightClickDown(e: MouseEvent) {
+    isZooming.value = true
+}
 
+function rightClickUp(e: MouseEvent) {
+    isZooming.value = false
+}
+
+function activateEffect(e: CustomEvent) {
+    console.log(e.detail, props.uuid)
+}
 
 onMounted(() => {
     card.value?.style.setProperty("--random-seed", -Math.random() * 10 + 's')
@@ -58,17 +68,24 @@ onMounted(() => {
 </script>
 
 <template>
-    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked }"
-        @contextmenu.prevent="false" @click.left="cardClick" :style="tilted ? `rotate:${rotation}deg;` : ''"
-        @mouseenter="mouseenter" @mouseleave="mouseleave">
+    <div ref="card" class="card" :class="{ active: childCount > 0, wrapped, unlocked: !props.locked, zoom: isZooming }"
+        @contextmenu.prevent="false" @click.left="cardClick" @mousedown.right="rightClickDown"
+        @mouseup.right="rightClickUp" @mouseenter="mouseenter" @mouseleave="mouseleave">
         <div id="contextMenuButtons" :ref="(el) => { childCount = ((el as Element)?.childElementCount ?? 0) }">
             <slot></slot>
         </div>
-        <img :class="`card_image`" v-if="props.card_id"
-            :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + extension"
-            draggable="false">
+        <template v-if="props.card_id">
+            <svg width="180" height="250" v-if="settingsStore.cardStyle == CardStyles.SVG" viewBox="0 0 298 417">
+                <use :xlink:href="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + extension + '#card' + props.card_id"
+                    @activate_effect="activateEffect($event)">
+                </use>
+            </svg>
+            <img :class="`card_image`" v-else
+                :src="`/cards/${settingsStore.cardStyle}/` + props.card_id.toString().padStart(3, '0') + extension"
+                draggable="false">
+        </template>
 
-        <img :class="`card_image`" v-if="!props.card_id" :src="'/cards/background.png'" draggable="false">
+        <img :class="`card_image`" v-else :src="'/cards/background.png'" draggable="false">
 
     </div>
 
@@ -82,13 +99,13 @@ onMounted(() => {
 .card {
     --max-height: 250px;
     --margin-bottom: calc(var(--max-height) * 0.05);
-    max-width: 256px;
+    /* max-width: 256px; */
     position: relative;
     display: flex;
     justify-content: center;
     margin-bottom: 0px;
     margin-top: var(--margin-bottom);
-    transition: all 0.250s cubic-bezier(1, 1.81, .59, 1.42), filter .125s cubic-bezier(0.075, 0.82, 0.165, 1), rotate 0.075s cubic-bezier(1, 1.81, .59, 1.42);
+    transition: all 0.075s cubic-bezier(1, 1.81, .59, 1.42);
     isolation: isolate;
     pointer-events: all;
     max-height: var(--max-height);
@@ -146,7 +163,7 @@ onMounted(() => {
 }
 
 .card.wrapped {
-    max-height: 6px;
+    height: 6px;
     margin: 0;
 }
 
@@ -154,6 +171,11 @@ onMounted(() => {
     filter: drop-shadow(.5px .5px .5px gray) drop-shadow(-.5px -.5px .5px gray);
 }
 
+.card.zoom {
+    transform: scale(200%);
+    z-index: 10;
+}
+
 #contextMenuButtons {
     position: absolute;
     display: flex;
@@ -177,4 +199,36 @@ onMounted(() => {
     border-radius: 12px;
     min-height: 50px;
 }
+
+@keyframes gelatine {
+
+    from,
+    to {}
+
+    25% {
+        transform: scale(1, 1.5);
+    }
+
+    50% {
+        transform: scale(1.5, 1);
+    }
+
+    75% {
+        transform: scale(1.1, 1.3);
+    }
+}
+
+.svg_resource_icon {
+    cursor: pointer;
+    animation: gelatine 0.3s normal;
+    transition: transform .1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.svg_resource_icon:active {
+    animation: none;
+}
+
+.svg_resource_icon:hover {
+    transform: scale(130%);
+}
 </style>
\ No newline at end of file
diff --git a/components/CardsGrouped.vue b/components/CardsGrouped.vue
index f10d7e4..5c62191 100644
--- a/components/CardsGrouped.vue
+++ b/components/CardsGrouped.vue
@@ -77,7 +77,8 @@ onUnmounted(() => {
 <template>
     <div class="cards_container" :class="{ wrapped, rotate }">
         <TransitionGroup name="list" @enter="onEnter" @leave="onLeave" @before-enter="onBeforeEnter">
-            <CardPreview :card_id="c.cardId" :wrapped="wrapped" v-for="c in cards" :key="c?._id">
+            <CardPreview :card_id="c.cardId" :wrapped="wrapped" v-for="c in cards" :key="c._id"
+                :uuid="c._id.toString()">
                 <slot></slot>
             </CardPreview>
         </TransitionGroup>
@@ -98,25 +99,29 @@ onUnmounted(() => {
     transform: translateX(30px);
 }
 
-.cards_container.wrapped:before {
-    height: calc(250px - 10px);
-    display: block;
-    content: "";
-    width: 0;
-}
-
 .rotate {
     rotate: 360deg;
 }
 
 .cards_container {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: row;
     justify-content: center;
     min-width: 200px;
     transition: rotate v-bind('shuffleAnimationSpeed') ease;
 }
 
+.cards_container.wrapped {
+    flex-direction: column-reverse;
+}
+
+.cards_container.wrapped:before {
+    height: calc(250px - 10px);
+    display: block;
+    content: "";
+    width: 0;
+}
+
 .empty {
     max-height: 10px;
 }
diff --git a/components/MarketCards.vue b/components/MarketCards.vue
index 837d0ef..b54a0fd 100644
--- a/components/MarketCards.vue
+++ b/components/MarketCards.vue
@@ -4,19 +4,20 @@ import type { Container } from '~/netcode/interfaces';
 
 
 export interface Props {
-    container: Container
+    market: Container
+    fire_gems: Container
 }
 
 const props = defineProps<Props>()
 
 const authStore = useAuthStore()
 
-const selfPlayer = computed(() => authStore.logged ? playerList.value?.find(p => p.user.userId == authStore.selfUser.userId) : undefined)
+// const selfPlayer = computed(() => authStore.logged ? playerList.value?.find(p => p.user.userId == authStore.selfUser.userId) : undefined)
 
-const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
-const clientStore = useClientSideStore()
+// const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
+// const clientStore = useClientSideStore()
 
-const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
+// const buyableFiregem = computed(() => goStore?.current_game?.gem_stack.at(-1))
 
 
 function onBeforeEnter(el: Element) {
@@ -43,63 +44,12 @@ function onEnter(el: any, done: () => unknown) {
     <div id="market">
         <CardPreview :tilted="false" :card_id="undefined"></CardPreview>
         <div class="separator"></div>
-        <TransitionGroup name="market_card">
-            <CardPreview :tilted="false" :card_id="c?.card_id" v-for="c in goStore.current_game?.market"
-                :key="c?.card_id" @click="c && buy(c)">
-                <template
-                    v-if="isTurn && goStore.self?.turn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
-                    <button @click.stop="buy(c)">BUY</button>
-                    <button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, c);"
-                        v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
-                        BUY IN HAND</button>
-                    <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, c)"
-                        v-if="clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
-                        BUY IN STACK (generic)</button>
-
-                    <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_ACTION_BOUGHT, c)"
-                        v-if="c.card_type == CardType.ACTION && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_ACTION_BOUGHT) && e.usable)">
-                        BUY IN STACK (actions)</button>
-                </template>
-            </CardPreview>
-        </TransitionGroup>
+        <CardsGrouped :container="market"></CardsGrouped>
         <div class="separator"></div>
-        <CardPreview :tilted="false" :card_id="goStore.current_game?.gem_stack.at(-1)?.card_id"
-            @click="buy(goStore.current_game?.gem_stack.at(-1)!)">
-            <template
-                v-if="isTurn && goStore.self?.turn && goStore.current_game?.gem_stack.length && goStore.current_game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.current_game?.gem_stack.at(-1)?.cost ?? Infinity)">
-                <button @click.stop="buy(goStore.current_game.gem_stack.at(-1)!)">
-                    BUY
-                </button>
-                <button @click.stop="clientStore.findUseEffect(CardEffects.PLAY_NEXT_CARD_BOUGHT, buyableFiregem)"
-                    v-if="buyableFiregem && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.PLAY_NEXT_CARD_BOUGHT) && e.usable)">
-                    BUY IN HAND</button>
-                <button @click.stop="clientStore.findUseEffect(CardEffects.STACK_NEXT_CARD_BOUGHT, buyableFiregem)"
-                    v-if="buyableFiregem && clientStore.activatedClientside.find((e: Effect) => (e.effect == CardEffects.STACK_NEXT_CARD_BOUGHT) && e.usable)">
-                    BUY IN STACK(generic)
-                </button>
-            </template>
-        </CardPreview>
+        <CardsGrouped :container="fire_gems" :wrapped="true"></CardsGrouped>
     </div>
-
 </template>
 
-
-<style scoped>
-/* .market_card-leave-active,
-.market_card-move {
-    display: none;
-}
-
-.market_card-enter-from {
-    transform: translate(-500px);
-}
-
-
-.market_card-enter-active,
-.market_card-leave-active {
-    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-} */
-</style>
 <style scoped>
 #market {
     width: min-content;
@@ -118,7 +68,6 @@ function onEnter(el: any, done: () => unknown) {
     filter: drop-shadow(2.5px 7.5px 1px rgba(0, 0, 0, .60));
     backdrop-filter: blur(5px) brightness(80%);
     background: rgba(155, 62, 62, 0.46);
-
 }
 
 .separator {
diff --git a/pages/game/[id].vue b/pages/game/[id].vue
index f5e8800..eb5a8ee 100644
--- a/pages/game/[id].vue
+++ b/pages/game/[id].vue
@@ -173,7 +173,7 @@ onUnmounted(() => {
             </div>
         </div>
 
-        <!-- <MarketCards :container="game.market"></MarketCards> -->
+        <MarketCards :market="game.market" :fire_gems="game.fireGems"></MarketCards>
 
         <!-- <div id="player_list_container">
             <div id="player_list">
@@ -220,6 +220,9 @@ onUnmounted(() => {
     overflow: auto;
     position: relative;
     isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     /* background: url('/images/bg-darkgrass.png'); */
 }
 
diff --git a/public/cards/heron-svg/001.svg b/public/cards/heron-svg/001.svg
index 2966489..94b431a 100644
--- a/public/cards/heron-svg/001.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card1">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d2">
+<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 id="d3">
@@ -36,8 +36,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -61,7 +61,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/002.svg b/public/cards/heron-svg/002.svg
index b39cf16..b9cd6af 100644
--- a/public/cards/heron-svg/002.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card2">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/003.svg b/public/cards/heron-svg/003.svg
index fa73be9..8bdc59d 100644
--- a/public/cards/heron-svg/003.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card3">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,23 +17,23 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d3">
+<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 id="d4">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '3' } ) );" id="d4">
+<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>
 <g id="d5">
@@ -48,7 +48,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/004.svg b/public/cards/heron-svg/004.svg
index 4f2baa0..ad203a1 100644
--- a/public/cards/heron-svg/004.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card4">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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>
 <g id="d4">
@@ -50,7 +50,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/005.svg b/public/cards/heron-svg/005.svg
index 9b21e8d..7f32be0 100644
--- a/public/cards/heron-svg/005.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card5">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/006.svg b/public/cards/heron-svg/006.svg
index 7188f22..b45db4e 100644
--- a/public/cards/heron-svg/006.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card6">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -61,7 +61,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/007.svg b/public/cards/heron-svg/007.svg
index 7b514d6..406db7f 100644
--- a/public/cards/heron-svg/007.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card7">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -54,7 +54,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/008.svg b/public/cards/heron-svg/008.svg
index 041d593..46995de 100644
--- a/public/cards/heron-svg/008.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card8">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/009.svg b/public/cards/heron-svg/009.svg
index e0fbe19..56906c7 100644
--- a/public/cards/heron-svg/009.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card9">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/010.svg b/public/cards/heron-svg/010.svg
index 1b5a560..191fb2a 100644
--- a/public/cards/heron-svg/010.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card10">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/011.svg b/public/cards/heron-svg/011.svg
index 924dd34..11c7825 100644
--- a/public/cards/heron-svg/011.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card11">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -40,8 +40,8 @@
 <g id="d5">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d6">
-<circle cx="0" cy="0" r="18.333333333333332" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '3' } ) );" id="d6">
+<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>
 <g id="d7">
@@ -57,7 +57,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/012.svg b/public/cards/heron-svg/012.svg
index 6373242..edd87e6 100644
--- a/public/cards/heron-svg/012.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card12">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -45,7 +45,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/013.svg b/public/cards/heron-svg/013.svg
index 569308e..7dd8c81 100644
--- a/public/cards/heron-svg/013.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card13">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/014.svg b/public/cards/heron-svg/014.svg
index 414ef6c..ab0dd1f 100644
--- a/public/cards/heron-svg/014.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card14">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,8 +17,8 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
@@ -30,8 +30,8 @@
 <g id="d3">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d4">
-<circle cx="0" cy="0" r="15.0" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d4">
+<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>
 <g id="d5">
@@ -42,8 +42,8 @@
 <g id="d6">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d7">
-<circle cx="0" cy="0" r="15.0" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d7">
+<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>
 <g id="d8">
@@ -61,7 +61,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/015.svg b/public/cards/heron-svg/015.svg
index 71b8afe..f702d7d 100644
--- a/public/cards/heron-svg/015.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card15">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/016.svg b/public/cards/heron-svg/016.svg
index de6f59c..6d8eee5 100644
--- a/public/cards/heron-svg/016.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card16">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/017.svg b/public/cards/heron-svg/017.svg
index 291d5e0..1fb8038 100644
--- a/public/cards/heron-svg/017.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card17">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/018.svg b/public/cards/heron-svg/018.svg
index d31e034..7fe3e20 100644
--- a/public/cards/heron-svg/018.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card18">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/019.svg b/public/cards/heron-svg/019.svg
index d4fd6c1..3be2c69 100644
--- a/public/cards/heron-svg/019.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card19">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '3' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/020.svg b/public/cards/heron-svg/020.svg
index 3c162f9..fc0ed62 100644
--- a/public/cards/heron-svg/020.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card20">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/021.svg b/public/cards/heron-svg/021.svg
index 0ba113d..82c3c11 100644
--- a/public/cards/heron-svg/021.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card21">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/022.svg b/public/cards/heron-svg/022.svg
index fe9c35e..22097ef 100644
--- a/public/cards/heron-svg/022.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card22">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -36,8 +36,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -61,7 +61,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/023.svg b/public/cards/heron-svg/023.svg
index f95200a..6537842 100644
--- a/public/cards/heron-svg/023.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card23">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -56,7 +56,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/024.svg b/public/cards/heron-svg/024.svg
index aba0173..f114016 100644
--- a/public/cards/heron-svg/024.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card24">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/025.svg b/public/cards/heron-svg/025.svg
index caa6914..d15f398 100644
--- a/public/cards/heron-svg/025.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card25">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -45,7 +45,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/026.svg b/public/cards/heron-svg/026.svg
index fb403ba..1ab1170 100644
--- a/public/cards/heron-svg/026.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card26">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -54,7 +54,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/027.svg b/public/cards/heron-svg/027.svg
index 89acac7..a4e711a 100644
--- a/public/cards/heron-svg/027.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card27">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">restack_discarded_card</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -38,7 +38,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/028.svg b/public/cards/heron-svg/028.svg
index 8e1beca..cf92f30 100644
--- a/public/cards/heron-svg/028.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card28">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -50,7 +50,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/029.svg b/public/cards/heron-svg/029.svg
index 0b1e148..b6c4ec0 100644
--- a/public/cards/heron-svg/029.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card29">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -41,8 +41,8 @@
 <g id="d5">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d6">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d6">
+<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>
 <g id="d7">
@@ -64,7 +64,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/030.svg b/public/cards/heron-svg/030.svg
index 76d0620..ae23859 100644
--- a/public/cards/heron-svg/030.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card30">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/031.svg b/public/cards/heron-svg/031.svg
index 3ffcb25..5c49f5d 100644
--- a/public/cards/heron-svg/031.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card31">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/032.svg b/public/cards/heron-svg/032.svg
index 25daffd..1fd4735 100644
--- a/public/cards/heron-svg/032.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card32">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/033.svg b/public/cards/heron-svg/033.svg
index caccf10..846f284 100644
--- a/public/cards/heron-svg/033.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card33">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/034.svg b/public/cards/heron-svg/034.svg
index c7dc41c..8d4b022 100644
--- a/public/cards/heron-svg/034.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card34">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -54,7 +54,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/035.svg b/public/cards/heron-svg/035.svg
index 84b135b..5e759b5 100644
--- a/public/cards/heron-svg/035.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card35">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/036.svg b/public/cards/heron-svg/036.svg
index 2a198f7..184a57d 100644
--- a/public/cards/heron-svg/036.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card36">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -45,7 +45,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/037.svg b/public/cards/heron-svg/037.svg
index c745cfe..293a99d 100644
--- a/public/cards/heron-svg/037.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card37">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/038.svg b/public/cards/heron-svg/038.svg
index 71908b8..7686b7a 100644
--- a/public/cards/heron-svg/038.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card38">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/039.svg b/public/cards/heron-svg/039.svg
index 4261ef8..24c6d7f 100644
--- a/public/cards/heron-svg/039.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card39">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/040.svg b/public/cards/heron-svg/040.svg
index 3e5c39d..1a0c82d 100644
--- a/public/cards/heron-svg/040.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card40">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -56,7 +56,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/041.svg b/public/cards/heron-svg/041.svg
index c2b0f2c..445deab 100644
--- a/public/cards/heron-svg/041.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card41">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,8 +17,8 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
@@ -49,7 +49,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/042.svg b/public/cards/heron-svg/042.svg
index e8634aa..3cf1bd5 100644
--- a/public/cards/heron-svg/042.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card42">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -54,7 +54,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/043.svg b/public/cards/heron-svg/043.svg
index d45fd95..ae0c1a9 100644
--- a/public/cards/heron-svg/043.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card43">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -54,7 +54,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/044.svg b/public/cards/heron-svg/044.svg
index 85504c3..065f094 100644
--- a/public/cards/heron-svg/044.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card44">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -36,8 +36,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -61,7 +61,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/045.svg b/public/cards/heron-svg/045.svg
index 3d1b4ee..0fe6e57 100644
--- a/public/cards/heron-svg/045.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card45">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/046.svg b/public/cards/heron-svg/046.svg
index fd2ad6d..0ed0680 100644
--- a/public/cards/heron-svg/046.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card46">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/047.svg b/public/cards/heron-svg/047.svg
index 86324ef..2b1b355 100644
--- a/public/cards/heron-svg/047.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card47">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -56,7 +56,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/048.svg b/public/cards/heron-svg/048.svg
index a27ee8b..1afa9a8 100644
--- a/public/cards/heron-svg/048.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card48">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="15.0" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -40,23 +40,28 @@
 <use xlink:href="#d4" x="137.0" y="26.0" />
 </g>
 <g id="d6">
-<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>
+<text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d7">
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d7">
+<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>
+<g id="d8">
 <circle cx="30" cy="22.5" r="15" fill="black" filter="url(#drop-shadow)" />
-<use xlink:href="#d6" x="137.0" y="26.0" />
+<use xlink:href="#d6" x="137.0" y="35.666666666666664" />
+<use xlink:href="#d7" x="137.0" y="22.5" />
 </g>
 <g id="effects">
 <path d="M10,45 L264,45" stroke="black" stroke-width="1" />
 <path d="M10,90 L264,90" stroke="black" stroke-width="1" />
 <use xlink:href="#d3" x="0" y="0" />
 <use xlink:href="#d5" x="0" y="45" />
-<use xlink:href="#d7" x="0" y="90" />
+<use xlink:href="#d8" x="0" y="90" />
 </g>
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/049.svg b/public/cards/heron-svg/049.svg
index e57785f..5e0a117 100644
--- a/public/cards/heron-svg/049.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card49">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -56,7 +56,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/050.svg b/public/cards/heron-svg/050.svg
index c7fb012..b976e51 100644
--- a/public/cards/heron-svg/050.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card50">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -38,7 +38,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/051.svg b/public/cards/heron-svg/051.svg
index 4069605..64174ff 100644
--- a/public/cards/heron-svg/051.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card51">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/052.svg b/public/cards/heron-svg/052.svg
index b2ffc92..6bc9b14 100644
--- a/public/cards/heron-svg/052.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card52">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/053.svg b/public/cards/heron-svg/053.svg
index e3ae967..77202b8 100644
--- a/public/cards/heron-svg/053.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card53">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/054.svg b/public/cards/heron-svg/054.svg
index d5e1dda..b1f2e3b 100644
--- a/public/cards/heron-svg/054.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card54">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -45,7 +45,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/055.svg b/public/cards/heron-svg/055.svg
index e5e4774..d40f43b 100644
--- a/public/cards/heron-svg/055.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card55">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -35,8 +35,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/056.svg b/public/cards/heron-svg/056.svg
index 6b7bc2c..f1ce20b 100644
--- a/public/cards/heron-svg/056.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card56">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/057.svg b/public/cards/heron-svg/057.svg
index 8137538..90132b8 100644
--- a/public/cards/heron-svg/057.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card57">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/058.svg b/public/cards/heron-svg/058.svg
index a7dd08a..bbb52dd 100644
--- a/public/cards/heron-svg/058.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card58">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/059.svg b/public/cards/heron-svg/059.svg
index 372c7e6..45ee834 100644
--- a/public/cards/heron-svg/059.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card59">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/060.svg b/public/cards/heron-svg/060.svg
index f9ea3ca..67ea190 100644
--- a/public/cards/heron-svg/060.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card60">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/061.svg b/public/cards/heron-svg/061.svg
index 7a4c9d0..4943655 100644
--- a/public/cards/heron-svg/061.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card61">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,8 +17,8 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/062.svg b/public/cards/heron-svg/062.svg
index 95ebf4d..ac449a7 100644
--- a/public/cards/heron-svg/062.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card62">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,19 +17,19 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez deux cartes.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d3">
+<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 id="d4">
@@ -52,7 +52,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/063.svg b/public/cards/heron-svg/063.svg
index 9944380..adc4726 100644
--- a/public/cards/heron-svg/063.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card63">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">cheaper_champions_passive</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/064.svg b/public/cards/heron-svg/064.svg
index e4c67c4..bd53f94 100644
--- a/public/cards/heron-svg/064.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card64">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">+ x None</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -45,7 +45,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/065.svg b/public/cards/heron-svg/065.svg
index 6d95586..8fd7f83 100644
--- a/public/cards/heron-svg/065.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card65">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">damage_all_champions</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -45,7 +45,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/066.svg b/public/cards/heron-svg/066.svg
index fff65da..85bc15f 100644
--- a/public/cards/heron-svg/066.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card66">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">restack_discarded_action</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/067.svg b/public/cards/heron-svg/067.svg
index 1880d46..d62dc1c 100644
--- a/public/cards/heron-svg/067.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card67">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,8 +17,8 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
@@ -40,7 +40,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/068.svg b/public/cards/heron-svg/068.svg
index 6bc902e..f02ce6d 100644
--- a/public/cards/heron-svg/068.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card68">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,8 +17,8 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
@@ -30,8 +30,8 @@
 <g id="d3">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d4">
-<circle cx="0" cy="0" r="18.333333333333332" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d4">
+<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>
 <g id="d5">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/069.svg b/public/cards/heron-svg/069.svg
index 0a8c82b..caae524 100644
--- a/public/cards/heron-svg/069.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card69">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -47,7 +47,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/070.svg b/public/cards/heron-svg/070.svg
index 9e00a52..df6aa0b 100644
--- a/public/cards/heron-svg/070.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card70">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <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 id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -38,7 +38,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/071.svg b/public/cards/heron-svg/071.svg
index 0ab3404..2b477c3 100644
--- a/public/cards/heron-svg/071.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card71">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">Assomez le champion ciblé.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -38,7 +38,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/072.svg b/public/cards/heron-svg/072.svg
index 8e572cd..2124a24 100644
--- a/public/cards/heron-svg/072.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card72">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="yellow" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica">Piochez une carte.</text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -56,7 +56,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="rgb(206, 182, 167)" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/073.svg b/public/cards/heron-svg/073.svg
index 5baa2f0..c1e92b4 100644
--- a/public/cards/heron-svg/073.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card73">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -17,8 +17,8 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/074.svg b/public/cards/heron-svg/074.svg
index f5d8a6a..189fe85 100644
--- a/public/cards/heron-svg/074.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card74">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="blue" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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>
 <g id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -54,7 +54,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightblue" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/075.svg b/public/cards/heron-svg/075.svg
index 9827e03..b15e336 100644
--- a/public/cards/heron-svg/075.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card75">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="green" stop-opacity="1" />
@@ -17,15 +17,15 @@
 <circle cx="1" cy="1" r="20" fill="black" filter="url(#drop-shadow)" />
 <circle cx="0" cy="0" r="20" fill="url(#grad2)" />
 </g>
-<g id="d0">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="console.warn('unknown interaction')" id="d0">
+<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 id="d1">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d2">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d2">
+<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 id="d3">
@@ -36,8 +36,8 @@
 <g id="d4">
 <text x="0" y="-0.0" font-size="11" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d5">
-<circle cx="0" cy="0" r="18.333333333333332" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d5">
+<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>
 <g id="d6">
@@ -59,7 +59,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgreen" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/076.svg b/public/cards/heron-svg/076.svg
index 47303ee..2f4adc2 100644
--- a/public/cards/heron-svg/076.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card76">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,16 +20,16 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d2">
+<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 id="d3">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '2' } ) );" id="d3">
+<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>
 <g id="d4">
@@ -50,7 +50,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/077.svg b/public/cards/heron-svg/077.svg
index b1c20e9..90da433 100644
--- a/public/cards/heron-svg/077.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card77">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/078.svg b/public/cards/heron-svg/078.svg
index 8f648af..203db48 100644
--- a/public/cards/heron-svg/078.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card78">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">cheaper_action</text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/079.svg b/public/cards/heron-svg/079.svg
index 3f06a24..9f9b12f 100644
--- a/public/cards/heron-svg/079.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card79">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/080.svg b/public/cards/heron-svg/080.svg
index bd51c2a..c0e1f0d 100644
--- a/public/cards/heron-svg/080.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card80">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <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 id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/081.svg b/public/cards/heron-svg/081.svg
index 7271b31..d5c4a57 100644
--- a/public/cards/heron-svg/081.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card81">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/082.svg b/public/cards/heron-svg/082.svg
index e5ec5eb..f7da658 100644
--- a/public/cards/heron-svg/082.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card82">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">cheaper_champion</text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/083.svg b/public/cards/heron-svg/083.svg
index 5f57abc..8d1cbc6 100644
--- a/public/cards/heron-svg/083.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card83">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/084.svg b/public/cards/heron-svg/084.svg
index 463a765..925debf 100644
--- a/public/cards/heron-svg/084.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card84">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/085.svg b/public/cards/heron-svg/085.svg
index 7ce5217..a5094de 100644
--- a/public/cards/heron-svg/085.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card85">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -28,7 +28,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/086.svg b/public/cards/heron-svg/086.svg
index 8994181..cf7848a 100644
--- a/public/cards/heron-svg/086.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card86">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/087.svg b/public/cards/heron-svg/087.svg
index 0927af6..8ff3b04 100644
--- a/public/cards/heron-svg/087.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card87">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/088.svg b/public/cards/heron-svg/088.svg
index 9badf25..c1cd909 100644
--- a/public/cards/heron-svg/088.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card88">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -42,7 +42,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/089.svg b/public/cards/heron-svg/089.svg
index 7210e99..a7c711e 100644
--- a/public/cards/heron-svg/089.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card89">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/090.svg b/public/cards/heron-svg/090.svg
index 7bc12a6..5ea8791 100644
--- a/public/cards/heron-svg/090.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card90">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,12 +20,12 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d2">
+<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 id="d3">
@@ -39,7 +39,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/091.svg b/public/cards/heron-svg/091.svg
index 96967ef..8baa8f0 100644
--- a/public/cards/heron-svg/091.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card91">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="red" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <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 id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightcoral" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/092.svg b/public/cards/heron-svg/092.svg
index ee01d51..edfdc7e 100644
--- a/public/cards/heron-svg/092.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card92">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="13.333333333333334" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -43,7 +43,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/093.svg b/public/cards/heron-svg/093.svg
index 0ae5fed..54f40a3 100644
--- a/public/cards/heron-svg/093.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card93">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/094.svg b/public/cards/heron-svg/094.svg
index 267a063..b22e720 100644
--- a/public/cards/heron-svg/094.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card94">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">buy_gem_for_free</text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/095.svg b/public/cards/heron-svg/095.svg
index 6e273c6..03d8ca6 100644
--- a/public/cards/heron-svg/095.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card95">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -29,7 +29,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/096.svg b/public/cards/heron-svg/096.svg
index 74e90de..fa803e1 100644
--- a/public/cards/heron-svg/096.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card96">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,12 +20,12 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
-<circle cx="0" cy="0" r="20" fill="green" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '1' } ) );" id="d2">
+<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 id="d3">
@@ -39,7 +39,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/097.svg b/public/cards/heron-svg/097.svg
index 725a44f..d66765e 100644
--- a/public/cards/heron-svg/097.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card97">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/098.svg b/public/cards/heron-svg/098.svg
index 0f057b5..b416d9c 100644
--- a/public/cards/heron-svg/098.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card98">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/099.svg b/public/cards/heron-svg/099.svg
index 0a9888f..35622b2 100644
--- a/public/cards/heron-svg/099.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card99">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -29,7 +29,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/100.svg b/public/cards/heron-svg/100.svg
index 58efb7a..4914755 100644
--- a/public/cards/heron-svg/100.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card100">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica"></text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="red" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/101.svg b/public/cards/heron-svg/101.svg
index 128cb31..e9f698d 100644
--- a/public/cards/heron-svg/101.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card101">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -29,7 +29,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">
diff --git a/public/cards/heron-svg/102.svg b/public/cards/heron-svg/102.svg
index 0d0961f..12f1a20 100644
--- a/public/cards/heron-svg/102.svg
+++ b/public/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">
+     width="298" height="417" viewBox="0 0 298 417" id="card102">
 <defs>
 <linearGradient x1="0" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox" id="grad1">
 <stop offset="0" stop-color="gray" stop-opacity="1" />
@@ -20,8 +20,8 @@
 <g id="d0">
 <text x="0" y="-0.0" font-size="14" text-anchor="middle" fill="black" font-family="Helvetica">pick_faction</text>
 </g>
-<g id="d1">
-<circle cx="0" cy="0" r="20" fill="yellow" x="0" y="0" onclick="console.log()" />
+<g class="svg_resource_icon" onclick="this.dispatchEvent(new CustomEvent( 'activate_effect', { bubbles: true, composed:true, detail: '0' } ) );" id="d1">
+<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 id="d2">
@@ -34,7 +34,7 @@
 </defs>
 <use xlink:href="#drop-shadow" />
 <g id="background">
-<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" />
+<rect x="0" y="0" width="298" height="417" rx="15" ry="18" fill="black" stroke="white" stroke-width="1" />
 <rect x="12" y="12" width="274" height="388" rx="0" ry="0" fill="lightgrey" />
 </g>
 <g id="title">