40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import type React from "react";
|
|
import type { IEventInfo, MatchInfo } from "../types";
|
|
import { useRequest } from "ahooks";
|
|
import { Spin, Tabs } from "antd";
|
|
import { PlayerList } from "./PlayerList";
|
|
import { GroupingPrediction } from "./GroupingPrediction";
|
|
import { useMemo } from "react";
|
|
|
|
interface Props {
|
|
game?: IEventInfo;
|
|
}
|
|
|
|
export const GamePanel: React.FC<Props> = props => {
|
|
const fetchPlayers = useRequest<MatchInfo | null, []>(async () => {
|
|
if (!props.game) return null;
|
|
const info: MatchInfo = await (await fetch(`/api/match/${props.game.matchId}`)).json();
|
|
return info;
|
|
}, { refreshDeps: [props] });
|
|
const sneckMode = useMemo(() => {
|
|
return !!props.game?.title?.includes('争霸赛');
|
|
}, [props.game]);
|
|
return (
|
|
<Spin spinning={fetchPlayers.loading}>
|
|
<Tabs
|
|
items={fetchPlayers.loading ? [] : [
|
|
{
|
|
key: 'groups',
|
|
label: '分组预测',
|
|
children: <GroupingPrediction sneckMode={sneckMode} players={fetchPlayers.data?.players} />
|
|
},
|
|
{
|
|
key: 'players',
|
|
label: '成员列表',
|
|
children: <PlayerList players={fetchPlayers.data?.players} />
|
|
},
|
|
]}
|
|
/>
|
|
</Spin>
|
|
);
|
|
} |