udpate handSlice and remove Hand in ui/duel

src/reducers/duel/handsSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
 import { RootState } from "../../store";
+import { CardMeta } from "../../api/cards";
 
 export interface Hands {
-  cards: number[]; // TODO: use Card struct Unitly
+  cards: CardMeta[];
 }
 
 // 自己增加手牌
@@ -11,10 +12,13 @@ export const meAddHandsImpl: CaseReducer<DuelState, PayloadAction<number[]>> = (
   state,
   action
 ) => {
+  const cards = action.payload.map((id) => {
+    return { id, data: {}, text: {} };
+  });
   if (state.meHands) {
-    state.meHands.cards = state.meHands.cards.concat(action.payload);
+    state.meHands.cards = state.meHands.cards.concat(cards);
   } else {
-    state.meHands = { cards: action.payload };
+    state.meHands = { cards };
   }
 };
 
@@ -23,10 +27,13 @@ export const opAddHandsImpl: CaseReducer<DuelState, PayloadAction<number[]>> = (
   state,
   action
 ) => {
+  const cards = action.payload.map((id) => {
+    return { id, data: {}, text: {} };
+  });
   if (state.opHands) {
-    state.opHands.cards = state.opHands.cards.concat(action.payload);
+    state.opHands.cards = state.opHands.cards.concat(cards);
   } else {
-    state.opHands = { cards: action.payload };
+    state.opHands = { cards };
   }
 };
 

src/ui/Duel/data.ts

-/*
- * 决斗界面渲染需要的数据结构
- *
- * */
-
-export interface Hand {
-  code: number; // Currently only code
-}

src/ui/Duel/duel.ts

@@ -14,9 +14,9 @@
  *
  *   */
 
-import * as DuelData from "./data";
 import React from "react";
 import type { RootState } from "../../store";
+import { CardMeta } from "../../api/cards";
 
 /*
  * 通用的决斗界面抽象接口
@@ -26,7 +26,7 @@ export interface IDuelPlate {
   // 渲染接口，返回一个React组件
   render(): React.ReactElement;
   // 注册手牌selector
-  registerHands(selector: TypeSelector<DuelData.Hand[]>): void;
+  registerHands(selector: TypeSelector<CardMeta[]>): void;
 }
 
 export interface TypeSelector<T> {

src/ui/Duel/main.tsx

@@ -12,11 +12,7 @@ export default function Duel() {
 
   // TODO: opHands
   const handsSelector = (state: RootState) => {
-    const cards = selectMeHands(state).cards;
-
-    return cards.map((item) => {
-      return { code: item };
-    });
+    return selectMeHands(state).cards;
   };
 
   simpleDuelPlate.registerHands(handsSelector);

src/ui/Duel/simpleDuel/hands.ts

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

src/ui/Duel/simpleDuel/mod.tsx

@@ -4,7 +4,6 @@
  * */
 
 import { IDuelPlate, TypeSelector } from "../duel";
-import * as DuelData from "../data";
 import { useAppSelector } from "../../../hook";
 import React, { useEffect, useRef } from "react";
 import type { RootState } from "../../../store";
@@ -14,14 +13,13 @@ 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";
+import { CardMeta } from "../../../api/cards";
 
 // CONFIG
 
 export default class SimpleDuelPlateImpl implements IDuelPlate {
-  handsSelector?: TypeSelector<DuelData.Hand[]>;
+  handsSelector?: TypeSelector<CardMeta[]>;
 
   constructor() {}
 
@@ -36,12 +34,6 @@ 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);
 
@@ -77,7 +69,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       renderExtraMonsters(scene);
 
       // 创建手牌
-      renderHands(hands, cardMetas, scene);
+      renderHands(hands, scene);
 
       // 创建地板
       const ground = BABYLON.MeshBuilder.CreateGround(
@@ -90,7 +82,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
       engine.runRenderLoop(() => {
         scene.render();
       });
-    }, [canvasRef, hands, cardMetas]);
+    }, [canvasRef, hands]);
 
     return (
       <canvas
@@ -101,7 +93,7 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     );
   }
 
-  registerHands(selector: TypeSelector<DuelData.Hand[]>): void {
+  registerHands(selector: TypeSelector<CardMeta[]>): void {
     this.handsSelector = selector;
   }
 }