fix : champion polygon

components/game/card/ChampionSmall.vue

@@ -56,14 +56,38 @@ 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
+        text-anchor="middle"
+        font-family="Helvetica"
+        font-weight="bold"
+        class="champion_small_defense"
+        font-size="1.5"
+        :class="{ active }"
+        x="2"
+        y="-.5"
+        :fill="card.guard ? 'white' : 'black'"
+      >
+        {{ card.defense }}
+      </text>
     </svg>
   </div>
 </template>
 
 <style>
 .champion_small {
-  z-index: 10;
+  z-index: 2;
   width: 100%;
+  margin-top: 10px;
 }
 
 .champion_small_svg {
@@ -75,8 +99,8 @@ const active = ref(false);
   clip-path: polygon(
     58% 62%,
     67% 56%,
-    59% 34%,
-    40% 34%,
+    59% 35.8%,
+    40% 35.8%,
     31% 55%,
     41% 62%,
     49% 67.77%
@@ -86,6 +110,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%);
@@ -97,7 +130,6 @@ const active = ref(false);
   transform: translate(0, -20%) scale(50%);
   display: flex;
   position: relative;
-  z-index: 10;
 }
 
 .champion_small_foreignObject.active .champion_small_inside {

components/game/player/Slot.vue

@@ -309,7 +309,6 @@ function discardCardClick(card: Card) {
     "turn_buttons";
   justify-items: center;
   transition: all 1s;
-  overflow-x: hidden;
 }
 
 #current_player_board {

netcode/interfaces.ts

@@ -107,4 +107,6 @@ export interface Card extends GameObject {
   cardId: number;
   cardType: CardType;
   effects: Effect[];
+  defense?: number;
+  guard?: boolean;
 }

pages/game.vue

@@ -489,7 +489,7 @@ footer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  overflow-x: hidden;
+  overflow-x: clip;
   /* background: url('/img/bg-darkgrass.png'); */
 }