Merge branch 'optimize/animation' into 'main'

Optimize/animation

See merge request !224

src/service/duel/chaining.ts

@@ -30,9 +30,9 @@ export default async (chaining: ygopro.StocGameMessage.MsgChaining) => {
     await eventbus.call(Task.Focus, target.uuid);
     console.color("blue")(`${target.meta.text.name} chaining`);
 
-    // 临时办法，这里延迟500ms
+    // 临时办法，这里延迟800ms
     // 长期：需要实现动画序列，一个动画完成后才执行下一个动画
-    await sleep(1000);
+    await sleep(800);
   } else {
     console.warn(`<Chaining>target from ${location} is null`);
   }

src/service/duel/gameMsg.ts

@@ -144,7 +144,7 @@ async function _handleGameMsg(pb: ygopro.YgoStocMsg) {
       break;
     }
     case "shuffle_hand": {
-      onMsgShuffleHand(msg.shuffle_hand);
+      await onMsgShuffleHand(msg.shuffle_hand);
 
       break;
     }

src/service/duel/shuffleHand.ts

 import { ygopro } from "@/api";
+import { eventbus, Task } from "@/infra";
 import { cardStore } from "@/stores";
 
 type MsgShuffleHand = ygopro.StocGameMessage.MsgShuffleHand;
 
-export default (shuffleHand: MsgShuffleHand) => {
+export default async (shuffleHand: MsgShuffleHand) => {
   const { hands: codes, player: controller } = shuffleHand;
 
   // 本质上是要将手卡的sequence变成和codes一样的顺序
@@ -13,13 +14,16 @@ export default (shuffleHand: MsgShuffleHand) => {
     hash.get(code)?.push(sequence);
   });
 
-  hands.forEach((hand) => {
+  for (const hand of hands) {
     const sequences = hash.get(hand.code);
     if (sequences !== undefined) {
       const sequence = sequences.pop();
       if (sequence !== undefined) {
         hand.location.sequence = sequence;
         hash.set(hand.code, sequences);
+
+        // 触发动画
+        await eventbus.call(Task.Move, hand.uuid);
       } else {
         console.warn(
           `<ShuffleHand>sequence poped is none, controller=${controller}, code=${hand.code}, sequence=${sequence}`
@@ -32,5 +36,5 @@ export default (shuffleHand: MsgShuffleHand) => {
         )}, codes=${codes}`
       );
     }
-  });
+  }
 };

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

@@ -64,6 +64,7 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
     }
   };
 
+  // 这里后期应该去掉？
   useEffect(() => {
     move(state.location.zone);
   }, []);
@@ -108,9 +109,10 @@ export const Card: FC<{ idx: number }> = React.memo(({ idx }) => {
   );
   // <<< 动画 <<<
 
+  const idleInteractivities = snap.idleInteractivities;
   useEffect(() => {
-    setHighlight(!!snap.idleInteractivities.length);
-  }, [snap.idleInteractivities]);
+    setHighlight(!!idleInteractivities.length);
+  }, [idleInteractivities]);
 
   return (
     <animated.div

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

+import { config } from "@react-spring/web";
+
 import { ygopro } from "@/api";
 import { type CardType, matStore } from "@/stores";
 
@@ -19,7 +21,7 @@ export const focus = async (props: { card: CardType; api: SpringApi }) => {
     });
     await asyncStart(api)({ y: current.y, ry: current.ry, rz: current.rz });
   } else {
-    await asyncStart(api)({ z: 200 });
-    await asyncStart(api)({ z: current.z });
+    await asyncStart(api)({ z: 200, config: config.gentle });
+    await asyncStart(api)({ z: current.z, config: config.default });
   }
 };