Feat : add fast animations option, move netcode handlers inside dict

components/CardPreview.vue

@@ -218,26 +218,16 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    ref="card"
-    class="card"
-    :class="{
-      dragging: dragStatus.dragging,
-      active: childCount > 0,
-      wrapped,
-      unlocked: !props.locked,
-      zoom: isZooming,
-      no_effects: noEffects || !props.locked,
-      discardable,
-    }"
-    @contextmenu.prevent="false"
-    @mousedown.right="rightClickDown"
-    @mouseup.right="rightClickUp"
-    @mousedown.left="leftClickDown"
-    @mouseup.left="leftClickUp"
-    @mouseenter="mouseenter"
-    @mouseleave="mouseleave"
-  >
+  <div ref="card" class="card" :class="{
+    dragging: dragStatus.dragging,
+    active: childCount > 0,
+    wrapped,
+    unlocked: !props.locked,
+    zoom: isZooming,
+    no_effects: noEffects || !props.locked,
+    discardable,
+  }" @contextmenu.prevent="false" @mousedown.right="rightClickDown" @mouseup.right="rightClickUp"
+    @mousedown.left="leftClickDown" @mouseup.left="leftClickUp" @mouseenter="mouseenter" @mouseleave="mouseleave">
     <template v-if="props.card_id">
       <!-- <svg
         width="180"
@@ -256,43 +246,29 @@ onUnmounted(() => {
           @activate_effect="activateEffect($event)"
         ></use>
       </svg> -->
-      <CardComponent
-        v-if="settingsStore.cardStyle == CardStyles.SVG && props.card"
-        :card="props.card"
-        :used_effects_indexes="used_effects_indexes"
-        @effectClick="emit('effectClick', $event)"
-      ></CardComponent>
-      <img
-        :class="`card_image`"
-        v-else
-        :src="
-          `/cards/${settingsStore.cardStyle}/` +
-          props.card_id.toString().padStart(3, '0') +
-          extension
-        "
-        draggable="false"
-      />
-      <div id="overlay"><slot></slot></div>
+      <CardComponent v-if="settingsStore.cardStyle == CardStyles.SVG && props.card" :card="props.card"
+        :used_effects_indexes="used_effects_indexes" @effectClick="emit('effectClick', $event)"></CardComponent>
+      <img :class="`card_image`" v-else :src="`/cards/${settingsStore.cardStyle}/` +
+        props.card_id.toString().padStart(3, '0') +
+        extension
+        " draggable="false" />
+      <div id="overlay">
+        <slot></slot>
+      </div>
     </template>
 
-    <img
-      :class="`card_image`"
-      v-else
-      :src="'/cards/background.png'"
-      draggable="false"
-    />
+    <img :class="`card_image`" v-else :src="'/cards/background.png'" draggable="false" />
   </div>
 </template>
 
 <style scoped>
 .card.dragging {
-  transform: translateX(v-bind("translateX + 'px'"))
-    translateY(v-bind("translateY + 'px'"));
+  transform: translateX(v-bind("translateX + 'px'")) translateY(v-bind("translateY + 'px'"));
   cursor: grabbing;
   z-index: 999;
 }
 
-.card.dragging > svg {
+.card.dragging>svg {
   transform: scale(110%);
 }
 
@@ -312,8 +288,7 @@ onUnmounted(() => {
 }
 
 .card.wrapped .card_image {
-  filter: drop-shadow(0.5px 0.5px 0.5px gray)
-    drop-shadow(-0.5px -0.5px 0.5px gray);
+  filter: drop-shadow(0.5px 0.5px 0.5px gray) drop-shadow(-0.5px -0.5px 0.5px gray);
 }
 
 .card.zoom {
@@ -338,20 +313,20 @@ onUnmounted(() => {
 }
 </style>
 <style>
-.card.no_effects svg > * {
+.card.no_effects svg>* {
   pointer-events: none;
 }
 
-#contextMenuButtons > * {
+#contextMenuButtons>* {
   flex: 1;
   border-radius: 12px;
   min-height: 50px;
 }
 
 @keyframes gelatine {
+
   from,
-  to {
-  }
+  to {}
 
   25% {
     transform: scale(1, 1.5);
@@ -379,6 +354,7 @@ onUnmounted(() => {
 .svg_resource_icon:hover {
   transform: scale(130%);
 }
+
 .used {
   opacity: 0.2;
   filter: grayscale(0.6);
@@ -420,9 +396,7 @@ onUnmounted(() => {
   margin-top: 0px;
   margin-bottom: var(--margin-bottom);
   transform: translateY(calc(var(--margin-bottom) * -0.25));
-  filter: drop-shadow(
-    calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6)
-  );
+  filter: drop-shadow(calc(var(--margin-bottom) * 0.3) var(--margin-bottom) 1px rgba(0, 0, 0, 0.6));
   cursor: pointer;
 }