optimize OptionModal.tsx

src/service/duel/selectOption.ts

@@ -14,7 +14,7 @@ export default async (selectOption: ygopro.StocGameMessage.MsgSelectOption) => {
     await Promise.all(
       options.map(async ({ code, response }) => {
         const meta = fetchCard(code >> 4);
-        const msg = getCardStr(meta, code & 0xf) || "[?]";
+        const msg = getCardStr(meta, code & 0xf) ?? "[?]";
         return { msg, response };
       }),
     ),

src/ui/Duel/Message/OptionModal.tsx

 import { CheckCard } from "@ant-design/pro-components";
-import { Button } from "antd";
+import { Button, Segmented } from "antd";
 import React, { useState } from "react";
 import { proxy, useSnapshot } from "valtio";
 
@@ -23,14 +23,18 @@ const defaultStore = {
 };
 const store = proxy(defaultStore);
 
+// 一页最多4个选项
+const MAX_NUM_PER_PAGE = 4;
+
 export const OptionModal = () => {
   const snap = useSnapshot(store);
-
   const { title, isOpen, options } = snap;
-
   const [selected, setSelected] = useState<number | undefined>(undefined);
+  // options可能太多，因此分页展示
+  const [page, setPage] = useState(0);
+  const maxPage = Math.ceil(options.length / MAX_NUM_PER_PAGE);
 
-  const onClick = () => {
+  const onSummit = () => {
     if (selected !== undefined) {
       sendSelectOptionResponse(selected);
       rs();
@@ -42,20 +46,57 @@ export const OptionModal = () => {
       title={title}
       open={isOpen}
       footer={
-        <Button disabled={selected === undefined} onClick={onClick}>
+        <Button disabled={selected === undefined} onClick={onSummit}>
           确定
         </Button>
       }
     >
-      <CheckCard.Group bordered size="small" onChange={setSelected as any}>
-        {options.map((option, idx) => (
-          <CheckCard key={idx} title={option.msg} value={option.response} />
-        ))}
+      <Selector page={page} maxPage={maxPage} onChange={setPage as any} />
+      <CheckCard.Group
+        bordered
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(2, 1fr)",
+          gap: "10px",
+        }}
+        onChange={setSelected as any}
+      >
+        {options
+          .slice(
+            page * MAX_NUM_PER_PAGE,
+            Math.min((page + 1) * MAX_NUM_PER_PAGE, options.length),
+          )
+          .map((option, idx) => (
+            <CheckCard
+              key={idx}
+              style={{ width: "200px", marginInlineEnd: 0, marginBlockEnd: 0 }}
+              title={option.msg}
+              value={option.response}
+            />
+          ))}
       </CheckCard.Group>
     </NeosModal>
   );
 };
 
+/* 选择区域 */
+const Selector: React.FC<{
+  page: number;
+  maxPage: number;
+  onChange: (value: number) => void;
+}> = ({ page, maxPage, onChange }) =>
+  maxPage > 1 ? (
+    <Segmented
+      block
+      options={Array.from({ length: maxPage }).map((_, idx) => idx)}
+      style={{ margin: "10px 0" }}
+      value={page}
+      onChange={onChange as any}
+    ></Segmented>
+  ) : (
+    <></>
+  );
+
 let rs: (v?: any) => void = () => {};
 export const displayOptionModal = async (title: string, options: Options) => {
   store.title = title;