feat : token visuals draft

components/game/Token.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Effect } from "~/netcode/interfaces";
-
+import { tokens } from "~/services/loadCards";
+import effect_locales from "~/assets/locales/effects.json";
 type Props = {
   token: Effect;
 };
@@ -14,24 +15,57 @@ function onClick(e: MouseEvent) {
 </script>
 
 <template>
-  <div @click.stop="onClick" @mousedown.left.stop="" id="token">
-    {{ props.token.effect }}
+  <div @click.stop="onClick" @mousedown.left.stop="" class="token_container">
+    <Component
+      :is="tokens[props.token.effect]"
+      v-if="props.token.effect in tokens"
+    />
+    <span v-else>{{ props.token.effect }}</span>
+    <div class="token_description" v-if="props.token.effect in effect_locales">
+      <span
+        ><b>{{ effect_locales[props.token.effect].title }}</b></span
+      >
+      <span>{{ effect_locales[props.token.effect].description }}</span>
+    </div>
   </div>
 </template>
 
-<style scoped>
-#token {
-  width: 50px;
-  height: 50px;
-  background: white;
-  border: 1px solid white;
+<style>
+.token_container {
+  margin: 15px;
+  /* backdrop-filter: blur(60px); */
+  background: rgba(201, 212, 38, 1);
+  border: 5px solid black;
+  width: min-content;
   cursor: pointer;
-  box-sizing: border-box;
   transition: 0.2s all;
-  border-radius: 15px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  transition: 0.1s all var(--animation-curve);
+  position: relative;
+  z-index: 50;
 }
 
-#token:hover {
-  border: 1px solid red;
+.token_container:hover {
+  border: 5px solid red;
+  transform: scale(110%);
+}
+
+.token_description {
+  min-width: max-content;
+  min-height: 45px;
+  position: absolute;
+  right: -10px;
+  transform: translateX(100%);
+  display: none;
+  flex-direction: column;
+  background: rgb(168, 175, 74);
+  border: 5px solid red;
+  border-radius: 10px;
+}
+
+.token_container:hover .token_description {
+  display: flex;
 }
 </style>