From 64ddacf5c792114006f3f2d9c85753a11e07c45c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 3 May 2024 22:16:32 -0500
Subject: [PATCH] feat: tech tree

---
 .../[id]/components/Model/TechTreeSection.tsx | 146 ++++++++++++++++++
 src/app/tools/tankopedia/[id]/page.tsx        |   2 +
 2 files changed, 148 insertions(+)
 create mode 100644 src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx

diff --git a/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
new file mode 100644
index 000000000..aae3905a9
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx
@@ -0,0 +1,146 @@
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import Link from 'next/link';
+import { use } from 'react';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { asset } from '../../../../../../core/blitzkit/asset';
+import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useDuel } from '../../../../../../stores/duel';
+
+function Arrow() {
+  return (
+    <Text
+      color="gray"
+      style={{
+        flex: 1,
+      }}
+    >
+      <Flex
+        style={{
+          backgroundColor: 'currentcolor',
+          height: 1,
+          position: 'relative',
+        }}
+        justify="end"
+      >
+        <ChevronRightIcon
+          style={{
+            position: 'absolute',
+            right: 0,
+            top: '50%',
+            transform: 'translate(5px, -50%)',
+          }}
+        />
+      </Flex>
+    </Text>
+  );
+}
+
+export function TechTreeSection() {
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const tank = useDuel((state) => state.protagonist!.tank);
+
+  if (tank.treeType !== 'researchable') return null;
+
+  function Card({ id }: { id: number }) {
+    const ancestor = awaitedTankDefinitions[id];
+
+    return (
+      <Link
+        href={`/tools/tankopedia/${id}`}
+        key={id}
+        style={{
+          textDecoration: 'none',
+          color: 'inherit',
+        }}
+      >
+        <Flex direction="column" align="center">
+          <img
+            src={asset(`icons/tanks/big/${id}.webp`)}
+            width={64}
+            height={64}
+            style={{
+              objectFit: 'contain',
+            }}
+          />
+
+          <Flex direction="column" align="center">
+            <Flex gap="2" align="center">
+              <Text color="gray" size="1">
+                {TIER_ROMAN_NUMERALS[ancestor.tier]}
+              </Text>
+              <Text>{ancestor.name}</Text>
+            </Flex>
+
+            <Flex gap="2" align="center">
+              <Flex gap="1" align="center">
+                <img
+                  src={asset('icons/currencies/xp.webp')}
+                  width={16}
+                  height={16}
+                  style={{
+                    objectFit: 'contain',
+                  }}
+                />
+                <Text color="gray" size="1">
+                  {tank.xp?.toLocaleString()}
+                </Text>
+              </Flex>
+
+              <Flex gap="1" align="center">
+                <img
+                  src={asset('icons/currencies/silver.webp')}
+                  width={16}
+                  height={16}
+                  style={{
+                    objectFit: 'contain',
+                  }}
+                />
+                <Text color="gray" size="1">
+                  {tank.price.value?.toLocaleString()}
+                </Text>
+              </Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Link>
+    );
+  }
+
+  return (
+    <PageWrapper>
+      <Heading>Tech tree</Heading>
+
+      <Flex align="center" gap="6">
+        {tank.ancestors && (
+          <>
+            <Flex direction="column" style={{}} gap="4">
+              {tank.ancestors.map((id) => (
+                <Card key={id} id={id} />
+              ))}
+            </Flex>
+
+            <Arrow />
+          </>
+        )}
+
+        <Flex direction="column" style={{}}>
+          <Card id={tank.id} />
+        </Flex>
+
+        {tank.successors && (
+          <>
+            <Arrow />
+
+            <Flex direction="column" style={{}} gap="4">
+              {tank.successors.map((id) => (
+                <Card key={id} id={id} />
+              ))}
+            </Flex>
+          </>
+        )}
+      </Flex>
+    </PageWrapper>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 2b2bcded0..f2cdf175f 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -8,6 +8,7 @@ import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { HistoricalSection } from './components/Model/HistoricalSection';
+import { TechTreeSection } from './components/Model/TechTreeSection';
 import { TankopediaSeparator } from './components/TankopediaSeparator';
 import { Videos } from './components/Videos';
 
@@ -62,6 +63,7 @@ export default function Page({ params }: { params: { id: string } }) {
         <>
           <HeroSection />
           {/* <TankopediaPlug /> */}
+          <TechTreeSection />
           <CharacteristicsSection />
           <TankopediaSeparator />
           <Videos />