finish HandChain

src/ui/Duel/Main.tsx

@@ -20,6 +20,7 @@ import {
 } from "./Message";
 import { LifeBar, Mat, Menu, Underlying } from "./PlayMat";
 import { ChatBox } from "./PlayMat/ChatBox";
+import { HandChain } from "./PlayMat/HandChain";
 
 export const Component: React.FC = () => {
   const { stage } = useSnapshot(sideStore);
@@ -59,6 +60,7 @@ export const Component: React.FC = () => {
       <SimpleSelectCardsModal />
       <EndModal />
       <ChatBox />
+      <HandChain />
     </>
   );
 };

src/ui/Duel/PlayMat/HandChain/index.module.scss

+.container {
+  position: fixed;
+  display: flex;
+  overflow: hidden;
+  z-index: 2;
+
+  .me {
+    position: fixed;
+    bottom: 1rem;
+    right: 50%;
+  }
+
+  .op {
+    position: fixed;
+    top: 1rem;
+    left: 50%;
+  }
+}

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

+import { type INTERNAL_Snapshot as Snapshot, useSnapshot } from "valtio";
+
+import { ygopro } from "@/api";
+import { BlockState, placeStore } from "@/stores";
+import { BgChain } from "@/ui/Shared";
+
+import styles from "./index.module.scss";
+
+const { HAND } = ygopro.CardZone;
+
+export const HandChain: React.FC = () => {
+  const snap = useSnapshot(placeStore.inner);
+  const me = snap[HAND].me;
+  const op = snap[HAND].op;
+
+  const genChains = (states: Snapshot<BlockState[]>) => {
+    const chains: number[] = states.flatMap((state) => state.chainIndex);
+    chains.sort();
+
+    return chains;
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.me}>
+        <BgChain chains={genChains(me)} />
+      </div>
+      <div className={styles.op}>
+        <BgChain chains={genChains(op)} op />
+      </div>
+    </div>
+  );
+};

src/ui/Shared/Chain/index.module.scss

@@ -2,11 +2,13 @@
   position: relative;
   width: 100%;
   height: 100%;
+  min-width: 8rem;
+  max-width: 10rem;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
-
+  pointer-events: none;
 }
 
 .banish,