add CardModal component

src/reducers/duel/mod.ts

@@ -77,6 +77,9 @@ export const {
   clearHandsInteractivity,
   addHandsInteractivity,
   updateTimeLimit,
+  setCardModalIsOpen,
+  setCardModalText,
+  setCardModalImgUrl,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/ui/Duel/simpleDuel/cardModal.tsx

+import React from "react";
+import { useAppSelector } from "../../../hook";
+import { store } from "../../../store";
+import {
+  selectCardModalIsOpen,
+  selectCardModalName,
+  selectCardModalDesc,
+  selectCardModalImgUrl,
+} from "../../../reducers/duel/modal";
+import { setCardModalIsOpen } from "../../../reducers/duel/mod";
+import { Modal, Card } from "antd";
+
+const { Meta } = Card;
+const CARD_WIDTH = 240;
+
+const CardModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectCardModalIsOpen);
+  const name = useAppSelector(selectCardModalName);
+  const desc = useAppSelector(selectCardModalDesc);
+  const imgUrl = useAppSelector(selectCardModalImgUrl);
+
+  const handleOkOrCancel = () => {
+    dispatch(setCardModalIsOpen(false));
+  };
+
+  return (
+    <>
+      <Modal open={isOpen} onOk={handleOkOrCancel} onCancel={handleOkOrCancel}>
+        <Card
+          hoverable
+          style={{ width: CARD_WIDTH }}
+          cover={<img alt={name} src={imgUrl} />}
+        >
+          <Meta title={name} />
+          <p>{desc}</p>
+        </Card>
+      </Modal>
+    </>
+  );
+};
+
+export default CardModal;

src/ui/Duel/simpleDuel/mod.tsx

@@ -20,6 +20,7 @@ import * as CONFIG from "../../../config/ui";
 import { Card } from "../../../reducers/duel/util";
 import { selectCurrentPlayer } from "../../../reducers/duel/turnSlice";
 import { selectCurrentPhase } from "../../../reducers/duel/phaseSlice";
+import CardModal from "./cardModal";
 
 // CONFIG
 
@@ -136,11 +137,14 @@ export default class SimpleDuelPlateImpl implements IDuelPlate {
     }, []);
 
     return (
-      <canvas
-        width={window.innerWidth}
-        height={window.innerHeight}
-        ref={canvasRef}
-      />
+      <>
+        <canvas
+          width={window.innerWidth}
+          height={window.innerHeight}
+          ref={canvasRef}
+        />
+        <CardModal />
+      </>
     );
   }