integration

src/ui/Duel/PlayMat/Card.tsx

@@ -5,6 +5,8 @@ import React, { type CSSProperties, MouseEventHandler } from "react";
 
 import { useConfig } from "@/config";
 
+import { Chain } from "./Chain";
+
 const NeosConfig = useConfig();
 
 const ASSETS_BASE =
@@ -27,6 +29,7 @@ export const Card: React.FC<{
   highlight?: boolean;
   focus?: boolean;
   fly?: boolean;
+  chainIdx?: number;
   transTime?: number;
   onClick?: MouseEventHandler<{}>;
   style?: CSSProperties;
@@ -42,6 +45,7 @@ export const Card: React.FC<{
   highlight = false,
   focus = false,
   fly = false,
+  chainIdx,
   transTime = 0.3,
   onClick,
   style = {},
@@ -71,5 +75,7 @@ export const Card: React.FC<{
       } as any
     }
     onClick={onClick}
-  ></div>
+  >
+    {chainIdx ? <Chain chainIdx={chainIdx} /> : <></>}
+  </div>
 );

src/ui/Duel/PlayMat/Chain.tsx

@@ -6,8 +6,8 @@ const CIRCLES_COUNT = 8;
 const EASE = 0.2;
 const R = 60;
 
-export const Chain: React.FC<{ chainIdex: number }> = (props: {
-  chainIdex: number;
+export const Chain: React.FC<{ chainIdx: number }> = (props: {
+  chainIdx: number;
 }) => (
   <div
     className="circles"
@@ -29,7 +29,7 @@ export const Chain: React.FC<{ chainIdex: number }> = (props: {
         }
       ></div>
     ))}
-    <div className="font">{props.chainIdex}</div>
+    <div className="font">{props.chainIdx}</div>
   </div>
 );
 

src/ui/Duel/PlayMat/Mat.tsx

@@ -113,6 +113,7 @@ export const Mat = () => {
                 card.directAttack
               }
               opponent={card.opponent}
+              chainIdx={card.chainIndex}
               onClick={
                 card.location.zone == YgoZone.SZONE ||
                 card.location.zone == YgoZone.MZONE ||