feat: cleaner exempt

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

@@ -26,6 +26,7 @@ import {
   CREW_MEMBER_NAMES,
   GUN_TYPE_NAMES,
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useAdExempt } from '../../../../../../hooks/useAdExempt';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
@@ -33,6 +34,7 @@ import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
 export function Characteristics() {
+  const exempt = useAdExempt();
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
@@ -485,15 +487,17 @@ export function Characteristics() {
         </Flex>
       </Flex>
 
-      <Flex
+      {!exempt && (
-        justify="center"
+        <Flex
-        display={{
+          justify="center"
-          initial: 'flex',
+          display={{
-          xs: 'none',
+            initial: 'flex',
-        }}
+            xs: 'none',
-      >
+          }}
-        <Ad type={AdType.MediumRectangleHorizontalPurple} />
+        >
-      </Flex>
+          <Ad type={AdType.MediumRectangleHorizontalPurple} />
+        </Flex>
+      )}
 
       <Flex direction="column" gap="8" style={{ flex: 1 }}>
         <Flex direction="column" gap="2">

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

@@ -1,5 +1,6 @@
 import { Flex, Heading } from '@radix-ui/themes';
 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,8 +10,11 @@ import { Provisions } from '../Characteristics/components/Provisions';
 import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
+  const exempt = useAdExempt();
+
   return (
     <Flex
+      mt={exempt ? '4' : '0'}
       // align="center"
       px="4"
       style={{
@@ -18,21 +22,23 @@ export function CharacteristicsSection() {
       }}
       gap="6"
     >
-      <Flex
+      {!exempt && (
-        direction="column"
+        <Flex
-        gap="4"
+          direction="column"
-        display={{
+          gap="4"
-          initial: 'none',
+          display={{
-          lg: 'flex',
+            initial: 'none',
-        }}
+            lg: 'flex',
-        pt={{
+          }}
-          initial: '9',
+          pt={{
-          md: '0',
+            initial: '9',
-        }}
+            md: '0',
-      >
+          }}
-        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+        >
-        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+          <Ad type={AdType.WideSkyscraperVerticalPurple} />
-      </Flex>
+          <Ad type={AdType.WideSkyscraperVerticalPurple} />
+        </Flex>
+      )}
 
       <Flex
         flexGrow="1"
@@ -57,7 +63,7 @@ export function CharacteristicsSection() {
           flexGrow="1"
           maxWidth={{
             initial: 'unset',
-            xs: '320px',
+            xs: exempt ? undefined : '320px',
             md: '640px',
           }}
           direction="column"
@@ -68,22 +74,24 @@ export function CharacteristicsSection() {
         </Flex>
       </Flex>
 
-      <Flex
+      {!exempt && (
-        direction="column"
+        <Flex
-        gap="4"
+          direction="column"
-        height="100%"
+          gap="4"
-        display={{
+          height="100%"
-          initial: 'none',
+          display={{
-          xs: 'flex',
+            initial: 'none',
-        }}
+            xs: 'flex',
-        pt={{
+          }}
-          initial: '9',
+          pt={{
-          md: '0',
+            initial: '9',
-        }}
+            md: '0',
-      >
+          }}
-        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+        >
-        <Ad type={AdType.WideSkyscraperVerticalPurple} />
+          <Ad type={AdType.WideSkyscraperVerticalPurple} />
-      </Flex>
+          <Ad type={AdType.WideSkyscraperVerticalPurple} />
+        </Flex>
+      )}
     </Flex>
   );
 }

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

@@ -2,9 +2,9 @@
 
 import { useEffect } from 'react';
 import { AdMidSectionResponsive } from '../../../../components/AdMidSectionResponsive';
-import { AdMidSectionWideOnly } from '../../../../components/AdMidSectionWideOnly';
 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';
@@ -16,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);
@@ -76,14 +77,13 @@ export default function Page({ params }: { params: { id: string } }) {
       {assigned && (
         <>
           <HeroSection />
-          <AdMidSectionWideOnly />
+          {!exempt && <AdMidSectionResponsive />}
           <CharacteristicsSection />
-          <AdMidSectionResponsive />
+          {!exempt && <AdMidSectionResponsive />}
           <TechTreeSection />
           <VideoSection />
-          <AdMidSectionResponsive />
+          {!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">
+      {!exempt && (
-        {times(2, (index) => (
+        <Flex justify="center" wrap="wrap">
-          <Ad key={index} type={AdType.MediumRectangleHorizontalPurple} />
+          {times(2, (index) => (
-        ))}
+            <Ad key={index} type={AdType.MediumRectangleHorizontalPurple} />
-      </Flex>
+          ))}
+        </Flex>
+      )}
     </PageWrapper>
   );
 }

src/components/Ad.tsx

@@ -5,7 +5,6 @@ import { uniqueId } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { Vector2Tuple } from 'three';
 import { imgur } from '../core/blitzkit/imgur';
-import { useAdExempt } from '../hooks/useAdExempt';
 
 export enum AdType {
   MediumRectangleHorizontalPurple = 738182777,
@@ -28,9 +27,6 @@ type AdProps = BoxProps & {
 export function Ad({ type, style, ...props }: AdProps) {
   const id = useRef(uniqueId());
   const dimensions = AD_DIMENSIONS[type];
-  const exempt = useAdExempt();
-
-  if (exempt) return null;
 
   useEffect(() => {
     (window as any).msAdsQueue.push(function () {

src/hooks/useAdExempt.ts

@@ -2,6 +2,8 @@ import { use } from 'react';
 import { useApp } from '../stores/app';
 
 export function useAdExempt() {
+  return true;
+
   const patreon = useApp((state) => state.logins.patreon);
 
   if (!patreon) return false;