add chaining effect

src/service/duel/chaining.ts

 import { ygopro } from "@/api";
-import { fetchEsHintMeta } from "@/stores";
+import { fetchEsHintMeta, matStore } from "@/stores";
 export default (chaining: ygopro.StocGameMessage.MsgChaining) => {
   fetchEsHintMeta({
     originMsg: "「[?]」被发动时",
     cardID: chaining.code,
   });
+
+  matStore.setChaining(chaining.location, chaining.code, true);
+
+  setTimeout(() => {
+    matStore.setChaining(chaining.location, chaining.code, false);
+    // TODO: set chained
+  }, 500);
 };

src/stores/matStore/store.ts

@@ -258,6 +258,20 @@ export const matStore: MatState = proxy<MatState>({
   // methods
   in: getZone,
   isMe,
+  setChaining(location, code, isChaining) {
+    const target = this.in(location.location).of(location.controler)[
+      location.sequence
+    ];
+    target.chaining = isChaining;
+    if (target.occupant) {
+      target.occupant.id = code;
+    }
+    if (target.location.zone == ygopro.CardZone.HAND) {
+      target.location.position = isChaining
+        ? ygopro.CardPosition.FACEUP_ATTACK
+        : ygopro.CardPosition.FACEDOWN_ATTACK;
+    }
+  },
 });
 
 // @ts-ignore 挂到全局，便于调试

src/stores/matStore/types.ts

@@ -99,6 +99,14 @@ export interface MatState {
   in: (zone: ygopro.CardZone) => BothSide<DuelFieldState>;
   /**  根据自己的先后手判断是否是自己 */
   isMe: (player: number) => boolean;
+  // 添加连锁中状态
+  // - 当是手牌以外的卡时，修改code并设置chaining字段；
+  // - 当是手牌中的卡时，修改code，设置chaining字段，并修改position，参数`isChaining`为true时修改成`FaceUpAttack`，为false时修改成`FaceDownAttack`
+  setChaining: (
+    location: ygopro.CardLocation,
+    code: number,
+    isChaining: boolean
+  ) => void;
 }
 
 export interface InitInfo {

src/ui/Duel/PlayMat/Card.tsx

@@ -13,7 +13,6 @@ const ASSETS_BASE =
     : import.meta.env.BASE_URL + NeosConfig.assetsPath;
 
 const FOCUS_SCALE = 2.5;
-const CHAINING_SCALE = 1.5;
 const FOCUS_HIGHT = 100;
 
 export const Card: React.FC<{
@@ -50,7 +49,7 @@ export const Card: React.FC<{
   <div
     className={classnames("card", {
       "card-defense": defense,
-      fly: chaining,
+      fly: chaining && !focus,
     })}
     style={
       {
@@ -62,7 +61,7 @@ export const Card: React.FC<{
         "--vertical": vertical ? 1 : 0,
         "--trans-time": `${transTime}s`,
         "--highlight-on": highlight ? 1 : 0,
-        "--scale-focus": focus ? FOCUS_SCALE : chaining ? CHAINING_SCALE : 1,
+        "--scale-focus": focus ? FOCUS_SCALE : 1,
         "--card-img": facedown
           ? `url(${ASSETS_BASE + "/card_back.jpg"})`
           : `url(${NeosConfig.cardImgUrl + "/" + code + ".jpg"})`,