add card onClick

src/ui/Duel/PlayMat2/Mat.tsx

@@ -4,8 +4,9 @@ import React from "react";
 import { useSnapshot } from "valtio";
 
 import { ygopro } from "@/api";
-import { CardState, DuelFieldState, matStore } from "@/stores";
+import { CardState, DuelFieldState, matStore, messageStore } from "@/stores";
 
+import { interactTypeToString } from "../utils";
 import { BlockRow, ExtraBlockRow } from "./Block";
 import { Card } from "./Card";
 import { Menu } from "./Menu";
@@ -59,6 +60,39 @@ export const Mat = () => {
 
   renderCards.sort((card_a, card_b) => (card_a.uuid > card_b.uuid ? 1 : 0));
 
+  const onClick = (state: CardState) => () => {
+    const zone = state.location.zone;
+    if (
+      zone == YgoZone.HAND ||
+      zone == YgoZone.MZONE ||
+      zone == YgoZone.SZONE
+    ) {
+      const occupant = state.occupant;
+      if (occupant) {
+        // 中央弹窗展示选中卡牌信息
+        messageStore.cardModal.meta = occupant;
+        messageStore.cardModal.interactivies = state.idleInteractivities.map(
+          (interactivity) => ({
+            desc: interactTypeToString(interactivity.interactType),
+            response: interactivity.response,
+          })
+        );
+        messageStore.cardModal.counters = state.counters;
+        messageStore.cardModal.isOpen = true;
+
+        // 侧边栏展示超量素材信息
+        if (state.overlay_materials && state.overlay_materials.length > 0) {
+          messageStore.cardListModal.list =
+            state.overlay_materials?.map((overlay) => ({
+              meta: overlay,
+              interactivies: [],
+            })) || [];
+          messageStore.cardListModal.isOpen = true;
+        }
+      }
+    }
+  };
+
   return (
     <>
       <Menu />
@@ -102,6 +136,7 @@ export const Mat = () => {
               vertical={card.location.zone == YgoZone.HAND}
               highlight={card.idleInteractivities.length > 0}
               opponent={card.opponent}
+              onClick={onClick(card)}
             />
           ))}
         </div>