feat: tankopedia website

src/app/tools/tankopedia/page.tsx

@@ -0,0 +1,64 @@
+import { Badge, Card, Flex, Text } from '@radix-ui/themes';
+import PageWrapper from '../../../components/PageWrapper';
+import { tankIcon } from '../../../core/blitzkrieg/tankIcon';
+import { tanks } from '../../../core/blitzkrieg/tankopedia';
+
+const sortedTanks = tanks.then((tanks) =>
+  tanks.sort((a, b) => b.tier - a.tier),
+);
+
+export default async function Page() {
+  const awaitedTanks = await sortedTanks;
+
+  return (
+    <PageWrapper>
+      {awaitedTanks.map((tank) => (
+        <Card
+          style={{
+            // backgroundImage: `url(${tankIcon(tank.id)})`,
+            // backgroundRepeat: 'no-repeat',
+            // backgroundPosition: '8px 8px',
+            minHeight: 128,
+          }}
+        >
+          <Flex justify="between" align="center">
+            <img
+              src={tankIcon(tank.id)}
+              style={{
+                backgroundColor: 'white',
+                width: 256,
+                height: 128,
+                objectFit: 'contain',
+                objectPosition: 'left center',
+              }}
+            />
+
+            <Flex direction="column" justify="center" align="end" gap="2">
+              <Text>
+                {tank.name_short ?? tank.name ?? `Unknown tank ${tank.id}`}
+              </Text>
+
+              <Flex justify="end" align="center" gap="1">
+                {tank.tree_type !== 'tech-tree' && (
+                  <Badge
+                    color={tank.tree_type === 'collector' ? 'blue' : 'amber'}
+                  >
+                    {tank.tree_type === 'collector' ? 'Collector' : 'Premium'}
+                  </Badge>
+                )}
+                <Badge color="indigo">
+                  {(() => {
+                    if (tank.type === 'AT-SPG') return 'Tank Destroyer';
+                    if (tank.type === 'lightTank') return 'Light Tank';
+                    if (tank.type === 'mediumTank') return 'Medium Tank';
+                    if (tank.type === 'heavyTank') return 'Heavy Tank';
+                  })()}
+                </Badge>
+              </Flex>
+            </Flex>
+          </Flex>
+        </Card>
+      ))}
+    </PageWrapper>
+  );
+}

src/commands/searchTanks.ts

@@ -1,7 +1,7 @@
 import { SlashCommandBuilder } from 'discord.js';
 import { go } from 'fuzzysort';
 import markdownEscape from 'markdown-escape';
-import { TANK_NAMES_DIACRITICS } from '../core/blitzkrieg/tankopedia';
+import { tankNamesDiacritics } from '../core/blitzkrieg/tankopedia';
 import addTankChoices from '../core/discord/addTankChoices';
 import embedInfo from '../core/discord/embedInfo';
 import { CommandRegistry } from '../events/interactionCreate';
@@ -25,7 +25,7 @@ export const searchTanksCommand: CommandRegistry = {
   async handler(interaction) {
     const tank = interaction.options.getString('tank')!;
     const limit = interaction.options.getInteger('limit') ?? 25;
-    const results = go(tank, await TANK_NAMES_DIACRITICS, {
+    const results = go(tank, await tankNamesDiacritics, {
       limit,
       keys: ['combined'],
     }).map((result) => result.obj.original);

src/components/Tanks/components/Item.tsx

@@ -11,6 +11,7 @@ export enum TreeTypeEnum {
   Collector,
 }
 
+export type TankType = 'AT-SPG' | 'lightTank' | 'mediumTank' | 'heavyTank';
 export type TreeTypeString = 'tech-tree' | 'premium' | 'collector';
 
 export const TREE_TYPE_NAMES: Record<TreeTypeString, string> = {

src/constants/tools.ts

@@ -20,7 +20,6 @@ export const TOOLS: Tool[] = [
     id: 'tankopedia',
     title: 'Tankopedia',
     description: 'Full Blitz tank encyclopedia',
-    disabled: true,
   },
   {
     id: 'inactive',

src/core/blitz/resolveTankId.ts

@@ -1,12 +1,12 @@
 import { go } from 'fuzzysort';
-import { TANKS, tankopedia } from '../blitzkrieg/tankopedia';
+import { tankopedia, tanks } from '../blitzkrieg/tankopedia';
 import { UserError } from '../blitzkrieg/userError';
 
 export default async function resolveTankId(tank: string | number) {
   const number = typeof tank === 'string' ? parseInt(tank) : tank;
 
   if (Number.isNaN(number)) {
-    const searchResult = go(`${tank}`, await TANKS, {
+    const searchResult = go(`${tank}`, await tanks, {
       keys: ['name'],
       limit: 1,
     });

src/core/blitzkrieg/tankopedia.ts

@@ -1,5 +1,5 @@
 import { deburr } from 'lodash';
-import { TreeTypeString } from '../../components/Tanks';
+import { TankType, TreeTypeString } from '../../components/Tanks';
 import { asset } from './asset';
 
 export interface TankopediaEntry {
@@ -25,7 +25,7 @@ export interface BlitzkriegTankopediaEntry {
   name_short?: string;
   tree_type: TreeTypeString;
   tier: Tier;
-  type: string;
+  type: TankType;
 }
 
 export type BlitzkriegTankopedia = Record<number, BlitzkriegTankopediaEntry>;
@@ -36,18 +36,18 @@ export const tankopedia = fetch(asset('tankopedia.json')).then(
 const entries = new Promise<BlitzkriegTankopediaEntry[]>(async (resolve) => {
   resolve(Object.entries(await tankopedia).map(([, entry]) => entry));
 });
-export const TANKS = new Promise<BlitzkriegTankopediaEntry[]>(
+export const tanks = new Promise<BlitzkriegTankopediaEntry[]>(
   async (resolve) => {
     resolve((await entries).map((entry) => entry));
   },
 );
-export const TANK_NAMES = new Promise<string[]>(async (resolve) => {
+export const tankNames = new Promise<string[]>(async (resolve) => {
   resolve((await entries).map(({ name }) => name));
 });
-export const TANK_NAMES_DIACRITICS = TANK_NAMES.then((tankNames) =>
+export const tankNamesDiacritics = tankNames.then((tankNames) =>
   Promise.all(
     tankNames.map(async (tankName, index) => {
-      const { id } = (await TANKS)[index];
+      const { id } = (await tanks)[index];
       const name = tankName ?? `Unknown Tank ${id}`;
       const diacriticless = deburr(name);
 

src/core/discord/autocompleteTanks.ts

@@ -4,7 +4,7 @@ import {
   CacheType,
 } from 'discord.js';
 import { go } from 'fuzzysort';
-import { TANK_NAMES_DIACRITICS } from '../blitzkrieg/tankopedia';
+import { tankNamesDiacritics } from '../blitzkrieg/tankopedia';
 import {
   DISCORD_CHOICES_MAX_NAME_SIZE,
   OVERFLOW_SUFFIX,
@@ -19,7 +19,7 @@ export default async function autocompleteTanks(
   await interaction.respond(
     focusedOption.value
       ? await Promise.all(
-          go(focusedOption.value, await TANK_NAMES_DIACRITICS, {
+          go(focusedOption.value, await tankNamesDiacritics, {
             keys: ['combined'],
             limit: 10,
           }).map(async (item) => {