update monster ui

src/reducers/duel/monstersSlice.ts

@@ -2,6 +2,7 @@ import { judgeSelf, Monster, InteractType } from "./util";
 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "./mod";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import { RootState } from "../../store";
 
 export interface MonsterState {
   monsters: Monster[];
@@ -13,10 +14,7 @@ export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
   action
 ) => {
   const player = action.payload;
-  let monsters = judgeSelf(player, state) ? state.meMonsters : state.opMonsters;
-
-  if (!monsters) {
-    monsters = {
+  const monsters = {
     monsters: [
       {
         sequence: 0,
@@ -35,6 +33,11 @@ export const initMonstersImpl: CaseReducer<DuelState, PayloadAction<number>> = (
       },
     ],
   };
+
+  if (judgeSelf(player, state)) {
+    state.meMonsters = monsters;
+  } else {
+    state.opMonsters = monsters;
   }
 };
 
@@ -78,3 +81,6 @@ export const clearMonsterSelectInfoImpl: CaseReducer<
     monsters.monsters = [];
   }
 };
+
+export const selectMeMonsters = (state: RootState) =>
+  state.duel.meMonsters || { monsters: [] };

src/ui/Duel/mod.tsx

@@ -21,6 +21,7 @@ import { selectCurrentPlayer } from "../../reducers/duel/turnSlice";
 import CardModal from "./cardModal";
 import HintNotification from "./hintNotification";
 import { selectMeHands } from "../../reducers/duel/handsSlice";
+import { selectMeMonsters } from "../../reducers/duel/monstersSlice";
 
 // CONFIG
 
@@ -28,6 +29,7 @@ const Duel = () => {
   // ----- 数据获取 -----
 
   const hands = useAppSelector(selectMeHands).cards;
+  const monsters = useAppSelector(selectMeMonsters).monsters;
   const currentPlayer = useAppSelector(selectCurrentPlayer);
 
   // ----- WebGL渲染 -----
@@ -60,7 +62,7 @@ const Duel = () => {
     renderMagics(scene);
 
     // 怪兽区
-    renderMonsters(scene);
+    renderMonsters(monsters, scene);
 
     // 创建额外怪兽区
     renderExtraMonsters(scene);
@@ -105,7 +107,7 @@ const Duel = () => {
     engine.runRenderLoop(() => {
       scene.render();
     });
-  }, [canvasRef, hands, currentPlayer]);
+  }, [canvasRef, hands, monsters, currentPlayer]); // FIXME: 这里需要优化，应该分组件按需渲染
 
   useEffect(() => {
     // 监听状态变化，并实现动画

src/ui/Duel/monsters.ts

 import * as BABYLON from "@babylonjs/core";
 import * as CONFIG from "../../config/ui";
+import { Monster } from "../../reducers/duel/util";
 
-export default (scene: BABYLON.Scene) => {
+export default (monsters: Monster[], scene: BABYLON.Scene) => {
   const left = -2.15;
   const gap = 1.05;
   const shape = CONFIG.CardSlotShape();
 
-  for (let i = 0; i < 5; i++) {
-    const slot = BABYLON.MeshBuilder.CreatePlane(`monster${i}`, shape, scene);
+  for (const monster of monsters) {
+    const sequence = monster.sequence;
+    const slot = BABYLON.MeshBuilder.CreatePlane(
+      `monster${sequence}`,
+      shape,
+      scene
+    );
     // 位置
     slot.position = new BABYLON.Vector3(
-      left + gap * i,
+      left + gap * sequence,
       shape.depth / 2 + CONFIG.Floating,
       -1.35
     );
@@ -21,10 +27,20 @@ export default (scene: BABYLON.Scene) => {
       "monsterMaterial",
       scene
     );
-    monsterMaterial.diffuseTexture = new BABYLON.Texture(
-      `http://localhost:3030/images/card_slot.png`
-    );
+    monsterMaterial.diffuseTexture = monster.occupant
+      ? new BABYLON.Texture(
+          `https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${monster.occupant.id}.jpg`
+        )
+      : new BABYLON.Texture(`http://localhost:3030/images/card_slot.png`);
     monsterMaterial.diffuseTexture.hasAlpha = true;
     slot.material = monsterMaterial;
+
+    if (monster.selectInfo) {
+      slot.enableEdgesRendering();
+      slot.edgesWidth = 2.0;
+      slot.edgesColor = BABYLON.Color4.FromColor3(BABYLON.Color3.Yellow());
+    } else {
+      slot.disableEdgesRendering();
+    }
   }
 };