diff --git a/src/components/BattleTable.tsx b/src/components/BattleTable.tsx index 6d425ab..2776da0 100644 --- a/src/components/BattleTable.tsx +++ b/src/components/BattleTable.tsx @@ -1,9 +1,10 @@ import type { BasePlayer } from "../types"; import { useCallback, useEffect, useMemo, useState } from "react"; import { calculate, getRoundTable } from "../utils/common"; -import { Card, Divider, Flex, Space } from "antd"; +import { Button, Card, Divider, Flex, Space, Table } from "antd"; import styled from "styled-components"; import { cloneDeep } from "lodash"; +import { ClearOutlined } from "@ant-design/icons"; const StyledContainer = styled(Flex)` .winer { @@ -67,7 +68,7 @@ function BattleTable({ }); return cloneDeep([left, right]); }); - return roundTable.filter(Boolean); + return roundTable; }, []); const [matchGroupTable, setMatchGroupTable] = useState>([]); @@ -82,6 +83,29 @@ function BattleTable({ } setMatchGroupTable(buildMatchGroupTable(playerList)); }, []); + const handleClear = useCallback((left?: (BasePlayer | null | undefined)[], right?: (BasePlayer | null | undefined)[]) => { + left?.forEach((l, i) => { + const r = right?.[i]; + const key = `${l?.uid}-${r?.uid}`; + resultMap.delete(key); + }); + setMatchGroupTable(buildMatchGroupTable(playerList)); + }, [matchGroupTable, playerList]); + const handleClearAll = useCallback(() => { + matchGroupTable.forEach(([left, right]) => { + left?.forEach((l, i) => { + const r = right?.[i]; + const key = `${l?.uid}-${r?.uid}`; + resultMap.delete(key); + }); + }); + setMatchGroupTable(buildMatchGroupTable(playerList)); + }, [matchGroupTable, playerList]); + const scoreDiff = useMemo(() => { + const [left = [], right = []] = matchGroupTable?.[matchGroupTable.length - 1] ?? []; + const newScoreMap = Object.fromEntries([...left, ...right].map(e => [e?.uid, e?.score])); + return newScoreMap; + }, [playerList, matchGroupTable]); useEffect(() => { const roundTable = buildMatchGroupTable(playerList); setMatchGroupTable(roundTable); @@ -91,7 +115,12 @@ function BattleTable({ {matchGroupTable.map(([left, right], i) => { return ( - + handleClear(left, right)} icon={}>清除本轮} + > {left?.map((l, i) => { const r = right?.[i]; const key = `${l?.uid}-${r?.uid}`; @@ -115,6 +144,30 @@ function BattleTable({ ); })} + ( + + 积分增减预测 + + + )} + showHeader={false} + pagination={false} + rowHoverable={false} + size="small" + dataSource={playerList} + rowKey={e => e.uid} + style={{ minWidth: 300 }} + columns={[ + { dataIndex: 'name' }, + { dataIndex: 'score' }, + { dataIndex: 'uid', render: (uid, { score }) => scoreDiff[uid] || score }, + { dataIndex: 'uid', align: 'right', render: (uid, { score }) => { + const diff = +(scoreDiff[uid] || score) - +score; + return diff > 0 ? `+${diff}` : diff; + } }, + ]} + /> ); } diff --git a/src/components/GroupMember.tsx b/src/components/GroupMember.tsx index f83ec33..67383d9 100644 --- a/src/components/GroupMember.tsx +++ b/src/components/GroupMember.tsx @@ -30,6 +30,7 @@ export const GroupMember: React.FC = props => { rowKey={e => `${e.id}-${e.name}-${e.score}`} showHeader={false} pagination={false} + rowHoverable={false} dataSource={props.players} columns={[ { dataIndex: '_', render: (_, __, i) => `(${i + 1})` },