add chaining in Cardstate

src/service/duel/reloadField.ts

@@ -51,6 +51,7 @@ function reloadDuelField(
       idleInteractivities: [],
       counters: {},
       focus: false,
+      chaining: false,
       reload: true,
     };
   });

src/service/duel/start.ts

@@ -40,6 +40,7 @@ export default (start: ygopro.StocGameMessage.MsgStart) => {
         zone: ygopro.CardZone.DECK,
       },
       focus: false,
+      chaining: false,
       counters: {},
       idleInteractivities: [],
     });
@@ -57,6 +58,7 @@ export default (start: ygopro.StocGameMessage.MsgStart) => {
         zone: ygopro.CardZone.DECK,
       },
       focus: false,
+      chaining: false,
       counters: {},
       idleInteractivities: [],
     });
@@ -75,6 +77,7 @@ export default (start: ygopro.StocGameMessage.MsgStart) => {
         zone: ygopro.CardZone.EXTRA,
       },
       focus: false,
+      chaining: false,
       counters: {},
       idleInteractivities: [],
     });

src/stores/matStore/store.ts

@@ -41,6 +41,7 @@ class CardArray extends Array<CardState> implements ArrayCardState {
         position == undefined ? ygopro.CardPosition.FACEUP_ATTACK : position,
     },
     focus: focus ?? false,
+    chaining: false,
     counters: {},
     idleInteractivities: [],
   });
@@ -161,6 +162,7 @@ const genBlock = (zone: ygopro.CardZone, n: number) =>
         zone,
       },
       focus: false,
+      chaining: false,
       idleInteractivities: [],
       counters: {},
     }));

src/stores/matStore/types.ts

@@ -121,6 +121,7 @@ export interface CardState {
     position?: ygopro.CardPosition; // 卡片的姿势：攻击还是守备
   }; // 位置信息，叫location的原因是为了和ygo对齐
   focus: boolean; // 用于实现动画效果，当这个字段为true时，该张卡片会被放大并在屏幕中央展示
+  chaining: boolean; // 是否在连锁中
   idleInteractivities: Interactivity<number>[]; // IDLE状态下的互动信息
   placeInteractivity?: Interactivity<{
     controler: number;

src/ui/Duel/PlayMat/Card.tsx

@@ -13,6 +13,7 @@ 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<{
@@ -25,8 +26,8 @@ export const Card: React.FC<{
   facedown?: boolean;
   vertical?: boolean;
   highlight?: boolean;
-  fly?: boolean;
   focus?: boolean;
+  chaining?: boolean;
   transTime?: number;
   onClick?: MouseEventHandler<{}>;
   style?: CSSProperties;
@@ -40,8 +41,8 @@ export const Card: React.FC<{
   opponent = false,
   vertical = false,
   highlight = false,
-  fly = false,
   focus = false,
+  chaining = false,
   transTime = 0.3,
   onClick,
   style = {},
@@ -49,7 +50,7 @@ export const Card: React.FC<{
   <div
     className={classnames("card", {
       "card-defense": defense,
-      fly,
+      fly: chaining,
     })}
     style={
       {
@@ -61,7 +62,7 @@ export const Card: React.FC<{
         "--vertical": vertical ? 1 : 0,
         "--trans-time": `${transTime}s`,
         "--highlight-on": highlight ? 1 : 0,
-        "--scale-focus": focus ? FOCUS_SCALE : 1,
+        "--scale-focus": focus ? FOCUS_SCALE : chaining ? CHAINING_SCALE : 1,
         "--card-img": facedown
           ? `url(${ASSETS_BASE + "/card_back.jpg"})`
           : `url(${NeosConfig.cardImgUrl + "/" + code + ".jpg"})`,

src/ui/Duel/PlayMat/Mat.tsx

@@ -104,6 +104,7 @@ export const Mat = () => {
               vertical={card.location.zone == YgoZone.HAND || card.focus}
               highlight={card.idleInteractivities.length > 0}
               focus={card.focus}
+              chaining={card.chaining}
               opponent={card.opponent}
               onClick={
                 card.location.zone == YgoZone.SZONE ||