From 9ecf9ed406075b145580f586e356570d882ab4f7 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 19:03:25 -0500
Subject: [PATCH] feat: separator

---
 scripts/buildAssets/definitions.ts            |  2 +-
 .../Model/CharacteristicsSection.tsx          | 11 +--
 .../[id]/components/Model/HeroSection.tsx     |  9 ++-
 .../components/Model/HistoricalSection.tsx    | 16 +++++
 .../[id]/components/Model/TankopediaPlug.tsx  | 26 +++++++
 .../[id]/components/TankopediaSeparator.tsx   | 10 +++
 .../tankopedia/[id]/components/Videos.tsx     | 70 +++++++------------
 src/app/tools/tankopedia/[id]/page.tsx        | 10 ++-
 src/core/blitzkit/tankDefinitions/index.ts    |  4 --
 9 files changed, 99 insertions(+), 59 deletions(-)
 create mode 100644 src/app/tools/tankopedia/[id]/components/Model/HistoricalSection.tsx
 create mode 100644 src/app/tools/tankopedia/[id]/components/Model/TankopediaPlug.tsx
 create mode 100644 src/app/tools/tankopedia/[id]/components/TankopediaSeparator.tsx

diff --git a/scripts/buildAssets/definitions.ts b/scripts/buildAssets/definitions.ts
index 3b0439e0f..6f737f4f7 100644
--- a/scripts/buildAssets/definitions.ts
+++ b/scripts/buildAssets/definitions.ts
@@ -542,7 +542,7 @@ export async function definitions(production: boolean) {
         tankDefinitions[tankId] = {
           id: tankId,
           description:
-            wargamingTankopedia.data[tank.id]?.description ?? undefined,
+            wargamingTankopedia.data[tankId]?.description ?? undefined,
           fixedCamouflage: fixedCamouflage ? true : undefined,
           crew,
           weight: tankDefinition.root.hull.weight,
diff --git a/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx
index 03e7ecb99..cf0096cdb 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx
@@ -1,4 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
 import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
@@ -12,9 +13,9 @@ export function CharacteristicsSection() {
   const wideFormat = useWideFormat(720);
 
   return (
-    <Flex justify="center" mt="4" direction={wideFormat ? 'row' : 'column'}>
-      <Flex gap="4">
-        <Flex style={{ flex: 1, maxWidth: 320 }} direction="column" gap="4">
+    <PageWrapper>
+      <Flex gap="4" style={{ width: '100%' }}>
+        <Flex style={{ flex: 1 }} direction="column" gap="4">
           <Heading>Configure</Heading>
           <Modules />
           <Equipment />
@@ -24,11 +25,11 @@ export function CharacteristicsSection() {
           <Miscellaneous />
         </Flex>
 
-        <Flex direction="column" gap="4">
+        <Flex style={{ flex: 1 }} direction="column" gap="4">
           <Heading>Characteristics</Heading>
           <Characteristics />
         </Flex>
       </Flex>
-    </Flex>
+    </PageWrapper>
   );
 }
diff --git a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
index 1bf967b9d..9fd3d2e10 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx
@@ -36,8 +36,13 @@ export function HeroSection() {
             flex: 1,
           }}
         >
-          <Flex gap={wideFormat ? '4' : '2'} direction="column">
-            <Heading size={wideFormat ? '9' : '8'}>{tank.name}</Heading>
+          <Flex
+            gap={wideFormat ? '4' : '2'}
+            direction="column"
+            ml="8"
+            align={wideFormat ? undefined : 'center'}
+          >
+            <Heading size="9">{tank.name}</Heading>
             <Text color="gray">
               Tier {TIER_ROMAN_NUMERALS[tank.tier]}{' '}
               {
diff --git a/src/app/tools/tankopedia/[id]/components/Model/HistoricalSection.tsx b/src/app/tools/tankopedia/[id]/components/Model/HistoricalSection.tsx
new file mode 100644
index 000000000..9f680a7c2
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Model/HistoricalSection.tsx
@@ -0,0 +1,16 @@
+import { Heading, Text } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { useDuel } from '../../../../../../stores/duel';
+
+export function HistoricalSection() {
+  const tank = useDuel((state) => state.protagonist!.tank);
+
+  if (!tank.description) return null;
+
+  return (
+    <PageWrapper>
+      <Heading>History of the {tank.name}</Heading>
+      <Text>{tank.description}</Text>
+    </PageWrapper>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Model/TankopediaPlug.tsx b/src/app/tools/tankopedia/[id]/components/Model/TankopediaPlug.tsx
new file mode 100644
index 000000000..2068858b1
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/Model/TankopediaPlug.tsx
@@ -0,0 +1,26 @@
+import { Flex, Link, Text } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { PatreonIcon } from '../../../../../../icons/Patreon';
+
+export function TankopediaPlug() {
+  return (
+    <PageWrapper>
+      <Flex justify="center">
+        <Text>
+          Liking BlitzKit? Consider donating on{' '}
+          <Link href="https://www.patreon.com/tresabhi" target="_blank">
+            <PatreonIcon
+              style={{
+                width: '1em',
+                height: '1em',
+                transform: 'translateY(12.5%)',
+              }}
+            />{' '}
+            Patreon
+          </Link>
+          .
+        </Text>
+      </Flex>
+    </PageWrapper>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/TankopediaSeparator.tsx b/src/app/tools/tankopedia/[id]/components/TankopediaSeparator.tsx
new file mode 100644
index 000000000..6d526fa78
--- /dev/null
+++ b/src/app/tools/tankopedia/[id]/components/TankopediaSeparator.tsx
@@ -0,0 +1,10 @@
+import { Separator } from '@radix-ui/themes';
+import PageWrapper from '../../../../../components/PageWrapper';
+
+export function TankopediaSeparator() {
+  return (
+    <PageWrapper>
+      <Separator mt="4" style={{ width: '100%' }} />
+    </PageWrapper>
+  );
+}
diff --git a/src/app/tools/tankopedia/[id]/components/Videos.tsx b/src/app/tools/tankopedia/[id]/components/Videos.tsx
index cf1c7ff8c..818082a49 100644
--- a/src/app/tools/tankopedia/[id]/components/Videos.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Videos.tsx
@@ -1,6 +1,6 @@
-import { PlusIcon } from '@radix-ui/react-icons';
-import { Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { Flex, Heading, Link, Separator } from '@radix-ui/themes';
 import { use } from 'react';
+import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
 import { useFullScreen } from '../../../../../hooks/useFullScreen';
 import { useDuel } from '../../../../../stores/duel';
@@ -11,54 +11,34 @@ export function Videos() {
   const awaitedVideoDefinitions = use(videoDefinitions);
   const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
 
-  if (isFullScreen) return null;
+  if (isFullScreen || videos.length === 0) return null;
 
   return (
-    <Flex direction="column" gap="4" mt="4" align="start">
-      <Heading size="6">Review videos</Heading>
+    <PageWrapper>
 
-      <Flex gap="3" wrap="wrap">
-        {videos.map((video) => (
-          <Link
-            key={video}
-            href={`https://www.youtube.com/watch?v=${video}`}
-            target="_blank"
-          >
-            <img
-              src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
-              style={{
-                aspectRatio: '16 / 9',
-                objectFit: 'cover',
-                height: 128,
-                borderRadius: 8,
-              }}
-            />
-          </Link>
-        ))}
+      <Flex direction="column" gap="4" mt="4" align="start">
+        <Heading size="6">Review videos</Heading>
 
-        <Link href="https://discord.gg/nDt7AjGJQH" target="_blank">
-          <Card
-            style={{
-              aspectRatio: '16 / 9',
-              height: 128,
-            }}
-          >
-            <Flex
-              align="center"
-              justify="center"
-              gap="1"
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
+        <Flex gap="3" wrap="wrap">
+          {videos.map((video) => (
+            <Link
+              key={video}
+              href={`https://www.youtube.com/watch?v=${video}`}
+              target="_blank"
             >
-              <Text color="purple">
-                {videos.length === 0 ? 'Suggest' : 'Suggest more'} <PlusIcon />
-              </Text>
-            </Flex>
-          </Card>
-        </Link>
+              <img
+                src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+                style={{
+                  aspectRatio: '16 / 9',
+                  objectFit: 'cover',
+                  height: 128,
+                  borderRadius: 8,
+                }}
+              />
+            </Link>
+          ))}
+        </Flex>
       </Flex>
-    </Flex>
+    </PageWrapper>
   );
 }
diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 126c205a4..30db5a841 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -3,16 +3,18 @@
 import { useEffect } from 'react';
 import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
-import { useWideFormat } from '../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
+import { HistoricalSection } from './components/Model/HistoricalSection';
+import { TankopediaPlug } from './components/Model/TankopediaPlug';
+import { TankopediaSeparator } from './components/TankopediaSeparator';
+import { Videos } from './components/Videos';
 
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
   const assigned = useDuel((state) => state.assigned);
-  const wideFormat = useWideFormat();
 
   useEffect(() => {
     assignDuelMember('both', initialId);
@@ -60,7 +62,11 @@ export default function Page({ params }: { params: { id: string } }) {
       {assigned && (
         <>
           <HeroSection />
+          <TankopediaPlug />
           <CharacteristicsSection />
+          <TankopediaSeparator />
+          <Videos />
+          <HistoricalSection />
         </>
       )}
     </PageWrapper>
diff --git a/src/core/blitzkit/tankDefinitions/index.ts b/src/core/blitzkit/tankDefinitions/index.ts
index a4eac1b5e..551570587 100644
--- a/src/core/blitzkit/tankDefinitions/index.ts
+++ b/src/core/blitzkit/tankDefinitions/index.ts
@@ -148,10 +148,6 @@ export const tankDefinitions = fetchCdonLz4<TankDefinitions>(
   asset('definitions/tanks.cdon.lz4'),
 );
 
-// export const tankDefinitions = readFile('test.tanks.cdon.lz4').then((data) =>
-//   superDecompress<TankDefinitions>(data.buffer),
-// );
-
 const entries = new Promise<TankDefinition[]>(async (resolve) => {
   resolve(Object.entries(await tankDefinitions).map(([, entry]) => entry));
 });