optimize hand effect

src/service/duel/draw.ts

@@ -15,5 +15,13 @@ export default (draw: ygopro.StocGameMessage.MsgDraw) => {
     return { uuid: pop.uuid, id: hand };
   });
 
-  matStore.hands.of(draw.player).add(data, ygopro.CardPosition.FACEUP_ATTACK);
+  matStore.hands
+    .of(draw.player)
+    .add(data, ygopro.CardPosition.FACEUP_ATTACK, true);
+
+  setTimeout(() => {
+    for (const hand of matStore.hands.of(draw.player)) {
+      hand.focus = false;
+    }
+  }, 500);
 };

src/service/duel/move.ts

@@ -81,7 +81,7 @@ export default (move: MsgMove) => {
         () =>
           (matStore.in(to.location).of(to.controler)[to.sequence].focus =
             false),
-        500 // use config
+        500 // TODO: use config
       );
       break;
     }
@@ -101,7 +101,20 @@ export default (move: MsgMove) => {
         matStore
           .in(to.location)
           .of(to.controler)
-          .insert(uuid, code, to.sequence, ygopro.CardPosition.FACEUP_ATTACK);
+          .insert(
+            uuid,
+            code,
+            to.sequence,
+            ygopro.CardPosition.FACEUP_ATTACK,
+            true
+          );
+
+        setTimeout(
+          () =>
+            (matStore.in(to.location).of(to.controler)[to.sequence].focus =
+              false),
+          200
+        );
       }
       break;
     }

src/service/duel/shuffleHand.ts

 import { ygopro } from "@/api";
 import { matStore } from "@/stores";
-import { zip } from "@/ui/Duel/utils";
 
 type MsgShuffleHand = ygopro.StocGameMessage.MsgShuffleHand;
 
 export default (shuffleHand: MsgShuffleHand) => {
   const { hands: codes, player: controller } = shuffleHand;
 
-  const uuids = matStore.hands.of(controller).map((hand) => hand.uuid);
-  const data = zip(uuids, codes).map(([uuid, id]) => {
-    return { uuid, id };
-  });
+  const indexMap = new Map(codes.map((code, idx) => [code, idx]));
+
+  matStore.hands.of(controller).sort((a, b) => {
+    const indexA = indexMap.get(a.occupant?.id ?? 0) ?? 0;
+    const indexB = indexMap.get(b.occupant?.id ?? 0) ?? 0;
 
-  matStore.hands.of(controller).length = 0;
-  matStore.hands.of(controller).add(data);
+    return indexA - indexB;
+  });
 };

src/stores/matStore/types.ts

@@ -120,7 +120,7 @@ export interface CardState {
     zone: ygopro.CardZone; // 怪兽区/魔法陷阱区/手牌/卡组/墓地/除外区
     position?: ygopro.CardPosition; // 卡片的姿势：攻击还是守备
   }; // 位置信息，叫location的原因是为了和ygo对齐
-  focus?: boolean;
+  focus?: boolean; // 用于实现动画效果，当这个字段为true时，该张卡片会被放大并在屏幕中央展示
   idleInteractivities: Interactivity<number>[]; // IDLE状态下的互动信息
   placeInteractivity?: Interactivity<{
     controler: number;