update

src/ui/Duel/PlayMat/Bg/Chain/index.module.scss

@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 2;
 }
 
 .chain {
@@ -23,8 +24,10 @@
   .text {
     position: absolute;
     font-size: 2rem;
+    font-weight: bold;
     top: 50%;
     left: 50%;
+    -webkit-text-stroke: 1px black;
     transform: translate(-50%, -50%);
   }
 

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

@@ -9,7 +9,7 @@ export const BgChain: React.FC<{ chains: readonly number[] }> = ({
 }) => (
   <div className={styles.container}>
     {chains.map((chain) => (
-      <div className={styles.chain}>
+      <div className={styles.chain} key={chain}>
         <img src={`${assetsPath}/chain.png`} />
         <div className={styles.text}>{chain}</div>
       </div>

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

@@ -13,7 +13,8 @@ import {
 import { BgChain } from "./Chain";
 import styles from "./index.module.scss";
 
-// TODO: 展示连锁图标
+const { MZONE, SZONE, EXTRA, GRAVE, REMOVED } = ygopro.CardZone;
+
 const BgBlock: React.FC<
   React.HTMLProps<HTMLDivElement> & {
     disabled?: boolean;
@@ -58,7 +59,7 @@ const BgExtraRow: React.FC<{
           }}
           disabled={meSnap[i].disabled || opSnap[i].disabled}
           highlight={!!meSnap[i].interactivity || !!opSnap[i].interactivity}
-          chains={meSnap[i].chainIndex}
+          chains={meSnap[i].chainIndex.concat(opSnap[i].chainIndex)}
         />
       ))}
     </div>
@@ -84,7 +85,6 @@ const BgRow: React.FC<{
   </div>
 );
 
-// TODO: chain
 const BgOtherBlocks: React.FC<{ op?: boolean }> = ({ op }) => {
   useSnapshot(cardStore);
   const meController = isMe(0) ? 0 : 1;
@@ -92,27 +92,43 @@ const BgOtherBlocks: React.FC<{ op?: boolean }> = ({ op }) => {
     !!cardStore
       .at(zone, meController)
       .reduce((sum, c) => (sum += c.idleInteractivities.length), 0);
-  const glowingExtra = judgeGlowing(ygopro.CardZone.EXTRA);
-  const glowingGraveyard = judgeGlowing(ygopro.CardZone.GRAVE);
-  const glowingBanish = judgeGlowing(ygopro.CardZone.REMOVED);
+  const glowingExtra = judgeGlowing(EXTRA);
+  const glowingGraveyard = judgeGlowing(GRAVE);
+  const glowingBanish = judgeGlowing(REMOVED);
   const snap = useSnapshot(placeStore.inner);
-  const field = op
-    ? snap[ygopro.CardZone.SZONE].op[5]
-    : snap[ygopro.CardZone.SZONE].me[5];
+  const field = op ? snap[SZONE].op[5] : snap[SZONE].me[5];
+
+  const genChains = (states: Snapshot<BlockState[]>) => {
+    const chains: number[] = states.flatMap((state) => state.chainIndex);
+    chains.sort();
+
+    return chains;
+  };
+
   return (
     <div className={classnames(styles["other-blocks"], { [styles.op]: op })}>
-      <BgBlock className={styles.banish} glowing={!op && glowingBanish} />
-      <BgBlock className={styles.graveyard} glowing={!op && glowingGraveyard} />
+      <BgBlock
+        className={styles.banish}
+        glowing={!op && glowingBanish}
+        chains={genChains(op ? snap[REMOVED].op : snap[REMOVED].me)}
+      />
+      <BgBlock
+        className={styles.graveyard}
+        glowing={!op && glowingGraveyard}
+        chains={genChains(op ? snap[GRAVE].op : snap[GRAVE].me)}
+      />
       <BgBlock
         className={styles.field}
         onClick={() => onBlockClick(field.interactivity)}
         disabled={field.disabled}
         highlight={!!field.interactivity}
+        chains={field.chainIndex}
       />
       <BgBlock className={styles.deck} />
       <BgBlock
         className={classnames(styles.deck, styles["extra-deck"])}
         glowing={!op && glowingExtra}
+        chains={genChains(op ? snap[EXTRA].op : snap[EXTRA].me)}
       />
     </div>
   );
@@ -122,14 +138,14 @@ export const Bg: React.FC = () => {
   const snap = useSnapshot(placeStore.inner);
   return (
     <div className={styles["mat-bg"]}>
-      <BgRow snap={snap[ygopro.CardZone.SZONE].op} szone opponent />
-      <BgRow snap={snap[ygopro.CardZone.MZONE].op} opponent />
+      <BgRow snap={snap[SZONE].op} szone opponent />
+      <BgRow snap={snap[MZONE].op} opponent />
       <BgExtraRow
-        meSnap={snap[ygopro.CardZone.MZONE].me.slice(5, 7)}
-        opSnap={snap[ygopro.CardZone.MZONE].op.slice(5, 7)}
+        meSnap={snap[MZONE].me.slice(5, 7)}
+        opSnap={snap[MZONE].op.slice(5, 7)}
       />
-      <BgRow snap={snap[ygopro.CardZone.MZONE].me} />
-      <BgRow snap={snap[ygopro.CardZone.SZONE].me} szone />
+      <BgRow snap={snap[MZONE].me} />
+      <BgRow snap={snap[SZONE].me} szone />
       <BgOtherBlocks />
       <BgOtherBlocks op />
     </div>