From e3eb0f458d3c7d9d2c7d4cc8b1456d8f76d567b1 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 12:40:46 -0500 Subject: [PATCH 1/3] feat: disable overflow hidden --- src/components/Ad.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Ad.tsx b/src/components/Ad.tsx index fef5a0fea..d0dd79504 100644 --- a/src/components/Ad.tsx +++ b/src/components/Ad.tsx @@ -42,7 +42,7 @@ export function Ad({ type, style, ...props }: AdProps) { position="relative" width={`${dimensions[0]}px`} height={`${dimensions[1]}px`} - overflow="hidden" + // overflow="hidden" style={{ outline: '1px solid var(--gray-3)', borderRadius: 'var(--radius-1)', 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 2/3] 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 ( + + + + + ); +} From 1aaff323bf06c66d348b848931fc38219280efb5 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:24:42 -0500 Subject: [PATCH 3/3] fix: add react --- package.json | 1 + yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 3b92e5b39..c46162d15 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "postprocessing": "^6.34.1", "progress": "^2.0.3", "protobufjs": "^7.2.6", + "react": "^18.3.1", "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-fuzzysort": "^1.0.1", diff --git a/yarn.lock b/yarn.lock index 69737ef02..dfb5644db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5151,10 +5151,10 @@ react-use-measure@^2.1.1: dependencies: debounce "^1.2.1" -react@^18.2.0: - version "18.2.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" - integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== +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== dependencies: loose-envify "^1.1.0"