add Popover in CheckCardModal

src/reducers/duel/modalSlice.ts

@@ -135,7 +135,7 @@ export const fetchCheckCardMeta = createAsyncThunk(
         code: meta.id,
         name: meta.text.name,
         desc: meta.text.desc,
-        effectDesc
+        effectDesc,
       },
     };
 

src/service/duel/selectChain.ts

@@ -2,4 +2,11 @@ import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { AppDispatch } from "../../store";
 import MsgSelectChain = ygopro.StocGameMessage.MsgSelectChain;
 
-export default (selectChain: MsgSelectChain, dispatch: AppDispatch) => {};
+export default (selectChain: MsgSelectChain, dispatch: AppDispatch) => {
+  const player = selectChain.player;
+  const spCount = selectChain.special_count;
+  const forced = selectChain.forced;
+  const hint0 = selectChain.hint0;
+  const hint1 = selectChain.hint1;
+  const chains = selectChain.chains;
+};

src/ui/Duel/checkCardModal.tsx

@@ -10,7 +10,7 @@ import {
   resetCheckCardModal,
   setCheckCardModalIsOpen,
 } from "../../reducers/duel/mod";
-import { Modal, Button, Row, Col } from "antd";
+import { Modal, Button, Row, Col, Popover } from "antd";
 import { CheckCard } from "@ant-design/pro-components";
 import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
 
@@ -57,19 +57,28 @@ const CheckCardModal = () => {
               {tab.options.map((option, idx) => {
                 return (
                   <Col span={4} key={idx}>
-                    <CheckCard
-                      title={option.name}
-                      description={option.desc}
-                      style={{ width: 120 }}
-                      cover={
-                        <img
-                          alt={option.code.toString()}
-                          src={`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${option.code}.jpg`}
-                          style={{ width: 100 }}
-                        />
+                    <Popover
+                      content={
+                        <div>
+                          <p>{option.name}</p>
+                          <p>{option.effectDesc}</p>
+                        </div>
                       }
-                      value={option.response}
-                    />
+                    >
+                      <CheckCard
+                        title={option.name}
+                        description={option.desc}
+                        style={{ width: 120 }}
+                        cover={
+                          <img
+                            alt={option.code.toString()}
+                            src={`https://cdn02.moecube.com:444/images/ygopro-images-zh-CN/${option.code}.jpg`}
+                            style={{ width: 100 }}
+                          />
+                        }
+                        value={option.response}
+                      />
+                    </Popover>
                   </Col>
                 );
               })}