feat: logs

.github/workflows/cd-assets.yml

@@ -16,52 +16,34 @@ jobs:
     runs-on: windows-latest
 
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
         with:
           submodules: recursive
           token: ${{ secrets.GH_TOKEN }}
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
-
-      - name: Add fixed sharp
-        run: yarn add [email protected] --ignore-engines
+        run: bun install
 
       - name: Setup DepotDownloader
-        run: yarn setup:depotdownloader
+        run: bun scripts/setupDepotDownloader.ts
 
       - name: Run DepotDownloader
-        run: ./temp/depotDownloader/DepotDownloader.exe -app 444200 -username ${{ secrets.DEPOT_DOWNLOADER_USERNAME }} -password "${{ secrets.DEPOT_DOWNLOADER_PASSWORD }}"
+        run: ./temp/depotDownloader/DepotDownloader.exe -os windows -app 444200 -username ${{ secrets.DEPOT_DOWNLOADER_USERNAME }} -password "${{ secrets.DEPOT_DOWNLOADER_PASSWORD }}"
 
       - name: Apply patches
         run: |
-          $env:GH_TOKEN = "${{ secrets.GH_TOKEN }}"
-          $env:DISCORD_TOKEN = "${{ secrets.DISCORD_TOKEN }}"
-          $env:DATABASE_URL = "${{ secrets.DATABASE_URL }}"
+          $env:GH_TOKEN = "${{ secrets.GH_TOKEN }}" 
+          $env:DISCORD_TOKEN = "${{ secrets.DISCORD_TOKEN }}" 
+          $env:DATABASE_URL = "${{ secrets.DATABASE_URL }}" 
           $env:WOTB_DLC_CDN = "${{ secrets.WOTB_DLC_CDN }}"
-          yarn setup:patches --depot
+          bun scripts/applyPatches.ts --depot
 
       - name: Build assets
         run: |
-          $env:GH_TOKEN = "${{ secrets.GH_TOKEN }}"
-          $env:DISCORD_TOKEN = "${{ secrets.DISCORD_TOKEN }}"
-          $env:DATABASE_URL = "${{ secrets.DATABASE_URL }}"
-          $env:VIDEOS_SHEET = "${{ secrets.VIDEOS_SHEET }}"
+          $env:GH_TOKEN = "${{ secrets.GH_TOKEN }}" 
+          $env:DISCORD_TOKEN = "${{ secrets.DISCORD_TOKEN }}" 
+          $env:DATABASE_URL = "${{ secrets.DATABASE_URL }}" 
+          $env:VIDEOS_SHEET = "${{ secrets.VIDEOS_SHEET }}" 
           $env:GOOGLE_APPLICATION_CREDENTIALS = "${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}"
-          yarn build:assets --all-targets --depot ${{ github.ref == 'refs/heads/main' && '--production' || '' }}
+          bun build:assets --all-targets --depot --production

.github/workflows/cd-averages.yml

@@ -2,8 +2,8 @@ name: CD Averages
 
 on:
   workflow_dispatch:
-  # schedule:
-  #   - cron: '0 12 * * 0'
+  schedule:
+    - cron: '0 8 * * *'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -22,4 +22,4 @@ jobs:
 
       - name: Build averages
         run: |
-          GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} VIDEOS_SHEET=${{ secrets.VIDEOS_SHEET }} GOOGLE_APPLICATION_CREDENTIALS=${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }} bun scripts/averages.ts
+          GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} VIDEOS_SHEET=${{ secrets.VIDEOS_SHEET }} GOOGLE_APPLICATION_CREDENTIALS=${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }} bun scripts/averages.ts --production

.github/workflows/cd-discover-ids.yml

@@ -1,11 +1,9 @@
 name: CD Discover IDs
 
 on:
-  push:
-    branches: main
   workflow_dispatch:
   schedule:
-    - cron: '0 8 * * *'
+    - cron: '0 0 * * 1'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/cd-docs.yml

@@ -17,44 +17,23 @@ jobs:
       url: ${{ steps.deployment.outputs.page_url }}
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Build docs
-        run: yarn build:docs
+        run: bun build:docs
 
-      - name: Configure pages
-        uses: actions/configure-pages@v2
-
-      - name: Upload pages artifact
-        uses: actions/upload-pages-artifact@v1
+      - uses: actions/configure-pages@v2
+      - uses: actions/upload-pages-artifact@v1
         with:
           path: dist/docs
 
-      - name: Deploy
-        id: deployment
+      - id: deployment
         uses: actions/deploy-pages@v1
-
-      - name: Archive build
-        uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v4
         with:
           name: dist
           path: docs/.vitepress/dist

.github/workflows/cd-host.yml

@@ -18,10 +18,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Use node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
+      - uses: oven-sh/setup-bun@v1
 
       - name: Download release assets
         run: |
@@ -30,7 +27,7 @@ jobs:
             | cut -d : -f 2,3 \
             | tr -d \")
           curl -L -o bot.zip $DOWNLOAD_URL
-          unzip bot.zip
+          unzip bot.zip -d dist/bot
 
       - name: Run bot
-        run: NODE_ENV=production GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} node --enable-source-maps index.cjs
+        run: NODE_ENV=production GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} bun start:bot

.github/workflows/cd-rating-asia.yml

@@ -9,26 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Generate leaderboard
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} yarn publish:ratingleaderboard --region=asia --target=midnight --production
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} bun scripts/buildRatingLeaderboard.ts --region=asia --target=midnight --production

.github/workflows/cd-rating-eu.yml

@@ -9,26 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Generate leaderboard
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} yarn publish:ratingleaderboard --region=eu --target=midnight --production
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} bun scripts/buildRatingLeaderboard.ts --region=eu --target=midnight --production

.github/workflows/cd-rating-latest.yml

@@ -9,26 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Generate all leaderboards
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} yarn publish:ratingleaderboard --region=na,asia,eu --target=latest --production
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} bun scripts/buildRatingLeaderboard.ts --region=na,asia,eu --target=latest --production

.github/workflows/cd-rating-na.yml

@@ -9,26 +9,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Generate leaderboard
-        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} yarn publish:ratingleaderboard --region=na --target=midnight --production
+        run: GH_TOKEN=${{ secrets.GH_TOKEN }} DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} bun scripts/buildRatingLeaderboard.ts --region=na --target=midnight --production

.github/workflows/ci-build-bot.yml

@@ -12,32 +12,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Build Prisma
-        run: yarn prisma generate
+        run: bun prisma generate
 
       - name: Build
-        run: yarn build:bot --production
+        run: bun build:bot
 
       - name: Archive build
         uses: actions/upload-artifact@v4

.github/workflows/ci-build-docs.yml

@@ -1,43 +0,0 @@
-name: CI Build Docs
-
-on: push
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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: Build
-        run: yarn build:docs
-
-      - name: Archive build
-        uses: actions/upload-artifact@v4
-        with:
-          name: docs
-          path: dist/docs

.github/workflows/ci-build-website.yml

@@ -12,29 +12,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Use node
-        uses: actions/setup-node@v4
-        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') }}
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: yarn
+        run: bun install
 
       - name: Build
-        run: yarn build:website
+        run: bun build:website
 
       - name: Archive build
         uses: actions/upload-artifact@v4

.gitignore

@@ -19,4 +19,5 @@ temp/
 /.yarn
 depots
 public/sitemap*
-/firebase.json
+/firebase.json
+target

.vscode/settings.json

@@ -19,6 +19,7 @@
     "betakrieg",
     "BINORMAL",
     "Binormals",
+    "bkni",
     "BKRL",
     "BKRTS",
     "BKRTSMANIFEST",
@@ -87,17 +88,21 @@
     "loddist",
     "lods",
     "lossrate",
+    "malum",
     "mantlets",
     "metallicness",
+    "metalness",
     "minitelrose",
     "Minotauro",
     "MIPMAPCOUNT",
     "mišek",
+    "mmnow",
     "modeltransform",
     "MURICA",
     "NEGATIVEX",
     "NEGATIVEY",
     "NEGATIVEZ",
+    "nivo",
     "nmatname",
     "noout",
     "normalmap",
@@ -113,6 +118,7 @@
     "POSITIVEX",
     "POSITIVEY",
     "POSITIVEZ",
+    "precompute",
     "Promisable",
     "protobuf",
     "protos",
@@ -136,6 +142,7 @@
     "Specularity",
     "SSAO",
     "startcase",
+    "statkit",
     "statsfull",
     "steamapps",
     "Stringifying",
@@ -167,6 +174,7 @@
     "wargaming",
     "webp",
     "whitespaces",
+    "WHSS",
     "winrate",
     "wireframe",
     "Woah",
@@ -178,11 +186,12 @@
     "xkdkw",
     "XMLDVPL",
     "YAMLDVPL",
+    "yolo",
     "youtubers",
     "zustand"
   ],
   "deno.enable": false,
   "deno.unstable": false,
-  "cSpell.enableFiletypes": ["glsl"],
+  "cSpell.enableFiletypes": ["glsl", "proto3"],
   "typescript.tsdk": "node_modules\\typescript\\lib"
 }

LICENSE

@@ -1,21 +1,661 @@
-MIT License
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
-Copyright (c) 2023 TrèsAbhi
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
 
-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:
+                            Preamble
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server 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.
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -1,3 +1,9 @@
+## Visit the website
+
+### https://blitzkit.app/
+
+![BlitzKit website](https://i.imgur.com/m8e39Rv.png)
+
 # BlitzKit
 
 [![built with Codeium](https://codeium.com/badges/main)](https://codeium.com)
@@ -10,12 +16,6 @@ Go to [application directory for BlitzKit](https://discord.com/application-direc
 
 ![BlitzKit application directory](https://i.imgur.com/YWCtOuJ.png)
 
-## Visit the website
-
-### https://blitzkit.app/
-
-![BlitzKit website](https://i.imgur.com/bdYMUCL.png)
-
 ## Visit the documentation website
 
 ### https://tresabhi.github.io/blitzkit/

discord.json

@@ -1,14 +1,4 @@
 {
   "client_id": "1097673957865443370",
-  "client_id_dev": "1099063696015229078",
-
-  "sklld_guild_id": "894784231677513819",
-  "sklld_verify_channel": "909968131873726545",
-  "sklld_verify_role": "909968395154358333",
-  "sklld_peasant_role": "896878529512370228",
-
-  "tres_guild_id": "734786591205359697",
-  "tres_log_channel": "1109262265850544148",
-
-  "test_guild_id": "1124729294829142116"
+  "client_id_dev": "1099063696015229078"
 }

docs/about/credits.md

@@ -15,3 +15,4 @@ BlitzKit is a one man band **TrèsAbhi** but I am far from solo.
 | Tankopedia pre-release testing | [OPTML], Aeson, \_34, Droodles |
 | Website advertisement platform | Aeson, Droodles                |
 | Compare pre-release testing    | [OPTML], Droodles              |
+| Redacted                       | GonnaHetzMe                    |

docs/changelogs/1.20.4.md

@@ -0,0 +1,13 @@
+# BlitzKit 1.20.4
+
+Continuing the revamping UI train, this release tanks the tank search page.
+
+## Changes
+
+- Tanks are now displayed naked, not bounded by a button
+- The filters are now far more compact, responsive, and intuitive
+- The search bar is now faster and shows skeletons when loading
+- The sort feature now displays the values of tanks used to sort underneath the tank's names
+- Nations are now ordered in the way they are in-game
+- When filtering tanks in testing, a work-in-progress warning is shown
+- When there are no results, a proper message is shown

docs/changelogs/1.20.5.md

@@ -0,0 +1,28 @@
+# BlitzKit 1.20.5
+
+Some QOL changes incoming!
+
+## Changes
+
+- The penetration of the shooter is now displayed above the shell switcher
+- The shot display card is now shown below the tank instead of to the side on narrow screens
+- Added a few more stats to Compare and Tankopedia
+  - Max dispersion
+  - Clipping potential for auto-loaders and auto-reloaders
+  - Raw terrain resistance coefficients
+- Renamed the "Fire" section to "Firepower"
+- The shell selector for the protagonist tank has been moved to the Firepower section's title
+- The table layout of Compare has been compacted and indented in places
+- The tank class and type has now displayed in the hero section of the Tankopedia
+- Removed the default tier X filter
+- Added draggable tracks
+- Added the ability to sort by premium shell DPM
+
+## Fixes
+
+- Clicking enter no longer changes the tank you're viewing when selecting the shooter tank
+- The open in new tab button in Compare now opens in a new tab
+- HEAT shells no longer display ricochet angle
+- The gun depression is now properly reported for the Minotauro line
+- Stopped autofocus of the ghost button in the login card
+- Patreon login now handles bad responses

docs/changelogs/1.21.0.md

@@ -0,0 +1,19 @@
+# BlitzKit 1.21.0
+
+Introducing the Tank performance tool! This release only affects the websites.
+
+## Features
+
+- Added the Tank performance tool which lists all tanks in the game and how players are performing in them
+  - This tool features the same tank filters as the Tankopedia search page
+  - The number of players in any given period can be viewed by switching the period from the dropdown
+  - This list updated daily
+- The tankopedia search page now loads much faster
+  - Not all tanks are loaded at once; rather, more tanks are loaded as you scroll down the page (the same as Tank performance)
+  - The tank pages also load lightning fast now
+- Tank compare now feature sticky headers and runs must faster
+- Reduced ads in a few places
+
+## Fixes
+
+- The footer is now better centered

docs/changelogs/1.21.1.md

@@ -0,0 +1,22 @@
+# BlitzKit 1.21.1
+
+One wise man said, experimental is literally in the name of experimental technology.
+
+## Features
+
+- Added a button on the right above the shells to quickly switch antagonist guns
+- Terrain resistance coefficients are now displayed as coefficients
+
+## Fixes
+
+- The shot display card now once again shows up on-screen
+- The shot tracer is also now correctly aligned
+- Tank tracks no longer interfere with camera rotation
+- "NaN" deltas don't show up in the stats section
+- The default provisions algorithm has been improved so most tanks should now have the best provisions by default
+- The tree type icon in the Tankopedia hero section is now colored properly
+- Removed "Battles" from Tank performance as it's simply inaccurate
+  - This feature will come back when player stats are released
+- Tank cell headers are now more consistently sized
+- Armor mode no longer causes Next.js hydration issues (even faster Tankopedia loading!)
+- The antagonist selector for the Tankopedia page now once again works

docs/changelogs/1.21.2.md

@@ -0,0 +1,8 @@
+# BlitzKit 1.21.2
+
+Freshly baked buns, anyone? This update only affects the bot.
+
+## Technical Changes
+
+- Switched from Node to Bun (faster everything!)
+- Removed legacy features like the custom welcome message for the SKLLD Discord server

docs/technical/bkni.md

@@ -1,181 +0,0 @@
-![Neutrality Index](https://i.imgur.com/XcGy5rh.png 'Neutrality Index')
-
-# BlitzKit Neutrality Index
-
-> [!CAUTION]
-> This is a working draft and is incomplete. Do not implement.
-
-## Why BkPM over WN8?
-
-BkPM addresses a lot of issues with WN8:
-
-- WN8 incorporates win rate into the metric; a metric like this must be a correlate of win rate, not a dependent
-- The weights and biases are not dynamic and their formulation is not transparent
-- WN8 values do not asymptote under extreme conditions resulting in meaninglessly large or negative values
-- WN8 has too many digits; it doesn't make sense to differentiate between players with sub-one-thousandth's worth of precision
-
-## Preface
-
-The goal of this paper is to deliver a numerical metric for judging player performance by converging all statistics down to a single, easy-to-consume, human-readable value. This must be a mathematically elegant process that yields a reasonable number that asymptotes under extreme situations. More specifically, this value should equal 0, on average across all players and tanks. Extreme cases should be mapped onto the range $[-1, 1]$. To attain the human readable value, we will be transforming the raw metric to a scale of $[0, 2s]$ using $M=\operatorname{round}\left(sR+s\right)$ where $M$ is the resulting human-readable metric, $s = 100$ is an arbitrary scaling factor, and $R$ is the raw metric.
-
-Wargaming provides cumulative statistics for players and tanks. The big idea is to average all provided statistics together to get one unified value. We will also incorporate other composite values based on these default statistics into the average. However, averaging this way poses two problems:
-
-1. All statistics do not scale equally. For example, good players performing with 3,000 damage per battle could also attain a kill-to-death ratio of 3. But averaging them as-is would imply damage per battle has weight 1000 times that of the kill ratio. In other words, damage per battle would totally diminish the impact of kill ratios on the average. Hence, there’s a need for normalization. Normalization, in most cases, simply means dividing by the corresponding averages.
-2. All statistics are not equally important. For example, dealing damage is arguably far more important than base capture; hence, it does not make sense to average them together. But this does not mean we totally discard this value as it does make an impact albeit very small. Instead, we will be incorporating weighted averages where the weights will be calculated through correlational analysis against win rate. Specifically, the weights of the statistics will be the corresponding correlation coefficient, r. One caveat to look out for is that r can be negative for statistics like damage received which must be minimized. Fortunately, negative weights are okay and make intuitive sense; after all, bleeding health should punish the metric.
-
-## Computation
-
-$\mu$ is a simple weighted average of statistics across all players where $C_{battles}$ is the number of player battles and $x_{i}$ is the statistic for player $i$.
-
-$$
-\mu=\frac{\sum_{ }^{ }C_{battles}x_{i}}{\sum_{ }^{ }C_{battles}}
-$$
-
-$\sigma$ is the standard deviation of the statistic across all players. Below is a refresher of the formula where $x_{i}$ is the statistic for player $i$ and $n$ is the number of players (or the sample size).
-
-$$
-\sigma=\sqrt{\frac{\sum_{ }^{ }\left(x_{i}-\mu\right)^{2}}{n}}
-$$
-
-A normalized atomic statistic is provided by the equation below where $x$ is the player's statistic being evaluated, $\mu$ is the mean of the statistic across all players, and $\sigma$ is the standard deviation of the statistic across all players. During computation, one may pre-compute and reuse $\gamma=x-\mu$.
-
-$$
-A=\frac{x-\mu}{\left|x-\mu\right|}\left(1-e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^{2}}\right)=\frac{\gamma}{\left|\gamma\right|}\left(1-e^{-\frac{1}{2}\left(\frac{\gamma}{\sigma}\right)^{2}}\right)
-$$
-
-$r$ is the correlation coefficient of the statistic across all players. Below is a refresher of the formula where $x_{i}$ is the statistic for player, $y_{i}$ is the player's win rate, $\mu$ is the mean of the statistic across all players, and $\overline{y}$ is the average win rate across all players.
-
-$$
-r=\frac{\sum_{ }^{ }\left(x_{i}-\mu\right)\left(y_{i}-\overline{y}\right)}{\sqrt{\sum_{ }^{ }\left(x_{i}-\mu\right)^{2}\sum_{ }^{ }\left(y_{i}-\overline{y}\right)^{2}}}
-$$
-
-$m$ is the slope of the least squares regression line. Below is a refresher of the formula where $x_i$ is the player's statistic being evaluated, $y_i$ is the player's win rate, and $n$ is the number of players (or the sample size).
-
-$$
-m=\frac{n\sum_{ }^{ }x_{i}y_{i}-\sum_{ }^{ }x_{i}\sum_{ }^{ }y_{i}}{n\sum_{ }^{ }x_{i}^{2}-\left(\sum_{ }^{ }x_{i}\right)^{2}}
-$$
-
-The weight of an atomic statistic is $w$ where $r$ is the correlation coefficient between the statistic and win rate, $\mu$ is the mean of the statistic across all players, and $m$ is the slope of the least squares regression line.
-
-$$
-w=\left|r\right|\mu m
-$$
-
-The raw metric is the weighted average of all atomic statistics.
-
-$$
-R=\frac{\sum_{ }^{ }wA}{\sum_{ }^{ }w}
-$$
-
-The final human-readable metric will be passed through the following transformation where $s=100$.
-
-$$
-M=\operatorname{round}\left(sR+s\right)
-$$
-
-## Constants
-
-A few constants that the rest of the paper depends on. Available under the “constants” object.
-
-```ts
-players_per_team = 7;
-```
-
-## Wargaming-Provided Statistics
-
-Wargaming provides the following pieces of statistics for each player and tank. These are cumulative; in other words, they simply add up over time and it is up to the recorder to contrast two snapshots of said statistics in time to get periodical statistics. Available under the “all” object.
-
-```ts
-battles;
-capture_points;
-damage_dealt;
-damage_received;
-dropped_capture_points;
-frags; // kills
-frags8p; // frags against tanks at or above tier 8
-hits;
-losses;
-max_frags;
-max_frags_tank_id;
-max_xp;
-max_xp_tank_id;
-shots;
-spotted;
-survived_battles;
-win_and_survived;
-wins;
-xp;
-```
-
-## Composite Statistics
-
-Raw statistics from Wargaming can be combined into more meaningful numeric snippets. Most of these values are divided by all.battles indicating they are the average across all battles in the given period. Assigned under the “composite” object.
-
-```ts
-win_rate = all.wins / all.battles;
-capture_points = all.capture_points / all.battles;
-damage_dealt = all.damage_dealt / all.battles;
-damage_received = all.damage_received / all.battles;
-dropped_capture_points = all.dropped_capture_points / all.battles;
-frags = all.frags / all.battles;
-hits = all.hits / all.battles;
-shots = all.shots / all.battles;
-spotted = all.spotted / all.battles;
-survival_rate = all.survived_battles / all.battles;
-xp = all.xp / all.battles;
-damage_ratio = all.damage_dealt / all.damage_received;
-accuracy = all.hits / all.shots;
-damage_per_hit = composite.damage_dealt / composite.hits;
-```
-
-## Normalized Statistics
-
-We will be using the standard deviation and the mean of each metric supplied to this expression below to normalize each metric in the range $[-1, 1]$. The goal is to map the mean of the statistic to $0$, and the extrema to $-1$ and $1$ (whichever direction that may be in).
-
-$$
-\frac{x-\mu}{\left|x-\mu\right|}\left[1-e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^{2}}\right]
-$$
-
-During computation, one may pre-compute and reuse $\gamma=x-\mu$ in:
-
-$$
-\frac{\gamma}{\left|\gamma\right|}\left[1-e^{-\frac{1}{2}\left(\frac{\gamma}{\sigma}\right)^{2}}\right]
-$$
-
-Here is an example of HisRoyalFatness scoring a very high $0.988$ with the frags metric with his [XM551 Sheridan](https://blitzkit.app/tools/tankopedia/20257). $\mu=0.7694$, $\sigma=0.2492$, and $x=1.5113$, HisRoyalFatness' average frags. At $x = 0$ (if the player manages to get no frags), the metric drops nearly to $-1$ and vice versa. And, at $x=\mu$, the metric is exactly $0$.
-
-![](https://i.imgur.com/aIUQmGF.png)
-
-### Derivation
-
-We start with the standard normal distribution formula
-
-$$
-\frac{1}{\sigma\sqrt{2\pi}}e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^{2}}
-$$
-
-![](https://i.imgur.com/a10m8Xz.png)
-
-We remove the coefficient to transform the range of the function from $\left(0,\frac{1}{\sigma\sqrt{2\pi}}\right]$ to $\left(0,1\right]$. From this point onwards, I will be using the substitution $\gamma=x-\mu$.
-
-$$
-e^{-\frac{1}{2}\left(\frac{\gamma}{\sigma}\right)^{2}}
-$$
-
-![](https://i.imgur.com/67DO69i.png)
-
-Then we mirror the function across $y=\frac{1}{2}$ to allow the function to be rewarding as you reach the extrema.
-
-$$
-1-e^{-\frac{1}{2}\left(\frac{\gamma}{\sigma}\right)^{2}}
-$$
-
-![](https://i.imgur.com/1J0cTyb.png)
-
-Finally, to punish the function as you approach the left extreme, we flip the sign of the function when $x<\mu$. One may choose to implement this as a piece-wise function (especially when implementing this in a computer), but I have chosen to represent it as one unified coefficient in this paper.
-
-$$
-\frac{\gamma}{\left|\gamma\right|}\left[1-e^{-\frac{1}{2}\left(\frac{\gamma}{\sigma}\right)^{2}}\right]
-$$
-
-![](https://i.imgur.com/O8stVlJ.png)

docs/technical/wss.md

@@ -0,0 +1,166 @@
+# Weighted Standard Score (WSS)
+
+A next generation metric in judging player performance.
+
+## Pre-requisites
+
+This paper delves deep into mathematics and statistics which most may not be familiar with. You will need some basic understanding of normal distributions, correlation analysis, regressions, summation, set builder notation, and calculus.
+
+## Preface
+
+WSS delivers a single, easy to consume number that measures the performance of a player independent to their winrate so that it is easy to judge their contribution to the team regardless of the performance of the other players in the team. This allows you to judge wether the player in question is "pulling their own weight."
+
+The mathematics behind this metric has been intentionally generalized such that it isn't limited to just World of Tanks Blitz. You will be easily able to apply this metric in any other game/sport.
+
+## Understanding The Metric
+
+On average, the score across all players will be $0$. This is because the metric is essentially a convolution of multiple standard scores and their corresponding weights. A standard score of $z=\pm1$ implies an offset by $\pm\sigma$ ($1$ standard deviation) from $\mu$ (the mean). And since the scalar of WSS is $C=1000$, $z=\pm1\iff M=\pm 1C=\pm1000$.
+
+About $68.3\%$ of players lie within $\pm1\sigma\implies M=\pm1000$, about $95.4\%$ of players lie within $\pm2\sigma\implies M=\pm200$, and about $99.7\%$ of players lie within $\pm3\sigma\implies M=\pm300$.
+
+## Computation
+
+The final metric, $M$, is an integer where $0$ is the average score across all players, $-1000$ is $-\sigma$ away from $\mu$, and $1000$ is $\sigma$. This allows for a clear distinction between players that are hurting the team and who are actually helping since players with a negative score have a negative standard score, tied tightly with basic distributional statistics.
+
+$M$, the human-readable metric, is a function of $Z$, the raw score where $C=1000$ is an arbitrary scaling factor.
+
+$$
+M=\text{round}\left(CZ\right)
+$$
+
+$Z$ is the weighted average of all $z$ ("standard score," which $z$ stands for, will be discussed later) with weights $w$.
+
+$$
+Z=\frac{\sum wz}{\sum w}
+$$
+
+$w$, the weight of each standard score is just $r$, the correlation coefficient. This value must be determined for each standard scores through corelation analysis. $r$ is allowed to be negative so that standard scores that actually harm the player's winrate will have a negative effect on the weighted average. We will be using the weighted variant of $r$ where $w_i$, the weight of the sample, is the number of battles, $\overline{x}$ the weighted average of the samples' $x$ components and $\overline{y}$ the weighted average of the samples' $y$ components (usually the winrate).
+
+$$
+w=r=\frac{\sum w_{i}\left(x_{i}-\overline{x}\right)\left(y_{i}-\overline{y}\right)}{\sqrt{\sum w_{i}\left(x_{i}-\overline{x}\right)^{2}\sum w_{i}\left(y_{i}-\overline{y}\right)^{2}}}
+$$
+
+Calculating $\overline{x}$ and $\overline{y}$ is straightforward. Do note that $\mu=\overline{x}$.
+
+$$
+\overline{x}=\mu=\frac{\sum w_{i}x_{i}}{\sum w_{i}}
+$$
+
+$$
+\overline{y}=\frac{\sum w_{i}y_{i}}{\sum w_{i}}
+$$
+
+In a similar fashion, we will also need the standard deviation $\sigma$.
+
+$$
+\sigma=\sqrt{\frac{\sum w_{i}\left(x_{i}-\mu\right)^{2}}{\sum w_{i}}}
+$$
+
+Note that $r$, $\sigma$, $\mu$, $\overline{x}$, and $\overline{y}$ use many of the same summations just in different places. During real computation, I would highly recommend pre-computing all the summations and deploying them to use to avoid excessive computation. This makes a world of difference when sampling hundreds of millions of players.
+
+$z$ is the standard score which uses the precomputed values of $\mu$ and $\sigma$. The variable $x$ represents the input statistic of the player in question.
+
+$$
+z=\frac{x-\mu}{\sigma}
+$$
+
+## Human-Readability
+
+### Bar Size and Position
+
+> [!NOTE]
+> The bar colors in the example graphics below may not be representative of the real scale. Read "Bar Color" for more details.
+
+Presenting $M$ may not be sufficient in conveying the metric. It is convention to display a "progress bar" that directly represents the percentile of the player which can be derived directly from the raw score, $Z$, since its a weighted average of standard scores.
+
+A standard score of $z=0.65\implies Z=650$ corresponds to the $75\%$ percentile. That is $25\%$ above the average $50\%$. This is visualized by a green bar halfway full.
+
+![](https://i.imgur.com/MdKZj36.png)
+
+$z=1.20\implies Z=1200$ is the $88\%$ percentile. The bar is now three quarters full.
+
+![](https://i.imgur.com/p1vG7B2.png)
+
+Thus, by extension, negative scores are red bars originating from the right. $z=-1.20\implies Z=-1200$ is the $12\%$ percentile.
+
+![](https://i.imgur.com/0ncSOn4.png)
+
+Generalizing this, for any given raw score $Z$, the percentile can be calculated as follows.
+
+$P=\Phi\left(Z\right)$
+
+And $\Phi$ is the cumulative distribution function. That being said, most languages will offer some library or built-in function to compute $\Phi$.
+
+$\Phi\left(x\right)=\frac{1}{\sqrt{2\pi}}\int_{-\infty}^{x}e^{-\frac{t^{2}}{2}}dt$
+
+For any given value of $P$, the size of the bar is $B$.
+
+$B=\left|2P-1\right|$
+
+The bar originates from the left if $P>0.5=50\%\iff Z>0\implies M\ge0$ ($M$ may still be $0$ due to rounding). It originates from the right if $P<0.5=50\%\iff Z=0\implies M\le0$. And when $P=0.5=50\%\iff Z=0\implies M=0$, it is completely empty.
+
+### Bar Color
+
+The color of the bar is also a function of the percentile. $\Phi$ isn't a cheap function, so I would recommend computing these on-demand and memoize the results. Or, alternatively, you could precompute the associated $Z$ values for $P$ and use those to determine the colors. The colors that [BlitzKit](https://blitzkit.app/) uses are shown in the image below.
+
+![](https://i.imgur.com/3T4BchO.png)
+
+BlitzKit uses [Radix Colors](https://www.radix-ui.com/colors/docs/palette-composition/scales) and the scales used in the image above are as follows respectively.
+
+- tomato
+- orange
+- amber
+- yellow
+- lime
+- green
+- teal
+- cyan
+- pink
+- plum
+- purple
+
+## FAQ
+
+### (WoTB specific) Why WSS over WN8?
+
+- Lot less aggressive: the weights of WN8 are disproportionately distinct from one another allow people to easily find "what makes the metric tick" and exploit it to "farm" higher WN8 with that being the only the explicit goal. WSS, on the other hand, because of its symmetric and normal nature, will remain at a similar value even if a player choses to aggressively maximize one statistic.
+- Mathematically grounded: every constant of WSS is based in data. Unlike WN8, it is recommended to recompute the constants of WSS often. In BlitzKit's implementation, an approximate 24 million players are samples every day to keep the metric relevant.
+- Easy to read: WN8 provides no clear indication of where the average is. WSS, on the other hand, clearly states that negative scores cause a lower than average chances of winning, a positive score causes a higher chance of winning, and 0 being the average.
+- Doesn't use winrate: WSS is strictly not a function of winrate. WN8, on the other hand, is majorly influenced by winrate and even XP. WSS is a measurement of your true performance regardless of what RNG may throw at you.
+
+### Why doesn't the weight include the slope of the linear regression?
+
+Doing this would make $w=\left|r\right|m$ or $w=r^{2}m$ where $\left|r\right|$ or $r^{2}$ represents the "confidence" in the standard score and $m$ is the "rate of effectiveness". Doing this was decided against because a drop in $m$ inherently implies a drop in the corelation $r$.
+
+To rephrase, this is what real data looks like where $r$ drops with $m$; there is no need to include both (https://www.desmos.com/calculator/0p5kye1s7z).
+
+![](https://i.imgur.com/6gHCYUZ.gif)
+
+And this is what real data **DOES NOT** look like where $r$ remains constant as $m$ drops (https://www.desmos.com/calculator/5yfl2ulemf).
+
+![](https://i.imgur.com/iCbuun3.gif)
+
+## WoTB Specific Notes
+
+Corelation analysis must be performed on a per-tank basis. If the goal is to evaluate the performance of a player instead of the player's performance in a tank, analysis should still be done on all played tanks severalty and must be averages with weights being the number of battles played by the player in each tank.
+
+The Wargaming API provides many pieces of statistics on a per-tank basis (as listed below). These values cumulate over time as the player plays more games; hence, all of these values must be normalized by dividing each metric by `all.battles`. I will go through and list which of the statistics need to be included as standard scores and why/why not. Omitted statistics must not be included and are obvious why they aren't used.
+
+- ✔️ `battle_life_time`: Normalization of this value results in the average time spent alive in seconds. Good players strive to stay alive for as long as possible and must be rewarded while people who "yolo" at the beginning of the game will be penalized.
+- ❌ `all.battles`: Dividing this by itself will result in 1. Corelation analysis will always fail due to division by 0.
+- ✔️ `all.capture_points`: Capturing points almost always have a negative corelation coefficient; hence, its inclusion is vital to punish players who waste time capturing points.
+- ✔️ `all.damage_dealt`
+- ✔️ `all.damage_received`
+- ✔️ `all.dropped_capture_points`: Dropping capture points by dealing damage to opponents in base capture usually results in a very tiny positive corelation coefficient; nonetheless, it does have an effect on gameplay thus it is included.
+- ✔️ `all.frags`
+- ❌ `all.frags8p`: This value is `null` on most tanks below tier VIII because it only measures frags of and above tier VIII. Breaks math, pointless feature; do not include.
+- ✔️ `all.hits`
+- ❌ `all.losses`: Function of winrate.
+- ❌ `all.max_frags`: Normalization with division by `all.battles` renders this metric useless. Do not include.
+- ❌ `all.max_xp`: Just like `all.max_frags`, this metric does not accumulate over time. Do not include.
+- ✔️ `all.shots`
+- ✔️ `all.spotted`
+- ❌ `all.survived_battles`: Function of winrate.
+- ❌ `all.win_and_survived`: Function of winrate.
+- ❌ `all.wins`: Function of winrate.
+- ❌ `all.xp`: Function of winrate.

next.config.js

@@ -1,15 +1,28 @@
 import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
+import { readdirSync, writeFileSync } from 'fs';
 
 const withVanillaExtract = createVanillaExtractPlugin({ tests: /\.css$/ });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   ...withVanillaExtract({
-    webpack: (config) => {
+    webpack: (config, { isServer }) => {
       config.module.rules.push({
         test: /\.glsl$/,
         type: 'asset/source',
       });
+
+      if (isServer) {
+        writeFileSync(
+          'public/assets/versions.json',
+          JSON.stringify(
+            readdirSync('docs/changelogs').map((file) =>
+              file.replace('.md', ''),
+            ),
+          ),
+        );
+      }
+
       return config;
     },
   }),
@@ -24,7 +37,11 @@ const nextConfig = {
   },
 
   distDir: 'dist/website',
-  reactStrictMode: false,
+  reactStrictMode: true,
+
+  experimental: {
+    workerThreads: false,
+  },
 };
 
 export default nextConfig;

package.json

@@ -1,114 +1,113 @@
 {
   "name": "blitzkit",
-  "version": "1.20.3",
+  "version": "1.21.2",
   "description": "🎉 Tools for everything World of Tanks Blitz",
   "main": "src/server.ts",
   "type": "module",
   "scripts": {
+    "build:assets": "bun scripts/buildAssets/index.ts",
     "build:averages": "bun scripts/averages",
     "build:db": "prisma generate",
-    "build:bot": "vite-node --script scripts/build --production",
-    "build:website": "yarn build:db && yarn build:sitemap && next build",
-    "build:sitemap": "vite-node --script scripts/sitemap",
+    "build:bot": "rm -rf dist/bot && bun build src/index.ts src/workers/bot.ts src/workers/render.ts --outdir dist/bot --target=bun --splitting --sourcemap=inline && cp -R src/lang dist/bot/lang",
+    "build:website": "bun build:db && bun build:sitemap && next build",
+    "build:sitemap": "bun scripts/sitemap.ts",
     "build:docs": "vitepress build docs",
-    "build:ratingleaderboard": "vite-node --script scripts/buildRatingLeaderboard",
-    "build:assets": "vite-node --max_old_space_size=16384 --script scripts/buildAssets/index",
-    "test": "vite-node --script scripts/test",
-    "test2": "vite-node --script scripts/test2",
-    "dev:bot": "vite-node --script scripts/build && yarn start:bot",
+    "build:ratingleaderboard": "bun --script scripts/buildRatingLeaderboard.ts",
+    "dev:bot": "bun build:bot && bun start:bot",
     "dev:docs": "vitepress dev docs",
     "dev:website": "next dev",
-    "start:bot": "node --enable-source-maps dist/bot/index.cjs",
+    "start:bot": "bun dist/bot/index.js",
     "start:website": "next start",
     "host:docs": "vitepress preview docs",
-    "publish:ratingleaderboard": "vite-node --script scripts/buildRatingLeaderboard --publish",
-    "setup:patches": "vite-node --script scripts/applyPatches",
     "lint": "npx tsc",
     "lint:website": "next lint",
     "format": "prettier --write \"**/*.@(json|js|jsx|css|md|ts|tsx|html|xml|yml|gltf)\"",
-    "lint:version": "vite-node --script scripts/checkVersionMissMatch",
     "knip": "knip",
     "update": "yarn upgrade --latest",
-    "setup:depotdownloader": "vite-node --script scripts/setupDepotDownloader",
     "tunnel": "cloudflared tunnel --url http://localhost:3000",
     "discoverids": "scripts/discoverIds.ts"
   },
   "license": "MIT",
   "dependencies": {
-    "@gltf-transform/core": "^3.9.0",
-    "@octokit/plugin-throttling": "^8.1.3",
-    "@octokit/rest": "^20.0.1",
-    "@prisma/client": "^5.4.1",
+    "@gltf-transform/core": "^3.10.1",
+    "@nivo/bar": "^0.87.0",
+    "@octokit/plugin-throttling": "^8.2.0",
+    "@octokit/rest": "^20.1.1",
+    "@prisma/client": "^5.16.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/themes": "^3.0.1",
-    "@react-three/drei": "^9.93.0",
-    "@react-three/fiber": "^8.15.14",
-    "@resvg/resvg-js": "^2.4.1",
+    "@radix-ui/themes": "^3.1.1",
+    "@react-three/drei": "^9.108.3",
+    "@react-three/fiber": "^8.16.8",
+    "@resvg/resvg-js": "^2.6.2",
     "@types/three": "^0.160.0",
-    "@vanilla-extract/css": "^1.13.0",
-    "adm-zip": "^0.5.12",
+    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/dynamic": "^2.1.1",
+    "adm-zip": "^0.5.14",
     "bepaint": "^0.1.0-beta.3",
+    "csv-parse": "^5.5.6",
     "decompress": "^4.2.1",
-    "discord.js": "^14.13.0",
-    "dotenv": "^16.3.1",
-    "esbuild": "^0.19.3",
-    "express": "^4.18.2",
+    "discord.js": "^14.15.3",
+    "dotenv": "^16.4.5",
+    "esbuild": "^0.19.12",
+    "express": "^4.19.2",
     "false": "^0.0.4",
     "fuzzysort": "^2.0.4",
     "googleapis": "^134.0.0",
-    "immer": "^10.0.2",
+    "immer": "^10.1.1",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
     "markdown-escape": "^2.0.0",
     "markdown-to-jsx": "^7.4.7",
-    "next": "^14.1.0",
+    "next": "^14.2.5",
     "parse-dds": "^1.2.1",
     "pickleparser": "^0.2.1",
-    "postprocessing": "^6.34.1",
+    "postprocessing": "^6.35.6",
     "progress": "^2.0.3",
-    "protobufjs": "^7.2.6",
-    "react": "^18.2.0",
+    "protobufjs": "^7.3.2",
+    "react": "^18.3.1",
     "react-device-detect": "^2.2.3",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
     "react-fuzzysort": "^1.0.1",
     "react-promise-suspense": "^0.3.4",
-    "satori": "^0.10.13",
+    "satori": "^0.10.14",
     "sharp": "^0.33.4",
     "three": "0.159.0",
-    "three-stdlib": "^2.29.4",
-    "vite-node": "^0.34.5",
-    "vitepress": "^1.0.0-rc.20",
-    "vitepress-plugin-auto-sidebar": "^1.1.0",
-    "yaml": "^2.3.4",
-    "zustand": "^4.4.1"
+    "three-stdlib": "^2.30.4",
+    "vitepress": "^1.3.0",
+    "vitepress-plugin-auto-sidebar": "^1.2.0",
+    "yaml": "^2.4.5",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/adm-zip": "^0.5.5",
+    "@types/bun": "^1.1.6",
     "@types/decompress": "^4.2.7",
-    "@types/escape-html": "^1.0.2",
-    "@types/express": "^4.17.18",
-    "@types/js-yaml": "^4.0.8",
-    "@types/lodash": "^4.14.199",
+    "@types/escape-html": "^1.0.4",
+    "@types/express": "^4.17.21",
+    "@types/js-yaml": "^4.0.9",
+    "@types/lodash": "^4.17.6",
     "@types/lz4": "^0.6.4",
     "@types/lz4js": "^0.2.1",
-    "@types/markdown-escape": "^1.1.0",
-    "@types/node": "^20.6.5",
+    "@types/markdown-escape": "^1.1.3",
+    "@types/node": "^20.14.10",
     "@types/parse-dds": "^1.0.3",
-    "@types/pngjs": "^6.0.4",
+    "@types/pngjs": "^6.0.5",
     "@types/progress": "^2.0.7",
-    "@types/react": "^18.2.22",
-    "@vanilla-extract/next-plugin": "^2.3.1",
+    "@types/react": "^18.3.3",
+    "@vanilla-extract/next-plugin": "^2.4.3",
     "compare-versions": "^6.1.0",
     "crc": "^4.3.2",
-    "fast-xml-parser": "^4.3.2",
-    "knip": "^3.4.0",
-    "lz4": "^0.6.5",
-    "prettier": "^3.0.3",
-    "prisma": "^5.4.1",
-    "typescript": "^5.4.5"
+    "fast-xml-parser": "^4.4.0",
+    "knip": "^3.13.2",
+    "prettier": "^3.3.2",
+    "prisma": "^5.16.2",
+    "typescript": "^5.5.3"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "trustedDependencies": [
+    "protobufjs"
+  ]
 }

public/assets/versions.json

@@ -0,0 +1 @@
+["1.10.0","1.10.1","1.10.2","1.11.0","1.12.0","1.12.1","1.12.2","1.12.3","1.12.4","1.12.5","1.12.6","1.12.7","1.12.8","1.12.9","1.13.0","1.13.1","1.13.2","1.13.3","1.14.0","1.14.1","1.14.2","1.14.3","1.14.4","1.15.0","1.15.1","1.15.10","1.15.11","1.15.12","1.15.13","1.15.2","1.15.3","1.15.4","1.15.5","1.15.6","1.15.7","1.15.8","1.15.9","1.16.0","1.16.1","1.16.2","1.16.3","1.16.4","1.17.0","1.17.1","1.17.2","1.18.0","1.18.1","1.18.2","1.18.3","1.19.0","1.19.1","1.19.2","1.19.3","1.19.4","1.19.5","1.19.6","1.20.0","1.20.1","1.20.2","1.20.3","1.20.4","1.20.5","1.21.0","1.21.1","1.3.0","1.3.1","1.3.2","1.3.3","1.4.0","1.4.1","1.5.0","1.5.1","1.5.2","1.5.3","1.5.4","1.6.0","1.7.0","1.7.1","1.7.2","1.7.3-1.7.4","1.7.5","1.7.6","1.7.7","1.8.0","1.8.1","1.9.0","1.9.1","1.9.2","1.9.3","1.9.4","1.9.5"]

public/protos/blitzkit.proto

@@ -0,0 +1,47 @@
+syntax = "proto3";
+
+package blitzkit;
+
+message AverageDefinitions {
+  map<uint32, AverageDefinitionsEntry> averages = 1;
+  Samples samples = 2;
+  uint64 time = 3;
+}
+
+message AverageDefinitionsEntry {
+  AverageDefinitionsAllStats mu = 1;
+  AverageDefinitionsAllStats sigma = 2;
+  AverageDefinitionsAllStats r = 3;
+  Samples samples = 4;
+}
+
+message AverageDefinitionsAllStats {
+  float battles = 1;
+  float capture_points = 2;
+  float damage_dealt = 3;
+  float damage_received = 4;
+  float dropped_capture_points = 5;
+  float frags = 6;
+  float frags8p = 7;
+  float hits = 8;
+  float losses = 9;
+  float max_frags = 10;
+  float max_xp = 11;
+  float shots = 12;
+  float spotted = 13;
+  float survived_battles = 14;
+  float win_and_survived = 15;
+  float wins = 16;
+  float xp = 17;
+  float battle_life_time = 18;
+}
+
+message Samples {
+  uint32 d_1 = 1;
+  uint32 d_7 = 2;
+  uint32 d_30 = 3;
+  uint32 d_60 = 4;
+  uint32 d_90 = 5;
+  uint32 d_120 = 6;
+  uint32 total = 7;
+}

scripts/averages.ts

@@ -1,264 +1,243 @@
-import { times } from 'lodash';
-import { compress } from 'lz4js';
+import { chunk, times } from 'lodash';
 import { argv } from 'process';
-import ProgressBar from 'progress';
 import { Region, REGIONS } from '../src/constants/regions';
+import { getAccountInfo } from '../src/core/blitz/getAccountInfo';
 import getTankStats from '../src/core/blitz/getTankStats';
-import { idToRegion, MAX_IDS, MIN_IDS } from '../src/core/blitz/idToRegion';
-import { asset } from '../src/core/blitzkit/asset';
+import { idToRegion } from '../src/core/blitz/idToRegion';
 import {
   AverageDefinitions,
-  AverageDefinitionsAllStats,
+  AverageDefinitionsEntry,
+  AverageDefinitionsEntrySubPartial,
+  AverageDefinitionsManifest,
+  Samples,
 } from '../src/core/blitzkit/averageDefinitions';
-import { averageDefinitionsAllStatsKeys } from '../src/core/blitzkit/averageDefinitions/constants';
+import {
+  averageDefinitionsAllStatsKeys,
+  emptySamples,
+} from '../src/core/blitzkit/averageDefinitions/constants';
 import { commitAssets } from '../src/core/blitzkit/commitAssets';
-import { superCompress } from '../src/core/blitzkit/superCompress';
-import { DidsReadStream, DidsWriteStream } from '../src/core/streams/dids';
+import { fetchPreDiscoveredIds } from '../src/core/blitzkit/fetchPreDiscoveredIds';
+import { encodeToBase64 } from '../src/core/protobuf/encodeToBase64';
 import { IndividualTankStats } from '../src/types/tanksStats';
 
-const RUN_TIME = 1000 * 60 * 60;
-const MAX_REQUESTS = 10;
+interface DataPoint {
+  x: number;
+  y: number;
+  w: number;
+}
+
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+// const MAX_ACTIVITY_TIME = 120 * DAY;
+// const MIN_BATTLES = 5000;
+const RUN_TIME = 5 * HOUR + 55 * MINUTE;
+const THREADS = 10;
+const PLAYER_IDS_PER_CALL = 100;
 
-const production = argv.includes('--production');
 const startTime = Date.now();
-const fields = 'all,tank_id,battle_life_time';
+const production = argv.includes('--production');
+const preDiscoveredIds = await fetchPreDiscoveredIds(!production);
+const playerIds: Record<Region, number[][]> = {
+  asia: chunk(
+    preDiscoveredIds.filter((id) => idToRegion(id) === 'asia'),
+    PLAYER_IDS_PER_CALL,
+  ),
+  com: chunk(
+    preDiscoveredIds.filter((id) => idToRegion(id) === 'com'),
+    PLAYER_IDS_PER_CALL,
+  ),
+  eu: chunk(
+    preDiscoveredIds.filter((id) => idToRegion(id) === 'eu'),
+    PLAYER_IDS_PER_CALL,
+  ),
+};
+let regionIndex = 0;
+const samples: Samples = { ...emptySamples };
+const availableRegions = [...REGIONS];
+const tankIds: number[] = [];
+const tanksSorted: Record<number, IndividualTankStats[]> = {};
+let postWorkRequested = false;
 
-const players: IndividualTankStats[][] = [];
-const preDiscovered = await fetch(asset('averages/discovered.dids.lz4')).then(
-  async (response) => {
-    if (response.status === 200) {
-      const buffer = await response.arrayBuffer();
-      return new DidsReadStream(buffer).dids();
-    }
-
-    return undefined;
-  },
-);
-const discoveredIds: number[] = [];
-let processes = 0;
-
-if (preDiscovered) {
-  console.log(
-    `Revalidating ${preDiscovered.length} pre-discovered ids with ${MAX_REQUESTS} chains...`,
-  );
-
-  const preDiscoveredBar = new ProgressBar(':bar', {
-    total: preDiscovered.length,
-  });
-  let preDiscoveredIndex = 0;
-
-  async function chainPreDiscovery() {
-    processes++;
-
-    if (preDiscoveredIndex === preDiscovered!.length) {
-      processes--;
-
-      if (processes !== 0) return;
-
-      console.log(
-        `Rediscovered ${discoveredIds.length} / ${preDiscovered!.length} ids in ${Date.now() - startTime}ms`,
-      );
-      discover();
-
-      return;
-    }
-
-    const id = preDiscovered![preDiscoveredIndex++];
-    const region = idToRegion(id);
-
-    if (id > MAX_IDS[region]) return;
-
-    const stats = await getTankStats(region, id, { fields });
-
-    if (stats !== null && stats.length > 0) {
-      discoveredIds.push(id);
-      players.push(stats);
-      preDiscoveredBar.tick();
-    }
-
-    processes--;
-    setTimeout(chainPreDiscovery); // circumvent max call stack
-  }
-
-  times(MAX_REQUESTS, chainPreDiscovery);
-} else {
-  console.log('No pre-discovered ids found :(');
-  discover();
-}
-
-function discover() {
-  const index: Record<Region, number> = {
-    asia:
-      preDiscovered?.find((id) => idToRegion(id) === 'asia') ?? MIN_IDS.asia,
-    com: preDiscovered?.find((id) => idToRegion(id) === 'com') ?? MIN_IDS.com,
-    eu: preDiscovered?.find((id) => idToRegion(id) === 'eu') ?? MIN_IDS.eu,
-  };
-
-  let regionIndex = 0;
-  let done = 0;
-
-  async function chainDiscovery() {
-    regionIndex = (regionIndex + 1) % REGIONS.length;
-    const region = REGIONS[regionIndex];
-    const id = index[region]++;
-
-    if (Date.now() - startTime > RUN_TIME || id === MAX_IDS[region]) {
-      if (++done !== MAX_REQUESTS) return;
-
-      console.log(
-        `Total discovery run time: ${
-          Date.now() - startTime
-        }ms\nDiscovered ids: ${discoveredIds.length}`,
-      );
-
-      postWork();
-
-      return;
-    }
-
-    if (id > MAX_IDS[region]) return;
-
-    const stats = await getTankStats(region, id, { fields });
-
-    if (stats !== null && stats.length > 0) {
-      discoveredIds.push(id);
-      players.push(stats);
-
-      console.log(
-        `discovered ${id} in ${region} (time left: ${RUN_TIME - (Date.now() - startTime)}ms)`,
-      );
-    }
-
-    setTimeout(chainDiscovery); // circumvent max call stack
-  }
-
-  console.log(`Spawning ${MAX_REQUESTS} discovery chains...`);
-  times(MAX_REQUESTS, chainDiscovery);
-}
-
-function postWork() {
-  const tankIds: number[] = [];
-  const sorted: Record<number, IndividualTankStats[]> = {};
-
-  players.forEach((tanks) => {
-    tanks.forEach((tank) => {
-      if (tank.all.battles === 0) return;
-
-      if (!sorted[tank.tank_id]) {
-        tankIds.push(tank.tank_id);
-        sorted[tank.tank_id] = [];
-      }
-      sorted[tank.tank_id].push(tank);
+times(THREADS, async () => {
+  while (availableRegions.length > 0 && startTime + RUN_TIME > Date.now()) {
+    const region = availableRegions[regionIndex];
+    const regionIds = playerIds[region];
+    const [ids] = regionIds.splice(
+      Math.floor(Math.random() * regionIds.length),
+      1,
+    );
+    const accountInfo = await getAccountInfo(region, ids, undefined, {
+      fields: 'last_battle_time,statistics.all.battles',
     });
-  });
 
+    const filteredIds = ids.filter((_, index) => {
+      const info = accountInfo[index];
+
+      if (info === null) return false;
+
+      const timeSinceLastActivity = Date.now() - info.last_battle_time * 1000;
+
+      samples.total++;
+      if (timeSinceLastActivity <= 120 * DAY) samples.d_120++;
+      if (timeSinceLastActivity <= 90 * DAY) samples.d_90++;
+      if (timeSinceLastActivity <= 60 * DAY) samples.d_60++;
+      if (timeSinceLastActivity <= 30 * DAY) samples.d_30++;
+      if (timeSinceLastActivity <= 7 * DAY) samples.d_7++;
+      if (timeSinceLastActivity <= 1 * DAY) samples.d_1++;
+
+      return true;
+
+      // return (
+      //   timeSinceLastActivity <= MAX_ACTIVITY_TIME &&
+      //   info.statistics.all.battles > MIN_BATTLES
+      // );
+    });
+
+    const players = await Promise.all(
+      filteredIds.map((id) =>
+        getTankStats(region, id, {
+          fields: 'last_battle_time,battle_life_time,all,tank_id',
+        }),
+      ),
+    );
+
+    players.forEach((tanks) => {
+      tanks?.forEach((tank) => {
+        if (tank.all.battles === 0) return;
+
+        if (!tankIds.includes(tank.tank_id)) {
+          console.log(
+            `Found new tank: ${tank.tank_id} (${tankIds.length + 1})`,
+          );
+          tankIds.push(tank.tank_id);
+          tanksSorted[tank.tank_id] = [];
+        }
+
+        tanksSorted[tank.tank_id].push(tank);
+      });
+    });
+
+    if (regionIds.length === 0 && availableRegions.includes(region)) {
+      availableRegions.splice(availableRegions.indexOf(region), 1);
+    }
+    regionIndex = (regionIndex + 1) % availableRegions.length;
+  }
+
+  if (!postWorkRequested) {
+    postWorkRequested = true;
+    postWork();
+  }
+});
+
+async function postWork() {
   console.log(
-    `Generating statistics based off ${players.length} players and ${tankIds.length} tanks...`,
+    `Generating statistics based on ${samples.d_120.toLocaleString()} players (${samples.total.toLocaleString()} checked in total) and ${tankIds.length} tanks...`,
   );
 
-  const averages: AverageDefinitions = {};
+  const averages: Record<number, AverageDefinitionsEntry> = {};
 
   tankIds.forEach((id) => {
-    const tanks = sorted[id];
-    const samples = tanks.length;
+    const tanksSortedEntry = tanksSorted[id];
+    // const tanks = tanksSortedEntry.filter(
+    //   (tank) => Date.now() - tank.last_battle_time * 1000 <= MAX_ACTIVITY_TIME,
+    // );
+    const tanks = tanksSortedEntry;
+    const entry: AverageDefinitionsEntrySubPartial = {
+      mu: {},
+      sigma: {},
+      r: {},
+      samples: { ...emptySamples },
+    };
 
-    function sum(slice: (tank: AverageDefinitionsAllStats) => number) {
-      return tanks.reduce((acc, tank) => {
-        return (
-          acc + slice({ battle_life_time: tank.battle_life_time, ...tank.all })
+    tanks.forEach((tank) => {
+      const timeSinceLastActivity = Date.now() - tank.last_battle_time * 1000;
+
+      entry.samples.total++;
+      if (timeSinceLastActivity <= 120 * DAY) entry.samples.d_120++;
+      if (timeSinceLastActivity <= 90 * DAY) entry.samples.d_90++;
+      if (timeSinceLastActivity <= 60 * DAY) entry.samples.d_60++;
+      if (timeSinceLastActivity <= 30 * DAY) entry.samples.d_30++;
+      if (timeSinceLastActivity <= 7 * DAY) entry.samples.d_7++;
+      if (timeSinceLastActivity <= 1 * DAY) entry.samples.d_1++;
+    });
+
+    const dataWY = tanks.map((tank) => ({
+      w: tank.all.battles,
+      y: tank.all.wins / tank.all.battles,
+    }));
+
+    averageDefinitionsAllStatsKeys.forEach((key) => {
+      const data: DataPoint[] = dataWY.map(({ w, y }, index) => ({
+        w,
+        x:
+          (key === 'battle_life_time'
+            ? tanks[index].battle_life_time
+            : tanks[index].all[key]) / w,
+        y,
+      }));
+
+      if (data.length === 0) return;
+
+      function sum(slicer: (data: DataPoint) => number) {
+        return data.reduce(
+          (accumulator, data) => accumulator + slicer(data),
+          0,
         );
-      }, 0);
-    }
+      }
 
-    const denominator = sum((tank) => tank.battles);
+      const sum_w = sum(({ w }) => w);
+      const sum_wx = sum(({ w, x }) => w * x);
+      const sum_wy = sum(({ w, y }) => w * y);
+      const x_bar = sum_wx / sum_w;
+      const y_bar = sum_wy / sum_w;
+      // undo normalization for mu to get a simple average
+      const mu = sum(({ w, x }) => w * x) / samples.d_120;
 
-    function moment(slice: (tank: AverageDefinitionsAllStats) => number) {
-      return tanks.reduce((acc, tank) => {
-        return (
-          acc +
-          tank.all.battles *
-            slice({ battle_life_time: tank.battle_life_time, ...tank.all })
-        );
-      }, 0);
-    }
+      const sigma_numerator = sum(({ w, x }) => w * (x - x_bar) ** 2);
+      const sigma = Math.sqrt(sigma_numerator / sum_w);
 
-    function weightedAverage(
-      slice: (tank: AverageDefinitionsAllStats) => number,
-    ) {
-      return moment(slice) / denominator;
-    }
+      const r_numerator = sum(({ w, x, y }) => w * (x - x_bar) * (y - y_bar));
+      const r_denominator_x = sum(({ w, x }) => w * (x - x_bar) ** 2);
+      const r_denominator_y = sum(({ w, y }) => w * (y - y_bar) ** 2);
+      const r = r_numerator / Math.sqrt(r_denominator_x * r_denominator_y);
 
-    const mu = averageDefinitionsAllStatsKeys.reduce<
-      Partial<AverageDefinitionsAllStats>
-    >((acc, key) => {
-      acc[key] = weightedAverage((tank) => tank[key]);
-      return acc;
-    }, {}) as AverageDefinitionsAllStats;
-    const sigma = averageDefinitionsAllStatsKeys.reduce<
-      Partial<AverageDefinitionsAllStats>
-    >((acc, key) => {
-      acc[key] = Math.sqrt(sum((tank) => (tank[key] - mu[key]) ** 2) / samples);
-      return acc;
-    }, {}) as AverageDefinitionsAllStats;
-    const r = averageDefinitionsAllStatsKeys.reduce<
-      Partial<AverageDefinitionsAllStats>
-    >((acc, key) => {
-      acc[key] =
-        (samples *
-          sum(
-            (tank) => (tank[key] / tank.battles) * (tank.wins / tank.battles),
-          ) -
-          sum((tank) => tank[key] / tank.battles) *
-            sum((tank) => tank.wins / tank.battles)) /
-        Math.sqrt(
-          (samples * sum((tank) => (tank[key] / tank.battles) ** 2) -
-            sum((tank) => tank[key] / tank.battles) ** 2) *
-            (samples * sum((tank) => (tank.wins / tank.battles) ** 2) -
-              sum((tank) => tank.wins / tank.battles) ** 2),
-        );
-      return acc;
-    }, {}) as AverageDefinitionsAllStats;
-    const m = averageDefinitionsAllStatsKeys.reduce<
-      Partial<AverageDefinitionsAllStats>
-    >((acc, key) => {
-      acc[key] =
-        (samples *
-          sum(
-            (tank) => (tank[key] / tank.battles) * (tank.wins / tank.battles),
-          ) -
-          sum((tank) => tank[key] / tank.battles) *
-            sum((tank) => tank.wins / tank.battles)) /
-        (samples * sum((tank) => (tank[key] / tank.battles) ** 2) -
-          sum((tank) => tank[key] / tank.battles) ** 2);
-      return acc;
-    }, {}) as AverageDefinitionsAllStats;
-    const b = averageDefinitionsAllStatsKeys.reduce<
-      Partial<AverageDefinitionsAllStats>
-    >((acc, key) => {
-      acc[key] =
-        (sum((tank) => tank.wins / tank.battles) -
-          m[key] * sum((tank) => tank[key] / tank.battles)) /
-        samples;
-      return acc;
-    }, {}) as AverageDefinitionsAllStats;
+      entry.mu[key] = mu;
+      entry.sigma[key] = sigma;
+      entry.r[key] = isNaN(r) ? 0 : r;
+    });
 
-    averages[id] = { samples, mu, sigma, r, m, b };
+    averages[id] = entry as AverageDefinitionsEntry;
   });
 
+  const time = Date.now();
+  const latest = Math.round(time / DAY);
+  const averageDefinitions = {
+    averages,
+    samples,
+    time,
+  } satisfies AverageDefinitions;
+
+  const manifest: AverageDefinitionsManifest = {
+    version: 1,
+    latest,
+  };
+
   commitAssets(
     'averages',
     [
       {
-        path: 'definitions/averages.cdon.lz4',
-        content: superCompress(averages),
+        path: `averages/${latest}.pb`,
+        content: await encodeToBase64(
+          'blitzkit.AverageDefinitions',
+          averageDefinitions,
+        ),
         encoding: 'base64',
       },
       {
-        path: 'definitions/discovered.dids.lz4',
-        content: Buffer.from(
-          compress(new DidsWriteStream().dids(discoveredIds).uint8Array),
-        ).toString('base64'),
-        encoding: 'base64',
+        path: 'averages/manifest.json',
+        content: JSON.stringify(manifest),
+        encoding: 'utf-8',
       },
     ],
     production,

scripts/buildAssets/boosterIcons.ts

@@ -17,7 +17,10 @@ export async function boosterIcons(production: boolean) {
 
   await Promise.all(
     boosterFiles.map(async (file) => {
-      const name = file.match(/booster_(.+).txt.dvpl/)![1];
+      const name = file.match(/booster_(.+).txt.dvpl/)?.[1];
+
+      if (name === undefined) return;
+
       const sizes = (
         await readStringDVPL(`${DATA}/${POI.boosterIcons}/${file}`)
       )

scripts/buildAssets/circleFlags.ts

@@ -1,5 +1,6 @@
 import { readdir } from 'fs/promises';
-import { readBase64DVPL } from '../../src/core/blitz/readBase64DVPL';
+import sharp from 'sharp';
+import { readDVPLFile } from '../../src/core/blitz/readDVPLFile';
 import { commitAssets } from '../../src/core/blitzkit/commitAssets';
 import { FileChange } from '../../src/core/blitzkit/commitMultipleFiles';
 import { DATA, POI } from './constants';
@@ -14,7 +15,10 @@ export async function circleFlags(production: boolean) {
           !flag.endsWith('@2x.packed.webp.dvpl'),
       )
       .map(async (flag) => {
-        const content = await readBase64DVPL(`${DATA}/${POI.flags}/${flag}`);
+        const image = sharp(await readDVPLFile(`${DATA}/${POI.flags}/${flag}`));
+        const content = (
+          await image.trim({ threshold: 100 }).toBuffer()
+        ).toString('base64');
         const name = flag.match(/flag_profile-stat_(.+)\.packed\.webp/)![1];
 
         return {

scripts/buildAssets/definitions.ts

@@ -353,11 +353,15 @@ export interface MapAlly {
   points: Array<number[]>;
 }
 
+interface AvailableNationsYaml {
+  available_nations: string[];
+}
+
 const blitzShellKindToBlitzkit: Record<ShellKind, ShellType> = {
-  ARMOR_PIERCING: 'ap',
-  ARMOR_PIERCING_CR: 'ap_cr',
-  HIGH_EXPLOSIVE: 'he',
-  HOLLOW_CHARGE: 'hc',
+  ARMOR_PIERCING: ShellType.AP,
+  ARMOR_PIERCING_CR: ShellType.APCR,
+  HIGH_EXPLOSIVE: ShellType.HE,
+  HOLLOW_CHARGE: ShellType.HEAT,
 };
 const missingStrings: Record<string, string> = {
   '#artefacts:tungstentip/name': 'Tungsten Shells',
@@ -378,6 +382,11 @@ export async function definitions(production: boolean) {
       .split('.')
       .slice(0, 3)
       .join('.'),
+    nations: (
+      await readYAMLDVPL<AvailableNationsYaml>(
+        `${DATA}/available_nations.yaml.dvpl`,
+      )
+    ).available_nations,
   };
   const tankDefinitions: TankDefinitions = {};
   const modelDefinitions: ModelDefinitions = {};

scripts/buildAssets/index.ts

@@ -41,9 +41,9 @@ const methods = [
   consumableProvisionIcons,
   camouflageIcons,
   boosterIcons,
-  tankIcons,
   tankArmors,
   tankModels,
+  tankIcons,
 ];
 
 for (const method of methods) {

scripts/checkVersionMissMatch.ts

@@ -1,12 +0,0 @@
-import { readdir } from 'fs/promises';
-import packageJSON from '../package.json';
-
-const { version } = packageJSON;
-const changelogs = await readdir('docs/changelogs');
-const hasVersion = changelogs.includes(`${version}.md`);
-
-if (hasVersion) {
-  console.log(`Version ${version} found in changelogs`);
-} else {
-  throw new Error(`Version ${version} not found in changelogs`);
-}

scripts/discoverIds.ts

@@ -1,45 +1,61 @@
-import { times } from 'lodash';
+import { chunk, times, uniq } from 'lodash';
+import { compress, decompress } from 'lz4js';
 import { argv } from 'process';
-import { Region, REGIONS } from '../src/constants/regions';
-import { requestLimitExceededEvent } from '../src/core/blitz/fetchBlitz';
+import { REGIONS, Region } from '../src/constants/regions';
+import { retryAbleBlitzFetchEvent } from '../src/core/blitz/fetchBlitz';
 import { getAccountInfo } from '../src/core/blitz/getAccountInfo';
-import { idToRegion, MIN_IDS } from '../src/core/blitz/idToRegion';
+import { MIN_IDS, idToRegion } from '../src/core/blitz/idToRegion';
 import { asset } from '../src/core/blitzkit/asset';
 import { commitAssets } from '../src/core/blitzkit/commitAssets';
+import { DiscoverIdsDefinitions } from '../src/core/blitzkit/discoveredIdDefinitions';
 import { DidsReadStream, DidsWriteStream } from '../src/core/streams/dids';
 
+const CHUNK_SIZE = 2 ** 21;
 const RUN_TIME = 1000 * 60 * 60 * 5.5;
+const PROGRESS_UPDATE_FREQUENCY = 1000 * 60;
 const MAX_REQUESTS = 10;
 const ACCOUNTS_PER_CALL = 100;
 const TERMINATION_THRESHOLD = 1000;
 
 const production = argv.includes('--production');
-const startTime = Date.now();
-const indexableRegions = [...REGIONS];
-const preDiscoveredRaw = await fetch(
-  asset('definitions/ids.dids', !production),
-).then(async (response) => {
-  if (response.status === 200) {
-    const buffer = await response.arrayBuffer();
-    return new DidsReadStream(buffer).dids();
-  }
-
-  return undefined;
-});
 
 console.log(`Running in ${production ? 'production' : 'development'} mode`);
 
-if (preDiscoveredRaw === undefined) {
-  console.log('No pre-discovered ids found :(');
-} else {
-  console.log(`Found ${preDiscoveredRaw.length} pre-discovered ids`);
+const startTime = Date.now();
+const indexableRegions = [...REGIONS];
+let ids: number[] = [];
+const preDiscoveredManifest = (await fetch(
+  asset('ids/manifest.json', !production),
+).then((response) => response.json())) as DiscoverIdsDefinitions;
+
+console.log(
+  `Fetching ${preDiscoveredManifest.chunks} pre-discovered chunks...`,
+);
+
+let chunkIndex = 0;
+while (chunkIndex < preDiscoveredManifest.chunks) {
+  const preDiscovered = await fetch(
+    asset(`ids/${chunkIndex}.dids.lz4`, !production),
+  ).then(async (response) => {
+    const buffer = await response.arrayBuffer();
+    const decompressed = decompress(new Uint8Array(buffer)).buffer;
+    return new DidsReadStream(decompressed as ArrayBuffer).dids();
+  });
+
+  // no spread syntax: https://github.com/oven-sh/bun/issues/11734
+  ids = ids.concat(preDiscovered);
+
+  console.log(
+    `Pre-discovered ${preDiscovered.length} ids (chunk ${chunkIndex})`,
+  );
+
+  chunkIndex++;
 }
 
-const ids: number[] = [...(preDiscoveredRaw ?? [])]; // TODO: re-validate these ids
 const regionalIdIndex: Record<Region, number> = {
-  asia: ids.find((id) => idToRegion(id) === 'asia') ?? MIN_IDS.asia,
-  com: ids.find((id) => idToRegion(id) === 'com') ?? MIN_IDS.com,
-  eu: ids.find((id) => idToRegion(id) === 'eu') ?? MIN_IDS.eu,
+  asia: ids.findLast((id) => idToRegion(id) === 'asia') ?? MIN_IDS.asia,
+  com: ids.findLast((id) => idToRegion(id) === 'com') ?? MIN_IDS.com,
+  eu: ids.findLast((id) => idToRegion(id) === 'eu') ?? MIN_IDS.eu,
 };
 const zeroStreak: Record<Region, number> = { asia: 0, com: 0, eu: 0 };
 let regionIndex = 0;
@@ -59,9 +75,9 @@ async function verify(region: Region, ids: number[]) {
 }
 
 let discardAttempts = 0;
-requestLimitExceededEvent.on(() => {
-  discardAttempts++;
-});
+let lastProgressUpdate = 0;
+
+retryAbleBlitzFetchEvent.on(() => discardAttempts++);
 
 const interval = setInterval(async () => {
   if (discardAttempts > 0) return discardAttempts--;
@@ -73,7 +89,10 @@ const interval = setInterval(async () => {
   );
   const verified = await verify(region, idsToVerify);
 
-  console.log(`${region.padEnd(4)} ${verified.length.toString().padStart(3)}`);
+  if (Date.now() - lastProgressUpdate > PROGRESS_UPDATE_FREQUENCY) {
+    lastProgressUpdate = Date.now();
+    console.log(`Discovered ${ids.length} ids in ${Date.now() - startTime}ms`);
+  }
 
   if (verified.length === 0) {
     zeroStreak[region]++;
@@ -108,18 +127,40 @@ const interval = setInterval(async () => {
 
 function post() {
   clearInterval(interval);
+  ids = uniq(ids).sort((a, b) => a - b);
   console.log(`Uploading ${ids.length} ids...`);
 
-  const didsWriteStream = new DidsWriteStream().dids(ids);
-  const content = Buffer.from(didsWriteStream.uint8Array).toString('base64');
+  const idsChunked = chunk(ids, CHUNK_SIZE);
+  const files = idsChunked.map((chunk, index) => {
+    const didsWriteStream = new DidsWriteStream().dids(chunk);
+    const buffer = didsWriteStream.uint8Array;
+    const compressed = compress(buffer);
+
+    console.log(
+      `Chunk ${index} with ${chunk.length} ids (compressed: ${compressed.length}; uncompressed: ${buffer.length})`,
+    );
+
+    const content = Buffer.from(compressed).toString('base64');
+
+    return {
+      content,
+      encoding: 'base64' as const,
+      path: `ids/${index}.dids.lz4`,
+    };
+  });
 
   commitAssets(
     'discovered ids',
     [
+      ...files,
       {
-        content,
-        encoding: 'base64',
-        path: 'definitions/ids.dids',
+        content: JSON.stringify({
+          chunks: idsChunked.length,
+          count: ids.length,
+          time: Date.now(),
+        } satisfies DiscoverIdsDefinitions),
+        encoding: 'utf-8',
+        path: 'ids/manifest.json',
       },
     ],
     production,

src/app/api/patreon/auth/[code]/route.ts

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { code: string } },
+) {
+  const response = await fetch(
+    `https://www.patreon.com/api/oauth2/token?code=${params.code}&grant_type=authorization_code&client_id=${process.env.NEXT_PUBLIC_PATREON_CLIENT_ID}&client_secret=${process.env.PATREON_CLIENT_SECRET}&redirect_uri=${process.env.NEXT_PUBLIC_PATREON_REDIRECT_URI}`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    },
+  );
+  const json = await response.json();
+
+  return NextResponse.json(json);
+}

src/app/api/patreon/membership/[token]/route.ts

@@ -0,0 +1,75 @@
+import { NextResponse } from 'next/server';
+
+interface PatreonMembershipResponse {
+  data: {
+    attributes: unknown;
+    id: `${number}`;
+    relationships: {
+      memberships: {
+        data: {
+          id: string; // uuid
+          type: 'member';
+        }[];
+      };
+    };
+    type: 'user';
+  };
+  included: (
+    | {
+        attributes: {
+          patron_status:
+            | 'active_patron'
+            | 'declined_patron'
+            | 'former_patron'
+            | null; // null = never a paid member
+        };
+        id: string; // uuid
+        relationships: {
+          campaign: {
+            data: {
+              id: `${number}`; // id of my campaign to check against
+              type: 'campaign';
+            };
+            links: {
+              related: string; // url
+            };
+          };
+        };
+        type: 'member';
+      }
+    | {
+        attributes: {};
+        id: `${number}`;
+        type: 'campaign'; // ignore this discriminator
+      }
+  )[];
+  links: {
+    self: 'https://www.patreon.com/api/oauth2/v2/user/124201389';
+  };
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: { token: string } },
+) {
+  const response = await fetch(
+    encodeURI(
+      'https://www.patreon.com/api/oauth2/v2/identity?include=memberships.campaign&fields[member]=patron_status',
+    ),
+    { headers: { Authorization: `Bearer ${params.token}` } },
+  );
+
+  if (!response.ok) return NextResponse.json(false);
+
+  const json = (await response.json()) as PatreonMembershipResponse;
+
+  return NextResponse.json(
+    json.included.some(
+      (item) =>
+        item.type === 'member' &&
+        item.relationships.campaign.data.id ===
+          process.env.PATREON_CAMPAIGN_ID &&
+        item.attributes.patron_status === 'active_patron',
+    ),
+  );
+}

src/app/api/patreon/refresh/[token]/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+export async function GET(
+  request: Request,
+  { params }: { params: { token: string } },
+) {
+  const response = await fetch(
+    `https://www.patreon.com/api/oauth2/token?grant_type=refresh_token&refresh_token=${params.token}&client_id=${process.env.NEXT_PUBLIC_PATREON_CLIENT_ID}&client_secret=${process.env.PATREON_CLIENT_SECRET}`,
+    { method: 'POST' },
+  );
+  const json = await response.json();
+
+  return NextResponse.json(json);
+}

src/app/auth/[provider]/page.tsx

@@ -4,7 +4,16 @@ import { Flex, Heading, Text } from '@radix-ui/themes';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
-import { mutateApp } from '../../../stores/app';
+import * as App from '../../../stores/app';
+
+export interface PatreonAuthResponse {
+  access_token: string;
+  expires_in: number;
+  token_type: 'Bearer';
+  scope: string;
+  refresh_token: string;
+  version: string;
+}
 
 export default function Page({
   params,
@@ -14,6 +23,7 @@ export default function Page({
   searchParams: { [key: string]: string };
 }) {
   const router = useRouter();
+  const mutateApp = App.useMutation();
 
   useEffect(() => {
     switch (params.provider) {
@@ -27,22 +37,41 @@ export default function Page({
         }
 
         mutateApp((draft) => {
-          draft.login = {
-            expiresAt: Number(searchParams.expires_at),
+          draft.logins.wargaming = {
             id: Number(searchParams.account_id),
             token: searchParams.access_token,
+            expires: Number(searchParams.expires_at) * 1000,
           };
         });
 
         break;
       }
 
+      case 'patreon': {
+        if (!searchParams.code) break;
+
+        // cannot await here because async breaks router.push :(
+        fetch(`/api/patreon/auth/${searchParams.code}`)
+          .then((response) => response.json() as Promise<PatreonAuthResponse>)
+          .then((data) => {
+            mutateApp((draft) => {
+              draft.logins.patreon = {
+                token: data.access_token,
+                refreshToken: data.refresh_token,
+                expires: Date.now() + data.expires_in * 1000,
+              };
+            });
+          });
+
+        break;
+      }
+
       default: {
         console.error(`Unknown provider: ${params.provider}`);
       }
     }
 
-    router.push(searchParams.return ? searchParams.return : '/');
+    router.push(searchParams.return ?? '/');
   });
 
   return (

src/app/components/Checks.tsx

@@ -1,27 +1,31 @@
 'use client';
 
-import {
-  AlertDialog,
-  Button,
-  Flex,
-  Heading,
-  Link,
-  Text,
-} from '@radix-ui/themes';
+import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { extendAuth } from '../../core/blitz/extendAuth';
-import { logout } from '../../core/blitz/logout';
-import isDev from '../../core/blitzkit/isDev';
-import { isLocalhost } from '../../core/blitzkit/isLocalhost';
-import { CURRENT_POLICIES_AGREEMENT_INDEX, useApp } from '../../stores/app';
+import { WARGAMING_APPLICATION_ID } from '../../constants/wargamingApplicationID';
+import { idToRegion } from '../../core/blitz/idToRegion';
+import * as App from '../../stores/app';
+import { CURRENT_POLICIES_AGREEMENT_INDEX } from '../../stores/app/constants';
+import { PatreonAuthResponse } from '../auth/[provider]/page';
 
-const DEV_BUILD_AGREEMENT_COOLDOWN = 8 * 24 * 60 * 60 * 1000;
+interface Extension {
+  data: {
+    access_token: string;
+    account_id: number;
+    expires_at: number;
+  };
+}
 
+/**
+ * Wargaming: 14 (refresh: 7)
+ * Patreon: 31 (refresh: 15)
+ */
 export function Checks() {
-  const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
-  const login = useApp((state) => state.login);
-  const policiesAgreementIndex = useApp(
+  const mutateApp = App.useMutation();
+  const logins = App.use((state) => state.logins);
+  const appStore = App.useStore();
+  const policiesAgreementIndex = App.use(
     (state) => state.policiesAgreementIndex,
   );
   const pathname = usePathname();
@@ -29,128 +33,153 @@ export function Checks() {
   const [showPoliciesAgreement, setShowPoliciesAgreement] = useState(false);
 
   useEffect(() => {
-    setShowDevBuildAlert(
-      isDev() &&
-        !isLocalhost() &&
-        Date.now() - useApp.getState().devBuildAgreementTime >=
-          DEV_BUILD_AGREEMENT_COOLDOWN,
-    );
-  }, []);
-  useEffect(() => {
-    setShowPoliciesAgreement(
-      policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX && !isLegal,
-    );
+    function unsubscribe() {
+      window.removeEventListener('scroll', show);
+      window.removeEventListener('pointermove', show);
+      window.removeEventListener('pointerdown', show);
+    }
+
+    function show() {
+      setShowPoliciesAgreement(true);
+      unsubscribe();
+    }
+
+    if (
+      policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX &&
+      !isLegal
+    ) {
+      window.addEventListener('scroll', show);
+      window.addEventListener('pointermove', show);
+      window.addEventListener('pointerdown', show);
+    }
+
+    return unsubscribe;
   }, [policiesAgreementIndex, isLegal]);
 
   useEffect(() => {
-    if (!login) return;
+    if (logins.wargaming) {
+      const expiresIn = logins.wargaming.expires - Date.now();
+      const expiresInDays = expiresIn / 1000 / 60 / 60 / 24;
 
-    const expiresIn = login.expiresAt - Date.now() / 1000;
-    const expiresInDays = expiresIn / 60 / 60 / 24;
+      if (expiresInDays < 0) {
+        mutateApp((draft) => {
+          draft.logins.wargaming = undefined;
+        });
+      } else if (expiresInDays < 7) {
+        const { wargaming } = appStore.getState().logins;
 
-    if (expiresInDays < 0) {
-      logout();
-    } else if (expiresInDays < 7) {
-      extendAuth();
+        if (!wargaming) return;
+
+        fetch(
+          `https://api.worldoftanks.${idToRegion(
+            wargaming.id,
+          )}/wot/auth/prolongate/?application_id=${WARGAMING_APPLICATION_ID}&access_token=${
+            wargaming.token
+          }`,
+        )
+          .then((response) => response.json() as Promise<Extension>)
+          .then((json) => {
+            mutateApp((draft) => {
+              draft.logins.wargaming = {
+                id: wargaming.id,
+                token: json.data.access_token,
+                expires: json.data.expires_at * 1000,
+              };
+            });
+          });
+      }
+    }
+
+    if (logins.patreon) {
+      const expiresIn = logins.patreon.expires - Date.now();
+      const expiresInDays = expiresIn / 1000 / 60 / 60 / 24;
+
+      if (expiresInDays < 0) {
+        mutateApp((draft) => {
+          draft.logins.patreon = undefined;
+        });
+      } else if (expiresInDays < 15) {
+        const { patreon } = appStore.getState().logins;
+
+        if (!patreon) return;
+
+        fetch(`/api/patreon/refresh/${patreon.refreshToken}`)
+          .then((response) => response.json() as Promise<PatreonAuthResponse>)
+          .then((data) => {
+            mutateApp((draft) => {
+              draft.logins.patreon = {
+                token: data.access_token,
+                refreshToken: data.refresh_token,
+                expires: Date.now() + data.expires_in * 1000,
+              };
+            });
+          });
+      }
     }
   });
 
+  if (!showPoliciesAgreement) return null;
+
   return (
-    <>
-      <AlertDialog.Root open={showDevBuildAlert}>
-        <AlertDialog.Content>
-          <AlertDialog.Title>Experimental version!</AlertDialog.Title>
-          <AlertDialog.Description>
-            This version may have a lot of issues. Report issues to{' '}
-            <a href="https://discord.gg/nDt7AjGJQH" target="_blank">
-              the official Discord server
-            </a>
-            . Also consider using{' '}
-            <a href="https://blitzkit.app/">the more stable release version</a>.
-            You will be asked again in 8 days.
-          </AlertDialog.Description>
-
-          <Flex justify="end">
-            <Button
-              variant="solid"
-              onClick={() => {
-                setShowDevBuildAlert(false);
-                useApp.setState({ devBuildAgreementTime: Date.now() });
-              }}
-            >
-              Continue
-            </Button>
-          </Flex>
-        </AlertDialog.Content>
-      </AlertDialog.Root>
-
-      {showPoliciesAgreement && (
+    <Flex
+      align="end"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        background: 'var(--color-overlay)',
+        zIndex: 2,
+      }}
+    >
+      <Flex
+        p="8"
+        style={{
+          width: '100%',
+          background: 'var(--color-panel-solid)',
+        }}
+        justify="center"
+      >
         <Flex
-          align="end"
+          align="start"
+          gap="4"
           style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            background: 'var(--color-overlay)',
-            zIndex: 2,
+            maxWidth: 640 * 2,
           }}
+          direction="column"
         >
-          <Flex
-            p="8"
-            style={{
-              width: '100%',
-              background: 'var(--color-panel-solid)',
-            }}
-            justify="center"
-          >
-            <Flex
-              align="start"
-              gap="4"
-              style={{
-                maxWidth: 640 * 2,
-              }}
-              direction="column"
-            >
-              <Flex direction="column" gap="2">
-                <Heading>
-                  {policiesAgreementIndex === -1
-                    ? "BlitzKit's policies"
-                    : "BlitzKit's policies have changed"}
-                </Heading>
+          <Flex direction="column" gap="2">
+            <Heading>
+              {policiesAgreementIndex === -1
+                ? "BlitzKit's policies"
+                : "BlitzKit's policies have changed"}
+            </Heading>
 
-                <Text>
-                  This website utilizes cookies to perform analytics and
-                  personalize your experience. You can learn more through{' '}
-                  <Link href="/docs/legal/privacy-policy">
-                    our privacy policy
-                  </Link>
-                  . You may opt out of personalized advertizement by visiting{' '}
-                  <Link href="https://www.google.com/settings/ads">
-                    Google Ad Settings
-                  </Link>
-                  . By using BlitzKit, you also agree to our{' '}
-                  <Link href="/docs/legal/terms-of-service">
-                    terms of service
-                  </Link>
-                  .
-                </Text>
-              </Flex>
-
-              <Button
-                onClick={() => {
-                  useApp.setState({
-                    policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
-                  });
-                }}
-              >
-                I Agree
-              </Button>
-            </Flex>
+            <Text>
+              This website utilizes cookies to perform analytics and personalize
+              your experience. You can learn more through{' '}
+              <Link href="/docs/legal/privacy-policy">our privacy policy</Link>.
+              You may opt out of personalized advertizement by visiting{' '}
+              <Link href="https://optout.aboutads.info/">WebChoices</Link>. By
+              using BlitzKit, you also agree to our{' '}
+              <Link href="/docs/legal/terms-of-service">terms of service</Link>.
+            </Text>
           </Flex>
+
+          <Button
+            mt="2"
+            onClick={() => {
+              appStore.setState({
+                policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
+              });
+              setShowPoliciesAgreement(false);
+            }}
+          >
+            I agree
+          </Button>
         </Flex>
-      )}
-    </>
+      </Flex>
+    </Flex>
   );
 }

src/app/components/PageLoader.tsx

@@ -0,0 +1,9 @@
+import { Flex, Spinner } from '@radix-ui/themes';
+
+export function PageLoader() {
+  return (
+    <Flex align="center" justify="center" flexGrow="1">
+      <Spinner />
+    </Flex>
+  );
+}

src/app/components/PatreonPlug.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { CheckIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Link, Text } from '@radix-ui/themes';
+import { useLayoutEffect, useState } from 'react';
+import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
+import { useAdExempt } from '../../hooks/useAdExempt';
+import { PatreonIcon } from '../../icons/Patreon';
+import * as App from '../../stores/app';
+
+export function PatreonPlug() {
+  const [hasPatreon, setHasPatreon] = useState(false);
+  const exempt = useAdExempt();
+  const patreon = App.use((state) => state.logins.patreon);
+
+  useLayoutEffect(() => {
+    setHasPatreon(patreon !== undefined);
+  }, [patreon]);
+
+  return (
+    <Flex
+      gap="2"
+      align="center"
+      direction="column"
+      justify="center"
+      p="4"
+      py="8"
+    >
+      <Flex gap="1" align="center">
+        <Text size="4" align="center">
+          {exempt
+            ? 'You are supporting BlitzKit, thank you!'
+            : 'Active Patreon supports go ad-free'}
+        </Text>
+        {!exempt && <CheckIcon width="1em" height="1em" />}
+      </Flex>
+
+      <Flex gap="2" wrap="wrap" justify="center">
+        <Link href="https://www.patreon.com/tresabhi" target="_blank">
+          <Button>
+            <PatreonIcon width={15} height={15} />{' '}
+            {exempt ? 'Manage membership' : 'Support on Patreon'}
+          </Button>
+        </Link>
+        {!hasPatreon && !exempt && (
+          <Link href={patreonLoginUrl()}>
+            <Button variant="outline">Log in with Patreon</Button>
+          </Link>
+        )}
+      </Flex>
+    </Flex>
+  );
+}

src/app/components/ToolCard.tsx

@@ -0,0 +1,142 @@
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import {
+  Box,
+  Button,
+  Flex,
+  FlexProps,
+  Heading,
+  Link,
+  Text,
+} from '@radix-ui/themes';
+import { Tool } from '../../constants/tools';
+import { ImgurSize, imgur } from '../../core/blitzkit/imgur';
+
+type ToolCardProps = FlexProps & {
+  tool: Tool;
+};
+
+export function ToolCard({ tool, style, ...props }: ToolCardProps) {
+  const size = tool.significant
+    ? ImgurSize.HugeThumbnail
+    : ImgurSize.LargeThumbnail;
+
+  return (
+    <Flex
+      style={{
+        position: 'relative',
+        borderRadius: 'var(--radius-2)',
+        overflow: 'hidden',
+        backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        height: tool.significant ? 'min(320px, 50vh)' : '256px',
+        ...style,
+      }}
+      flexGrow={tool.significant ? undefined : '1'}
+      flexBasis={
+        tool.significant
+          ? undefined
+          : {
+              initial: undefined,
+              sm: '0',
+            }
+      }
+      {...props}
+    >
+      <Link
+        href={`/tools/${tool.id}`}
+        style={{
+          display: 'flex',
+          width: '100%',
+          height: '100%',
+          flexDirection: 'column',
+          textDecoration: 'none',
+          color: 'inherit',
+        }}
+      >
+        <Box
+          flexGrow="1"
+          style={{
+            backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        />
+
+        <Flex
+          px={{
+            initial: '6',
+            md: tool.significant ? '8' : '6',
+          }}
+          py={{
+            initial: '4',
+            sm: tool.significant ? '6' : '4',
+          }}
+          gap="4"
+          align="center"
+          justify="between"
+          width="100%"
+          direction={{
+            initial: 'column',
+            sm: 'row',
+          }}
+          style={{
+            backgroundColor: 'var(--color-panel-translucent)',
+            backdropFilter: 'blur(64px)',
+            WebkitBackdropFilter: 'blur(64px)',
+          }}
+        >
+          <Flex
+            direction="column"
+            justify="center"
+            align={{
+              initial: 'center',
+              sm: 'start',
+            }}
+          >
+            <Heading
+              align={{
+                initial: 'center',
+                sm: 'left',
+              }}
+              size={{
+                initial: '6',
+                sm: tool.significant ? '7' : '5',
+              }}
+              weight="medium"
+            >
+              {tool.title}
+            </Heading>
+            <Text
+              align={{
+                initial: 'center',
+                sm: 'left',
+              }}
+              size={{
+                initial: '3',
+                sm: tool.significant ? '4' : '3',
+              }}
+              color="gray"
+            >
+              {tool.description}
+            </Text>
+          </Flex>
+
+          <Button
+            size={{
+              initial: undefined,
+              sm: tool.significant ? '3' : undefined,
+            }}
+            color={tool.button.color}
+            style={{
+              cursor: 'inherit',
+            }}
+          >
+            {tool.button.text}
+            <CaretRightIcon />
+          </Button>
+        </Flex>
+      </Link>
+    </Flex>
+  );
+}

src/app/docs/patches/page.tsx

@@ -0,0 +1,26 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { compareVersions } from 'compare-versions';
+import versions from '../../../../public/assets/versions.json';
+import { Link } from '../../../components/Link';
+import PageWrapper from '../../../components/PageWrapper';
+
+export default async function Page() {
+  return (
+    <PageWrapper>
+      <Heading>BlitzKit patch notes</Heading>
+
+      <Flex wrap="wrap" gap="4">
+        {versions
+          .sort(compareVersions)
+          .reverse()
+          .map((version) => {
+            return (
+              <Link key={version} href={`/docs/changelogs/${version}`}>
+                {version}
+              </Link>
+            );
+          })}
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/layout.tsx

@@ -7,10 +7,11 @@ import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
 import { ReactNode, Suspense } from 'react';
 import { Footer } from '../components/Footer';
-import { Loader } from '../components/Loader';
 import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
+import * as App from '../stores/app';
 import { Checks } from './components/Checks';
+import { PageLoader } from './components/PageLoader';
 import './layout.css';
 
 config();
@@ -31,62 +32,56 @@ export default function RootLayout({ children }: RootLayoutProps) {
   const isRoot = pathname === '/';
 
   return (
-    <html lang="en" className={robotoFlex.className}>
-      <head>
-        {isRoot && (
-          <>
-            <title>BlitzKit</title>
-            <meta
-              name="description"
-              content="🎉 Tools for everything World of Tanks Blitz"
-            />
-          </>
-        )}
-        <meta property="og:site_name" content="BlitzKit" />
-        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <App.Provider>
+      <html lang="en" className={robotoFlex.className}>
+        <head>
+          {isRoot && (
+            <>
+              <title>BlitzKit</title>
+              <meta
+                name="description"
+                content="🎉 Tools for everything World of Tanks Blitz"
+              />
+            </>
+          )}
+          <meta property="og:site_name" content="BlitzKit" />
+          <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
-        <Party3 />
-      </head>
+          <Party3 />
+        </head>
 
-      <body
-        style={{
-          margin: 0,
-          backgroundColor: isEmbed ? 'transparent' : undefined,
-        }}
-      >
-        <Theme
-          appearance="dark"
-          panelBackground="solid"
-          radius="full"
-          accentColor="amber"
-          suppressHydrationWarning
-          suppressContentEditableWarning
+        <body
+          style={{
+            margin: 0,
+            backgroundColor: isEmbed ? 'transparent' : undefined,
+          }}
         >
-          <Flex
-            direction="column"
-            style={{
-              minHeight: '100vh',
-              paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
-            }}
+          <Theme
+            appearance="dark"
+            panelBackground="solid"
+            radius="full"
+            accentColor="amber"
+            suppressHydrationWarning
+            suppressContentEditableWarning
           >
-            {!isEmbed && <Navbar />}
-
-            <Checks />
-
-            <Suspense
-              fallback={
-                <div style={{ flex: 1 }}>
-                  <Loader />
-                </div>
-              }
+            <Flex
+              direction="column"
+              style={{
+                minHeight: '100vh',
+                paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
+              }}
             >
-              {children}
-            </Suspense>
+              {!isEmbed && <Navbar />}
 
-            {!isEmbed && <Footer />}
-          </Flex>
-        </Theme>
-      </body>
-    </html>
+              <Checks />
+
+              <Suspense fallback={<PageLoader />}>{children}</Suspense>
+
+              {!isEmbed && <Footer />}
+            </Flex>
+          </Theme>
+        </body>
+      </html>
+    </App.Provider>
   );
 }

src/app/page.tsx

@@ -1,147 +1,75 @@
-import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Box, Button, Flex, Grid, Heading, Text } from '@radix-ui/themes';
-import Link from 'next/link';
-import PageWrapper from '../components/PageWrapper';
-import { TOOLS } from '../constants/tools';
-import { ImgurSize, imgur } from '../core/blitzkit/imgur';
+'use client';
+
+import { Flex } from '@radix-ui/themes';
+import { AdMidSectionResponsive } from '../components/AdMidSectionResponsive';
+import {
+  compareTool,
+  discordTool,
+  moreTool,
+  ratingTool,
+  sessionTool,
+  tankopediaTool,
+  tankPerformanceTool,
+} from '../constants/tools';
+import { useAdExempt } from '../hooks/useAdExempt';
 import { Hero } from './components/Hero';
+import { PatreonPlug } from './components/PatreonPlug';
+import { ToolCard } from './components/ToolCard';
 
 export default function Page() {
+  const exempt = useAdExempt();
+
   return (
     <>
       <Hero />
 
-      <PageWrapper size={1028}>
-        <Grid
-          p="4"
-          gap="4"
-          columns={{
-            initial: undefined,
-            sm: '2',
-          }}
-          flow="row-dense"
-        >
-          {TOOLS.map((tool) => {
-            const size = tool.significant
-              ? ImgurSize.HugeThumbnail
-              : ImgurSize.LargeThumbnail;
+      <PatreonPlug />
 
-            return (
-              <Flex
-                key={tool.id}
-                style={{
-                  position: 'relative',
-                  borderRadius: 'var(--radius-2)',
-                  overflow: 'hidden',
-                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
-                  height: tool.significant ? 'min(320px, 50vh)' : '256px',
-                }}
-                gridColumn={{
-                  initial: undefined,
-                  sm: tool.significant ? '1 / 3' : undefined,
-                }}
-              >
-                <Link
-                  href={tool.href ?? `/tools/${tool.id}`}
-                  style={{
-                    display: 'flex',
-                    width: '100%',
-                    height: '100%',
-                    flexDirection: 'column',
-                    textDecoration: 'none',
-                    color: 'inherit',
-                  }}
-                >
-                  <Box
-                    flexGrow="1"
-                    style={{
-                      backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'center',
-                    }}
-                  />
+      <Flex p="4" justify="center" gap="4">
+        <Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
+          <ToolCard tool={tankopediaTool} />
 
-                  <Flex
-                    px={{
-                      initial: '6',
-                      md: tool.significant ? '8' : '6',
-                    }}
-                    py={{
-                      initial: '4',
-                      sm: tool.significant ? '6' : '4',
-                    }}
-                    gap="4"
-                    align="center"
-                    justify="between"
-                    width="100%"
-                    direction={{
-                      initial: 'column',
-                      sm: 'row',
-                    }}
-                    style={{
-                      backgroundColor: 'var(--color-panel-translucent)',
-                      backdropFilter: 'blur(64px)',
-                      WebkitBackdropFilter: 'blur(64px)',
-                    }}
-                  >
-                    <Flex
-                      direction="column"
-                      justify="center"
-                      align={{
-                        initial: 'center',
-                        sm: 'start',
-                      }}
-                    >
-                      <Heading
-                        align={{
-                          initial: 'center',
-                          sm: 'left',
-                        }}
-                        size={{
-                          initial: '6',
-                          sm: tool.significant ? '7' : '5',
-                        }}
-                        weight="medium"
-                      >
-                        {tool.title}
-                      </Heading>
-                      <Text
-                        align={{
-                          initial: 'center',
-                          sm: 'left',
-                        }}
-                        size={{
-                          initial: '3',
-                          sm: tool.significant ? '4' : '3',
-                        }}
-                        color="gray"
-                      >
-                        {tool.description}
-                      </Text>
-                    </Flex>
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            {/* <ToolCard tool={playerStatsTool} /> */}
+            <ToolCard tool={compareTool} />
+            <ToolCard tool={tankPerformanceTool} />
+          </Flex>
 
-                    <Button
-                      size={{
-                        initial: undefined,
-                        sm: tool.significant ? '3' : undefined,
-                      }}
-                      color={tool.button.color}
-                      style={{
-                        cursor: 'inherit',
-                      }}
-                    >
-                      {tool.button.text}
-                      <CaretRightIcon />
-                    </Button>
-                  </Flex>
-                </Link>
-              </Flex>
-            );
-          })}
-        </Grid>
-      </PageWrapper>
+          {!exempt && (
+            <Flex justify="center">
+              <AdMidSectionResponsive />
+            </Flex>
+          )}
+
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={sessionTool} />
+            <ToolCard tool={ratingTool} />
+          </Flex>
+
+          {!exempt && (
+            <Flex
+              justify="center"
+              display={{
+                initial: 'flex',
+                md: 'none',
+              }}
+            >
+              <AdMidSectionResponsive />
+            </Flex>
+          )}
+
+          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <ToolCard tool={discordTool} />
+            <ToolCard tool={moreTool} />
+          </Flex>
+
+          {/* <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            <Box flexGrow="1" />
+          </Flex> */}
+        </Flex>
+      </Flex>
+
+      {!exempt && <AdMidSectionResponsive />}
 
       <div style={{ flex: 1 }} />
     </>

src/app/settings/page.tsx

@@ -2,10 +2,11 @@
 
 import { Flex, Heading, Switch, Text } from '@radix-ui/themes';
 import PageWrapper from '../../components/PageWrapper';
-import { useApp } from '../../stores/app';
+import * as App from '../../stores/app';
 
 export default function Page() {
-  const developerMode = useApp((state) => state.developerMode);
+  const developerMode = App.use((state) => state.developerMode);
+  const appStore = App.useStore();
 
   return (
     <PageWrapper justify="center" align="center">
@@ -18,7 +19,7 @@ export default function Page() {
             <Switch
               checked={developerMode}
               onCheckedChange={(checked) =>
-                useApp.setState({ developerMode: checked })
+                appStore.setState({ developerMode: checked })
               }
             />
           </Flex>

src/app/tools/compare/components/Body.tsx

@@ -0,0 +1,400 @@
+import { Flex, Heading, IconButton, Table } from '@radix-ui/themes';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
+import { asset } from '../../../../core/blitzkit/asset';
+import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+import { CompareRow } from './CompareRow';
+import { CompareSectionTitle } from './CompareSectionTitle';
+
+interface BodyProps {
+  stats: TankCharacteristics[];
+}
+
+export function Body({ stats }: BodyProps) {
+  const members = CompareEphemeral.use((state) => state.members);
+  const hasNonRegularGun = members.some(({ gun }) => gun.type !== 'regular');
+  const mutateCompareEphemeral = CompareEphemeral.useMutation();
+
+  return (
+    <>
+      <Table.Header>
+        <Table.Row>
+          <StickyColumnHeaderCell top={137} style={{ left: 0, zIndex: 2 }}>
+            <Flex height="100%" align="center">
+              <Heading size="4">Firepower</Heading>
+            </Flex>
+          </StickyColumnHeaderCell>
+
+          {members.map(({ gun, shell, key }, index) => (
+            <StickyColumnHeaderCell key={key} top={137}>
+              <Flex justify="center">
+                <Flex>
+                  {gun.shells.map((thisShell, shellIndex) => (
+                    <IconButton
+                      color={thisShell.id === shell.id ? undefined : 'gray'}
+                      variant="soft"
+                      key={thisShell.id}
+                      style={{
+                        borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
+                        borderBottomLeftRadius:
+                          shellIndex === 0 ? undefined : 0,
+                        borderTopRightRadius:
+                          shellIndex === gun.shells.length - 1 ? undefined : 0,
+                        borderBottomRightRadius:
+                          shellIndex === gun.shells.length - 1 ? undefined : 0,
+                        marginLeft: shellIndex === 0 ? 0 : -1,
+                      }}
+                      onClick={() => {
+                        mutateCompareEphemeral((draft) => {
+                          draft.members[index].shell = thisShell;
+                        });
+                      }}
+                    >
+                      <img
+                        alt={thisShell.name}
+                        width={16}
+                        height={16}
+                        src={asset(`icons/shells/${thisShell.icon}.webp`)}
+                      />
+                    </IconButton>
+                  ))}
+                </Flex>
+              </Flex>
+            </StickyColumnHeaderCell>
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <CompareRow stats={stats} name="DPM" value="dpm" decimals={0} />
+        <CompareRow
+          stats={stats}
+          name="Reload"
+          deltaType="lowerIsBetter"
+          value={(stats) =>
+            stats.shellReload ??
+            stats.shellReloads!.reduce((a, b) => a + b, 0) /
+              stats.shellReloads!.length
+          }
+          display={(stats) =>
+            stats.shellReload?.toFixed(2) ??
+            stats.shellReloads!.map((reload) => reload.toFixed(2)).join(', ')
+          }
+          deltaNominalDisplay={(delta) => delta.toFixed(2)}
+        />
+        {hasNonRegularGun && (
+          <>
+            <CompareRow
+              stats={stats}
+              name="Intra-clip"
+              deltaType="lowerIsBetter"
+              value="intraClip"
+              decimals={2}
+            />
+            <CompareRow
+              stats={stats}
+              name="Shells"
+              value="shells"
+              decimals={0}
+            />
+          </>
+        )}
+        <CompareRow
+          stats={stats}
+          name="Penetration"
+          value="penetration"
+          decimals={0}
+        />
+        <CompareRow stats={stats} name="Damage" value="damage" decimals={0} />
+        {hasNonRegularGun && (
+          <CompareRow
+            stats={stats}
+            name="clipping potential"
+            indent
+            value="clipDamage"
+            decimals={0}
+          />
+        )}
+        <CompareRow
+          stats={stats}
+          name="Module damage"
+          value="moduleDamage"
+          decimals={0}
+        />
+        <CompareRow stats={stats} name="Caliber" value="caliber" decimals={0} />
+        <CompareRow
+          stats={stats}
+          name="Normalization"
+          value="shellNormalization"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="Ricochet"
+          value="shellRicochet"
+          deltaType="lowerIsBetter"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="Shell velocity"
+          value="shellVelocity"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="Aim time"
+          value="aimTime"
+          deltaType="lowerIsBetter"
+          decimals={2}
+        />
+        <CompareRow
+          stats={stats}
+          name="Dispersion"
+          value="dispersion"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="moving"
+          indent
+          value="dispersionMoving"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="hull traversing"
+          indent
+          value="dispersionHullTraversing"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="turret traversing"
+          indent
+          value="dispersionTurretTraversing"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="shooting"
+          indent
+          value="dispersionShooting"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="gun damaged"
+          indent
+          value="dispersionGunDamaged"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="maximum"
+          indent
+          value="maxDispersion"
+          deltaType="lowerIsBetter"
+          decimals={3}
+        />
+        <CompareRow
+          stats={stats}
+          name="Gun depression"
+          value="gunDepression"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="elevation"
+          indent
+          value="gunElevation"
+          decimals={1}
+        />
+      </Table.Body>
+
+      <CompareSectionTitle>Maneuverability</CompareSectionTitle>
+      <Table.Body>
+        <CompareRow
+          stats={stats}
+          name="Speed forwards"
+          value="speedForwards"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="backwards"
+          indent
+          value="speedBackwards"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="Engine power"
+          value="enginePower"
+          decimals={0}
+        />
+        <CompareRow stats={stats} name="Weight" value="weight" decimals={1} />
+        <CompareRow
+          stats={stats}
+          name="Terrain coefficient"
+          value="hardTerrainCoefficient"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="medium terrain"
+          indent
+          value="mediumTerrainCoefficient"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="soft terrain"
+          indent
+          value="softTerrainCoefficient"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="Power to weight ratio"
+          value="powerToWeightRatioHardTerrain"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="medium terrain"
+          indent
+          value="powerToWeightRatioMediumTerrain"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="soft terrain"
+          indent
+          value="powerToWeightRatioSoftTerrain"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="Turret traverse speed"
+          value="turretTraverseSpeed"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="Traverse speed"
+          value="hullTraverseHardTerrain"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="medium terrain"
+          indent
+          value="hullTraverseMediumTerrain"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="soft terrain"
+          indent
+          value="hullTraverseSoftTerrain"
+          decimals={1}
+        />
+      </Table.Body>
+
+      <CompareSectionTitle>Survivability</CompareSectionTitle>
+      <Table.Body>
+        <CompareRow stats={stats} name="Health" value="health" decimals={0} />
+        <CompareRow
+          stats={stats}
+          name="Fire chance"
+          value="fireChance"
+          deltaType="lowerIsBetter"
+          display={(stats) => (stats.fireChance * 100).toFixed(0)}
+          deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+        />
+        <CompareRow
+          stats={stats}
+          name="View range"
+          value="viewRange"
+          decimals={0}
+        />
+        <CompareRow
+          stats={stats}
+          name="Camouflage"
+          value="camouflageStill"
+          display={(stats) => (stats.camouflageStill * 100).toFixed(0)}
+          deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+        />
+        <CompareRow
+          stats={stats}
+          name="moving"
+          indent
+          value="camouflageMoving"
+          display={(stats) => (stats.camouflageMoving * 100).toFixed(0)}
+          deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+        />
+        <CompareRow
+          stats={stats}
+          name="shooting"
+          indent
+          value="camouflageShootingStill"
+          display={(stats) => (stats.camouflageShootingStill * 100).toFixed(0)}
+          deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+        />
+        <CompareRow
+          stats={stats}
+          name="shooting & moving"
+          indent
+          value="camouflageShootingMoving"
+          display={(stats) => (stats.camouflageShootingMoving * 100).toFixed(0)}
+          deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+        />
+        <CompareRow
+          stats={stats}
+          name="caught on fire"
+          indent
+          value="camouflageCaughtOnFire"
+          display={(stats) => (stats.camouflageCaughtOnFire * 100).toFixed(0)}
+          deltaNominalDisplay={(delta) => (delta * 100).toFixed(0)}
+        />
+        <CompareRow
+          stats={stats}
+          name="Volume"
+          value="volume"
+          deltaType="lowerIsBetter"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="width"
+          indent
+          value="width"
+          deltaType="lowerIsBetter"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="height"
+          indent
+          value="height"
+          deltaType="lowerIsBetter"
+          decimals={1}
+        />
+        <CompareRow
+          stats={stats}
+          name="length"
+          indent
+          value="length"
+          deltaType="lowerIsBetter"
+          decimals={1}
+        />
+      </Table.Body>
+    </>
+  );
+}

src/app/tools/compare/components/CompareRow.tsx

@@ -0,0 +1,176 @@
+import {
+  CaretLeftIcon,
+  CaretRightIcon,
+  CaretSortIcon,
+} from '@radix-ui/react-icons';
+import { Flex, IconButton, Table, Text } from '@radix-ui/themes';
+import { StickyRowHeaderCell } from '../../../../components/StickyRowHeaderCell';
+import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
+import { theme } from '../../../../stitches.config';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+import * as ComparePersistent from '../../../../stores/comparePersistent';
+
+interface CompareRowProps {
+  name: string;
+  value:
+    | keyof Awaited<TankCharacteristics>
+    | ((member: Awaited<TankCharacteristics>) => number | undefined);
+  display?: (
+    member: Awaited<TankCharacteristics>,
+  ) => number | string | undefined;
+  deltaType?: 'higherIsBetter' | 'lowerIsBetter';
+  decimals?: number;
+  deltaNominalDisplay?: (delta: number) => string | number;
+  indent?: boolean;
+  stats: TankCharacteristics[];
+}
+
+export function CompareRow({
+  value,
+  name,
+  display,
+  deltaType = 'higherIsBetter',
+  decimals,
+  deltaNominalDisplay,
+  indent,
+  stats,
+}: CompareRowProps) {
+  const mutateCompareEphemeral = CompareEphemeral.useMutation();
+  const sorting = CompareEphemeral.use((state) => state.sorting);
+  const deltaMode = ComparePersistent.use((state) => state.deltaMode);
+
+  const values = stats.map((stat) =>
+    typeof value === 'function' ? value(stat)! : (stat[value] as number),
+  );
+
+  return (
+    <Table.Row>
+      <StickyRowHeaderCell>
+        <Flex
+          align="center"
+          style={{ whiteSpace: 'nowrap' }}
+          gap={indent ? { initial: '4', sm: '6' } : { initial: '1', sm: '2' }}
+        >
+          <IconButton
+            color={sorting?.by === name ? undefined : 'gray'}
+            variant="ghost"
+            onClick={() => {
+              mutateCompareEphemeral((draft) => {
+                draft.members.sort((memberA, memberB) => {
+                  const indexA = draft.members.indexOf(memberA);
+                  const indexB = draft.members.indexOf(memberB);
+                  const valueA = values[indexA];
+                  const valueB = values[indexB];
+
+                  return draft.sorting?.direction === 'ascending' &&
+                    draft.sorting.by === name
+                    ? valueA - valueB
+                    : valueB - valueA;
+                });
+
+                draft.sorting = {
+                  by: name,
+                  direction:
+                    draft.sorting?.direction === 'ascending' &&
+                    draft.sorting.by === name
+                      ? 'descending'
+                      : 'ascending',
+                };
+              });
+            }}
+          >
+            {(sorting === undefined || sorting.by !== name) && (
+              <CaretSortIcon style={{ transform: 'rotate(90deg)' }} />
+            )}
+            {sorting?.by === name && (
+              <>
+                {sorting.direction === 'ascending' && <CaretRightIcon />}
+                {sorting.direction === 'descending' && <CaretLeftIcon />}
+              </>
+            )}
+          </IconButton>
+
+          <Text size={{ initial: '1', sm: '2' }}>{name}</Text>
+        </Flex>
+      </StickyRowHeaderCell>
+
+      {values.map((value, index) => {
+        const delta = value - values[0];
+        const deltaPercentage = value / values[0] - 1;
+        const normalizedDeltaPercentage = Math.round(
+          Math.min(100, Math.abs(deltaPercentage) * 2 * 100 + 25),
+        );
+        const resolvedDisplayValue = display
+          ? display(stats[index])
+          : decimals === undefined
+            ? value
+            : value?.toFixed(decimals);
+
+        return (
+          <Table.Cell
+            key={index}
+            style={{
+              backgroundColor:
+                index === 0 ||
+                value === undefined ||
+                values[0] === undefined ||
+                value === values[0]
+                  ? undefined
+                  : (
+                        deltaType === 'higherIsBetter'
+                          ? value > values[0]
+                          : value < values[0]
+                      )
+                    ? `color-mix(in srgb, ${theme.colors.componentCallToActionInteractive_green} ${normalizedDeltaPercentage}%, ${theme.colors.componentCallToActionInteractive_green}00)`
+                    : `color-mix(in srgb, ${theme.colors.componentCallToActionInteractive_red} ${normalizedDeltaPercentage}%, ${theme.colors.componentCallToActionInteractive_red}00)`,
+            }}
+          >
+            <Flex
+              align="center"
+              justify="center"
+              gap="2"
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <Text style={{ textAlign: 'center' }} wrap="nowrap">
+                {resolvedDisplayValue}
+              </Text>
+
+              {delta !== 0 &&
+                resolvedDisplayValue !== undefined &&
+                values[0] !== undefined && (
+                  <>
+                    {deltaMode === 'absolute' && (
+                      <Text color="gray">
+                        (
+                        {`${delta > 0 ? '+' : ''}${
+                          deltaNominalDisplay
+                            ? deltaNominalDisplay(delta)
+                            : decimals === undefined
+                              ? delta
+                              : delta.toFixed(decimals)
+                        }`}
+                        )
+                      </Text>
+                    )}
+
+                    {deltaMode === 'percentage' && (
+                      <Text color="gray">
+                        (
+                        {`${deltaPercentage > 0 ? '+' : ''}${Math.round(
+                          deltaPercentage * 100,
+                        )}%`}
+                        )
+                      </Text>
+                    )}
+                  </>
+                )}
+            </Flex>
+          </Table.Cell>
+        );
+      })}
+    </Table.Row>
+  );
+}

src/app/tools/compare/components/CompareSectionTitle.tsx

@@ -0,0 +1,22 @@
+import { Heading, Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+
+export function CompareSectionTitle({ children }: { children: string }) {
+  const memberCount = CompareEphemeral.use((state) => state.members.length);
+
+  return (
+    <Table.Header style={{ height: 48 }}>
+      <Table.Row align="center">
+        <StickyColumnHeaderCell top={137} style={{ left: 0, zIndex: 2 }}>
+          <Heading size="4">{children}</Heading>
+        </StickyColumnHeaderCell>
+
+        {times(memberCount, (index) => (
+          <StickyColumnHeaderCell key={index} top={137} />
+        ))}
+      </Table.Row>
+    </Table.Header>
+  );
+}

src/app/tools/compare/components/CompareTable.tsx

@@ -0,0 +1,546 @@
+import { ComponentPlaceholderIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Popover, Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { use } from 'react';
+import { ConsumablesManager } from '../../../../components/ConsumablesManager';
+import { CrewSkillManager } from '../../../../components/CrewSkillManager';
+import { EquipmentManager } from '../../../../components/EquipmentManager';
+import { ModuleManager } from '../../../../components/ModuleManager';
+import { ProvisionsManager } from '../../../../components/ProvisionsManager';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
+import { StickyTableRoot } from '../../../../components/StickyTableRoot';
+import { asset } from '../../../../core/blitzkit/asset';
+import { availableProvisions } from '../../../../core/blitzkit/availableProvisions';
+import { checkConsumableProvisionInclusivity } from '../../../../core/blitzkit/checkConsumableProvisionInclusivity';
+import { consumableDefinitions } from '../../../../core/blitzkit/consumableDefinitions';
+import { equipmentDefinitions } from '../../../../core/blitzkit/equipmentDefinitions';
+import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
+import { skillDefinitions } from '../../../../core/blitzkit/skillDefinitions';
+import { TankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
+import { BlitzkitButtonWatermark } from '../../../../icons/BlitzkitButtonWatermark';
+import { theme } from '../../../../stitches.config';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+import { EquipmentMatrix } from '../../../../stores/duel';
+import { permanentSkills } from '../../tankopedia/[id]/components/Characteristics/components/Skills/constants';
+import { Body } from './Body';
+import { InsertionMarker } from './IntersectionMarker';
+import { TankCard } from './TankCard';
+
+interface CompareTableProps {
+  stats: TankCharacteristics[];
+}
+
+export function CompareTable({ stats }: CompareTableProps) {
+  const crewSkills = CompareEphemeral.use((state) => state.crewSkills);
+  const members = CompareEphemeral.use((state) => state.members);
+  const awaitedSkillDefinitions = use(skillDefinitions);
+  const mutateCompareEphemeral = CompareEphemeral.useMutation();
+  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+  const awaitedConsumableDefinitions = use(consumableDefinitions);
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+
+  return (
+    <StickyTableRoot
+      size="1"
+      variant="surface"
+      style={{ maxWidth: '100%', height: 'calc(100vh - 128px)' }}
+    >
+      <Table.Header>
+        <Table.Row>
+          <StickyColumnHeaderCell width="0" style={{ height: '100%' }}>
+            <Flex
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+              align="center"
+              justify="center"
+            >
+              <BlitzkitButtonWatermark width={64} height={64} />
+              <InsertionMarker index={0} />
+            </Flex>
+          </StickyColumnHeaderCell>
+
+          {members.map(({ tank, key }, index) => {
+            return <TankCard index={index} key={key} tank={tank} />;
+          })}
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell style={{ height: '100%' }}>
+            <Flex
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+              align="center"
+              justify="center"
+            >
+              <Popover.Root>
+                <Popover.Trigger>
+                  <Button variant="ghost" radius="large">
+                    <Flex
+                      direction="column"
+                      style={{
+                        gap: 2,
+                      }}
+                    >
+                      {Object.entries(awaitedSkillDefinitions.classes).map(
+                        ([tankClass, skills]) => (
+                          <Flex key={tankClass} style={{ gap: 2 }}>
+                            {skills.map((skill) => (
+                              <div
+                                key={skill}
+                                style={{
+                                  width: 6,
+                                  height: 6,
+                                  borderRadius: 2,
+                                  backgroundColor:
+                                    crewSkills[skill] === 0
+                                      ? theme.colors.textLowContrast
+                                      : permanentSkills.includes(skill)
+                                        ? theme.colors.textLowContrast_crimson
+                                        : theme.colors.textLowContrast_amber,
+                                }}
+                              />
+                            ))}
+                          </Flex>
+                        ),
+                      )}
+                    </Flex>
+                  </Button>
+                </Popover.Trigger>
+
+                <Popover.Content>
+                  <CrewSkillManager
+                    skillLevels={crewSkills}
+                    onChange={(skills) => {
+                      mutateCompareEphemeral((draft) => {
+                        draft.crewSkills = skills;
+                      });
+                    }}
+                  />
+
+                  <Flex justify="end" mt="4" gap="4">
+                    <Button
+                      variant="ghost"
+                      onClick={() => {
+                        mutateCompareEphemeral((draft) => {
+                          Object.keys(draft.crewSkills).forEach((skill) => {
+                            draft.crewSkills[skill] = 0;
+                          });
+                        });
+                      }}
+                    >
+                      Clear
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      onClick={() => {
+                        mutateCompareEphemeral((draft) => {
+                          Object.keys(draft.crewSkills).forEach((skill) => {
+                            draft.crewSkills[skill] = 7;
+                          });
+                        });
+                      }}
+                    >
+                      Maximize
+                    </Button>
+                  </Flex>
+                </Popover.Content>
+              </Popover.Root>
+            </Flex>
+          </Table.Cell>
+
+          {members.map(
+            (
+              {
+                equipmentMatrix,
+                tank,
+                key,
+                provisions,
+                gun,
+                shell,
+                turret,
+                engine,
+                track,
+                consumables,
+              },
+              index,
+            ) => {
+              const equipmentPreset =
+                awaitedEquipmentDefinitions.presets[tank.equipment];
+              const provisionsList = availableProvisions(
+                tank,
+                gun,
+                awaitedProvisionDefinitions,
+              );
+              const consumablesList = Object.values(
+                awaitedConsumableDefinitions,
+              ).filter((consumable) =>
+                checkConsumableProvisionInclusivity(consumable, tank, gun),
+              );
+
+              return (
+                <Table.Cell key={key}>
+                  <Flex
+                    align="center"
+                    justify="center"
+                    direction="column"
+                    gap="2"
+                  >
+                    <Popover.Root>
+                      <Popover.Trigger>
+                        <Button variant="ghost">
+                          <Flex align="center">
+                            {(
+                              ['turret', 'gun', 'engine', 'chassis'] as const
+                            ).map((module, index) => (
+                              <img
+                                alt={module}
+                                width={24}
+                                height={24}
+                                src={asset(`icons/modules/${module}.webp`)}
+                                style={{
+                                  marginLeft: index > 0 ? -8 : 0,
+                                  objectFit: 'contain',
+                                }}
+                              />
+                            ))}
+                          </Flex>
+                        </Button>
+                      </Popover.Trigger>
+
+                      <Popover.Content>
+                        <ModuleManager
+                          tank={tank}
+                          turret={turret}
+                          gun={gun}
+                          shell={shell}
+                          engine={engine}
+                          track={track}
+                          onChange={(modules) => {
+                            mutateCompareEphemeral((draft) => {
+                              draft.members[index] = {
+                                ...draft.members[index],
+                                ...modules,
+                              };
+                            });
+                          }}
+                        />
+
+                        <Flex justify="end" mt="4" gap="4">
+                          <Button
+                            variant="ghost"
+                            onClick={() => {
+                              mutateCompareEphemeral((draft) => {
+                                const member = draft.members[index];
+
+                                member.turret = member.tank.turrets[0];
+                                member.gun = member.turret.guns[0];
+                                member.shell = member.gun.shells[0];
+                                member.engine = member.tank.engines[0];
+                                member.track = member.tank.tracks[0];
+                              });
+                            }}
+                          >
+                            Stock
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            onClick={() => {
+                              mutateCompareEphemeral((draft) => {
+                                const member = draft.members[index];
+
+                                member.turret = member.tank.turrets.at(-1)!;
+                                member.gun = member.turret.guns.at(-1)!;
+                                member.shell = member.gun.shells[0];
+                                member.engine = member.tank.engines.at(-1)!;
+                                member.track = member.tank.tracks.at(-1)!;
+                              });
+                            }}
+                          >
+                            Upgrade
+                          </Button>
+                        </Flex>
+                      </Popover.Content>
+                    </Popover.Root>
+
+                    <Flex align="center" justify="center" gap="3">
+                      <Popover.Root>
+                        <Popover.Trigger>
+                          <Button
+                            variant="ghost"
+                            radius="large"
+                            style={{
+                              height: '100%',
+                              width: 12,
+                              position: 'relative',
+                            }}
+                          >
+                            <Flex direction="column" justify="center">
+                              {provisions.map((provision, index) => (
+                                <img
+                                  alt={
+                                    awaitedProvisionDefinitions[provision].name
+                                  }
+                                  key={provision}
+                                  src={asset(
+                                    `/icons/provisions/${provision}.webp`,
+                                  )}
+                                  style={{
+                                    left: '50%',
+                                    /**
+                                     * max = 100% - 16px - 4px
+                                     * min = 4px
+                                     * diff = max - min
+                                     *      = 100% - 16px - 4px - 4px
+                                     *      = 100% - 24px
+                                     * coefficient = index / length - 1
+                                     * position = min + coefficient * diff
+                                     */
+                                    top: `calc(4px + ${
+                                      provisions.length === 1
+                                        ? 0.5
+                                        : index / (provisions.length - 1)
+                                    } * (100% - 24px))`,
+                                    transform: 'translateX(-50%)',
+                                    position: 'absolute',
+                                    width: 16,
+                                    height: 16,
+                                    objectFit: 'contain',
+                                  }}
+                                />
+                              ))}
+
+                              {provisions.length === 0 && (
+                                <ComponentPlaceholderIcon />
+                              )}
+                            </Flex>
+                          </Button>
+                        </Popover.Trigger>
+
+                        <Popover.Content>
+                          <ProvisionsManager
+                            provisions={provisionsList.map(
+                              (provision) => provision.id,
+                            )}
+                            selected={provisions}
+                            disabled={tank.provisions === provisions.length}
+                            onChange={(provisions) => {
+                              mutateCompareEphemeral((draft) => {
+                                draft.members[index].provisions = provisions;
+                              });
+                            }}
+                          />
+
+                          <Flex justify="end" mt="4">
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                mutateCompareEphemeral((draft) => {
+                                  draft.members[index].provisions = [];
+                                });
+                              }}
+                            >
+                              Clear
+                            </Button>
+                          </Flex>
+                        </Popover.Content>
+                      </Popover.Root>
+
+                      <Popover.Root>
+                        <Popover.Trigger>
+                          <Button variant="ghost" radius="large">
+                            <Flex gap="1" direction="column">
+                              {times(3, (y) => (
+                                <Flex
+                                  key={y}
+                                  style={{
+                                    gap: 6,
+                                  }}
+                                >
+                                  {times(3, (x) => {
+                                    const equipment = equipmentMatrix[y][x];
+
+                                    return (
+                                      <Flex
+                                        key={x}
+                                        style={{
+                                          gap: 2,
+                                        }}
+                                      >
+                                        <div
+                                          style={{
+                                            width: 4,
+                                            height: 8,
+                                            backgroundColor:
+                                              equipment === -1
+                                                ? theme.colors
+                                                    .textLowContrast_crimson
+                                                : theme.colors.textLowContrast,
+                                            borderRadius: 2,
+                                          }}
+                                        />
+                                        <div
+                                          style={{
+                                            width: 4,
+                                            height: 8,
+                                            backgroundColor:
+                                              equipment === 1
+                                                ? theme.colors
+                                                    .textLowContrast_crimson
+                                                : theme.colors.textLowContrast,
+                                            borderRadius: 2,
+                                          }}
+                                        />
+                                      </Flex>
+                                    );
+                                  })}
+                                </Flex>
+                              ))}
+                            </Flex>
+                          </Button>
+                        </Popover.Trigger>
+
+                        <Popover.Content>
+                          <EquipmentManager
+                            matrix={equipmentMatrix}
+                            preset={equipmentPreset}
+                            onChange={(matrix) => {
+                              mutateCompareEphemeral((draft) => {
+                                draft.members[index].equipmentMatrix = matrix;
+                                draft.sorting = undefined;
+                              });
+                            }}
+                          />
+
+                          <Flex justify="end" gap="4" mt="4">
+                            <Button
+                              variant="ghost"
+                              color="red"
+                              onClick={() => {
+                                mutateCompareEphemeral((draft) => {
+                                  draft.members[index].equipmentMatrix = times(
+                                    3,
+                                    () => times(3, () => 0),
+                                  ) as EquipmentMatrix;
+                                  draft.sorting = undefined;
+                                });
+                              }}
+                            >
+                              Clear
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                mutateCompareEphemeral((draft) => {
+                                  draft.members.forEach((member) => {
+                                    member.equipmentMatrix =
+                                      draft.members[index].equipmentMatrix;
+                                    draft.sorting = undefined;
+                                  });
+                                });
+                              }}
+                            >
+                              Apply to all
+                            </Button>
+                          </Flex>
+                        </Popover.Content>
+                      </Popover.Root>
+
+                      <Popover.Root>
+                        <Popover.Trigger>
+                          <Button
+                            variant="ghost"
+                            radius="large"
+                            style={{
+                              height: '100%',
+                              width: 12,
+                              position: 'relative',
+                            }}
+                          >
+                            <Flex direction="column" justify="center">
+                              {consumables.map((consumable, index) => (
+                                <img
+                                  alt={
+                                    awaitedConsumableDefinitions[consumable]
+                                      .name
+                                  }
+                                  key={consumable}
+                                  src={asset(
+                                    `/icons/consumables/${consumable}.webp`,
+                                  )}
+                                  style={{
+                                    left: '50%',
+                                    /**
+                                     * max = 100% - 16px - 4px
+                                     * min = 4px
+                                     * diff = max - min
+                                     *      = 100% - 16px - 4px - 4px
+                                     *      = 100% - 24px
+                                     * coefficient = index / length - 1
+                                     * position = min + coefficient * diff
+                                     */
+                                    top: `calc(4px + ${
+                                      consumables.length === 1
+                                        ? 0.5
+                                        : index / (consumables.length - 1)
+                                    } * (100% - 24px))`,
+                                    transform: 'translateX(-50%)',
+                                    position: 'absolute',
+                                    width: 16,
+                                    height: 16,
+                                    objectFit: 'contain',
+                                  }}
+                                />
+                              ))}
+
+                              {consumables.length === 0 && (
+                                <ComponentPlaceholderIcon />
+                              )}
+                            </Flex>
+                          </Button>
+                        </Popover.Trigger>
+
+                        <Popover.Content>
+                          <ConsumablesManager
+                            consumables={consumablesList}
+                            selected={consumables}
+                            onChange={(consumables) => {
+                              mutateCompareEphemeral((draft) => {
+                                draft.members[index].consumables = consumables;
+                              });
+                            }}
+                            disabled={tank.consumables === consumables.length}
+                          />
+
+                          <Flex justify="end" mt="4">
+                            <Button
+                              variant="ghost"
+                              onClick={() => {
+                                mutateCompareEphemeral((draft) => {
+                                  draft.members[index].consumables = [];
+                                });
+                              }}
+                            >
+                              Clear
+                            </Button>
+                          </Flex>
+                        </Popover.Content>
+                      </Popover.Root>
+                    </Flex>
+                  </Flex>
+                </Table.Cell>
+              );
+            },
+          )}
+        </Table.Row>
+      </Table.Body>
+
+      <Body stats={stats} />
+    </StickyTableRoot>
+  );
+}

src/app/tools/compare/components/Controls.tsx

@@ -0,0 +1,111 @@
+import { PlusIcon, TrashIcon } from '@radix-ui/react-icons';
+import { Button, Dialog, Flex, SegmentedControl } from '@radix-ui/themes';
+import { use } from 'react';
+import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
+import { tankToCompareMember } from '../../../../core/blitzkit/tankToCompareMember';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+import * as ComparePersistent from '../../../../stores/comparePersistent';
+import { TankSearch } from '../../tankopedia/components/TankSearch';
+
+interface ControlsProps {
+  addTankDialogOpen: boolean;
+  onAddTankDialogOpenChange: (open: boolean) => void;
+}
+
+export function Controls({
+  addTankDialogOpen,
+  onAddTankDialogOpenChange,
+}: ControlsProps) {
+  const deltaMode = ComparePersistent.use((state) => state.deltaMode);
+  const awaitedProvisionDefinitions = use(provisionDefinitions);
+  const mutateCompareEphemeral = CompareEphemeral.useMutation();
+  const mutateComparePersistent = ComparePersistent.useMutation();
+
+  return (
+    <Flex gap="2" wrap="wrap" justify="center">
+      <Dialog.Root
+        open={addTankDialogOpen}
+        onOpenChange={onAddTankDialogOpenChange}
+      >
+        <Dialog.Trigger>
+          <Button variant="soft">
+            <PlusIcon /> Add
+          </Button>
+        </Dialog.Trigger>
+
+        <Dialog.Content>
+          <Flex gap="4" direction="column">
+            <Flex
+              direction="column"
+              gap="4"
+              style={{ flex: 1 }}
+              justify="center"
+            >
+              <TankSearch
+                compact
+                onSelect={(tank) => {
+                  mutateCompareEphemeral((draft) => {
+                    draft.members.push(
+                      tankToCompareMember(tank, awaitedProvisionDefinitions),
+                    );
+                    draft.sorting = undefined;
+                  });
+                  onAddTankDialogOpenChange(false);
+                }}
+                onSelectAll={(tanks) => {
+                  mutateCompareEphemeral((draft) => {
+                    draft.members.push(
+                      ...tanks.map((tank) =>
+                        tankToCompareMember(tank, awaitedProvisionDefinitions),
+                      ),
+                    );
+                    draft.sorting = undefined;
+                  });
+                  onAddTankDialogOpenChange(false);
+                }}
+              />
+            </Flex>
+          </Flex>
+        </Dialog.Content>
+      </Dialog.Root>
+
+      <Button
+        variant="soft"
+        color="red"
+        onClick={() => {
+          mutateCompareEphemeral((draft) => {
+            draft.members = [];
+            draft.sorting = undefined;
+          });
+        }}
+      >
+        <TrashIcon /> Clear
+      </Button>
+
+      <SegmentedControl.Root
+        value={deltaMode}
+        onValueChange={(value) => {
+          mutateComparePersistent((draft) => {
+            draft.deltaMode = value as ComparePersistent.DeltaMode;
+          });
+        }}
+      >
+        <SegmentedControl.Item
+          value={'none' satisfies ComparePersistent.DeltaMode}
+        >
+          No deltas
+        </SegmentedControl.Item>
+        <SegmentedControl.Item
+          value={'percentage' satisfies ComparePersistent.DeltaMode}
+        >
+          Percentage
+        </SegmentedControl.Item>
+        <SegmentedControl.Item
+          value={'absolute' satisfies ComparePersistent.DeltaMode}
+        >
+          Absolute
+        </SegmentedControl.Item>
+      </SegmentedControl.Root>
+    </Flex>
+  );
+}

src/app/tools/compare/components/DamageWarning.tsx

@@ -0,0 +1,28 @@
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout } from '@radix-ui/themes';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+
+export function DamageWarning() {
+  const members = CompareEphemeral.use((state) => state.members);
+  const hasReactive = members.some((member) => member.consumables.includes(33));
+  const haDynamicArmor = members.some((member) =>
+    member.consumables.includes(73),
+  );
+  const hasSpallLiner = members.some((member) =>
+    member.provisions.includes(101),
+  );
+
+  if (!hasReactive && !haDynamicArmor && !hasSpallLiner) return null;
+
+  {
+    <Callout.Root>
+      <Callout.Icon>
+        <InfoCircledIcon />
+      </Callout.Icon>
+      <Callout.Text>
+        Consumables like Reactive Armor and Dynamic Armor System and provisions
+        like Spall Liner may reduce other tanks' damage.
+      </Callout.Text>
+    </Callout.Root>;
+  }
+}

src/app/tools/compare/components/IntersectionMarker/constants.ts

@@ -0,0 +1,2 @@
+export const insertionMarkers: { element: HTMLDivElement; index: number }[] =
+  [];

src/app/tools/compare/components/IntersectionMarker/index.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from 'react';
+import { theme } from '../../../../../stitches.config';
+import { insertionMarkers } from './constants';
+
+export function InsertionMarker({ index }: { index: number }) {
+  const marker = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    insertionMarkers.push({
+      element: marker.current!,
+      index,
+    });
+
+    return () => {
+      insertionMarkers.splice(
+        insertionMarkers.findIndex(
+          (insertionMarker) => insertionMarker.element === marker.current!,
+        ),
+        1,
+      );
+    };
+  });
+
+  return (
+    <div
+      ref={marker}
+      style={{
+        height: '75%',
+        width: 2,
+        borderRadius: 1,
+        backgroundColor: theme.colors.textLowContrast_crimson,
+        position: 'absolute',
+        right: 0,
+        top: '50%',
+        transform: 'translateY(-50%)',
+        opacity: 0,
+      }}
+    />
+  );
+}

src/app/tools/compare/components/TankCard.tsx

@@ -0,0 +1,148 @@
+import { Flex, Text } from '@radix-ui/themes';
+import { useEffect, useRef } from 'react';
+import { Vector2 } from 'three';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
+import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+import { tankIcon } from '../../../../core/blitzkit/tankIcon';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
+import { InsertionMarker } from './IntersectionMarker';
+import { insertionMarkers } from './IntersectionMarker/constants';
+import { TankControl } from './TankControl';
+
+interface TankCardProps {
+  index: number;
+  tank: TankDefinition;
+}
+
+export function TankCard({ index, tank }: TankCardProps) {
+  const draggable = useRef<HTMLDivElement>(null);
+  const mutateCompareEphemeral = CompareEphemeral.useMutation();
+
+  useEffect(() => {
+    const initial = new Vector2();
+    const current = new Vector2();
+    const delta = new Vector2();
+    const marker = new Vector2();
+    let initialRect = draggable.current!.getBoundingClientRect();
+    let dropIndex = -1;
+
+    function handlePointerDown(event: PointerEvent) {
+      event.preventDefault();
+
+      initialRect = draggable.current!.getBoundingClientRect();
+
+      delta.set(0, 0);
+      current.copy(initial.set(event.clientX, event.clientY));
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp);
+    }
+    function handlePointerMove(event: PointerEvent) {
+      event.preventDefault();
+
+      current.set(event.clientX, event.clientY);
+      delta.copy(current).sub(initial);
+      insertionMarkers.forEach(({ element }) => {
+        element.style.opacity = '0';
+      });
+
+      const distances = insertionMarkers.map((insertionMarker) => {
+        const markerBounds = insertionMarker.element.getBoundingClientRect();
+        marker.set(markerBounds.left, markerBounds.top);
+
+        return {
+          ...insertionMarker,
+          distance: marker.distanceTo(current),
+        };
+      });
+      const closest = distances.reduce((a, b) =>
+        a.distance < b.distance ? a : b,
+      );
+
+      dropIndex = closest.index;
+      closest.element.style.opacity = '1';
+      draggable.current!.style.position = 'fixed';
+      draggable.current!.style.cursor = 'grabbing';
+      draggable.current!.style.zIndex = '1';
+      draggable.current!.style.left = `${initialRect.left + delta.x}px`;
+      draggable.current!.style.top = `${initialRect.top + delta.y}px`;
+    }
+    function handlePointerUp(event: PointerEvent) {
+      event.preventDefault();
+
+      draggable.current!.style.position = 'static';
+      draggable.current!.style.zIndex = 'unset';
+      draggable.current!.style.cursor = 'grab';
+
+      insertionMarkers.forEach(({ element }) => {
+        element.style.opacity = '0';
+      });
+
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+
+      if (dropIndex === -1) return;
+
+      mutateCompareEphemeral((draft) => {
+        const fromIndex = index;
+        const toIndex = dropIndex > index ? dropIndex - 1 : dropIndex;
+
+        const member = draft.members[fromIndex];
+        draft.members.splice(fromIndex, 1);
+        draft.members.splice(toIndex, 0, member);
+      });
+
+      dropIndex = -1;
+    }
+
+    draggable.current?.addEventListener('pointerdown', handlePointerDown);
+
+    return () => {
+      draggable.current?.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, []);
+
+  return (
+    <StickyColumnHeaderCell>
+      <Flex direction="column" align="center" justify="between" gap="2">
+        <TankControl index={index} key={tank.id} id={tank.id} />
+
+        <Flex
+          ref={draggable}
+          direction="column"
+          align="center"
+          justify="between"
+          gap="2"
+          style={{
+            userSelect: 'none',
+            touchAction: 'none',
+            cursor: 'grab',
+          }}
+        >
+          <img
+            alt={tank.name}
+            src={tankIcon(tank.id)}
+            width={64}
+            height={64}
+            draggable={false}
+            style={{
+              objectFit: 'contain',
+            }}
+          />
+
+          <Text
+            style={{
+              whiteSpace: 'nowrap',
+              maxWidth: 128,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {tank.name}
+          </Text>
+        </Flex>
+      </Flex>
+
+      <InsertionMarker index={index + 1} />
+    </StickyColumnHeaderCell>
+  );
+}

src/app/tools/compare/components/TankControl.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { use, useState } from 'react';
 import { provisionDefinitions } from '../../../../core/blitzkit/provisionDefinitions';
 import { tankToCompareMember } from '../../../../core/blitzkit/tankToCompareMember';
-import { mutateCompareTemporary } from '../../../../stores/compare';
+import * as CompareEphemeral from '../../../../stores/compareEphemeral';
 import { TankSearch } from '../../tankopedia/components/TankSearch';
 
 interface TankControlProps {
@@ -15,13 +15,14 @@ interface TankControlProps {
 export function TankControl({ index, id }: TankControlProps) {
   const awaitedProvisionDefinitions = use(provisionDefinitions);
   const [switchTankDialogOpen, setSwitchTankDialogOpen] = useState(false);
+  const mutateCompareEphemeral = CompareEphemeral.useMutation();
 
   return (
     <Flex gap="3" justify="center" style={{ width: '100%' }}>
       <IconButton
         variant="ghost"
         onClick={() => {
-          mutateCompareTemporary((draft) => {
+          mutateCompareEphemeral((draft) => {
             draft.members.splice(index, 1);
             draft.sorting = undefined;
           });
@@ -51,7 +52,7 @@ export function TankControl({ index, id }: TankControlProps) {
               <TankSearch
                 compact
                 onSelect={(tank) => {
-                  mutateCompareTemporary((draft) => {
+                  mutateCompareEphemeral((draft) => {
                     draft.members[index] = tankToCompareMember(
                       tank,
                       awaitedProvisionDefinitions,
@@ -66,7 +67,7 @@ export function TankControl({ index, id }: TankControlProps) {
         </Dialog.Content>
       </Dialog.Root>
 
-      <Link href={`/tools/tankopedia/${id}`}>
+      <Link href={`/tools/tankopedia/${id}`} target="_blank" prefetch={false}>
         <IconButton variant="ghost">
           <ExternalLinkIcon />
         </IconButton>

src/app/tools/compare/layout.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import * as CompareEphemeral from '../../../stores/compareEphemeral';
+import * as ComparePersistent from '../../../stores/comparePersistent';
+import * as TankFilters from '../../../stores/tankFilters';
+import * as TankopediaSort from '../../../stores/tankopediaSort';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <TankopediaSort.Provider>
+      <TankFilters.Provider>
+        <ComparePersistent.Provider>
+          <CompareEphemeral.Provider>{children}</CompareEphemeral.Provider>
+        </ComparePersistent.Provider>
+      </TankFilters.Provider>
+    </TankopediaSort.Provider>
+  );
+}

src/app/tools/player-stats/[id]/components/FlippedTrigger.tsx

@@ -0,0 +1,16 @@
+import { Tabs, Text } from '@radix-ui/themes';
+import { TriggerProps } from '@radix-ui/themes/dist/cjs/components/tabs';
+
+export function FlippedTrigger({ children, ...props }: TriggerProps) {
+  return (
+    <Tabs.Trigger {...props}>
+      <Text
+        style={{
+          transform: 'scaleY(-1)',
+        }}
+      >
+        {children}
+      </Text>
+    </Tabs.Trigger>
+  );
+}

src/app/tools/player-stats/[id]/page.tsx

@@ -0,0 +1,322 @@
+'use client';
+
+import { TimerIcon } from '@radix-ui/react-icons';
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Link,
+  Popover,
+  SegmentedControl,
+  Text,
+  Theme,
+} from '@radix-ui/themes';
+import { useState } from 'react';
+import { DatePicker } from '../../../../components/DatePicker';
+import { Speedometer } from '../../../../components/Speedometer';
+import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
+import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
+import { idToRegion } from '../../../../core/blitz/idToRegion';
+import { parseBkni } from '../../../../core/blitzkit/parseBkni';
+import { PeriodType } from '../../../../core/discord/addPeriodSubCommands';
+import {
+  BKNI_COLORS,
+  BKNI_PERCENTILES,
+} from '../../../../core/statistics/getBkniPercentile';
+import { useAwait } from '../../../../hooks/useAwait';
+import strings from '../../../../lang/en-US.json';
+
+export default function Page({ params }: { params: { id: string } }) {
+  const id = parseInt(params.id);
+  const region = idToRegion(id);
+  const accountInfo = useAwait(getAccountInfo(region, id));
+  const clanAccountInfo = useAwait(getClanAccountInfo(region, id, ['clan']));
+  // const bkni = ((Math.round(Date.now() / 1000 / 60) / 100) % 2) - 1;
+  const bkni = 0.81;
+  const winrate = 0.6;
+  const [period, setPeriod] = useState<PeriodType>('30');
+  const { bkniColor, bkniMetric, bkniFraction, bkniPercentile } =
+    parseBkni(bkni);
+  const [customFrom, setCustomFrom] = useState<Date>(
+    new Date(Date.now() - 29 * 24 * 60 * 60 * 1000),
+  );
+  const stats = [
+    ['Damage', '3,203'],
+    ['Tier', '9.83'],
+    ['Survival', '70%'],
+    ['Kills', '1.54'],
+    ['Damage ratio', '2.45'],
+    ['Accuracy', '91%'],
+  ];
+  const [customTo, setCustomTo] = useState<Date>(new Date());
+  const [fromSelectorOpen, setFromSelectorOpen] = useState(false);
+  const [toSelectorOpen, setToSelectorOpen] = useState(false);
+
+  return (
+    <>
+      <Theme accentColor={bkniColor}>
+        <Flex
+          direction="column"
+          align="center"
+          justify="center"
+          py="8"
+          gap="6"
+          style={{
+            background: `linear-gradient(var(--${bkniColor}-a3), var(--${bkniColor}-a1))`,
+          }}
+        >
+          <Flex direction="column" align="center">
+            <Heading
+              size={{
+                initial: '8',
+                sm: '9',
+              }}
+              align="center"
+            >
+              {accountInfo.nickname}
+            </Heading>
+            <Text color="gray" align="center">
+              {clanAccountInfo?.clan && `[${clanAccountInfo.clan.tag}] • `}
+              {
+                (clanAccountInfo?.clan
+                  ? strings.common.regions.short
+                  : strings.common.regions.normal)[region]
+              }
+            </Text>
+          </Flex>
+
+          <Flex direction="column" align="center" gap="3">
+            <SegmentedControl.Root
+              value={period}
+              onValueChange={(value) => setPeriod(value as PeriodType)}
+            >
+              <SegmentedControl.Item value={'today' satisfies PeriodType}>
+                Today
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value={'30' satisfies PeriodType}>
+                30 days
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value={'career' satisfies PeriodType}>
+                Career
+              </SegmentedControl.Item>
+              <SegmentedControl.Item value={'custom' satisfies PeriodType}>
+                Custom
+              </SegmentedControl.Item>
+            </SegmentedControl.Root>
+
+            {period === 'custom' && (
+              <Text>
+                From{' '}
+                <Popover.Root
+                  open={fromSelectorOpen}
+                  onOpenChange={setFromSelectorOpen}
+                >
+                  <Popover.Trigger>
+                    <Link underline="always" href="#">
+                      {customFrom.toLocaleString(undefined, {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })}
+                    </Link>
+                  </Popover.Trigger>
+
+                  <Popover.Content>
+                    <DatePicker
+                      defaultDate={customFrom}
+                      onDateChange={(date) => {
+                        setCustomFrom(date);
+                        setFromSelectorOpen(false);
+                      }}
+                    />
+                  </Popover.Content>
+                </Popover.Root>{' '}
+                to{' '}
+                <Popover.Root
+                  open={toSelectorOpen}
+                  onOpenChange={setToSelectorOpen}
+                >
+                  <Popover.Trigger>
+                    <Link underline="always" href="#">
+                      {customTo.toLocaleString(undefined, {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })}
+                    </Link>
+                  </Popover.Trigger>
+
+                  <Popover.Content>
+                    <DatePicker
+                      defaultDate={customTo}
+                      onDateChange={(date) => {
+                        setCustomTo(date);
+                        setToSelectorOpen(false);
+                      }}
+                    />
+                  </Popover.Content>
+                </Popover.Root>
+              </Text>
+            )}
+          </Flex>
+        </Flex>
+
+        <Flex justify="center" py="8" gap="6">
+          <Speedometer
+            value={`${bkniMetric}`}
+            color={bkniColor}
+            fill={bkniFraction}
+            label={
+              <Popover.Root>
+                <Popover.Trigger>
+                  <Button
+                    style={{ position: 'relative' }}
+                    color="gray"
+                    size="2"
+                    variant="ghost"
+                  >
+                    <TimerIcon />
+                    {strings.common.bkni_percentile[bkniPercentile]}
+                  </Button>
+                </Popover.Trigger>
+
+                <Popover.Content align="center">
+                  <Flex
+                    direction="column"
+                    style={{
+                      width: 'fit-content',
+                    }}
+                  >
+                    <Flex direction="column" mb="3" align="center">
+                      <Heading weight="bold" size="5">
+                        BkNI
+                      </Heading>
+                      <Text size="2" color="gray" wrap="wrap">
+                        A next generation performance metric
+                      </Text>
+                    </Flex>
+
+                    {BKNI_PERCENTILES.map(({ percentile, min }, index) => (
+                      <Button
+                        radius="none"
+                        color={BKNI_COLORS[percentile]}
+                        key={percentile}
+                      >
+                        <Flex
+                          align="center"
+                          justify="between"
+                          width="100%"
+                          gap="2"
+                        >
+                          <Text>
+                            {strings.common.bkni_percentile[percentile]}
+                          </Text>
+                          <Text size="1">
+                            {min}% - {BKNI_PERCENTILES[index + 1]?.min ?? 100}%
+                          </Text>
+                        </Flex>
+                      </Button>
+                    ))}
+                  </Flex>
+                </Popover.Content>
+              </Popover.Root>
+            }
+          />
+
+          <Speedometer
+            value={
+              <Flex align="center" gap="1">
+                {(winrate * 100).toFixed(0)}
+                <Text size="3" color="gray">
+                  %
+                </Text>
+              </Flex>
+            }
+            color="green"
+            fill={0.5 * (Math.cbrt(2 * winrate - 1) + 1)}
+            label={<Text color="gray">Winrate</Text>}
+          />
+        </Flex>
+
+        <Flex style={{ flex: 1 }} wrap="wrap" gap="2" justify="center">
+          {stats.map((stat) => (
+            <Flex minWidth="96px" direction="column" align="center">
+              <Text size="6">{stat[1]}</Text>
+              <Text color="gray" size="2">
+                {stat[0]}
+              </Text>
+            </Flex>
+          ))}
+        </Flex>
+      </Theme>
+
+      <Box flexGrow="1" />
+
+      {/* <Flex gap="4">
+            <Link href="/tools/tankopedia">
+              <Button variant="ghost" size="1" ml="-1">
+                <ChevronLeftIcon />
+                Back
+              </Button>
+            </Link>
+          </Flex> */}
+      {/* <Flex style={{ flex: 1 }} justify="center">
+            </Flex>
+
+            */}
+
+      {/* <PageWrapper
+        p="6"
+        pt="9"
+        size={1600}
+        noFlex1
+        position="relative"
+        color={bkniColor}
+        containerProps={{
+          style: {
+            background: `linear-gradient(var(--${bkniColor}-a2), var(--${bkniColor}-a1))`,
+          },
+        }}
+      >
+        <Tabs.Root
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: '50%',
+            transform: 'scaleY(-1) translateX(-50%)',
+          }}
+          value={`${period}`}
+          onValueChange={(value) => {
+            setPeriod(value === 'custom' ? 'custom' : Number(value));
+          }}
+        >
+          <Tabs.List justify="center">
+            <FlippedTrigger value="1">Today</FlippedTrigger>
+            <FlippedTrigger value="30">30 days</FlippedTrigger>
+            <FlippedTrigger value="Infinity">Career</FlippedTrigger>
+            <FlippedTrigger value="custom">Custom</FlippedTrigger>
+          </Tabs.List>
+        </Tabs.Root>
+
+       
+
+        
+      </PageWrapper>
+
+      <Flex flexGrow="1" justify="center" align="center" p="4">
+        <Callout.Root color="red" mt="4">
+          <Callout.Icon>
+            <ExclamationTriangleIcon />
+          </Callout.Icon>
+          <Callout.Text>
+            We haven't tracked long enough to provide statistics. Please check
+            back after a few days.
+          </Callout.Text>
+        </Callout.Root>
+      </Flex>
+
+      {isTracking && <Box flexGrow="1" />} */}
+    </>
+  );
+}

src/app/tools/player-stats/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { ArrowDownIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Button, Card, Flex, Text, TextField } from '@radix-ui/themes';
+import { useRef, useState } from 'react';
+import { Link } from '../../../components/Link';
+import PageWrapper from '../../../components/PageWrapper';
+import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
+import searchPlayersAcrossRegions, {
+  AccountListWithServer,
+} from '../../../core/blitz/searchPlayersAcrossRegions';
+
+export default function Page() {
+  const input = useRef<HTMLInputElement>(null);
+  const [showSearch, setShowSearch] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<AccountListWithServer>([]);
+
+  async function search() {
+    if (!input.current) return;
+
+    setSearchResults(await searchPlayersAcrossRegions(input.current.value, 9));
+    setSearching(false);
+  }
+
+  return (
+    <PageWrapper>
+      <Flex
+        style={{ flex: 1 }}
+        align="center"
+        justify="center"
+        direction="column"
+        gap="3"
+      >
+        <Flex gap="2" align="center">
+          <Text color="gray">Look up a player to get started</Text>
+          <ArrowDownIcon />
+        </Flex>
+
+        <TextField.Root
+          size="3"
+          style={{
+            position: 'relative',
+            width: '75vw',
+            maxWidth: 480,
+          }}
+          ref={input}
+          placeholder="Search players..."
+          onChange={() => {
+            if (!input.current) return;
+
+            const sanitized = input.current.value.trim();
+
+            if (sanitized.length > 0) {
+              setShowSearch(true);
+              setSearching(true);
+              search();
+            } else {
+              setShowSearch(false);
+            }
+          }}
+        >
+          <TextField.Slot>
+            <MagnifyingGlassIcon />
+          </TextField.Slot>
+
+          {showSearch && (
+            <Card
+              mt="2"
+              style={{
+                position: 'absolute',
+                top: '100%',
+                left: 0,
+                width: '100%',
+              }}
+            >
+              {searching && (
+                <Flex justify="center">
+                  <Text color="gray">Searching...</Text>
+                </Flex>
+              )}
+
+              {!searching && searchResults.length === 0 && (
+                <Flex justify="center">
+                  <Text color="gray">No players found</Text>
+                </Flex>
+              )}
+
+              {!searching && searchResults.length > 0 && (
+                <Flex direction="column" gap="2">
+                  {searchResults.map((player) => (
+                    <Link
+                      key={player.account_id}
+                      href={`/tools/player-stats/${player.account_id}`}
+                    >
+                      <Button key={player.account_id} variant="ghost">
+                        {player.nickname} (
+                        {UNLOCALIZED_REGION_NAMES_SHORT[player.region]})
+                      </Button>
+                    </Link>
+                  ))}
+                </Flex>
+              )}
+            </Card>
+          )}
+        </TextField.Root>
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/session/layout.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import * as Session from '../../../stores/session';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <Session.Provider>{children}</Session.Provider>;
+}

src/app/tools/session/page.tsx

@@ -13,7 +13,6 @@ import {
   Flex,
   Heading,
   IconButton,
-  Link,
   Select,
   Spinner,
   Table,
@@ -23,6 +22,7 @@ import {
 import { debounce } from 'lodash';
 import { use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
+import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
 import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
 import {
   STAT_KEYS,
@@ -42,15 +42,9 @@ import searchPlayersAcrossRegions, {
   AccountListWithServer,
 } from '../../../core/blitz/searchPlayersAcrossRegions';
 import { tankDefinitions } from '../../../core/blitzkit/tankDefinitions';
-import { tankIcon } from '../../../core/blitzkit/tankIcon';
 import { tankAverages } from '../../../core/blitzstars/tankAverages';
 import { deltaTankStats } from '../../../core/statistics/deltaTankStats';
-import { useWideFormat } from '../../../hooks/useWideFormat';
-import { theme } from '../../../stitches.config';
-import mutateSession, {
-  SessionTracking,
-  useSession,
-} from '../../../stores/session';
+import * as Session from '../../../stores/session';
 import { IndividualTankStats } from '../../../types/tanksStats';
 
 export default function Page({
@@ -59,7 +53,6 @@ export default function Page({
   searchParams: { id?: string };
 }) {
   const [loaded, setLoaded] = useState(false);
-  const wideFormat = useWideFormat(640);
   const awaitedTankDefinitions = use(tankDefinitions);
   const awaitedTankAvearges = use(tankAverages);
   const [showSearch, setShowSearch] = useState(false);
@@ -68,7 +61,8 @@ export default function Page({
   const [showCCInaccessibilityPrompt, setShowCCInaccessibilityPrompt] =
     useState(false);
   const input = useRef<HTMLInputElement>(null);
-  const session = useSession();
+  const session = Session.use();
+  const mutateSession = Session.useMutation();
   const [tankStatsB, setTankStatsB] = useState<IndividualTankStats[] | null>(
     null,
   );
@@ -135,7 +129,7 @@ export default function Page({
       if (!input.current) return;
 
       draft.tracking = true;
-      (draft as SessionTracking).player = {
+      (draft as Session.SessionTracking).player = {
         id,
         region,
         since: Date.now(),
@@ -322,7 +316,7 @@ export default function Page({
         <Flex
           mt="2"
           mb="2"
-          direction={wideFormat ? 'row' : 'column'}
+          direction={{ initial: 'column', sm: 'row' }}
           align="center"
           justify="between"
           gap="2"
@@ -349,7 +343,7 @@ export default function Page({
                 }
 
                 mutateSession((draft) => {
-                  (draft as SessionTracking).player.stats = stats;
+                  (draft as Session.SessionTracking).player.stats = stats;
                 });
               }}
             >
@@ -407,9 +401,9 @@ export default function Page({
                             key={key}
                             onClick={() => {
                               mutateSession((draft) => {
-                                (draft as SessionTracking).columns.unshift(
-                                  key as Stat,
-                                );
+                                (
+                                  draft as Session.SessionTracking
+                                ).columns.unshift(key as Stat);
                               });
                             }}
                           >
@@ -425,9 +419,12 @@ export default function Page({
                     onValueChange={(value) => {
                       mutateSession((draft) => {
                         if (value === 'remove') {
-                          (draft as SessionTracking).columns.splice(index, 1);
+                          (draft as Session.SessionTracking).columns.splice(
+                            index,
+                            1,
+                          );
                         } else {
-                          (draft as SessionTracking).columns[index] =
+                          (draft as Session.SessionTracking).columns[index] =
                             value as Stat;
                         }
                       });
@@ -483,55 +480,7 @@ export default function Page({
                     overflow: 'hidden',
                   }}
                 >
-                  <Table.RowHeaderCell
-                    style={{
-                      paddingLeft: 32,
-                      position: 'relative',
-                      overflowY: 'hidden',
-                    }}
-                  >
-                    <Link href={`/tools/tankopedia/${tank.id}`}>
-                      <img
-                        alt={tank.name}
-                        draggable={false}
-                        src={tankIcon(tank.id)}
-                        style={{
-                          position: 'absolute',
-                          width: 128 + 32,
-                          height: '200%',
-                          top: '-50%',
-                          left: 0,
-                          objectFit: 'contain',
-                          objectPosition: '50% 50%',
-                          overflow: 'hidden',
-                        }}
-                      />
-
-                      <div
-                        style={{
-                          backgroundColor: 'red',
-                          position: 'absolute',
-                          top: 0,
-                          left: 0,
-                          height: '100%',
-                          width: 128,
-                          background:
-                            'linear-gradient(90deg, #00000080, #00000000)',
-                        }}
-                      />
-
-                      <Text
-                        style={{
-                          color: theme.colors.textHighContrast,
-                          position: 'relative',
-                          textWrap: 'nowrap',
-                          textShadow: 'black 0 0 4px',
-                        }}
-                      >
-                        {tank.name}
-                      </Text>
-                    </Link>
-                  </Table.RowHeaderCell>
+                  <TankRowHeaderCell tank={tank} />
                   {session.columns.map((column) => (
                     <Table.Cell key={column}>{statsPretty[column]}</Table.Cell>
                   ))}

src/app/tools/tank-performance/components/BodyLoader.tsx

@@ -0,0 +1,13 @@
+import { Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { RowLoader } from './RowLoader';
+
+export function BodyLoader() {
+  return (
+    <Table.Body>
+      {times(10, (index) => (
+        <RowLoader key={index} />
+      ))}
+    </Table.Body>
+  );
+}

src/app/tools/tank-performance/components/Controls.tsx

@@ -0,0 +1,11 @@
+import { FilterControl } from '../../tankopedia/components/FilterControl';
+import { PlayerCountControl } from './PlayerCountControl';
+
+export function Controls() {
+  return (
+    <>
+      <FilterControl />
+      <PlayerCountControl />
+    </>
+  );
+}

src/app/tools/tank-performance/components/Header.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import {
+  CaretDownIcon,
+  CaretSortIcon,
+  CaretUpIcon,
+} from '@radix-ui/react-icons';
+import { Flex, IconButton, Table } from '@radix-ui/themes';
+import { StickyColumnHeaderCell } from '../../../../components/StickyColumnHeaderCell';
+import * as TankPerformanceSort from '../../../../stores/tankPerformanceSort';
+import {
+  TankPerformanceSortTypeNames,
+  TankPerformanceSortTypeNamesArray,
+} from '../../../../stores/tankPerformanceSort/constants';
+
+export function Header() {
+  const sort = TankPerformanceSort.use();
+  const store = TankPerformanceSort.useStore();
+
+  return (
+    <Table.Header>
+      <Table.Row align="center">
+        <StickyColumnHeaderCell>Tank</StickyColumnHeaderCell>
+        {TankPerformanceSortTypeNamesArray.map((type) => {
+          const isSelected = sort.type === type;
+
+          return (
+            <StickyColumnHeaderCell
+              px="2"
+              key={type}
+              width="0"
+              justify="center"
+            >
+              <Flex align="center" gap="1">
+                {TankPerformanceSortTypeNames[type]}
+
+                <IconButton
+                  size={isSelected ? '1' : '2'}
+                  variant={isSelected ? 'soft' : 'ghost'}
+                  color={isSelected ? undefined : 'gray'}
+                  highContrast={!isSelected}
+                  onClick={() => {
+                    if (isSelected) {
+                      store.setState({ direction: -sort.direction as 1 | -1 });
+                    } else {
+                      store.setState({ type, direction: -1 });
+                    }
+                  }}
+                >
+                  {!isSelected && <CaretSortIcon />}
+                  {isSelected && (
+                    <>
+                      {sort.direction === 1 && <CaretUpIcon />}
+                      {sort.direction === -1 && <CaretDownIcon />}
+                    </>
+                  )}
+                </IconButton>
+              </Flex>
+            </StickyColumnHeaderCell>
+          );
+        })}
+      </Table.Row>
+    </Table.Header>
+  );
+}

src/app/tools/tank-performance/components/Info.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout, Flex } from '@radix-ui/themes';
+import { use } from 'react';
+import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
+import { discoveredIdsDefinitions } from '../../../../core/blitzkit/discoveredIdDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
+
+export function Info() {
+  const awaitedDiscoveredIdsDefinitions = use(discoveredIdsDefinitions);
+  const awaitedAverageDefinitions = use(averageDefinitions);
+  const samples = awaitedDiscoveredIdsDefinitions.count;
+  const minutesAgo = Math.floor(
+    (Date.now() - awaitedAverageDefinitions.time) / (1000 * 60),
+  );
+  const hoursAgo = Math.floor(minutesAgo / 60);
+
+  return (
+    <Flex justify="center">
+      <Callout.Root style={{ width: 'fit-content' }}>
+        <Callout.Icon>
+          <InfoCircledIcon />
+        </Callout.Icon>
+        <Callout.Text>
+          Career stats based on {formatCompact(Math.round(samples))} players.
+          Updated {hoursAgo === 0 ? minutesAgo : hoursAgo}{' '}
+          {hoursAgo === 0 ? 'minutes' : 'hours'} ago.
+        </Callout.Text>
+      </Callout.Root>
+    </Flex>
+  );
+}

src/app/tools/tank-performance/components/PlayerCountControl.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Flex, Select, Text } from '@radix-ui/themes';
+import * as TankPerformancePersistent from '../../../../stores/tankPerformancePersistent';
+import { PlayerCountPeriod } from '../../../../stores/tankPerformancePersistent/constants';
+
+export function PlayerCountControl() {
+  const playerCountPeriod = TankPerformancePersistent.use(
+    (state) => state.playerCountPeriod,
+  );
+  const mutateTankPerformanceSort = TankPerformancePersistent.useMutation();
+
+  return (
+    <Flex justify="center" align="center" gap="2">
+      <Text>Player count</Text>
+      <Select.Root
+        value={playerCountPeriod}
+        onValueChange={(period) => {
+          mutateTankPerformanceSort((draft) => {
+            draft.playerCountPeriod = period as PlayerCountPeriod;
+          });
+        }}
+      >
+        <Select.Trigger />
+        <Select.Content>
+          <Select.Item value={PlayerCountPeriod.Past120Days}>
+            Past 120 days
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.Past90Days}>
+            Past 90 days
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.Past60Days}>
+            Past 60 days
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.ThisMonth}>
+            This month
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.ThisWeek}>
+            This week
+          </Select.Item>
+          <Select.Item value={PlayerCountPeriod.Yesterday}>
+            Yesterday
+          </Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </Flex>
+  );
+}

src/app/tools/tank-performance/components/RowLoader.tsx

@@ -0,0 +1,31 @@
+import { Skeleton, Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { memo, useRef } from 'react';
+import { useIntersection } from '../../../../hooks/useIntersection';
+import { TankPerformanceSortTypeNamesArray } from '../../../../stores/tankPerformanceSort/constants';
+
+interface RowLoaderProps {
+  onIntersection?: () => void;
+}
+
+export const RowLoader = memo<RowLoaderProps>(({ onIntersection }) => {
+  const row = useRef<HTMLTableRowElement>(null);
+
+  useIntersection(() => onIntersection?.(), row, {
+    disabled: onIntersection === undefined,
+  });
+
+  return (
+    <Table.Row ref={row}>
+      <Table.RowHeaderCell align="center">
+        <Skeleton height="100%" width="128px" />
+      </Table.RowHeaderCell>
+
+      {times(TankPerformanceSortTypeNamesArray.length, (index) => (
+        <Table.Cell key={index} align="center">
+          <Skeleton height="1em" width="32px" />
+        </Table.Cell>
+      ))}
+    </Table.Row>
+  );
+});

src/app/tools/tank-performance/components/Table.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { Flex } from '@radix-ui/themes';
+import { Suspense } from 'react';
+import { StickyTableRoot } from '../../../../components/StickyTableRoot';
+import { BodyLoader } from './BodyLoader';
+import { Header } from './Header';
+import { Tanks } from './Tanks';
+
+export function TankTable() {
+  return (
+    <Flex justify="center">
+      <StickyTableRoot
+        size={{ initial: '1', sm: '2' }}
+        variant="surface"
+        style={{ maxWidth: '100%', maxHeight: 'calc(100vh - 256px)' }}
+      >
+        <Header />
+        <Suspense fallback={<BodyLoader />}>
+          <Tanks />
+        </Suspense>
+      </StickyTableRoot>
+    </Flex>
+  );
+}

src/app/tools/tank-performance/components/TankRow.tsx

@@ -0,0 +1,79 @@
+import { Table } from '@radix-ui/themes';
+import { memo, use } from 'react';
+import { TankRowHeaderCell } from '../../../../components/TankRowHeaderCell';
+import { averageDefinitions } from '../../../../core/blitzkit/averageDefinitions';
+import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
+import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
+import * as TankPerformancePersistent from '../../../../stores/tankPerformancePersistent';
+
+interface TankRowProps {
+  tank: TankDefinition;
+}
+
+export const TankRow = memo<TankRowProps>(
+  ({ tank }) => {
+    const awaitedAverageDefinitions = use(averageDefinitions);
+    const averages = awaitedAverageDefinitions.averages[tank.id];
+    const ratio = useAveragesExclusionRatio();
+    const playerCountPeriod = TankPerformancePersistent.use(
+      (state) => state.playerCountPeriod,
+    );
+
+    return (
+      <Table.Row>
+        <TankRowHeaderCell tank={tank} />
+
+        <Table.Cell align="center">
+          {((averages.mu.wins / averages.mu.battles) * 100).toFixed(1)}%
+        </Table.Cell>
+        <Table.Cell align="center">
+          {formatCompact(
+            Math.round(ratio * averages.samples[playerCountPeriod]),
+          )}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(
+            averages.mu.damage_dealt / averages.mu.battles,
+          ).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(
+            (averages.mu.survived_battles / averages.mu.battles) * 100,
+          )}
+          %
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(averages.mu.xp / averages.mu.battles).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.frags / averages.mu.battles).toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.spotted / averages.mu.battles).toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round((averages.mu.hits / averages.mu.shots) * 100)}%
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.shots / averages.mu.battles).toFixed(1)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.hits / averages.mu.battles).toFixed(1)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.damage_dealt / averages.mu.damage_received).toFixed(2)}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(
+            averages.mu.damage_received / averages.mu.battles,
+          ).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {(averages.mu.capture_points / averages.mu.battles).toFixed(2)}
+        </Table.Cell>
+      </Table.Row>
+    );
+  },
+  (prev, next) => prev.tank.id === next.tank.id,
+);

src/app/tools/tank-performance/components/Tanks.tsx

@@ -0,0 +1,151 @@
+'use client';
+
+import { Table } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { Suspense, use, useEffect, useMemo, useState } from 'react';
+import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
+import { filterTank } from '../../../../core/blitzkit/filterTank';
+import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
+import * as TankFilters from '../../../../stores/tankFilters';
+import * as TankPerformancePersistent from '../../../../stores/tankPerformancePersistent';
+import * as TankPerformanceSort from '../../../../stores/tankPerformanceSort';
+import { RowLoader } from './RowLoader';
+import { TankRow } from './TankRow';
+import { Total } from './Total';
+
+const PREVIEW_COUNT = 10;
+const DEFAULT_LOADED_ROWS = 25;
+
+export function Tanks() {
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
+  const filters = TankFilters.use();
+  const sort = TankPerformanceSort.use();
+  const tankPerformancePersistentStore = TankPerformancePersistent.useStore();
+  const tanksSorted = useMemo(() => {
+    const { playerCountPeriod } = tankPerformancePersistentStore.getState();
+
+    switch (sort.type) {
+      case 'accuracy':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction * (a.mu.hits / a.mu.shots - b.mu.hits / b.mu.shots),
+        );
+      case 'capturePoints':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.capture_points / a.mu.battles -
+              b.mu.capture_points / b.mu.battles),
+        );
+      case 'damage':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.damage_dealt / a.mu.battles -
+              b.mu.damage_dealt / b.mu.battles),
+        );
+      case 'damageRatio':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.damage_dealt / a.mu.damage_received -
+              b.mu.damage_dealt / b.mu.damage_received),
+        );
+      case 'damageTaken':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.damage_received / a.mu.battles -
+              b.mu.damage_received / b.mu.battles),
+        );
+      case 'hits':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.hits / a.mu.battles - b.mu.hits / b.mu.battles),
+        );
+      case 'kills':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.frags / a.mu.battles - b.mu.frags / b.mu.battles),
+        );
+      case 'shots':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.shots / a.mu.battles - b.mu.shots / b.mu.battles),
+        );
+      case 'players':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.samples[playerCountPeriod] - b.samples[playerCountPeriod]),
+        );
+      case 'spots':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.spotted / a.mu.battles - b.mu.spotted / b.mu.battles),
+        );
+      case 'survival':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.survived_battles / a.mu.battles -
+              b.mu.survived_battles / b.mu.battles),
+        );
+      case 'winrate':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction *
+            (a.mu.wins / a.mu.battles - b.mu.wins / b.mu.battles),
+        );
+      case 'xp':
+        return awaitedAverageDefinitionsArray.sort(
+          (a, b) =>
+            sort.direction * (a.mu.xp / a.mu.battles - b.mu.xp / b.mu.battles),
+        );
+    }
+  }, [sort]);
+  const tanks = useMemo(() => {
+    return tanksSorted.filter((tank) =>
+      filterTank(filters, awaitedTankDefinitions[tank.id]),
+    );
+  }, [filters, sort]);
+  const [loadedRows, setLoadedRows] = useState(DEFAULT_LOADED_ROWS);
+
+  useEffect(() => {
+    setLoadedRows(DEFAULT_LOADED_ROWS);
+  }, [filters, sort]);
+
+  return (
+    <Table.Body>
+      <Total tanks={tanks} />
+
+      {tanks.slice(0, loadedRows).map((averages) => {
+        const tank = awaitedTankDefinitions[averages.id];
+
+        if (tank === undefined) return null;
+
+        return (
+          <Suspense key={tank.id} fallback={<RowLoader />}>
+            <TankRow tank={tank} />
+          </Suspense>
+        );
+      })}
+
+      {times(Math.min(PREVIEW_COUNT, tanks.length - loadedRows), (index) => {
+        return (
+          <RowLoader
+            key={index}
+            onIntersection={() => {
+              setLoadedRows((state) => Math.min(state + 2, tanks.length));
+            }}
+          />
+        );
+      })}
+    </Table.Body>
+  );
+}

src/app/tools/tank-performance/components/TierBreakdown.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { ResponsiveBar } from '@nivo/bar';
+import { Box, Flex, Heading } from '@radix-ui/themes';
+import { times } from 'lodash';
+import { use } from 'react';
+import { TankClass } from '../../../../components/Tanks';
+import { TANK_CLASSES } from '../../../../components/Tanks/components/Item/constants';
+import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
+import {
+  tankDefinitions,
+  Tier,
+} from '../../../../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
+import { formatCompact } from '../../../../core/math/formatCompact';
+import { nivoTheme } from '../../../../core/nivo/theme';
+import strings from '../../../../lang/en-US.json';
+
+export function TierBreakdown() {
+  const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
+  const awaitedTankDefinitions = use(tankDefinitions);
+
+  return (
+    <Flex justify="center" py="6">
+      <Flex direction="column" flexGrow="1" gap="4" maxWidth="640px">
+        <Heading ml="2" size="4">
+          Players (30d) per tier
+        </Heading>
+
+        <Box height="320px" width="100%">
+          <ResponsiveBar
+            {...nivoTheme}
+            data={times(10, (index) => {
+              const tier = (index + 1) as Tier;
+              const tierTanks = awaitedAverageDefinitionsArray.filter(
+                ({ id }) => awaitedTankDefinitions[id]?.tier === tier,
+              );
+              const populations: Record<TankClass, number> = {
+                'AT-SPG': 0,
+                heavyTank: 0,
+                lightTank: 0,
+                mediumTank: 0,
+              };
+
+              tierTanks.forEach((stats) => {
+                const tank = awaitedTankDefinitions[stats.id];
+                populations[tank.class] +=
+                  stats.mu.battles * stats.samples.d_30;
+              });
+
+              TANK_CLASSES.forEach((tankClass) => {
+                populations[tankClass] = Math.round(populations[tankClass]);
+              });
+
+              return { tier: TIER_ROMAN_NUMERALS[tier], ...populations };
+            })}
+            keys={[...TANK_CLASSES].reverse()}
+            indexBy="tier"
+            colors={{ scheme: 'dark2' }}
+            label={(d) => formatCompact(d.value as number)}
+            margin={{ right: 96, bottom: 20, left: 40 }}
+            legendLabel={(d) =>
+              strings.common.tank_class_short[d.id as TankClass]
+            }
+            axisLeft={{
+              tickSize: 0,
+              format: (value) => formatCompact(value as number),
+            }}
+            axisBottom={{ tickSize: 0 }}
+            legends={[
+              {
+                dataFrom: 'keys',
+                anchor: 'bottom-right',
+                direction: 'column',
+                translateX: 120,
+                itemsSpacing: 4,
+                itemWidth: 100,
+                itemHeight: 20,
+              },
+            ]}
+          />
+        </Box>
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tank-performance/components/Total.tsx

@@ -0,0 +1,83 @@
+import { Table } from '@radix-ui/themes';
+import { memo, use, useCallback } from 'react';
+import { StickyRowHeaderCell } from '../../../../components/StickyRowHeaderCell';
+import {
+  averageDefinitions,
+  AverageDefinitionsAllStats,
+  AverageDefinitionsEntryWithId,
+} from '../../../../core/blitzkit/averageDefinitions';
+import { formatCompact } from '../../../../core/math/formatCompact';
+import { useAveragesExclusionRatio } from '../../../../hooks/useAveragesExclusionRatio';
+import * as TankPerformancePersistent from '../../../../stores/tankPerformancePersistent';
+
+interface TotalProps {
+  tanks: AverageDefinitionsEntryWithId[];
+}
+
+export const Total = memo<TotalProps>(
+  ({ tanks }) => {
+    const awaitedAverageDefinitions = use(averageDefinitions);
+    const playerCountPeriod = TankPerformancePersistent.use(
+      (state) => state.playerCountPeriod,
+    );
+    const ratio = useAveragesExclusionRatio();
+    const sum = useCallback(
+      (slice: (tank: AverageDefinitionsAllStats) => number) => {
+        return tanks.reduce(
+          (acc, tank) => acc + tank.samples.total * slice(tank.mu),
+          0,
+        );
+      },
+      [tanks],
+    );
+
+    const battles = sum(({ battles }) => battles);
+    const winrate = sum(({ wins }) => wins) / battles;
+    const damage = sum(({ damage_dealt }) => damage_dealt) / battles;
+    const survival = sum(({ survived_battles }) => survived_battles) / battles;
+    const xp = sum(({ xp }) => xp) / battles;
+    const kills = sum(({ frags }) => frags) / battles;
+    const spots = sum(({ spotted }) => spotted) / battles;
+    const hits = sum(({ hits }) => hits) / battles;
+    const shots = sum(({ shots }) => shots) / battles;
+    const accuracy = hits / shots;
+    const damageReceived =
+      sum(({ damage_received }) => damage_received) / battles;
+    const damageRatio = damage / damageReceived;
+    const capturePoints = sum(({ capture_points }) => capture_points) / battles;
+
+    return (
+      <Table.Row>
+        <StickyRowHeaderCell style={{ overflow: 'hidden', display: 'flex' }}>
+          Total
+        </StickyRowHeaderCell>
+        <Table.Cell align="center">{(winrate * 100).toFixed(1)}%</Table.Cell>
+        <Table.Cell align="center">
+          {formatCompact(
+            ratio * awaitedAverageDefinitions.samples[playerCountPeriod],
+          )}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(damage).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(survival * 100).toFixed(1)}%
+        </Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(xp).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">{kills.toFixed(2)}</Table.Cell>
+        <Table.Cell align="center">{spots.toFixed(2)}</Table.Cell>
+        <Table.Cell align="center">{(accuracy * 100).toFixed(0)}%</Table.Cell>
+        <Table.Cell align="center">{shots.toFixed(1)}</Table.Cell>
+        <Table.Cell align="center">{hits.toFixed(1)}</Table.Cell>
+        <Table.Cell align="center">{damageRatio.toFixed(2)}</Table.Cell>
+        <Table.Cell align="center">
+          {Math.round(damageReceived).toLocaleString()}
+        </Table.Cell>
+        <Table.Cell align="center">{capturePoints.toFixed(2)}</Table.Cell>
+      </Table.Row>
+    );
+  },
+  (prev, next) => prev.tanks === next.tanks,
+);

src/app/tools/tank-performance/layout.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import * as TankFilters from '../../../stores/tankFilters';
+import * as TankPerformancePersistent from '../../../stores/tankPerformancePersistent';
+import * as TankPerformanceSort from '../../../stores/tankPerformanceSort';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <TankPerformancePersistent.Provider>
+      <TankPerformanceSort.Provider>
+        <TankFilters.Provider>{children}</TankFilters.Provider>
+      </TankPerformanceSort.Provider>
+    </TankPerformancePersistent.Provider>
+  );
+}

src/app/tools/tank-performance/page.tsx

@@ -0,0 +1,15 @@
+import PageWrapper from '../../../components/PageWrapper';
+import { Controls } from './components/Controls';
+import { Info } from './components/Info';
+import { TankTable } from './components/Table';
+
+export default function Page() {
+  return (
+    <PageWrapper color="jade" noMaxWidth>
+      <Info />
+      {/* <TierBreakdown /> */}
+      <Controls />
+      <TankTable />
+    </PageWrapper>
+  );
+}