update mat.tsx

src/ui/Duel/PlayMat2/Block.tsx

 import "@/styles/mat.css";
 
 import classnames from "classnames";
-import React from "react";
+import React, { MouseEventHandler } from "react";
 
 export const Block: React.FC<{
   isExtra?: boolean;
   highlight?: boolean;
-}> = ({ isExtra = false, highlight = false }) => (
+  onClick?: MouseEventHandler;
+}> = ({ isExtra = false, highlight = false, onClick }) => (
   <div
     className={classnames("block", {
       "block-extra": isExtra,
@@ -16,5 +17,6 @@ export const Block: React.FC<{
         "--highlight-on": highlight ? 1 : 0,
       } as any
     }
+    onClick={onClick}
   />
 );

src/ui/Duel/PlayMat2/Mat.tsx

+import "@/styles/mat.css";
+
+import React from "react";
+import { useSnapshot } from "valtio";
+
+import { DuelFieldState, matStore } from "@/stores";
+
+import { Block } from "./Block";
+import { Menu } from "./Menu";
+
+export const Mat = () => {
+  const snap = useSnapshot(matStore);
+  const monsters = snap.monsters;
+  const magics = snap.magics;
+
+  return (
+    <>
+      <Menu />
+      <div id="life-bar-container">
+        <div id="life-bar">{snap.initInfo.me.life}</div>
+        <div id="life-bar">{snap.initInfo.op.life}</div>
+      </div>
+      <div id="camera">
+        <div id="board">
+          <div id="borad-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}
+            />
+            <BlockRow states={monsters.me.slice(0, 5) as DuelFieldState} />
+            <BlockRow states={magics.me.slice(0, 5) as DuelFieldState} />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+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>
+  );
+}

src/ui/Duel/PlayMat2/Menu.tsx

+import "@/styles/mat.css";
+
+import React from "react";
+
+export const Menu = () => {
+  // TODO
+
+  return (
+    <div id="controller">
+      <button>A1</button>
+      <button>A2</button>
+    </div>
+  );
+};

src/ui/Duel/PlayMat2/index.ts

-export * from "./Block";
-export * from "./Card";
+export * from "./Mat";