Feat: effect used style

components/CardComponent.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { Card } from "~/netcode/interfaces";
+import { cards } from "~/services/loadCards";
+
+export default {
+  props: ["card", "used_effects_indexes"],
+  data() {
+    const _card = this.card as Card;
+    return { cards };
+  },
+  beforeCreate() {
+    (this as any).component = () => cards[this.card.cardId];
+  },
+};
+</script>
+
+<template>
+  <Component
+    :is="cards[card.cardId]"
+    :used_effects_indexes="used_effects_indexes"
+    v-if="card"
+  />
+</template>

components/CardPreview.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import type { Card } from "~/netcode/interfaces";
+
 export interface Props {
-  uuid?: string;
+  card?: Card;
   card_id?: number;
   locked?: boolean;
   wrapped?: boolean;
   tilted?: boolean;
   interactible?: boolean;
   noEffects?: boolean;
+  used_effects_indexes?: number[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -59,7 +62,9 @@ function rightClickUp(e: MouseEvent) {
 }
 
 function activateEffect(e: CustomEvent) {
-  console.log(e.detail, props.uuid);
+  if (props.card) {
+    console.log(e.detail, props.card?._id);
+  }
 }
 
 onMounted(() => {
@@ -92,10 +97,10 @@ onMounted(() => {
       <slot></slot>
     </div>
     <template v-if="props.card_id">
-      <svg
+      <!-- <svg
         width="180"
         height="250"
-        v-if="settingsStore.cardStyle == CardStyles.SVG"
+        
         viewBox="0 0 298 417"
       >
         <use
@@ -108,7 +113,12 @@ onMounted(() => {
           "
           @activate_effect="activateEffect($event)"
         ></use>
-      </svg>
+      </svg> -->
+      <CardComponent
+        v-if="settingsStore.cardStyle == CardStyles.SVG && props.card"
+        :card="props.card"
+        :used_effects_indexes="used_effects_indexes"
+      ></CardComponent>
       <img
         :class="`card_image`"
         v-else
@@ -119,6 +129,7 @@ onMounted(() => {
         "
         draggable="false"
       />
+      <div></div>
     </template>
 
     <img
@@ -133,6 +144,7 @@ onMounted(() => {
 <style scoped>
 .card {
   --max-height: 250px;
+  --max-width: 179px;
   --margin-bottom: calc(var(--max-height) * 0.05);
   position: relative;
   display: flex;
@@ -142,6 +154,7 @@ onMounted(() => {
   transition: all 0.075s cubic-bezier(1, 1.81, 0.59, 1.42);
   pointer-events: all;
   max-height: var(--max-height);
+  max-width: var(--max-width);
 }
 
 .card.active {
@@ -230,7 +243,7 @@ onMounted(() => {
 .svg_resource_icon {
   cursor: pointer;
   animation: gelatine 0.3s normal;
-  transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
 .svg_resource_icon:active {
@@ -240,4 +253,9 @@ onMounted(() => {
 .svg_resource_icon:hover {
   transform: scale(130%);
 }
+.used {
+  opacity: 0.2;
+  filter: grayscale(0.6);
+  pointer-events: none;
+}
 </style>

components/CardsGrouped.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { delay } from "~/netcode/events";
-import type { Container, PlayingTurn } from "~/netcode/interfaces";
+import type { Card, Container, PlayingTurn } from "~/netcode/interfaces";
 
 export interface Props {
   container: Container;
@@ -25,7 +25,7 @@ const cards = computed(() => {
     return props.container.cards.map((_v, i) => ({
       _id: i,
       cardId: undefined,
-    }));
+    })) as unknown as Card[];
   }
   return props.container.cards;
 });
@@ -101,10 +101,16 @@ onUnmounted(() => {
         :card_id="c.cardId"
         :wrapped="wrapped"
         :key="c._id"
-        :uuid="c._id.toString()"
+        :card="c"
         :locked="
           !playingTurn || playingTurn?.cardsLocked.includes(c._id.toString())
         "
+        :used_effects_indexes="c.effects?.reduce( (prev,e, i)=>{
+          if(playingTurn?.effectsUsed.includes(e._id)){
+            prev.push(i)
+          }
+          return prev
+        },[] as number[])"
         :noEffects="noEffects"
       >
       </CardPreview>
@@ -164,3 +170,20 @@ onUnmounted(() => {
   max-height: 250px;
 }
 </style>
+
+<style>
+use * use[data-effect-id="0"] {
+  opacity: 0;
+}
+
+.cards_container .card #background rect:first-child {
+  stroke-width: 0;
+}
+.cards_container .card.wrapped #background rect:first-child {
+  stroke-width: 1px;
+}
+
+.cards_container .card.card.wrapped:nth-child(5n) #background rect:first-child {
+  stroke-width: 2px;
+}
+</style>