Merge branch 'main' into dev

scripts/discoverIds.ts

@@ -28,7 +28,7 @@ console.log(`Running in ${production ? 'production' : 'development'} mode`);
 
 const startTime = Date.now();
 const indexableRegions = [...REGIONS];
-const ids: number[] = [];
+let ids: number[] = [];
 const preDiscoveredManifest = (await fetch(
   asset('ids/manifest.json', !production),
 ).then((response) => response.json())) as DiscoverIdsManifest;
@@ -48,7 +48,7 @@ while (chunkIndex < preDiscoveredManifest.chunks) {
   });
 
   // no spread syntax: https://github.com/oven-sh/bun/issues/11734
-  preDiscovered.forEach((id) => ids.push(id));
+  ids = ids.concat(preDiscovered);
 
   console.log(
     `Pre-discovered ${preDiscovered.length} ids (chunk ${chunkIndex})`,
@@ -134,19 +134,25 @@ const interval = setInterval(async () => {
 
 function post() {
   clearInterval(interval);
+  ids = uniq(ids).sort((a, b) => a - b);
   console.log(`Uploading ${ids.length} ids...`);
 
-  const idsSorted = uniq(ids).sort((a, b) => a - b);
-  const idsChunked = chunk(idsSorted, CHUNK_SIZE);
-  const files = idsChunked.map((ids, chunk) => {
-    const didsWriteStream = new DidsWriteStream().dids(ids);
-    const compressed = compress(didsWriteStream.uint8Array);
+  const idsChunked = chunk(ids, CHUNK_SIZE);
+  const files = idsChunked.map((chunk, index) => {
+    const didsWriteStream = new DidsWriteStream().dids(chunk);
+    const buffer = didsWriteStream.uint8Array;
+    const compressed = compress(buffer);
+
+    console.log(
+      `Chunk ${index} with ${chunk.length} ids (compressed: ${compressed.length}; uncompressed: ${buffer.length})`,
+    );
+
     const content = Buffer.from(compressed).toString('base64');
 
     return {
       content,
       encoding: 'base64' as const,
-      path: `ids/${chunk}.dids.lz4`,
+      path: `ids/${index}.dids.lz4`,
     };
   });
 

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>
+  );
 }