Merge pull request #32 from tresabhi/1.12.8

.github/workflows/cd-asia-ratings-latest.yml

@@ -0,0 +1,34 @@
+name: CD Asia Ratings Latest
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  host:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate leaderboard
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=asia --latest

.github/workflows/cd-asia-ratings-leaderboards.yml

@@ -0,0 +1,34 @@
+name: CD Asia Ratings Leaderboards
+
+on:
+  schedule:
+    - cron: "0 17 * * *"
+
+jobs:
+  host:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate leaderboard
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=asia

.github/workflows/cd-docs.yml

@@ -16,18 +16,14 @@ jobs:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
 
-    strategy:
-      matrix:
-        node-version: [18.x]
-
     steps:
-      - name: Get code
+      - name: Checkout
         uses: actions/checkout@v3
 
       - name: Use node
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18
           cache: 'npm'
 
       - name: Install Yarn

.github/workflows/cd-eu-ratings-latest.yml

@@ -0,0 +1,34 @@
+name: CD Europe Ratings Latest
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  host:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate leaderboard
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=eu --latest

.github/workflows/cd-eu-ratings-leaderboards.yml

@@ -0,0 +1,34 @@
+name: CD Europe Ratings Leaderboards
+
+on:
+  schedule:
+    - cron: "0 23 * * *"
+
+jobs:
+  host:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "npm"
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: "**/node_modules"
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate leaderboard
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=eu

.github/workflows/cd-host.yml

@@ -1,4 +1,4 @@
-name: Host
+name: CD Host
 
 on:
   schedule:
@@ -12,24 +12,21 @@ concurrency:
 jobs:
   host:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
 
     steps:
       - name: Use node
         uses: actions/setup-node@v2
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18
 
       - name: Download release assets
         run: |
           DOWNLOAD_URL=$(curl -s https://api.github.com/repos/tresabhi/blitzkrieg/releases/latest \
-            | grep "browser_download_url.*dist.zip" \
+            | grep "browser_download_url.*bot.zip" \
             | cut -d : -f 2,3 \
             | tr -d \")
-          curl -L -o dist.zip $DOWNLOAD_URL
-          unzip dist.zip
+          curl -L -o bot.zip $DOWNLOAD_URL
+          unzip bot.zip
 
       - name: Run bot
-        run: NODE_ENV=production DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} WARGAMING_APPLICATION_ID=${{ secrets.WARGAMING_APPLICATION_ID }} node --enable-source-maps --trace-warnings bot.cjs
+        run: NODE_ENV=production GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} WARGAMING_APPLICATION_ID=${{ secrets.WARGAMING_APPLICATION_ID }} node --enable-source-maps --trace-warnings bot/index.cjs

.github/workflows/cd-na-ratings-latest.yml

@@ -0,0 +1,34 @@
+name: CD North America Ratings Latest
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+
+jobs:
+  host:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate leaderboard
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=na --latest

.github/workflows/cd-na-ratings-leaderboards.yml

@@ -0,0 +1,34 @@
+name: CD North America Ratings Leaderboards
+
+on:
+  schedule:
+    - cron: '0 5 * * *'
+
+jobs:
+  host:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+
+      - name: Install Yarn
+        run: npm install --location=global yarn
+
+      - name: Use node_modules cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate leaderboard
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} yarn publish:ratingsleaderboard --region=na

.github/workflows/ci-build.yml

@@ -11,18 +11,14 @@ jobs:
     name: Build
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.x]
-
     steps:
-      - name: Get code
+      - name: Checkout
         uses: actions/checkout@v3
 
       - name: Use node
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: 18
           cache: 'npm'
 
       - name: Install Yarn

.gitignore

@@ -5,9 +5,12 @@ package-lock.json
 /playwright-report/
 /playwright/.cache/
 dist/
+dist.*
 yarn-error.log
-dist.zip
 commands.txt
 /test.*
+test.*
 /docs/.vitepress/dist
-/docs/.vitepress/cache
+/docs/.vitepress/cache
+servers.csv
+.next/

.vscode/settings.json

@@ -7,12 +7,16 @@
     "cleandist",
     "customperiod",
     "Everytime",
+    "fullstats",
     "fuzzysort",
     "kranvagn",
+    "Leaderboard",
+    "leaderboards",
     "outfile",
     "ownedtanks",
     "playerachievements",
     "playerinfo",
+    "ratingsleaderboard",
     "Resvg",
     "roboto",
     "searchclans",
@@ -22,15 +26,19 @@
     "Smri",
     "startcase",
     "statsfull",
+    "Stringifying",
     "strvk",
+    "subnation",
     "tankaverages",
     "tankopedia",
     "tankstats",
+    "tresabhi",
     "Unicum",
     "Unregistering",
     "vickers",
     "vitepress",
     "wargaming",
+    "webp",
     "winrate"
   ],
   "deno.enable": false,

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+- Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+the [Official Discord Server](https://discord.gg/nDt7AjGJQH).
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 TrèsAbhi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

docs/.vitepress/config.ts

@@ -1,4 +1,7 @@
-import { DefaultTheme, defineConfig } from 'vitepress';
+import { compareVersions } from 'compare-versions';
+import { readdirSync } from 'fs';
+import { parse } from 'path';
+import { defineConfig } from 'vitepress';
 import { getSidebar } from 'vitepress-plugin-auto-sidebar';
 
 export default defineConfig({
@@ -9,17 +12,27 @@ export default defineConfig({
   themeConfig: {
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' },
+      { text: 'Guide', link: '/guide/about' },
     ],
 
-    sidebar: getSidebar({
-      collapsed: false,
-      contentDirs: ['guide', 'legal', 'changelogs'],
-      contentRoot: '/docs/',
-    }) as DefaultTheme.Sidebar,
+    sidebar: [
+      ...getSidebar({
+        collapsed: false,
+        contentDirs: ['guide', 'legal'],
+        contentRoot: '/docs/',
+      }),
+
+      {
+        text: 'Changelogs',
+        items: readdirSync('./docs/changelogs')
+          .map((file) => parse(file).name)
+          .sort(compareVersions)
+          .map((name) => ({ text: name, link: `/changelogs/${name}.html` })),
+      },
+    ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+      { icon: 'github', link: 'https://github.com/tresabhi/blitzkrieg' },
     ],
   },
 });

docs/.vitepress/theme/index.ts

@@ -1,16 +1,16 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import Theme from 'vitepress/theme'
-import './style.css'
+import { h } from 'vue';
+import Theme from 'vitepress/theme';
+import './style.css';
 
 export default {
   extends: Theme,
   Layout: () => {
     return h(Theme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
+    });
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-  }
-}
+  },
+};

docs/.vitepress/theme/style.css

@@ -7,7 +7,7 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-c-brand: #646cff;
   --vp-c-brand-light: #747bff;
   --vp-c-brand-lighter: #9499ff;
@@ -88,4 +88,3 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand) !important;
 }
-

docs/changelogs/1.10.0.md

@@ -0,0 +1,37 @@
+# Blitzkrieg 1.10.0
+
+This update addresses many readability issues that users have reported over time.
+
+## Changes
+
+- `/ownedtanks`
+  - Tanks are now displayed in two columns
+  - Collector and premium tanks now have their own colors
+  - Tank types are also displayed
+  - A stylistic image of the tank is also displayed for each tank to the right
+- `/fullstats`
+  - Was previously called `/statsfull`; this was changed to avoid the clutter that would show up when searching for `/stats`
+  - Added four catagories in which all the stats are sorted into
+  - Catagories now have backgrounds to compartmentalize them
+- `/evolution`
+  - Gave the axis markings a high contrast color
+  - Added a label for the x axis affirming that it is plotted over the number of battles
+- `/today`
+  - Added a border to all the rows to compartmentalize them
+  - This command can now generate embeds too
+  - Removed survivability
+  - Added a limit option to cut off after a certain number of tanks played (this is mainly intended to be used by streamers to limit the content of the embeds)
+  - Tanks are now displayed in order of the most recent battle
+- `/help`
+  - A significant amount of subcommands were added
+  - These new subcommands now return normal Discord messages instead of embeds in favor of readability
+  - The contents of the replies are directly fetched from the Blitzkrieg documentation
+- Time zones
+  - What is considered a "day's worth of battles" has been adjusted as the "reset time" was the same for all Blitz servers
+  - The reset time is now dependent on the server of the player
+  - Use `/help timezones` to learn more
+
+## Technical Changes
+
+- All themes have been merged to leverage Bepaint's suffixes
+- Switched to Node module resolution

docs/changelogs/1.10.1.md

@@ -0,0 +1,7 @@
+# Blitzkrieg 1.10.1
+
+This is a bit of an experiment.
+
+## Technical Changes
+
+- Every midnight in the Central North American Time, a permanent record of the entire ratings leaderboard will be stored for North America

docs/changelogs/1.10.2.md

@@ -0,0 +1,10 @@
+# Blitzkrieg 1.10.2
+
+The experiment in Blitzkrieg `1.10.1` was a bit of a failure so here are a few changes.
+
+## Fixes
+
+- North American leaderboards are now saved in the `na` directory instead of `asia`
+- Dependencies are now installed before the script is ran
+- Added leaderboards for all regions
+- All regions now have their own separate cron timings

docs/changelogs/1.11.0.md

@@ -0,0 +1,22 @@
+# Blitzkrieg 1.11.0
+
+I am going on vacation so I thought I'd publish this a bit prematurely without all the planned features.
+
+## Changes
+
+- Added `/ratings`
+  - This command currently only has the `leagues` subcommand group
+  - Displays the top players in a league
+  - Also shows the changes in their positions and scores since last region midnight
+  - Use `/help timezones` to know when Blitzkrieg records the leaderboard
+- Blitzkrieg now internally generates and keeps a permanent record of all leaderboards updated every `UTC+0` midnight
+  - This approach will allow us to capture the absolute latest state of the leaderboard before it is wiped for the next season
+
+## Fixes
+
+- Removed region "Europe" in `/verify` example
+
+## Technical Changes
+
+- Add scripts were upgraded to TypeScript
+- Secrets now only throw errors if they're used when not provided

docs/changelogs/1.12.0.md

@@ -0,0 +1,54 @@
+# Blitzkrieg 1.12.0
+
+_Houston, permission to return to Earth? A new update dropped._
+
+## Features
+
+- Added `multi-tank` filters to `/stats` and `/full-stats`
+  - This lets you pull up the stats by combining filters of `nation`, `tank-type`, `tier`, and `tree-type`
+- Added `/ratings neighbours`
+  - Lets you see your rank and the neighbours around you
+- Added a bunch more `/today` parameters (thank you for the suggestions, HisRoyalFatness!)
+  - `cutoff`: the max number of rows to show (excluding the total row)
+  - `maximized`: the max number of rows that show the full non-collapsed stats (default: `4`)
+  - `show-total`: show the total row or not (default: `true`)
+- Tank search is now accent-tolerant
+
+## Changes
+
+- `/ratings` has been moved out of preview and is now accessible to all
+- `/today` now has a more appealing look with more efficient space management
+- `/stats`, `/full-stats`, and `/evolution` now have less convoluted commands
+  - All periods now fall under `period` and `custom`
+  - `period` has preset periods like `today`, `career`, `30`, `60`, `90`
+  - `custom` lets you set a start and end day
+- Added dashes to command names, subcommands, options, etc. to make them more readable
+- Titlebar
+  - Removed the Blitzkrieg logo
+  - Removed region
+  - Center aligned items
+- Footers are now center alinged when they do no have footer text on the left
+- Moved several title discriminators into the description
+- `/ratings` is now data-driven
+- Embeds now auto refresh every `30` seconds instead of `60`
+- Added numbers besides roman numerals in tier choice
+  - I forgot to implement this in places other than `/owned-tanks`... oh well!
+- Increased precision of winrate in `/evolution` to `2` decimals
+
+## Fixes
+
+- Removed duplicate "Efficiency" cards in `/full-stats`
+- Titlebar gap is now `4px` just like Figma
+- Renamed `/statsfull` to `/full-stats` in the `/stats` footer
+- Rewards in `/ratings` are now properly aligned
+- `/ratings` now uses the correct source of information per region instead of getting it from a cached North American source
+- Search parameters are now passed onto the URL parser correctly
+- Custom date ranges now work correctly once again as the start is now the maximum days ago from today and the end is the minimum
+
+## Technical Changes
+
+- All generated images are now `480px` wide instead of `640px` to combat the unnecessary amounts of negative space
+- Changed all relevant typings to be sourced from `stats` instead of `full-stats`
+- Added minimum character limit to clan search
+- Username auto-completing now only takes in regex-accepted parts of the input
+- Search parameters are now longer automatically generated by inferring command interactions

docs/changelogs/1.12.1.md

@@ -0,0 +1,8 @@
+# Blitzkrieg 1.12.1
+
+A duo of nasty bugs fixed.
+
+## Fixes
+
+- Fixed a tank index and id mismatch
+- Reverted username pattern infrence in command username inputs

docs/changelogs/1.12.2.md

@@ -0,0 +1,29 @@
+# Blitzkrieg 1.12.2
+
+A much needed room service is here!
+
+## Changes
+
+- Tier selection is now easier
+  - Tier options across all commands have been unified to a single style
+  - Tiers are now sorted from `10` to `1`
+  - Tiers now show up in the format `Tier {tier_number} - {tier_roman_numeral}` (example: `Tier 8 - VIII`)
+- Removed powered by footer as links are provided regardless
+- Changed invite instructions to instead use application directory
+
+## Fixes
+
+- Guide link on the website is now fixed
+- Versions now show up in the correct order in the navigation bar
+- Added Blitzkrieg's GitHub link instead of the default Vitepress
+- Changed examples to guide in the navigation bar
+- Clan name and icon now show up with multi-tank filters
+- Removed a random `console.log`
+
+## Technical Changes
+
+- Added `knip`
+  - Removed a lot of unused files and dependencies
+- Updated all dependencies to their latest
+- Code split `bot.ts`
+  - `client` and `octokit` now reside separately

docs/changelogs/1.12.3.md

@@ -0,0 +1,13 @@
+# Blitzkrieg 1.12.3
+
+3-day downtime fixed!
+
+## Changes
+
+- Split `/ratings` into `/ratings current` and `/ratings archive`
+  - `current` now properly handles when there is no ongoing ratings season
+  - `archive` displays older archived seasons
+
+## Fixes
+
+- The bot is now no ratings seasons tolerant

docs/changelogs/1.12.4.md

@@ -0,0 +1,7 @@
+# Blitzkrieg 1.12.4
+
+Added very badly-coded temporary `/clan-event` command (without linting)
+
+## Changes
+
+- Added `/clan-event` command

docs/changelogs/1.12.5.md

@@ -0,0 +1,12 @@
+# Blitzkrieg 1.12.5
+
+Some patch up work
+
+## Changes
+
+- `/clan-event` now is more legible and comes with an approximation warning
+
+## Fixes
+
+- `/clan-event` now uses a more optimized way of fetching large data
+  - This should fix the issue where too many people using the command broke it

docs/changelogs/1.12.6.md

@@ -0,0 +1,12 @@
+# Blitzkrieg 1.12.6
+
+Stops making the bot lie!
+
+## Changes
+
+- The approximation warning for `/clan-event` has been made more concise
+- Players with `0` wins are now omitted
+
+## Fixes
+
+- Players who haven't player within the current day are now omitted

docs/changelogs/1.12.7.md

@@ -0,0 +1,13 @@
+# Blitzkrieg 1.12.7
+
+A few fixes and clarifications
+
+## Changes
+
+- `/clan-event`
+  - Made statement about the limited publicly available data
+  - Added a statement about reset times
+
+## Fixes
+
+- Commands with images now once again work

docs/changelogs/1.12.8.md

@@ -0,0 +1,7 @@
+# Blitzkrieg 1.12.8
+
+Blitzkrieg is a completely free service and I earn no revenue from it. To keep it sustainable, I have to rely on free services. Unfortunately for embeds, seems like I have exceeded my limits. Before this service starts charging me, I have shut down embeds. They'll hopefully be back in 1.13 alongside the website! Only the future will tell...
+
+## Changes
+
+- Removed all embed buttons

docs/changelogs/1.9.3.md

@@ -0,0 +1,14 @@
+# Blitzkrieg 1.9.3
+
+A few fixes before we tackle the next major release.
+
+## Fixes
+
+- `/stats`, `/evolution`, and `/statsfull` now properly handle unowned or unplayed tanks
+
+## Technical Changes
+
+- Added a `Command` suffix after all command exports
+- Added a `Route` suffix after all route exports
+- Moved `tankopedia` and `tankaverages` into a runtime cache
+  - But, this time, it's a promise so we get the best of both worlds

docs/changelogs/1.9.4.md

@@ -0,0 +1,12 @@
+# Blitzkrieg 1.9.4
+
+Haha, I lied. More fixes.
+
+## Fixes
+
+- Tank names once again show when searching for tank stats
+- Tier weights now ignore tanks without entries in the `tankopedia`
+
+## Technical Changes
+
+- All `tankopedia` derivatives are now promises

docs/changelogs/1.9.5.md

@@ -0,0 +1,9 @@
+# Blitzkrieg 1.9.5
+
+Hopefully this is the last round of fixes for Blitzkrieg `1.9`.
+
+## Fixes
+
+- All commands have been tweaked to work even with a lack of a tankopedia entry
+  - This should fix test tanks not showing up
+- `/today` now properly preserves all WN8 entries

docs/guide/about.md

@@ -0,0 +1,10 @@
+# About
+
+Blitzkrieg is a multipurpose bot for anything and everything World of Tanks Blitz.
+
+- Track statistics
+- Find inactive players in a clan
+- Lookup owned tanks
+- Create embeds for streams
+- Track a player/tanks statistical evolution
+- ...and a variety of other similar things

docs/guide/embeds.md

@@ -0,0 +1,23 @@
+# Embeds
+
+Embeds are generated by a few commands as a URL that can be loaded in a browser/streaming software.
+
+## Creating Embeds
+
+1. Use a command of your liking (for example, `/stats`).
+2. Customize the command however you like and the URL generated for the embed will match your needs.
+3. Send the command and when the bot is "done thinking," an "Embed" button will appear below the bot's reply.
+
+## Using Embeds in Streaming Softwares
+
+1. Click on the "Embed" button.
+2. Copy the URL from your browser.
+3. Paste the URL into a Browser Source.
+4. Set the refresh rate/FPS to something very low like `0.0167` (that's 1 frame every 60 seconds).
+
+## How Embeds Behave
+
+- They load like any normal website albeit with a significant delay.
+- They auto refresh every `60s`.
+- All embeds and images generated by Blitzkrieg have a width of `640px` but the height varies and must be found manually through trial and error.
+  - It's okay to have a Browser Source that has a height larger than needed as Blitzkrieg embeds are transparent.

docs/guide/invite.md

@@ -0,0 +1,3 @@
+# Inviting the Bot
+
+Go to [application directory for Blitzkrieg](https://discord.com/application-directory/1097673957865443370) and click "Add to Server." Voila! You're ready to go.

docs/guide/timezones.md

@@ -0,0 +1,9 @@
+# Timezones
+
+What is considered a "day's worth of games" is determined by the reset time. The reset time is generally at midnight everyday after which newer games are counted towards the next day. Reset times vary from region to region:
+
+- North America: `UTC-5:00` (Central North American Time midnight)
+- Europe: `UTC+1:00` (Central European Time midnight)
+- Asia: `UTC+7:00` (Central Asia Standard Time midnight)
+
+**Reset times are different from Blitz Stars** (Blitz Stars resets at 5:00 am locally relative to the user opening their website). Inconsistencies with Blitz Stars only occur with sleep-deprived players and players who play in the wrong region.

docs/index.md

@@ -15,7 +15,7 @@ hero:
       link: guide/install
     - theme: alt
       text: Guide
-      link: /guide
+      link: /guide/about
 
 features:
   - title: Clean and Efficient UI

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+  distDir: 'dist/website',
+};
+
+export default nextConfig;

package.dist.json

@@ -1,5 +1,6 @@
 {
-  "main": "server.cjs",
+  "main": "server.js",
+  "type": "module",
   "scripts": {
     "start": "node --enable-source-maps --trace-warnings server.cjs"
   }

package.json

@@ -1,48 +1,63 @@
 {
   "name": "blitzkrieg",
-  "version": "1.9.0",
-  "description": "",
+  "version": "1.12.7",
+  "description": "🎉 All-in-one Discord bot for everything World of Tanks Blitz",
   "main": "src/server.ts",
   "type": "module",
   "scripts": {
+    "build": "node scripts/build && yarn build:website",
     "build:bot": "node scripts/build --build=bot",
     "build:server": "node scripts/build --build=server",
+    "build:website": "next build",
     "build:docs": "vitepress build docs",
-    "build": "node scripts/build --build=all",
-    "dev:bot": "yarn build:bot --dev && yarn start:bot",
-    "dev:server": "yarn build:server --dev && yarn start:server",
+    "build:ratingsleaderboard": "vite-node --script scripts/buildRatingsLeaderboard",
+    "dev:bot": "yarn build:bot && yarn start:bot",
+    "dev:server": "yarn build:server && yarn start:server",
     "dev:docs": "vitepress dev docs",
-    "start:bot": "node --enable-source-maps --trace-warnings dist/bot.cjs",
-    "start:server": "node --enable-source-maps --trace-warnings dist/server.cjs",
+    "dev:website": "next dev",
+    "start:bot": "node --enable-source-maps --trace-warnings dist/bot/index.cjs",
+    "start:server": "node --enable-source-maps --trace-warnings dist/server/index.cjs",
+    "start:website": "next start",
     "host:docs": "vitepress preview docs",
+    "publish:ratingsleaderboard": "vite-node --script scripts/buildRatingsLeaderboard --publish",
     "zip": "zip -r dist.zip dist",
-    "lint": "npx tsc"
+    "lint": "npx tsc",
+    "lint:website": "next lint",
+    "format": "prettier --write \"**/*.@(json|js|jsx|css|md|ts|tsx|html|xml|yml|gltf)\"",
+    "knip": "knip",
+    "update": "yarn upgrade --latest"
   },
   "license": "MIT",
   "dependencies": {
-    "@radix-ui/colors": "^0.1.8",
+    "@octokit/rest": "^20.0.1",
+    "@radix-ui/colors": "^2.1.0",
     "@resvg/resvg-js": "^2.4.1",
     "bepaint": "^0.1.0-beta.3",
-    "discord.js": "^14.9.0",
-    "esbuild": "^0.18.10",
-    "escape-html": "^1.0.3",
+    "discord.js": "^14.13.0",
+    "esbuild": "^0.19.2",
     "express": "^4.18.2",
     "fuzzysort": "^2.0.4",
     "lodash": "^4.17.21",
     "markdown-escape": "^2.0.0",
+    "next": "^13.4.19",
     "react": "^18.2.0",
-    "satori": "^0.9.1",
+    "react-dom": "^18.2.0",
+    "satori": "^0.10.4",
+    "vite-node": "^0.34.4",
     "vitepress-plugin-auto-sidebar": "^1.1.0"
   },
   "devDependencies": {
-    "@total-typescript/ts-reset": "^0.4.2",
+    "@total-typescript/ts-reset": "^0.5.1",
     "@types/escape-html": "^1.0.2",
     "@types/express": "^4.17.17",
-    "@types/lodash": "^4.14.195",
+    "@types/lodash": "^4.14.198",
     "@types/markdown-escape": "^1.1.0",
-    "@types/node": "^20.2.1",
-    "@types/react": "^18.2.7",
-    "typescript": "^5.0.4",
-    "vitepress": "^1.0.0-beta.3"
+    "@types/node": "^20.6.0",
+    "@types/react": "^18.2.21",
+    "compare-versions": "^6.1.0",
+    "knip": "^2.22.0",
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "vitepress": "^1.0.0-rc.10"
   }
 }

scripts/build.js

@@ -1,87 +1,33 @@
 import { build } from 'esbuild';
-import { copyFile, mkdir, rm, writeFile } from 'fs/promises';
 import { argv } from 'process';
 
-const isProd = !argv.includes('--dev');
-const buildAll = argv.includes('--build=all');
-const buildBot = argv.includes('--build=bot') | buildAll;
-const buildServer = argv.includes('--build=server') | buildAll;
+const targetFile = argv
+  .find((arg) => arg.startsWith('--build='))
+  ?.split('=')[1];
+const files = targetFile ? [targetFile] : ['bot', 'server'];
 
-if (isProd) {
-  // only remove in production to ensure no time is wasted in dev
-  console.log('🟡 Removing dist...');
-  await rm('dist', { recursive: true, force: true });
-  console.log('✅ Dist removed');
+files.forEach(async (file) => {
+  console.log(`Building ${file}...`);
 
-  console.log('🟡 Creating dist...');
-  await mkdir('dist');
-  console.log('✅ Dist created');
+  await build({
+    entryPoints: [`src/${file}.ts`],
+    outfile: `dist/${file}/index.cjs`,
 
-  console.log('🟡 Caching tankopedia...');
-  fetch('https://www.blitzstars.com/bs-tankopedia.json')
-    .then((response) => response.text())
-    .then((tankopedia) => writeFile('./dist/tankopedia.json', tankopedia))
-    .then(() => console.log('✅ Tankopedia cached'));
+    platform: 'node',
+    loader: {
+      '.node': 'copy',
+      '.ttf': 'file',
+    },
+    format: 'cjs',
 
-  console.log('🟡 Caching tank averages...');
-  fetch('https://www.blitzstars.com/api/tankaverages.json')
-    .then((response) => response.json())
-    .then((individualTankAverages) => {
-      const tankAverages = {};
+    bundle: true,
+    sourcemap: true,
+    minifyIdentifiers: false, // cause goofy errors
+    minifySyntax: true,
+    minifyWhitespace: true,
 
-      individualTankAverages.forEach((individualTankAverage) => {
-        tankAverages[individualTankAverage.tank_id] = individualTankAverage;
-      });
-
-      return writeFile(
-        './dist/tankaverages.json',
-        JSON.stringify(tankAverages),
-      );
-    })
-    .then(() => console.log('✅ Tank averages cached'));
-
-  console.log('🟡 Copying package.json...');
-  copyFile('package.dist.json', 'dist/package.json').then(() =>
-    console.log('✅ package.json copied'),
-  );
-}
-
-const commonOptions = {
-  platform: 'node',
-  loader: {
-    '.node': 'copy',
-    '.ttf': 'file',
-  },
-
-  bundle: true,
-  sourcemap: true,
-  minifyIdentifiers: false, // causes errors
-  minifySyntax: isProd,
-  minifyWhitespace: isProd,
-
-  logLevel: isProd ? 'info' : 'silent',
-};
-
-if (buildBot) {
-  console.log('🟡 Building bot...');
-  build({
-    ...commonOptions,
-
-    entryPoints: ['src/bot.ts'],
-    outfile: 'dist/bot.cjs',
-  }).then(() => {
-    console.log('✅ Bot built');
+    logLevel: 'info',
   });
-}
 
-if (buildServer) {
-  console.log('🟡 Building server...');
-  build({
-    ...commonOptions,
-
-    entryPoints: ['src/server.ts'],
-    outfile: 'dist/server.cjs',
-  }).then(() => {
-    console.log('✅ Server built');
-  });
-}
+  console.log(`Built ${file}`);
+});

scripts/buildRatingsLeaderboard.ts

@@ -0,0 +1,144 @@
+import { Octokit } from '@octokit/rest';
+import { rm, writeFile } from 'fs/promises';
+import { argv, env } from 'process';
+import {
+  RatingsInfo,
+  RatingsNeighbors,
+  RatingsPlayer,
+} from '../src/commands/ratings';
+import commitMultipleFiles from './commitMultipleFiles.js';
+
+/*
+ * Central North American Time (UTC-5): use 0 5 * * *.
+ * Central European Time (UTC+1): use 0 23 * * *.
+ * Central Asia Standard Time (UTC+7): use 0 17 * * *.
+ *
+ * na/ratings/49/info.json: season info like rewards, start & end time, etc.
+ * na/ratings/49/latest.json: the absolute latest leaderboard recorded at UTC+0 midnight
+ * na/ratings/49/midnight.json: last midnight's leaderboard relative to the region
+ */
+
+export type BlitzkriegRatingsLeaderboard = { id: number; score: number }[];
+
+const publish = argv.includes('--publish');
+const latest = argv.includes('--latest');
+const server = argv.find((arg) => arg.startsWith('--region='))?.split('=')[1];
+
+if (!server) throw new Error('Region parameter not specified');
+
+const NEIGHBORS = 1000;
+const PLAYERS = await fetch(
+  `https://${server}.wotblitz.com/en/api/rating-leaderboards/season/`,
+)
+  .then((response) => response.json() as Promise<RatingsInfo>)
+  .then((data) => (data.detail === undefined ? data.count : undefined));
+
+if (PLAYERS === undefined) {
+  throw new Error('No current ratings season running');
+}
+
+const players: Record<number, RatingsPlayer> = {};
+const leaderboard: BlitzkriegRatingsLeaderboard = [];
+let registered = 0;
+
+async function branchFromPlayer(id: number) {
+  const { neighbors } = await fetch(
+    `https://${server}.wotblitz.com/en/api/rating-leaderboards/user/${id}/?neighbors=${NEIGHBORS}`,
+  ).then((response) => response.json() as Promise<RatingsNeighbors>);
+
+  const firstPlayer = neighbors[0];
+  const lastPlayer = neighbors[neighbors.length - 1];
+
+  const branches: Promise<void>[] = [];
+  if (!players[firstPlayer.number])
+    branches.push(branchFromPlayer(firstPlayer.spa_id));
+  if (!players[lastPlayer.number])
+    branches.push(branchFromPlayer(lastPlayer.spa_id));
+
+  neighbors.forEach((neighbor) => {
+    if (players[neighbor.number]) return;
+
+    players[neighbor.number] = neighbor;
+    registered++;
+  });
+
+  console.log(
+    `Registered ${registered} / ${PLAYERS} (${(
+      (registered / PLAYERS!) *
+      100
+    ).toFixed(2)}%)`,
+  );
+
+  await Promise.all(branches);
+}
+
+async function branchFromLeague(id: number) {
+  const { result } = await fetch(
+    `https://${server}.wotblitz.com/en/api/rating-leaderboards/league/${id}/top/`,
+  ).then((response) => response.json() as Promise<{ result: RatingsPlayer[] }>);
+
+  const firstPlayer = result[0];
+  const lastPlayer = result[result.length - 1];
+
+  await Promise.all([
+    branchFromPlayer(firstPlayer.spa_id),
+    branchFromPlayer(lastPlayer.spa_id),
+  ]);
+}
+
+console.log('Branching from leagues...');
+await Promise.all([
+  branchFromLeague(0),
+  branchFromLeague(1),
+  branchFromLeague(2),
+  branchFromLeague(3),
+  branchFromLeague(4),
+]);
+
+console.log('Converting to an array...');
+for (let index = 0; index < PLAYERS; index++) {
+  const listing = players[index + 1];
+  if (!listing) console.warn(`Position ${index + 1} had no player`);
+
+  leaderboard[index] = {
+    id: listing.spa_id,
+    score: listing.score,
+  };
+}
+
+const leaderboardJSON = JSON.stringify(leaderboard);
+
+if (publish) {
+  const octokit = new Octokit({ auth: env.GH_TOKEN });
+
+  const info = await fetch(
+    `https://${server}.wotblitz.com/en/api/rating-leaderboards/season/`,
+  ).then(
+    (response) =>
+      response.json() as Promise<RatingsInfo & { detail: undefined }>,
+  );
+  const normalizedServer = server === 'na' ? 'com' : server;
+
+  const infoPath = `${normalizedServer}/ratings/${info.current_season}/info.json`;
+  const leaderboardPath = `${normalizedServer}/ratings/${info.current_season}/${
+    latest ? 'latest' : 'midnight'
+  }.json`;
+  const infoJSON = JSON.stringify(info);
+
+  console.log(`Publishing to season ${info.current_season}...`);
+  commitMultipleFiles(
+    octokit,
+    'tresabhi',
+    'blitzkrieg-db',
+    'main',
+    new Date().toString(),
+    [
+      { path: infoPath, content: infoJSON },
+      { path: leaderboardPath, content: leaderboardJSON },
+    ],
+  );
+} else {
+  console.log('Writing to disk...');
+  await rm('dist.json', { force: true });
+  await writeFile('dist.json', leaderboardJSON);
+}

scripts/commitMultipleFiles.ts

@@ -0,0 +1,70 @@
+import { Octokit } from '@octokit/rest';
+
+export default async function commitMultipleFiles(
+  octokit: Octokit,
+  owner: string,
+  repo: string,
+  branch: string,
+  message: string,
+  changes: { path: string; content: string }[],
+) {
+  // Get the latest commit SHA on the specified branch
+  const { data: refData } = await octokit.git.getRef({
+    owner,
+    repo,
+    ref: `heads/${branch}`,
+  });
+  const latestCommitSha = refData.object.sha;
+
+  // Get the tree SHA for the latest commit
+  const { data: commitData } = await octokit.git.getCommit({
+    owner,
+    repo,
+    commit_sha: latestCommitSha,
+  });
+  const treeSha = commitData.tree.sha;
+
+  // Create blobs for each file
+  const blobs = await Promise.all(
+    changes.map(async (change) => {
+      const { data: blobData } = await octokit.git.createBlob({
+        owner,
+        repo,
+        content: change.content,
+        encoding: 'utf-8',
+      });
+
+      return {
+        sha: blobData.sha,
+        path: change.path,
+        mode: '100644',
+        type: 'blob',
+      } as const;
+    }),
+  );
+
+  // Create a new tree with the new blobs
+  const { data: treeData } = await octokit.git.createTree({
+    owner,
+    repo,
+    base_tree: treeSha,
+    tree: blobs,
+  });
+
+  // Create a new commit with the new tree
+  const { data: newCommitData } = await octokit.git.createCommit({
+    owner,
+    repo,
+    message,
+    tree: treeData.sha,
+    parents: [latestCommitSha],
+  });
+
+  // Update the branch reference to point to the new commit
+  await octokit.git.updateRef({
+    owner,
+    repo,
+    ref: `heads/${branch}`,
+    sha: newCommitData.sha,
+  });
+}

src/app/layout.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import Navbar from '../components/Navbar';
+
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html>
+      <body
+        style={{
+          margin: 0,
+        }}
+      >
+        <div
+          style={{
+            width: '100vw',
+            height: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Navbar />
+
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h1>Hello, Next.js!</h1>;
+}

src/bot.ts

@@ -1,16 +1,6 @@
-import { Client, GatewayIntentBits } from 'discord.js';
-import { DISCORD_TOKEN } from './core/node/arguments.js';
-import { registerErrorHandlers } from './events/error.js';
-import guildMemberAdd from './events/guildMemberAdd.js';
-import interactionCreate from './events/interactionCreate/index.js';
-import ready from './events/ready.js';
-
-export const client = new Client({
-  intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMembers],
-})
-  .on('ready', ready)
-  .on('guildMemberAdd', guildMemberAdd)
-  .on('interactionCreate', interactionCreate);
+import { client } from './core/discord/client';
+import { secrets } from './core/node/secrets';
+import { registerErrorHandlers } from './events/error';
 
 registerErrorHandlers();
-client.login(DISCORD_TOKEN);
+client.login(secrets.DISCORD_TOKEN);

src/commands/clanEvent.ts

@@ -0,0 +1,97 @@
+import { SlashCommandBuilder, escapeMarkdown } from 'discord.js';
+import markdownEscape from 'markdown-escape';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import { PlayerHistoriesRaw } from '../core/blitzstars/getPlayerHistories';
+import getTimeDaysAgo from '../core/blitzstars/getTimeDaysAgo';
+import addClanChoices from '../core/discord/addClanChoices';
+import autocompleteClan from '../core/discord/autocompleteClan';
+import embedWarning from '../core/discord/embedWarning';
+import resolveClanFromCommand from '../core/discord/resolveClanFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountAchievements } from '../types/accountAchievements';
+import { AccountInfo } from '../types/accountInfo';
+import { ClanInfo } from '../types/clanInfo';
+
+export const clanEventCommand: CommandRegistry = {
+  inProduction: true,
+  inPublic: true,
+
+  command: new SlashCommandBuilder()
+    .setName('clan-event')
+    .setDescription('Lists all inactive players')
+    .addStringOption(addClanChoices),
+
+  async handler(interaction) {
+    const { region, id } = await resolveClanFromCommand(interaction);
+    const clan = (
+      await getWargamingResponse<ClanInfo>(
+        `https://api.wotblitz.${region}/wotb/clans/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&clan_id=${id}`,
+      )
+    )[id];
+    const memberIds = clan.members_ids.join(',');
+    const [players, achievements, previousJointVictories] = await Promise.all([
+      getWargamingResponse<AccountInfo>(
+        `https://api.wotblitz.${region}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${memberIds}`,
+      ),
+      getWargamingResponse<AccountAchievements>(
+        `https://api.wotblitz.${region}/wotb/account/achievements/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${memberIds}`,
+      ),
+      Promise.all(
+        clan.members_ids.map((id) =>
+          fetch(`https://www.blitzstars.com/api/playerstats/${id}`)
+            .then((response) => response.json() as Promise<PlayerHistoriesRaw>)
+            .then((data) => ({
+              id,
+              jointVictory: data[0]?.achievements.jointVictoryCount as
+                | number
+                | undefined,
+            })),
+        ),
+      ).then((data) =>
+        data.reduce<Record<number, number | undefined>>(
+          (accumulator, value) => ({
+            ...accumulator,
+            [value.id]: value.jointVictory,
+          }),
+          {},
+        ),
+      ),
+    ]);
+    const jointVictories = clan.members_ids.map((id) => ({
+      id,
+      joinVictory:
+        players[id].last_battle_time > getTimeDaysAgo(region, 1)
+          ? previousJointVictories[id] === undefined
+            ? 0
+            : achievements[id].max_series.jointVictory -
+              previousJointVictories[id]!
+          : 0,
+    }));
+
+    return [
+      `# ${escapeMarkdown(clan.name)} [${escapeMarkdown(
+        clan.tag,
+      )}]'s platoon wins today: ${(
+        jointVictories.reduce(
+          (accumulator, { joinVictory }) => accumulator + joinVictory,
+          0,
+        ) / 2
+      ).toFixed(0)}\n${jointVictories
+        .filter(({ joinVictory }) => joinVictory)
+        .sort((a, b) => b.joinVictory - a.joinVictory)
+        .map(
+          ({ id, joinVictory }) =>
+            `- ${markdownEscape(players[id].nickname)}: ${joinVictory}`,
+        )
+        .join('\n')}`,
+
+      embedWarning(
+        'This is an approximation!',
+        "Wargaming provides very little information about platoons publicly. Caveats:\n- Players in two different clans platooning artificially inflates the total count\n- Game-mode battles aren't counted since Wargaming doesn't publicly share that data\n- This command is also subject to Blitzkrieg's reset times (use `/help timezones` for more info)",
+      ),
+    ];
+  },
+
+  autocomplete: autocompleteClan,
+};

src/commands/debug.ts

@@ -1,25 +1,24 @@
 import { SlashCommandBuilder } from 'discord.js';
 import packageJSON from '../../package.json' assert { type: 'json' };
-import { client } from '../bot.js';
-import { tankopedia } from '../core/blitz/tankopedia.js';
-import { tankAverages } from '../core/blitzstars/tankAverages.js';
-import embedInfo from '../core/discord/embedInfo.js';
-import markdownTable from '../core/discord/markdownTable.js';
-import getClientId from '../core/node/getClientId.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
+import { tankopedia } from '../core/blitz/tankopedia';
+import { tankAverages } from '../core/blitzstars/tankAverages';
+import { client } from '../core/discord/client';
+import embedInfo from '../core/discord/embedInfo';
+import markdownTable from '../core/discord/markdownTable';
+import getClientId from '../core/node/getClientId';
+import { CommandRegistry } from '../events/interactionCreate';
 
 const executionStart = new Date().getTime();
 
-export default {
+export const debugCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
     .setName('debug')
     .setDescription('Debug information about the bot'),
 
-  handler(interaction) {
+  async handler(interaction) {
     const currentTime = new Date().getTime();
     const uptime = currentTime - executionStart;
 
@@ -37,9 +36,9 @@ export default {
             (uptime / 1000) % 60,
           )}s ${Math.floor(uptime % 1000)}ms`,
         ],
-        ['Tankopedia cached', `${tankopedia !== undefined}`],
-        ['Tank averages cached', `${tankAverages !== undefined}`],
+        ['Tankopedia cached', `${(await tankopedia) !== undefined}`],
+        ['Tank averages cached', `${(await tankAverages) !== undefined}`],
       ]),
     );
   },
-} satisfies CommandRegistry;
+};

src/commands/eligible.ts

@@ -1,20 +1,21 @@
 import { SlashCommandBuilder } from 'discord.js';
-import calculateWN8 from '../core/blitz/calculateWN8.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 getPeriodStart from '../core/blitzstars/getPeriodStart.js';
-import getTankStatsDiffed from '../core/blitzstars/getTankStatsDiffed.js';
-import { tankAverages } from '../core/blitzstars/tankAverages.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import embedNegative from '../core/discord/embedNegative.js';
-import embedPositive from '../core/discord/embedPositive.js';
-import markdownTable, { TableInput } from '../core/discord/markdownTable.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountInfo } from '../types/accountInfo.js';
+import calculateWN8 from '../core/blitz/calculateWN8';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import sumStats from '../core/blitz/sumStats';
+import { tankopedia } from '../core/blitz/tankopedia';
+import getDiffedTankStats from '../core/blitzstars/getDiffedTankStats';
+import getPeriodNow from '../core/blitzstars/getPeriodNow';
+import getTimeDaysAgo from '../core/blitzstars/getTimeDaysAgo';
+import { tankAverages } from '../core/blitzstars/tankAverages';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import embedNegative from '../core/discord/embedNegative';
+import embedPositive from '../core/discord/embedPositive';
+import markdownTable, { TableInput } from '../core/discord/markdownTable';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountInfo } from '../types/accountInfo';
+import { PossiblyPromise } from '../types/possiblyPromise';
 
 export type SkilledClan = 'SKLLD' | 'SMRI';
 
@@ -23,9 +24,8 @@ export const SKILLED_CLANS: Record<SkilledClan, string> = {
   SMRI: 'Samurai',
 };
 
-export default {
+export const eligibleCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: false,
 
   command: new SlashCommandBuilder()
@@ -48,9 +48,9 @@ export default {
 
   async handler(interaction) {
     const clan = interaction.options.getString('clan') as SkilledClan;
-    const { id, server } = await resolvePlayerFromCommand(interaction);
+    const { id, region: server } = await resolvePlayerFromCommand(interaction);
     const accountInfo = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
     );
     const problems: TableInput = [];
     const title = `${accountInfo[id].nickname}'s eligibility for ${SKILLED_CLANS[clan]}`;
@@ -58,50 +58,80 @@ export default {
     let body = '';
 
     if (clan === 'SKLLD') {
-      const tankStatsOverTime = await getTankStatsDiffed(
+      const { diffed } = await getDiffedTankStats(
         server,
         id,
-        getPeriodStart('30'),
+        getTimeDaysAgo(server, 30),
         getPeriodNow(),
       );
-      const entries = Object.entries(tankStatsOverTime);
+      const entries = Object.entries(diffed);
       const stats = sumStats(entries.map(([, stats]) => stats));
       const averageTier =
-        entries.reduce((accumulator, [tankIdString, stats]) => {
-          const tankId = parseInt(tankIdString);
-          const tankTier = tankopedia[tankId].tier;
+        (await entries.reduce<PossiblyPromise<number>>(
+          async (accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
+            const tankopediaEntry = (await tankopedia)[tankId];
 
-          return accumulator + tankTier * stats.battles;
-        }, 0) / stats.battles;
+            if (!tankopediaEntry) return accumulator;
+
+            const tankTier = tankopediaEntry.tier;
+
+            return (await accumulator) + tankTier * stats.battles;
+          },
+          0,
+        )) /
+        (await entries.reduce<PossiblyPromise<number>>(
+          async (accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
+            const tankopediaEntry = (await tankopedia)[tankId];
+
+            if (!tankopediaEntry) return accumulator;
+
+            return stats.battles;
+          },
+          0,
+        ));
       const WN8 =
-        entries.reduce((accumulator, [tankIdString, stats]) => {
-          const tankId = parseInt(tankIdString);
+        (await entries.reduce<PossiblyPromise<number>>(
+          async (accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
 
-          // edge case where new tanks don't have averages
-          if (tankAverages[tankId]) {
-            const tankWN8 = calculateWN8(tankAverages[tankId].all, stats);
+            // edge case where new tanks don't have averages
+            if ((await tankAverages)[tankId]) {
+              const tankWN8 = calculateWN8(
+                (await tankAverages)[tankId].all,
+                stats,
+              );
 
-            if (isNaN(tankWN8)) return accumulator;
-            return accumulator + tankWN8 * stats.battles;
-          } else return accumulator;
-        }, 0) / stats.battles;
+              if (isNaN(tankWN8)) return accumulator;
+              return (await accumulator) + tankWN8 * stats.battles;
+            } else return accumulator;
+          },
+          0,
+        )) / stats.battles;
       const tier10Damage =
-        entries.reduce((accumulator, [tankIdString, stats]) => {
-          const tankId = parseInt(tankIdString);
+        (await entries.reduce<PossiblyPromise<number>>(
+          async (accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
 
-          if (tankopedia[tankId]?.tier === 10) {
-            const tankStats = tankStatsOverTime[tankId];
-            return accumulator + tankStats.damage_dealt;
-          } else return accumulator;
-        }, 0) /
-        entries.reduce((accumulator, [tankIdString, stats]) => {
-          const tankId = parseInt(tankIdString);
+            if ((await tankopedia)[tankId]?.tier === 10) {
+              const tankStats = diffed[tankId];
+              return (await accumulator) + tankStats.damage_dealt;
+            } else return accumulator;
+          },
+          0,
+        )) /
+        (await entries.reduce<PossiblyPromise<number>>(
+          async (accumulator, [tankIdString, stats]) => {
+            const tankId = parseInt(tankIdString);
 
-          if (tankopedia[tankId]?.tier === 10) {
-            const tankStats = tankStatsOverTime[tankId];
-            return accumulator + tankStats.battles;
-          } else return accumulator;
-        }, 0);
+            if ((await tankopedia)[tankId]?.tier === 10) {
+              const tankStats = diffed[tankId];
+              return (await accumulator) + tankStats.battles;
+            } else return accumulator;
+          },
+          0,
+        ));
 
       if (stats.battles < 126) {
         problems.push(['Battles', `${stats.battles} (${stats.battles - 126})`]);
@@ -169,4 +199,4 @@ export default {
 
     return (isEligible ? embedPositive : embedNegative)(title, body);
   },
-} satisfies CommandRegistry;
+};

src/commands/evolution.tsx

@@ -1,86 +1,93 @@
 import { SlashCommandBuilder } from 'discord.js';
-import { CYCLIC_API } from '../constants/cyclic.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import resolveTankId from '../core/blitz/resolveTankId.js';
-import addStatTypeSubCommandGroups from '../core/discord/addStatTypeSubCommandGroups.js';
-import autocompleteTanks from '../core/discord/autocompleteTanks.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import interactionToURL from '../core/discord/interactionToURL.js';
-import linkButton from '../core/discord/linkButton.js';
-import primaryButton from '../core/discord/primaryButton.js';
-import resolvePeriodFromButton from '../core/discord/resolvePeriodFromButton.js';
-import resolvePeriodFromCommand from '../core/discord/resolvePeriodFromCommand.js';
-import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import evolution from '../renderers/evolution.js';
-import { StatType } from '../renderers/statsfull.js';
-import { AccountInfo } from '../types/accountInfo.js';
+import { CYCLIC_API } from '../constants/cyclic';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import resolveTankId from '../core/blitz/resolveTankId';
+import addStatTypeSubCommandGroups from '../core/discord/addStatTypeSubCommandGroups';
+import autocompleteTanks from '../core/discord/autocompleteTanks';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import interactionToURL from '../core/discord/interactionToURL';
+import linkButton from '../core/discord/linkButton';
+import primaryButton from '../core/discord/primaryButton';
+import resolvePeriodFromButton from '../core/discord/resolvePeriodFromButton';
+import resolvePeriodFromCommand from '../core/discord/resolvePeriodFromCommand';
+import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistryRaw } from '../events/interactionCreate';
+import evolution from '../renderers/evolution';
+import { StatType } from '../renderers/stats';
+import { AccountInfo } from '../types/accountInfo';
 
-export default {
-  inProduction: true,
-  inDevelopment: true,
-  inPublic: true,
-
-  command: addStatTypeSubCommandGroups(
-    new SlashCommandBuilder()
-      .setName('evolution')
-      .setDescription('Evolution of statistics'),
-  ),
-
-  async handler(interaction) {
-    const commandGroup = interaction.options.getSubcommandGroup(
-      true,
-    ) as StatType;
-    const player = await resolvePlayerFromCommand(interaction);
-    const period = resolvePeriodFromCommand(interaction);
-    const tankIdRaw = interaction.options.getString('tank')!;
-    const tankId = commandGroup === 'tank' ? resolveTankId(tankIdRaw) : null;
-    const start = interaction.options.getInteger('start');
-    const end = interaction.options.getInteger('end');
-    const { nickname } = (
-      await getWargamingResponse<AccountInfo>(
-        `https://api.wotblitz.${player.server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
-      )
-    )[player.id];
-    const path = interactionToURL(interaction, {
-      ...player,
-      tankId,
-      start,
-      end,
-    });
-
-    return [
-      await evolution(commandGroup, period, player, tankId),
-      primaryButton(path, 'Refresh'),
-      // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
-      linkButton(
-        `https://www.blitzstars.com/player/${player.server}/${nickname}${
-          commandGroup === 'tank' ? `/tank/${tankId!}` : ''
-        }`,
-        'BlitzStars',
-      ),
-    ];
-  },
-
-  autocomplete: (interaction) => {
-    autocompleteUsername(interaction);
-    autocompleteTanks(interaction);
-  },
-
-  async button(interaction) {
-    const url = new URL(`${CYCLIC_API}/${interaction.customId}`);
-    const path = url.pathname.split('/').filter(Boolean);
-    const commandGroup = path[1] as StatType;
-    const period = resolvePeriodFromButton(interaction);
-    const player = await resolvePlayerFromButton(interaction);
-
-    return await evolution(
-      commandGroup,
-      period,
-      player,
-      parseInt(url.searchParams.get('tankId')!),
+export const evolutionCommand = new Promise<CommandRegistryRaw>(
+  async (resolve) => {
+    const command = await addStatTypeSubCommandGroups(
+      new SlashCommandBuilder()
+        .setName('evolution')
+        .setDescription('Evolution of statistics'),
+      false,
     );
+
+    resolve({
+      inProduction: true,
+      inPublic: true,
+
+      command,
+
+      async handler(interaction) {
+        const commandGroup = interaction.options.getSubcommandGroup(
+          true,
+        ) as StatType;
+        const player = await resolvePlayerFromCommand(interaction);
+        const period = resolvePeriodFromCommand(player.region, interaction);
+        const tankIdRaw = interaction.options.getString('tank')!;
+        const tankId =
+          commandGroup === 'tank' ? await resolveTankId(tankIdRaw) : null;
+        const start = interaction.options.getInteger('start');
+        const end = interaction.options.getInteger('end');
+        const { nickname } = (
+          await getWargamingResponse<AccountInfo>(
+            `https://api.wotblitz.${player.region}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
+          )
+        )[player.id];
+        const path = interactionToURL(interaction, {
+          ...player,
+          tankId,
+          start,
+          end,
+        });
+
+        return [
+          await evolution(commandGroup, period, player, tankId),
+          primaryButton(path, 'Refresh'),
+          // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
+          linkButton(
+            `https://www.blitzstars.com/player/${player.region}/${nickname}${
+              commandGroup === 'tank' ? `/tank/${tankId!}` : ''
+            }`,
+            'BlitzStars',
+          ),
+        ];
+      },
+
+      autocomplete: (interaction) => {
+        autocompleteUsername(interaction);
+        autocompleteTanks(interaction);
+      },
+
+      async button(interaction) {
+        const url = new URL(`${CYCLIC_API}/${interaction.customId}`);
+        const path = url.pathname.split('/').filter(Boolean);
+        const commandGroup = path[1] as StatType;
+        const player = await resolvePlayerFromButton(interaction);
+        const period = resolvePeriodFromButton(player.region, interaction);
+
+        return await evolution(
+          commandGroup,
+          period,
+          player,
+          parseInt(url.searchParams.get('tankId')!),
+        );
+      },
+    });
   },
-} satisfies CommandRegistry;
+);

src/commands/fullStats.tsx

@@ -0,0 +1,114 @@
+import { SlashCommandBuilder } from 'discord.js';
+import { TreeTypeString } from '../components/Tanks';
+import { CYCLIC_API } from '../constants/cyclic';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import resolveTankId from '../core/blitz/resolveTankId';
+import addStatTypeSubCommandGroups from '../core/discord/addStatTypeSubCommandGroups';
+import autocompleteTanks from '../core/discord/autocompleteTanks';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import interactionToURL from '../core/discord/interactionToURL';
+import linkButton from '../core/discord/linkButton';
+import primaryButton from '../core/discord/primaryButton';
+import resolvePeriodFromButton from '../core/discord/resolvePeriodFromButton';
+import resolvePeriodFromCommand from '../core/discord/resolvePeriodFromCommand';
+import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistryRaw } from '../events/interactionCreate';
+import fullStats from '../renderers/fullStats';
+import { MultiTankFilters, StatType } from '../renderers/stats';
+import { AccountInfo } from '../types/accountInfo';
+
+export const fullStatsCommand = new Promise<CommandRegistryRaw>(
+  async (resolve) => {
+    const command = await addStatTypeSubCommandGroups(
+      new SlashCommandBuilder()
+        .setName('full-stats')
+        .setDescription('Full in-game statistics'),
+    );
+
+    resolve({
+      inProduction: true,
+      inPublic: true,
+
+      command,
+
+      async handler(interaction) {
+        const commandGroup = interaction.options.getSubcommandGroup(
+          true,
+        ) as StatType;
+        const player = await resolvePlayerFromCommand(interaction);
+        const resolvedPeriod = resolvePeriodFromCommand(
+          player.region,
+          interaction,
+        );
+        const period = interaction.options.getString('period');
+        const tankIdRaw = interaction.options.getString('tank')!;
+        const tankId =
+          commandGroup === 'tank' ? await resolveTankId(tankIdRaw) : null;
+        const start = interaction.options.getInteger('start');
+        const end = interaction.options.getInteger('end');
+        const path = interactionToURL(interaction, {
+          ...player,
+          tankId,
+          start,
+          end,
+          period,
+        });
+        const { nickname } = (
+          await getWargamingResponse<AccountInfo>(
+            `https://api.wotblitz.${player.region}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
+          )
+        )[player.id];
+
+        const tierOption = interaction.options.getString('tier');
+
+        return [
+          await fullStats(
+            commandGroup,
+            resolvedPeriod,
+            player,
+            commandGroup === 'tank'
+              ? tankId
+              : commandGroup === 'multi-tank'
+              ? ({
+                  'tank-type':
+                    interaction.options.getString('tank-type') ?? undefined,
+                  nation: interaction.options.getString('nation') ?? undefined,
+                  tier: tierOption ? parseInt(tierOption) : undefined,
+                  'tree-type': (interaction.options.getString('tree-type') ??
+                    undefined) as TreeTypeString | undefined,
+                } satisfies Partial<MultiTankFilters>)
+              : null,
+          ),
+          primaryButton(path, 'Refresh'),
+          // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
+          linkButton(
+            `https://www.blitzstars.com/player/${player.region}/${nickname}`,
+            'BlitzStars',
+          ),
+        ];
+      },
+
+      autocomplete: (interaction) => {
+        autocompleteUsername(interaction);
+        autocompleteTanks(interaction);
+      },
+
+      async button(interaction) {
+        const url = new URL(`${CYCLIC_API}/${interaction.customId}`);
+        const path = url.pathname.split('/').filter(Boolean);
+        const commandGroup = path[1] as StatType;
+        const player = await resolvePlayerFromButton(interaction);
+        const period = resolvePeriodFromButton(player.region, interaction);
+
+        return await fullStats(
+          commandGroup,
+          period,
+          player,
+          parseInt(url.searchParams.get('tankId')!),
+        );
+      },
+    });
+  },
+);

src/commands/help.ts

@@ -1,36 +1,66 @@
-import { SlashCommandBuilder } from 'discord.js';
-import discord from '../../discord.json' assert { type: 'json' };
-import { client } from '../bot.js';
-import embedInfo from '../core/discord/embedInfo.js';
 import {
-  CommandRegistry,
-  guildCommands,
-  publicCommands,
-} from '../events/interactionCreate/index.js';
+  SlashCommandBuilder,
+  SlashCommandSubcommandsOnlyBuilder,
+} from 'discord.js';
+import { COMMANDS_RAW, CommandRegistry } from '../events/interactionCreate';
 
-export default {
+const RAW_PATH = `https://raw.githubusercontent.com/tresabhi/blitzkrieg/main/docs/`;
+const DOCS = {
+  permissions: 'guide/permissions',
+  embeds: 'guide/embeds',
+  about: 'guide/about',
+  invite: 'guide/invite',
+  timezones: 'guide/timezones',
+};
+const DOC_DESCRIPTIONS: Record<keyof typeof DOCS, string> = {
+  permissions: 'The permissions needed for the bot to function',
+  embeds: 'How embeds work',
+  about: 'About the bot',
+  invite: 'How to invite the bot',
+  timezones: 'How Blitzkrieg infers and uses your timezone',
+};
+
+function addDocsSubcommands(option: SlashCommandSubcommandsOnlyBuilder) {
+  Object.entries(DOC_DESCRIPTIONS).forEach(([key, value]) => {
+    option.addSubcommand((sub) => sub.setName(key).setDescription(value));
+  });
+
+  return option;
+}
+
+export const helpCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
-  command: new SlashCommandBuilder()
-    .setName('help')
-    .setDescription('All the help you need about the bot'),
+  command: addDocsSubcommands(
+    new SlashCommandBuilder()
+      .setName('help')
+      .setDescription('All the help you need about the bot')
+      .addSubcommand((option) =>
+        option
+          .setName('commands')
+          .setDescription('List of all commands and their descriptions'),
+      ),
+  ),
 
-  handler(interaction) {
-    return embedInfo(
-      `${client.user?.username} help`,
-      `**About**\n${
-        client.user?.username
-      } automates many mundane tasks and provide statistics in numerous flexible ways.\n\nMade by TresAbhi from the Skilled [SKLLD] clan.\nGitHub: https://github.com/tresabhi/blitzkrieg\nDiscord server: https://discord.gg/nDt7AjGJQH\nSkilled server: https://discord.gg/ZPvcEG7DS8\n\n**Commands**\n${(interaction.guildId ===
-      discord.sklld_guild_id
-        ? [...guildCommands, ...publicCommands]
-        : publicCommands
+  async handler(interaction) {
+    const subcommand = interaction.options.getSubcommand();
+
+    if (subcommand === 'commands') {
+      return `# Commands\n\nBlitzkrieg offers the following commands:\n\n${(
+        await Promise.all(COMMANDS_RAW)
       )
-        .map((command) => `**/${command.name}**: ${command.description}`)
-        .join(
-          '\n',
-        )}\n\n*I am a new bot; I may make mistakes and go offline unexpectedly from time to time.*`,
-    );
+        .filter((registry) => registry.inPublic && registry.inProduction)
+        .map(
+          (registry) =>
+            `- \`/${registry.command.name}\`: ${registry.command.description}`,
+        )
+        .join('\n')}`;
+    }
+
+    const url = `${RAW_PATH}${DOCS[subcommand as keyof typeof DOCS]}.md`;
+    const content = fetch(url).then((response) => response.text());
+
+    return content;
   },
-} satisfies CommandRegistry;
+};

src/commands/inactive.tsx

@@ -1,24 +1,21 @@
 import { SlashCommandBuilder } from 'discord.js';
-import GenericStats from '../components/GenericStats/index.js';
-import NoData, { NoDataType } from '../components/NoData.js';
-import PoweredBy, { PoweredByType } from '../components/PoweredBy.js';
-import TitleBar from '../components/TitleBar.js';
-import Wrapper from '../components/Wrapper.js';
-import { BLITZ_SERVERS } from '../constants/servers.js';
-import getBlitzClan from '../core/blitz/getBlitzClan.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import addClanChoices from '../core/discord/addClanChoices.js';
-import autocompleteClan from '../core/discord/autocompleteClan.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountInfo } from '../types/accountInfo.js';
-import { ClanInfo } from '../types/clanInfo.js';
+import GenericStats from '../components/GenericStats';
+import NoData, { NoDataType } from '../components/NoData';
+import TitleBar from '../components/TitleBar';
+import Wrapper from '../components/Wrapper';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import addClanChoices from '../core/discord/addClanChoices';
+import autocompleteClan from '../core/discord/autocompleteClan';
+import resolveClanFromCommand from '../core/discord/resolveClanFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountInfo } from '../types/accountInfo';
+import { ClanInfo } from '../types/clanInfo';
 
 const DEFAULT_THRESHOLD = 7;
 
-export default {
+export const inactiveCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
@@ -35,21 +32,20 @@ export default {
     ),
 
   async handler(interaction) {
-    const clanName = interaction.options.getString('clan')!;
-    const { server, id } = await getBlitzClan(clanName);
+    const { region, id } = await resolveClanFromCommand(interaction);
     const threshold =
       interaction.options.getNumber('threshold')! ?? DEFAULT_THRESHOLD;
     const time = new Date().getTime() / 1000;
     const clanData = (
       await getWargamingResponse<ClanInfo>(
-        `https://api.wotblitz.${server}/wotb/clans/info/?application_id=${WARGAMING_APPLICATION_ID}&clan_id=${id}`,
+        `https://api.wotblitz.${region}/wotb/clans/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&clan_id=${id}`,
       )
     )[id];
     const memberIds = clanData.members_ids;
     const accounts = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${memberIds.join(
-        ',',
-      )}`,
+      `https://api.wotblitz.${region}/wotb/account/info/?application_id=${
+        secrets.WARGAMING_APPLICATION_ID
+      }&account_id=${memberIds.join(',')}`,
     );
     const inactive = memberIds
       .map((memberId) => {
@@ -69,20 +65,15 @@ export default {
       <Wrapper>
         <TitleBar
           name={clanData.name}
-          nameDiscriminator="(Inactivity)"
           image={`https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clanData.emblem_set_id}.png`}
-          description={`${threshold}+ Days • ${new Date().toDateString()} • ${
-            BLITZ_SERVERS[server]
-          }`}
+          description={`Inactive for ${threshold}+ Days • ${new Date().toDateString()}`}
         />
 
         {!hasInactiveMembers && <NoData type={NoDataType.PlayersInPeriod} />}
         {hasInactiveMembers && <GenericStats stats={inactive} />}
-
-        <PoweredBy type={PoweredByType.Wargaming} />
       </Wrapper>
     );
   },
 
   autocomplete: autocompleteClan,
-} satisfies CommandRegistry;
+};

src/commands/ownedTanks.tsx

@@ -0,0 +1,174 @@
+import { SlashCommandBuilder } from 'discord.js';
+import NoData, { NoDataType } from '../components/NoData';
+import * as Tanks from '../components/Tanks';
+import TitleBar from '../components/TitleBar';
+import Wrapper from '../components/Wrapper';
+import getTankStats from '../core/blitz/getTankStats';
+import getTreeType from '../core/blitz/getTreeType';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import resolveTankName from '../core/blitz/resolveTankName';
+import {
+  TIER_ROMAN_NUMERALS,
+  TankopediaEntry,
+  Tier,
+  tankopedia,
+  tankopediaInfo,
+} from '../core/blitz/tankopedia';
+import addTierChoices from '../core/discord/addTierChoices';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountInfo } from '../types/accountInfo';
+import { PlayerClanData } from '../types/playerClanData';
+
+const COMP_TANKS = [
+  // light tanks
+  24321, // t-100 lt
+  20257, // sheridan
+  3649, // bat chat
+  19537, // vickers
+
+  // heavy tanks
+  6145, // is-4
+  7169, // is-7
+  10785, // t110e5
+  12161, // strvk
+  4481, // kranvagn
+  22817, // m6 yoh
+  6225, // fv215b
+  5425, // wz 113
+  7297, // 60tp
+  58641, // vk 72
+  6753, // type 71
+];
+
+export const ownedTanksCommand: CommandRegistry = {
+  inProduction: true,
+  inPublic: true,
+
+  command: new SlashCommandBuilder()
+    .setName('owned-tanks')
+    .setDescription("Shows a player's owned tanks")
+    .addStringOption(addTierChoices)
+    .addStringOption(addUsernameChoices),
+
+  async handler(interaction) {
+    const tier = Number(interaction.options.getString('tier'));
+    const account = await resolvePlayerFromCommand(interaction);
+    const { id, region: server } = account;
+    const accountInfo = await getWargamingResponse<AccountInfo>(
+      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
+    );
+    const tankStats = await getTankStats(server, id);
+    const filteredTanks = (
+      await Promise.all(
+        tankStats.map(async (tankData) => ({
+          tankopedia: (await tankopedia)[tankData.tank_id]!,
+          tank_id: tankData.tank_id,
+        })),
+      )
+    ).filter((tank) => tank.tankopedia?.tier === tier);
+    const clanData = await getWargamingResponse<PlayerClanData>(
+      `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
+    );
+    const groupedTanks: Record<string, TankopediaEntry[]> = {};
+    const nations: string[] = [];
+
+    filteredTanks.forEach((tank) => {
+      if (groupedTanks[tank.tankopedia.nation] === undefined) {
+        groupedTanks[tank.tankopedia.nation] = [tank.tankopedia];
+        nations.push(tank.tankopedia.nation);
+      } else {
+        groupedTanks[tank.tankopedia.nation].push(tank.tankopedia);
+      }
+    });
+
+    nations.sort();
+
+    return (
+      <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={`Tier ${
+            TIER_ROMAN_NUMERALS[tier as Tier]
+          } tanks • ${new Date().toDateString()}`}
+        />
+
+        {filteredTanks.length === 0 && <NoData type={NoDataType.TanksFound} />}
+
+        {filteredTanks.length > 0 &&
+          (await Promise.all(
+            nations.map(async (nation) => {
+              const tanks = groupedTanks[nation];
+              const leftColumnSize = Math.ceil(tanks.length / 2);
+              const leftColumn = tanks.slice(0, leftColumnSize);
+              const rightColumn = tanks.slice(leftColumnSize);
+
+              return (
+                <Tanks.Root>
+                  <Tanks.Title>
+                    {(await tankopediaInfo).vehicle_nations[nation]}
+                  </Tanks.Title>
+
+                  <Tanks.Row>
+                    <Tanks.Column>
+                      {await Promise.all(
+                        leftColumn.map(async (tank) => (
+                          <Tanks.Item
+                            key={tank.tank_id}
+                            name={await resolveTankName(tank.tank_id)}
+                            tankType={tank.type}
+                            image={tank.images?.normal}
+                            treeType={await getTreeType(tank.tank_id)}
+                          />
+                        )),
+                      )}
+                    </Tanks.Column>
+                    <Tanks.Column>
+                      {await Promise.all(
+                        rightColumn.map(async (tank) => (
+                          <Tanks.Item
+                            key={tank.tank_id}
+                            name={await resolveTankName(tank.tank_id)}
+                            tankType={tank.type}
+                            image={tank.images?.normal}
+                            treeType={await getTreeType(tank.tank_id)}
+                          />
+                        )),
+                      )}
+                    </Tanks.Column>
+                  </Tanks.Row>
+                </Tanks.Root>
+              );
+            }),
+          ))}
+      </Wrapper>
+    );
+  },
+
+  autocomplete: autocompleteUsername,
+};
+
+// TODO: make this work in the future
+// console.log('Caching tank images...');
+// TANKS.then((tanks) =>
+//   jsxToSvg(
+//     <div style={{ display: 'flex' }}>
+//       {tanks.map(({ images, tank_id }) => {
+//         return (
+//           images.normal && <img key={tank_id} src={images.normal} width={0} />
+//         );
+//       })}
+//     </div>,
+//   ),
+// ).then(() => console.log('Cached tank images'));

src/commands/ownedtanks.tsx

@@ -1,124 +0,0 @@
-import { SlashCommandBuilder } from 'discord.js';
-import NoData, { NoDataType } from '../components/NoData.js';
-import PoweredBy, { PoweredByType } from '../components/PoweredBy.js';
-import * as Tanks from '../components/Tanks/index.js';
-import TitleBar from '../components/TitleBar.js';
-import Wrapper from '../components/Wrapper.js';
-import { BLITZ_SERVERS } from '../constants/servers.js';
-import getTankStats from '../core/blitz/getTankStats.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import {
-  TIER_ROMAN_NUMERALS,
-  Tier,
-  tankopedia,
-} from '../core/blitz/tankopedia.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountInfo } from '../types/accountInfo.js';
-import { PlayerClanData } from '../types/playerClanData.js';
-
-const COMP_TANKS = [
-  // light tanks
-  24321, // t-100 lt
-  20257, // sheridan
-  3649, // bat chat
-  19537, // vickers
-
-  // heavy tanks
-  6145, // is-4
-  7169, // is-7
-  10785, // t110e5
-  12161, // strvk
-  4481, // kranvagn
-  22817, // m6 yoh
-  6225, // fv215b
-  5425, // wz 113
-  7297, // 60tp
-  58641, // vk 72
-  6753, // type 71
-];
-
-export default {
-  inProduction: true,
-  inDevelopment: false,
-  inPublic: true,
-
-  command: new SlashCommandBuilder()
-    .setName('ownedtanks')
-    .setDescription("Shows a player's owned tanks")
-    .addStringOption((option) =>
-      option
-        .setName('tier')
-        .setDescription('The tier you want to see')
-        .setChoices(
-          { name: 'Tier I', value: '1' },
-          { name: 'Tier II', value: '2' },
-          { name: 'Tier III', value: '3' },
-          { name: 'Tier IV', value: '4' },
-          { name: 'Tier V', value: '5' },
-          { name: 'Tier VI', value: '6' },
-          { name: 'Tier VII', value: '7' },
-          { name: 'Tier VIII', value: '8' },
-          { name: 'Tier IX', value: '9' },
-          { name: 'Tier X', value: '10' },
-        )
-        .setRequired(true),
-    )
-    .addStringOption(addUsernameChoices),
-
-  async handler(interaction) {
-    const tier = Number(interaction.options.getString('tier'));
-    const account = await resolvePlayerFromCommand(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(server, id);
-    const tanks = tankStats
-      .map((tankData) => tankopedia[tankData.tank_id])
-      .filter((tank) => tank?.tier === tier);
-    const clanData = await getWargamingResponse<PlayerClanData>(
-      `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
-    );
-
-    return (
-      <Wrapper>
-        {/* TODO: integrate some of these into title bar */}
-        <TitleBar
-          name={accountInfo[id].nickname}
-          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`
-              : undefined
-          }
-          description={`Owned tanks • ${new Date().toDateString()} • ${
-            BLITZ_SERVERS[server]
-          }`}
-        />
-
-        {tanks.length === 0 && <NoData type={NoDataType.TanksFound} />}
-
-        {tanks.length > 0 && (
-          <Tanks.Root>
-            {tanks.map((tank) => (
-              <Tanks.Item
-                key={tank.tank_id}
-                name={tank.name}
-                type={tank.type}
-                icon={tank.images.normal}
-              />
-            ))}
-          </Tanks.Root>
-        )}
-
-        <PoweredBy type={PoweredByType.Wargaming} />
-      </Wrapper>
-    );
-  },
-
-  autocomplete: autocompleteUsername,
-} satisfies CommandRegistry;

src/commands/ping.ts

@@ -1,9 +1,8 @@
 import { SlashCommandBuilder } from 'discord.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
+import { CommandRegistry } from '../events/interactionCreate';
 
-export default {
+export const pingCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
   handlesInteraction: true,
 
@@ -30,4 +29,4 @@ export default {
     const executionTime = Date.now() - executionStart;
     interaction.editReply(`Pong 🏓 - ${executionTime}ms`);
   },
-} satisfies CommandRegistry<true>;
+};

src/commands/playerAchievements.ts

@@ -1,28 +1,25 @@
 import { SlashCommandBuilder } from 'discord.js';
 import { startCase } from 'lodash';
 import markdownEscape from 'markdown-escape';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import embedInfo from '../core/discord/embedInfo.js';
-import markdownTable, {
-  TableInputEntry,
-} from '../core/discord/markdownTable.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountAchievements } from '../types/accountAchievements.js';
-import { AccountInfo } from '../types/accountInfo.js';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import embedInfo from '../core/discord/embedInfo';
+import markdownTable, { TableInputEntry } from '../core/discord/markdownTable';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountAchievements } from '../types/accountAchievements';
+import { AccountInfo } from '../types/accountInfo';
 
 type SortBy = 'name' | 'count';
 
-export default {
+export const playerAchievementsCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName('playerachievements')
+    .setName('player-achievements')
     .setDescription("All the player's achievements")
     .addStringOption(addUsernameChoices)
     .addStringOption((option) =>
@@ -38,13 +35,13 @@ export default {
   async handler(interaction) {
     const sortBy = (interaction.options.getString('sort') ?? 'name') as SortBy;
     const account = await resolvePlayerFromCommand(interaction);
-    const { id, server } = account;
+    const { id, region: server } = account;
     const accounts = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
     );
     const accountsAchievements =
       await getWargamingResponse<AccountAchievements>(
-        `https://api.wotblitz.${server}/wotb/account/achievements/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+        `https://api.wotblitz.${server}/wotb/account/achievements/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
       );
     const accountAchievements = accountsAchievements[id];
     const compound = {
@@ -75,4 +72,4 @@ export default {
   },
 
   autocomplete: autocompleteUsername,
-} satisfies CommandRegistry;
+};

src/commands/playerInfo.ts

@@ -1,30 +1,29 @@
 import { SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import embedInfo from '../core/discord/embedInfo.js';
-import markdownTable from '../core/discord/markdownTable.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountInfo } from '../types/accountInfo.js';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import embedInfo from '../core/discord/embedInfo';
+import markdownTable from '../core/discord/markdownTable';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountInfo } from '../types/accountInfo';
 
-export default {
+export const playerInfoCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName('playerinfo')
+    .setName('player-info')
     .setDescription('Basic information about a player')
     .addStringOption(addUsernameChoices),
 
   async handler(interaction) {
     const account = await resolvePlayerFromCommand(interaction);
-    const { id, server } = account;
+    const { id, region: server } = account;
     const accounts = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
     );
     const accountInfo = accounts[id];
 
@@ -57,4 +56,4 @@ export default {
   },
 
   autocomplete: autocompleteUsername,
-} satisfies CommandRegistry;
+};

src/commands/ratings.tsx

@@ -0,0 +1,544 @@
+import {
+  APIApplicationCommandOptionChoice,
+  SlashCommandBuilder,
+  SlashCommandSubcommandBuilder,
+  SlashCommandSubcommandGroupBuilder,
+} from 'discord.js';
+import { BlitzkriegRatingsLeaderboard } from '../../scripts/buildRatingsLeaderboard';
+import * as Leaderboard from '../components/Leaderboard';
+import TitleBar from '../components/TitleBar';
+import Wrapper from '../components/Wrapper';
+import { REGION_NAMES_SHORT, Region } from '../constants/regions';
+import getArchivedRatingsInfo from '../core/blitz/getArchivedRatingsInfo';
+import getRatingsInfo from '../core/blitz/getRatingsInfo';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import regionToRegionSubdomain from '../core/blitz/regionToRegionSubdomain';
+import getMidnightLeaderboard, {
+  DATABASE_REPO,
+} from '../core/database/getMidnightLeaderboard';
+import addRegionChoices from '../core/discord/addRegionChoices';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { octokit } from '../core/express/octokit';
+import { secrets } from '../core/node/secrets';
+import throwError from '../core/node/throwError';
+import { CommandRegistryRaw } from '../events/interactionCreate';
+import { AccountInfo } from '../types/accountInfo';
+import { PlayerClanData } from '../types/playerClanData';
+
+export interface RatingsPlayer {
+  spa_id: number;
+  mmr: number;
+  season_number: number;
+  calibrationBattlesLeft: number;
+  number: number;
+  percentile: number;
+  skip: boolean;
+  updated_at: string;
+  score: number;
+  nickname: string;
+  clan_tag: string;
+}
+
+export interface LeagueTop {
+  result: RatingsPlayer[];
+}
+
+export type RatingsReward = {
+  from_position: number;
+  to_position: number;
+  count: number;
+} & (
+  | {
+      type: 'vehicle';
+
+      vehicle: {
+        id: number;
+        name: string;
+        nation: string;
+        subnation: string;
+        use_subnation_flag: boolean;
+        type_slug: string;
+        level: number;
+        roman_level: string;
+        user_string: string;
+        image_url: string;
+        preview_url: string;
+        is_premium: boolean;
+        is_collectible: boolean;
+      };
+    }
+  | {
+      type: 'stuff';
+
+      stuff: {
+        name: string;
+        count: number;
+        title: string;
+        image_url: string;
+        type: string;
+
+        sizes: {};
+      };
+    }
+);
+
+export interface RatingsLeague {
+  title: string;
+  small_icon: string;
+  big_icon: string;
+  background: string;
+  index: number;
+  percentile: number;
+}
+
+export type RatingsInfo =
+  | {
+      detail: undefined;
+
+      title: string;
+      icon: string | null;
+      start_at: string;
+      finish_at: string;
+      current_season: number;
+      updated_at: string;
+      count: number;
+
+      rewards: RatingsReward[];
+      leagues: RatingsLeague[];
+    }
+  | { detail: { error: string } };
+
+export interface RatingsNeighbors {
+  neighbors: RatingsPlayer[];
+}
+
+const LEAGUES = [
+  { name: 'Diamond', minScore: 5000 },
+  { name: 'Platinum', minScore: 4000 },
+  { name: 'Gold', minScore: 3000 },
+  { name: 'Silver', minScore: 2000 },
+  { name: 'Bronze', minScore: 0 },
+];
+
+function addSubcommands(
+  option: SlashCommandSubcommandGroupBuilder,
+  addOptions = (option: SlashCommandSubcommandBuilder) => option,
+) {
+  return option
+    .addSubcommand((option) =>
+      addOptions(
+        option
+          .setName('neighbours')
+          .setDescription('Your position and neighbours'),
+      )
+        .addStringOption(addUsernameChoices)
+        .addIntegerOption((option) =>
+          option
+            .setName('limit')
+            .setDescription('How many neighbours to display (default: 10)')
+            .setRequired(false)
+            .setMinValue(5)
+            .setMaxValue(30),
+        ),
+    )
+    .addSubcommand((option) =>
+      addOptions(option.setName('league').setDescription('Top league players'))
+        .addStringOption((option) =>
+          option
+            .setName('league')
+            .setDescription('The league to display')
+            .addChoices(
+              ...LEAGUES.map(
+                ({ name }, value) =>
+                  ({
+                    name,
+                    value: `${value}`,
+                  }) satisfies APIApplicationCommandOptionChoice<string>,
+              ),
+            )
+            .setRequired(true),
+        )
+        .addStringOption(addRegionChoices)
+        .addIntegerOption((option) =>
+          option
+            .setName('limit')
+            .setDescription('How many rows to display (default: 10)')
+            .setRequired(false)
+            .setMinValue(5)
+            .setMaxValue(30),
+        ),
+    );
+}
+
+export const ratingsCommand = new Promise<CommandRegistryRaw>(
+  async (resolve) => {
+    const seasonChoices = await octokit.repos
+      .getContent({
+        ...DATABASE_REPO,
+        path: 'com/ratings',
+      })
+      .then(({ data }) => {
+        if (!Array.isArray(data)) {
+          throw throwError('Archived ratings data is malformed');
+        }
+        return data.map(
+          (folder) =>
+            ({
+              name: `Season ${folder.name}`,
+              value: folder.name,
+            }) satisfies APIApplicationCommandOptionChoice<string>,
+        );
+      });
+
+    const command = new SlashCommandBuilder()
+      .setName('ratings')
+      .setDescription('Ratings battles statistics')
+      .addSubcommandGroup((option) =>
+        addSubcommands(
+          option.setName('archive').setDescription('Any previous season'),
+          (option) =>
+            option.addStringOption((option) =>
+              option
+                .setName('season')
+                .setDescription('The season number')
+                .setChoices(...seasonChoices)
+                .setRequired(true),
+            ),
+        ),
+      )
+      .addSubcommandGroup((option) =>
+        addSubcommands(
+          option
+            .setName('current')
+            .setDescription('The current running Ratings season'),
+        ),
+      );
+
+    resolve({
+      inProduction: true,
+      inPublic: true,
+
+      command,
+
+      async handler(interaction) {
+        interface SimplifiedPlayer {
+          id: number;
+          score: number;
+          position: number;
+          clan: string | undefined;
+          nickname: string;
+        }
+
+        const subcommandGroup = interaction.options.getSubcommandGroup(true) as
+          | 'archive'
+          | 'current';
+        const subcommand = interaction.options.getSubcommand(true) as
+          | 'league'
+          | 'neighbours';
+        const limit = interaction.options.getInteger('limit') ?? 10;
+        const seasonOption = interaction.options.getString('season');
+        const season = seasonOption ? parseInt(seasonOption) : undefined;
+        let titleName: string;
+        let titleImage: string | undefined;
+        let titleNameDiscriminator: string | undefined;
+        let titleDescription: string;
+        let playersBefore: number;
+        let playersAfter: number;
+        let players: SimplifiedPlayer[] | undefined;
+        let midnightLeaderboard: BlitzkriegRatingsLeaderboard | undefined;
+        let playerId: number | undefined;
+        let regionRatingsInfo: RatingsInfo;
+
+        if (subcommand === 'league') {
+          const leagueIndex = parseInt(
+            interaction.options.getString('league')!,
+          );
+          const region = interaction.options.getString('region') as Region;
+          regionRatingsInfo = await (subcommandGroup === 'current'
+            ? getRatingsInfo(region)
+            : getArchivedRatingsInfo(season!, region));
+          const regionSubdomain = regionToRegionSubdomain(region);
+          const result =
+            subcommandGroup === 'current'
+              ? regionRatingsInfo.detail === undefined
+                ? await fetch(
+                    `https://${regionSubdomain}.wotblitz.com/en/api/rating-leaderboards/league/${leagueIndex}/top/`,
+                  )
+                    .then((response) => response.json() as Promise<LeagueTop>)
+                    .then(async ({ result }) =>
+                      result.slice(0, limit).map(
+                        (player) =>
+                          ({
+                            id: player.spa_id,
+                            score: player.score,
+                            position: player.number,
+                            clan: player.clan_tag,
+                            nickname: player.nickname,
+                          }) satisfies SimplifiedPlayer,
+                      ),
+                    )
+                : undefined
+              : await octokit.repos
+                  .getContent({
+                    ...DATABASE_REPO,
+                    path: `${region}/ratings/${season}/latest.json`,
+                  })
+                  .then(async ({ data }) => {
+                    if (Array.isArray(data) || data.type !== 'file') {
+                      throw throwError('Archived ratings data is malformed');
+                    }
+
+                    const players = (await fetch(data.download_url!).then(
+                      (response) => response.json(),
+                    )) as BlitzkriegRatingsLeaderboard;
+                    const firstPlayerIndex =
+                      leagueIndex === 0
+                        ? 0
+                        : players.findIndex(
+                            (player) =>
+                              player.score < LEAGUES[leagueIndex - 1].minScore,
+                          );
+                    const lastPlayerIndex = firstPlayerIndex + limit - 1;
+                    const trimmed = players.slice(
+                      firstPlayerIndex,
+                      lastPlayerIndex + 1,
+                    );
+                    const ids = trimmed.map((player) => player.id).join(',');
+                    const clanData = await getWargamingResponse<PlayerClanData>(
+                      `https://api.wotblitz.${region}/wotb/clans/accountinfo/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${ids}&extra=clan`,
+                    );
+
+                    return trimmed.map(
+                      (player, index) =>
+                        ({
+                          id: player.id,
+                          score: player.score,
+                          position: firstPlayerIndex + index + 1,
+                          clan: clanData[player.id]!.clan?.tag,
+                          nickname: clanData[player.id]!.account_name,
+                        }) satisfies SimplifiedPlayer,
+                    );
+                  });
+          const leagueInfo =
+            regionRatingsInfo.detail === undefined
+              ? regionRatingsInfo.leagues[leagueIndex]
+              : undefined;
+          midnightLeaderboard =
+            subcommandGroup === 'current'
+              ? regionRatingsInfo.detail === undefined
+                ? await getMidnightLeaderboard(
+                    region,
+                    regionRatingsInfo.current_season,
+                  )
+                : undefined
+              : await getMidnightLeaderboard(region, season!);
+
+          players = result;
+          playersBefore = result ? result[0].position - 1 : 0;
+          playersAfter =
+            regionRatingsInfo.detail === undefined && result !== undefined
+              ? regionRatingsInfo.count - result[result.length - 1].position
+              : 0;
+          titleName = `${
+            leagueInfo ? leagueInfo.title : 'No Ongoing Season'
+          } - ${REGION_NAMES_SHORT[region]}`;
+          titleImage = leagueInfo
+            ? leagueInfo.big_icon.startsWith('http')
+              ? leagueInfo.big_icon
+              : `https:${leagueInfo.big_icon}`
+            : undefined;
+          titleDescription = `Top ${limit} players`;
+        } else {
+          const { region, id } = await resolvePlayerFromCommand(interaction);
+          regionRatingsInfo =
+            subcommandGroup === 'current'
+              ? await getRatingsInfo(region)
+              : await octokit.repos
+                  .getContent({
+                    ...DATABASE_REPO,
+                    path: `${region}/ratings/${season}/info.json`,
+                  })
+                  .then(async ({ data }) => {
+                    if (Array.isArray(data) || data.type !== 'file') {
+                      throw throwError('Archived ratings info is malformed');
+                    }
+
+                    const response = fetch(data.download_url!);
+                    return (await response.then((response) =>
+                      response.json(),
+                    )) as RatingsInfo;
+                  });
+          const accountInfo = await getWargamingResponse<AccountInfo>(
+            `https://api.wotblitz.${region}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}`,
+          );
+          const clan = (
+            await getWargamingResponse<PlayerClanData>(
+              `https://api.wotblitz.${region}/wotb/clans/accountinfo/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
+            )
+          )[id]?.clan;
+          const regionSubdomain = regionToRegionSubdomain(region);
+          const neighbors =
+            subcommandGroup === 'current'
+              ? regionRatingsInfo.detail === undefined
+                ? await fetch(
+                    `https://${regionSubdomain}.wotblitz.com/en/api/rating-leaderboards/user/${id}/?neighbors=${Math.round(
+                      limit / 2,
+                    )}`,
+                  )
+                    .then(
+                      (response) =>
+                        response.json() as Promise<RatingsNeighbors>,
+                    )
+                    .then((players) =>
+                      players.neighbors.map(
+                        (player) =>
+                          ({
+                            id: player.spa_id,
+                            position: player.number,
+                            score: player.score,
+                            clan: player.clan_tag,
+                            nickname: player.nickname,
+                          }) satisfies SimplifiedPlayer,
+                      ),
+                    )
+                : undefined
+              : await octokit.repos
+                  .getContent({
+                    ...DATABASE_REPO,
+                    path: `${region}/ratings/${season}/latest.json`,
+                  })
+                  .then(async ({ data }) => {
+                    if (Array.isArray(data) || data.type !== 'file') {
+                      throw throwError(
+                        'Archived ratings latest data is malformed',
+                      );
+                    }
+
+                    const response = fetch(data.download_url!);
+                    const players = (await response.then((response) =>
+                      response.json(),
+                    )) as BlitzkriegRatingsLeaderboard;
+                    const playerIndex = players.findIndex(
+                      (player) => player.id === id,
+                    );
+
+                    if (playerIndex === -1) {
+                      throw throwError(
+                        `${accountInfo[id].nickname} didn't player ratings in season ${season}`,
+                        'This player did not participate in this season or did not get past calibration.',
+                      );
+                    }
+
+                    const halfRange = Math.round(limit / 2);
+                    const trimmed = players.slice(
+                      playerIndex - halfRange,
+                      playerIndex + halfRange + 1,
+                    );
+                    const ids = trimmed.map((player) => player.id).join(',');
+                    const clanData = await getWargamingResponse<PlayerClanData>(
+                      `https://api.wotblitz.${region}/wotb/clans/accountinfo/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${ids}&extra=clan`,
+                    );
+
+                    return trimmed.map((player, index) => ({
+                      id: player.id,
+                      score: player.score,
+                      position: playerIndex + index + 1,
+                      clan: clanData[player.id]!.clan?.tag,
+                      nickname: clanData[player.id]!.account_name,
+                    }));
+                  });
+          midnightLeaderboard =
+            subcommandGroup === 'current'
+              ? regionRatingsInfo.detail === undefined
+                ? await getMidnightLeaderboard(
+                    region,
+                    regionRatingsInfo.current_season,
+                  )
+                : undefined
+              : await getMidnightLeaderboard(region, season!);
+
+          if (clan && neighbors) titleNameDiscriminator = `[${clan.tag}]`;
+
+          players = neighbors;
+          titleImage = neighbors
+            ? clan
+              ? `https://wotblitz-gc.gcdn.co/icons/clanEmblems1x/clan-icon-v2-${clan.emblem_set_id}.png`
+              : undefined
+            : undefined;
+          titleName = neighbors
+            ? accountInfo[id].nickname
+            : `No Ongoing Season - ${REGION_NAMES_SHORT[region]}`;
+          titleDescription = 'Ratings neighbours';
+          playersBefore = neighbors ? neighbors[0].position - 1 : 0;
+          playersAfter =
+            regionRatingsInfo.detail === undefined
+              ? neighbors
+                ? regionRatingsInfo.count -
+                  neighbors[neighbors.length - 1].position
+                : 0
+              : 0;
+          playerId = id;
+        }
+
+        const items = players?.map((player) => {
+          const reward =
+            regionRatingsInfo.detail === undefined
+              ? regionRatingsInfo.rewards.find(
+                  (reward) =>
+                    player.position >= reward.from_position &&
+                    player.position <= reward.to_position,
+                )
+              : undefined;
+          const midnightIndex = midnightLeaderboard?.findIndex(
+            (item) => item.id === player.id,
+          );
+          const midnightScore =
+            midnightIndex === undefined
+              ? player.score
+              : midnightLeaderboard![midnightIndex].score;
+          const midnightPosition =
+            midnightIndex === undefined ? player.position : midnightIndex + 1;
+
+          return (
+            <Leaderboard.Item
+              nickname={player.nickname}
+              score={player.score}
+              position={player.position}
+              clan={player.clan}
+              reward={reward}
+              deltaScore={player.score - midnightScore}
+              deltaPosition={midnightPosition - player.position}
+              key={player.id}
+              highlight={player.id === playerId}
+            />
+          );
+        });
+
+        return (
+          <Wrapper>
+            <TitleBar
+              name={titleName}
+              image={titleImage}
+              nameDiscriminator={titleNameDiscriminator}
+              description={`${titleDescription} • ${new Date().toDateString()}`}
+            />
+
+            {items && (
+              <Leaderboard.Root>
+                {playersBefore > 0 && (
+                  <Leaderboard.Gap number={playersBefore} />
+                )}
+                {items}
+                {playersAfter > 0 && <Leaderboard.Gap number={playersAfter} />}
+              </Leaderboard.Root>
+            )}
+          </Wrapper>
+        );
+      },
+
+      autocomplete: autocompleteUsername,
+    });
+  },
+);

src/commands/searchClans.ts

@@ -1,23 +1,22 @@
 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 addClanChoices from '../core/discord/addClanChoices.js';
-import addServerChoices from '../core/discord/addServerChoices.js';
-import embedInfo from '../core/discord/embedInfo.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { ClanList } from '../types/clanList.js';
+import { REGION_NAMES, Region } from '../constants/regions';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import addClanChoices from '../core/discord/addClanChoices';
+import addRegionChoices from '../core/discord/addRegionChoices';
+import embedInfo from '../core/discord/embedInfo';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { ClanList } from '../types/clanList';
 
-export default {
+export const searchClansCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName('searchclans')
+    .setName('search-clans')
     .setDescription('Search clans')
-    .addStringOption(addServerChoices)
+    .addStringOption(addRegionChoices)
     .addStringOption((option) => addClanChoices(option).setAutocomplete(false))
     .addIntegerOption((option) =>
       option
@@ -28,15 +27,15 @@ export default {
     ),
 
   async handler(interaction) {
-    const server = interaction.options.getString('server') as BlitzServer;
+    const server = interaction.options.getString('region') as Region;
     const clan = interaction.options.getString('clan')!;
     const limit = interaction.options.getInteger('limit') ?? 25;
     const clanList = await getWargamingResponse<ClanList>(
-      `https://api.wotblitz.${server}/wotb/clans/list/?application_id=${WARGAMING_APPLICATION_ID}&search=${clan}&limit=${limit}`,
+      `https://api.wotblitz.${server}/wotb/clans/list/?application_id=${secrets.WARGAMING_APPLICATION_ID}&search=${clan}&limit=${limit}`,
     );
 
     return embedInfo(
-      `Clan search for "${markdownEscape(clan)}" in ${BLITZ_SERVERS[server]}`,
+      `Clan search for "${markdownEscape(clan)}" in ${REGION_NAMES[server]}`,
       clanList.length === 0
         ? 'No clans found.'
         : `\`\`\`\n${clanList
@@ -44,4 +43,4 @@ export default {
             .join('\n')}\n\`\`\``,
     );
   },
-} satisfies CommandRegistry;
+};

src/commands/searchPlayers.ts

@@ -1,24 +1,23 @@
 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 { usernamePattern } from '../core/blitz/listPlayers.js';
-import addServerChoices from '../core/discord/addServerChoices.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import embedInfo from '../core/discord/embedInfo.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountList } from '../types/accountList.js';
+import { REGION_NAMES, Region } from '../constants/regions';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import { usernamePattern } from '../core/blitz/listPlayers';
+import addRegionChoices from '../core/discord/addRegionChoices';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import embedInfo from '../core/discord/embedInfo';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountList } from '../types/accountList';
 
-export default {
+export const searchPlayersCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName('searchplayers')
+    .setName('search-players')
     .setDescription('Search players in a Blitz server')
-    .addStringOption(addServerChoices)
+    .addStringOption(addRegionChoices)
     .addStringOption((option) =>
       addUsernameChoices(option).setAutocomplete(false).setRequired(true),
     )
@@ -31,20 +30,20 @@ export default {
     ),
 
   async handler(interaction) {
-    const server = interaction.options.getString('server') as BlitzServer;
+    const server = interaction.options.getString('region') as Region;
     const name = interaction.options.getString('username')!;
     const limit = interaction.options.getInteger('limit') ?? 25;
     const trimmedSearch = name.trim();
     const players = usernamePattern.test(trimmedSearch)
       ? await getWargamingResponse<AccountList>(
-          `https://api.wotblitz.${server}/wotb/account/list/?application_id=${WARGAMING_APPLICATION_ID}&search=${encodeURIComponent(
-            trimmedSearch,
-          )}&limit=${limit}`,
+          `https://api.wotblitz.${server}/wotb/account/list/?application_id=${
+            secrets.WARGAMING_APPLICATION_ID
+          }&search=${encodeURIComponent(trimmedSearch)}&limit=${limit}`,
         )
       : [];
 
     return embedInfo(
-      `Player search for "${markdownEscape(name)}" in ${BLITZ_SERVERS[server]}`,
+      `Player search for "${markdownEscape(name)}" in ${REGION_NAMES[server]}`,
       `\`\`\`${
         players.length === 0
           ? 'No players found.'
@@ -52,4 +51,4 @@ export default {
       }\`\`\``,
     );
   },
-} satisfies CommandRegistry;
+};

src/commands/searchTanks.ts

@@ -1,18 +1,17 @@
 import { SlashCommandBuilder } from 'discord.js';
 import { go } from 'fuzzysort';
 import markdownEscape from 'markdown-escape';
-import { TANK_NAMES } from '../core/blitz/tankopedia.js';
-import addTankChoices from '../core/discord/addTankChoices.js';
-import embedInfo from '../core/discord/embedInfo.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
+import { TANK_NAMES_DIACRITICS } from '../core/blitz/tankopedia';
+import addTankChoices from '../core/discord/addTankChoices';
+import embedInfo from '../core/discord/embedInfo';
+import { CommandRegistry } from '../events/interactionCreate';
 
-export default {
+export const searchTanksCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
-    .setName('searchtanks')
+    .setName('search-tanks')
     .setDescription('Search tanks')
     .addStringOption((option) => addTankChoices(option).setAutocomplete(false))
     .addIntegerOption((option) =>
@@ -26,9 +25,10 @@ export default {
   async handler(interaction) {
     const tank = interaction.options.getString('tank')!;
     const limit = interaction.options.getInteger('limit') ?? 25;
-    const results = go(tank, TANK_NAMES, { limit }).map(
-      (result) => result.target,
-    );
+    const results = go(tank, await TANK_NAMES_DIACRITICS, {
+      limit,
+      keys: ['combined'],
+    }).map((result) => result.obj.original);
 
     return embedInfo(
       `Tank search for "${markdownEscape(tank)}"`,
@@ -37,4 +37,4 @@ export default {
         : `\`\`\`\n${results.join('\n')}\n\`\`\``,
     );
   },
-} satisfies CommandRegistry;
+};

src/commands/stats.tsx

@@ -1,84 +1,120 @@
 import { SlashCommandBuilder } from 'discord.js';
-import { CYCLIC_API } from '../constants/cyclic.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import resolveTankId from '../core/blitz/resolveTankId.js';
-import addStatTypeSubCommandGroups from '../core/discord/addStatTypeSubCommandGroups.js';
-import autocompleteTanks from '../core/discord/autocompleteTanks.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import interactionToURL from '../core/discord/interactionToURL.js';
-import linkButton from '../core/discord/linkButton.js';
-import primaryButton from '../core/discord/primaryButton.js';
-import resolvePeriodFromButton from '../core/discord/resolvePeriodFromButton.js';
-import resolvePeriodFromCommand from '../core/discord/resolvePeriodFromCommand.js';
-import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import stats from '../renderers/stats.js';
-import { StatType } from '../renderers/statsfull.js';
-import { AccountInfo } from '../types/accountInfo.js';
+import { TreeTypeString } from '../components/Tanks';
+import { CYCLIC_API } from '../constants/cyclic';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import resolveTankId from '../core/blitz/resolveTankId';
+import addStatTypeSubCommandGroups from '../core/discord/addStatTypeSubCommandGroups';
+import autocompleteTanks from '../core/discord/autocompleteTanks';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import interactionToURL from '../core/discord/interactionToURL';
+import linkButton from '../core/discord/linkButton';
+import primaryButton from '../core/discord/primaryButton';
+import resolvePeriodFromButton from '../core/discord/resolvePeriodFromButton';
+import resolvePeriodFromCommand from '../core/discord/resolvePeriodFromCommand';
+import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistryRaw } from '../events/interactionCreate';
+import stats, { MultiTankFilters, StatType } from '../renderers/stats';
+import { AccountInfo } from '../types/accountInfo';
 
-export default {
-  inProduction: true,
-  inDevelopment: true,
-  inPublic: true,
-
-  command: addStatTypeSubCommandGroups(
+export const statsCommand = new Promise<CommandRegistryRaw>(async (resolve) => {
+  const command = await addStatTypeSubCommandGroups(
     new SlashCommandBuilder()
       .setName('stats')
-      .setDescription('In-game statistics'),
-  ),
+      .setDescription('Regular battles statistics'),
+  );
 
-  async handler(interaction) {
-    const commandGroup = interaction.options.getSubcommandGroup(
-      true,
-    ) as StatType;
-    const player = await resolvePlayerFromCommand(interaction);
-    const period = resolvePeriodFromCommand(interaction);
-    const tankIdRaw = interaction.options.getString('tank')!;
-    const tankId = commandGroup === 'tank' ? resolveTankId(tankIdRaw) : null;
-    const start = interaction.options.getInteger('start');
-    const end = interaction.options.getInteger('end');
-    const path = interactionToURL(interaction, {
-      ...player,
-      tankId,
-      start,
-      end,
-    });
-    const { nickname } = (
-      await getWargamingResponse<AccountInfo>(
-        `https://api.wotblitz.${player.server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
-      )
-    )[player.id];
+  resolve({
+    inProduction: true,
+    inPublic: true,
 
-    return [
-      await stats(commandGroup, period, player, tankId),
-      primaryButton(path, 'Refresh'),
-      linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
-      linkButton(
-        `https://www.blitzstars.com/player/${player.server}/${nickname}`,
-        'BlitzStars',
-      ),
-    ];
-  },
+    command,
 
-  autocomplete: (interaction) => {
-    autocompleteUsername(interaction);
-    autocompleteTanks(interaction);
-  },
+    async handler(interaction) {
+      const commandGroup = interaction.options.getSubcommandGroup(
+        true,
+      ) as StatType;
+      const player = await resolvePlayerFromCommand(interaction);
+      const resolvedPeriod = resolvePeriodFromCommand(
+        player.region,
+        interaction,
+      );
+      const period = interaction.options.getString('period');
+      const tankIdRaw = interaction.options.getString('tank')!;
+      const tankId =
+        commandGroup === 'tank' ? await resolveTankId(tankIdRaw) : null;
+      const start = interaction.options.getInteger('start');
+      const end = interaction.options.getInteger('end');
+      const path = interactionToURL(interaction, {
+        ...player,
+        tankId,
+        start,
+        end,
+        period,
+      });
+      const { nickname } = (
+        await getWargamingResponse<AccountInfo>(
+          `https://api.wotblitz.${player.region}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
+        )
+      )[player.id];
 
-  async button(interaction) {
-    const url = new URL(`${CYCLIC_API}/${interaction.customId}`);
-    const path = url.pathname.split('/').filter(Boolean);
-    const commandGroup = path[1] as StatType;
-    const period = resolvePeriodFromButton(interaction);
-    const player = await resolvePlayerFromButton(interaction);
+      const tierOption = interaction.options.getString('tier');
 
-    return await stats(
-      commandGroup,
-      period,
-      player,
-      parseInt(url.searchParams.get('tankId')!),
-    );
-  },
-} satisfies CommandRegistry;
+      return [
+        await stats(
+          commandGroup,
+          resolvedPeriod,
+          player,
+          commandGroup === 'tank'
+            ? tankId
+            : commandGroup === 'multi-tank'
+            ? ({
+                'tank-type':
+                  interaction.options.getString('tank-type') ?? undefined,
+                nation: interaction.options.getString('nation') ?? undefined,
+                tier: tierOption ? parseInt(tierOption) : undefined,
+                'tree-type': (interaction.options.getString('tree-type') ??
+                  undefined) as TreeTypeString | undefined,
+              } satisfies Partial<MultiTankFilters>)
+            : null,
+        ),
+        primaryButton(path, 'Refresh'),
+        // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
+        linkButton(
+          `https://www.blitzstars.com/player/${player.region}/${nickname}`,
+          'BlitzStars',
+        ),
+      ];
+    },
+
+    autocomplete: (interaction) => {
+      autocompleteUsername(interaction);
+      autocompleteTanks(interaction);
+    },
+
+    async button(interaction) {
+      const url = new URL(`${CYCLIC_API}/${interaction.customId}`);
+      const path = url.pathname.split('/').filter(Boolean);
+      const commandGroup = path[1] as StatType;
+      const player = await resolvePlayerFromButton(interaction);
+      const period = resolvePeriodFromButton(player.region, interaction);
+
+      return await stats(
+        commandGroup,
+        period,
+        player,
+        commandGroup === 'tank'
+          ? parseInt(url.searchParams.get('tankId')!)
+          : commandGroup === 'multi-tank'
+          ? ({
+              'tank-type': url.searchParams.get('tank-type')!,
+              nation: url.searchParams.get('nation')!,
+              tier: parseInt(url.searchParams.get('tier')!),
+              'tree-type': url.searchParams.get('tree-type') as TreeTypeString,
+            } satisfies MultiTankFilters)
+          : null,
+      );
+    },
+  });
+});

src/commands/statsfull.tsx

@@ -1,83 +0,0 @@
-import { SlashCommandBuilder } from 'discord.js';
-import { CYCLIC_API } from '../constants/cyclic.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import resolveTankId from '../core/blitz/resolveTankId.js';
-import addStatTypeSubCommandGroups from '../core/discord/addStatTypeSubCommandGroups.js';
-import autocompleteTanks from '../core/discord/autocompleteTanks.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import interactionToURL from '../core/discord/interactionToURL.js';
-import linkButton from '../core/discord/linkButton.js';
-import primaryButton from '../core/discord/primaryButton.js';
-import resolvePeriodFromButton from '../core/discord/resolvePeriodFromButton.js';
-import resolvePeriodFromCommand from '../core/discord/resolvePeriodFromCommand.js';
-import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import statsfull, { StatType } from '../renderers/statsfull.js';
-import { AccountInfo } from '../types/accountInfo.js';
-
-export default {
-  inProduction: true,
-  inDevelopment: false,
-  inPublic: true,
-
-  command: addStatTypeSubCommandGroups(
-    new SlashCommandBuilder()
-      .setName('statsfull')
-      .setDescription('Full in-game statistics'),
-  ),
-
-  async handler(interaction) {
-    const commandGroup = interaction.options.getSubcommandGroup(
-      true,
-    ) as StatType;
-    const player = await resolvePlayerFromCommand(interaction);
-    const period = resolvePeriodFromCommand(interaction);
-    const tankIdRaw = interaction.options.getString('tank')!;
-    const tankId = commandGroup === 'tank' ? resolveTankId(tankIdRaw) : null;
-    const start = interaction.options.getInteger('start');
-    const end = interaction.options.getInteger('end');
-    const path = interactionToURL(interaction, {
-      ...player,
-      tankId,
-      start,
-      end,
-    });
-    const { nickname } = (
-      await getWargamingResponse<AccountInfo>(
-        `https://api.wotblitz.${player.server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
-      )
-    )[player.id];
-
-    return [
-      await statsfull(commandGroup, period, player, tankId),
-      primaryButton(path, 'Refresh'),
-      // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
-      linkButton(
-        `https://www.blitzstars.com/player/${player.server}/${nickname}`,
-        'BlitzStars',
-      ),
-    ];
-  },
-
-  autocomplete: (interaction) => {
-    autocompleteUsername(interaction);
-    autocompleteTanks(interaction);
-  },
-
-  async button(interaction) {
-    const url = new URL(`${CYCLIC_API}/${interaction.customId}`);
-    const path = url.pathname.split('/').filter(Boolean);
-    const commandGroup = path[1] as StatType;
-    const period = resolvePeriodFromButton(interaction);
-    const player = await resolvePlayerFromButton(interaction);
-
-    return await statsfull(
-      commandGroup,
-      period,
-      player,
-      parseInt(url.searchParams.get('tankId')!),
-    );
-  },
-} satisfies CommandRegistry;

src/commands/today.tsx

@@ -1,42 +1,74 @@
 import { SlashCommandBuilder } from 'discord.js';
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import interactionToURL from '../core/discord/interactionToURL.js';
-import linkButton from '../core/discord/linkButton.js';
-import primaryButton from '../core/discord/primaryButton.js';
-import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import today from '../renderers/today.js';
-import { AccountInfo } from '../types/accountInfo.js';
+import { CYCLIC_API } from '../constants/cyclic';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import interactionToURL from '../core/discord/interactionToURL';
+import linkButton from '../core/discord/linkButton';
+import primaryButton from '../core/discord/primaryButton';
+import resolvePlayerFromButton from '../core/discord/resolvePlayerFromButton';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import today from '../renderers/today';
+import { AccountInfo } from '../types/accountInfo';
 
-export default {
+export const todayCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
     .setName('today')
     .setDescription('A general daily breakdown of your performance')
-    .addStringOption(addUsernameChoices),
+    .addStringOption(addUsernameChoices)
+    .addIntegerOption((option) =>
+      option
+        .setName('cutoff')
+        .setDescription(
+          'The maximum number of tanks to display (default: Infinity)',
+        )
+        .setRequired(false)
+        .setMinValue(1),
+    )
+    .addIntegerOption((option) =>
+      option
+        .setName('maximized')
+        .setDescription(
+          'The number of rows with full stats after which all are collapsed (default: 4)',
+        )
+        .setMinValue(0)
+        .setRequired(false),
+    )
+    .addBooleanOption((option) =>
+      option
+        .setName('show-total')
+        .setDescription('Show the total stats at the top (default: true)')
+        .setRequired(false),
+    ),
 
   async handler(interaction) {
     const player = await resolvePlayerFromCommand(interaction);
+    const cutoff = interaction.options.getInteger('cutoff') ?? undefined;
+    const maximized = interaction.options.getInteger('maximized') ?? undefined;
+    const showTotal = interaction.options.getBoolean('show-total') ?? undefined;
     const { nickname } = (
       await getWargamingResponse<AccountInfo>(
-        `https://api.wotblitz.${player.server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
+        `https://api.wotblitz.${player.region}/wotb/account/info/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${player.id}`,
       )
     )[player.id];
-    const path = interactionToURL(interaction, player);
+    const path = interactionToURL(interaction, {
+      ...player,
+      cutoff,
+      maximized,
+      'show-total': showTotal,
+    });
 
     return [
-      await today(player),
+      await today(player, cutoff, maximized, showTotal, false),
       primaryButton(path, 'Refresh'),
       // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
       linkButton(
-        `https://www.blitzstars.com/player/${player.server}/${nickname}`,
+        `https://www.blitzstars.com/player/${player.region}/${nickname}`,
         'BlitzStars',
       ),
     ];
@@ -49,4 +81,4 @@ export default {
 
     return await today(player);
   },
-} satisfies CommandRegistry;
+};

src/commands/verify.ts

@@ -1,20 +1,19 @@
 import { SlashCommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import discord from '../../discord.json' assert { type: 'json' };
-import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
-import addUsernameChoices from '../core/discord/addUsernameChoices.js';
-import autocompleteUsername from '../core/discord/autocompleteUsername.js';
-import embedNegative from '../core/discord/embedNegative.js';
-import embedPositive from '../core/discord/embedPositive.js';
-import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand.js';
-import { WARGAMING_APPLICATION_ID } from '../core/node/arguments.js';
-import { CommandRegistry } from '../events/interactionCreate/index.js';
-import { AccountInfo } from '../types/accountInfo.js';
-import { PlayerClanData } from '../types/playerClanData.js';
+import getWargamingResponse from '../core/blitz/getWargamingResponse';
+import addUsernameChoices from '../core/discord/addUsernameChoices';
+import autocompleteUsername from '../core/discord/autocompleteUsername';
+import embedNegative from '../core/discord/embedNegative';
+import embedPositive from '../core/discord/embedPositive';
+import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
+import { secrets } from '../core/node/secrets';
+import { CommandRegistry } from '../events/interactionCreate';
+import { AccountInfo } from '../types/accountInfo';
+import { PlayerClanData } from '../types/playerClanData';
 
-export default {
+export const verifyCommand: CommandRegistry = {
   inProduction: true,
-  inDevelopment: false,
   inPublic: true,
 
   command: new SlashCommandBuilder()
@@ -24,12 +23,12 @@ export default {
 
   async handler(interaction) {
     const blitzAccount = await resolvePlayerFromCommand(interaction);
-    const { id, server } = blitzAccount;
+    const { id, region: server } = blitzAccount;
     const accountInfo = await getWargamingResponse<AccountInfo>(
-      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${WARGAMING_APPLICATION_ID}&account_id=${id}`,
+      `https://api.wotblitz.${server}/wotb/account/info/?application_id=${secrets.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`,
+      `https://api.wotblitz.${server}/wotb/clans/accountinfo/?application_id=${secrets.WARGAMING_APPLICATION_ID}&account_id=${id}&extra=clan`,
     );
     const clan = clanData[id]?.clan;
     const clanTag = clan ? ` [${clan!.tag}]` : '';
@@ -80,4 +79,4 @@ export default {
   },
 
   autocomplete: autocompleteUsername,
-} satisfies CommandRegistry;
+};

src/components/AllStatsOverview/components/WN8Display/components/Glow.tsx

@@ -1,6 +1,6 @@
-import { Percentile } from '../../../../../constants/percentiles.js';
-import hslToHex from '../../../../../core/node/hslToHex.js';
-import { PERCENTILE_COLORS } from '../../../../PercentileIndicator.js';
+import { Percentile } from '../../../../../constants/percentiles';
+import hslToHex from '../../../../../core/node/hslToHex';
+import { PERCENTILE_COLORS } from '../../../../PercentileIndicator';
 
 export enum GlowSide {
   Top,

src/components/AllStatsOverview/components/WN8Display/index.tsx

@@ -1,8 +1,8 @@
-import { Percentile } from '../../../../constants/percentiles.js';
-import getWN8Percentile from '../../../../core/blitz/getWN8Percentile.js';
-import { theme } from '../../../../stitches.config.js';
-import { PERCENTILE_COLORS } from '../../../PercentileIndicator.js';
-import { Glow, GlowSide } from './components/Glow.js';
+import { Percentile } from '../../../../constants/percentiles';
+import getWN8Percentile from '../../../../core/blitz/getWN8Percentile';
+import { theme } from '../../../../stitches.config';
+import { PERCENTILE_COLORS } from '../../../PercentileIndicator';
+import { Glow, GlowSide } from './components/Glow';
 
 export interface WN8DisplayProps {
   WN8?: number;

src/components/AllStatsOverview/components/WN8SurroundingStat.tsx

@@ -1,4 +1,4 @@
-import { theme } from '../../../stitches.config.js';
+import { theme } from '../../../stitches.config';
 
 export enum WN8SurroundingStatAlign {
   Left,

src/components/AllStatsOverview/index.tsx

@@ -1,9 +1,9 @@
-import { AllStats, SupplementaryStats } from '../../types/accountInfo.js';
-import { WN8Display } from './components/WN8Display/index.js';
+import { AllStats, SupplementaryStats } from '../../types/accountInfo';
+import { WN8Display } from './components/WN8Display';
 import {
   WN8SurroundingStat,
   WN8SurroundingStatAlign,
-} from './components/WN8SurroundingStat.js';
+} from './components/WN8SurroundingStat';
 
 export interface AllStatsOverviewProps {
   stats: AllStats;
@@ -69,7 +69,9 @@ export default function AllStatsOverview({
       >
         <WN8SurroundingStat
           label="Tier"
-          value={supplementaryStats.tier.toFixed(2)}
+          value={
+            supplementaryStats.tier ? supplementaryStats.tier.toFixed(2) : '--'
+          }
         />
         <WN8SurroundingStat
           label="Survival"

src/components/Breakdown/components/Root.tsx

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

src/components/Breakdown/components/Row.tsx

@@ -1,6 +1,8 @@
-import getWN8Percentile from '../../../core/blitz/getWN8Percentile.js';
-import { RowDiscriminator } from './RowDiscriminator.js';
-import { RowStat } from './RowStat.js';
+import getWN8Percentile from '../../../core/blitz/getWN8Percentile';
+import { TankType } from '../../../core/blitz/tankopedia';
+import { theme } from '../../../stitches.config';
+import { TREE_TYPE_ICONS, TreeTypeEnum } from '../../Tanks';
+import { RowStat } from './RowStat';
 
 export interface RowProps {
   name: string;
@@ -10,14 +12,17 @@ export interface RowProps {
   careerWN8?: number;
   damage: number;
   careerDamage: number;
-  survival: number;
-  careerSurvival: number;
   battles: number;
   careerBattles: number;
-  icon?: string;
+  minimized: boolean;
+  isTank: boolean;
+  treeType?: TreeTypeEnum;
+  tankType?: TankType;
 }
 
 export function Row({
+  isTank,
+  minimized,
   name,
   winrate,
   careerWinrate,
@@ -25,45 +30,87 @@ export function Row({
   careerWN8,
   damage,
   careerDamage,
-  survival,
-  careerSurvival,
   battles,
   careerBattles,
-  icon,
+  treeType,
+  tankType,
 }: RowProps) {
   return (
-    <div style={{ display: 'flex', gap: 16 }}>
-      <RowDiscriminator name={name} icon={icon} />
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        borderRadius: 4,
+        backgroundColor: theme.colors.appBackground2,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 8,
+          gap: 4,
+          backgroundColor: theme.colors.componentInteractive,
+        }}
+      >
+        {isTank && treeType !== undefined && tankType !== undefined && (
+          <img
+            src={TREE_TYPE_ICONS[treeType][tankType]}
+            style={{ width: 16, height: 16 }}
+          />
+        )}
+        <span
+          style={{
+            color: isTank
+              ? treeType === TreeTypeEnum.Collector
+                ? theme.colors.textLowContrast_blue
+                : treeType === TreeTypeEnum.Premium
+                ? theme.colors.textLowContrast_amber
+                : theme.colors.textHighContrast
+              : theme.colors.textLowContrast,
+            fontWeight: 900,
+            fontSize: 16,
+          }}
+        >
+          {name}
+        </span>
+      </div>
 
-      <RowStat
-        name="Winrate"
-        value={`${(winrate * 100).toFixed(2)}%`}
-        career={`${(careerWinrate * 100).toFixed(2)}%`}
-        delta={winrate - careerWinrate}
-      />
-      <RowStat
-        name="WN8"
-        value={WN8 === undefined ? '--' : WN8.toFixed(0)}
-        career={careerWN8 === undefined ? '--' : careerWN8.toFixed(0)}
-        percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
-      />
-      <RowStat
-        name="Damage"
-        value={damage.toFixed(2)}
-        career={careerDamage.toFixed(2)}
-        delta={damage - careerDamage}
-      />
-      <RowStat
-        name="Survival"
-        value={`${(survival * 100).toFixed(2)}%`}
-        career={`${(careerSurvival * 100).toFixed(2)}%`}
-        delta={survival - careerSurvival}
-      />
-      <RowStat
-        name="Battles"
-        value={battles.toFixed(0)}
-        career={careerBattles.toFixed(0)}
-      />
+      <div
+        style={{
+          display: 'flex',
+          paddingTop: 8,
+          paddingBottom: 8,
+        }}
+      >
+        <RowStat
+          minimized={minimized}
+          name={`Battles • ${careerBattles.toFixed(0)}`}
+          value={battles.toFixed(0)}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`Winrate • ${(careerWinrate * 100).toFixed(2)}%`}
+          value={`${(winrate * 100).toFixed(2)}%`}
+          delta={winrate - careerWinrate}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`WN8 • ${
+            careerWN8 === undefined ? '--' : careerWN8.toFixed(0)
+          }`}
+          value={WN8 === undefined ? '--' : WN8.toFixed(0)}
+          percentile={WN8 === undefined ? undefined : getWN8Percentile(WN8)}
+        />
+        <RowStat
+          minimized={minimized}
+          name={`Damage • ${careerDamage.toFixed(0)}`}
+          value={damage.toFixed(0)}
+          delta={damage - careerDamage}
+        />
+      </div>
     </div>
   );
 }

src/components/Breakdown/components/RowDiscriminator.tsx

@@ -1,46 +0,0 @@
-import { theme } from '../../../stitches.config.js';
-
-export interface RowDiscriminatorProps {
-  name: string;
-  icon?: string;
-}
-
-export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) {
-  return (
-    <div
-      style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        boxSizing: 'border-box',
-        width: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {icon && (
-        <img
-          src={icon}
-          height={0}
-          style={{ flex: 1, width: '100%', objectFit: 'contain' }}
-        />
-      )}
-
-      <span
-        style={{
-          color: theme.colors.textLowContrast,
-          fontSize: 16,
-          textAlign: 'center',
-          display: 'block',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'clip',
-          maxWidth: '100%',
-        }}
-      >
-        {name}
-      </span>
-    </div>
-  );
-}

src/components/Breakdown/components/RowStat.tsx

@@ -1,21 +1,21 @@
-import { Percentile } from '../../../constants/percentiles.js';
-import { theme } from '../../../stitches.config.js';
-import PercentileIndicator from '../../PercentileIndicator.js';
+import { Percentile } from '../../../constants/percentiles';
+import { theme } from '../../../stitches.config';
+import PercentileIndicator from '../../PercentileIndicator';
 
 export interface RowStatProps {
   name: string;
-  value: string;
-  career: string;
+  value: string | number;
   delta?: number;
   percentile?: Percentile;
+  minimized?: boolean;
 }
 
 export function RowStat({
   name,
   value,
-  career,
   delta,
   percentile,
+  minimized,
 }: RowStatProps) {
   return (
     <div
@@ -28,10 +28,6 @@ export function RowStat({
         flex: 1,
       }}
     >
-      <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
-        {career}
-      </span>
-
       <div
         style={{
           display: 'flex',
@@ -57,17 +53,19 @@ export function RowStat({
         <span
           style={{
             color: theme.colors.textHighContrast,
-            fontSize: 16,
             fontWeight: 'bold',
+            fontSize: 16,
           }}
         >
           {value}
         </span>
       </div>
 
-      <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
-        {name}
-      </span>
+      {!minimized && (
+        <span style={{ color: theme.colors.textLowContrast, fontSize: 12 }}>
+          {name}
+        </span>
+      )}
     </div>
   );
 }

src/components/Breakdown/index.ts

@@ -1,4 +1,4 @@
-export * from './components/Root.js';
-export * from './components/Row.js';
-export * from './components/RowDiscriminator.js';
-export * from './components/RowStat.js';
+export * from './components/Root';
+export * from './components/Row';
+export * from './components/RowStat';
+

src/components/GenericAllStats.tsx

@@ -1,57 +0,0 @@
-import getWN8Percentile from '../core/blitz/getWN8Percentile.js';
-import isNumber from '../core/node/isNumber.js';
-import { AllStats, SupplementaryStats } from '../types/accountInfo.js';
-import GenericStats from './GenericStats/index.js';
-
-export interface GenericAllStatsProps {
-  stats: AllStats;
-  supplementaryStats?: SupplementaryStats;
-}
-
-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={[
-        ['Winrate', `${(100 * (stats.wins / stats.battles)).toFixed(2)}%`],
-        [
-          'WN8',
-          supplementaryStats
-            ? isNumber(supplementaryStats.WN8)
-              ? supplementaryStats.WN8!.toFixed(0)
-              : '--'
-            : undefined,
-          isNumber(supplementaryStats?.WN8)
-            ? getWN8Percentile(supplementaryStats!.WN8!)
-            : undefined,
-        ],
-        [
-          'Survival',
-          `${(100 * (stats.survived_battles / stats.battles)).toFixed(2)}%`,
-        ],
-        ['Accuracy', `${((stats.hits / stats.shots) * 100).toFixed(2)}%`],
-        ['Battles', stats.battles],
-        ['Wins', stats.wins],
-        ['Losses', stats.losses],
-        ['Average damage', (stats.damage_dealt / stats.battles).toFixed(0)],
-        ['Average tier', supplementaryStats?.tier.toFixed(2)],
-        ['Average XP', (stats.xp / stats.battles).toFixed(0)],
-        ['Average shots', (stats.shots / stats.battles).toFixed(2)],
-        ['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', isFinite(damageRatio) ? damageRatio.toFixed(2) : '--'],
-        [
-          'Kills to death ratio',
-          isFinite(killsToDeathRatio) ? killsToDeathRatio.toFixed(2) : '--',
-        ],
-      ]}
-    />
-  );
-}

src/components/GenericAllStats/components/Card.tsx

@@ -0,0 +1,91 @@
+import { Percentile } from '../../../constants/percentiles';
+import { theme } from '../../../stitches.config';
+import PercentileIndicator from '../../PercentileIndicator';
+
+export interface CardItem {
+  label: string;
+  value: string | number | undefined;
+  percentile?: Percentile;
+}
+
+export interface CardProps {
+  items: CardItem[];
+  title: string;
+}
+
+export function Card({ items, title }: CardProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        flex: 1,
+        borderRadius: 4,
+        backgroundColor: theme.colors.componentInteractive,
+        padding: 8,
+      }}
+    >
+      <span
+        style={{
+          color: theme.colors.textHighContrast,
+          fontSize: 24,
+        }}
+      >
+        {title}
+      </span>
+
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+        }}
+      >
+        {items.map((item) => (
+          <div
+            style={{
+              display: 'flex',
+              gap: 8,
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+              {item.label}
+            </span>
+
+            <div
+              style={{
+                flex: 1,
+                height: 1,
+                borderRadius: 0.5,
+                backgroundColor: theme.colors.borderNonInteractive,
+              }}
+            />
+
+            <div
+              style={{
+                display: 'flex',
+                gap: 4,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {item.percentile !== undefined && (
+                <PercentileIndicator percentile={item.percentile} />
+              )}
+              <span
+                style={{ fontSize: 16, color: theme.colors.textHighContrast }}
+              >
+                {item.value === undefined || Number.isNaN(item.value)
+                  ? '--'
+                  : item.value}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/GenericAllStats/components/Root.tsx

@@ -0,0 +1,17 @@
+export interface RootProps {
+  children: React.ReactNode;
+}
+
+export function Root({ children }: RootProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

src/components/GenericAllStats/components/Row.tsx

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

src/components/GenericAllStats/index.tsx

@@ -0,0 +1,124 @@
+import getWN8Percentile from '../../core/blitz/getWN8Percentile';
+import isNumber from '../../core/node/isNumber';
+import { AllStats, SupplementaryStats } from '../../types/accountInfo';
+import { Card } from './components/Card';
+import { Root } from './components/Root';
+import { Row } from './components/Row';
+
+// TODO: remove the .js endings
+
+export interface GenericAllStatsProps {
+  stats: AllStats;
+  supplementaryStats?: SupplementaryStats;
+}
+
+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 (
+    <Root>
+      <Row>
+        <Card
+          title="Games"
+          items={[
+            {
+              label: 'Winrate',
+              value: `${(100 * (stats.wins / stats.battles)).toFixed(2)}%`,
+            },
+            {
+              label: 'Battles',
+              value: stats.battles,
+            },
+            {
+              label: 'Wins / Losses',
+              value: `${stats.wins} / ${stats.losses}`,
+            },
+          ]}
+        />
+        <Card
+          title="Efficiency"
+          items={[
+            {
+              label: 'WN8',
+              value:
+                supplementaryStats && isNumber(supplementaryStats.WN8)
+                  ? supplementaryStats.WN8!.toFixed(0)
+                  : undefined,
+              percentile: isNumber(supplementaryStats?.WN8)
+                ? getWN8Percentile(supplementaryStats!.WN8!)
+                : undefined,
+            },
+            {
+              label: 'Survival',
+              value: `${(
+                100 *
+                (stats.survived_battles / stats.battles)
+              ).toFixed(2)}%`,
+            },
+            {
+              label: 'Accuracy',
+              value: `${((stats.hits / stats.shots) * 100).toFixed(2)}%`,
+            },
+          ]}
+        />
+      </Row>
+      <Row>
+        <Card
+          title="Lethality"
+          items={[
+            {
+              label: 'Average damage',
+              value: (stats.damage_dealt / stats.battles).toFixed(0),
+            },
+            {
+              label: 'Damage per tier',
+              value: supplementaryStats?.tier
+                ? (
+                    stats.damage_dealt /
+                    stats.battles /
+                    supplementaryStats.tier
+                  ).toFixed(0)
+                : undefined,
+            },
+            {
+              label: 'Damage ratio',
+              value: isFinite(damageRatio) ? damageRatio.toFixed(2) : undefined,
+            },
+            {
+              label: 'Average kills',
+              value: (stats.frags / stats.battles).toFixed(0),
+            },
+          ]}
+        />
+        <Card
+          title="Miscellaneous"
+          items={[
+            {
+              label: 'Average tier',
+              value: supplementaryStats?.tier?.toFixed(2),
+            },
+            {
+              label: 'Average spots',
+              value: (stats.spotted / stats.battles).toFixed(2),
+            },
+            {
+              label: 'Average XP',
+              value: (stats.xp / stats.battles).toFixed(0),
+            },
+            {
+              label: 'Kills to death ratio',
+              value: isFinite(killsToDeathRatio)
+                ? killsToDeathRatio.toFixed(2)
+                : undefined,
+            },
+          ]}
+        />
+      </Row>
+    </Root>
+  );
+}

src/components/GenericStats/components/GenericStatsColumn.tsx

@@ -1,5 +1,5 @@
-import { Stat } from '../index.js';
-import GenericStatsRow from './GenericStatsRow.js';
+import { Stat } from '..';
+import GenericStatsRow from './GenericStatsRow';
 
 export interface GenericStatsColumnProps {
   stats: Stat[];

src/components/GenericStats/components/GenericStatsRow.tsx

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

src/components/GenericStats/index.tsx

@@ -1,5 +1,5 @@
-import { Percentile } from '../../constants/percentiles.js';
-import GenericStatsColumn from './components/GenericStatsColumn.js';
+import { Percentile } from '../../constants/percentiles';
+import GenericStatsColumn from './components/GenericStatsColumn';
 
 export type Stat =
   | [string, string | number | undefined]

src/components/Graph/components/Line.tsx

@@ -1,5 +1,5 @@
 import { blue, green, red, slateDark } from '@radix-ui/colors';
-import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root.js';
+import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root';
 
 export enum LineColor {
   Red,

src/components/Graph/components/Margin.tsx

@@ -1,6 +1,6 @@
 import { times } from 'lodash';
-import { theme } from '../../../stitches.config.js';
-import { MarginInputProps } from './Root.js';
+import { theme } from '../../../stitches.config';
+import { MarginInputProps } from './Root';
 
 export enum MarginOrientation {
   Vertical,
@@ -37,7 +37,7 @@ export function Margin({
           key={index}
           style={{
             fontSize: 16,
-            color: theme.colors.textLowContrast,
+            color: theme.colors.textHighContrast,
           }}
         >
           {`${(

src/components/Graph/components/Root.tsx

@@ -1,9 +1,9 @@
 import { times } from 'lodash';
 import { ReactNode } from 'react';
-import { theme } from '../../../stitches.config.js';
-import { Margin, MarginOrientation } from './Margin.js';
+import { theme } from '../../../stitches.config';
+import { Margin, MarginOrientation } from './Margin';
 
-export const GRAPH_WIDTH = 544;
+export const GRAPH_WIDTH = 384;
 export const GRAPH_HEIGHT = 320;
 
 export interface MarginInputProps {
@@ -20,6 +20,7 @@ export interface RootProps {
   separations?: number;
   xMinLabel: string;
   xMaxLabel: string;
+  xTitle?: string;
 }
 
 export function Root({
@@ -29,6 +30,7 @@ export function Root({
   separations = 5,
   xMinLabel,
   xMaxLabel,
+  xTitle,
 }: RootProps) {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
@@ -39,10 +41,10 @@ export function Root({
           justifyContent: 'space-between',
         }}
       >
-        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+        <span style={{ fontSize: 16, color: theme.colors.textHighContrast }}>
           {xMinLabel}
         </span>
-        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+        <span style={{ fontSize: 16, color: theme.colors.textHighContrast }}>
           {xMaxLabel}
         </span>
       </div>
@@ -88,6 +90,21 @@ export function Root({
           orientation={MarginOrientation.Horizontal}
         />
       )}
+
+      {xTitle !== undefined && (
+        <div
+          style={{
+            paddingLeft: 64,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+            {xTitle}
+          </span>
+        </div>
+      )}
     </div>
   );
 }

src/components/Graph/index.ts

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

src/components/Leaderboard/components/Gap.tsx

@@ -0,0 +1,29 @@
+import { theme } from '../../../stitches.config';
+
+export interface GapProps {
+  number: number;
+}
+
+export function Gap({ number }: GapProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        padding: 8,
+        backgroundColor: theme.colors.componentNonInteractive,
+        borderRadius: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          color: theme.colors.textLowContrast,
+          fontSize: 16,
+        }}
+      >
+        + {number.toLocaleString()} more
+      </span>
+    </div>
+  );
+}

src/components/Leaderboard/components/Item.tsx

@@ -0,0 +1,199 @@
+import { RatingsReward } from '../../../commands/ratings';
+import { theme } from '../../../stitches.config';
+
+export interface ItemProps {
+  position: number;
+  deltaPosition?: number;
+  score: number;
+  deltaScore?: number;
+  reward?: RatingsReward;
+  nickname: string;
+  clan?: string;
+  highlight?: boolean;
+}
+
+function normalizeImage(url: string) {
+  return url.endsWith('.webp') ? 'https://i.imgur.com/ZniCzbO.png' : url;
+}
+
+export function Item({
+  position,
+  deltaPosition,
+  score,
+  deltaScore,
+  reward,
+  nickname,
+  clan,
+  highlight,
+}: ItemProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        padding: 8,
+        backgroundColor: highlight
+          ? theme.colors.componentInteractive_blue
+          : theme.colors.componentInteractive,
+        borderRadius: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+      }}
+    >
+      <span
+        style={{
+          color: highlight
+            ? theme.colors.textLowContrast_blue
+            : theme.colors.textLowContrast,
+          fontSize: 16,
+        }}
+      >
+        {position.toLocaleString()}.
+      </span>
+
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 4,
+        }}
+      >
+        <span
+          style={{
+            color: highlight
+              ? theme.colors.textHighContrast_blue
+              : theme.colors.textHighContrast,
+            fontSize: 16,
+          }}
+        >
+          {nickname}
+        </span>
+        {clan && (
+          <span
+            style={{
+              color: highlight
+                ? theme.colors.textLowContrast_blue
+                : theme.colors.textLowContrast,
+              fontSize: 16,
+            }}
+          >
+            [{clan}]
+          </span>
+        )}
+      </div>
+
+      {deltaPosition !== undefined && deltaPosition !== 0 && (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+          }}
+        >
+          <img
+            style={{
+              width: 8,
+              height: 8,
+            }}
+            src={
+              deltaPosition > 0
+                ? 'https://i.imgur.com/qbjiXa1.png'
+                : 'https://i.imgur.com/3uyNhun.png'
+            }
+          />
+          <span
+            style={{
+              color: highlight
+                ? theme.colors.textLowContrast_blue
+                : theme.colors.textLowContrast,
+              fontSize: 16,
+            }}
+          >
+            {Math.abs(deltaPosition).toLocaleString()}
+          </span>
+        </div>
+      )}
+
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          gap: 4,
+        }}
+      >
+        {reward && (
+          <img
+            style={{ width: 16, height: 16, objectFit: 'cover' }}
+            src={normalizeImage(
+              reward.type === 'vehicle'
+                ? reward.vehicle.image_url
+                : reward.stuff.image_url,
+            )}
+          />
+        )}
+        {reward && reward.count > 1 && (
+          <span
+            style={{
+              color: highlight
+                ? theme.colors.textLowContrast_blue
+                : theme.colors.textLowContrast,
+              fontSize: 16,
+            }}
+          >
+            x {reward.count.toLocaleString()}
+          </span>
+        )}
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          alignItems: 'center',
+          width: 96,
+          justifyContent: 'flex-end',
+        }}
+      >
+        {deltaScore !== 0 && deltaScore !== undefined && (
+          <span
+            style={{
+              color: highlight
+                ? theme.colors.textLowContrast_blue
+                : theme.colors.textLowContrast,
+              fontSize: 16,
+            }}
+          >
+            {Math.abs(deltaScore).toLocaleString()}
+          </span>
+        )}
+        {deltaScore !== 0 && deltaScore !== undefined && (
+          <img
+            style={{
+              width: 8,
+              height: 8,
+            }}
+            src={
+              deltaScore > 0
+                ? 'https://i.imgur.com/qbjiXa1.png'
+                : 'https://i.imgur.com/3uyNhun.png'
+            }
+          />
+        )}
+        <span
+          style={{
+            color: highlight
+              ? theme.colors.textHighContrast_blue
+              : theme.colors.textHighContrast,
+            fontSize: 16,
+          }}
+        >
+          {score.toLocaleString()}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/Leaderboard/components/Root.tsx

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

src/components/Leaderboard/index.ts

@@ -0,0 +1,3 @@
+export * from './components/Gap';
+export * from './components/Item';
+export * from './components/Root';

src/components/Navbar.tsx

@@ -0,0 +1,5 @@
+export default function Navbar() {
+  return (
+    <div style={{ display: 'flex', height: 100, backgroundColor: 'red' }}></div>
+  );
+}

src/components/NoData.tsx

@@ -1,4 +1,4 @@
-import { theme } from '../stitches.config.js';
+import { theme } from '../stitches.config';
 
 export enum NoDataType {
   BattlesInPeriod,

src/components/PercentileIndicator.tsx

@@ -10,7 +10,7 @@ import {
   teal,
   yellow,
 } from '@radix-ui/colors';
-import { Percentile } from '../constants/percentiles.js';
+import { Percentile } from '../constants/percentiles';
 
 export interface PercentileIndicatorProps {
   percentile: Percentile;

src/components/PoweredBy.tsx

@@ -1,38 +0,0 @@
-import { ReactNode } from 'react';
-import { theme } from '../stitches.config.js';
-
-export enum PoweredByType {
-  BlitzStars,
-  Wargaming,
-}
-
-export interface PoweredByProps {
-  type: PoweredByType;
-  footer?: ReactNode;
-}
-
-const POWERED_BY_IMAGES: Record<PoweredByType, string> = {
-  [PoweredByType.BlitzStars]:
-    'https://www.blitzstars.com/assets/images/4b4cb591.TankyMcPewpew.png',
-  [PoweredByType.Wargaming]: 'https://i.imgur.com/jADGWm0.png',
-};
-
-const POWERED_BY_NAMES: Record<PoweredByType, string> = {
-  [PoweredByType.BlitzStars]: 'BlitzStars',
-  [PoweredByType.Wargaming]: 'Wargaming',
-};
-
-export default function PoweredBy({ type, footer }: PoweredByProps) {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-      <div style={{ display: 'flex' }}>{footer}</div>
-
-      <div style={{ display: 'flex', gap: 4 }}>
-        <img src={POWERED_BY_IMAGES[type]} style={{ height: 16, width: 16 }} />
-        <span style={{ color: theme.colors.textLowContrast, fontSize: 16 }}>
-          Powered by {POWERED_BY_NAMES[type]}
-        </span>
-      </div>
-    </div>
-  );
-}

src/components/Tanks/components/Column.tsx

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

src/components/Tanks/components/Item.tsx

@@ -1,35 +1,81 @@
-import { TANK_ICONS, TankType } from '../../../core/blitz/tankopedia.js';
+import {
+  TANK_ICONS,
+  TANK_ICONS_COLLECTOR,
+  TANK_ICONS_PREMIUM,
+  TankType,
+} from '../../../core/blitz/tankopedia';
+import { theme } from '../../../stitches.config';
 
-export interface ItemProps {
-  icon?: string;
-  type: TankType;
-  name: string;
+export enum TreeTypeEnum {
+  TechTree,
+  Premium,
+  Collector,
 }
 
-export function Item({ icon, type, name }: ItemProps) {
+export type TreeTypeString = 'techtree' | 'premium' | 'collector';
+
+export interface ItemProps {
+  image?: string;
+  tankType?: TankType;
+  name: string;
+  treeType: TreeTypeEnum;
+}
+
+const TREE_TYPE_COLOR = {
+  [TreeTypeEnum.TechTree]: '',
+  [TreeTypeEnum.Premium]: '_amber',
+  [TreeTypeEnum.Collector]: '_blue',
+} as const;
+
+export const TREE_TYPE_ICONS = {
+  [TreeTypeEnum.TechTree]: TANK_ICONS,
+  [TreeTypeEnum.Premium]: TANK_ICONS_PREMIUM,
+  [TreeTypeEnum.Collector]: TANK_ICONS_COLLECTOR,
+};
+
+export function Item({ image, tankType, name, treeType }: ItemProps) {
   return (
     <div
       style={{
-        flex: 1,
-        minWidth: 128,
-        height: 128,
         display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
+        height: 32,
+        paddingLeft: 8,
+        paddingRight: 8,
         overflow: 'hidden',
+        alignItems: 'center',
+        borderRadius: 4,
+        backgroundColor:
+          theme.colors[`componentInteractive${TREE_TYPE_COLOR[treeType]}`],
       }}
     >
-      {icon && <img src={icon} style={{ flex: 1, objectFit: 'contain' }} />}
-
-      <div style={{ display: 'flex', margin: 'auto', gap: 4 }}>
-        <img src={TANK_ICONS[type]} style={{ width: 14, height: 14 }} />
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          overflow: 'hidden',
+        }}
+      >
+        {tankType && (
+          <img
+            src={TREE_TYPE_ICONS[treeType][tankType]}
+            style={{ width: 14, height: 14 }}
+          />
+        )}
         <span
-          style={{ fontSize: 16, textAlign: 'center', whiteSpace: 'nowrap' }}
+          style={{
+            fontSize: 16,
+            whiteSpace: 'nowrap',
+            color: theme.colors[`textLowContrast${TREE_TYPE_COLOR[treeType]}`],
+          }}
         >
           {name}
         </span>
       </div>
+
+      {image && <img src={image} style={{ flex: 1 }} />}
     </div>
   );
 }

src/components/Tanks/components/Root.tsx

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

src/components/Tanks/components/Row.tsx

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