From e36c916e0bbc2ea3f60958acdbec5142333fdce1 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sun, 4 Aug 2024 10:25:39 +0200
Subject: [PATCH] feat : add health point to champion preview

---
 components/game/card/ChampionSmall.vue | 29 ++++++++++++++++++++++++++
 netcode/interfaces.ts                  |  2 ++
 2 files changed, 31 insertions(+)

diff --git a/components/game/card/ChampionSmall.vue b/components/game/card/ChampionSmall.vue
index d59bb09..9e92c88 100644
--- a/components/game/card/ChampionSmall.vue
+++ b/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%);
diff --git a/netcode/interfaces.ts b/netcode/interfaces.ts
index 654e47a..420975d 100644
--- a/netcode/interfaces.ts
+++ b/netcode/interfaces.ts
@@ -107,4 +107,6 @@ export interface Card extends GameObject {
   cardId: number;
   cardType: CardType;
   effects: Effect[];
+  defense?: number;
+  guard?: boolean;
 }