update hand slice and hand ui

src/reducers/duel/handsSlice.ts

@@ -8,7 +8,6 @@ import { DuelState } from "./mod";
 import { RootState } from "../../store";
 import { fetchCard, CardMeta } from "../../api/cards";
 import { judgeSelf, Hand, Interactivity } from "./util";
-import * as UICONFIG from "../../config/ui";
 
 export interface Hands {
   // 注意：手牌的位置顺序是有约束的
@@ -56,7 +55,6 @@ export const handsCase = (builder: ActionReducerMapBuilder<DuelState>) => {
       } else {
         state.meHands = { cards };
       }
-      setHandsTransform(state.meHands.cards);
     } else {
       if (state.opHands) {
         state.opHands.cards = state.opHands.cards.concat(cards);
@@ -83,27 +81,6 @@ export const handsCase = (builder: ActionReducerMapBuilder<DuelState>) => {
   });
 };
 
-// 更新手牌的位置和旋转信息
-//
-// TODO: 兼容对方手牌
-function setHandsTransform(hands: Hand[]): void {
-  const groundShape = UICONFIG.GroundShape();
-  const handShape = UICONFIG.HandShape();
-  const gap = groundShape.width / (hands.length - 1);
-  const left = -(groundShape.width / 2);
-
-  hands.forEach((hand, idx, _) => {
-    hand.transform.position = {
-      x: left + gap * idx,
-      y: handShape.height / 2,
-      z: -(groundShape.height / 2) - 1,
-    };
-
-    const rotation = UICONFIG.HandRotation();
-    hand.transform.rotation = { x: rotation.x, y: rotation.y, z: rotation.z };
-  });
-}
-
 // 清空手牌互动性
 export const clearHandsInteractivityImpl: CaseReducer<
   DuelState,

src/reducers/duel/util.ts

@@ -27,23 +27,9 @@ export function judgeSelf(player: number, state: Draft<DuelState>): boolean {
 
 export interface Hand {
   meta: CardMeta;
-  transform: CardTransform;
   interactivities: Interactivity<number>[];
 }
 
-interface CardTransform {
-  position?: {
-    x: number;
-    y: number;
-    z: number;
-  };
-  rotation?: {
-    x: number;
-    y: number;
-    z: number;
-  };
-}
-
 export enum InteractType {
   // 可普通召唤
   SUMMON = 1,

src/ui/Duel/cardModal.tsx

@@ -8,7 +8,10 @@ import {
   selectCardModalImgUrl,
   selectCardModalInteractivies,
 } from "../../reducers/duel/modalSlice";
-import { setCardModalIsOpen } from "../../reducers/duel/mod";
+import {
+  setCardModalIsOpen,
+  clearHandsInteractivity,
+} from "../../reducers/duel/mod";
 import { Modal, Card, Button } from "antd";
 import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
 
@@ -45,6 +48,7 @@ const CardModal = () => {
               onClick={() => {
                 sendSelectIdleCmdResponse(interactive.response);
                 dispatch(setCardModalIsOpen(false));
+                dispatch(clearHandsInteractivity(0));
               }}
             >
               {interactive.desc}

src/ui/Duel/hands.tsx

@@ -14,20 +14,37 @@ import { useHover } from "react-babylonjs";
 import { useClick } from "./hook";
 import { useState, useRef } from "react";
 
+const groundShape = CONFIG.GroundShape();
+const left = -(groundShape.width / 2);
+
 const Hands = () => {
   const hands = useAppSelector(selectMeHands).cards;
 
   return (
     <>
       {hands.map((hand, idx) => {
-        return <CHand state={hand} idx={idx} key={idx} />;
+        return (
+          <CHand
+            state={hand}
+            idx={idx}
+            key={idx}
+            gap={groundShape.width / (hands.length - 1)}
+          />
+        );
       })}
     </>
   );
 };
 
-const CHand = (props: { state: Hand; idx: number }) => {
+const CHand = (props: { state: Hand; idx: number; gap: number }) => {
   const handShape = CONFIG.HandShape();
+  const position = new BABYLON.Vector3(
+    left + props.gap * props.idx,
+    handShape.height / 2,
+    -(groundShape.height / 2) - 1
+  );
+  const rotation = CONFIG.HandRotation();
+
   const hoverScale = CONFIG.HandHoverScaling();
   const defaultScale = new BABYLON.Vector3(1, 1, 1);
   const planeRef = useRef(null);
@@ -72,20 +89,8 @@ const CHand = (props: { state: Hand; idx: number }) => {
         width={handShape.width}
         height={handShape.height}
         scaling={hovered ? hoverScale : defaultScale}
-        position={
-          new BABYLON.Vector3(
-            state.transform.position?.x,
-            state.transform.position?.y,
-            state.transform.position?.z
-          )
-        }
-        rotation={
-          new BABYLON.Vector3(
-            state.transform.rotation?.x,
-            state.transform.rotation?.y,
-            state.transform.rotation?.z
-          )
-        }
+        position={position}
+        rotation={rotation}
       >
         <standardMaterial
           name={`hand-mat-${idx}`}