add CardListModal component

src/ui/Duel/cardListModal.tsx

+import React from "react";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
+import {
+  selectCardListModalIsOpen,
+  selectCardListModalInfo,
+} from "../../reducers/duel/modalSlice";
+import { setCardListModalIsOpen } from "../../reducers/duel/mod";
+import { Modal, List, Popover, Card } from "antd";
+
+const { Meta } = Card;
+const CARD_WIDTH = 100;
+
+const CardListModal = () => {
+  const dispatch = store.dispatch;
+  const isOpen = useAppSelector(selectCardListModalIsOpen);
+  const list = useAppSelector(selectCardListModalInfo);
+
+  const handleOkOrCancel = () => {
+    dispatch(setCardListModalIsOpen(false));
+  };
+
+  return (
+    <Modal open={isOpen} onOk={handleOkOrCancel} onCancel={handleOkOrCancel}>
+      <List
+        itemLayout="horizontal"
+        dataSource={list}
+        renderItem={(item) => (
+          <Popover
+            content={
+              <Card
+                hoverable
+                style={{ width: CARD_WIDTH }}
+                cover={<img alt={item.name} src={item.imgUrl} />}
+              >
+                <Meta title={item.name} />
+                <p>{item.desc}</p>
+              </Card>
+            }
+          >
+            <List.Item>
+              <List.Item.Meta title={item.name} description={item.desc} />
+            </List.Item>
+          </Popover>
+        )}
+      ></List>
+    </Modal>
+  );
+};
+
+export default CardListModal;

src/ui/Duel/cardModal.tsx

@@ -31,32 +31,30 @@ const CardModal = () => {
   };
 
   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>
-        {interactivies.map((interactive, idx) => {
-          return (
-            <Button
-              key={idx}
-              onClick={() => {
-                sendSelectIdleCmdResponse(interactive.response);
-                dispatch(setCardModalIsOpen(false));
-                dispatch(clearHandsInteractivity(0));
-              }}
-            >
-              {interactive.desc}
-            </Button>
-          );
-        })}
-      </Modal>
-    </>
+    <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>
+      {interactivies.map((interactive, idx) => {
+        return (
+          <Button
+            key={idx}
+            onClick={() => {
+              sendSelectIdleCmdResponse(interactive.response);
+              dispatch(setCardModalIsOpen(false));
+              dispatch(clearHandsInteractivity(0));
+            }}
+          >
+            {interactive.desc}
+          </Button>
+        );
+      })}
+    </Modal>
   );
 };
 

src/ui/Duel/main.tsx

@@ -12,6 +12,7 @@ import Field from "./field";
 import Deck from "./deck";
 import Exclusion from "./exclusion";
 import Cemeteries from "./cemetery";
+import CardListModal from "./cardListModal";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => (
@@ -37,6 +38,7 @@ const NeosDuel = () => (
       )}
     </ReactReduxContext.Consumer>
     <CardModal />
+    <CardListModal />
     <HintNotification />
   </>
 );