From 30cb319c1ef7f8a07c23071ae2ae595ea8798c3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 13 Oct 2024 20:49:02 -0500
Subject: [PATCH] feat: compare in-table ads

---
 packages/website/src/components/Ad.tsx        |  1 +
 .../src/components/AdStickyTableRow.tsx       | 24 +++++++++++++++++++
 .../website/src/components/Compare/Body.tsx   |  8 +++++++
 .../src/components/Compare/CompareTable.tsx   |  5 +++-
 .../src/components/TankSearch/index.tsx       |  2 +-
 packages/website/src/layouts/BaseLayout.astro |  5 ++++
 packages/website/src/pages/index.astro        |  4 ++--
 .../pages/tools/tankopedia/[id]/_index.tsx    |  8 +++----
 8 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 packages/website/src/components/AdStickyTableRow.tsx

diff --git a/packages/website/src/components/Ad.tsx b/packages/website/src/components/Ad.tsx
index 1222f8d0d..e9ee197f2 100644
--- a/packages/website/src/components/Ad.tsx
+++ b/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}
     />
diff --git a/packages/website/src/components/AdStickyTableRow.tsx b/packages/website/src/components/AdStickyTableRow.tsx
new file mode 100644
index 000000000..fe9f740b0
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/website/src/components/Compare/Body.tsx b/packages/website/src/components/Compare/Body.tsx
index 3f25096a1..f753c35ed 100644
--- a/packages/website/src/components/Compare/Body.tsx
+++ b/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} />
diff --git a/packages/website/src/components/Compare/CompareTable.tsx b/packages/website/src/components/Compare/CompareTable.tsx
index cd45455e7..02ebeb69d 100644
--- a/packages/website/src/components/Compare/CompareTable.tsx
+++ b/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>
diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx
index a6d9465d0..c5335387f 100644
--- a/packages/website/src/components/TankSearch/index.tsx
+++ b/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>
                         )}
diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro
index 923bcc2ff..eef190d7f 100644
--- a/packages/website/src/layouts/BaseLayout.astro
+++ b/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 -->
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index 23c799025..d3cdf1a03 100644
--- a/packages/website/src/pages/index.astro
+++ b/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' }}>
diff --git a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx b/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx
index af85078cc..16d30e75b 100644
--- a/packages/website/src/pages/tools/tankopedia/[id]/_index.tsx
+++ b/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>