add atk and def in cardModal

neos-assets/battle-axe.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M240.094 19.594c-56.69.364-110.882 29.054-151.594 72.344-53.428 56.81-81.948 137.907-61.03 210.093 16.33-8.797 32.757-15.987 48.936-21.374-6.327-123.16 89.247-210.922 200.03-210.344 4.255-13.365 10.268-27.308 18.127-41.874-16.323-5.43-32.736-8.36-48.97-8.782-1.833-.047-3.67-.074-5.5-.062zM271.28 88.97C173.724 90.715 91.367 166.07 94.907 275.28c10.986-2.73 21.788-4.582 32.28-5.436 14.59-1.187 28.69-.463 41.783 2.437L278.312 162.94c-5.26-12.1-8.473-25.024-9.344-38.75-.716-11.256.14-22.983 2.592-35.22-.093.002-.187 0-.28 0zm60.845 60.718l-16.875 16.875L345.75 197l16.813-16.813-30.438-30.5zm-37.125 23L175.625 292.063l44.625 44.562 119.313-119.313L295 172.688zm189.875 46.093c-14.466 7.808-28.318 13.807-41.594 18.064.75 111.013-87.243 206.8-210.686 200.28-5.39 16.104-12.552 32.462-21.313 48.72 72.19 20.922 153.313-7.6 210.126-61.03 57.045-53.65 88.516-130.72 63.47-206.033zm-136 15.657L240.687 342.625c3.23 13.563 4.086 28.245 2.844 43.47-.862 10.58-2.752 21.476-5.53 32.56 109.585 3.718 185.128-79.008 186.594-176.905-12.342 2.506-24.16 3.403-35.5 2.688-14.287-.9-27.698-4.347-40.22-10zM169.5 312.313L20.094 461.72V494H48.75l151.188-151.188-30.438-30.5z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file

neos-assets/checked-shield.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 512px; width: 512px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M48.906 19.656v10.782c0 103.173 10.53 206.07 41.313 289.53 30.78 83.463 82.763 148.094 164.53 170.563l2.188.626 2.25-.5c89.686-19.12 142.322-84.028 171.187-168.344 28.865-84.315 35.406-188.656 35.406-291.875v-10.78l-10.655 1.53C323.26 39.954 191.452 40 59.595 21.188l-10.69-1.53zM67.75 41.03c63.242 8.536 126.495 12.792 189.75 12.782v184.532h174.78c-4.905 27.572-11.31 53.747-19.592 77.937-27.348 79.884-73.757 137.33-155.157 155.564-.008-.003-.02.003-.03 0v-233.5H86.53c-12.87-60.99-18.277-128.81-18.78-197.313z" fill="#fff" fill-opacity="1"></path></g></svg>
\ No newline at end of file

package.json

@@ -28,6 +28,7 @@
     "react-scripts": "^2.1.3",
     "socket.io-client": "^4.5.1",
     "sql.js": "^1.8.0",
+    "vite-plugin-svgr": "^2.4.0",
     "web-vitals": "^2.1.4",
     "ygopro-deck-encode": "^1.0.3"
   },

src/ui/Duel/cardModal.tsx

@@ -10,9 +10,12 @@ import {
   setCardModalIsOpen,
   clearAllIdleInteractivities,
 } from "../../reducers/duel/mod";
-import { Modal, Card, Button } from "antd";
+import { Modal, Card, Button, Row, Col } from "antd";
 import { sendSelectIdleCmdResponse } from "../../api/ocgcore/ocgHelper";
+import Icon from "@ant-design/icons";
 import NeosConfig from "../../../neos.config.json";
+import { ReactComponent as BattleSvg } from "../../../neos-assets/battle-axe.svg";
+import { ReactComponent as DefenceSvg } from "../../../neos-assets/checked-shield.svg";
 
 const { Meta } = Card;
 const CARD_WIDTH = 240;
@@ -23,6 +26,8 @@ const CardModal = () => {
   const meta = useAppSelector(selectCardModalMeta);
   const name = meta?.text.name;
   const desc = meta?.text.desc;
+  const atk = meta?.data.atk || 0;
+  const def = meta?.data.def || 0;
   const imgUrl = meta?.id
     ? `${NeosConfig.cardImgUrl}/${meta.id}.jpg`
     : undefined;
@@ -41,6 +46,21 @@ const CardModal = () => {
       >
         <Meta title={name} />
         <p>{desc}</p>
+        <p>
+          <Row gutter={8}>
+            <Col>
+              <Icon component={BattleSvg} />
+              <a>{atk}</a>
+            </Col>
+            <Col>
+              <div>/</div>
+            </Col>
+            <Col>
+              <Icon component={DefenceSvg} />
+              <a>{def}</a>
+            </Col>
+          </Row>
+        </p>
       </Card>
       {interactivies.map((interactive, idx) => {
         return (

vite.config.ts

 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import svgr from 'vite-plugin-svgr'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react(), svgr()]
 })