finish select logic

src/service/duel/selectUnselectCard.ts

@@ -26,6 +26,7 @@ export default async ({
       if (card) {
         matStore.selectUnselectInfo.selectableList.push(info.location);
         card.selectInfo.selectable = true;
+        card.selectInfo.response = info.response;
       }
     }
     for (const info of selectedCards) {

src/stores/matStore/store.ts

@@ -84,7 +84,6 @@ const initialState: Omit<MatState, "reset"> = {
   },
   tossResult: undefined,
   selectUnselectInfo: {
-    processing: false,
     finishable: false,
     cancelable: false,
     selectableList: [],
@@ -132,7 +131,6 @@ class MatStore implements MatState, NeosStore {
     this.handResults.op = 0;
     this.tossResult = undefined;
     this.selectUnselectInfo = {
-      processing: false,
       finishable: false,
       cancelable: false,
       selectableList: [],

src/stores/matStore/types.ts

@@ -35,7 +35,6 @@ export interface MatState {
   tossResult?: string; // 骰子/硬币结果
 
   selectUnselectInfo: {
-    processing: boolean; // 是否在进行SelectUnselect流程
     finishable: boolean; // 是否可以完成选择
     cancelable: boolean; // 是否可以取消当前选择
     selectableList: ygopro.CardLocation[]; // 记录当前可以选择的卡列表

src/ui/Duel/PlayMat/Card/index.tsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import React, { type CSSProperties, useEffect, useRef, useState } from "react";
 import { useSnapshot } from "valtio";
 
-import { type CardMeta, Region } from "@/api";
+import { type CardMeta, Region, sendSelectMultiResponse } from "@/api";
 import {
   fetchStrings,
   getCardStr,
@@ -21,7 +21,11 @@ import {
   displayOptionModal,
   displaySimpleSelectCardsModal,
 } from "../../Message";
-import { interactTypeToIcon, interactTypeToString } from "../../utils";
+import {
+  clearSelectInfo,
+  interactTypeToIcon,
+  interactTypeToString,
+} from "../../utils";
 import styles from "./index.module.scss";
 import {
   attack,
@@ -234,6 +238,15 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
 
   const onClick = () => {
     const onCardClick = (card: CardType) => {
+      if (card.selectInfo.selectable) {
+        if (card.selectInfo.response !== undefined) {
+          sendSelectMultiResponse([card.selectInfo.response]);
+          clearSelectInfo();
+        } else {
+          console.error("card is selectable but the response is undefined!");
+        }
+      }
+
       // 中央弹窗展示选中卡牌信息
       // TODO: 同一张卡片，是否重复点击会关闭CardModal？
       displayCardModal(card);

src/ui/Duel/PlayMat/Menu/index.tsx

@@ -22,6 +22,7 @@ import { useSnapshot } from "valtio";
 import {
   sendSelectBattleCmdResponse,
   sendSelectIdleCmdResponse,
+  sendSelectSingleResponse,
   sendSurrender,
   ygopro,
 } from "@/api";
@@ -30,6 +31,7 @@ import { IconFont } from "@/ui/Shared";
 
 import styles from "./index.module.scss";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
+import { clearSelectInfo } from "../../utils";
 import { openChatBox } from "../ChatBox";
 
 const { useToken } = theme;
@@ -39,6 +41,8 @@ const clearAllIdleInteractivities = () => {
   }
 };
 
+const FINISH_CANCEL_RESPONSE = -1;
+
 // PhaseType, 中文, response, 是否显示，是否禁用
 const initialPhaseBind: [
   phase: PhaseType,
@@ -247,11 +251,19 @@ const ChainIcon: React.FC<{ chainSetting: ChainSetting }> = ({
 };
 
 const SelectManager: React.FC = () => {
+  const { finishable, cancelable } = useSnapshot(matStore.selectUnselectInfo);
+  const onFinishOrCancel = () => {
+    sendSelectSingleResponse(FINISH_CANCEL_RESPONSE);
+    clearSelectInfo();
+  };
   return (
     <div className={styles["select-manager"]}>
-      <Button className={styles.btn}>完成选择</Button>
-      <Button className={classNames(styles.btn, { [styles.cancle]: true })}>
-        取消选择
+      <Button
+        className={classNames(styles.btn, { [styles.cancle]: cancelable })}
+        disabled={!cancelable && !finishable}
+        onClick={onFinishOrCancel}
+      >
+        {finishable ? "完成选择" : "取消选择"}
       </Button>
     </div>
   );

src/ui/Duel/utils/clearSelectInfo.ts

+import { cardStore, matStore } from "@/stores";
+
+export function clearSelectInfo() {
+  const selectUnselectInfo = matStore.selectUnselectInfo;
+  for (const location of selectUnselectInfo.selectableList) {
+    const card = cardStore.find(location);
+    if (card) {
+      card.selectInfo.selectable = false;
+      card.selectInfo.response = undefined;
+    }
+  }
+  for (const location of selectUnselectInfo.selectedList) {
+    const card = cardStore.find(location);
+    if (card) {
+      card.selectInfo.selected = false;
+    }
+  }
+
+  matStore.selectUnselectInfo.finishable = false;
+  matStore.selectUnselectInfo.cancelable = false;
+  matStore.selectUnselectInfo.selectableList = [];
+  matStore.selectUnselectInfo.selectedList = [];
+}

src/ui/Duel/utils/index.ts

+export * from "./clearSelectInfo";
 export * from "./groupBy";
 export * from "./interactTypeToStringIcon";
 export * from "./zip";