add SimpleDuelPlateImpl

src/ui/Duel/duel.ts

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

src/ui/Duel/main.tsx

@@ -3,8 +3,8 @@
  *
  * */
 
-import React from "react";
+import SimpleDuelPlateImpl from "./simpleDuel";
 
 export default function Duel() {
-  return <div>Duel</div>;
+  return new SimpleDuelPlateImpl().render();
 }

src/ui/Duel/simpleDuel.tsx

+/*
+ * 一个简洁的决斗界面实现
+ *
+ * */
+
+import { IDuelPlate, TypeSelector } from "./duel";
+import * as DuelData from "./data";
+import { useAppSelector } from "../../hook";
+import React from "react";
+import type { RootState } from "../../store";
+
+export default class SimpleDuelPlateImpl implements IDuelPlate {
+  handsSelector?: TypeSelector<DuelData.Card[]>;
+
+  constructor() {}
+
+  render(): React.ReactElement {
+    // 默认的手牌Selector，返回三个code为-1的Card。
+    const defaultHandsSelector = (_: RootState) => {
+      return new Array(5).fill({ code: -1 });
+    };
+    const hands = useAppSelector(this.handsSelector || defaultHandsSelector);
+
+    return (
+      <div>
+        <table border={1}>
+          <tr>
+            {hands.map((hand) => (
+              <td>{hand.code}</td>
+            ))}
+          </tr>
+        </table>
+      </div>
+    );
+  }
+
+  registerHands(selector: TypeSelector<DuelData.Card[]>): void {
+    this.handsSelector = selector;
+  }
+}