From 3d5dd54ec0bb454fe035f57a4a587086c9a345df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 6 Dec 2023 17:58:26 -0600
Subject: [PATCH] feat: start of tank page

---
 src/app/tools/layout.tsx                      |  2 +-
 src/app/tools/tankopedia/[id]/page.tsx        | 21 ++++++++++++
 .../tankopedia/components/Options/index.tsx   | 32 +++----------------
 src/components/Flag.tsx                       | 19 +++++++++++
 4 files changed, 45 insertions(+), 29 deletions(-)
 create mode 100644 src/app/tools/tankopedia/[id]/page.tsx
 create mode 100644 src/components/Flag.tsx

diff --git a/src/app/tools/layout.tsx b/src/app/tools/layout.tsx
index 2f281b63f..ebaae8f62 100644
--- a/src/app/tools/layout.tsx
+++ b/src/app/tools/layout.tsx
@@ -11,7 +11,7 @@ interface ToolsLayoutProps {
 
 export default function ToolsLayout({ children }: ToolsLayoutProps) {
   const pathname = usePathname();
-  const toolId = pathname.split('/').at(-1);
+  const toolId = pathname.split('/').at(2);
   const tool = TOOLS.find((tool) => tool.id === toolId);
 
   return (
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
new file mode 100644
index 000000000..0fd04e08e
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -0,0 +1,21 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { use } from 'react';
+import { Flag } from '../../../../components/Flag';
+import PageWrapper from '../../../../components/PageWrapper';
+import { tankDefinitions } from '../../../../core/blitzkrieg/definitions/tanks';
+
+// get [id] form the path
+export default function Page({ params }: { params: { id: string } }) {
+  const id = parseInt(params.id);
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const definition = awaitedTankDefinitions[id];
+
+  return (
+    <PageWrapper>
+      <Flex gap="2" align="center">
+        <Flag nation={definition.nation} />
+        <Heading>{definition.name}</Heading>
+      </Flex>
+    </PageWrapper>
+  );
+}
diff --git a/src/app/tools/tankopedia/components/Options/index.tsx b/src/app/tools/tankopedia/components/Options/index.tsx
index d6e9f6a35..c67417100 100644
--- a/src/app/tools/tankopedia/components/Options/index.tsx
+++ b/src/app/tools/tankopedia/components/Options/index.tsx
@@ -3,6 +3,7 @@
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
 import { use } from 'react';
+import { Flag } from '../../../../../components/Flag';
 import {
   TANK_TYPES,
   TREE_TYPES,
@@ -10,7 +11,6 @@ import {
   TREE_TYPE_IMAGES,
   TreeTypeEnum,
 } from '../../../../../components/Tanks';
-import { asset } from '../../../../../core/blitzkrieg/asset';
 import {
   NATIONS,
   TIERS,
@@ -267,15 +267,7 @@ export function Options() {
                   })
                 }
               >
-                <img
-                  src={asset(`flags/circle/${nation}.webp`)}
-                  style={{
-                    width: '1em',
-                    height: '1em',
-                    scale: 2,
-                    transform: 'translate(15%, 15%)',
-                  }}
-                />
+                <Flag nation={nation} />
               </Button>
             ))}
           </Flex>
@@ -314,15 +306,7 @@ export function Options() {
                   })
                 }
               >
-                <img
-                  src={asset(`flags/circle/${nation}.webp`)}
-                  style={{
-                    width: '1em',
-                    height: '1em',
-                    scale: 2,
-                    transform: 'translate(15%, 15%)',
-                  }}
-                />
+                <Flag nation={nation} />
               </Button>
             ))}
           </Flex>
@@ -394,15 +378,7 @@ export function Options() {
                 })
               }
             >
-              <img
-                src={asset(`flags/circle/${nation}.webp`)}
-                style={{
-                  width: '1em',
-                  height: '1em',
-                  scale: 2,
-                  transform: 'translate(15%, 15%)',
-                }}
-              />
+              <Flag nation={nation} />
             </Button>
           ))}
         </Flex>
diff --git a/src/components/Flag.tsx b/src/components/Flag.tsx
new file mode 100644
index 000000000..21edaf8ea
--- /dev/null
+++ b/src/components/Flag.tsx
@@ -0,0 +1,19 @@
+import { asset } from '../core/blitzkrieg/asset';
+
+interface FlagProps {
+  nation: string;
+}
+
+export function Flag({ nation }: FlagProps) {
+  return (
+    <div
+      style={{
+        width: 22,
+        height: 22,
+        overflow: 'hidden',
+      }}
+    >
+      <img src={asset(`flags/circle/${nation}.webp`)} alt={nation} />
+    </div>
+  );
+}