add positionModal ui

src/reducers/duel/modalSlice.ts

@@ -327,3 +327,7 @@ export const selectYesNoModalIsOpen = (state: RootState) =>
   state.duel.modalState.yesNoModal.isOpen;
 export const selectYesNOModalMsg = (state: RootState) =>
   state.duel.modalState.yesNoModal.msg;
+export const selectPositionModalIsOpen = (state: RootState) =>
+  state.duel.modalState.positionModal.isOpen;
+export const selectPositionModalPositions = (state: RootState) =>
+  state.duel.modalState.positionModal.positions;

src/ui/Duel/main.tsx

@@ -15,6 +15,7 @@ import Cemeteries from "./cemetery";
 import CardListModal from "./cardListModal";
 import CheckCardModal from "./checkCardModal";
 import YesNoModal from "./yesNoModal";
+import PositionModal from "./positionModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -44,6 +45,7 @@ const NeosDuel = () => (
     <HintNotification />
     <CheckCardModal />
     <YesNoModal />
+    <PositionModal />
   </>
 );
 

src/ui/Duel/positionModal.tsx

+import React, { useState } from "react";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
+import { Modal, Button } from "antd";
+import { sendSelectPositionResponse } from "../../api/ocgcore/ocgHelper";
+import {
+  selectPositionModalIsOpen,
+  selectPositionModalPositions,
+} from "../../reducers/duel/modalSlice";
+import { ygopro } from "../../api/ocgcore/idl/ocgcore";
+import {
+  resetPositionModal,
+  setPositionModalIsOpen,
+} from "../../reducers/duel/mod";
+import { CheckCard } from "@ant-design/pro-components";
+
+const PositionModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectPositionModalIsOpen);
+  const positions = useAppSelector(selectPositionModalPositions);
+  const [selected, setSelected] = useState<ygopro.CardPosition | undefined>(
+    undefined
+  );
+
+  return (
+    <Modal
+      title="请选择表示形式"
+      open={isOpen}
+      closable={false}
+      footer={
+        <Button
+          disabled={selected === undefined}
+          onClick={() => {
+            if (selected) {
+              sendSelectPositionResponse(selected);
+              dispatch(setPositionModalIsOpen(false));
+              dispatch(resetPositionModal);
+            }
+          }}
+        >
+          submit
+        </Button>
+      }
+    >
+      <CheckCard.Group
+        bordered
+        size="small"
+        onChange={(value) => {
+          // @ts-ignore
+          setSelected(value);
+        }}
+      >
+        {positions.map((position, idx) => (
+          <CheckCard
+            key={idx}
+            title={cardPositionToChinese(position)}
+            value={position}
+          />
+        ))}
+      </CheckCard.Group>
+    </Modal>
+  );
+};
+
+function cardPositionToChinese(position: ygopro.CardPosition): string {
+  switch (position) {
+    case ygopro.CardPosition.FACEUP_ATTACK: {
+      return "正面攻击形式";
+    }
+    case ygopro.CardPosition.FACEUP_DEFENSE: {
+      return "正面防守形式";
+    }
+    case ygopro.CardPosition.FACEDOWN_ATTACK: {
+      return "背面攻击形式";
+    }
+    case ygopro.CardPosition.FACEDOWN_DEFENSE: {
+      return "背面防守形式";
+    }
+    default: {
+      return "[?]";
+    }
+  }
+}
+
+export default PositionModal;