Merge branch 'main' into dev

src/app/tools/tankopedia/map/page.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { Flex, Link } from '@radix-ui/themes';
-import { use } from 'react';
-import PageWrapper from '../../../../components/PageWrapper';
-import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
-
-export default function Page() {
-  const awaitedTankDefinitions = use(tankDefinitions);
-
-  return (
-    <PageWrapper>
-      <title>Super duper secret map for SEO</title>
-
-      <Flex direction="column" align="center">
-        {Object.values(awaitedTankDefinitions)
-          .sort((a, b) => b.tier - a.tier)
-          .map((tank) => (
-            <Link href={`./${tank.id}`} key={tank.id}>
-              {tank.name}
-            </Link>
-          ))}
-      </Flex>
-    </PageWrapper>
-  );
-}

src/app/tools/tankopedia/page.tsx

@@ -2,7 +2,6 @@
 
 import { Flex } from '@radix-ui/themes';
 import { times } from 'lodash';
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { Ad, AdType } from '../../../components/Ad';
 import PageWrapper from '../../../components/PageWrapper';
@@ -20,14 +19,10 @@ export default function Page() {
       />
 
       <Flex justify="center" wrap="wrap">
-        {times(2, () => (
-          <Ad type={AdType.TankopediaHorizontal800} />
+        {times(2, (index) => (
+          <Ad key={index} type={AdType.MediumRectangleHorizontalPurple} />
         ))}
       </Flex>
-
-      <Flex justify="center" mt="4">
-        <Link href="/tools/tankopedia/map">Super duper secret map</Link>
-      </Flex>
     </PageWrapper>
   );
 }

src/components/Ad.tsx

@@ -1,21 +1,77 @@
 'use client';
 
-import { ComponentProps, useEffect } from 'react';
+import { Box, BoxProps, Flex, Text } from '@radix-ui/themes';
+import { uniqueId } from 'lodash';
+import { useEffect, useRef } from 'react';
+import { Vector2Tuple } from 'three';
+import { imgur } from '../core/blitzkit/imgur';
 
 export enum AdType {
-  TankopediaHorizontal800 = 738182777,
+  MediumRectangleHorizontalPurple = 738182777,
+  LeaderboardHorizontalPurple = 84051521,
+  WideSkyscraperVerticalPurple = 1755617140,
+  HalfPageVerticalPurple = 880185176,
 }
 
-interface AdProps extends ComponentProps<'div'> {
+const AD_DIMENSIONS: Record<AdType, Vector2Tuple> = {
+  [AdType.MediumRectangleHorizontalPurple]: [300, 250],
+  [AdType.LeaderboardHorizontalPurple]: [728, 90],
+  [AdType.WideSkyscraperVerticalPurple]: [160, 600],
+  [AdType.HalfPageVerticalPurple]: [300, 600],
+};
+
+type AdProps = BoxProps & {
   type: AdType;
-}
+};
+
+export function Ad({ type, style, ...props }: AdProps) {
+  const id = useRef(uniqueId());
+  const dimensions = AD_DIMENSIONS[type];
 
-export function Ad({ type, ...props }: AdProps) {
   useEffect(() => {
     (window as any).msAdsQueue.push(function () {
-      (window as any).mmnow.render({ adUnitId: type, elementId: type });
+      (window as any).mmnow.render({
+        adUnitId: type,
+        elementId: `${type}-${id.current}`,
+      });
     });
-  });
+  }, [type]);
 
-  return <div id={`${type}`} {...props} />;
+  return (
+    <Box
+      position="relative"
+      width={`${dimensions[0]}px`}
+      height={`${dimensions[1]}px`}
+      overflow="hidden"
+      style={{
+        outline: '1px solid var(--gray-3)',
+        borderRadius: 'var(--radius-1)',
+        background: `url(${imgur('DK21EHY')})`,
+
+        ...style,
+      }}
+      {...props}
+    >
+      <Flex
+        position="absolute"
+        top="50%"
+        left="50%"
+        style={{ transform: 'translate(-50%, -50%)' }}
+        direction="column"
+        align="center"
+      >
+        <Text color="gray">Advertisement</Text>
+        <Text size="1" color="gray">
+          {dimensions[0]}x{dimensions[1]}
+        </Text>
+      </Flex>
+
+      <Box
+        width={`${dimensions[0]}px`}
+        height={`${dimensions[1]}px`}
+        position="relative"
+        id={`${type}-${id.current}`}
+      />
+    </Box>
+  );
 }