remove unused abstract

src/ui/Duel/simpleDuel/cardModal.tsx → src/ui/Duel/cardModal.tsx

 import React from "react";
-import { useAppSelector } from "../../../hook";
-import { store } from "../../../store";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
 import {
   selectCardModalIsOpen,
   selectCardModalName,
   selectCardModalDesc,
   selectCardModalImgUrl,
   selectCardModalInteractivies,
-} from "../../../reducers/duel/modalSlice";
-import { setCardModalIsOpen } from "../../../reducers/duel/mod";
+} from "../../reducers/duel/modalSlice";
+import { setCardModalIsOpen } from "../../reducers/duel/mod";
 import { Modal, Card, Button } from "antd";
-import { sendSelectIdleCmdResponse } from "../../../api/ocgcore/ocgHelper";
+import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
 
 const { Meta } = Card;
 const CARD_WIDTH = 240;

src/ui/Duel/simpleDuel/cemetery.ts → src/ui/Duel/cemetery.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   // 墓地

src/ui/Duel/simpleDuel/deck.ts → src/ui/Duel/deck.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   // 卡组

src/ui/Duel/duel.ts

-/*
- * 决斗界面的抽象接口
- *
- * - Neos项目采用UI渲染和数据获取相互解耦的设计，
- *   UI组件内部不应该存在任何与业务耦合的逻辑，
- *   而是应该暴露数据注入的接口，供业务方调用；
- * - Neos项目在研发初期，会更多的注重业务逻辑的实现，
- *   而不会在UI界面上钻研过深，但在项目最终上线前，
- *   会对UI界面提出较高的要求，因此在研发过程中可能会存在
- *   多套UI界面。为了减少重复性工作，这里设计一个通用的
- *   决斗界面抽象接口，接口实现方需要实现独立的，具体的渲染逻辑，
- *   接口调用方不感知具体实现，只负责根据外部输入，
- *   进行特定UI模块的渲染和更新。
- *
- *   */
-
-import React from "react";
-import type { RootState } from "../../store";
-import { Card } from "../../reducers/duel/util";
-
-/*
- * 通用的决斗界面抽象接口
- *
- * */
-export interface IDuelPlate {
-  // 渲染接口，返回一个React组件
-  render(): React.ReactElement;
-  // 注册手牌selector
-  registerHands(selector: TypeSelector<Card[]>): void;
-}
-
-export interface TypeSelector<T> {
-  (state: RootState): T;
-}

src/ui/Duel/simpleDuel/exclusion.ts → src/ui/Duel/exclusion.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   // 除外区

src/ui/Duel/simpleDuel/extraMonsters.ts → src/ui/Duel/extraMonsters.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   const xs = [-1.1, 1];

src/ui/Duel/simpleDuel/field.ts → src/ui/Duel/field.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   // 墓地

src/ui/Duel/simpleDuel/hands.ts → src/ui/Duel/hands.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
-import { Card, InteractType } from "../../../reducers/duel/util";
+import * as CONFIG from "../../config/ui";
+import { Card, InteractType } from "../../reducers/duel/util";
 import {
   setCardModalImgUrl,
   setCardModalIsOpen,
   setCardModalText,
   setCardModalInteractivies,
-} from "../../../reducers/duel/mod";
-import { store } from "../../../store";
+} from "../../reducers/duel/mod";
+import { store } from "../../store";
 
 export default (hands: Card[], scene: BABYLON.Scene) => {
   const handShape = CONFIG.HandShape();

src/ui/Duel/simpleDuel/hintNotification.tsx → src/ui/Duel/hintNotification.tsx

 import React, { useEffect } from "react";
-import { useAppSelector } from "../../../hook";
-import { selectMeHint, selectOpHint } from "../../../reducers/duel/hintSlice";
-import { selectCurrentPhase } from "../../../reducers/duel/phaseSlice";
-import { selectChat } from "../../../reducers/chatSlice";
+import { useAppSelector } from "../../hook";
+import { selectMeHint, selectOpHint } from "../../reducers/duel/hintSlice";
+import { selectCurrentPhase } from "../../reducers/duel/phaseSlice";
+import { selectChat } from "../../reducers/chatSlice";
 import { notification } from "antd";
 
 const HintNotification = () => {

src/ui/Duel/simpleDuel/magics.ts → src/ui/Duel/magics.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   const left = -2.15;

src/ui/Duel/main.tsx

-/*
- * 决斗页面
- *
- * */
-
-import { RootState } from "../../store";
-import SimpleDuelPlateImpl from "./simpleDuel/mod";
-import { selectMeHands } from "../../reducers/duel/handsSlice";
-
-export default function Duel() {
-  const simpleDuelPlate = new SimpleDuelPlateImpl();
-
-  // TODO: opHands
-  const handsSelector = (state: RootState) => {
-    return selectMeHands(state).cards;
-  };
-
-  simpleDuelPlate.registerHands(handsSelector);
-
-  return simpleDuelPlate.render();
-}

src/ui/Duel/mod.tsx

+/*
+ * 一个简洁的决斗界面实现
+ *
+ * */
+
+import { useAppSelector } from "../../hook";
+import React, { useEffect, useRef } from "react";
+import { observeStore } from "../../store";
+import * as BABYLON from "@babylonjs/core";
+import renderHands from "./hands";
+import renderMonsters from "./monsters";
+import renderExtraMonsters from "./extraMonsters";
+import renderMagics from "./magics";
+import renderDeck from "./deck";
+import renderCemetery from "./cemetery";
+import renderExclusion from "./exclusion";
+import renderField from "./field";
+import * as CONFIG from "../../config/ui";
+import { Card } from "../../reducers/duel/util";
+import { selectCurrentPlayer } from "../../reducers/duel/turnSlice";
+import CardModal from "./cardModal";
+import HintNotification from "./hintNotification";
+import { selectMeHands } from "../../reducers/duel/handsSlice";
+
+// CONFIG
+
+const Duel = () => {
+  // ----- 数据获取 -----
+
+  const hands = useAppSelector(selectMeHands).cards;
+  const currentPlayer = useAppSelector(selectCurrentPlayer);
+
+  // ----- WebGL渲染 -----
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    // 初始化Scene
+    const canvasCurrent = canvasRef.current;
+    const engine = new BABYLON.Engine(canvasCurrent, true);
+    const scene = new BABYLON.Scene(engine);
+
+    // 创建Camera
+    const camera = new BABYLON.FreeCamera(
+      "camera1",
+      new BABYLON.Vector3(0, 8, -10), // 俯视方向
+      scene
+    );
+    camera.setTarget(BABYLON.Vector3.Zero()); // 俯视向前
+    camera.attachControl(canvasCurrent, true);
+
+    // 创建光源
+    const light = new BABYLON.HemisphericLight(
+      "light",
+      new BABYLON.Vector3(1, 2.5, 1),
+      scene
+    );
+    light.intensity = 0.7;
+
+    // 魔法陷阱区
+    renderMagics(scene);
+
+    // 怪兽区
+    renderMonsters(scene);
+
+    // 创建额外怪兽区
+    renderExtraMonsters(scene);
+
+    // 创建手牌
+    renderHands(hands, scene);
+
+    // 创建卡组
+    renderDeck(scene);
+
+    // 创建墓地
+    renderCemetery(scene);
+
+    // 创建除外区
+    renderExclusion(scene);
+
+    // 创建场地
+    renderField(scene);
+
+    // 创建地板
+    const ground = BABYLON.MeshBuilder.CreateGround(
+      "ground",
+      CONFIG.GroundShape(),
+      scene
+    );
+    const groundMaterial = new BABYLON.StandardMaterial(
+      "groundMaterial",
+      scene
+    );
+    groundMaterial.diffuseTexture = new BABYLON.Texture(
+      `http://localhost:3030/images/newfield.png`
+    );
+    groundMaterial.diffuseTexture.hasAlpha = true;
+    ground.material = groundMaterial;
+
+    /* 一些未处理的逻辑，在这里用日志打印出来 */
+
+    // 当前操作玩家
+    console.log(`currentPlayer:` + currentPlayer);
+
+    // 渲染循环
+    engine.runRenderLoop(() => {
+      scene.render();
+    });
+  }, [canvasRef, hands, currentPlayer]);
+
+  useEffect(() => {
+    // 监听状态变化，并实现动画
+
+    const onHandsChange = (prev_hands: Card[] | null, cur_hands: Card[]) => {
+      console.log(prev_hands, "change to", cur_hands);
+    };
+
+    const unsubscribe = observeStore(
+      (root) => selectMeHands(root).cards,
+      onHandsChange
+    );
+    return () => {
+      // 取消监听
+      unsubscribe();
+    };
+  }, []);
+
+  return (
+    <>
+      <canvas
+        width={window.innerWidth}
+        height={window.innerHeight}
+        ref={canvasRef}
+      />
+      <CardModal />
+      <HintNotification />
+    </>
+  );
+};
+
+export default Duel;

src/ui/Duel/simpleDuel/monsters.ts → src/ui/Duel/monsters.ts

 import * as BABYLON from "@babylonjs/core";
-import * as CONFIG from "../../../config/ui";
+import * as CONFIG from "../../config/ui";
 
 export default (scene: BABYLON.Scene) => {
   const left = -2.15;

src/ui/Duel/simpleDuel/mod.tsx

-/*
- * 一个简洁的决斗界面实现
- *
- * */
-
-import { IDuelPlate, TypeSelector } from "../duel";
-import { useAppSelector } from "../../../hook";
-import React, { useEffect, useRef } from "react";
-import { RootState, observeStore } from "../../../store";
-import * as BABYLON from "@babylonjs/core";
-import renderHands from "./hands";
-import renderMonsters from "./monsters";
-import renderExtraMonsters from "./extraMonsters";
-import renderMagics from "./magics";
-import renderDeck from "./deck";
-import renderCemetery from "./cemetery";
-import renderExclusion from "./exclusion";
-import renderField from "./field";
-import * as CONFIG from "../../../config/ui";
-import { Card } from "../../../reducers/duel/util";
-import { selectCurrentPlayer } from "../../../reducers/duel/turnSlice";
-import CardModal from "./cardModal";
-import HintNotification from "./hintNotification";
-
-// CONFIG
-
-export default class SimpleDuelPlateImpl implements IDuelPlate {
-  handsSelector?: TypeSelector<Card[]>;
-
-  constructor() {}
-
-  render(): React.ReactElement {
-    // ----- 数据获取 -----
-
-    // 默认的手牌Selector，返回五个code为-1的Card。
-    const defaultHandsSelector = (_: RootState) => {
-      return new Array(5).fill({ id: 10000, data: {}, text: {} });
-    };
-    const hands = useAppSelector(this.handsSelector || defaultHandsSelector);
-    const currentPlayer = useAppSelector(selectCurrentPlayer);
-
-    // ----- WebGL渲染 -----
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-
-    useEffect(() => {
-      // 初始化Scene
-      const canvasCurrent = canvasRef.current;
-      const engine = new BABYLON.Engine(canvasCurrent, true);
-      const scene = new BABYLON.Scene(engine);
-
-      // 创建Camera
-      const camera = new BABYLON.FreeCamera(
-        "camera1",
-        new BABYLON.Vector3(0, 8, -10), // 俯视方向
-        scene
-      );
-      camera.setTarget(BABYLON.Vector3.Zero()); // 俯视向前
-      camera.attachControl(canvasCurrent, true);
-
-      // 创建光源
-      const light = new BABYLON.HemisphericLight(
-        "light",
-        new BABYLON.Vector3(1, 2.5, 1),
-        scene
-      );
-      light.intensity = 0.7;
-
-      // 魔法陷阱区
-      renderMagics(scene);
-
-      // 怪兽区
-      renderMonsters(scene);
-
-      // 创建额外怪兽区
-      renderExtraMonsters(scene);
-
-      // 创建手牌
-      renderHands(hands, scene);
-
-      // 创建卡组
-      renderDeck(scene);
-
-      // 创建墓地
-      renderCemetery(scene);
-
-      // 创建除外区
-      renderExclusion(scene);
-
-      // 创建场地
-      renderField(scene);
-
-      // 创建地板
-      const ground = BABYLON.MeshBuilder.CreateGround(
-        "ground",
-        CONFIG.GroundShape(),
-        scene
-      );
-      const groundMaterial = new BABYLON.StandardMaterial(
-        "groundMaterial",
-        scene
-      );
-      groundMaterial.diffuseTexture = new BABYLON.Texture(
-        `http://localhost:3030/images/newfield.png`
-      );
-      groundMaterial.diffuseTexture.hasAlpha = true;
-      ground.material = groundMaterial;
-
-      /* 一些未处理的逻辑，在这里用日志打印出来 */
-
-      // 当前操作玩家
-      console.log(`currentPlayer:` + currentPlayer);
-
-      // 渲染循环
-      engine.runRenderLoop(() => {
-        scene.render();
-      });
-    }, [canvasRef, hands, currentPlayer]);
-
-    useEffect(() => {
-      // 监听状态变化，并实现动画
-
-      const onHandsChange = (prev_hands: Card[] | null, cur_hands: Card[]) => {
-        console.log(prev_hands, "change to", cur_hands);
-      };
-
-      const unsubscribe = observeStore(
-        this.handsSelector || defaultHandsSelector,
-        onHandsChange
-      );
-      return () => {
-        // 取消监听
-        unsubscribe();
-      };
-    }, []);
-
-    return (
-      <>
-        <canvas
-          width={window.innerWidth}
-          height={window.innerHeight}
-          ref={canvasRef}
-        />
-        <CardModal />
-        <HintNotification />
-      </>
-    );
-  }
-
-  registerHands(selector: TypeSelector<Card[]>): void {
-    this.handsSelector = selector;
-  }
-}

src/ui/Neos.tsx

@@ -4,7 +4,7 @@ import WaitRoom from "./WaitRoom";
 import ThreeJs from "./ThreeJs";
 import { Routes, Route } from "react-router-dom";
 import Mora from "./Mora";
-import Duel from "./Duel/main";
+import Duel from "./Duel/mod";
 
 export default function () {
   // FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径