diff --git a/src/app/tools/tankopedia/[id]/components/Videos.tsx b/src/app/tools/tankopedia/[id]/components/Videos.tsx new file mode 100644 index 000000000..24e9481d2 --- /dev/null +++ b/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 ( + + Review videos + + + {videos.map((video) => ( + + + + ))} + + + + + + {videos.length === 0 ? 'Suggest' : 'Suggest more'} + + + + + + + ); +} diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index 5b5561b64..63f127128 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/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 } }) { - @@ -110,6 +110,8 @@ export default function Page({ params }: { params: { id: string } }) { + + )} diff --git a/src/core/blitzkrieg/videos.ts b/src/core/blitzkrieg/videos.ts new file mode 100644 index 000000000..dca8788b8 --- /dev/null +++ b/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>((accumulator, { id, videos }) => { + accumulator[id] = videos; + return accumulator; + }, {}), + );