diff --git a/package.json b/package.json index dad23bf32..92cf5bda9 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,7 @@ "postprocessing": "^6.34.1", "progress": "^2.0.3", "protobufjs": "^7.2.6", - "react": "^18.2.0", + "react": "^18.3.1", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-fuzzysort": "^1.0.1", diff --git a/src/app/tools/tankopedia/[id]/components/HistorySection.tsx b/src/app/tools/tankopedia/[id]/components/HistorySection.tsx new file mode 100644 index 000000000..73d7fa835 --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/HistorySection.tsx @@ -0,0 +1,16 @@ +import { Heading, Text } from '@radix-ui/themes'; +import PageWrapper from '../../../../../components/PageWrapper'; +import { useDuel } from '../../../../../stores/duel'; + +export function HistorySection() { + const tank = useDuel((state) => state.protagonist!.tank); + + if (!tank.description) return null; + + return ( + + History of the {tank.name} + {tank.description} + + ); +} diff --git a/src/app/tools/tankopedia/[id]/components/VideoSection.tsx b/src/app/tools/tankopedia/[id]/components/VideoSection.tsx new file mode 100644 index 000000000..d85dc3b20 --- /dev/null +++ b/src/app/tools/tankopedia/[id]/components/VideoSection.tsx @@ -0,0 +1,43 @@ +import { Flex, Heading, Link, Text } from '@radix-ui/themes'; +import { use } from 'react'; +import PageWrapper from '../../../../../components/PageWrapper'; +import { videoDefinitions } from '../../../../../core/blitzkit/videos'; +import { useDuel } from '../../../../../stores/duel'; + +export function VideoSection() { + const tank = useDuel((state) => state.protagonist!.tank); + const awaitedVideoDefinitions = use(videoDefinitions); + const videos = awaitedVideoDefinitions[tank.id]?.videos ?? []; + + return ( + + + + Review videos + BlitzKit does not endorse any review videos. + + + + {videos.map((video) => ( + + Video thumbnail + + ))} + + + + ); +} diff --git a/src/app/tools/tankopedia/[id]/layout.tsx b/src/app/tools/tankopedia/[id]/layout.tsx index 077062028..7363ca98b 100644 --- a/src/app/tools/tankopedia/[id]/layout.tsx +++ b/src/app/tools/tankopedia/[id]/layout.tsx @@ -1,10 +1,7 @@ -import { Flex, Heading, Link, Text } from '@radix-ui/themes'; import { ReactNode } from 'react'; -import PageWrapper from '../../../../components/PageWrapper'; import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions'; import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants'; import { tankIcon } from '../../../../core/blitzkit/tankIcon'; -import { videoDefinitions } from '../../../../core/blitzkit/videos'; import strings from '../../../../lang/en-US.json'; interface TankopediaLayoutProps { @@ -18,13 +15,11 @@ export default async function TankopediaLayout({ }: TankopediaLayoutProps) { const id = Number(params.id); const awaitedTankDefinitions = await tankDefinitions; - const awaitedVideoDefinitions = await videoDefinitions; const tank = awaitedTankDefinitions[id]; const title = `${tank.name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${ (strings.common.nations_adjectives as Record)[tank.nation] } ${strings.common.tank_class_short[tank.class]}`; const description = `Statistics, armor profiles, and equipment for ${tank.name}`; - const videos = awaitedVideoDefinitions[tank.id]?.videos ?? []; return ( <> @@ -35,42 +30,6 @@ export default async function TankopediaLayout({ {children} - - - - - Review videos - - BlitzKit does not endorse any review videos. - - - - - {videos.map((video) => ( - - Video thumbnail - - ))} - - - - - History of the {tank.name} - {tank.description} - ); } diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx index b7a35780c..e5a758dae 100644 --- a/src/app/tools/tankopedia/[id]/page.tsx +++ b/src/app/tools/tankopedia/[id]/page.tsx @@ -1,14 +1,16 @@ 'use client'; import { useEffect } from 'react'; +import { MidSectionAd } from '../../../../components/MidSectionAd'; import PageWrapper from '../../../../components/PageWrapper'; import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember'; import { mutateDuel, useDuel } from '../../../../stores/duel'; import { mutateTankopediaTemporary } from '../../../../stores/tankopedia'; +import { HistorySection } from './components/HistorySection'; import { CharacteristicsSection } from './components/Model/CharacteristicsSection'; import { HeroSection } from './components/Model/HeroSection'; -import { TankopediaPlug } from './components/Model/TankopediaPlug'; import { TechTreeSection } from './components/Model/TechTreeSection'; +import { VideoSection } from './components/VideoSection'; export default function Page({ params }: { params: { id: string } }) { const initialId = parseInt(params.id); @@ -73,9 +75,13 @@ export default function Page({ params }: { params: { id: string } }) { {assigned && ( <> - + + + + + {/* */} )} diff --git a/src/components/Ad.tsx b/src/components/Ad.tsx index fef5a0fea..b785a6df6 100644 --- a/src/components/Ad.tsx +++ b/src/components/Ad.tsx @@ -42,7 +42,6 @@ export function Ad({ type, style, ...props }: AdProps) { position="relative" width={`${dimensions[0]}px`} height={`${dimensions[1]}px`} - overflow="hidden" style={{ outline: '1px solid var(--gray-3)', borderRadius: 'var(--radius-1)', diff --git a/src/components/MidSectionAd.tsx b/src/components/MidSectionAd.tsx new file mode 100644 index 000000000..4afccbfb6 --- /dev/null +++ b/src/components/MidSectionAd.tsx @@ -0,0 +1,23 @@ +import { Flex, FlexProps } from '@radix-ui/themes'; +import { Ad, AdType } from './Ad'; + +export function MidSectionAd(props: FlexProps) { + return ( + + + + + ); +} diff --git a/yarn.lock b/yarn.lock index c01636c48..7a3342051 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5399,7 +5399,7 @@ react-use-measure@^2.1.1: dependencies: debounce "^1.2.1" -react@^18.2.0: +react@^18.3.1: version "18.3.1" resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==