update

src/reducers/cardsSlice.ts

@@ -43,6 +43,5 @@ const cardsSlice = createSlice({
   },
 });
 
-export const selectCard = (state: RootState, id: number) =>
-  state.cards.metas.get(id);
+export const selectCards = (state: RootState) => state.cards.metas;
 export default cardsSlice.reducer;

src/ui/Duel/data.ts

@@ -3,6 +3,6 @@
  *
  * */
 
-export interface Card {
+export interface Hand {
   code: number; // Currently only code
 }

src/ui/Duel/duel.ts

@@ -26,7 +26,7 @@ export interface IDuelPlate {
   // 渲染接口，返回一个React组件
   render(): React.ReactElement;
   // 注册手牌selector
-  registerHands(selector: TypeSelector<DuelData.Card[]>): void;
+  registerHands(selector: TypeSelector<DuelData.Hand[]>): void;
 }
 
 export interface TypeSelector<T> {

src/ui/Duel/simpleDuel/hands.ts

-import { Card } from "../data";
+import { Hand } from "../data";
 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "./config";
+import { Card } from "../../../reducers/cardsSlice";
 
-export default (hands: Card[], scene: BABYLON.Scene) => {
+export default (
+  hands: Hand[],
+  cardMetas: Map<number, Card>,
+  scene: BABYLON.Scene
+) => {
   const groundShape = CONFIG.GroundShape();
   const handShape = CONFIG.HandShape();
   const gap = groundShape.width / hands.length;
@@ -31,7 +36,9 @@ export default (hands: Card[], scene: BABYLON.Scene) => {
       new BABYLON.ExecuteCodeAction(
         BABYLON.ActionManager.OnPickTrigger,
         (event) => {
-          console.log(`<Click>hand: ${idx}`, "card:", item, "event:", event);
+          const meta = cardMetas.get(item.code);
+
+          console.log(`<Click>hand: ${idx}`, "card:", meta, "event:", event);
         }
       )
     );

src/ui/Duel/simpleDuel/mod.tsx

@@ -14,15 +14,20 @@ import renderMonsters from "./monsters";
 import renderExtraMonsters from "./extraMonsters";
 import renderMagics from "./magics";
 import * as CONFIG from "./config";
+import { fetchCardMetaById } from "../../../reducers/cardsSlice";
+import { store } from "../../../store";
+import { selectCards } from "../../../reducers/cardsSlice";
 
 // CONFIG
 
 export default class SimpleDuelPlateImpl implements IDuelPlate {
-  handsSelector?: TypeSelector<DuelData.Card[]>;
+  handsSelector?: TypeSelector<DuelData.Hand[]>;
 
   constructor() {}
 
   render(): React.ReactElement {
+    const dispatch = store.dispatch;
+
     // ----- 数据获取 -----
 
     // 默认的手牌Selector，返回五个code为-1的Card。
@@ -31,6 +36,12 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     };
     const hands = useAppSelector(this.handsSelector || defaultHandsSelector);
 
+    // TODO: 这里应该思考更合理的处理方式
+    hands.forEach((item) => {
+      dispatch(fetchCardMetaById(item.code));
+    });
+    const cardMetas = useAppSelector(selectCards);
+
     // ----- WebGL渲染 -----
     const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -66,7 +77,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       renderExtraMonsters(scene);
 
       // 创建手牌
-      renderHands(hands, scene);
+      renderHands(hands, cardMetas, scene);
 
       // 创建地板
       const ground = BABYLON.MeshBuilder.CreateGround(
@@ -79,7 +90,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       engine.runRenderLoop(() => {
         scene.render();
       });
-    }, [canvasRef, hands]);
+    }, [canvasRef, hands, cardMetas]);
 
     return (
       <canvas
@@ -90,7 +101,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     );
   }
 
-  registerHands(selector: TypeSelector<DuelData.Card[]>): void {
+  registerHands(selector: TypeSelector<DuelData.Hand[]>): void {
     this.handsSelector = selector;
   }
 }