feat: videos

src/app/tools/tankopedia/[id]/components/Videos.tsx

@@ -0,0 +1,59 @@
+import { PlusIcon } from '@radix-ui/react-icons';
+import { Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { use } from 'react';
+import { videoDefinitions } from '../../../../../core/blitzkrieg/videos';
+import { useDuel } from '../../../../../stores/duel';
+
+export function Videos() {
+  const id = useDuel((state) => state.protagonist!.tank.id);
+  const awaitedVideoDefinitions = use(videoDefinitions);
+  const videos = awaitedVideoDefinitions[id] ?? [];
+
+  return (
+    <Flex direction="column" gap="2" mt="4">
+      <Heading size="6">Review videos</Heading>
+
+      <Flex gap="3" wrap="wrap">
+        {videos.map((video) => (
+          <Link
+            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>
+        ))}
+
+        <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%',
+              }}
+            >
+              <Text color="purple">
+                {videos.length === 0 ? 'Suggest' : 'Suggest more'} <PlusIcon />
+              </Text>
+            </Flex>
+          </Card>
+        </Link>
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/page.tsx

@@ -17,6 +17,7 @@ import { Provisions } from './components/Characteristics/components/Provisions';
 import { Skills } from './components/Characteristics/components/Skills';
 import { TankSandbox } from './components/Model/TankSandbox';
 import { Title } from './components/Title';
+import { Videos } from './components/Videos';
 
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
@@ -83,7 +84,7 @@ export default function Page({ params }: { params: { id: string } }) {
               style={{
                 flex: 1,
                 width: '100%',
-                top: 64,
+                top: 64 + 16,
                 position: wideFormat ? 'sticky' : undefined,
               }}
             >
@@ -91,7 +92,6 @@ export default function Page({ params }: { params: { id: string } }) {
                 <TankSandbox />
                 <AntagonistBar />
               </Flex>
-
               <Flex gap="5" wrap="wrap">
                 <Modules />
                 <Provisions />
@@ -110,6 +110,8 @@ export default function Page({ params }: { params: { id: string } }) {
               <Characteristics />
             </Flex>
           </Flex>
+
+          <Videos />
         </>
       )}
     </PageWrapper>

src/core/blitzkrieg/videos.ts

@@ -0,0 +1,18 @@
+import { asset } from './asset';
+
+export const videoDefinitions = fetch(asset('definitions/videos.csv'))
+  .then((response) => response.text())
+  .then((text) =>
+    text
+      .split('\n')
+      .map((line) => {
+        const [idString, ...videos] = line.split(',');
+        const id = Number(idString);
+        return { id, videos };
+      })
+      .filter(({ videos }) => videos.length > 0)
+      .reduce<Record<number, string[]>>((accumulator, { id, videos }) => {
+        accumulator[id] = videos;
+        return accumulator;
+      }, {}),
+  );