Feat : add click event

output/heron/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">