feat: better ad discriminators

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

@@ -470,20 +470,26 @@ export const TankSearch = memo<TankSearchProps>(
           <>
             {tanks.length > 0 && (
               <TankCardWrapper>
-                {tanks.map((tank, index) => (
+                {tanks.map((tank, index) => {
-                  <Fragment key={tank.id}>
+                  const hasAd = (index + 16) % 32 === 0;
-                    <TankCard onSelect={onSelect} tank={tank} />
 
-                    {!exempt &&
+                  return (
-                      !compact &&
+                    <Fragment key={tank.id}>
-                      (index + 16) % 32 === 0 &&
+                      <TankCard onSelect={onSelect} tank={tank} />
-                      index !== tanks.length - 1 && (
+
-                        <Box gridColumn="1 / -1">
+                      {!exempt &&
-                          <Ad id={`ad-${index}`} />
+                        !compact &&
-                        </Box>
+                        hasAd &&
-                      )}
+                        index !== tanks.length - 1 && (
-                  </Fragment>
+                          <Box gridColumn="1 / -1">
-                ))}
+                            <Ad
+                              id={`tankopedia-search-ad-${Math.floor(index / 32)}`}
+                            />
+                          </Box>
+                        )}
+                    </Fragment>
+                  );
+                })}
 
                 {times(
                   Math.min(PREVIEW_COUNT, tanksFiltered.length - loadedRows),

packages/website/src/pages/index.astro

@@ -24,7 +24,7 @@ import RootLayout from '../layouts/RootLayout.astro';
     <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
       <ToolCard tool={tankopediaTool} />
 
-      <Ad client:only="react" id="ad-1" />
+      <Ad client:only="react" id="homepage-ad-1" />
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         {/* <ToolCard tool={playerStatsTool} /> */}
@@ -39,7 +39,7 @@ import RootLayout from '../layouts/RootLayout.astro';
         <ToolCard tool={discordTool} />
       </Flex>
 
-      <Ad client:only="react" id="ad-2" />
+      <Ad client:only="react" id="homepage-ad-2" />
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={moreTool} />