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,