feat: add functionality

src/app/tools/compare/page.tsx

@@ -1,5 +1,110 @@
+'use client';
+
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Button, Dialog, Flex, Table, Text } from '@radix-ui/themes';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { use, useCallback, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
+import { tankDefinitions } from '../../../core/blitzkrieg/tankDefinitions';
+import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
+import { TankSearch } from '../tankopedia/components/TankSearch';
 
 export default function Page() {
-  return <PageWrapper color="blue">lol</PageWrapper>;
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const tanks = searchParams.get('tanks')?.split(',').map(Number) ?? [];
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const [addTankDialogOpen, setAddTankDialogOpen] = useState(false);
+
+  const createQueryString = useCallback(
+    (name: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      params.set(name, value);
+
+      return params.toString();
+    },
+    [searchParams],
+  );
+
+  return (
+    <PageWrapper color="crimson">
+      <Flex justify="center">
+        <Dialog.Root
+          open={addTankDialogOpen}
+          onOpenChange={setAddTankDialogOpen}
+        >
+          <Dialog.Trigger>
+            <Button>
+              <PlusIcon /> Add
+            </Button>
+          </Dialog.Trigger>
+
+          <Dialog.Content>
+            <Flex gap="4" direction="column">
+              <Flex
+                direction="column"
+                gap="4"
+                style={{ flex: 1 }}
+                justify="center"
+              >
+                <TankSearch
+                  compact
+                  onSelect={(tank) => {
+                    tanks.push(tank.id);
+                    router.push(
+                      pathname +
+                        '?' +
+                        createQueryString('tanks', tanks.join(',')),
+                    );
+                    setAddTankDialogOpen(false);
+                  }}
+                />
+              </Flex>
+            </Flex>
+          </Dialog.Content>
+        </Dialog.Root>
+      </Flex>
+
+      <Table.Root variant="surface">
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Statistics</Table.ColumnHeaderCell>
+            {tanks.map((id) => {
+              const tank = awaitedTankDefinitions[id];
+
+              return (
+                <Table.ColumnHeaderCell>
+                  <Flex direction="column">
+                    <img src={tankIcon(id)} />
+                    <Text>{tank.name}</Text>
+                  </Flex>
+                </Table.ColumnHeaderCell>
+              );
+            })}
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          <Table.Row>
+            <Table.RowHeaderCell>Stat 1</Table.RowHeaderCell>
+            {tanks.map((id) => {
+              const tank = awaitedTankDefinitions[id];
+
+              return <Table.Cell>{Math.random()}</Table.Cell>;
+            })}
+          </Table.Row>
+
+          <Table.Row>
+            <Table.RowHeaderCell>Stat 2</Table.RowHeaderCell>
+            {tanks.map((id) => {
+              const tank = awaitedTankDefinitions[id];
+
+              return <Table.Cell>{Math.random()}</Table.Cell>;
+            })}
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>
+    </PageWrapper>
+  );
 }