update CardModal.tsx and hands.ts

src/ui/Duel/simpleDuel/cardModal.tsx

@@ -6,9 +6,11 @@ import {
   selectCardModalName,
   selectCardModalDesc,
   selectCardModalImgUrl,
+  selectCardModalInteractivies,
 } from "../../../reducers/duel/modal";
 import { setCardModalIsOpen } from "../../../reducers/duel/mod";
-import { Modal, Card } from "antd";
+import { Modal, Card, Button } from "antd";
+import { sendSelectIdleCmdResponse } from "../../../api/ocgcore/ocgHelper";
 
 const { Meta } = Card;
 const CARD_WIDTH = 240;
@@ -19,6 +21,7 @@ const CardModal = () => {
   const name = useAppSelector(selectCardModalName);
   const desc = useAppSelector(selectCardModalDesc);
   const imgUrl = useAppSelector(selectCardModalImgUrl);
+  const interactivies = useAppSelector(selectCardModalInteractivies);
 
   const handleOkOrCancel = () => {
     dispatch(setCardModalIsOpen(false));
@@ -35,6 +38,18 @@ const CardModal = () => {
           <Meta title={name} />
           <p>{desc}</p>
         </Card>
+        {interactivies.map((interactive) => {
+          return (
+            <Button
+              onClick={() => {
+                sendSelectIdleCmdResponse(interactive.response);
+                dispatch(setCardModalIsOpen(false));
+              }}
+            >
+              {interactive.desc}
+            </Button>
+          );
+        })}
       </Modal>
     </>
   );

src/ui/Duel/simpleDuel/hands.ts

 import * as BABYLON from "@babylonjs/core";
-import * as BABYLON_GUI from "@babylonjs/gui";
 import * as CONFIG from "../../../config/ui";
 import { Card, InteractType } from "../../../reducers/duel/util";
-import { sendSelectIdleCmdResponse } from "../../../api/ocgcore/ocgHelper";
 import {
   setCardModalImgUrl,
   setCardModalIsOpen,
   setCardModalText,
+  setCardModalInteractivies,
 } from "../../../reducers/duel/mod";
 import { store } from "../../../store";
 
@@ -22,8 +21,6 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
     setupHandTransform(hand, item);
     // 材质
     setupHandMaterial(hand, item, scene);
-    // 互动选项
-    setupHandInteractivity(hand, item, idx, scene);
     // 事件管理
     setupHandAction(hand, item, idx, scene);
   });
@@ -59,51 +56,6 @@ function setupHandMaterial(
   mesh.material = handMaterial;
 }
 
-function setupHandInteractivity(
-  mesh: BABYLON.Mesh,
-  state: Card,
-  handIdx: number,
-  scene: BABYLON.Scene
-) {
-  const interactShape = CONFIG.HandInteractShape();
-  const interactivities = state.interactivities;
-
-  for (let i = 0; i < interactivities.length; i++) {
-    const interact = BABYLON.MeshBuilder.CreatePlane(
-      `handInteract_${handIdx}_${i}`,
-      interactShape,
-      scene
-    );
-    interact.parent = mesh;
-    // 调整位置
-    interact.translate(
-      new BABYLON.Vector3(0, 1, 0),
-      CONFIG.HandShape().height / 2 +
-        interactShape.height / 2 +
-        interactShape.height * i
-    );
-
-    const advancedTexture =
-      BABYLON_GUI.AdvancedDynamicTexture.CreateForMesh(interact);
-    const button = BABYLON_GUI.Button.CreateImageWithCenterTextButton(
-      `handInteractButtion_${handIdx}_${i}`,
-      interactTypeToString(interactivities[i].interactType),
-      "http://localhost:3030/images/interact_button.png"
-    );
-    button.fontSize = CONFIG.HandInteractFontSize;
-    button.color = "white";
-    button.onPointerClickObservable.add(() => {
-      console.log(`<Interact>hand ${handIdx}`);
-
-      sendSelectIdleCmdResponse(interactivities[i].response);
-    });
-    advancedTexture.addControl(button);
-
-    interact.visibility = 0.01;
-    // interact.setEnabled(false);
-  }
-}
-
 function setupHandAction(
   mesh: BABYLON.Mesh,
   state: Card,
@@ -127,13 +79,21 @@ function setupHandAction(
             `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${state.meta.id}.jpg`
           )
         );
+        dispatch(
+          setCardModalInteractivies(
+            state.interactivities.map((interactive) => {
+              return {
+                desc: interactTypeToString(interactive.interactType),
+                response: interactive.response,
+              };
+            })
+          )
+        );
         dispatch(setCardModalIsOpen(true));
       }
     )
   );
   // 监听`Hover`事件
-  //
-  // TODO: 应该在`Hover`的时候开启子组件（按钮），`Hover`离开的时候禁用
   mesh.actionManager.registerAction(
     new BABYLON.CombineAction(
       { trigger: BABYLON.ActionManager.OnPointerOverTrigger },
@@ -146,13 +106,6 @@ function setupHandAction(
           "scaling",
           CONFIG.HandHoverScaling()
         ),
-        new BABYLON.InterpolateValueAction(
-          BABYLON.ActionManager.OnPointerOverTrigger,
-          mesh.getChildMeshes(),
-          "visibility",
-          1.0,
-          10
-        ),
       ]
     )
   );
@@ -169,18 +122,33 @@ function setupHandAction(
           "scaling",
           CONFIG.HandHoverOutScaling()
         ),
-        new BABYLON.InterpolateValueAction(
-          BABYLON.ActionManager.OnPointerOverTrigger,
-          mesh.getChildMeshes(),
-          "visibility",
-          0.01,
-          10
-        ),
       ]
     )
   );
 }
 
 function interactTypeToString(t: InteractType): string {
-  return InteractType[t];
+  switch (t) {
+    case InteractType.SUMMON: {
+      return "普通召唤";
+    }
+    case InteractType.SP_SUMMON: {
+      return "特殊召唤";
+    }
+    case InteractType.POS_CHANGE: {
+      return "改变表示形式";
+    }
+    case InteractType.MSET: {
+      return "前场放置";
+    }
+    case InteractType.SSET: {
+      return "后场放置";
+    }
+    case InteractType.ACTIVATE: {
+      return "发动效果";
+    }
+    default: {
+      return "未知选项";
+    }
+  }
 }