feat: more ads

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",

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 (
+    <PageWrapper noFlex1>
+      <Heading>History of the {tank.name}</Heading>
+      <Text>{tank.description}</Text>
+    </PageWrapper>
+  );
+}

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 (
+    <PageWrapper noFlex1>
+      <Flex direction="column" gap="4" align="start">
+        <Flex direction="column">
+          <Heading size="6">Review videos</Heading>
+          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
+        </Flex>
+
+        <Flex gap="3" wrap="wrap">
+          {videos.map((video) => (
+            <Link
+              key={video}
+              href={`https://www.youtube.com/watch?v=${video}`}
+              target="_blank"
+            >
+              <img
+                alt="Video thumbnail"
+                src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+                style={{
+                  aspectRatio: '16 / 9',
+                  objectFit: 'cover',
+                  height: 128,
+                  borderRadius: 8,
+                }}
+              />
+            </Link>
+          ))}
+        </Flex>
+      </Flex>
+    </PageWrapper>
+  );
+}

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<string, string>)[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({
       <meta property="og:description" content={description} />
 
       {children}
-
-      <PageWrapper noFlex1>
-        <Flex direction="column" gap="4" align="start">
-          <Flex direction="column">
-            <Heading size="6">Review videos</Heading>
-            <Text color="gray">
-              BlitzKit does not endorse any review videos.
-            </Text>
-          </Flex>
-
-          <Flex gap="3" wrap="wrap">
-            {videos.map((video) => (
-              <Link
-                key={video}
-                href={`https://www.youtube.com/watch?v=${video}`}
-                target="_blank"
-              >
-                <img
-                  alt="Video thumbnail"
-                  src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
-                  style={{
-                    aspectRatio: '16 / 9',
-                    objectFit: 'cover',
-                    height: 128,
-                    borderRadius: 8,
-                  }}
-                />
-              </Link>
-            ))}
-          </Flex>
-        </Flex>
-      </PageWrapper>
-      <PageWrapper noFlex1>
-        <Heading>History of the {tank.name}</Heading>
-        <Text>{tank.description}</Text>
-      </PageWrapper>
     </>
   );
 }

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 && (
         <>
           <HeroSection />
-          <TankopediaPlug />
+          <MidSectionAd />
           <CharacteristicsSection />
+          <MidSectionAd />
           <TechTreeSection />
+          <VideoSection />
+          <MidSectionAd />
+          <HistorySection />
           {/* <TankopediaSeparator /> */}
         </>
       )}

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)',

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 (
+    <Flex justify="center" py="4" gap="4" {...props}>
+      <Ad
+        display={{
+          initial: 'none',
+          sm: 'block',
+        }}
+        type={AdType.LeaderboardHorizontalPurple}
+      />
+      <Ad
+        display={{
+          initial: 'block',
+          sm: 'none',
+        }}
+        type={AdType.MediumRectangleHorizontalPurple}
+      />
+    </Flex>
+  );
+}