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,7 +137,13 @@ export const SelectActionsModal = () => {
           }}
         >
           <Row>
-            {selectables.map((option, idx) => {
+            <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
@@ -154,7 +164,10 @@ export const SelectActionsModal = () => {
                         />
                       </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";