feat : add health point to champion preview

components/game/card/ChampionSmall.vue

@@ -56,6 +56,26 @@ const active = ref(false);
           ></GameCardAtom>
         </div>
       </foreignObject>
+      <circle
+        cx="2"
+        cy="-1"
+        r="1"
+        :fill="card.guard ? 'black' : 'lightgray'"
+        stroke="white"
+        stroke-width="0.2"
+        class="champion_small_defense"
+        :class="{ active }"
+      ></circle>
+      <text
+        class="champion_small_defense"
+        font-size="1.5"
+        :class="{ active }"
+        x="1.6"
+        y="-.5"
+        :fill="card.guard ? 'white' : 'black'"
+      >
+        {{ card.defense }}
+      </text>
     </svg>
   </div>
 </template>
@@ -86,6 +106,15 @@ const active = ref(false);
   cursor: pointer;
 }
 
+.champion_small_defense {
+  transition: 0.15s all var(--animation-curve);
+  pointer-events: none;
+}
+
+.champion_small_defense.active {
+  opacity: 0;
+}
+
 .champion_small_foreignObject.active {
   clip-path: polygon(100% 100%, 100% 50%, 100% 0, 0 0, 0 50%, 0 100%, 49% 100%);
   transform: translate(-50%, -50%);