feat: applied new renderer to ownedtanks

src/commands/ownedtanks.tsx

@@ -1,17 +1,21 @@
 import { SlashCommandBuilder } from 'discord.js';
-import markdownEscape from 'markdown-escape';
+import PoweredByWargaming from '../components/PoweredByWargaming.js';
+import * as Tanks from '../components/Tanks/index.js';
+import TitleBar from '../components/TitleBar.js';
+import Wrapper from '../components/Wrapper.js';
+import { BLITZ_SERVERS } from '../constants/servers.js';
 import usernameAutocomplete from '../core/autocomplete/username.js';
 import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
 import getTankStats from '../core/blitz/getTankStats.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import resolveTankName from '../core/blitz/resolveTankName.js';
-import { TANK_TYPE_EMOJIS, tankopedia } from '../core/blitz/tankopedia.js';
+import { TIER_ROMAN_NUMERALS, tankopedia } from '../core/blitz/tankopedia.js';
 import cmdName from '../core/interaction/cmdName.js';
-import infoEmbed from '../core/interaction/infoEmbed.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
 import { args } from '../core/process/args.js';
+import render from '../core/ui/render.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
 import { AccountInfo } from '../types/accountInfo.js';
+import { PlayerClanData } from '../types/playerClanData.js';
 
 const COMP_TANKS = [
   // light tanks
@@ -36,7 +40,7 @@ const COMP_TANKS = [
 
 export default {
   inProduction: true,
-  inDevelopment: false,
+  inDevelopment: true,
   inPublic: true,
 
   command: new SlashCommandBuilder()
@@ -63,36 +67,44 @@ export default {
     const tanks = tankStats
       .map((tankData) => tankopedia[tankData.tank_id])
       .filter((tank) => tank?.tier === tier);
+    const clanData = await getWargamingResponse<PlayerClanData>(
+      `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${args['wargaming-application-id']}&account_id=${id}&extra=clan`,
+    );
 
-    await interaction.editReply({
-      embeds: [
-        infoEmbed(
-          `${markdownEscape(accountInfo[id].nickname)}'s owned ${
-            tier === null ? '' : `tier ${tier} `
-          }tanks`,
-          `${
-            tanks.length === 0
-              ? `No tanks found in tier ${tier}`
-              : tanks
-                  .map(
-                    (tank) =>
-                      `${TANK_TYPE_EMOJIS[tank.type]} ${markdownEscape(
-                        resolveTankName(tank.tank_id),
-                      )} ${tank.is_premium ? '⭐' : ''}${
-                        COMP_TANKS.includes(tank.tank_id) ? '🏆' : ''
-                      }`,
-                  )
-                  .join('\n')
-          }\n\n**Legend**\n⭐ = Premium/Collector\n${
-            tier === 10 ? '🏆 = Comp Tank\n' : ''
-          }${TANK_TYPE_EMOJIS.heavyTank} = Heavy\n${
-            TANK_TYPE_EMOJIS.mediumTank
-          } = Medium\n${TANK_TYPE_EMOJIS.lightTank} = Light\n${
-            TANK_TYPE_EMOJIS['AT-SPG']
-          } = Tank Destroyer`,
-        ),
-      ],
-    });
+    console.time('ownedtanks');
+    const image = await render(
+      <Wrapper>
+        {/* TODO: integrate some of these into title bar */}
+        <TitleBar
+          name={accountInfo[id].nickname}
+          nameDiscriminator={`(Tier ${TIER_ROMAN_NUMERALS[tier]})`}
+          image={
+            clanData[id]?.clan
+              ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData[id]?.clan?.emblem_set_id}.png`
+              : undefined
+          }
+          description={`Owned tanks • ${new Date().toDateString()} • ${
+            BLITZ_SERVERS[server]
+          }`}
+        />
+
+        <Tanks.Root>
+          {tanks.map((tank) => (
+            <Tanks.Item
+              key={tank.tank_id}
+              name={tank.name}
+              type={tank.type}
+              icon={tank.images.normal}
+            />
+          ))}
+        </Tanks.Root>
+
+        <PoweredByWargaming />
+      </Wrapper>,
+    );
+
+    await interaction.editReply({ files: [image] });
+    console.timeEnd('ownedtanks');
   },
 
   autocomplete: usernameAutocomplete,

src/commands/stats.tsx

@@ -172,7 +172,6 @@ export default {
       files: [image],
       components: [actionRow],
     });
-
   },
 
   autocomplete: usernameAutocomplete,

src/components/PoweredByWargaming.tsx

@@ -0,0 +1,15 @@
+import { theme } from '../stitches.config.js';
+
+export default function PoweredByWargaming() {
+  return (
+    <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
+      <img
+        src="https://i.imgur.com/jADGWm0.png"
+        style={{ height: 16, width: 16 }}
+      />
+      <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
+        Powered by Wargaming
+      </span>
+    </div>
+  );
+}

src/components/Tanks/components/Item.tsx

@@ -0,0 +1,35 @@
+import { TANK_ICONS, TankType } from '../../../core/blitz/tankopedia.js';
+
+export interface ItemProps {
+  icon?: string;
+  type: TankType;
+  name: string;
+}
+
+export function Item({ icon, type, name }: ItemProps) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        minWidth: 128,
+        height: 128,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      }}
+    >
+      {icon && <img src={icon} style={{ flex: 1, objectFit: 'contain' }} />}
+
+      <div style={{ display: 'flex', margin: 'auto', gap: 4 }}>
+        <img src={TANK_ICONS[type]} style={{ width: 14, height: 14 }} />
+        <span
+          style={{ fontSize: 16, textAlign: 'center', whiteSpace: 'nowrap' }}
+        >
+          {name}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/Tanks/components/Root.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface RootProps {
+  children: ReactNode;
+}
+
+export function Root({ children }: RootProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Tanks/index.ts

@@ -0,0 +1,2 @@
+export * from './components/Item.js';
+export * from './components/Root.js';

src/core/blitz/tankopedia.ts

@@ -1,6 +1,8 @@
 import { StaticPool } from 'node-worker-threads-pool';
 import { WargamingResponse } from '../../types/wargamingResponse.js';
 
+export type TankType = 'AT-SPG' | 'lightTank' | 'mediumTank' | 'heavyTank';
+
 export interface TankopediaEntry {
   name: string;
   nation: string;
@@ -9,7 +11,7 @@ export interface TankopediaEntry {
   cost: { price_credit: number; price_gold: number };
   images: { preview: string; normal: string };
   tank_id: number;
-  type: string;
+  type: TankType;
   description: string;
 }
 
@@ -25,14 +27,24 @@ export const tankopedia = (
 ).data;
 console.log('Cached tankopedia');
 
-/**
- * @deprecated
- */
-export const TANK_TYPE_EMOJIS: Record<string, string> = {
-  'AT-SPG': '🔽',
-  heavyTank: '🇭',
-  mediumTank: '🇲',
-  lightTank: '🇱',
+export const TANK_ICONS: Record<TankType, string> = {
+  'AT-SPG': 'https://i.imgur.com/BIHSEH0.png',
+  lightTank: 'https://i.imgur.com/CSNha5V.png',
+  mediumTank: 'https://i.imgur.com/wvf3ltm.png',
+  heavyTank: 'https://i.imgur.com/ECeqlZa.png',
+};
+
+export const TIER_ROMAN_NUMERALS: Record<number, string> = {
+  1: 'I',
+  2: 'II',
+  3: 'III',
+  4: 'IV',
+  5: 'V',
+  6: 'VI',
+  7: 'VII',
+  8: 'VIII',
+  9: 'IX',
+  10: 'X',
 };
 
 export const TANK_IDS = Object.keys(tankopedia).map((id) => Number(id));