add cancelable logic

src/reducers/duel/mod.ts

@@ -28,6 +28,8 @@ import {
   setCheckCardModalIsOpenImpl,
   setCheckCardModalMinMaxImpl,
   setCheckCardModalOnSubmitImpl,
+  setCheckCardMOdalCancelAbleImpl,
+  setCheckCardModalCancelResponseImpl,
   resetCheckCardModalImpl,
   checkCardModalCase,
 } from "./modalSlice";
@@ -81,7 +83,7 @@ const initialState: DuelState = {
   modalState: {
     cardModal: { isOpen: false, interactivies: [] },
     cardListModal: { isOpen: false, list: [] },
-    checkCardModal: { isOpen: false, tags: [] },
+    checkCardModal: { isOpen: false, cancelAble: false, tags: [] },
   },
 };
 
@@ -125,6 +127,8 @@ const duelSlice = createSlice({
     setCheckCardModalIsOpen: setCheckCardModalIsOpenImpl,
     setCheckCardModalMinMax: setCheckCardModalMinMaxImpl,
     setCheckCardModalOnSubmit: setCheckCardModalOnSubmitImpl,
+    setCheckCardMOdalCancelAble: setCheckCardMOdalCancelAbleImpl,
+    setCheckCardModalCancelResponse: setCheckCardModalCancelResponseImpl,
     resetCheckCardModal: resetCheckCardModalImpl,
   },
   extraReducers(builder) {
@@ -162,6 +166,8 @@ export const {
   setCheckCardModalIsOpen,
   setCheckCardModalMinMax,
   setCheckCardModalOnSubmit,
+  setCheckCardMOdalCancelAble,
+  setCheckCardModalCancelResponse,
   resetCheckCardModal,
 } = duelSlice.actions;
 export const selectDuelHsStart = (state: RootState) => {

src/reducers/duel/modalSlice.ts

@@ -33,6 +33,8 @@ export interface ModalState {
     onSubmit?: string;
     selectMin?: number;
     selectMax?: number;
+    cancelAble: boolean;
+    cancelResponse?: number;
     tags: {
       tagName: string;
       options: {
@@ -125,6 +127,22 @@ export const setCheckCardModalOnSubmitImpl: CaseReducer<
   state.modalState.checkCardModal.onSubmit = action.payload;
 };
 
+// 更新卡牌选择弹窗是否可以取消
+export const setCheckCardMOdalCancelAbleImpl: CaseReducer<
+  DuelState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.modalState.checkCardModal.cancelAble = action.payload;
+};
+
+// 更新卡牌选择弹窗取消时返回给服务端的`Response`
+export const setCheckCardModalCancelResponseImpl: CaseReducer<
+  DuelState,
+  PayloadAction<number>
+> = (state, action) => {
+  state.modalState.checkCardModal.cancelResponse = action.payload;
+};
+
 // 增加卡牌选择选项
 export const fetchCheckCardMeta = createAsyncThunk(
   "duel/fetchCheckCardMeta",
@@ -204,6 +222,8 @@ export const resetCheckCardModalImpl: CaseReducer<DuelState> = (state) => {
   state.modalState.checkCardModal.isOpen = false;
   state.modalState.checkCardModal.selectMin = undefined;
   state.modalState.checkCardModal.selectMax = undefined;
+  state.modalState.checkCardModal.cancelAble = false;
+  state.modalState.checkCardModal.cancelResponse = undefined;
   state.modalState.checkCardModal.tags = [];
 };
 
@@ -233,3 +253,7 @@ export const selectCheckCardModalTags = (state: RootState) =>
   state.duel.modalState.checkCardModal.tags;
 export const selectCheckCardModalOnSubmit = (state: RootState) =>
   state.duel.modalState.checkCardModal.onSubmit;
+export const selectCheckCardModalCancelAble = (state: RootState) =>
+  state.duel.modalState.checkCardModal.cancelAble;
+export const selectCheckCardModalCacnelResponse = (state: RootState) =>
+  state.duel.modalState.checkCardModal.cancelResponse;

src/service/duel/selectChain.ts

 import { ygopro } from "../../api/ocgcore/idl/ocgcore";
 import { sendSelectChainResponse } from "../../api/ocgcore/ocgHelper";
 import {
+  setCheckCardMOdalCancelAble,
+  setCheckCardModalCancelResponse,
   setCheckCardModalIsOpen,
   setCheckCardModalMinMax,
   setCheckCardModalOnSubmit,
@@ -61,9 +63,11 @@ export default (selectChain: MsgSelectChain, dispatch: AppDispatch) => {
     case 2: // 处理多张
     case 3: {
       // 处理强制发动的卡
-      // TODO：非强制发动的场景需要支持取消
+
       dispatch(setCheckCardModalMinMax({ min: 1, max: 1 }));
       dispatch(setCheckCardModalOnSubmit("sendSelectChainResponse"));
+      dispatch(setCheckCardMOdalCancelAble(!forced));
+      dispatch(setCheckCardModalCancelResponse(-1));
 
       for (const chain of chains) {
         const tagName = CardZoneToChinese(chain.location.location);

src/ui/Duel/checkCardModal.tsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { useAppSelector } from "../../hook";
 import { store } from "../../store";
 import {
+  selectCheckCardModalCacnelResponse,
+  selectCheckCardModalCancelAble,
   selectCheckCardModalIsOpen,
   selectCheckCardModalMinMax,
   selectCheckCardModalOnSubmit,
@@ -24,38 +26,63 @@ const CheckCardModal = () => {
   const { min, max } = useAppSelector(selectCheckCardModalMinMax);
   const tabs = useAppSelector(selectCheckCardModalTags);
   const onSubmit = useAppSelector(selectCheckCardModalOnSubmit);
+  const cancelAble = useAppSelector(selectCheckCardModalCancelAble);
+  const cancelResponse = useAppSelector(selectCheckCardModalCacnelResponse);
   const [response, setResponse] = useState<number[]>([]);
   const defaultValue: number[] = [];
 
+  // TODO: 这里可以考虑更好地封装
+  const sendResponseHandler = (
+    handlerName: string | undefined,
+    response: number[]
+  ) => {
+    switch (handlerName) {
+      case "sendSelectChainResponse": {
+        sendSelectChainResponse(response[0]);
+        break;
+      }
+      case "sendSelectCardResponse": {
+        sendSelectCardResponse(response);
+        break;
+      }
+      default: {
+      }
+    }
+  };
+
   return (
     <Modal
       title={`请选择${min}到${max}张卡片`}
       open={isOpen}
       closable={false}
       footer={
-        <Button
-          disabled={response.length < min || response.length > max}
-          onClick={() => {
-            switch (onSubmit) {
-              case "sendSelectChainResponse": {
-                sendSelectChainResponse(response[0]);
-
-                break;
-              }
-              case "sendSelectCardResponse": {
-                sendSelectCardResponse(response);
-
-                break;
-              }
-              default: {
-              }
-            }
-            dispatch(setCheckCardModalIsOpen(false));
-            dispatch(resetCheckCardModal());
-          }}
-        >
-          submit
-        </Button>
+        <>
+          <Button
+            disabled={response.length < min || response.length > max}
+            onClick={() => {
+              sendResponseHandler(onSubmit, response);
+              dispatch(setCheckCardModalIsOpen(false));
+              dispatch(resetCheckCardModal());
+            }}
+          >
+            submit
+          </Button>
+          {cancelAble ? (
+            <Button
+              onClick={() => {
+                if (cancelResponse) {
+                  sendResponseHandler(onSubmit, [cancelResponse]);
+                }
+                dispatch(setCheckCardModalIsOpen(false));
+                dispatch(resetCheckCardModal());
+              }}
+            >
+              cancel
+            </Button>
+          ) : (
+            <></>
+          )}
+        </>
       }
       width={800}
     >