feat : champion visualization, first draft

2024-08-03 20:03:11 +02:00
parent 11dd342b8e
commit b00fffd314
3 changed files with 162 additions and 36 deletions
@@ -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>