Merge branch 'optimize/select_action/tabs' into 'main'

Optimize/select action/tabs

See merge request mycard/Neos!189

neos.config.json

@@ -10,6 +10,7 @@
    "cardImgUrl":"https://cdn02.moecube.com:444/images/ygopro-images-zh-CN",
    "cardsDbUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/cards.cdb",
    "stringsUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/strings.conf",
+   "chainALL": false,
    "ui":{
       "ground":{
          "width":9.9,
@@ -69,7 +70,7 @@
       },
       "hint":{
          "waitingDuration":1.5,
-         "maxCount": 3
+         "maxCount": 1
       }
    },
    "unimplementedWhiteList":[

neos.config.prod.json

@@ -10,6 +10,7 @@
    "cardImgUrl":"https://cdn02.moecube.com:444/images/ygopro-images-zh-CN",
    "cardsDbUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/cards.cdb",
    "stringsUrl":"https://cdn02.moecube.com:444/ygopro-database/zh-CN/strings.conf",
+   "chainALL": false,
    "ui":{
       "ground":{
          "width":9.9,
@@ -69,7 +70,7 @@
       },
       "hint":{
          "waitingDuration":1.5,
-         "maxCount": 3
+         "maxCount": 1
       }
    },
    "unimplementedWhiteList":[

src/service/duel/selectChain.ts

 import { sendSelectSingleResponse, ygopro } from "@/api";
+import { useConfig } from "@/config";
 import {
   fetchCheckCardMeta,
   fetchSelectHintMeta,
   messageStore,
 } from "@/stores";
 
+const NeosConfig = useConfig();
+
 type MsgSelectChain = ygopro.StocGameMessage.MsgSelectChain;
 export default (selectChain: MsgSelectChain) => {
   const spCount = selectChain.special_count;
@@ -22,8 +25,13 @@ export default (selectChain: MsgSelectChain) => {
         // 直接回答
         handle_flag = 0;
       } else {
-        // 处理多张
+        if (NeosConfig.chainALL) {
+          // 配置了全部连锁，则处理多张
           handle_flag = 2;
+        } else {
+          // 否则不连锁
+          handle_flag = 0;
+        }
       }
     } else {
       // 有关键卡

src/ui/Duel/Message/SelectActionsModal.tsx

@@ -2,7 +2,7 @@ import "@/styles/select-modal.scss";
 
 import { MinusOutlined, ThunderboltOutlined } from "@ant-design/icons";
 import { CheckCard, CheckCardProps } from "@ant-design/pro-components";
-import { Button, Card, Col, Popover, Row } from "antd";
+import { Button, Card, Col, Popover, Row, Tabs } from "antd";
 import React, { useState } from "react";
 import { useSnapshot } from "valtio";
 
@@ -10,10 +10,12 @@ import {
   fetchStrings,
   sendSelectMultiResponse,
   sendSelectSingleResponse,
+  ygopro,
 } from "@/api";
 import { useConfig } from "@/config";
 import { clearSelectActions, matStore, messageStore } from "@/stores";
 
+import { groupBy } from "../utils";
 import { DragModal } from "./DragModal";
 
 const NeosConfig = useConfig();
@@ -58,6 +60,8 @@ export const SelectActionsModal = () => {
     ? response.length == 1
     : response.length >= min && response.length <= max && levelMatched;
 
+  const grouped = groupBy(selectables, (option) => option.location?.location!);
+
   return (
     <>
       <DragModal
@@ -132,13 +136,26 @@ export const SelectActionsModal = () => {
             setResponse(values);
           }}
         >
+          <Tabs
+            type="card"
+            items={grouped.map((group, idx) => {
+              return {
+                label: fetchStrings("!system", group[0] + 1000),
+                key: idx.toString(),
+                children: (
                   <Row>
-            {selectables.map((option, idx) => {
+                    {group[1].map((option, idx) => {
                       return (
                         <Col span={4} key={idx}>
                           <HoverCheckCard
                             hoverContent={option.effectDesc}
-                    style={{ width: 120 }}
+                            style={{
+                              width: 120,
+                              backgroundColor:
+                                option.location?.controler === 0
+                                  ? "white"
+                                  : "grey",
+                            }}
                             cover={
                               <img
                                 alt={option.meta.id.toString()}
@@ -156,6 +173,10 @@ export const SelectActionsModal = () => {
                       );
                     })}
                   </Row>
+                ),
+              };
+            })}
+          />
           <p>{selecteds.length > 0 ? fetchStrings("!system", 212) : ""}</p>
           <Row>
             {selecteds.concat(mustSelects).map((option, idx) => {

src/ui/Duel/utils/groupBy.ts

+export const groupBy = <K, V>(
+  array: readonly V[],
+  getKey: (cur: V, idx: number, src: readonly V[]) => K
+): [K, V[]][] =>
+  Array.from(
+    array.reduce((map, cur, idx, src) => {
+      const key = getKey(cur, idx, src);
+      const list = map.get(key);
+      if (list) list.push(cur);
+      else map.set(key, [cur]);
+      return map;
+    }, new Map<K, V[]>())
+  );

src/ui/Duel/utils/index.ts

+export * from "./groupBy";
 export * from "./interactTypeToString";
 export * from "./zip";