diff --git a/src/commands/ownedTanks.tsx b/src/commands/ownedTanks.tsx index 53869e605..341e40f65 100644 --- a/src/commands/ownedTanks.tsx +++ b/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( `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 leftColumn = tanks.slice(0, leftColumnSize); - const rightColumn = tanks.slice(leftColumnSize); + const groupedTanks: Record = {}; + const nations: string[] = []; + + 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 ( - {tanks.length === 0 && } + {filteredTanks.length === 0 && } - {tanks.length > 0 && ( - - - {await Promise.all( - leftColumn.map(async (tank) => ( - - )), - )} - - - {await Promise.all( - rightColumn.map(async (tank) => ( - - )), - )} - - - )} + {filteredTanks.length > 0 && + (await Promise.all( + nations.map(async (nation) => { + const tanks = groupedTanks[nation]; + const leftColumnSize = Math.ceil(tanks.length / 2); + const leftColumn = tanks.slice(0, leftColumnSize); + const rightColumn = tanks.slice(leftColumnSize); + + return ( + + + {(await tankopediaInfo).vehicle_nations[nation]} + + + + + {await Promise.all( + leftColumn.map(async (tank) => ( + + )), + )} + + + {await Promise.all( + rightColumn.map(async (tank) => ( + + )), + )} + + + + ); + }), + ))} diff --git a/src/components/Tanks/components/Root.tsx b/src/components/Tanks/components/Root.tsx index 9d47b099f..8b85ce492 100644 --- a/src/components/Tanks/components/Root.tsx +++ b/src/components/Tanks/components/Root.tsx @@ -9,7 +9,8 @@ export function Root({ children }: RootProps) {
{children} diff --git a/src/components/Tanks/components/Row.tsx b/src/components/Tanks/components/Row.tsx new file mode 100644 index 000000000..115cee4b1 --- /dev/null +++ b/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 ( +
+ {children} +
+ ); +} diff --git a/src/components/Tanks/components/Title.tsx b/src/components/Tanks/components/Title.tsx new file mode 100644 index 000000000..b7c649b4b --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/components/Tanks/index.ts b/src/components/Tanks/index.ts index 25362d8dd..7042919a3 100644 --- a/src/components/Tanks/index.ts +++ b/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'; diff --git a/tsconfig.json b/tsconfig.json index e6d1941ec..65c75994f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,5 +11,5 @@ "resolveJsonModule": true, "jsx": "react-jsx" }, - "include": ["src/**/*.ts"] + "include": ["src/**/*.ts", "src/components/Tanks/components/Row.tsx"] }