feat : champion visualization, first draft

components/game/card/ChampionSmall.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { Card } from "~/netcode/interfaces";
+
+export interface Props {
+  card: Card;
+}
+
+const props = defineProps<Props>();
+
+const active = ref(false);
+</script>
+
+<template>
+  <div class="champion_small">
+    <svg
+      height="50"
+      width="50"
+      viewBox="-25 -25 50 50"
+      class="champion_small_svg"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <clipPath id="guard">
+          <path
+            d="M 25.03887,48.82869 1.1094102,30.52586 10.249651,0.91124843 H 39.828094 L 48.968331,30.52586 Z"
+            fill="black"
+            stroke="lightgrey"
+            stroke-width="2"
+          ></path>
+        </clipPath>
+        <clipPath id="none">
+          <path
+            d="M 0,246.85146 1.1094102,150 0,-11.33365 187.4845,-14.630353 185.82502,247.01727 Z"
+            fill="black"
+            stroke="lightgrey"
+            stroke-width="2"
+          ></path>
+        </clipPath>
+      </defs>
+
+      <foreignObject
+        width="100%"
+        height="100%"
+        class="champion_small_foreignObject"
+        :class="{ active }"
+      >
+        <div class="champion_small_inside">
+          <GameCardAtom
+            @mousedown.right="active = true"
+            @mouseup.right="active = false"
+            @mouseleave="active = false"
+            width="75"
+            height="75"
+            :card-id="card.cardId"
+          ></GameCardAtom>
+        </div>
+      </foreignObject>
+    </svg>
+  </div>
+</template>
+
+<style>
+.champion_small {
+  z-index: 10;
+  width: 100%;
+}
+
+.champion_small_svg {
+  transform: scale(1500%);
+  pointer-events: none;
+}
+
+.champion_small_foreignObject {
+  clip-path: polygon(
+    58% 62%,
+    67% 56%,
+    59% 34%,
+    40% 34%,
+    31% 55%,
+    41% 62%,
+    49% 67.77%
+  );
+  transform: scale(30%) translate(-50%, -50%);
+  transition: 0.15s all var(--animation-curve);
+  cursor: pointer;
+}
+
+.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%);
+  z-index: 11;
+}
+
+.champion_small_foreignObject .champion_small_inside {
+  pointer-events: all;
+  transform: translate(0, -20%) scale(50%);
+  display: flex;
+  position: relative;
+  z-index: 10;
+}
+
+.champion_small_foreignObject.active .champion_small_inside {
+  z-index: 11;
+}
+</style>

components/game/overlay/Discard.client.vue

@@ -147,7 +147,7 @@ span {
 
 .discard-menu > .cards_container {
   pointer-events: all;
-  overflow: scroll;
+  overflow: auto;
   padding: 30px;
   max-width: 100%;
   transition: 0.3s all var(--animation-curve);

components/game/player/ListElement.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { damagePlayer, makeDiscard } from "~/netcode";
-import { CardEffects, type Game, type Player } from "~/netcode/interfaces";
+import {
+  CardEffects,
+  CardType,
+  type Game,
+  type Player,
+} from "~/netcode/interfaces";
 
 const emit = defineEmits(["click"]);
 
@@ -36,17 +41,18 @@ function damage() {
 </script>
 
 <template>
-  <div
-    class="player_list_element"
-    @click="$emit('click')"
-    :class="{
-      self,
-      focused,
-      isSelfTurn,
-    }"
-  >
-    <div id="player_banner" class="small">
-      <!-- <div
+  <div>
+    <div
+      class="player_list_element"
+      @click="$emit('click')"
+      :class="{
+        self,
+        focused,
+        isSelfTurn,
+      }"
+    >
+      <div id="player_banner" class="small">
+        <!-- <div
         class="ready-bubble not-ready"
         v-if="!props.player.ready && !goStore.current_game?.started"
       >
@@ -58,35 +64,49 @@ function damage() {
       >
         Prêt!
       </div> -->
-      <div id="player_info">
-        <GamePlayerIcon :user="props.player.user"></GamePlayerIcon>
+        <div id="player_info">
+          <GamePlayerIcon :user="props.player.user"></GamePlayerIcon>
+        </div>
+        <div id="player_stats">
+          <!-- <template v-if="goStore.current_game?.started"> -->
+          <GamePlayerStats :game="props.game" :player="props.player">
+          </GamePlayerStats>
+          <!-- </template> -->
+        </div>
+        <template v-if="!self && isSelfTurn">
+          <button
+            v-if="
+              game.currentTurn.tokens.some(
+                (t) => t.effect == CardEffects.MAKE_DISCARD
+              )
+            "
+            @click.stop="makeDiscardClick"
+          >
+            Make Discard
+          </button>
+          <button @click.stop="damage" :disabled="game.currentTurn.damage == 0">
+            Damage
+          </button>
+        </template>
       </div>
-      <div id="player_stats">
-        <!-- <template v-if="goStore.current_game?.started"> -->
-        <GamePlayerStats :game="props.game" :player="props.player">
-        </GamePlayerStats>
-        <!-- </template> -->
-      </div>
-      <template v-if="!self && isSelfTurn">
-        <button
-          v-if="
-            game.currentTurn.tokens.some(
-              (t) => t.effect == CardEffects.MAKE_DISCARD
-            )
-          "
-          @click.stop="makeDiscardClick"
-        >
-          Make Discard
-        </button>
-        <button @click.stop="damage" :disabled="game.currentTurn.damage == 0">
-          Damage
-        </button>
-      </template>
+    </div>
+    <div class="champion_zone">
+      <GameCardChampionSmall
+        v-for="c in player.board.cards.filter(
+          (c) => c.cardType == CardType.CHAMPION
+        )"
+        :card="c"
+        :key="c._id"
+      ></GameCardChampionSmall>
     </div>
   </div>
 </template>
 
 <style scoped>
+.champion_zone {
+  display: flex;
+  flex-direction: row;
+}
 .player_list_element {
   border-radius: 10px;
   margin: 10px;