feat: responsive ads

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -11,6 +11,7 @@ import {
 import { debounce } from 'lodash';
 import { Fragment, use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
+import { Ad, AdType } from '../../../../../../components/Ad';
 import { Link } from '../../../../../../components/Link';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { isExplosive } from '../../../../../../core/blitz/isExplosive';
@@ -26,14 +27,12 @@ import {
   GUN_TYPE_NAMES,
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
 import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
 export function Characteristics() {
-  const wideFormat = useWideFormat(960);
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
@@ -128,7 +127,13 @@ export function Characteristics() {
   }, [hasImprovedVerticalStabilizer]);
 
   return (
-    <Flex direction={wideFormat ? 'row' : 'column'} gap="8" wrap="wrap">
+    <Flex
+      gap="8"
+      direction={{
+        initial: 'column',
+        md: 'row',
+      }}
+    >
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">
           <Flex align="center" gap="4">
@@ -480,6 +485,16 @@ export function Characteristics() {
         </Flex>
       </Flex>
 
+      <Flex
+        justify="center"
+        display={{
+          initial: 'flex',
+          xs: 'none',
+        }}
+      >
+        <Ad type={AdType.MediumRectangleHorizontalPurple} />
+      </Flex>
+
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">
           <Heading size="5">Maneuverability</Heading>

src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx

@@ -1,5 +1,5 @@
 import { Flex, Heading } from '@radix-ui/themes';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
+import { Ad, AdType } from '../../../../../../components/Ad';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
 import { Equipment } from '../Characteristics/components/Equipment';
@@ -9,22 +9,39 @@ import { Provisions } from '../Characteristics/components/Provisions';
 import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
-  const wideFormat = useWideFormat(880);
-
   return (
     <Flex
-      align="center"
+      // align="center"
       px="4"
       style={{
         boxSizing: 'border-box',
       }}
-      direction={wideFormat ? 'row' : 'column'}
+      gap="6"
     >
       <Flex
+        direction="column"
+        gap="4"
+        display={{
+          initial: 'none',
+          lg: 'flex',
+        }}
+        pt={{
+          initial: '9',
+          md: '0',
+        }}
+      >
+        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+      </Flex>
+
+      <Flex
+        flexGrow="1"
         gap="6"
-        style={{ width: '100%' }}
-        direction={wideFormat ? 'row' : 'column'}
         justify="center"
+        direction={{
+          initial: 'column',
+          sm: 'row',
+        }}
       >
         <Flex direction="column" gap="4">
           <Heading>Configuration</Heading>
@@ -37,10 +54,11 @@ export function CharacteristicsSection() {
         </Flex>
 
         <Flex
-          style={{
+          flexGrow="1"
-            flex: 1,
+          maxWidth={{
-            maxWidth: wideFormat ? 640 : undefined,
+            initial: 'unset',
-            minWidth: 320,
+            xs: '320px',
+            md: '640px',
           }}
           direction="column"
           gap="4"
@@ -49,6 +67,23 @@ export function CharacteristicsSection() {
           <Characteristics />
         </Flex>
       </Flex>
+
+      <Flex
+        direction="column"
+        gap="4"
+        height="100%"
+        display={{
+          initial: 'none',
+          xs: 'flex',
+        }}
+        pt={{
+          initial: '9',
+          md: '0',
+        }}
+      >
+        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+      </Flex>
     </Flex>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
-import { MidSectionAd } from '../../../../components/MidSectionAd';
+import { AdMidSectionResponsive } from '../../../../components/AdMidSectionResponsive';
+import { AdMidSectionWideOnly } from '../../../../components/AdMidSectionWideOnly';
 import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
@@ -75,12 +76,12 @@ export default function Page({ params }: { params: { id: string } }) {
       {assigned && (
         <>
           <HeroSection />
-          <MidSectionAd />
+          <AdMidSectionWideOnly />
           <CharacteristicsSection />
-          <MidSectionAd />
+          <AdMidSectionResponsive />
           <TechTreeSection />
           <VideoSection />
-          <MidSectionAd />
+          <AdMidSectionResponsive />
           <HistorySection />
           {/* <TankopediaSeparator /> */}
         </>

src/components/AdMidSectionNarrowOnly.tsx

@@ -0,0 +1,19 @@
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { Ad, AdType } from './Ad';
+
+export function AdMidSectionNarrowOnly(props: FlexProps) {
+  return (
+    <Flex
+      justify="center"
+      py="4"
+      gap="4"
+      display={{
+        initial: 'flex',
+        sm: 'none',
+      }}
+      {...props}
+    >
+      <Ad type={AdType.MediumRectangleHorizontalPurple} />
+    </Flex>
+  );
+}

src/components/AdMidSectionResponsive.tsx

@@ -1,7 +1,7 @@
 import { Flex, FlexProps } from '@radix-ui/themes';
 import { Ad, AdType } from './Ad';
 
-export function MidSectionAd(props: FlexProps) {
+export function AdMidSectionResponsive(props: FlexProps) {
   return (
     <Flex justify="center" py="4" gap="4" {...props}>
       <Ad

src/components/AdMidSectionWideOnly.tsx

@@ -0,0 +1,19 @@
+import { Flex, FlexProps } from '@radix-ui/themes';
+import { Ad, AdType } from './Ad';
+
+export function AdMidSectionWideOnly(props: FlexProps) {
+  return (
+    <Flex
+      justify="center"
+      py="4"
+      gap="4"
+      display={{
+        initial: 'none',
+        sm: 'flex',
+      }}
+      {...props}
+    >
+      <Ad type={AdType.LeaderboardHorizontalPurple} />
+    </Flex>
+  );
+}