add BgChain component

src/stores/placeStore.ts

@@ -20,7 +20,8 @@ const { MZONE, SZONE, HAND, GRAVE, REMOVED, EXTRA } = ygopro.CardZone;
 export interface BlockState {
   interactivity?: PlaceInteractivity; // 互动性
   disabled: boolean; // 是否被禁用
-  chainIndex: number[]; // 当前位置上的连锁序号。YGOPRO和MASTER DUEL的连锁都是和位置绑定的，因此在`PlaceStore`中记录连锁状态。
+  chainIndex: number[] /* 当前位置上的连锁序号。
+  YGOPRO和MASTER DUEL的连锁都是和位置绑定的，因此在`PlaceStore`中记录连锁状态。*/;
 }
 
 const genPLaces = (n: number): BlockState[] =>

src/ui/Duel/PlayMat/Bg/Chain/index.tsx

+export const BgChain: React.FC<{ chains: readonly number[] }> = ({
+  chains,
+}) => <div></div>;

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

@@ -10,19 +10,23 @@ import {
   placeStore,
 } from "@/stores";
 
+import { BgChain } from "./Chain";
 import styles from "./index.module.scss";
 
+// TODO: 展示连锁图标
 const BgBlock: React.FC<
   React.HTMLProps<HTMLDivElement> & {
     disabled?: boolean;
     highlight?: boolean;
     glowing?: boolean;
+    chains?: readonly number[];
   }
 > = ({
   disabled = false,
   highlight = false,
   glowing = false,
   className,
+  chains,
   ...rest
 }) => (
   <div
@@ -34,6 +38,7 @@ const BgBlock: React.FC<
   >
     {<DecoTriangles />}
     {<DisabledCross disabled={disabled} />}
+    {<BgChain chains={chains ?? []} />}
   </div>
 );
 
@@ -53,6 +58,7 @@ const BgExtraRow: React.FC<{
           }}
           disabled={meSnap[i].disabled || opSnap[i].disabled}
           highlight={!!meSnap[i].interactivity || !!opSnap[i].interactivity}
+          chains={meSnap[i].chainIndex}
         />
       ))}
     </div>
@@ -72,11 +78,13 @@ const BgRow: React.FC<{
         onClick={() => onBlockClick(snap[i].interactivity)}
         disabled={snap[i].disabled}
         highlight={!!snap[i].interactivity}
+        chains={snap[i].chainIndex}
       />
     ))}
   </div>
 );
 
+// TODO: chain
 const BgOtherBlocks: React.FC<{ op?: boolean }> = ({ op }) => {
   useSnapshot(cardStore);
   const meController = isMe(0) ? 0 : 1;