feat: compare in-table ads

packages/website/src/components/Ad.tsx

@@ -58,6 +58,7 @@ export function Ad({ id, commonHeight, ...props }: AdProps) {
     <Box
       id={id}
       width="100%"
+      className="ad-container"
       height={commonHeight ? `${commonHeight}px` : 'auto'}
       {...props}
     />

packages/website/src/components/AdStickyTableRow.tsx

@@ -0,0 +1,24 @@
+import { Flex, Table } from '@radix-ui/themes';
+import { Ad } from './Ad';
+
+interface AdStickyTableRowProps {
+  id: string;
+}
+
+export function AdStickyTableRow({ id }: AdStickyTableRowProps) {
+  return (
+    <Table.Body style={{ height: 250 }}>
+      <Table.Row align="center">
+        <Flex
+          justify="center"
+          align="center"
+          position="absolute"
+          width="100%"
+          left="0"
+        >
+          <Ad commonHeight={250} id={id} />
+        </Flex>
+      </Table.Row>
+    </Table.Body>
+  );
+}

packages/website/src/components/Compare/Body.tsx

@@ -2,6 +2,7 @@ import { asset } from '@blitzkit/core';
 import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
 import type { TankCharacteristics } from '../../core/blitzkit/tankCharacteristics';
 import { CompareEphemeral } from '../../stores/compareEphemeral';
+import { AdStickyTableRow } from '../AdStickyTableRow';
 import { StickyColumnHeaderCell } from '../StickyColumnHeaderCell';
 import { CompareRow } from './CompareRow';
 import { CompareSectionTitle } from './CompareSectionTitle';
@@ -74,6 +75,9 @@ export function Body({ stats }: BodyProps) {
           ))}
         </Table.Row>
       </Table.Header>
+
+      <AdStickyTableRow id="compare-1" />
+
       <Table.Body>
         <CompareRow stats={stats} name="DPM" value="dpm" decimals={0} />
         <CompareRow
@@ -219,6 +223,8 @@ export function Body({ stats }: BodyProps) {
         />
       </Table.Body>
 
+      <AdStickyTableRow id="compare-2" />
+
       <CompareSectionTitle>Maneuverability</CompareSectionTitle>
       <Table.Body>
         <CompareRow
@@ -329,6 +335,8 @@ export function Body({ stats }: BodyProps) {
         />
       </Table.Body>
 
+      <AdStickyTableRow id="compare-3" />
+
       <CompareSectionTitle>Survivability</CompareSectionTitle>
       <Table.Body>
         <CompareRow stats={stats} name="Health" value="health" decimals={0} />

packages/website/src/components/Compare/CompareTable.tsx

@@ -45,7 +45,10 @@ export function CompareTable({ stats }: CompareTableProps) {
     <StickyTableRoot
       size="1"
       variant="surface"
-      style={{ maxWidth: '100%', height: 'calc(100vh - 128px)' }}
+      style={{
+        maxWidth: '100%',
+        // height: 'calc(100vh - 128px)'
+      }}
     >
       <Table.Header>
         <Table.Row>

packages/website/src/components/TankSearch/index.tsx

@@ -477,7 +477,7 @@ export const TankSearch = memo<TankSearchProps>(
                           <Flex gridColumn="1 / -1">
                             <Ad
                               commonHeight={250}
-                              id={`tankopedia-search-ad-${Math.floor(index / 32)}`}
+                              id={`tankopedia-search-${Math.floor(index / 32)}`}
                             />
                           </Flex>
                         )}

packages/website/src/layouts/BaseLayout.astro

@@ -16,6 +16,11 @@ const isRoot = pathname === '/';
   body {
     margin: 0;
   }
+
+  .ad-container {
+    display: flex;
+    align-items: center;
+  }
 </style>
 
 <!-- MIGRATION TODO: roboto flex font -->

packages/website/src/pages/index.astro

@@ -25,7 +25,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       <ToolCard tool={tankopediaTool} />
 
       <Flex justify="center">
-        <Ad client:idle id="homepage-ad-1" commonHeight={250} />
+        <Ad client:idle id="homepage-1" commonHeight={250} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
@@ -42,7 +42,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       </Flex>
 
       <Flex justify="center">
-        <Ad client:idle id="homepage-ad-2" commonHeight={250} />
+        <Ad client:idle id="homepage-2" commonHeight={250} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>

packages/website/src/pages/tools/tankopedia/[id]/_index.tsx

@@ -48,16 +48,16 @@ export function Page({ id }: PageProps) {
             >
               <HeroSection />
               <ShotDisplaySection />
-              <Ad id="tankopedia-ad-1" commonHeight={250} />
+              <Ad id="tankopedia-1" commonHeight={250} />
               <CalloutsSection />
               <MetaSection />
               <TechTreeSection />
-              <Ad id="tankopedia-ad-2" commonHeight={250} />
+              <Ad id="tankopedia-2" commonHeight={250} />
               <CharacteristicsSection />
-              <Ad id="tankopedia-ad-3" commonHeight={250} />
+              <Ad id="tankopedia-3" commonHeight={250} />
               <GameModeSection />
               <VideoSection />
-              <Ad id="tankopedia-ad-4" commonHeight={250} />
+              <Ad id="tankopedia-4" commonHeight={250} />
               <HistorySection />
             </PageWrapper>
           </Duel.Provider>