add checkCardModalV3

src/reducers/duel/mod.ts

@@ -58,6 +58,8 @@ import {
   setCheckCardModalV3AllLevelImpl,
   setCheckCardModalV3OverFlowImpl,
   setCheckCardModalV3ResponseAbleImpl,
+  resetCheckCardModalV3Impl,
+  setCheckCardModalV3SelectedImpl,
 } from "./modal/mod";
 import {
   MonsterState,
@@ -176,8 +178,10 @@ const initialState: DuelState = {
     checkCardModalV3: {
       isOpen: false,
       overflow: false,
+      allLevel: 0,
       mustSelectList: [],
       selectAbleList: [],
+      selectedList: [],
     },
   },
 };
@@ -270,6 +274,8 @@ const duelSlice = createSlice({
     setCheckCardModalV3AllLevel: setCheckCardModalV3AllLevelImpl,
     setCheckCardModalV3OverFlow: setCheckCardModalV3OverFlowImpl,
     setCheckCardModalV3ResponseAble: setCheckCardModalV3ResponseAbleImpl,
+    resetCheckCardModalV3: resetCheckCardModalV3Impl,
+    setCheckCardModalV3Selected: setCheckCardModalV3SelectedImpl,
 
     // 通用的`Reducer`
     clearAllIdleInteractivities: clearAllIdleInteractivitiesImpl,
@@ -379,6 +385,8 @@ export const {
   setCheckCardModalV3AllLevel,
   setCheckCardModalV3OverFlow,
   setCheckCardModalV3ResponseAble,
+  resetCheckCardModalV3,
+  setCheckCardModalV3Selected,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {
   return state.duel.meInitInfo != null;

src/reducers/duel/modal/checkCardModalV3Slice.ts

@@ -5,7 +5,7 @@ import {
   CaseReducer,
   createAsyncThunk,
 } from "@reduxjs/toolkit";
-import { fetchCard } from "../../../api/cards";
+import { CardMeta, fetchCard } from "../../../api/cards";
 import { RootState } from "../../../store";
 
 // 更新打开状态
@@ -46,6 +46,17 @@ export const setCheckCardModalV3ResponseAbleImpl: DuelReducer<boolean> = (
   state.modalState.checkCardModalV3.responseable = action.payload;
 };
 
+export const setCheckCardModalV3SelectedImpl: DuelReducer<
+  {
+    meta: CardMeta;
+    level1: number;
+    level2: number;
+    response: number;
+  }[]
+> = (state, action) => {
+  state.modalState.checkCardModalV3.selectedList = action.payload;
+};
+
 // 增加卡牌选项
 export const fetchCheckCardMetasV3 = createAsyncThunk(
   "duel/fetchCheckCardMetaV3",
@@ -113,10 +124,11 @@ export const resetCheckCardModalV3Impl: CaseReducer<DuelState> = (state) => {
   const modalState = state.modalState.checkCardModalV3;
   modalState.isOpen = false;
   modalState.overflow = false;
-  modalState.allLevel = undefined;
+  modalState.allLevel = 0;
   modalState.responseable = undefined;
   modalState.mustSelectList = [];
   modalState.selectAbleList = [];
+  modalState.selectedList = [];
 };
 
 export const selectCheckCardModalV3 = (state: RootState) =>

src/reducers/duel/modal/mod.ts

@@ -75,7 +75,7 @@ export interface ModalState {
   checkCardModalV3: {
     isOpen: boolean;
     overflow: boolean;
-    allLevel?: number;
+    allLevel: number;
     selectMin?: number;
     selectMax?: number;
     responseable?: boolean;
@@ -91,6 +91,12 @@ export interface ModalState {
       level2: number;
       response: number;
     }[];
+    selectedList: {
+      meta: CardMeta;
+      level1: number;
+      level2: number;
+      response: number;
+    }[];
   };
 }
 

src/ui/Duel/checkCardModalV3.tsx

+import React from "react";
+import { useAppSelector } from "../../hook";
+import { store } from "../../store";
+import { Modal, Button, Card, Row, Col } from "antd";
+import { CheckCard } from "@ant-design/pro-components";
+import { sendSelectCardResponse } from "../../api/ocgcore/ocgHelper";
+import {
+  resetCheckCardModalV3,
+  setCheckCardModalV3IsOpen,
+  setCheckCardModalV3ResponseAble,
+  setCheckCardModalV3Selected,
+} from "../../reducers/duel/mod";
+import NeosConfig from "../../../neos.config.json";
+import { selectCheckCardModalV3 } from "../../reducers/duel/modal/checkCardModalV3Slice";
+
+const CheckCardModalV3 = () => {
+  const dispatch = store.dispatch;
+  const state = useAppSelector(selectCheckCardModalV3);
+  const isOpen = state.isOpen;
+  const min = state.selectMin || 0;
+  const max = state.selectMax || 0;
+  const mustSelectOptions = state.mustSelectList;
+  const selectAbleOptions = state.selectAbleList;
+  const selectedOptions = state.selectedList;
+  const overflow = state.overflow;
+  const LevelSum = state.allLevel;
+  const Level1Sum = mustSelectOptions
+    .concat(selectedOptions)
+    .map((option) => option.level1)
+    .reduce((sum, current) => sum + current, 0);
+  const Level2Sum = mustSelectOptions
+    .concat(selectedOptions)
+    .map((option) => option.level2)
+    .reduce((sum, current) => sum + current, 0);
+
+  const responseable =
+    (overflow
+      ? Level1Sum >= LevelSum || Level2Sum >= LevelSum
+      : Level1Sum == LevelSum || Level2Sum == LevelSum) &&
+    selectedOptions.length <= max &&
+    selectedOptions.length >= min;
+
+  const onFinish = () => {
+    sendSelectCardResponse(
+      mustSelectOptions.concat(selectedOptions).map((option) => option.response)
+    );
+    dispatch(setCheckCardModalV3IsOpen(false));
+    dispatch(resetCheckCardModalV3());
+    dispatch(setCheckCardModalV3ResponseAble(false));
+  };
+
+  return (
+    <Modal
+      title={`请选择卡片，最少${min}张，最多${max}张`}
+      open={isOpen}
+      closable={false}
+      footer={
+        <>
+          <Button disabled={!responseable} onClick={onFinish}>
+            finish
+          </Button>
+        </>
+      }
+      width={800}
+    >
+      <CheckCard.Group
+        bordered
+        size="small"
+        multiple={true}
+        onChange={(values: any) => {
+          setCheckCardModalV3Selected(values);
+        }}
+      >
+        <Row>
+          {selectAbleOptions.map((option, idx) => {
+            return (
+              <Col span={4} key={idx}>
+                <CheckCard
+                  title={option.meta.text.name}
+                  description={option.meta.text.desc}
+                  style={{ width: 120 }}
+                  cover={
+                    <img
+                      alt={option.meta.id.toString()}
+                      src={`${NeosConfig.cardImgUrl}/${option.meta.id}.jpg`}
+                      style={{ width: 100 }}
+                    />
+                  }
+                  value={option}
+                />
+              </Col>
+            );
+          })}
+        </Row>
+      </CheckCard.Group>
+      <p>必须选择的卡片</p>
+      <Row>
+        {selectedOptions.map((option, idx) => {
+          return (
+            <Col span={4} key={idx}>
+              <Card
+                hoverable
+                style={{ width: 120 }}
+                cover={
+                  <img
+                    alt={option.meta.id.toString()}
+                    src={`${NeosConfig.cardImgUrl}/${option.meta.id}.jpg`}
+                  />
+                }
+              />
+            </Col>
+          );
+        })}
+      </Row>
+    </Modal>
+  );
+};
+
+export default CheckCardModalV3;

src/ui/Duel/main.tsx

@@ -26,6 +26,7 @@ import { Row } from "antd";
 import SendBox from "./sendBox";
 import PlayerStatus from "./status";
 import Alert from "./alert";
+import CheckCardModalV3 from "./checkCardModalV3";
 
 // Ref: https://github.com/brianzinn/react-babylonjs/issues/126
 const NeosDuel = () => {
@@ -46,6 +47,7 @@ const NeosDuel = () => {
       <PositionModal />
       <OptionModal />
       <CheckCardModalV2 />
+      <CheckCardModalV3 />
     </>
   );
 };