diff --git a/src/app/tools/statistics/components/Day.tsx b/src/app/tools/statistics/components/Day.tsx new file mode 100644 index 000000000..8fabd98d9 --- /dev/null +++ b/src/app/tools/statistics/components/Day.tsx @@ -0,0 +1,83 @@ +import { CaretDownIcon, CaretRightIcon } from '@radix-ui/react-icons'; +import { Button, Flex, Table, Text } from '@radix-ui/themes'; +import { random } from 'lodash'; +import { use, useMemo, useState } from 'react'; +import { tankDefinitions } from '../../../../core/blitzkrieg/tankDefinitions'; +import { tankIcon } from '../../../../core/blitzkrieg/tankIcon'; + +interface DayProps { + offset: number; +} + +export function Day({ offset }: DayProps) { + const awaitedTankDefinitions = use(tankDefinitions); + const tanksList = useMemo( + () => Object.values(awaitedTankDefinitions), + [awaitedTankDefinitions], + ); + const [expanded, setExpanded] = useState(true); + const time = new Date(Date.now() - offset * 24 * 60 * 60 * 1000); + const tanks = tanksList + .sort(() => Math.random() - 0.5) + .slice(0, random(2, 5)); + + return ( + <> + + + + + {random(1, 10)} + + {random(60, 80, true).toFixed(0)}% + + + + {expanded && + tanks.map((tank) => ( + + + + + {tank.name} + + {random(1, 10)} + + {random(60, 80, true).toFixed(0)}% + + + ))} + + ); +} diff --git a/src/app/tools/statistics/page.tsx b/src/app/tools/statistics/page.tsx index 2505962a3..c49998c91 100644 --- a/src/app/tools/statistics/page.tsx +++ b/src/app/tools/statistics/page.tsx @@ -1,16 +1,40 @@ -import { Flex, Heading } from '@radix-ui/themes'; +'use client'; + +import { Flex, Heading, Table } from '@radix-ui/themes'; +import { random, times } from 'lodash'; import { HeroStat } from '../../../components/AllStatsOverview/components/HeroStat'; import PageWrapper from '../../../components/PageWrapper'; +import { Day } from './components/Day'; export default function Page() { return ( - + TresAbhi [OPTML] + + + + + Day + + Battles + + + Winrate + + + + + + {times(random(5, 10), (index) => ( + + ))} + + ); }