feat: updated /owned-tanks to new width

src/commands/ownedTanks.tsx

@@ -10,8 +10,10 @@ import getWargamingResponse from '../core/blitz/getWargamingResponse';
 import resolveTankName from '../core/blitz/resolveTankName';
 import {
   TIER_ROMAN_NUMERALS,
+  TankopediaEntry,
   Tier,
   tankopedia,
+  tankopediaInfo,
 } from '../core/blitz/tankopedia';
 import addUsernameChoices from '../core/discord/addUsernameChoices';
 import autocompleteUsername from '../core/discord/autocompleteUsername';
@@ -78,66 +80,96 @@ export const ownedTanksCommand: CommandRegistry = {
       `https://api.wotblitz.${server}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
     );
     const tankStats = await getTankStats(server, id);
-    const tanks = (
+    const filteredTanks = (
       await Promise.all(
         tankStats.map(async (tankData) => ({
-          ...(await tankopedia)[tankData.tank_id],
+          tankopedia: (await tankopedia)[tankData.tank_id]!,
           tank_id: tankData.tank_id,
         })),
       )
-    ).filter((tank) => tank?.tier === tier);
+    ).filter((tank) => tank.tankopedia?.tier === tier);
     const clanData = await getWargamingResponse<PlayerClanData>(
       `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
     );
-    const leftColumnSize = Math.ceil(tanks.length / 2);
+    const groupedTanks: Record<string, TankopediaEntry[]> = {};
-    const leftColumn = tanks.slice(0, leftColumnSize);
+    const nations: string[] = [];
-    const rightColumn = tanks.slice(leftColumnSize);
+
+    filteredTanks.forEach((tank) => {
+      if (groupedTanks[tank.tankopedia.nation] === undefined) {
+        groupedTanks[tank.tankopedia.nation] = [tank.tankopedia];
+        nations.push(tank.tankopedia.nation);
+      } else {
+        groupedTanks[tank.tankopedia.nation].push(tank.tankopedia);
+      }
+    });
+
+    nations.sort();
 
     return (
       <Wrapper>
         <TitleBar
           name={accountInfo[id].nickname}
-          nameDiscriminator={`(Tier ${TIER_ROMAN_NUMERALS[tier as Tier]})`}
+          nameDiscriminator={
+            clanData[id]?.clan ? `[${clanData[id]?.clan?.tag}]` : undefined
+          }
           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()}`}
+          description={`Tier ${
+            TIER_ROMAN_NUMERALS[tier as Tier]
+          } tanks • ${new Date().toDateString()}`}
         />
 
-        {tanks.length === 0 && <NoData type={NoDataType.TanksFound} />}
+        {filteredTanks.length === 0 && <NoData type={NoDataType.TanksFound} />}
 
-        {tanks.length > 0 && (
+        {filteredTanks.length > 0 &&
-          <Tanks.Root>
+          (await Promise.all(
-            <Tanks.Column>
+            nations.map(async (nation) => {
-              {await Promise.all(
+              const tanks = groupedTanks[nation];
-                leftColumn.map(async (tank) => (
+              const leftColumnSize = Math.ceil(tanks.length / 2);
-                  <Tanks.Item
+              const leftColumn = tanks.slice(0, leftColumnSize);
-                    key={tank.tank_id}
+              const rightColumn = tanks.slice(leftColumnSize);
-                    name={await resolveTankName(tank.tank_id)}
+
-                    tankType={tank.type}
+              return (
-                    image={tank.images?.normal}
+                <Tanks.Root>
-                    treeType={await getTreeType(tank.tank_id)}
+                  <Tanks.Title>
-                  />
+                    {(await tankopediaInfo).vehicle_nations[nation]}
-                )),
+                  </Tanks.Title>
-              )}
+
-            </Tanks.Column>
+                  <Tanks.Row>
-            <Tanks.Column>
+                    <Tanks.Column>
-              {await Promise.all(
+                      {await Promise.all(
-                rightColumn.map(async (tank) => (
+                        leftColumn.map(async (tank) => (
-                  <Tanks.Item
+                          <Tanks.Item
-                    key={tank.tank_id}
+                            key={tank.tank_id}
-                    name={await resolveTankName(tank.tank_id)}
+                            name={await resolveTankName(tank.tank_id)}
-                    tankType={tank.type}
+                            tankType={tank.type}
-                    image={tank.images?.normal}
+                            image={tank.images?.normal}
-                    treeType={await getTreeType(tank.tank_id)}
+                            treeType={await getTreeType(tank.tank_id)}
-                  />
+                          />
-                )),
+                        )),
-              )}
+                      )}
-            </Tanks.Column>
+                    </Tanks.Column>
-          </Tanks.Root>
+                    <Tanks.Column>
-        )}
+                      {await Promise.all(
+                        rightColumn.map(async (tank) => (
+                          <Tanks.Item
+                            key={tank.tank_id}
+                            name={await resolveTankName(tank.tank_id)}
+                            tankType={tank.type}
+                            image={tank.images?.normal}
+                            treeType={await getTreeType(tank.tank_id)}
+                          />
+                        )),
+                      )}
+                    </Tanks.Column>
+                  </Tanks.Row>
+                </Tanks.Root>
+              );
+            }),
+          ))}
 
         <PoweredBy type={PoweredByType.Wargaming} />
       </Wrapper>

src/components/Tanks/components/Root.tsx

@@ -9,7 +9,8 @@ export function Root({ children }: RootProps) {
     <div
       style={{
         display: 'flex',
-        gap: 8,
+        flexDirection: 'column',
+        gap: 16,
       }}
     >
       {children}

src/components/Tanks/components/Row.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+export interface RowProps {
+  children: ReactNode;
+}
+
+export function Row({ children }: RowProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        gap: 8,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/Tanks/components/Title.tsx

@@ -0,0 +1,19 @@
+import { theme } from '../../../stitches.config';
+
+export interface TitleProps {
+  children: string;
+}
+
+export function Title({ children }: TitleProps) {
+  return (
+    <span
+      style={{
+        fontWeight: 900,
+        color: theme.colors.textHighContrast,
+        fontSize: 24,
+      }}
+    >
+      {children}
+    </span>
+  );
+}

src/components/Tanks/index.ts

@@ -1,3 +1,5 @@
 export * from './components/Column';
 export * from './components/Item';
 export * from './components/Root';
+export * from './components/Row';
+export * from './components/Title';

tsconfig.json

@@ -11,5 +11,5 @@
     "resolveJsonModule": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/components/Tanks/components/Row.tsx"]
 }