optimize ui

src/ui/Duel/checkCardModal.tsx

@@ -14,11 +14,12 @@ import {
   setCheckCardModalIsOpen,
 } from "../../reducers/duel/mod";
 import { Button, Row, Col, Popover } from "antd";
-import { CheckCard } from "@ant-design/pro-components";
+import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
 import {
   sendSelectCardResponse,
   sendSelectChainResponse,
 } from "../../api/ocgcore/ocgHelper";
+import { ThunderboltOutlined } from "@ant-design/icons";
 import NeosConfig from "../../../neos.config.json";
 import DragModal from "./dragModal";
 
@@ -108,15 +109,8 @@ const CheckCardModal = () => {
               {tab.options.map((option, idx) => {
                 return (
                   <Col span={4} key={idx}>
-                    <Popover
-                      content={
-                        <div>
-                          <p>{option.name}</p>
-                          <p>{option.effectDesc}</p>
-                        </div>
-                      }
-                    >
-                      <CheckCard
+                    <HoverCheckCard
+                      hoverContent={option.effectDesc}
                       title={option.name}
                       description={option.desc}
                       style={{ width: 120 }}
@@ -129,7 +123,6 @@ const CheckCardModal = () => {
                       }
                       value={option.response}
                     />
-                    </Popover>
                   </Col>
                 );
               })}
@@ -141,4 +134,28 @@ const CheckCardModal = () => {
   );
 };
 
+const HoverCheckCard = (props: CheckCardProps & { hoverContent?: string }) => {
+  const [hover, setHover] = useState(false);
+
+  const onMouseEnter = () => setHover(true);
+  const onMouseLeave = () => setHover(false);
+
+  return (
+    <>
+      <CheckCard {...props} />
+      {props.hoverContent ? (
+        <Popover content={<p>{props.hoverContent}</p>} open={hover}>
+          <Button
+            icon={<ThunderboltOutlined />}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          ></Button>
+        </Popover>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
 export default CheckCardModal;

src/ui/Duel/status.tsx

@@ -8,7 +8,6 @@ import {
   selectMeInitInfo,
   selectOpInitInfo,
 } from "../../reducers/duel/initInfoSlice";
-import { selectCurrentPlayerIsMe } from "../../reducers/duel/turnSlice";
 import { selectWaiting } from "../../reducers/duel/mod";
 
 const Config = NeosConfig.ui.status;