fix block

src/ui/Duel/PlayMat2/Block.tsx

@@ -3,6 +3,8 @@ import "@/styles/mat.css";
 import classnames from "classnames";
 import React, { MouseEventHandler } from "react";
 
+import { CardState, DuelFieldState } from "@/stores";
+
 export const Block: React.FC<{
   isExtra?: boolean;
   highlight?: boolean;
@@ -20,3 +22,49 @@ export const Block: React.FC<{
     onClick={onClick}
   />
 );
+
+export function BlockRow<T extends DuelFieldState>(props: { states: T }) {
+  return (
+    <div className="block-row">
+      {props.states.map((block, idx) => (
+        <Block
+          key={idx}
+          highlight={block.placeInteractivity !== undefined}
+          onClick={() => {
+            // TODO
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+export const ExtraBlockRow: React.FC<{
+  meLeft: CardState;
+  meRight: CardState;
+  opLeft: CardState;
+  opRight: CardState;
+}> = ({ meLeft, meRight, opLeft, opRight }) => (
+  <div className="block-row">
+    <Block
+      highlight={
+        meLeft.placeInteractivity !== undefined ||
+        opLeft.placeInteractivity !== undefined
+      }
+      isExtra={true}
+      onClick={() => {
+        // TODO
+      }}
+    />
+    <Block
+      highlight={
+        meRight.placeInteractivity !== undefined ||
+        opRight.placeInteractivity !== undefined
+      }
+      isExtra={true}
+      onClick={() => {
+        // TODO
+      }}
+    />
+  </div>
+);

src/ui/Duel/PlayMat2/Mat.tsx

@@ -3,9 +3,9 @@ import "@/styles/mat.css";
 import React from "react";
 import { useSnapshot } from "valtio";
 
-import { DuelFieldState, matStore } from "@/stores";
+import { CardState, DuelFieldState, matStore } from "@/stores";
 
-import { Block } from "./Block";
+import { BlockRow, ExtraBlockRow } from "./Block";
 import { Menu } from "./Menu";
 
 export const Mat = () => {
@@ -22,16 +22,14 @@ export const Mat = () => {
       </div>
       <div id="camera">
         <div id="board">
-          <div id="borad-bg">
+          <div id="board-bg">
             <BlockRow states={magics.op.slice(0, 5) as DuelFieldState} />
             <BlockRow states={monsters.op.slice(0, 5) as DuelFieldState} />
-            <BlockRow
-              states={monsters.op.slice(5, 7) as DuelFieldState}
-              isExtra={true}
-            />
-            <BlockRow
-              states={monsters.me.slice(5, 7) as DuelFieldState}
-              isExtra={true}
+            <ExtraBlockRow
+              meLeft={monsters.me[5] as CardState}
+              meRight={monsters.me[6] as CardState}
+              opLeft={monsters.op[5] as CardState}
+              opRight={monsters.op[6] as CardState}
             />
             <BlockRow states={monsters.me.slice(0, 5) as DuelFieldState} />
             <BlockRow states={magics.me.slice(0, 5) as DuelFieldState} />
@@ -41,23 +39,3 @@ export const Mat = () => {
     </>
   );
 };
-
-function BlockRow<T extends DuelFieldState>(props: {
-  states: T;
-  isExtra?: boolean;
-}) {
-  return (
-    <div className="block-row">
-      {props.states.map((block, idx) => (
-        <Block
-          key={idx}
-          isExtra={props.isExtra}
-          highlight={block.placeInteractivity !== undefined}
-          onClick={() => {
-            // TODO
-          }}
-        />
-      ))}
-    </div>
-  );
-}