feat: animation

src/service/duel/move.ts

@@ -160,11 +160,17 @@ export default async (move: MsgMove) => {
   await eventbus.call(Task.Move, target.uuid);
   // 如果from或者to是手卡，那么需要刷新除了这张卡之外，这个玩家的所有手卡
   if ([from.zone, to.zone].includes(HAND)) {
-    for (const card of cardStore.at(HAND, target.location.controller)) {
-      if (card.uuid !== target.uuid) {
-        await eventbus.call(Task.Move, card.uuid);
-      }
-    }
+    // for (const card of cardStore.at(HAND, target.location.controller)) {
+    //   if (card.uuid !== target.uuid) {
+    //     await eventbus.call(Task.Move, card.uuid);
+    //   }
+    // }
+    Promise.all(
+      cardStore
+        .at(HAND, target.location.controller)
+        .filter((c) => c.uuid !== target.uuid)
+        .map(async (c) => await eventbus.call(Task.Move, c.uuid))
+    );
   }
 
   // 超量素材位置跟随超量怪兽移动

src/ui/Duel/PlayMat/Card/index.scss

@@ -13,7 +13,7 @@ section#mat {
       top: 2%;
       height: 96%;
       width: 96%;
-      transform: translateZ(calc(var(--z) * 1px + 0.1px))
+      transform: translateZ(calc((var(--z) + var(--sub-z)) * 1px + 0.1px))
         rotateY(calc(var(--ry) * 1deg));
       transition: 0.2s scale;
       cursor: pointer;

src/ui/Duel/PlayMat/Card/index.tsx

@@ -55,6 +55,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
         focusScale: 1,
         focusDisplay: "none",
         focusOpacity: 1,
+        subZ: 0,
       } satisfies SpringApiProps)
   );
 
@@ -299,6 +300,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
               `translate(${x}px, ${y}px) rotateX(${rx}deg) rotateZ(${rz}deg)`
           ),
           "--z": styles.z,
+          "--sub-z": styles.subZ.to([0, 50, 100], [0, 200, 0]), // 中间高，两边低
           "--ry": styles.ry,
           height: styles.height,
           zIndex: styles.zIndex,

src/ui/Duel/PlayMat/Card/springs/moveToDeck.ts

@@ -3,6 +3,7 @@ import { type CardType, isMe } from "@/stores";
 
 import { matConfig } from "../../utils";
 import { SpringApi } from "./types";
+import { asyncStart } from "./utils";
 
 const {
   BLOCK_WIDTH,
@@ -41,7 +42,8 @@ export const moveToDeck = async (props: { card: CardType; api: SpringApi }) => {
   let rz = zone === EXTRA ? DECK_ROTATE_Z.value : -DECK_ROTATE_Z.value;
   rz += isMe(controller) ? 0 : 180;
   const z = sequence;
-  api.start({
+
+  await asyncStart(api)({
     x,
     y,
     z,

src/ui/Duel/PlayMat/Card/springs/moveToHand.ts

@@ -3,6 +3,7 @@ import { cardStore, type CardType, isMe } from "@/stores";
 
 import { matConfig } from "../../utils";
 import { SpringApi } from "./types";
+import { asyncStart } from "./utils";
 
 const {
   BLOCK_HEIGHT_M,
@@ -44,14 +45,15 @@ export const moveToHand = async (props: { card: CardType; api: SpringApi }) => {
   const negativeX = Math.sin(angle) * r;
   const negativeY = Math.cos(angle) * r + HAND_CARD_HEIGHT.value / 2;
   const x = hand_circle_center_x + negativeX * (isMe(controller) ? 1 : -1);
-  const y = hand_circle_center_y - negativeY + 140; // 常量 是手动调的 这里肯定有问题 有空来修
+  const y = hand_circle_center_y - negativeY + 140; // FIXME: 常量 是手动调的 这里肯定有问题 有空来修
 
   const _rz = (angle * 180) / Math.PI;
 
-  api.start({
+  // FIXME: 这里加上await会导致有些手卡会卡住不动，为什么呢？
+  asyncStart(api)({
     x: isMe(controller) ? x : -x,
     y: isMe(controller) ? y : -y,
-    z: 0,
+    z: 15,
     rz: isMe(controller) ? _rz : 180 - _rz,
     ry: isMe(controller) ? 0 : 180,
     height: HAND_CARD_HEIGHT.value,

src/ui/Duel/PlayMat/Card/springs/moveToOutside.ts

@@ -3,6 +3,7 @@ import { type CardType, isMe } from "@/stores";
 
 import { matConfig } from "../../utils";
 import { SpringApi } from "./types";
+import { asyncStart } from "./utils";
 
 const { BLOCK_WIDTH, BLOCK_HEIGHT_M, BLOCK_HEIGHT_S, COL_GAP, ROW_GAP } =
   matConfig;
@@ -15,7 +16,7 @@ export const moveToOutside = async (props: {
 }) => {
   const { card, api } = props;
   // report
-  const { zone, controller, position } = card.location;
+  const { zone, controller, position, sequence } = card.location;
 
   let x = (BLOCK_WIDTH.value + COL_GAP.value) * 3,
     y = zone === GRAVE ? BLOCK_HEIGHT_M.value + ROW_GAP.value : 0;
@@ -23,12 +24,15 @@ export const moveToOutside = async (props: {
     x = -x;
     y = -y;
   }
-  api.start({
+  await asyncStart(api)({
     x,
     y,
     z: 0,
     height: BLOCK_HEIGHT_S.value,
     rz: isMe(controller) ? 0 : 180,
     ry: [ygopro.CardPosition.FACEDOWN].includes(position) ? 180 : 0,
+    subZ: 100,
+    zIndex: sequence,
   });
+  api.set({ subZ: 0 });
 };

src/ui/Duel/PlayMat/Card/springs/types.ts

@@ -14,6 +14,8 @@ export interface SpringApiProps {
   focusDisplay: string;
   focusOpacity: number;
   // <<< focus
+
+  subZ: number; // 0 -> 100，这是为了让卡片移动过程中，稍微上浮一些，避免一些奇怪的遮挡问题
 }
 
 export type SpringApi = SpringRef<SpringApiProps>;