Merge branch 'feat/atk' into 'main'

Feat/atk

See merge request mycard/Neos!126

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/reducers/duel/mod.ts

@@ -27,8 +27,7 @@ import { HintState, hintCase } from "./hintSlice";
 import {
   ModalState,
   setCardModalIsOpenImpl,
-  setCardModalTextImpl,
-  setCardModalImgUrlImpl,
+  setCardModalMetaImpl,
   setCardModalInteractiviesImpl,
   setCardListModalIsOpenImpl,
   setCardListModalInfoImpl,
@@ -227,8 +226,7 @@ const duelSlice = createSlice({
 
     // UI相关`Reducer`
     setCardModalIsOpen: setCardModalIsOpenImpl,
-    setCardModalText: setCardModalTextImpl,
-    setCardModalImgUrl: setCardModalImgUrlImpl,
+    setCardModalMeta: setCardModalMetaImpl,
     setCardModalInteractivies: setCardModalInteractiviesImpl,
     setCardListModalIsOpen: setCardListModalIsOpenImpl,
     setCardListModalInfo: setCardListModalInfoImpl,
@@ -288,8 +286,7 @@ export const {
   addHandsIdleInteractivity,
   updateTimeLimit,
   setCardModalIsOpen,
-  setCardModalText,
-  setCardModalImgUrl,
+  setCardModalMeta,
   setCardModalInteractivies,
   initMonsters,
   addMonsterPlaceInteractivities,

src/reducers/duel/modal/cardModalSlice.ts

 import { PayloadAction, CaseReducer } from "@reduxjs/toolkit";
 import { DuelState } from "../mod";
 import { RootState } from "../../../store";
+import { CardMeta } from "../../../api/cards";
 
 // 更新卡牌弹窗打开状态
 export const setCardModalIsOpenImpl: CaseReducer<
@@ -11,23 +12,11 @@ export const setCardModalIsOpenImpl: CaseReducer<
 };
 
 // 更新卡牌弹窗文本
-export const setCardModalTextImpl: CaseReducer<
+export const setCardModalMetaImpl: CaseReducer<
   DuelState,
-  PayloadAction<[string?, string?]>
+  PayloadAction<CardMeta>
 > = (state, action) => {
-  const name = action.payload[0];
-  const desc = action.payload[1];
-
-  state.modalState.cardModal.name = name;
-  state.modalState.cardModal.desc = desc;
-};
-
-// 更新卡牌弹窗图片Url
-export const setCardModalImgUrlImpl: CaseReducer<
-  DuelState,
-  PayloadAction<string>
-> = (state, action) => {
-  state.modalState.cardModal.imgUrl = action.payload;
+  state.modalState.cardModal.meta = action.payload;
 };
 
 // 更新卡牌弹窗互动选项
@@ -40,11 +29,7 @@ export const setCardModalInteractiviesImpl: CaseReducer<
 
 export const selectCardModalIsOpen = (state: RootState) =>
   state.duel.modalState.cardModal.isOpen;
-export const selectCardModalName = (state: RootState) =>
-  state.duel.modalState.cardModal.name;
-export const selectCardModalDesc = (state: RootState) =>
-  state.duel.modalState.cardModal.desc;
-export const selectCardModalImgUrl = (state: RootState) =>
-  state.duel.modalState.cardModal.imgUrl;
+export const selectCardModalMeta = (state: RootState) =>
+  state.duel.modalState.cardModal.meta;
 export const selectCardModalInteractivies = (state: RootState) =>
   state.duel.modalState.cardModal.interactivies;

src/reducers/duel/modal/mod.ts

+import { CardMeta } from "../../../api/cards";
 import { ygopro } from "../../../api/ocgcore/idl/ocgcore";
 
 export interface ModalState {
   // 卡牌弹窗
   cardModal: {
     isOpen: boolean;
-    name?: string;
-    desc?: string;
-    imgUrl?: string;
+    meta?: CardMeta;
     interactivies: { desc: string; response: number }[];
   };
   // 卡牌列表弹窗

src/ui/Duel/cardModal.tsx

@@ -3,17 +3,19 @@ import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import {
   selectCardModalIsOpen,
-  selectCardModalName,
-  selectCardModalDesc,
-  selectCardModalImgUrl,
   selectCardModalInteractivies,
+  selectCardModalMeta,
 } from "../../reducers/duel/modal/mod";
 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;
@@ -21,9 +23,14 @@ 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 meta = useAppSelector(selectCardModalMeta);
+  const name = meta?.text.name;
+  const desc = meta?.text.desc;
+  const atk = meta?.data.atk;
+  const def = meta?.data.def;
+  const imgUrl = meta?.id
+    ? `${NeosConfig.cardImgUrl}/${meta.id}.jpg`
+    : undefined;
   const interactivies = useAppSelector(selectCardModalInteractivies);
 
   const handleOkOrCancel = () => {
@@ -39,6 +46,29 @@ const CardModal = () => {
       >
         <Meta title={name} />
         <p>{desc}</p>
+        <p>
+          <Row gutter={8}>
+            {atk ? (
+              <Col>
+                <Icon component={BattleSvg} />
+                <a>{atk}</a>
+              </Col>
+            ) : (
+              <></>
+            )}
+            <Col>
+              <div>/</div>
+            </Col>
+            {def ? (
+              <Col>
+                <Icon component={DefenceSvg} />
+                <a>{def}</a>
+              </Col>
+            ) : (
+              <></>
+            )}
+          </Row>
+        </p>
       </Card>
       {interactivies.map((interactive, idx) => {
         return (

src/ui/Duel/fixedSlot.tsx

@@ -6,10 +6,9 @@ import { useClick } from "./hook";
 import { sendSelectPlaceResponse } from "../../api/ocgcore/ocgHelper";
 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import {
-  setCardModalImgUrl,
   setCardModalInteractivies,
   setCardModalIsOpen,
-  setCardModalText,
+  setCardModalMeta,
 } from "../../reducers/duel/mod";
 import { ActionCreatorWithPayload } from "@reduxjs/toolkit";
 import { interactTypeToString } from "./util";
@@ -55,17 +54,7 @@ const FixedSlot = (props: {
         dispatch(props.clearPlaceInteractivitiesAction(0));
         dispatch(props.clearPlaceInteractivitiesAction(1));
       } else if (props.state.occupant) {
-        dispatch(
-          setCardModalText([
-            props.state.occupant.text.name,
-            props.state.occupant.text.desc,
-          ])
-        );
-        dispatch(
-          setCardModalImgUrl(
-            `${NeosConfig.cardImgUrl}/${props.state.occupant.id}.jpg`
-          )
-        );
+        dispatch(setCardModalMeta(props.state.occupant));
         dispatch(
           setCardModalInteractivies(
             props.state.idleInteractivities.map((interactivity) => {

src/ui/Duel/hands.tsx

@@ -3,9 +3,8 @@ import { useAppSelector } from "../../hook";
 import { selectMeHands, selectOpHands } from "../../reducers/duel/handsSlice";
 import { CardState } from "../../reducers/duel/generic";
 import {
-  setCardModalImgUrl,
   setCardModalIsOpen,
-  setCardModalText,
+  setCardModalMeta,
   setCardModalInteractivies,
 } from "../../reducers/duel/mod";
 import { store } from "../../store";
@@ -112,12 +111,9 @@ const CHand = (props: {
 
   useClick(
     () => {
-      dispatch(
-        setCardModalText([state.occupant?.text.name, state.occupant?.text.desc])
-      );
-      dispatch(
-        setCardModalImgUrl(`${NeosConfig.cardImgUrl}/${state.occupant?.id}.jpg`)
-      );
+      if (state.occupant) {
+        dispatch(setCardModalMeta(state.occupant));
+      }
       dispatch(
         setCardModalInteractivies(
           state.idleInteractivities.map((interactive) => {

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()]
 })