group selectab actions

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
@@ -133,28 +137,37 @@ export const SelectActionsModal = () => {
           }}
         >
           <Row>
-            {selectables.map((option, idx) => {
-              return (
-                <Col span={4} key={idx}>
-                  <HoverCheckCard
-                    hoverContent={option.effectDesc}
-                    style={{ width: 120 }}
-                    cover={
-                      <img
-                        alt={option.meta.id.toString()}
-                        src={
-                          option.meta.id
-                            ? `${NeosConfig.cardImgUrl}/${option.meta.id}.jpg`
-                            : `${NeosConfig.assetsPath}/card_back.jpg`
-                        }
-                        style={{ width: 100 }}
-                      />
-                    }
-                    value={option}
-                  />
-                </Col>
-              );
-            })}
+            <Tabs
+              type="card"
+              items={grouped.map((group, idx) => {
+                return {
+                  label: fetchStrings("!system", group[0] + 1000),
+                  key: idx.toString(),
+                  children: group[1].map((option, idx) => {
+                    return (
+                      <Col span={4} key={idx}>
+                        <HoverCheckCard
+                          hoverContent={option.effectDesc}
+                          style={{ width: 120 }}
+                          cover={
+                            <img
+                              alt={option.meta.id.toString()}
+                              src={
+                                option.meta.id
+                                  ? `${NeosConfig.cardImgUrl}/${option.meta.id}.jpg`
+                                  : `${NeosConfig.assetsPath}/card_back.jpg`
+                              }
+                              style={{ width: 100 }}
+                            />
+                          }
+                          value={option}
+                        />
+                      </Col>
+                    );
+                  }),
+                };
+              })}
+            />
           </Row>
           <p>{selecteds.length > 0 ? fetchStrings("!system", 212) : ""}</p>
           <Row>

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";