feat: tank icons

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 (
+    <>
+      <Table.Row>
+        <Table.RowHeaderCell>
+          <Button
+            variant="ghost"
+            onClick={() => setExpanded((state) => !state)}
+          >
+            <Flex align="center" gap="1">
+              {expanded ? <CaretDownIcon /> : <CaretRightIcon />}
+              {`${time.getDate()}/${time.getMonth()}`}
+            </Flex>
+          </Button>
+        </Table.RowHeaderCell>
+        <Table.Cell align="right">{random(1, 10)}</Table.Cell>
+        <Table.Cell align="right">
+          {random(60, 80, true).toFixed(0)}%
+        </Table.Cell>
+      </Table.Row>
+
+      {expanded &&
+        tanks.map((tank) => (
+          <Table.Row
+            key={tank.id}
+            style={{
+              overflow: 'hidden',
+            }}
+          >
+            <Table.RowHeaderCell
+              style={{
+                paddingLeft: 32,
+                position: 'relative',
+                overflowY: 'hidden',
+              }}
+            >
+              <img
+                src={tankIcon(tank.id)}
+                style={{
+                  position: 'absolute',
+                  width: 128,
+                  height: '200%',
+                  top: '-50%',
+                  left: 'calc(128px)',
+                  objectFit: 'contain',
+                  objectPosition: 'left',
+                  overflow: 'hidden',
+                }}
+              />
+
+              <Text>{tank.name}</Text>
+            </Table.RowHeaderCell>
+            <Table.Cell align="right">{random(1, 10)}</Table.Cell>
+            <Table.Cell align="right">
+              {random(60, 80, true).toFixed(0)}%
+            </Table.Cell>
+          </Table.Row>
+        ))}
+    </>
+  );
+}

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 (
-    <PageWrapper>
+    <PageWrapper color="indigo">
       <Flex gap="2">
         <Heading>TresAbhi</Heading>
         <Heading color="gray">[OPTML]</Heading>
       </Flex>
 
       <HeroStat color="#8E4EC6" subtitle="Super Unicum" value={3142} />
+
+      <Table.Root variant="surface">
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Day</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Battles
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell width="0" align="right">
+              Winrate
+            </Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {times(random(5, 10), (index) => (
+            <Day offset={index} key={index} />
+          ))}
+        </Table.Body>
+      </Table.Root>
     </PageWrapper>
   );
 }