From 55d0c1926ce58573f1cb7abd2650573c2268f2a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Wed, 12 Jun 2024 13:08:52 -0500 Subject: [PATCH] feat: more ads --- package.json | 1 - .../[id]/components/HistorySection.tsx | 16 +++++++ .../[id]/components/VideoSection.tsx | 43 +++++++++++++++++++ src/app/tools/tankopedia/[id]/layout.tsx | 41 ------------------ src/app/tools/tankopedia/[id]/page.tsx | 10 ++++- src/components/Ad.tsx | 1 - src/components/MidSectionAd.tsx | 23 ++++++++++ 7 files changed, 90 insertions(+), 45 deletions(-) create mode 100644 src/app/tools/tankopedia/[id]/components/HistorySection.tsx create mode 100644 src/app/tools/tankopedia/[id]/components/VideoSection.tsx create mode 100644 src/components/MidSectionAd.tsx diff --git a/package.json b/package.json index af98f0f5d..3b92e5b39 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,6 @@ "postprocessing": "^6.34.1", "progress": "^2.0.3", "protobufjs": "^7.2.6", - "react": "^18.2.0", "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 52e2a425f..4da1fc0e7 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 d0dd79504..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 ( + + + + + ); +}