feat(GroupMember): battle table

src/components/GroupMember.tsx

@@ -1,6 +1,6 @@
-import { Card, Table } from "antd";
+import { Button, Card, Divider, Drawer, Flex, Space, Table } from "antd";
 import type { BasePlayer } from "../types";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import User from "./User";
 
 interface Props {
@@ -17,8 +17,13 @@ export const GroupMember: React.FC<Props> = props => {
     const lastChar = baseCode + (idx % 26);
     return `${code}${String.fromCharCode(lastChar)}`;
   }, []);
+  const [open, setOpen] = useState(false);
   return (
-    <Card title={`${char} 组`} style={{ minWidth: 300 }}>
+    <Card
+      title={`${char} 组`}
+      style={{ minWidth: 300 }}
+      extra={<Button type="link" onClick={() => setOpen(true)}>查看对战表</Button>}
+    >
       <Table
         size="small"
         rowKey={e => `${e.id}-${e.name}-${e.score}`}
@@ -32,6 +37,72 @@ export const GroupMember: React.FC<Props> = props => {
           { dataIndex: 'score' },
         ]}
       />
+      <Drawer
+        open={open}
+        title={`${char} 组对战表`}
+        onClose={() => setOpen(false)}
+        size={'80vh'}
+        placement="bottom"
+      >
+        <BattleTable
+          nameList={
+            props
+              .players
+              ?.map((e, i) => `(${i + 1}) ${e.name}(${e.score})`)
+            ?? []
+          }
+        />
+      </Drawer>
     </Card>
   );
 }
+
+function BattleTable({ nameList }: {
+  nameList: string[]
+}) {
+  const list = nameList.length % 2 === 0 ? nameList : [...nameList, '-'];
+  return (
+    <Flex vertical gap={12} justify="center" align="center">
+      {new Array(list.length - 1).fill(0).map((_, i) => {
+        const [left, right] = getRoundTable(list, i);
+        console.debug({ left, right });
+        return (
+          <Card size="small" key={`round-${i}`} title={`Round: ${i + 1}`}>
+            {left?.map((e, r) => {
+              return (
+                <div key={r}>
+                  <Space style={{ textAlign: "center" }}>
+                    <div style={{ width: 120 }}>{e}</div>
+                    <span>VS</span>
+                    <div style={{ width: 120 }}>{right?.[r]}</div>
+                  </Space>
+                  {r < left.length && <Divider size="small" />}
+                </div>
+              );
+            })}
+          </Card>
+        );
+      })}
+    </Flex>
+  );
+}
+
+function getRoundTable(nameList: string[], round: number) {
+  const list = [...nameList];
+  const half = list.length / 2;
+  if (round > list.length - 1) {
+    const left = [...list].slice(0, half);
+    const right = [...list].slice(half);
+    return [left, right];
+  }
+  const sliceStart = (list.length) - round;
+  const slice = list.slice(sliceStart);
+  // console.debug(JSON.stringify({ list }));
+  list.splice(sliceStart);
+  const [first, ...others] = list;
+  const newList = [first, ...slice, ...others].filter(Boolean);
+  // console.debug(JSON.stringify({ sliceStart, len: list.length, first, others, slice, newList }));
+  const left = [...newList].slice(0, half);
+  const right = [...newList].slice(half).reverse();
+  return [left, right];
+}