Merge branch 'main' into dev

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';
@@ -25,15 +26,15 @@ import {
   CREW_MEMBER_NAMES,
   GUN_TYPE_NAMES,
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useAdExempt } from '../../../../../../hooks/useAdExempt';
 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 exempt = useAdExempt();
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
@@ -128,7 +129,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 +487,18 @@ export function Characteristics() {
         </Flex>
       </Flex>
 
+      {!exempt && (
+        <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,6 @@
 import { Flex, Heading } from '@radix-ui/themes';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
+import { Ad, AdType } from '../../../../../../components/Ad';
+import { useAdExempt } from '../../../../../../hooks/useAdExempt';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
 import { Equipment } from '../Characteristics/components/Equipment';
@@ -9,22 +10,44 @@ import { Provisions } from '../Characteristics/components/Provisions';
 import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
-  const wideFormat = useWideFormat(880);
+  const exempt = useAdExempt();
 
   return (
     <Flex
-      align="center"
+      mt={exempt ? '4' : '0'}
+      // align="center"
       px="4"
       style={{
         boxSizing: 'border-box',
       }}
-      direction={wideFormat ? 'row' : 'column'}
+      gap="6"
     >
+      {!exempt && (
+        <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 +60,11 @@ export function CharacteristicsSection() {
         </Flex>
 
         <Flex
-          style={{
-            flex: 1,
-            maxWidth: wideFormat ? 640 : undefined,
-            minWidth: 320,
+          flexGrow="1"
+          maxWidth={{
+            initial: 'unset',
+            xs: exempt ? undefined : '320px',
+            md: '640px',
           }}
           direction="column"
           gap="4"
@@ -49,6 +73,25 @@ export function CharacteristicsSection() {
           <Characteristics />
         </Flex>
       </Flex>
+
+      {!exempt && (
+        <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,9 +1,10 @@
 'use client';
 
 import { useEffect } from 'react';
-import { MidSectionAd } from '../../../../components/MidSectionAd';
+import { AdMidSectionResponsive } from '../../../../components/AdMidSectionResponsive';
 import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
+import { useAdExempt } from '../../../../hooks/useAdExempt';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { HistorySection } from './components/HistorySection';
@@ -15,6 +16,7 @@ import { VideoSection } from './components/VideoSection';
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
   const assigned = useDuel((state) => state.assigned);
+  const exempt = useAdExempt();
 
   useEffect(() => {
     assignDuelMember('both', initialId);
@@ -75,14 +77,13 @@ export default function Page({ params }: { params: { id: string } }) {
       {assigned && (
         <>
           <HeroSection />
-          <MidSectionAd />
+          {!exempt && <AdMidSectionResponsive />}
           <CharacteristicsSection />
-          <MidSectionAd />
+          {!exempt && <AdMidSectionResponsive />}
           <TechTreeSection />
           <VideoSection />
-          <MidSectionAd />
+          {!exempt && <AdMidSectionResponsive />}
           <HistorySection />
-          {/* <TankopediaSeparator /> */}
         </>
       )}
     </PageWrapper>

src/app/tools/tankopedia/page.tsx

@@ -5,10 +5,12 @@ import { times } from 'lodash';
 import { useRouter } from 'next/navigation';
 import { Ad, AdType } from '../../../components/Ad';
 import PageWrapper from '../../../components/PageWrapper';
+import { useAdExempt } from '../../../hooks/useAdExempt';
 import { TankSearch } from './components/TankSearch';
 
 export default function Page() {
   const router = useRouter();
+  const exempt = useAdExempt();
 
   return (
     <PageWrapper size={1200} color="purple">
@@ -18,11 +20,13 @@ export default function Page() {
         }}
       />
 
-      <Flex justify="center" wrap="wrap">
-        {times(2, (index) => (
-          <Ad key={index} type={AdType.MediumRectangleHorizontalPurple} />
-        ))}
-      </Flex>
+      {!exempt && (
+        <Flex justify="center" wrap="wrap">
+          {times(2, (index) => (
+            <Ad key={index} type={AdType.MediumRectangleHorizontalPurple} />
+          ))}
+        </Flex>
+      )}
     </PageWrapper>
   );
 }