diff --git a/src/commands/breakdown.tsx b/src/commands/breakdown.tsx
index 477b158f4..ed024eef9 100644
--- a/src/commands/breakdown.tsx
+++ b/src/commands/breakdown.tsx
@@ -1,4 +1,5 @@
import { SlashCommandBuilder } from 'discord.js';
+import { chunk } from 'lodash';
import * as Breakdown from '../components/Breakdown';
import NoData, { NoDataType } from '../components/NoData';
import TitleBar from '../components/TitleBar';
@@ -35,6 +36,9 @@ import { StatFilters, filterStats } from '../core/statistics/filterStats';
import getWN8Percentile from '../core/statistics/getWN8Percentile';
import { CommandRegistryRaw } from '../events/interactionCreate';
+const ROWS_PER_PAGE = 8;
+const MAX_PAGES = 10;
+
async function render(
{ region, id }: ResolvedPlayer,
{ start, end, name }: ResolvedPeriod,
@@ -132,38 +136,80 @@ async function render(
0,
) / careerBattles;
- return (
-
-
+ const children: JSX.Element[] = [];
- {filteredOrder.length === 0 && (
-
- )}
- {filteredOrder.length > 0 && (
-
+ if (filteredOrder.length > 0) {
+ children.push(
+ ,
+ );
+
+ await Promise.all(
+ filteredOrder.map(async (id, index) => {
+ const tankopediaEntry = awaitedTankopedia[id];
+ const current = orderedCurrentStats[index];
+ const career = orderedCareerStats[index];
+ const currentWN8 = orderedCurrentWN8[index];
+ const careerWN8 = orderedCareerWN8[index];
+
+ children.push(
+ />,
+ );
+ }),
+ );
+ }
- {await Promise.all(
- filteredOrder.map(async (id, index) => {
- const tankopediaEntry = awaitedTankopedia[id];
- const current = orderedCurrentStats[index];
- const career = orderedCareerStats[index];
- const currentWN8 = orderedCurrentWN8[index];
- const careerWN8 = orderedCareerWN8[index];
-
- return (
-
- );
- }),
- )}
-
- )}
-
+ const pages = chunk(
+ children,
+ Math.max(Math.ceil(children.length / MAX_PAGES), ROWS_PER_PAGE),
);
+
+ if (filteredOrder.length > 0) {
+ return pages
+ .map((page, index) => (
+
+ {index === 0 && (
+
+ )}
+
+ {/* {filteredOrder.length === 0 && (
+
+ )} */}
+ {page}
+
+ ))
+ .reverse();
+ } else {
+ return [
+
+
+
+ {filteredOrder.length === 0 && (
+
+ )}
+ ,
+ ];
+ }
}
export const breakdownCommand = new Promise(
@@ -286,11 +319,11 @@ export const breakdownCommand = new Promise(
...filters,
});
- return Promise.all([
- render(player, period, filters),
+ return [
+ ...(await render(player, period, filters)),
buttonPrimary(path, 'Refresh'),
- getBlitzStarsLinkButton(player.region, player.id),
- ]);
+ await getBlitzStarsLinkButton(player.region, player.id),
+ ];
},
autocomplete: (interaction) => {