Merge pull request #10 from tresabhi/1.7.8

.github/workflows/host.yml

@@ -35,4 +35,4 @@ jobs:
           unzip dist.zip
 
       - name: Run index.cjs
-        run: NODE_ENV=production DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} WARGAMING_APPLICATION_ID=${{ secrets.WARGAMING_APPLICATION_ID }} node --enable-source-maps dist/index.cjs
+        run: NODE_ENV=production DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} WARGAMING_APPLICATION_ID=${{ secrets.WARGAMING_APPLICATION_ID }} node --enable-source-maps --trace-warnings index.cjs

.gitignore

@@ -6,4 +6,6 @@ package-lock.json
 /playwright/.cache/
 dist/
 yarn-error.log
-dist.zip
+dist.zip
+commands.txt
+/test.*

.vscode/settings.json

@@ -3,7 +3,9 @@
     "Abhi",
     "accountinfo",
     "bepaint",
+    "blitzstars",
     "cleandist",
+    "customperiod",
     "fuzzysort",
     "kranvagn",
     "outfile",

package.json

@@ -1,14 +1,15 @@
 {
   "name": "blitzkrieg",
-  "version": "1.7.4",
+  "version": "1.7.7",
   "description": "",
   "main": "src/index.ts",
   "type": "module",
   "scripts": {
-    "dev": "yarn build --dev && yarn start",
+    "dev": "yarn build:raw --dev && yarn start --dev",
     "start": "node --enable-source-maps --trace-warnings dist/index.cjs",
     "zip": "zip -r dist.zip dist",
-    "build": "node scripts/build",
+    "build:raw": "node scripts/build",
+    "build": "yarn lint && yarn build:raw",
     "lint": "tsc"
   },
   "license": "MIT",
@@ -19,7 +20,7 @@
     "discord.js": "^14.9.0",
     "escape-html": "^1.0.3",
     "fuzzysort": "^2.0.4",
-    "lodash.startcase": "^4.4.0",
+    "lodash": "^4.17.21",
     "markdown-escape": "^2.0.0",
     "react": "^18.2.0",
     "satori": "^0.9.1"
@@ -27,7 +28,7 @@
   "devDependencies": {
     "@total-typescript/ts-reset": "^0.4.2",
     "@types/escape-html": "^1.0.2",
-    "@types/lodash.startcase": "^4.4.7",
+    "@types/lodash": "^4.14.195",
     "@types/markdown-escape": "^1.1.0",
     "@types/node": "^20.2.1",
     "@types/react": "^18.2.7",

scripts/build.js

@@ -19,9 +19,11 @@ build({
     '.ttf': 'file',
   },
 
-  bundle: isProd,
-  sourcemap: isProd,
+  bundle: true,
+  sourcemap: true,
   minifyIdentifiers: false, // causes errors
   minifySyntax: isProd,
   minifyWhitespace: isProd,
+
+  logLevel: isProd ? 'info' : 'silent',
 });

src/commands/debug.ts

@@ -3,7 +3,6 @@ import packageJSON from '../../package.json' assert { type: 'json' };
 import { tankopedia } from '../core/blitz/tankopedia.js';
 import { tankAverages } from '../core/blitzstars/tankAverages.js';
 import cleanTable from '../core/interaction/cleanTable.js';
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import getClientId from '../core/process/getClientId.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
@@ -17,7 +16,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('debug'))
+    .setName('debug')
     .setDescription('Debug information about the bot'),
 
   execute(interaction) {

src/commands/eligible.ts

@@ -1,18 +1,17 @@
 import { SlashCommandBuilder } from 'discord.js';
-import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
 import getWN8 from '../core/blitz/getWN8.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import sumStats from '../core/blitz/sumStats.js';
 import { tankopedia } from '../core/blitz/tankopedia.js';
 import getPeriodNow from '../core/blitzstars/getPeriodNow.js';
-import getPeriodicStart from '../core/blitzstars/getPeriodStart.js';
+import getPeriodStart from '../core/blitzstars/getPeriodStart.js';
 import getTankStatsOverTime from '../core/blitzstars/getTankStatsOverTime.js';
 import { tankAverages } from '../core/blitzstars/tankAverages.js';
 import cleanTable, { TableInput } from '../core/interaction/cleanTable.js';
-import cmdName from '../core/interaction/cmdName.js';
 import negativeEmbed from '../core/interaction/negativeEmbed.js';
 import positiveEmbed from '../core/interaction/positiveEmbed.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
 import { AccountInfo } from '../types/accountInfo.js';
@@ -30,7 +29,7 @@ export default {
   inPublic: false,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('eligible'))
+    .setName('eligible')
     .setDescription('Checks eligibility for any Skilled clan')
     .addStringOption((option) =>
       option
@@ -49,7 +48,7 @@ export default {
 
   async execute(interaction) {
     const clan = interaction.options.getString('clan') as SkilledClan;
-    const { id, server } = await getBlitzAccount(interaction);
+    const { id, server } = await resolvePlayer(interaction);
     const accountInfo = await getWargamingResponse<AccountInfo>(
       `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
     );
@@ -60,10 +59,9 @@ export default {
 
     if (clan === 'SKLLD') {
       const tankStatsOverTime = await getTankStatsOverTime(
-        interaction,
         server,
         id,
-        getPeriodicStart('30'),
+        getPeriodStart('30'),
         getPeriodNow(),
       );
       const entries = Object.entries(tankStatsOverTime);
@@ -124,7 +122,10 @@ export default {
         ]);
       }
       if (WN8 < 2450) {
-        problems.push(['WN8', `${WN8.toFixed(0)} (${WN8 - 2450})`]);
+        problems.push([
+          'WN8',
+          `${WN8.toFixed(0)} (${(WN8 - 2450).toFixed(0)})`,
+        ]);
       }
       if (tier10Damage < 1250) {
         problems.push([

src/commands/evolution.tsx

@@ -0,0 +1,50 @@
+import { SlashCommandBuilder } from 'discord.js';
+import tanksAutocomplete from '../core/autocomplete/tanks.js';
+import usernameAutocomplete from '../core/autocomplete/username.js';
+import resolveTankId from '../core/blitz/resolveTankId.js';
+import addStatsSubCommandGroups from '../core/options/addStatsSubCommandGroups.js';
+import resolvePeriod from '../core/options/resolvePeriod.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
+import { CommandRegistry } from '../events/interactionCreate.js';
+import evolution from '../renderers/evolution.js';
+import { StatType } from '../renderers/stats.js';
+
+export default {
+  inProduction: true,
+  inDevelopment: false,
+  inPublic: true,
+
+  command: addStatsSubCommandGroups(
+    new SlashCommandBuilder()
+      .setName('evolution')
+      .setDescription('Evolution of statistics'),
+  ),
+
+  async execute(interaction) {
+    const commandGroup = interaction.options.getSubcommandGroup(
+      true,
+    ) as StatType;
+    const player = await resolvePlayer(interaction);
+    const period = resolvePeriod(interaction);
+    const tankIdRaw = interaction.options.getString('tank')!;
+    const tankId = commandGroup === 'tank' ? resolveTankId(tankIdRaw) : 0;
+
+    return await evolution(commandGroup, period, player, tankId);
+
+    // new ButtonBuilder()
+    //   .setStyle(ButtonStyle.Link)
+    //   .setLabel('View on BlitzStars')
+    //   .setURL(
+    //     commandGroup === 'tank'
+    //       ? `https://www.blitzstars.com/player/com/${
+    //           accountInfo[id].nickname
+    //         }/tank/${tankId!}`
+    //       : `https://www.blitzstars.com/player/com/${accountInfo[id].nickname}`,
+    //   );
+  },
+
+  autocomplete: (interaction) => {
+    usernameAutocomplete(interaction);
+    tanksAutocomplete(interaction);
+  },
+} satisfies CommandRegistry;

src/commands/help.ts

@@ -1,6 +1,5 @@
 import { SlashCommandBuilder } from 'discord.js';
 import discord from '../../discord.json' assert { type: 'json' };
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import {
   CommandRegistry,
@@ -15,7 +14,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('help'))
+    .setName('help')
     .setDescription('All the help you need about the bot'),
 
   execute(interaction) {

src/commands/inactive.tsx

@@ -8,7 +8,6 @@ import { BLITZ_SERVERS } from '../constants/servers.js';
 import clanAutocomplete from '../core/autocomplete/clan.js';
 import getBlitzClan from '../core/blitz/getBlitzClan.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import cmdName from '../core/interaction/cmdName.js';
 import addClanChoices from '../core/options/addClanChoices.js';
 import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
@@ -23,7 +22,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('inactive'))
+    .setName('inactive')
     .setDescription('Lists all inactive players')
     .addStringOption(addClanChoices)
     .addNumberOption((option) =>

src/commands/ownedtanks.tsx

@@ -6,12 +6,15 @@ 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 { TIER_ROMAN_NUMERALS, tankopedia } from '../core/blitz/tankopedia.js';
-import cmdName from '../core/interaction/cmdName.js';
+import {
+  TIER_ROMAN_NUMERALS,
+  Tier,
+  tankopedia,
+} from '../core/blitz/tankopedia.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
 import { AccountInfo } from '../types/accountInfo.js';
@@ -44,7 +47,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('ownedtanks'))
+    .setName('ownedtanks')
     .setDescription("Shows a player's owned tanks")
     .addStringOption((option) =>
       option
@@ -68,12 +71,12 @@ export default {
 
   async execute(interaction) {
     const tier = Number(interaction.options.getString('tier'));
-    const account = await getBlitzAccount(interaction);
+    const account = await resolvePlayer(interaction);
     const { id, server } = account;
     const accountInfo = await getWargamingResponse<AccountInfo>(
       `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
     );
-    const tankStats = await getTankStats(interaction, server, id);
+    const tankStats = await getTankStats(server, id);
     const tanks = tankStats
       .map((tankData) => tankopedia[tankData.tank_id])
       .filter((tank) => tank?.tier === tier);
@@ -86,7 +89,7 @@ export default {
         {/* TODO: integrate some of these into title bar */}
         <TitleBar
           name={accountInfo[id].nickname}
-          nameDiscriminator={`(Tier ${TIER_ROMAN_NUMERALS[tier]})`}
+          nameDiscriminator={`(Tier ${TIER_ROMAN_NUMERALS[tier as Tier]})`}
           image={
             clanData[id]?.clan
               ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData[id]?.clan?.emblem_set_id}.png`

src/commands/ping.ts

@@ -0,0 +1,33 @@
+import { SlashCommandBuilder } from 'discord.js';
+import { CommandRegistry } from '../events/interactionCreate.js';
+
+export default {
+  inProduction: true,
+  inDevelopment: false,
+  inPublic: true,
+  handlesInteraction: true,
+
+  command: new SlashCommandBuilder()
+    .setName('ping')
+    .setDescription('Check if the bot is alive')
+    .addSubcommand((option) =>
+      option.setName('blitzkrieg').setDescription('Ping Blitzkrieg'),
+    )
+    .addSubcommand((option) =>
+      option.setName('blitz').setDescription('Ping Blitz'),
+    ),
+
+  async execute(interaction) {
+    const subcommand = interaction.options.getSubcommand();
+    const executionStart = Date.now();
+
+    if (subcommand === 'blitzkrieg') {
+      await interaction.editReply('Pong 🏓');
+    } else {
+      await fetch('https://api.wotblitz.com/');
+    }
+
+    const executionTime = Date.now() - executionStart;
+    interaction.editReply(`Pong 🏓 - ${executionTime}ms`);
+  },
+} satisfies CommandRegistry;

src/commands/playerachievements.ts

@@ -1,13 +1,12 @@
 import { SlashCommandBuilder } from 'discord.js';
-import startCase from 'lodash.startcase';
+import { startCase } from 'lodash';
 import markdownEscape from 'markdown-escape';
 import usernameAutocomplete from '../core/autocomplete/username.js';
-import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import cleanTable, { TableInputEntry } from '../core/interaction/cleanTable.js';
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
 import { AccountAchievements } from '../types/accountAchievements.js';
@@ -21,7 +20,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('playerachievements'))
+    .setName('playerachievements')
     .setDescription("All the player's achievements")
     .addStringOption(addUsernameOption)
     .addStringOption((option) =>
@@ -36,7 +35,7 @@ export default {
 
   async execute(interaction) {
     const sortBy = (interaction.options.getString('sort') ?? 'name') as SortBy;
-    const account = await getBlitzAccount(interaction);
+    const account = await resolvePlayer(interaction);
     const { id, server } = account;
     const accounts = await getWargamingResponse<AccountInfo>(
       `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,

src/commands/playerinfo.ts

@@ -1,12 +1,11 @@
 import { SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import usernameAutocomplete from '../core/autocomplete/username.js';
-import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import cleanTable from '../core/interaction/cleanTable.js';
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
 import { AccountInfo } from '../types/accountInfo.js';
@@ -17,12 +16,12 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('playerinfo'))
+    .setName('playerinfo')
     .setDescription('Basic information about a player')
     .addStringOption(addUsernameOption),
 
   async execute(interaction) {
-    const account = await getBlitzAccount(interaction);
+    const account = await resolvePlayer(interaction);
     const { id, server } = account;
     const accounts = await getWargamingResponse<AccountInfo>(
       `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,

src/commands/searchclans.ts

@@ -2,7 +2,6 @@ import { SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import { BLITZ_SERVERS, BlitzServer } from '../constants/servers.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import addClanChoices from '../core/options/addClanChoices.js';
 import addServerChoices from '../core/options/addServerChoices.js';
@@ -16,7 +15,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('searchclans'))
+    .setName('searchclans')
     .setDescription('Search clans')
     .addStringOption(addServerChoices)
     .addStringOption((option) => addClanChoices(option).setAutocomplete(false))

src/commands/searchplayers.ts

@@ -3,7 +3,6 @@ import markdownEscape from 'markdown-escape';
 import { BLITZ_SERVERS, BlitzServer } from '../constants/servers.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import { usernamePattern } from '../core/blitz/listAccountsPanServer.js';
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import addServerChoices from '../core/options/addServerChoices.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
@@ -17,7 +16,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('searchplayers'))
+    .setName('searchplayers')
     .setDescription('Search players in a Blitz server')
     .addStringOption(addServerChoices)
     .addStringOption((option) =>

src/commands/searchtanks.ts

@@ -2,7 +2,6 @@ import { SlashCommandBuilder } from 'discord.js';
 import { go } from 'fuzzysort';
 import markdownEscape from 'markdown-escape';
 import { TANK_NAMES } from '../core/blitz/tankopedia.js';
-import cmdName from '../core/interaction/cmdName.js';
 import infoEmbed from '../core/interaction/infoEmbed.js';
 import addTankChoices from '../core/options/addTankChoices.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
@@ -13,7 +12,7 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('searchtanks'))
+    .setName('searchtanks')
     .setDescription('Search tanks')
     .addStringOption((option) => addTankChoices(option).setAutocomplete(false))
     .addIntegerOption((option) =>

src/commands/stats.tsx

@@ -1,165 +1,38 @@
 import { SlashCommandBuilder } from 'discord.js';
-import GenericAllStats from '../components/GenericAllStats.js';
-import NoData, { NoDataType } from '../components/NoData.js';
-import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
-import TitleBar from '../components/TitleBar.js';
-import Wrapper from '../components/Wrapper.js';
-import { BLITZ_SERVERS } from '../constants/servers.js';
+import tanksAutocomplete from '../core/autocomplete/tanks.js';
 import usernameAutocomplete from '../core/autocomplete/username.js';
-import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
-import getTankStats from '../core/blitz/getTankStats.js';
-import getWN8 from '../core/blitz/getWN8.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import sumStats from '../core/blitz/sumStats.js';
-import { tankopedia } from '../core/blitz/tankopedia.js';
-import getPeriodNow from '../core/blitzstars/getPeriodNow.js';
-import getPeriodicStart from '../core/blitzstars/getPeriodStart.js';
-import getTankStatsOverTime from '../core/blitzstars/getTankStatsOverTime.js';
-import { tankAverages } from '../core/blitzstars/tankAverages.js';
-import cmdName from '../core/interaction/cmdName.js';
-import fullBlitzStarsStats from '../core/interaction/fullBlitzStarsStats.js';
-import { supportBlitzStars } from '../core/interaction/supportBlitzStars.js';
-import addStatPeriodChoices, {
-  StatPeriod,
-  statPeriodNames,
-} from '../core/options/addStatPeriodChoices.js';
-import addUsernameOption from '../core/options/addUsernameOption.js';
-import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
+import resolveTankId from '../core/blitz/resolveTankId.js';
+import addStatsSubCommandGroups from '../core/options/addStatsSubCommandGroups.js';
+import resolvePeriod from '../core/options/resolvePeriod.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
-import {
-  AccountInfo,
-  AllStats,
-  SupplementaryStats,
-} from '../types/accountInfo.js';
-import { PlayerClanData } from '../types/playerClanData.js';
+import stats, { StatType } from '../renderers/stats.js';
 
 export default {
   inProduction: true,
   inDevelopment: false,
   inPublic: true,
 
-  command: new SlashCommandBuilder()
-    .setName(cmdName('stats'))
-    .setDescription("Gets the user's in-game statistics")
-    .addStringOption(addStatPeriodChoices)
-    .addStringOption(addUsernameOption),
+  command: addStatsSubCommandGroups(
+    new SlashCommandBuilder()
+      .setName('stats')
+      .setDescription('In-game statistics'),
+  ),
 
   async execute(interaction) {
-    const period = interaction.options.getString('period') as StatPeriod;
-    const { id, server } = await getBlitzAccount(interaction);
-    const accountInfo = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
-    );
-    const clanData = await getWargamingResponse<PlayerClanData>(
-      `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
-    );
-    const tankStats = await getTankStats(interaction, server, id);
-    let stats: AllStats;
-    let supplementaryStats: SupplementaryStats | undefined;
-    let hasWN8AccumulatedAtAll = false;
+    const commandGroup = interaction.options.getSubcommandGroup(
+      true,
+    ) as StatType;
+    const player = await resolvePlayer(interaction);
+    const period = resolvePeriod(interaction);
+    const tankIdRaw = interaction.options.getString('tank')!;
+    const tankId = commandGroup === 'tank' ? resolveTankId(tankIdRaw) : 0;
 
-    if (period === 'career') {
-      stats = accountInfo[id].statistics.all;
-      const totalBattles = tankStats.reduce(
-        (accumulator, { all }) => accumulator + all.battles,
-        0,
-      );
-
-      supplementaryStats = {
-        tier:
-          tankStats.reduce(
-            (accumulator, { tank_id, all }) =>
-              accumulator + tankopedia[tank_id].tier * all.battles,
-            0,
-          ) / totalBattles,
-        WN8:
-          tankStats.reduce((accumulator, { tank_id, all }) => {
-            if (tankAverages[tank_id]) {
-              const tankWN8 = getWN8(tankAverages[tank_id].all, all);
-
-              if (isNaN(tankWN8)) return accumulator;
-
-              hasWN8AccumulatedAtAll = true;
-
-              return accumulator + tankWN8 * all.battles;
-            } else return accumulator;
-          }, 0) / totalBattles,
-      };
-    } else {
-      const tankStatsOverTime = await getTankStatsOverTime(
-        interaction,
-        server,
-        id,
-        getPeriodicStart(period),
-        getPeriodNow(),
-      );
-      const entries = Object.entries(tankStatsOverTime);
-      const totalBattles = entries.reduce(
-        (accumulator, [, stats]) => accumulator + stats.battles,
-        0,
-      );
-
-      supplementaryStats = {
-        tier:
-          entries.reduce((accumulator, [tankIdString, stats]) => {
-            const tankId = parseInt(tankIdString);
-            const tankTier = tankopedia[tankId].tier;
-
-            return accumulator + tankTier * stats.battles;
-          }, 0) / totalBattles,
-        WN8:
-          entries.reduce((accumulator, [tankIdString, stats]) => {
-            const tankId = parseInt(tankIdString);
-
-            // edge case where new tanks don't have averages
-            if (tankAverages[tankId]) {
-              const tankWN8 = getWN8(tankAverages[tankId].all, stats);
-
-              if (isNaN(tankWN8)) return accumulator;
-
-              hasWN8AccumulatedAtAll = true;
-
-              return accumulator + tankWN8 * stats.battles;
-            } else return accumulator;
-          }, 0) / totalBattles,
-      };
-
-      stats = sumStats(entries.map(([, stats]) => stats));
-    }
-
-    if (!hasWN8AccumulatedAtAll) supplementaryStats.WN8 = undefined;
-
-    return [
-      <Wrapper>
-        <TitleBar
-          name={accountInfo[id].nickname}
-          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={`${
-            statPeriodNames[period]
-          } • ${new Date().toDateString()} • ${BLITZ_SERVERS[server]}`}
-        />
-
-        {stats.battles === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
-        {stats.battles > 0 && (
-          <GenericAllStats
-            stats={stats}
-            supplementaryStats={supplementaryStats}
-          />
-        )}
-
-        <PoweredByBlitzStars />
-      </Wrapper>,
-      fullBlitzStarsStats(server, accountInfo[id].nickname),
-      supportBlitzStars,
-    ];
+    return await stats(commandGroup, period, player, tankId);
   },
 
-  autocomplete: usernameAutocomplete,
+  autocomplete: (interaction) => {
+    usernameAutocomplete(interaction);
+    tanksAutocomplete(interaction);
+  },
 } satisfies CommandRegistry;

src/commands/tankstats.tsx

@@ -1,112 +0,0 @@
-import { SlashCommandBuilder } from 'discord.js';
-import GenericAllStats from '../components/GenericAllStats.js';
-import NoData, { NoDataType } from '../components/NoData.js';
-import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
-import TitleBar from '../components/TitleBar.js';
-import Wrapper from '../components/Wrapper.js';
-import { BLITZ_SERVERS } from '../constants/servers.js';
-import tanksAutocomplete from '../core/autocomplete/tanks.js';
-import usernameAutocomplete from '../core/autocomplete/username.js';
-import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
-import getTankStats from '../core/blitz/getTankStats.js';
-import getWN8 from '../core/blitz/getWN8.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import resolveTankId from '../core/blitz/resolveTankId.js';
-import resolveTankName from '../core/blitz/resolveTankName.js';
-import { tankopedia } from '../core/blitz/tankopedia.js';
-import getPeriodNow from '../core/blitzstars/getPeriodNow.js';
-import getPeriodicStart from '../core/blitzstars/getPeriodStart.js';
-import getTankStatsOverTime, {
-  emptyAllStats,
-} from '../core/blitzstars/getTankStatsOverTime.js';
-import { tankAverages } from '../core/blitzstars/tankAverages.js';
-import cmdName from '../core/interaction/cmdName.js';
-import fullBlitzStarsStats from '../core/interaction/fullBlitzStarsStats.js';
-import { supportBlitzStars } from '../core/interaction/supportBlitzStars.js';
-import addStatPeriodChoices, {
-  StatPeriod,
-  statPeriodNames,
-} from '../core/options/addStatPeriodChoices.js';
-import addTankChoices from '../core/options/addTankChoices.js';
-import addUsernameOption from '../core/options/addUsernameOption.js';
-import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
-import { CommandRegistry } from '../events/interactionCreate.js';
-import { AccountInfo, AllStats } from '../types/accountInfo.js';
-
-export default {
-  inProduction: true,
-  inDevelopment: false,
-  inPublic: true,
-
-  command: new SlashCommandBuilder()
-    .setName(cmdName('tankstats'))
-    .setDescription('Stats for a tank over a period')
-    .addStringOption(addTankChoices)
-    .addStringOption(addStatPeriodChoices)
-    .addStringOption(addUsernameOption),
-
-  async execute(interaction) {
-    const tank = await resolveTankId(
-      interaction,
-      interaction.options.getString('tank')!,
-    );
-    const period = interaction.options.getString('period') as StatPeriod;
-    const blitzAccount = await getBlitzAccount(interaction);
-    const { id, server } = blitzAccount;
-    const accountInfo = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
-    );
-    const tankStats = await getTankStats(interaction, server, id);
-    let stats: AllStats;
-    const tankId = Number(tank);
-
-    if (period === 'career') {
-      stats =
-        tankStats.find((stats) => stats.tank_id === tankId)?.all ??
-        emptyAllStats;
-    } else {
-      const tankStatsOverTime = await getTankStatsOverTime(
-        interaction,
-        server,
-        id,
-        getPeriodicStart(period),
-        getPeriodNow(),
-      );
-
-      stats = tankStatsOverTime[tankId] ?? emptyAllStats;
-    }
-
-    return [
-      <Wrapper>
-        <TitleBar
-          name={accountInfo[id].nickname}
-          nameDiscriminator={`(${resolveTankName(tankId)})`}
-          image={tankopedia[tankId].images.normal}
-          description={`${
-            statPeriodNames[period]
-          } • ${new Date().toDateString()} • ${BLITZ_SERVERS[server]}`}
-        />
-
-        {stats.battles === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
-        {stats.battles > 0 && (
-          <GenericAllStats
-            stats={stats}
-            supplementaryStats={{
-              tier: tankopedia[tankId].tier,
-              WN8: getWN8(tankAverages[tankId].all, stats),
-            }}
-          />
-        )}
-
-        <PoweredByBlitzStars />
-      </Wrapper>,
-      fullBlitzStarsStats(server, accountInfo[id].nickname),
-      supportBlitzStars,
-    ];
-  },
-
-  autocomplete: (interaction) => {
-    tanksAutocomplete(interaction);
-    usernameAutocomplete(interaction);
-  },
-} satisfies CommandRegistry;

src/commands/today.tsx

@@ -1,29 +1,9 @@
 import { SlashCommandBuilder } from 'discord.js';
-import * as Breakdown from '../components/Breakdown/index.js';
-import NoData, { NoDataType } from '../components/NoData.js';
-import PoweredByBlitzStars from '../components/PoweredByBlitzStars.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 getWN8 from '../core/blitz/getWN8.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import resolveTankName from '../core/blitz/resolveTankName.js';
-import sumStats from '../core/blitz/sumStats.js';
-import { tankopedia } from '../core/blitz/tankopedia.js';
-import getTankStatsOverTime from '../core/blitzstars/getTankStatsOverTime.js';
-import last5AM from '../core/blitzstars/last5AM.js';
-import { tankAverages } from '../core/blitzstars/tankAverages.js';
-import cmdName from '../core/interaction/cmdName.js';
-import fullBlitzStarsStats from '../core/interaction/fullBlitzStarsStats.js';
-import { supportBlitzStars } from '../core/interaction/supportBlitzStars.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
-import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
-import { AccountInfo, AllStats } from '../types/accountInfo.js';
-import { PlayerClanData } from '../types/playerClanData.js';
+import today from '../renderers/today.js';
 
 export default {
   inProduction: true,
@@ -31,154 +11,14 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('today'))
+    .setName('today')
     .setDescription('A general daily breakdown of your performance')
     .addStringOption(addUsernameOption),
 
   async execute(interaction) {
-    const { id, server } = await getBlitzAccount(interaction);
-    const tankStatsOverTime = await getTankStatsOverTime(
-      interaction,
-      server,
-      id,
-      last5AM().getTime() / 1000,
-      new Date().getTime() / 1000,
-    );
-    const accountInfo = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
-    );
-    const clanData = await getWargamingResponse<PlayerClanData>(
-      `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
-    );
-    const careerTankStatsRaw = await getTankStats(interaction, server, id);
-    const careerStats: Record<number, AllStats> = {
-      0: accountInfo[id].statistics.all,
-    };
-    const allStatsToAccumulate: AllStats[] = [];
+    const player = await resolvePlayer(interaction);
 
-    Object.entries(tankStatsOverTime).forEach(([, tankStats]) => {
-      allStatsToAccumulate.push(tankStats);
-    });
-    Object.entries(careerTankStatsRaw).forEach(([, tankStats]) => {
-      careerStats[tankStats.tank_id] = tankStats.all;
-    });
-
-    const accumulatedStats = sumStats(allStatsToAccumulate);
-
-    if (Object.keys(tankStatsOverTime).length > 0) {
-      tankStatsOverTime[0] = accumulatedStats;
-    }
-
-    const tankStatsOverTimeEntries = Object.entries(tankStatsOverTime);
-    const todayWN8s = tankStatsOverTimeEntries.reduce<Record<number, number>>(
-      (accumulator, [tankIdString, tankStats]) => {
-        const tankId = Number(tankIdString);
-
-        return tankId === 0 || tankAverages[tankId] === undefined
-          ? accumulator
-          : {
-              ...accumulator,
-              [tankId]: getWN8(tankAverages[tankId].all, tankStats),
-            };
-      },
-      {},
-    );
-    const careerWN8s = careerTankStatsRaw.reduce<Record<number, number>>(
-      (accumulator, { tank_id }) => {
-        return tank_id === 0 || tankAverages[tank_id] === undefined
-          ? accumulator
-          : {
-              ...accumulator,
-              [tank_id]: getWN8(
-                tankAverages[tank_id].all,
-                careerStats[tank_id],
-              ),
-            };
-      },
-      {},
-    );
-    const todayWN8sEntries = Object.entries(todayWN8s);
-    const careerWN8sEntries = Object.entries(careerWN8s);
-
-    todayWN8s[0] =
-      todayWN8sEntries.reduce(
-        (accumulator, [tankIdString, wn8]) =>
-          accumulator + wn8 * tankStatsOverTime[Number(tankIdString)].battles,
-        0,
-      ) /
-      todayWN8sEntries.reduce(
-        (accumulator, [tankIdString]) =>
-          accumulator + tankStatsOverTime[Number(tankIdString)].battles,
-        0,
-      );
-    careerWN8s[0] =
-      careerWN8sEntries.reduce(
-        (accumulator, [tankIdString, WN8]) =>
-          isNaN(WN8)
-            ? accumulator
-            : accumulator + WN8 * careerStats[Number(tankIdString)].battles,
-        0,
-      ) /
-      careerWN8sEntries.reduce(
-        (accumulator, [tankIdString, WN8]) =>
-          isNaN(WN8)
-            ? accumulator
-            : accumulator + careerStats[Number(tankIdString)].battles,
-        0,
-      );
-
-    const rows = tankStatsOverTimeEntries.map(([tankIdString, tankStats]) => {
-      const tankId = Number(tankIdString);
-      const career = careerStats[tankId];
-
-      return (
-        <Breakdown.Row
-          key={tankId}
-          name={tankId === 0 ? 'Total' : resolveTankName(Number(tankIdString))}
-          winrate={tankStats.wins / tankStats.battles}
-          careerWinrate={career.wins / career.battles}
-          WN8={isNaN(todayWN8s[tankId]) ? undefined : todayWN8s[tankId]}
-          careerWN8={isNaN(careerWN8s[tankId]) ? undefined : careerWN8s[tankId]}
-          damage={tankStats.damage_dealt / tankStats.battles}
-          careerDamage={career.damage_dealt / career.battles}
-          survival={tankStats.survived_battles / tankStats.battles}
-          careerSurvival={career.survived_battles / career.battles}
-          battles={tankStats.battles}
-          careerBattles={career.battles}
-          icon={
-            tankId === 0
-              ? undefined
-              : tankopedia[tankIdString as unknown as number].images.normal
-          }
-        />
-      );
-    });
-
-    return [
-      <Wrapper>
-        <TitleBar
-          name={accountInfo[id].nickname}
-          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={`Today's breakdown • ${new Date().toDateString()} • ${
-            BLITZ_SERVERS[server]
-          }`}
-        />
-
-        {rows.length === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
-        {rows.length > 0 && <Breakdown.Root>{rows}</Breakdown.Root>}
-
-        <PoweredByBlitzStars />
-      </Wrapper>,
-      fullBlitzStarsStats(server, accountInfo[id].nickname),
-      supportBlitzStars,
-    ];
+    return await today(player);
   },
 
   autocomplete: usernameAutocomplete,

src/commands/verify.ts

@@ -2,12 +2,11 @@ import { SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import discord from '../../discord.json' assert { type: 'json' };
 import usernameAutocomplete from '../core/autocomplete/username.js';
-import getBlitzAccount from '../core/blitz/getBlitzAccount.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import cmdName from '../core/interaction/cmdName.js';
 import negativeEmbed from '../core/interaction/negativeEmbed.js';
 import positiveEmbed from '../core/interaction/positiveEmbed.js';
 import addUsernameOption from '../core/options/addUsernameOption.js';
+import resolvePlayer from '../core/options/resolvePlayer.js';
 import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
 import { CommandRegistry } from '../events/interactionCreate.js';
 import { AccountInfo } from '../types/accountInfo.js';
@@ -19,12 +18,12 @@ export default {
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName(cmdName('verify'))
+    .setName('verify')
     .setDescription("Set's the user's username to their in-game name")
     .addStringOption((option) => addUsernameOption(option).setRequired(true)),
 
   async execute(interaction) {
-    const blitzAccount = await getBlitzAccount(interaction);
+    const blitzAccount = await resolvePlayer(interaction);
     const { id, server } = blitzAccount;
     const accountInfo = await getWargamingResponse<AccountInfo>(
       `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,

src/components/GenericAllStats.tsx

@@ -1,4 +1,5 @@
 import getWN8Percentile from '../core/blitz/getWN8Percentile.js';
+import isNumber from '../core/process/isNumber.js';
 import { AllStats, SupplementaryStats } from '../types/accountInfo.js';
 import GenericStats from './GenericStats/index.js';
 
@@ -11,6 +12,10 @@ export default function GenericAllStats({
   stats,
   supplementaryStats,
 }: GenericAllStatsProps) {
+  const damageRatio = stats.damage_dealt / stats.damage_received;
+  const killsToDeathRatio =
+    stats.frags / (stats.battles - stats.survived_battles);
+
   return (
     <GenericStats
       stats={[
@@ -18,13 +23,13 @@ export default function GenericAllStats({
         [
           'WN8',
           supplementaryStats
-            ? supplementaryStats.WN8 === undefined
-              ? '--'
-              : supplementaryStats.WN8.toFixed(0)
+            ? isNumber(supplementaryStats.WN8)
+              ? supplementaryStats.WN8!.toFixed(0)
+              : '--'
+            : undefined,
+          isNumber(supplementaryStats?.WN8)
+            ? getWN8Percentile(supplementaryStats!.WN8!)
             : undefined,
-          supplementaryStats?.WN8 === undefined
-            ? undefined
-            : getWN8Percentile(supplementaryStats.WN8),
         ],
         [
           'Survival',
@@ -41,13 +46,10 @@ export default function GenericAllStats({
         ['Average hits', (stats.hits / stats.battles).toFixed(2)],
         ['Average kills', (stats.frags / stats.battles).toFixed(2)],
         ['Average spots', (stats.spotted / stats.battles).toFixed(2)],
-        [
-          'Damage ratio',
-          (stats.damage_dealt / stats.damage_received).toFixed(2),
-        ],
+        ['Damage ratio', isFinite(damageRatio) ? damageRatio.toFixed(2) : '--'],
         [
           'Kills to death ratio',
-          (stats.frags / (stats.battles - stats.survived_battles)).toFixed(2),
+          isFinite(killsToDeathRatio) ? killsToDeathRatio.toFixed(2) : '--',
         ],
       ]}
     />

src/components/GenericStats/components/GenericStatsRow.tsx

@@ -1,8 +1,6 @@
 import { theme } from '../../../stitches.config.js';
-import { Stat } from '../index.js';
-
-import '../../../core/blitz/getWN8Percentile.js';
 import PercentileIndicator from '../../PercentileIndicator.js';
+import { Stat } from '../index.js';
 
 export interface GenericStatsRowProps {
   stat: Stat;

src/components/Graph/components/Line.tsx

@@ -0,0 +1,75 @@
+import { blue, green, red } from '@radix-ui/colors';
+import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root.js';
+
+export enum LineColor {
+  Red,
+  Green,
+  Blue,
+}
+
+const LINE_COLORS = {
+  [LineColor.Red]: red.red9,
+  [LineColor.Green]: green.green9,
+  [LineColor.Blue]: blue.blue9,
+};
+
+export enum LineStyle {
+  Solid,
+  Dashes,
+  DashesAndDots,
+}
+
+const LINE_STYLES = {
+  [LineStyle.Solid]: undefined,
+  [LineStyle.Dashes]: '8, 8',
+  [LineStyle.DashesAndDots]: '1, 4, 8, 4',
+};
+
+export type PlotItem = [number, number];
+export type Plot = PlotItem[];
+
+export interface LineProps {
+  plot: Plot;
+  minY?: number;
+  maxY?: number;
+  color?: LineColor;
+  style?: LineStyle;
+  lineWidth?: number;
+}
+
+export function Line({
+  plot,
+  minY: providedMinY,
+  maxY: providedMaxY,
+  color = LineColor.Red,
+  style = LineStyle.Solid,
+  lineWidth = 2,
+}: LineProps) {
+  const xs = plot.map(([x]) => x);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const ys = plot.map(([, y]) => y);
+  const minY = providedMinY ?? Math.min(...ys);
+  const maxY = providedMaxY ?? Math.max(...ys);
+  const rangeX = maxX - minX;
+  const rangeY = maxY - minY;
+  const points = plot
+    .map(
+      ([x, y]) =>
+        `${(x - minX) * (GRAPH_WIDTH / rangeX)},${
+          GRAPH_HEIGHT - (y - minY) * (GRAPH_HEIGHT / rangeY)
+        }`,
+    )
+    .join(' ');
+
+  return (
+    <polyline
+      vector-effect="non-scaling-stroke"
+      fill="none"
+      stroke={LINE_COLORS[color]}
+      stroke-width={lineWidth}
+      stroke-dasharray={LINE_STYLES[style]}
+      points={points}
+    />
+  );
+}

src/components/Graph/components/Root.tsx

@@ -0,0 +1,96 @@
+import { times } from 'lodash';
+import { ReactNode } from 'react';
+import { theme } from '../../../stitches.config.js';
+import { VerticalMargin, VerticalMarginAlign } from './VerticalMargin.js';
+
+export const GRAPH_WIDTH = 512;
+export const GRAPH_HEIGHT = 320;
+
+export interface MarginProps {
+  min: number;
+  max: number;
+  suffix?: string;
+}
+
+export interface RootProps {
+  children: ReactNode;
+  leftVerticalMargin?: MarginProps;
+  rightVerticalMargin?: MarginProps;
+  verticalSeparations?: number;
+  xMinLabel: string;
+  xMaxLabel: string;
+}
+
+export function Root({
+  children,
+  leftVerticalMargin,
+  rightVerticalMargin,
+  verticalSeparations = 5,
+  xMinLabel,
+  xMaxLabel,
+}: RootProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ display: 'flex', gap: 16 }}>
+        {leftVerticalMargin && (
+          <VerticalMargin
+            {...leftVerticalMargin}
+            verticalSeparations={verticalSeparations}
+          />
+        )}
+
+        <svg
+          viewBox={`0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`}
+          preserveAspectRatio="none"
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors.appBackground2,
+            borderRadius: 4,
+            border: theme.borderStyles.nonInteractive,
+          }}
+        >
+          {times(verticalSeparations - 2, (index) => {
+            const y = GRAPH_HEIGHT * ((index + 1) / (verticalSeparations - 1));
+
+            return (
+              <polyline
+                key={index}
+                vector-effect="non-scaling-stroke"
+                fill="none"
+                stroke={theme.colors.borderNonInteractive}
+                stroke-width="2"
+                points={`0,${y}, ${GRAPH_WIDTH},${y}`}
+              />
+            );
+          })}
+
+          {children}
+        </svg>
+
+        {rightVerticalMargin && (
+          <VerticalMargin
+            {...rightVerticalMargin}
+            verticalSeparations={verticalSeparations}
+            align={VerticalMarginAlign.Right}
+          />
+        )}
+      </div>
+
+      <div
+        style={{
+          paddingLeft: 48,
+          paddingRight: 48,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xMinLabel}
+        </span>
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xMaxLabel}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/Graph/components/VerticalMargin.tsx

@@ -0,0 +1,51 @@
+import { times } from 'lodash';
+import { theme } from '../../../stitches.config.js';
+import { MarginProps } from './Root.js';
+
+export enum VerticalMarginAlign {
+  Left,
+  Right,
+}
+
+export interface VerticalMarginProps extends MarginProps {
+  verticalSeparations: number;
+  align?: VerticalMarginAlign;
+}
+
+export function VerticalMargin({
+  verticalSeparations,
+  max,
+  min,
+  suffix,
+  align = VerticalMarginAlign.Left,
+}: VerticalMarginProps) {
+  return (
+    <div
+      style={{
+        width: 32,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems:
+          align === VerticalMarginAlign.Right ? 'flex-end' : 'flex-start',
+        justifyContent: 'space-between',
+      }}
+    >
+      {times(verticalSeparations, (index) => (
+        <span
+          key={index}
+          style={{
+            fontSize: 16,
+            color: theme.colors.textLowContrast,
+          }}
+        >
+          {`${(
+            (max - min) *
+              ((verticalSeparations - (index + 1)) /
+                (verticalSeparations - 1)) +
+            min
+          ).toFixed(0)}${suffix ?? ''}`}
+        </span>
+      ))}
+    </div>
+  );
+}

src/components/Graph/index.ts

@@ -0,0 +1,3 @@
+export * from './components/Line.js';
+export * from './components/Root.js';
+export * from './components/VerticalMargin.js';

src/components/TierWeights.tsx

@@ -0,0 +1,34 @@
+import { TIER_ROMAN_NUMERALS, Tier } from '../core/blitz/tankopedia.js';
+import { themeLight } from '../stitches.config.js';
+
+export type TierWeightsRecord = Partial<Record<Tier, number>>;
+
+export interface TierWeightsProps {
+  weights: TierWeightsRecord;
+}
+
+export default function TierWeights({ weights }: TierWeightsProps) {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      {Object.entries(weights).map(([tier, weight]) => (
+        <div
+          key={tier}
+          style={{
+            backgroundColor: themeLight.colors.appBackground1,
+            flex: weight,
+            color: themeLight.colors.textHighContrast,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 16,
+            overflow: 'hidden',
+            borderRadius: 8,
+            minWidth: 16,
+          }}
+        >
+          {TIER_ROMAN_NUMERALS[parseInt(tier) as Tier]}
+        </div>
+      ))}
+    </div>
+  );
+}

src/core/blitz/getBlitzClan.ts

@@ -1,7 +1,7 @@
 import { CacheType, ChatInputCommandInteraction } from 'discord.js';
 import { BlitzServer } from '../../constants/servers.js';
+import { serverAndIdPattern } from '../options/resolvePlayer.js';
 import errorWithCause from '../process/errorWithCause.js';
-import { serverAndIdPattern } from './getBlitzAccount.js';
 import listClansPanServer from './listClansPanServer.js';
 
 export default async function getBlitzClan(

src/core/blitz/getTankStats.ts

@@ -1,15 +1,10 @@
-import { CacheType, ChatInputCommandInteraction } from 'discord.js';
 import { BLITZ_SERVERS, BlitzServer } from '../../constants/servers.js';
 import { TanksStats } from '../../types/tanksStats.js';
 import { WARGAMING_APPLICATION_ID } from '../process/args.js';
 import errorWithCause from '../process/errorWithCause.js';
 import getWargamingResponse from './getWargamingResponse.js';
 
-export default async function getTankStats(
-  interaction: ChatInputCommandInteraction<CacheType>,
-  server: BlitzServer,
-  id: number,
-) {
+export default async function getTankStats(server: BlitzServer, id: number) {
   const tankStats = await getWargamingResponse<TanksStats>(
     `https://api.wotblitz.${server}/wotb/tanks/stats/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
   );

src/core/blitz/resolveTankId.ts

@@ -1,12 +1,8 @@
-import { CacheType, ChatInputCommandInteraction } from 'discord.js';
 import { go } from 'fuzzysort';
 import errorWithCause from '../process/errorWithCause.js';
 import { TANKS, tankopedia } from './tankopedia.js';
 
-export default async function resolveTankId(
-  interaction: ChatInputCommandInteraction<CacheType>,
-  tank: string,
-) {
+export default function resolveTankId(tank: string) {
   const number = Number(tank);
 
   if (Number.isNaN(number)) {

src/core/blitz/tankopedia.ts

@@ -50,7 +50,9 @@ export const TANK_ICONS: Record<TankType, string> = {
   heavyTank: 'https://i.imgur.com/ECeqlZa.png',
 };
 
-export const TIER_ROMAN_NUMERALS: Record<number, string> = {
+export type Tier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+export const TIER_ROMAN_NUMERALS: Record<Tier, string> = {
   1: 'I',
   2: 'II',
   3: 'III',

src/core/blitzstars/getPeriodNow.ts

@@ -1,3 +1,3 @@
 export default function getPeriodNow() {
-  return new Date().getTime() / 1000;
+  return Date.now() / 1000;
 }

src/core/blitzstars/getPeriodStart.ts

@@ -1,23 +1,12 @@
-import { StatPeriod } from '../options/addStatPeriodChoices.js';
+import { Period } from '../options/addPeriodSubCommands.js';
+import getTimeDaysAgo from './getTimeDaysAgo.js';
 
-export default function getPeriodicStart(period: StatPeriod) {
+export default function getPeriodStart(period: Exclude<Period, 'custom'>) {
   if (period === 'career') {
     return -Infinity;
   } else if (period === 'today') {
-    const now = new Date();
-    now.setHours(5, 0, 0, 0);
-
-    // If it's after 5:00 AM today, subtract one day
-    if (now.getTime() > Date.now()) now.setDate(now.getDate() - 1);
-
-    return now.getTime() / 1000;
+    return getTimeDaysAgo(0);
   } else {
-    const daysAgo = Number(period) - 1;
-    const periodStart = new Date();
-
-    periodStart.setDate(periodStart.getDate() - daysAgo);
-    periodStart.setHours(5, 0, 0, 0);
-
-    return periodStart.getTime() / 1000;
+    return getTimeDaysAgo(parseInt(period));
   }
 }

src/core/blitzstars/getPlayerHistories.ts

@@ -0,0 +1,92 @@
+import { BlitzServer } from '../../constants/servers.js';
+import { AccountInfo, AllStats } from '../../types/accountInfo.js';
+import {
+  GetHistoriesOptions,
+  Histories,
+  History,
+  getHistoriesDefaultOptions,
+} from '../../types/histories.js';
+import getWargamingResponse from '../blitz/getWargamingResponse.js';
+import { WARGAMING_APPLICATION_ID } from '../process/args.js';
+import { emptyAllStats } from './getTankStatsOverTime.js';
+
+export interface PlayerHistoryRaw {
+  clan: { clan_id: number; name: string; tag: string };
+  statistics: {
+    all: AllStats;
+    wn8: number;
+    wn7: number;
+    average_tier: number;
+  };
+  last_battle_time: number;
+  nickname: string;
+  account_id: number;
+  achievements: {
+    account_id: number;
+    [key: string]: number;
+  };
+  region: BlitzServer;
+}
+
+export type PlayerHistoriesRaw = PlayerHistoryRaw[];
+
+export default async function getPlayerHistories(
+  server: BlitzServer,
+  id: number,
+  options?: Partial<GetHistoriesOptions>,
+) {
+  const mergedOptions = { ...getHistoriesDefaultOptions, ...options };
+  const response = await fetch(
+    `https://www.blitzstars.com/api/playerstats/${id}`,
+  );
+  const playerHistories = ((await response.json()) as PlayerHistoriesRaw).map(
+    (history) =>
+      ({
+        all: history.statistics.all,
+        last_battle_time: history.last_battle_time,
+      } satisfies History),
+  );
+  let lastNonCompliantIndex = -1;
+  let hasCompliedOnce = false;
+  const filtered = playerHistories.filter(({ last_battle_time }, index) => {
+    const complies =
+      last_battle_time >= mergedOptions.start &&
+      last_battle_time <= mergedOptions.end;
+
+    if (complies && !hasCompliedOnce) hasCompliedOnce = true;
+    if (!hasCompliedOnce) lastNonCompliantIndex = index;
+
+    return complies;
+  });
+
+  const latestNodes: Histories = [];
+
+  if (mergedOptions.includeLatestHistories) {
+    const {
+      last_battle_time,
+      statistics: { all },
+    } = (
+      await getWargamingResponse<AccountInfo>(
+        `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+      )
+    )[id];
+
+    latestNodes.push({ all, last_battle_time });
+  }
+
+  const previousNodes: Histories = [];
+
+  if (mergedOptions.includePreviousHistories) {
+    if (lastNonCompliantIndex !== -1) {
+      previousNodes.push(
+        playerHistories[lastNonCompliantIndex] ??
+          ({
+            all: emptyAllStats,
+            last_battle_time: -Infinity,
+          } satisfies History),
+      );
+    }
+  }
+
+  return [...latestNodes, ...filtered, ...previousNodes] satisfies Histories;
+}

src/core/blitzstars/getTankHistories.ts

@@ -0,0 +1,113 @@
+import { BlitzServer } from '../../constants/servers.js';
+import {
+  GetHistoriesOptions,
+  Histories,
+  History,
+  getHistoriesDefaultOptions,
+} from '../../types/histories.js';
+import getTankStats from '../blitz/getTankStats.js';
+import { emptyAllStats } from './getTankStatsOverTime.js';
+
+export interface TankHistory extends History {
+  tank_id: number;
+}
+
+export type TankHistories = TankHistory[];
+
+export interface TankHistoryRaw extends TankHistory {
+  mark_of_mastery: number;
+  battle_life_time: number;
+  account_id: number;
+}
+
+export type TankHistoriesRaw = TankHistoryRaw[];
+
+export interface GetTankHistoriesOptions extends GetHistoriesOptions {
+  tankId?: number;
+}
+
+export const getTankHistoriesDefaultOptions: GetTankHistoriesOptions = {
+  ...getHistoriesDefaultOptions,
+  tankId: undefined,
+};
+
+export default async function getTankHistories(
+  server: BlitzServer,
+  id: number,
+  options?: Partial<GetTankHistoriesOptions>,
+) {
+  const mergedOptions = { ...getTankHistoriesDefaultOptions, ...options };
+  const tankHistoriesResponse = await fetch(
+    `https://www.blitzstars.com/api/tankhistories/for/${id}/`,
+  );
+  const tankHistories = (
+    (await tankHistoriesResponse.json()) as TankHistoriesRaw
+  ).map(
+    (history) =>
+      ({
+        all: history.all,
+        last_battle_time: history.last_battle_time,
+        tank_id: history.tank_id,
+      } satisfies TankHistory),
+  );
+  const compliantTanks: number[] = [];
+  const lastBattles: Record<number, number> = {};
+  const lastNonCompliantIndex: Record<number, number> = {};
+  const hasCompliedOnce: Record<number, boolean> = {};
+  const filtered = tankHistories.filter(
+    ({ last_battle_time, tank_id, all: { battles } }, index) => {
+      const complies =
+        last_battle_time >= mergedOptions.start &&
+        last_battle_time <= mergedOptions.end &&
+        (mergedOptions.tankId === undefined ||
+          tank_id === mergedOptions.tankId);
+
+      if (complies && !hasCompliedOnce[tank_id]) {
+        hasCompliedOnce[tank_id] = true;
+        compliantTanks.push(tank_id);
+      }
+      if (!hasCompliedOnce[tank_id]) lastNonCompliantIndex[tank_id] = index;
+      lastBattles[tank_id] = battles;
+
+      return complies;
+    },
+  );
+
+  const latestNodes: TankHistories = [];
+
+  if (mergedOptions.includeLatestHistories) {
+    (await getTankStats(server, id)).forEach((tankHistory) => {
+      if (
+        tankHistory.all.battles > (lastBattles[tankHistory.tank_id] ?? 0) &&
+        (mergedOptions.tankId === undefined ||
+          tankHistory.tank_id === mergedOptions.tankId)
+      ) {
+        if (!hasCompliedOnce[tankHistory.tank_id]) {
+          // was played today for the first time... I think???
+          hasCompliedOnce[tankHistory.tank_id] = true;
+          compliantTanks.push(tankHistory.tank_id);
+        }
+        latestNodes.push(tankHistory);
+      }
+    });
+  }
+
+  const previousNodes: TankHistories = [];
+
+  if (mergedOptions.includePreviousHistories) {
+    compliantTanks.forEach((tankId) => {
+      if (tankId in lastNonCompliantIndex) {
+        previousNodes.push(
+          tankHistories[lastNonCompliantIndex[tankId]] ??
+            ({
+              all: emptyAllStats,
+              last_battle_time: -Infinity,
+              tank_id: tankId,
+            } satisfies TankHistory),
+        );
+      }
+    });
+  }
+
+  return [...previousNodes, ...filtered, ...latestNodes] satisfies Histories;
+}

src/core/blitzstars/getTankStatsOverTime.ts

@@ -1,16 +1,9 @@
-import { CacheType, ChatInputCommandInteraction } from 'discord.js';
 import { BlitzServer } from '../../constants/servers.js';
 import { AllStats } from '../../types/accountInfo.js';
-import getTankStats from '../blitz/getTankStats.js';
-
-export interface TankHistoryNode {
-  all: AllStats;
-  last_battle_time: number;
-  mark_of_mastery: number;
-  battle_life_time: number;
-  account_id: number;
-  tank_id: number;
-}
+import getTankHistories, {
+  TankHistories,
+  TankHistoryRaw,
+} from './getTankHistories.js';
 
 export const emptyAllStats: AllStats = {
   battles: 0,
@@ -32,7 +25,7 @@ export const emptyAllStats: AllStats = {
   wins: 0,
 };
 
-export const emptyTankHistoryNode: TankHistoryNode = {
+export const emptyTankHistoryNode: TankHistoryRaw = {
   account_id: 0,
   battle_life_time: 0,
   last_battle_time: 0,
@@ -41,24 +34,18 @@ export const emptyTankHistoryNode: TankHistoryNode = {
   all: emptyAllStats,
 };
 
-export type TankHistory = TankHistoryNode[];
-
 export default async function getTankStatsOverTime(
-  interaction: ChatInputCommandInteraction<CacheType>,
   server: BlitzServer,
   id: number,
   start: number,
   end: number,
 ) {
-  const latestTankStatsRaw = await getTankStats(interaction, server, id);
-  const tankHistoriesResponse = await fetch(
-    `https://www.blitzstars.com/api/tankhistories/for/${id}/`,
-  );
-  const tankHistories = (await tankHistoriesResponse.json()) as TankHistory;
-  const history = [...tankHistories, ...latestTankStatsRaw];
+  const history = await getTankHistories(server, id, {
+    includeLatestHistories: true,
+  });
 
   // sort them even though most won't be used
-  const tankSortedHistory: Record<number, TankHistory> = {};
+  const tankSortedHistory: Record<number, TankHistories> = {};
   const tankIds: number[] = [];
   history.forEach((node) => {
     if (!tankSortedHistory[node.tank_id]) {

src/core/blitzstars/getTimeDaysAgo.ts

@@ -0,0 +1,12 @@
+export default function getTimeDaysAgo(period: number) {
+  const now = new Date();
+  now.setHours(5, 0, 0, 0);
+
+  // if it's after 5:00 AM today, subtract one day
+  if (now.getTime() > Date.now()) now.setDate(now.getDate() - 1);
+
+  // subtract the period number of days from now
+  now.setDate(now.getDate() - period);
+
+  return now.getTime() / 1000;
+}

src/core/interaction/cmdName.ts

@@ -1,5 +0,0 @@
-import isDev from '../process/isDev.js';
-
-export default function cmdName(name: string) {
-  return isDev() ? `${name}dev` : name;
-}

src/core/interaction/generateCustomId.ts

@@ -0,0 +1,9 @@
+import { CacheType, ChatInputCommandInteraction } from 'discord.js';
+
+export default function generateCustomId(
+  interaction: ChatInputCommandInteraction<CacheType>,
+) {
+  return `${interaction.commandName}/${
+    interaction.options.getSubcommandGroup() ?? ''
+  }/${interaction.options.getSubcommand() ?? ''}`;
+}

src/core/options/addPeriodSubCommands.ts

@@ -0,0 +1,61 @@
+import {
+  SlashCommandSubcommandBuilder,
+  SlashCommandSubcommandGroupBuilder,
+} from 'discord.js';
+import { PERIOD_NAMES } from './resolvePeriod.js';
+
+export type Period = 'today' | '30' | '60' | '90' | 'career' | 'custom';
+
+export const RELATIVE_PERIOD_NAMES: Record<Period, string> = {
+  today: 'A day ago',
+  30: '30 days ago',
+  60: '60 days ago',
+  90: '90 days ago',
+  career: 'Extent of data',
+  custom: 'Custom period',
+};
+
+export default function addPeriodSubCommands(
+  option: SlashCommandSubcommandGroupBuilder,
+  extra: (
+    option: SlashCommandSubcommandBuilder,
+  ) => SlashCommandSubcommandBuilder = (option) => option,
+) {
+  return option
+    .addSubcommand((option) =>
+      extra(option.setName('today').setDescription(PERIOD_NAMES.today)),
+    )
+    .addSubcommand((option) =>
+      extra(option.setName('30').setDescription(PERIOD_NAMES[30])),
+    )
+    .addSubcommand((option) =>
+      extra(option.setName('60').setDescription(PERIOD_NAMES[60])),
+    )
+    .addSubcommand((option) =>
+      extra(option.setName('90').setDescription(PERIOD_NAMES[90])),
+    )
+    .addSubcommand((option) =>
+      extra(option.setName('career').setDescription(PERIOD_NAMES.career)),
+    )
+    .addSubcommand((option) =>
+      extra(
+        option
+          .setName('custom')
+          .setDescription(PERIOD_NAMES.custom)
+          .addIntegerOption((option) =>
+            option
+              .setName('start')
+              .setDescription('Start of period in days ago from today')
+              .setMinValue(0)
+              .setRequired(true),
+          )
+          .addIntegerOption((option) =>
+            option
+              .setName('end')
+              .setDescription('End of period in days ago from today')
+              .setMinValue(0)
+              .setRequired(true),
+          ),
+      ),
+    );
+}

src/core/options/addStatPeriodChoices.ts

@@ -1,23 +0,0 @@
-import { SlashCommandStringOption } from 'discord.js';
-
-export type StatPeriod = 'today' | '30' | '60' | '90' | 'career';
-export const statPeriodNames: Record<StatPeriod, string> = {
-  today: "Today's statistics",
-  30: '30-day statistics',
-  60: '60-day statistics',
-  90: '90-day statistics',
-  career: 'Career statistics',
-};
-export default function addStatPeriodChoices(option: SlashCommandStringOption) {
-  return option
-    .setName('period')
-    .setDescription('The period to get stats for')
-    .setChoices(
-      { name: 'Today', value: 'today' satisfies StatPeriod },
-      { name: '30 Days', value: '30' satisfies StatPeriod },
-      { name: '60 Days', value: '60' satisfies StatPeriod },
-      { name: '90 Days', value: '90' satisfies StatPeriod },
-      { name: 'Career', value: 'career' satisfies StatPeriod },
-    )
-    .setRequired(true);
-}

src/core/options/addStatsSubCommandGroups.ts

@@ -0,0 +1,24 @@
+import { SlashCommandBuilder } from 'discord.js';
+import addPeriodSubCommands from './addPeriodSubCommands.js';
+import addTankChoices from './addTankChoices.js';
+import addUsernameOption from './addUsernameOption.js';
+
+export default function addStatsSubCommandGroups(option: SlashCommandBuilder) {
+  return option
+    .addSubcommandGroup((option) =>
+      addPeriodSubCommands(option, (option) =>
+        option.addStringOption(addUsernameOption),
+      )
+        .setName('player')
+        .setDescription("Player's statistics"),
+    )
+    .addSubcommandGroup((option) =>
+      addPeriodSubCommands(option, (option) =>
+        option
+          .addStringOption(addTankChoices)
+          .addStringOption(addUsernameOption),
+      )
+        .setName('tank')
+        .setDescription("Tank's statistics"),
+    );
+}

src/core/options/addUsernameOption.ts

@@ -3,6 +3,8 @@ import { SlashCommandStringOption } from 'discord.js';
 export default function addUsernameOption(option: SlashCommandStringOption) {
   return option
     .setName('username')
-    .setDescription('The username you use in Blitz')
+    .setDescription(
+      'The username you use in Blitz (inferred from Discord nickname by default)',
+    )
     .setAutocomplete(true);
 }

src/core/options/resolvePeriod.ts

@@ -0,0 +1,68 @@
+import { CacheType, ChatInputCommandInteraction } from 'discord.js';
+import getPeriodNow from '../blitzstars/getPeriodNow.js';
+import getPeriodStart from '../blitzstars/getPeriodStart.js';
+import getTimeDaysAgo from '../blitzstars/getTimeDaysAgo.js';
+import { Period, RELATIVE_PERIOD_NAMES } from './addPeriodSubCommands.js';
+
+export const PERIOD_NAMES: Record<Period, string> = {
+  today: "Today's statistics",
+  30: "30 days' statistics",
+  60: "60 days' statistics",
+  90: "90 days' statistics",
+  career: 'Career statistics',
+  custom: 'Custom period',
+};
+
+export const EVOLUTION_PERIOD_NAMES: Record<Period, string> = {
+  today: "Today's evolution",
+  30: "30 days' evolution",
+  60: "60 days' evolution",
+  90: "90 days' evolution",
+  career: 'Career evolution',
+  custom: 'Custom period',
+};
+
+export interface ResolvedPeriod {
+  relativePeriodName: string;
+  statsName: string;
+  evolutionName: string;
+  start: number;
+  end: number;
+}
+
+export default function resolvePeriod(
+  interaction: ChatInputCommandInteraction<CacheType>,
+) {
+  const period = interaction.options.getSubcommand(true) as Period;
+  let statsName: string;
+  let evolutionName: string;
+  let start: number;
+  let end: number;
+  const relativePeriodName =
+    RELATIVE_PERIOD_NAMES[interaction.options.getSubcommand() as Period];
+
+  if (period === 'custom') {
+    const startRaw = interaction.options.getInteger('start')!;
+    const endRaw = interaction.options.getInteger('end')!;
+    const startMin = Math.min(startRaw, endRaw);
+    const endMax = Math.max(startRaw, endRaw);
+
+    statsName = `${startMin} to ${endMax} days' statistics`;
+    evolutionName = `${startMin} to ${endMax} days' evolution`;
+    start = getTimeDaysAgo(startMin);
+    end = getTimeDaysAgo(endMax);
+  } else {
+    statsName = PERIOD_NAMES[period];
+    evolutionName = EVOLUTION_PERIOD_NAMES[period];
+    start = getPeriodStart(period);
+    end = getPeriodNow();
+  }
+
+  return {
+    statsName,
+    evolutionName,
+    start,
+    end,
+    relativePeriodName,
+  } satisfies ResolvedPeriod;
+}

src/core/options/resolvePlayer.ts

@@ -1,13 +1,18 @@
 import { CacheType, ChatInputCommandInteraction } from 'discord.js';
 import { BlitzServer } from '../../constants/servers.js';
-import errorWithCause from '../process/errorWithCause.js';
 import listAccountsPanServer, {
   usernamePatternWithoutPosition,
-} from './listAccountsPanServer.js';
+} from '../blitz/listAccountsPanServer.js';
+import errorWithCause from '../process/errorWithCause.js';
 
 export const serverAndIdPattern = /(com|eu|asia)\/[0-9]+/;
 
-export default async function getBlitzAccount(
+export interface ResolvedPlayer {
+  server: BlitzServer;
+  id: number;
+}
+
+export default async function resolvePlayer(
   interaction: ChatInputCommandInteraction<CacheType>,
 ) {
   const commandUsername = interaction.options.getString('username');
@@ -25,12 +30,18 @@ export default async function getBlitzAccount(
 
   if (serverAndIdPattern.test(username)) {
     const [server, accountId] = username.split('/');
-    return { server: server as BlitzServer, id: Number(accountId) };
+    return {
+      server: server as BlitzServer,
+      id: Number(accountId),
+    } satisfies ResolvedPlayer;
   } else {
     const accounts = await listAccountsPanServer(username);
 
     if (accounts[0]) {
-      return { server: accounts[0].server, id: accounts[0].account_id };
+      return {
+        server: accounts[0].server,
+        id: accounts[0].account_id,
+      } satisfies ResolvedPlayer;
     } else {
       throw errorWithCause(
         'Could not find user',

src/core/process/isNumber.ts

@@ -0,0 +1,3 @@
+export default function isNumber(value: any) {
+  return typeof value === 'number' && !isNaN(value) && isFinite(value);
+}

src/core/ui/render.tsx

@@ -41,6 +41,7 @@ export default async function render(element: ReactNode) {
       { data: robotoBlack, name: FONT_NAME, weight: 900 },
     ],
   });
+
   const png = new Resvg(svg).render().asPng();
 
   return png;

src/events/interactionCreate.ts

@@ -2,6 +2,7 @@ import {
   ActionRowBuilder,
   AutocompleteInteraction,
   ButtonBuilder,
+  ButtonInteraction,
   ButtonStyle,
   CacheType,
   ChatInputCommandInteraction,
@@ -12,20 +13,22 @@ import {
   RESTPostAPIChatInputApplicationCommandsJSONBody,
   Routes,
   SlashCommandBuilder,
+  SlashCommandSubcommandsOnlyBuilder,
 } from 'discord.js';
 import discord from '../../discord.json' assert { type: 'json' };
 import debug from '../commands/debug.js';
 import eligible from '../commands/eligible.js';
+import evolution from '../commands/evolution.js';
 import help from '../commands/help.js';
 import inactive from '../commands/inactive.js';
 import ownedtanks from '../commands/ownedtanks.js';
+import ping from '../commands/ping.js';
 import playerachievements from '../commands/playerachievements.js';
 import playerinfo from '../commands/playerinfo.js';
 import searchclans from '../commands/searchclans.js';
 import searchplayers from '../commands/searchplayers.js';
 import searchtanks from '../commands/searchtanks.js';
 import stats from '../commands/stats.js';
-import tankstats from '../commands/tankstats.js';
 import today from '../commands/today.js';
 import verify from '../commands/verify.js';
 import negativeEmbed from '../core/interaction/negativeEmbed.js';
@@ -40,17 +43,28 @@ import { handleError } from './error.js';
 export type CommandReturnable = EmbedBuilder | ButtonBuilder | JSX.Element;
 export type RichCommandReturnable = CommandReturnable | CommandReturnable[];
 
-export interface CommandRegistry {
+export type CommandRegistry = {
   inDevelopment: boolean;
   inProduction: boolean;
   inPublic: boolean;
 
-  command: Omit<SlashCommandBuilder, 'addSubcommand' | 'addSubcommandGroup'>;
-  execute: (
-    interaction: ChatInputCommandInteraction<CacheType>,
-  ) => RichCommandReturnable | Promise<RichCommandReturnable>;
+  command:
+    | SlashCommandBuilder
+    | SlashCommandSubcommandsOnlyBuilder
+    | Omit<SlashCommandBuilder, 'addSubcommand' | 'addSubcommandGroup'>;
   autocomplete?: (interaction: AutocompleteInteraction<CacheType>) => void;
-}
+} & (
+  | {
+      handlesInteraction?: false;
+      execute: (
+        interaction: ChatInputCommandInteraction<CacheType>,
+      ) => RichCommandReturnable | Promise<RichCommandReturnable>;
+    }
+  | {
+      handlesInteraction: true;
+      execute: (interaction: ChatInputCommandInteraction<CacheType>) => void;
+    }
+);
 
 const rest = new REST().setToken(DISCORD_TOKEN);
 
@@ -67,11 +81,16 @@ const commands = (
     searchplayers,
     searchtanks,
     stats,
-    tankstats,
     today,
     verify,
+    ping,
+    evolution,
   ] as CommandRegistry[]
 ).reduce<Record<string, CommandRegistry>>((accumulator, registry) => {
+  registry.command.setName(
+    isDev() ? `${registry.command.name}dev` : registry.command.name,
+  );
+
   return { ...accumulator, [registry.command.name]: registry };
 }, {});
 
@@ -82,10 +101,12 @@ export const publicCommands: RESTPostAPIChatInputApplicationCommandsJSONBody[] =
 
 Object.entries(commands).forEach(([, registry]) => {
   if (isDev() ? registry.inDevelopment : registry.inProduction) {
+    const json = registry.command.toJSON();
+
     if (registry.inPublic) {
-      publicCommands.push(registry.command.toJSON());
+      publicCommands.push(json);
     } else {
-      guildCommands.push(registry.command.toJSON());
+      guildCommands.push(json);
     }
   }
 });
@@ -104,103 +125,117 @@ try {
     });
 
   console.log(`Refreshing ${guildCommands.length} guild command(s).`);
-  Promise.all([
-    rest.put(
-      Routes.applicationGuildCommands(getClientId(), discord.sklld_guild_id),
-      { body: guildCommands },
-    ),
-    rest.put(
+  rest
+    .put(
       Routes.applicationGuildCommands(getClientId(), discord.tres_guild_id),
       { body: guildCommands },
-    ),
-  ]).then((guildData) => {
-    console.log(
-      `Successfully refreshed ${guildData.flat().length / 2} guild command(s).`,
-    );
-  });
+    )
+    .then((guildData) => {
+      console.log(
+        `Successfully refreshed ${
+          (guildData as unknown[]).length
+        } guild command(s).`,
+      );
+    });
 } catch (error) {
   console.error(error);
 }
 
+//#region Event type handlers
+function handleAutocomplete(interaction: AutocompleteInteraction<CacheType>) {
+  const command = commands[interaction.commandName];
+
+  if (!command) {
+    console.error(`No command matching ${interaction.commandName} was found.`);
+    return;
+  }
+
+  if (command.autocomplete) command.autocomplete(interaction);
+}
+
+async function handleChatInputCommand(
+  interaction: ChatInputCommandInteraction<CacheType>,
+) {
+  const command = commands[interaction.commandName];
+
+  if (!command) {
+    console.error(`No command matching ${interaction.commandName} was found.`);
+    return;
+  }
+
+  console.log(interaction.toString());
+  await interaction.deferReply();
+
+  try {
+    const result = await command.execute(interaction);
+
+    if (command.handlesInteraction) return;
+
+    const normalizedResult = Array.isArray(result) ? result : [result];
+    const reply: InteractionEditReplyOptions = {};
+
+    if (psa.data) {
+      normalizedResult.push(warningEmbed(psa.data.title, psa.data.description));
+    }
+
+    await Promise.all(
+      normalizedResult.map(async (item) => {
+        if (item instanceof EmbedBuilder) {
+          if (!reply.embeds) reply.embeds = [];
+          reply.embeds.push(item);
+        } else if (item instanceof ButtonBuilder) {
+          if (!reply.components)
+            reply.components = [new ActionRowBuilder<ButtonBuilder>()];
+          (
+            reply.components[0] as ActionRowBuilder<ButtonBuilder>
+          ).addComponents(item);
+        } else {
+          const image = await render(item!);
+          if (!reply.files) reply.files = [];
+          reply.files.push(image);
+        }
+      }),
+    );
+
+    await interaction.editReply(reply);
+  } catch (error) {
+    const actionRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
+      new ButtonBuilder()
+        .setLabel('Get Help on Discord Server')
+        .setURL('https://discord.gg/nDt7AjGJQH')
+        .setStyle(ButtonStyle.Link),
+    );
+
+    await interaction.editReply({
+      embeds: [
+        negativeEmbed(
+          (error as Error).message,
+          `${(error as Error).cause ?? 'No further information is available.'}`,
+        ),
+      ],
+      components: [actionRow],
+    });
+
+    handleError(error as Error, interaction.commandName);
+  }
+}
+
+function handleButton(interaction: ButtonInteraction<CacheType>) {
+  console.log(interaction.customId);
+  interaction.message.edit({
+    files: [],
+  });
+}
+//#endregion
+
 export default async function interactionCreate(
   interaction: Interaction<CacheType>,
 ) {
   if (interaction.isAutocomplete()) {
-    const command = commands[interaction.commandName];
-
-    if (!command) {
-      console.error(
-        `No command matching ${interaction.commandName} was found.`,
-      );
-      return;
-    }
-
-    if (command.autocomplete) command.autocomplete(interaction);
+    handleAutocomplete(interaction);
   } else if (interaction.isChatInputCommand()) {
-    const command = commands[interaction.commandName];
-
-    if (!command) {
-      console.error(
-        `No command matching ${interaction.commandName} was found.`,
-      );
-      return;
-    }
-
-    console.log(interaction.toString());
-    await interaction.deferReply();
-
-    try {
-      const result = await command.execute(interaction);
-      const normalizedResult = Array.isArray(result) ? result : [result];
-      const reply: InteractionEditReplyOptions = {};
-
-      if (psa.data) {
-        normalizedResult.push(
-          warningEmbed(psa.data.title, psa.data.description),
-        );
-      }
-
-      await Promise.all(
-        normalizedResult.map(async (item) => {
-          if (item instanceof EmbedBuilder) {
-            if (!reply.embeds) reply.embeds = [];
-            reply.embeds.push(item);
-          } else if (item instanceof ButtonBuilder) {
-            if (!reply.components)
-              reply.components = [new ActionRowBuilder<ButtonBuilder>()];
-            (
-              reply.components[0] as ActionRowBuilder<ButtonBuilder>
-            ).addComponents(item);
-          } else {
-            const image = await render(item);
-            if (!reply.files) reply.files = [];
-            reply.files.push(image);
-          }
-        }),
-      );
-
-      await interaction.editReply(reply);
-    } catch (error) {
-      const actionRow = new ActionRowBuilder<ButtonBuilder>().addComponents(
-        new ButtonBuilder()
-          .setLabel('Get Help on Discord Server')
-          .setURL('https://discord.gg/nDt7AjGJQH')
-          .setStyle(ButtonStyle.Link),
-      );
-
-      await interaction.editReply({
-        embeds: [
-          negativeEmbed(
-            (error as Error).message,
-            `${
-              (error as Error).cause ?? 'No further information is available.'
-            }`,
-          ),
-        ],
-        components: [actionRow],
-      });
-
-      handleError(error as Error, interaction.commandName);
-    }
+    handleChatInputCommand(interaction);
+  } else if (interaction.isButton()) {
+    handleButton(interaction);
   }
 }

src/events/ready.ts

@@ -5,6 +5,6 @@ export default function ready(client: Client<true>) {
   console.log(
     `Logged in as ${client.user.tag} in ${
       isDev() ? 'development' : 'production'
-    } mode`,
+    } mode across ${client.guilds.cache.size} servers`,
   );
 }

src/renderers/evolution.tsx

@@ -0,0 +1,133 @@
+import * as Graph from '../components/Graph/index.js';
+import NoData, { NoDataType } from '../components/NoData.js';
+import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
+import TitleBar from '../components/TitleBar.js';
+import Wrapper from '../components/Wrapper.js';
+import { BLITZ_SERVERS } from '../constants/servers.js';
+import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
+import resolveTankName from '../core/blitz/resolveTankName.js';
+import { tankopedia } from '../core/blitz/tankopedia.js';
+import getPlayerHistories from '../core/blitzstars/getPlayerHistories.js';
+import getTankHistories from '../core/blitzstars/getTankHistories.js';
+import { ResolvedPeriod } from '../core/options/resolvePeriod.js';
+import { ResolvedPlayer } from '../core/options/resolvePlayer.js';
+import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
+import { AccountInfo } from '../types/accountInfo.js';
+import { Histories } from '../types/histories.js';
+import { PlayerClanData } from '../types/playerClanData.js';
+import { StatType } from './stats.js';
+
+export default async function evolution<Type extends StatType>(
+  type: Type,
+  { start, end, evolutionName, relativePeriodName }: ResolvedPeriod,
+  { server, id }: ResolvedPlayer,
+  tankId: Type extends 'tank' ? number : never,
+) {
+  let nameDiscriminator: string | undefined;
+  let image: string | undefined;
+
+  if (type === 'player') {
+    const clan = (
+      await getWargamingResponse<PlayerClanData>(
+        `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
+      )
+    )[id]?.clan;
+
+    if (clan) nameDiscriminator = `[${clan.tag}]`;
+    image = clan
+      ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clan.emblem_set_id}.png`
+      : undefined;
+  } else {
+    nameDiscriminator = `(${resolveTankName(tankId)})`;
+    image = tankopedia[tankId].images.normal;
+  }
+
+  let histories: Histories;
+
+  if (type === 'player') {
+    histories = await getPlayerHistories(server, id, {
+      start,
+      end,
+      includeLatestHistories: true,
+      includePreviousHistories: true,
+    });
+  } else {
+    histories = await getTankHistories(server, id, {
+      tankId,
+      start,
+      end,
+      includeLatestHistories: true,
+      includePreviousHistories: true,
+    });
+  }
+
+  const careerWinrate = histories.map(
+    (history) =>
+      [
+        history.last_battle_time,
+        (history.all.wins / history.all.battles) * 100,
+      ] as Graph.PlotItem,
+  );
+  const careerBattles = histories.map(
+    (history) =>
+      [history.last_battle_time, history.all.battles] as Graph.PlotItem,
+  );
+  const winrateYs = careerWinrate.map(([, y]) => y);
+  const maxWinrate = Math.max(...winrateYs);
+  const minWinrate = Math.min(...winrateYs);
+  const battleYs = careerBattles.map(([, y]) => y);
+  const maxBattle = Math.max(...battleYs);
+  const minBattle = Math.min(...battleYs);
+
+  const accountInfo = await getWargamingResponse<AccountInfo>(
+    `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+  );
+
+  return (
+    <Wrapper>
+      <TitleBar
+        name={accountInfo[id].nickname}
+        nameDiscriminator={nameDiscriminator}
+        image={image}
+        description={`${evolutionName} • ${new Date().toDateString()} • ${
+          BLITZ_SERVERS[server]
+        }`}
+      />
+
+      {/* goofy ahh bug forces me to call them as functions */}
+      {careerWinrate.length > 0 && (
+        <Graph.Root
+          xMinLabel={relativePeriodName}
+          xMaxLabel="Latest recorded battle" // TODO: this is not true in custom periods
+          leftVerticalMargin={{
+            min: minWinrate,
+            max: maxWinrate,
+            suffix: '%',
+          }}
+          rightVerticalMargin={{
+            min: minBattle,
+            max: maxBattle,
+          }}
+        >
+          {Graph.Line({
+            // total battles
+            plot: careerBattles!,
+            color: Graph.LineColor.Blue,
+          })}
+          {Graph.Line({
+            // career winrate
+            plot: careerWinrate!,
+            minY: minWinrate,
+            maxY: maxWinrate,
+          })}
+        </Graph.Root>
+      )}
+
+      {careerWinrate.length === 0 && (
+        <NoData type={NoDataType.BattlesInPeriod} />
+      )}
+
+      <PoweredByBlitzStars />
+    </Wrapper>
+  );
+}

src/renderers/stats.tsx

@@ -0,0 +1,152 @@
+import GenericAllStats from '../components/GenericAllStats.js';
+import NoData, { NoDataType } from '../components/NoData.js';
+import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
+import TierWeights, { TierWeightsRecord } from '../components/TierWeights.js';
+import TitleBar from '../components/TitleBar.js';
+import Wrapper from '../components/Wrapper.js';
+import { BLITZ_SERVERS } from '../constants/servers.js';
+import getWN8 from '../core/blitz/getWN8.js';
+import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
+import resolveTankName from '../core/blitz/resolveTankName.js';
+import sumStats from '../core/blitz/sumStats.js';
+import { Tier, tankopedia } from '../core/blitz/tankopedia.js';
+import getTankStatsOverTime from '../core/blitzstars/getTankStatsOverTime.js';
+import { tankAverages } from '../core/blitzstars/tankAverages.js';
+import { ResolvedPeriod } from '../core/options/resolvePeriod.js';
+import { ResolvedPlayer } from '../core/options/resolvePlayer.js';
+import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
+import {
+  AccountInfo,
+  AllStats,
+  SupplementaryStats,
+} from '../types/accountInfo.js';
+import { PlayerClanData } from '../types/playerClanData.js';
+
+export type StatType = 'player' | 'tank';
+
+export default async function stats<Type extends StatType>(
+  type: Type,
+  { start, end, statsName }: ResolvedPeriod,
+  { server, id }: ResolvedPlayer,
+  tankId: Type extends 'tank' ? number : never,
+) {
+  let nameDiscriminator: string | undefined;
+  let image: string | undefined;
+
+  if (type === 'player') {
+    const clan = (
+      await getWargamingResponse<PlayerClanData>(
+        `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
+      )
+    )[id]?.clan;
+
+    if (clan) nameDiscriminator = `[${clan.tag}]`;
+    image = clan
+      ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clan.emblem_set_id}.png`
+      : undefined;
+  } else if (type === 'tank') {
+    nameDiscriminator = `(${resolveTankName(tankId)})`;
+    image = tankopedia[tankId].images.normal;
+  }
+
+  const tankStats = await getTankStatsOverTime(server, id, start, end);
+  let stats: AllStats;
+  let supplementaryStats: SupplementaryStats;
+  let tierWeights: TierWeightsRecord;
+
+  if (type === 'player') {
+    const entries = Object.entries(tankStats);
+    stats = sumStats(entries.map(([, stats]) => stats));
+    const battlesOfTanksWithAverages = entries.reduce(
+      (accumulator, [tankIdString, stats]) => {
+        const tankId = parseInt(tankIdString);
+        const tankAverage = tankAverages[tankId];
+
+        return tankAverage ? accumulator + stats.battles : accumulator;
+      },
+      0,
+    );
+    const battlesOfTanksWithTankopediaEntry = entries.reduce(
+      (accumulator, [tankIdString, stats]) => {
+        const tankId = parseInt(tankIdString);
+        const tankopediaEntry = tankopedia[tankId];
+
+        return tankopediaEntry ? accumulator + stats.battles : accumulator;
+      },
+      0,
+    );
+
+    supplementaryStats = {
+      WN8:
+        entries.reduce((accumulator, [tankIdString, stats]) => {
+          const tankId = parseInt(tankIdString);
+          const tankAverage = tankAverages[tankId];
+
+          return tankAverage
+            ? accumulator + getWN8(tankAverage.all, stats) * stats.battles
+            : accumulator;
+        }, 0) / battlesOfTanksWithAverages,
+      tier:
+        entries.reduce((accumulator, [tankIdString, stats]) => {
+          const tankId = parseInt(tankIdString);
+          const tankopediaEntry = tankopedia[tankId];
+
+          return tankopediaEntry
+            ? accumulator + tankopediaEntry.tier * stats.battles
+            : accumulator;
+        }, 0) / battlesOfTanksWithTankopediaEntry,
+    };
+    tierWeights = entries.reduce<TierWeightsRecord>(
+      (accumulator, [tankIdString, stats]) => {
+        const tankId = parseInt(tankIdString);
+        const tier = tankopedia[tankId].tier as Tier;
+
+        if (accumulator[tier]) {
+          accumulator[tier]! += stats.battles;
+        } else {
+          accumulator[tier] = stats.battles;
+        }
+
+        return accumulator;
+      },
+      {},
+    );
+  } else {
+    stats = tankStats[tankId];
+
+    supplementaryStats = {
+      WN8: getWN8(tankAverages[tankId].all, tankStats[tankId]),
+      tier: tankopedia[tankId].tier,
+    };
+  }
+
+  const accountInfo = await getWargamingResponse<AccountInfo>(
+    `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+  );
+
+  return (
+    <Wrapper>
+      <TitleBar
+        name={accountInfo[id].nickname}
+        nameDiscriminator={nameDiscriminator}
+        image={image}
+        description={`${statsName} • ${new Date().toDateString()} • ${
+          BLITZ_SERVERS[server]
+        }`}
+      />
+
+      {stats.battles === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
+      {stats.battles > 0 && type === 'player' && (
+        <TierWeights weights={tierWeights!} />
+      )}
+      {stats.battles > 0 && (
+        <GenericAllStats
+          stats={stats}
+          supplementaryStats={supplementaryStats}
+        />
+      )}
+
+      <PoweredByBlitzStars />
+    </Wrapper>
+  );
+}

src/renderers/today.tsx

@@ -0,0 +1,159 @@
+import * as Breakdown from '../components/Breakdown/index.js';
+import NoData, { NoDataType } from '../components/NoData.js';
+import PoweredByBlitzStars from '../components/PoweredByBlitzStars.js';
+import TitleBar from '../components/TitleBar.js';
+import Wrapper from '../components/Wrapper.js';
+import { BLITZ_SERVERS } from '../constants/servers.js';
+import getTankStats from '../core/blitz/getTankStats.js';
+import getWN8 from '../core/blitz/getWN8.js';
+import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
+import resolveTankName from '../core/blitz/resolveTankName.js';
+import sumStats from '../core/blitz/sumStats.js';
+import { tankopedia } from '../core/blitz/tankopedia.js';
+import getPeriodNow from '../core/blitzstars/getPeriodNow.js';
+import getTankStatsOverTime from '../core/blitzstars/getTankStatsOverTime.js';
+import getTimeDaysAgo from '../core/blitzstars/getTimeDaysAgo.js';
+import { tankAverages } from '../core/blitzstars/tankAverages.js';
+import { ResolvedPlayer } from '../core/options/resolvePlayer.js';
+import { WARGAMING_APPLICATION_ID } from '../core/process/args.js';
+import { AccountInfo, AllStats } from '../types/accountInfo.js';
+import { PlayerClanData } from '../types/playerClanData.js';
+
+export default async function today({ server, id }: ResolvedPlayer) {
+  const tankStatsOverTime = await getTankStatsOverTime(
+    server,
+    id,
+    getTimeDaysAgo(0),
+    getPeriodNow(),
+  );
+  const accountInfo = await getWargamingResponse<AccountInfo>(
+    `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+  );
+  const clanData = await getWargamingResponse<PlayerClanData>(
+    `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
+  );
+  const careerTankStatsRaw = await getTankStats(server, id);
+  const careerStats: Record<number, AllStats> = {
+    0: accountInfo[id].statistics.all,
+  };
+  const allStatsToAccumulate: AllStats[] = [];
+
+  Object.entries(tankStatsOverTime).forEach(([, tankStats]) => {
+    allStatsToAccumulate.push(tankStats);
+  });
+  Object.entries(careerTankStatsRaw).forEach(([, tankStats]) => {
+    careerStats[tankStats.tank_id] = tankStats.all;
+  });
+
+  const accumulatedStats = sumStats(allStatsToAccumulate);
+
+  if (Object.keys(tankStatsOverTime).length > 0) {
+    tankStatsOverTime[0] = accumulatedStats;
+  }
+
+  const tankStatsOverTimeEntries = Object.entries(tankStatsOverTime);
+  const todayWN8s = tankStatsOverTimeEntries.reduce<Record<number, number>>(
+    (accumulator, [tankIdString, tankStats]) => {
+      const tankId = Number(tankIdString);
+
+      return tankId === 0 || tankAverages[tankId] === undefined
+        ? accumulator
+        : {
+            ...accumulator,
+            [tankId]: getWN8(tankAverages[tankId].all, tankStats),
+          };
+    },
+    {},
+  );
+  const careerWN8s = careerTankStatsRaw.reduce<Record<number, number>>(
+    (accumulator, { tank_id }) => {
+      return tank_id === 0 || tankAverages[tank_id] === undefined
+        ? accumulator
+        : {
+            ...accumulator,
+            [tank_id]: getWN8(tankAverages[tank_id].all, careerStats[tank_id]),
+          };
+    },
+    {},
+  );
+  const todayWN8sEntries = Object.entries(todayWN8s);
+  const careerWN8sEntries = Object.entries(careerWN8s);
+
+  todayWN8s[0] =
+    todayWN8sEntries.reduce(
+      (accumulator, [tankIdString, wn8]) =>
+        accumulator + wn8 * tankStatsOverTime[Number(tankIdString)].battles,
+      0,
+    ) /
+    todayWN8sEntries.reduce(
+      (accumulator, [tankIdString]) =>
+        accumulator + tankStatsOverTime[Number(tankIdString)].battles,
+      0,
+    );
+  careerWN8s[0] =
+    careerWN8sEntries.reduce(
+      (accumulator, [tankIdString, WN8]) =>
+        isNaN(WN8)
+          ? accumulator
+          : accumulator + WN8 * careerStats[Number(tankIdString)].battles,
+      0,
+    ) /
+    careerWN8sEntries.reduce(
+      (accumulator, [tankIdString, WN8]) =>
+        isNaN(WN8)
+          ? accumulator
+          : accumulator + careerStats[Number(tankIdString)].battles,
+      0,
+    );
+
+  const rows = tankStatsOverTimeEntries.map(([tankIdString, tankStats]) => {
+    const tankId = Number(tankIdString);
+    const career = careerStats[tankId];
+
+    return (
+      <Breakdown.Row
+        key={tankId}
+        name={tankId === 0 ? 'Total' : resolveTankName(Number(tankIdString))}
+        winrate={tankStats.wins / tankStats.battles}
+        careerWinrate={career.wins / career.battles}
+        WN8={isNaN(todayWN8s[tankId]) ? undefined : todayWN8s[tankId]}
+        careerWN8={isNaN(careerWN8s[tankId]) ? undefined : careerWN8s[tankId]}
+        damage={tankStats.damage_dealt / tankStats.battles}
+        careerDamage={career.damage_dealt / career.battles}
+        survival={tankStats.survived_battles / tankStats.battles}
+        careerSurvival={career.survived_battles / career.battles}
+        battles={tankStats.battles}
+        careerBattles={career.battles}
+        icon={
+          tankId === 0
+            ? undefined
+            : tankopedia[tankIdString as unknown as number].images.normal
+        }
+      />
+    );
+  });
+
+  return (
+    <Wrapper>
+      <TitleBar
+        name={accountInfo[id].nickname}
+        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={`Today's breakdown • ${new Date().toDateString()} • ${
+          BLITZ_SERVERS[server]
+        }`}
+      />
+
+      {rows.length === 0 && <NoData type={NoDataType.BattlesInPeriod} />}
+      {rows.length > 0 && <Breakdown.Root>{rows}</Breakdown.Root>}
+
+      <PoweredByBlitzStars />
+    </Wrapper>
+  );
+}

src/stitches.config.ts

@@ -1,7 +1,9 @@
-import { slateDark } from '@radix-ui/colors';
-import { createColors } from 'bepaint';
+import { slate, slateDark } from '@radix-ui/colors';
+import { createBorderStyles, createColors } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
 export const theme = {
   colors: createColors(slateDark),
+  borderStyles: createBorderStyles(slateDark),
 };
+export const themeLight = { colors: createColors(slate) };

src/types/histories.ts

@@ -0,0 +1,24 @@
+// a cleaner simplification of Blitz Stars' histories because it's a mess there
+
+import { AllStats } from './accountInfo.js';
+
+export interface History {
+  all: AllStats;
+  last_battle_time: number;
+}
+
+export type Histories = History[];
+
+export interface GetHistoriesOptions {
+  start: number;
+  end: number;
+  includeLatestHistories: boolean;
+  includePreviousHistories: boolean;
+}
+
+export const getHistoriesDefaultOptions: GetHistoriesOptions = {
+  start: -Infinity,
+  end: Infinity,
+  includeLatestHistories: false,
+  includePreviousHistories: false,
+};

tsconfig.json

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

yarn.lock

@@ -295,14 +295,7 @@
   resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.2.tgz#072b7b13784fb3cee9c2450c22f36405983f5e3c"
   integrity sha512-gaBLT8pdcexFztLSPRtriHeXY/Kn4907uOCZ4Q3lncFBkheAWOuNt53ypsF8szgxbEJ513UeBzcf4utN0EzEwA==
 
-"@types/lodash.startcase@^4.4.7":
-  version "4.4.7"
-  resolved "https://registry.yarnpkg.com/@types/lodash.startcase/-/lodash.startcase-4.4.7.tgz#69857f17be0aa5ce74da4fa386e32e22c012258a"
-  integrity sha512-6v8FVOcfxdomO1Vammc1Zsah7/4aif/Lx16oQQ0WZmKVGF/Yf5c5m68LqI/ELOhKaKUr8KfnDdKrytdrThoRQw==
-  dependencies:
-    "@types/lodash" "*"
-
-"@types/lodash@*":
+"@types/lodash@^4.14.195":
   version "4.14.195"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
   integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
@@ -524,11 +517,6 @@ lodash.snakecase@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
   integrity sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==
 
-lodash.startcase@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
-  integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
-
 lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"