add optionModal.tsx

src/ui/Duel/main.tsx

@@ -16,6 +16,7 @@ import CardListModal from "./cardListModal";
 import CheckCardModal from "./checkCardModal";
 import YesNoModal from "./yesNoModal";
 import PositionModal from "./positionModal";
+import OptionModal from "./optionModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -46,6 +47,7 @@ const NeosDuel = () => (
     <CheckCardModal />
     <YesNoModal />
     <PositionModal />
+    <OptionModal />
   </>
 );
 

src/ui/Duel/optionModal.tsx

+import React, { useState } from "react";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
+import { Modal, Button } from "antd";
+import { CheckCard } from "@ant-design/pro-components";
+import {
+  selectOptionModalIsOpen,
+  selectOptionModalOptions,
+} from "../../reducers/duel/modalSlice";
+import { sendSelectOptionResponse } from "../../api/ocgcore/ocgHelper";
+import {
+  resetOptionModal,
+  setOptionModalIsOpen,
+} from "../../reducers/duel/mod";
+
+const OptionModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectOptionModalIsOpen);
+  const options = useAppSelector(selectOptionModalOptions);
+  const [selected, setSelected] = useState<number | undefined>(undefined);
+
+  return (
+    <Modal
+      title="请选择表示形式"
+      open={isOpen}
+      closable={false}
+      footer={
+        <Button
+          disabled={selected === undefined}
+          onClick={() => {
+            if (selected !== undefined) {
+              sendSelectOptionResponse(selected);
+              dispatch(setOptionModalIsOpen(false));
+              dispatch(resetOptionModal());
+            }
+          }}
+        >
+          submit
+        </Button>
+      }
+    >
+      <CheckCard.Group
+        bordered
+        size="small"
+        onChange={(value) => {
+          // @ts-ignore
+          setSelected(value);
+        }}
+      >
+        {options.map((option, idx) => (
+          <CheckCard key={idx} title={option.msg} value={option.response} />
+        ))}
+      </CheckCard.Group>
+    </Modal>
+  );
+};
+
+export default OptionModal;

src/ui/Duel/positionModal.tsx

@@ -34,7 +34,7 @@ const PositionModal = () => {
             if (selected !== undefined) {
               sendSelectPositionResponse(selected);
               dispatch(setPositionModalIsOpen(false));
-              dispatch(resetPositionModal);
+              dispatch(resetPositionModal());
             }
           }}
         >