add CheckCardModal

src/reducers/duel/modalSlice.ts

@@ -206,3 +206,13 @@ export const selectCardListModalIsOpen = (state: RootState) =>
   state.duel.modalState.cardListModal.isOpen;
 export const selectCardListModalInfo = (state: RootState) =>
   state.duel.modalState.cardListModal.list;
+export const selectCheckCardModalIsOpen = (state: RootState) =>
+  state.duel.modalState.checkCardModal.isOpen;
+export const selectCheckCardModalMinMax = (state: RootState) => {
+  return {
+    min: state.duel.modalState.checkCardModal.selectMin || 0,
+    max: state.duel.modalState.checkCardModal.selectMax || 0,
+  };
+};
+export const selectCheckCardModalTags = (state: RootState) =>
+  state.duel.modalState.checkCardModal.tags;

src/ui/Duel/checkCardModal.tsx

+import React, { useState } from "react";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
+import {
+  selectCheckCardModalIsOpen,
+  selectCheckCardModalMinMax,
+  selectCheckCardModalTags,
+} from "../../reducers/duel/modalSlice";
+import {
+  resetCheckCardModal,
+  setCheckCardModalIsOpen,
+} from "../../reducers/duel/mod";
+import { Modal, Button, Row, Col } from "antd";
+import { CheckCard } from "@ant-design/pro-components";
+import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
+
+const CheckCardModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectCheckCardModalIsOpen);
+  const { min, max } = useAppSelector(selectCheckCardModalMinMax);
+  const tabs = useAppSelector(selectCheckCardModalTags);
+  const [response, setResponse] = useState<number[]>([]);
+  const defaultValue: number[] = [];
+
+  return (
+    <Modal
+      title={`请选择${min}到${max}张卡片`}
+      open={isOpen}
+      closable={false}
+      footer={null}
+    >
+      <CheckCard.Group
+        multiple
+        bordered
+        defaultValue={defaultValue}
+        onChange={(value) => {
+          // @ts-ignore
+          setResponse(value);
+        }}
+      >
+        {tabs.map((tab) => {
+          return (
+            <Row>
+              {tab.options.map((option) => {
+                return (
+                  <Col span={5}>
+                    <CheckCard
+                      title={option.name}
+                      description={option.desc}
+                      cover={
+                        <img
+                          alt={option.code.toString()}
+                          src={`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${option.code}.jpg`}
+                        />
+                      }
+                      value={option.response}
+                    />
+                  </Col>
+                );
+              })}
+            </Row>
+          );
+        })}
+      </CheckCard.Group>
+      <Button
+        title="完成"
+        disabled={response.length < min || response.length > max}
+        onClick={() => {
+          sendSelectCardResponse(response);
+          dispatch(setCheckCardModalIsOpen(false));
+          dispatch(resetCheckCardModal());
+        }}
+      />
+    </Modal>
+  );
+};
+
+export default CheckCardModal;

src/ui/Duel/main.tsx

@@ -13,6 +13,7 @@ import Deck from "./deck";
 import Exclusion from "./exclusion";
 import Cemeteries from "./cemetery";
 import CardListModal from "./cardListModal";
+import CheckCardModal from "./checkCardModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -40,6 +41,7 @@ const NeosDuel = () => (
     <CardModal />
     <CardListModal />
     <HintNotification />
+    <CheckCardModal />
   </>
 );