Merge pull request #123 from tresabhi/dev

.github/workflows/cd-averages.yml

@@ -0,0 +1,25 @@
+name: CD Averages
+
+on:
+  workflow_dispatch:
+  # schedule:
+  #   - cron: '0 12 * * 0'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - 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

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

@@ -0,0 +1,26 @@
+name: CD Discover IDs
+
+on:
+  push:
+    branches: main
+  workflow_dispatch:
+  schedule:
+    - cron: '0 8 * * *'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Discover IDs
+        run: DISCORD_TOKEN=${{ secrets.DISCORD_TOKEN }} GH_TOKEN=${{ secrets.GH_TOKEN }} DATABASE_URL=${{ secrets.DATABASE_URL }} bun scripts/discoverIds.ts --production

.vscode/settings.json

@@ -11,7 +11,9 @@
     "applypatches",
     "artefacts",
     "atgm",
+    "Avearges",
     "AYUV",
+    "battleresults",
     "bbox",
     "bepaint",
     "betakrieg",
@@ -37,6 +39,7 @@
     "CUBETEXCOORD",
     "customperiod",
     "datasource",
+    "dbid",
     "Ddpf",
     "Ddsd",
     "debugflags",
@@ -46,6 +49,7 @@
     "degressive",
     "devkrieg",
     "diacriticless",
+    "DIDS",
     "donotremove",
     "drei",
     "Droodles",
@@ -62,11 +66,13 @@
     "fullstats",
     "fuzzysort",
     "gamemode",
+    "gameplay",
     "glsl",
     "GLTF",
     "haha",
     "highp",
     "iife",
+    "imgur",
     "immer",
     "Inclusivity",
     "JOINTINDEX",
@@ -80,6 +86,7 @@
     "loadouts",
     "loddist",
     "lods",
+    "lossrate",
     "mantlets",
     "metallicness",
     "minitelrose",
@@ -107,6 +114,8 @@
     "POSITIVEY",
     "POSITIVEZ",
     "Promisable",
+    "protobuf",
+    "protos",
     "Pyogenics",
     "ratingleaderboard",
     "raycaster",
@@ -150,6 +159,7 @@
     "Unicum",
     "UNLOCALIZED",
     "UNORM",
+    "unpickled",
     "Unregistering",
     "vickers",
     "vitepress",
@@ -162,6 +172,8 @@
     "Woah",
     "WOTB",
     "wotblitz",
+    "wotbreplay",
+    "WOTINSPECTOR",
     "xffn",
     "xkdkw",
     "XMLDVPL",
@@ -171,5 +183,6 @@
   ],
   "deno.enable": false,
   "deno.unstable": false,
-  "cSpell.enableFiletypes": ["glsl"]
+  "cSpell.enableFiletypes": ["glsl"],
+  "typescript.tsdk": "node_modules\\typescript\\lib"
 }

README.md

@@ -8,16 +8,16 @@ Tools for everything World of Tanks Blitz
 
 Go to [application directory for BlitzKit](https://discord.com/application-directory/1097673957865443370) and click "Add to Server." Voila! You're ready to go.
 
-![BlitzKit application directory](https://i.imgur.com/JlEA0J1.png)
+![BlitzKit application directory](https://i.imgur.com/YWCtOuJ.png)
 
 ## Visit the website
 
-### https://blitzkit.vercel.app/
+### https://blitzkit.app/
 
-![BlitzKit website](https://i.imgur.com/oLVIx2n.png)
+![BlitzKit website](https://i.imgur.com/bdYMUCL.png)
 
 ## Visit the documentation website
 
 ### https://tresabhi.github.io/blitzkit/
 
-![BlitzKit documentation website](https://i.imgur.com/TOt5fMx.png)
+![BlitzKit documentation website](https://i.imgur.com/hm3KTsF.png)

docs/about/credits.md

@@ -0,0 +1,17 @@
+# BlitzKit Credits
+
+BlitzKit is a one man band **TrèsAbhi** but I am far from solo.
+
+| Role                           | People                         |
+| ------------------------------ | ------------------------------ |
+| Bot verification               | S0AP                           |
+| Bot advertisement platform     | S0AP                           |
+| Bot rendering pipeline         | Vovko                          |
+| Game asset decompression       | Maddox                         |
+| Game 3D model parsing          | Pyogenics                      |
+| Game file layout               | Aeson                          |
+| 3-caliber rule edge cases      | Minitelrose, ChickenMan7777    |
+| Embed UX                       | \_34, HisRoyalFatness, Synx    |
+| Tankopedia pre-release testing | [OPTML], Aeson, \_34, Droodles |
+| Website advertisement platform | Aeson, Droodles                |
+| Compare pre-release testing    | [OPTML], Droodles              |

docs/changelogs/1.20.0.md

@@ -0,0 +1,18 @@
+# BlitzKit 1.20.0
+
+**IMPORTANT FOR STREAMERS:** This version removed the session tracker embed. Embeds will be reintroduced in the future.
+
+## Features
+
+- Reworked session tracker
+  - Played tanks are now displayed as a clean table that fits the theme of the website
+  - Tank images are now displayed along with them being linked to their respective tankopedia pages
+  - The UI has been simplified
+  - You can also change what columns are shown in the table but this is a work in progress feature
+- Added the `/replay` command
+  - This command uploads your replays to WOTINSPECTOR and displays the battle results
+
+## Fixes
+
+- Fixed website logo to be "BK"
+- Fixed the logo of the website to have a capital "K"

docs/changelogs/1.20.1.md

@@ -0,0 +1,32 @@
+# BlitzKit 1.20.1
+
+The Tankopedia becomes sexier.
+
+## Features
+
+- Switched domain to https://blitzkit.app/
+- Added a hero section with the name of the Tank displayed in a huge font with the model of the tank on the right auto-rotating
+  - The auto-rotation is disabled upon manual disruption of the camera angle
+- Added a historical section for some tanks
+- Full screen is cleaner
+- The rotation inputs have been moved up to the top of the page
+- The shell selector has been moved to the right of the page to mimic the game
+- The antagonist (or the shooter) controls have been moved to the bottom of the sandbox
+  - The "armor" and "model" tabs have been replaced with a single toggle switch labeled as "armor:
+- Tank modules are now rendered similar to how they are in the game as a tree
+  - This is highly experimental; please report issues on [the official Discord server](https://discord.gg/nDt7AjGJQH)
+  - The XP cost is also listed in this section
+  - Top tier modules are highlighted in amber
+- Added a section to show the tech tree progression for tech tree tanks
+  - The credit and XP costs are also listed in this section along with the nationality
+- The shell selector has been simplified
+- Added a "back" button to return to the Tankopedia search page
+  - The "change" button has now been removed
+- The characteristics are now displayed with three columns when possible with the configuration acting as the first row
+- Replaced the loading percentage for tank models with a loading bar
+- The second page turner controls in the tankopedia search is now hidden when there's not a lot of search results
+
+## Fixes
+
+- Tanks without videos no longer display a broken YouTube video
+- Added "alt" texts for all images on the website

docs/changelogs/1.20.2.md

@@ -0,0 +1,48 @@
+# BlitzKit 1.20.2
+
+Taming the homepage.
+
+## Features
+
+- All tools are now displayed directly on the navbar on wide screens
+  - On small screens, the tools are hidden within a hamburger menu displaying a list similar to the old homepage
+- Added tiny hero image banner to the homepage
+- The tools are now displayed in a more readable manner with the most important tool(s) shown twice as large as all others on wider screens
+- The pitch and yaw inputs for tank turrets is now update live as the turret and gun is rotated
+- Consumables are now displayed in a neater box
+- Modules are now displayed in a more compact manner
+- Added a privacy policy and terms of service agreement prompt
+  - The links also point to an on-site page
+- Remade the navbar to include important information
+  - The about section offers credits, a link to Discord, and a link to the GitHub repository
+  - The legal section displays privacy policy, terms of service, and a link to Google's ad settings
+  - On the left side, the name of BlitzKit, version, and motto is displayed
+- The armor sandbox breakdown has been rewritten from scratch to maintain full parity with the visual armor highlighter, especially for HE shells
+  - The tracer has also been made more visible by rendering it on top of the armor
+  - The tracer's penetration locations have also been simplified and no longer show the index
+- The number of tanks per page is now reduced for smaller screen sizes
+- Added a BlitzKit watermark to the tankopedia sandbox when in fullscreen
+- The tool's backgrounds are no longer blurred on their dedicated page
+- Added a plus button to add tanks to the right of the rightmost column in the compare tool
+
+## Fixes
+
+- The navbar blur effect now works on Safari too
+- Switched buttons out for icon buttons for page turners
+- Many hydration issues have been fixed allowing a few pages to load twice as fast
+- The nationality of tanks in the title of the tab are now in adjective forms
+- HEAT shells no longer ricochet
+- Text on page won't be selected on accident when interacting with the tank sandbox
+- The first shell is now equipped by default instead of the last one when switching guns/turrets
+- Quite a few pages have been more responsive for smaller screens
+- Camouflage bonuses are now multiplicative instead of additive
+- Light tanks now have the same camouflage on move as when still
+- The shot display is now discarded when the tank is swapped out
+- Roboto Flex is now properly used instead of the default Radix UI font
+- The website now uses Imgur to load images and scale them appropriately for better performance
+- The compare headers no longer collapse on Firefox
+- Turrets can now be rotated correctly in the Tankopedia on Apple devices
+
+## Technical Changes
+
+- Moved all technical documentations to the `technical` directory within `docs`

docs/changelogs/1.20.3.md

@@ -0,0 +1,14 @@
+# BlitzKit 1.20.3
+
+A bug turns into a rating command feature!
+
+## Features
+
+- The rating command was giving seasonal statistics instead for the current day; this bug has now been made a feature through the new `/rating season` command
+
+## Fixes
+
+- Missing WN8 is now displayed with "--" instead of `NaN`
+- Players who have not participated in the rating gamemode are handled correctly
+- Decreasing position is now positive indicated in `/rating`
+- `/rating` now displays today's statics correctly once again

docs/guide/credits.md

@@ -1,16 +0,0 @@
-# Team
-
-- TrèsAbhi: creator & programmer
-
-# Contributors
-
-- Prince_NA: general game advisor and tester
-- S0AP: bot verification and initial advertizement platform
-- Vovko: discord bot rendering pipeline
-- Maddox: game file decompression
-- Pyogenics: tank model parsing
-- Aeson: game files layout
-- Minitelrose, ChickenMan7777: 3-caliber rule edge cases
-- \_34, HisRoyalFatness, Synx, xkdkw: embed UX
-- [OPTML], Aeson, \_34, Droodles: beta testing Tankopedia
-- [OPTML], Droodles: beta testing Compare

docs/guide/introduction.md

@@ -15,7 +15,7 @@ BlitzKit is available as a Discord bot and can be [installed very easily](/guide
 
 ## Website
 
-Provides a bunch of very helpful tools; https://blitzkit.vercel.app/
+Provides a bunch of very helpful tools; https://blitzkit.app/
 
 - Session tracker
 - Rating leaderboard

docs/legal/privacy-policy.md

@@ -1,19 +1,191 @@
 # BlitzKit Privacy Policy
 
-BlitzKit collects little to no data. Regardless, here is an exhaustive list of BlitzKit's data collection practices.
+Last updated: May 23, 2024
 
-## Logs
+This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You.
 
-All BlitzKit logs are available to the public as an effort for open source transparency. A history of all logs [can be found on GitHub](https://github.com/tresabhi/blitzkit/actions/workflows/host.yml). All logs expire automatically and are permanently deleted after 30 days. However, anyone may chose to save a local copy of the logs which is not tracked by GitHub.
+We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. This Privacy Policy has been created with the help of the [Privacy Policy Generator](https://www.termsfeed.com/privacy-policy-generator/).
 
-## Commands
+## Interpretation and Definitions
 
-Everytime a command a command is used, the command name and parameters provided is logged. Any identifying information like manually provided in-game usernames are also recorded.
+### Interpretation
 
-## Databases
+The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
 
-No databases are used by BlitzKit meaning that no data is collected outside of what has already been mentioned above. This is no permanent state.
+### Definitions
 
-## 3rd Party
+For the purposes of this Privacy Policy:
 
-The privacy policies of Discord, Wargaming, and Blitz Stars apply too since they are utilized by the bot.
+- **Account** means a unique account created for You to access our Service or parts of our Service.
+- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
+- **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to BlitzKit.
+- **Cookies** are small files that are placed on Your computer, mobile device or any other device by a website, containing the details of Your browsing history on that website among its many uses.
+- **Country** refers to: Missouri, United States
+- **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
+- **Personal Data** is any information that relates to an identified or identifiable individual.
+- **Service** refers to the Website.
+- **Service Provider** means any natural or legal person who processes the data on behalf of the Company. It refers to third-party companies or individuals employed by the Company to facilitate the Service, to provide the Service on behalf of the Company, to perform services related to the Service or to assist the Company in analyzing how the Service is used.
+- **Usage Data** refers to data collected automatically, either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).
+- **Website** refers to BlitzKit, accessible from [https://blitzkit.app/](https://blitzkit.app/)
+- **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
+
+## Collecting and Using Your Personal Data
+
+### Types of Data Collected
+
+#### Personal Data
+
+While using Our Service, We may ask You to provide Us with certain personally identifiable information that can be used to contact or identify You. Personally identifiable information may include, but is not limited to:
+
+- Usage Data
+
+#### Usage Data
+
+Usage Data is collected automatically when using the Service.
+
+Usage Data may include information such as Your Device's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that You visit, the time and date of Your visit, the time spent on those pages, unique device identifiers and other diagnostic data.
+
+When You access the Service by or through a mobile device, We may collect certain information automatically, including, but not limited to, the type of mobile device You use, Your mobile device unique ID, the IP address of Your mobile device, Your mobile operating system, the type of mobile Internet browser You use, unique device identifiers and other diagnostic data.
+
+We may also collect information that Your browser sends whenever You visit our Service or when You access the Service by or through a mobile device.
+
+#### Tracking Technologies and Cookies
+
+We use Cookies and similar tracking technologies to track the activity on Our Service and store certain information. Tracking technologies used are beacons, tags, and scripts to collect and track information and to improve and analyze Our Service. The technologies We use may include:
+
+- **Cookies or Browser Cookies.** A cookie is a small file placed on Your Device. You can instruct Your browser to refuse all Cookies or to indicate when a Cookie is being sent. However, if You do not accept Cookies, You may not be able to use some parts of our Service. Unless you have adjusted Your browser setting so that it will refuse Cookies, our Service may use Cookies.
+- **Web Beacons.** Certain sections of our Service and our emails may contain small electronic files known as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) that permit the Company, for example, to count users who have visited those pages or opened an email and for other related website statistics (for example, recording the popularity of a certain section and verifying system and server integrity).
+
+Cookies can be "Persistent" or "Session" Cookies. Persistent Cookies remain on Your personal computer or mobile device when You go offline, while Session Cookies are deleted as soon as You close Your web browser. You can learn more about cookies on [TermsFeed website](https://www.termsfeed.com/blog/cookies/#What_Are_Cookies) article.
+
+We use both Session and Persistent Cookies for the purposes set out below:
+
+- **Necessary / Essential Cookies**
+
+  Type: Session Cookies
+
+  Administered by: Us
+
+  Purpose: These Cookies are essential to provide You with services available through the Website and to enable You to use some of its features. They help to authenticate users and prevent fraudulent use of user accounts. Without these Cookies, the services that You have asked for cannot be provided, and We only use these Cookies to provide You with those services.
+
+- **Cookies Policy / Notice Acceptance Cookies**
+
+  Type: Persistent Cookies
+
+  Administered by: Us
+
+  Purpose: These Cookies identify if users have accepted the use of cookies on the Website.
+
+- **Functionality Cookies**
+
+  Type: Persistent Cookies
+
+  Administered by: Us
+
+  Purpose: These Cookies allow us to remember choices You make when You use the Website, such as remembering your login details or language preference. The purpose of these Cookies is to provide You with a more personal experience and to avoid You having to re-enter your preferences every time You use the Website.
+
+- **Google AdSense Cookies**
+
+  Type: Persistent Cookies
+
+  Administered by: Google AdSense
+
+  Purpose: Third party vendors, including Google, use cookies to serve ads based on a user's prior visits to BlitzKit. Google's use of advertising cookies enables it and its partners to serve ads to your users based on their visit to your sites and/or other sites on the Internet. Users may opt out of personalized advertising by visiting [Ads Settings](https://www.google.com/settings/ads).
+
+For more information about the cookies we use and your choices regarding cookies, please visit our Cookies Policy or the Cookies section of our Privacy Policy.
+
+### Use of Your Personal Data
+
+The Company may use Personal Data for the following purposes:
+
+- **To provide and maintain our Service**, including to monitor the usage of our Service.
+- **To manage Your Account:** to manage Your registration as a user of the Service. The Personal Data You provide can give You access to different functionalities of the Service that are available to You as a registered user.
+- **For the performance of a contract:** the development, compliance and undertaking of the purchase contract for the products, items or services You have purchased or of any other contract with Us through the Service.
+- **To contact You:** To contact You by email, telephone calls, SMS, or other equivalent forms of electronic communication, such as a mobile application's push notifications regarding updates or informative communications related to the functionalities, products or contracted services, including the security updates, when necessary or reasonable for their implementation.
+- **To provide You** with news, special offers and general information about other goods, services and events which we offer that are similar to those that you have already purchased or enquired about unless You have opted not to receive such information.
+- **To manage Your requests:** To attend and manage Your requests to Us.
+- **For business transfers:** We may use Your information to evaluate or conduct a merger, divestiture, restructuring, reorganization, dissolution, or other sale or transfer of some or all of Our assets, whether as a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which Personal Data held by Us about our Service users is among the assets transferred.
+- **For other purposes**: We may use Your information for other purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Service, products, services, marketing and your experience.
+
+We may share Your personal information in the following situations:
+
+- **With Service Providers:** We may share Your personal information with Service Providers to monitor and analyze the use of our Service, to contact You.
+- **For business transfers:** We may share or transfer Your personal information in connection with, or during negotiations of, any merger, sale of Company assets, financing, or acquisition of all or a portion of Our business to another company.
+- **With Affiliates:** We may share Your information with Our affiliates, in which case we will require those affiliates to honor this Privacy Policy. Affiliates include Our parent company and any other subsidiaries, joint venture partners or other companies that We control or that are under common control with Us.
+- **With business partners:** We may share Your information with Our business partners to offer You certain products, services or promotions.
+- **With other users:** when You share personal information or otherwise interact in the public areas with other users, such information may be viewed by all users and may be publicly distributed outside.
+- **With Your consent**: We may disclose Your personal information for any other purpose with Your consent.
+
+### Retention of Your Personal Data
+
+The Company will retain Your Personal Data only for as long as is necessary for the purposes set out in this Privacy Policy. We will retain and use Your Personal Data to the extent necessary to comply with our legal obligations (for example, if we are required to retain your data to comply with applicable laws), resolve disputes, and enforce our legal agreements and policies.
+
+The Company will also retain Usage Data for internal analysis purposes. Usage Data is generally retained for a shorter period of time, except when this data is used to strengthen the security or to improve the functionality of Our Service, or We are legally obligated to retain this data for longer time periods.
+
+### Transfer of Your Personal Data
+
+Your information, including Personal Data, is processed at the Company's operating offices and in any other places where the parties involved in the processing are located. It means that this information may be transferred to — and maintained on — computers located outside of Your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from Your jurisdiction.
+
+Your consent to this Privacy Policy followed by Your submission of such information represents Your agreement to that transfer.
+
+The Company will take all steps reasonably necessary to ensure that Your data is treated securely and in accordance with this Privacy Policy and no transfer of Your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of Your data and other personal information.
+
+### Delete Your Personal Data
+
+You have the right to delete or request that We assist in deleting the Personal Data that We have collected about You.
+
+Our Service may give You the ability to delete certain information about You from within the Service.
+
+You may update, amend, or delete Your information at any time by signing in to Your Account, if you have one, and visiting the account settings section that allows you to manage Your personal information. You may also contact Us to request access to, correct, or delete any personal information that You have provided to Us.
+
+Please note, however, that We may need to retain certain information when we have a legal obligation or lawful basis to do so.
+
+### Disclosure of Your Personal Data
+
+#### Business Transactions
+
+If the Company is involved in a merger, acquisition or asset sale, Your Personal Data may be transferred. We will provide notice before Your Personal Data is transferred and becomes subject to a different Privacy Policy.
+
+#### Law enforcement
+
+Under certain circumstances, the Company may be required to disclose Your Personal Data if required to do so by law or in response to valid requests by public authorities (e.g. a court or a government agency).
+
+#### Other legal requirements
+
+The Company may disclose Your Personal Data in the good faith belief that such action is necessary to:
+
+- Comply with a legal obligation
+- Protect and defend the rights or property of the Company
+- Prevent or investigate possible wrongdoing in connection with the Service
+- Protect the personal safety of Users of the Service or the public
+- Protect against legal liability
+
+### Security of Your Personal Data
+
+The security of Your Personal Data is important to Us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While We strive to use commercially acceptable means to protect Your Personal Data, We cannot guarantee its absolute security.
+
+## Children's Privacy
+
+Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable information from anyone under the age of 13. If You are a parent or guardian and You are aware that Your child has provided Us with Personal Data, please contact Us. If We become aware that We have collected Personal Data from anyone under the age of 13 without verification of parental consent, We take steps to remove that information from Our servers.
+
+If We need to rely on consent as a legal basis for processing Your information and Your country requires consent from a parent, We may require Your parent's consent before We collect and use that information.
+
+## Links to Other Websites
+
+Our Service may contain links to other websites that are not operated by Us. If You click on a third party link, You will be directed to that third party's site. We strongly advise You to review the Privacy Policy of every site You visit.
+
+We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.
+
+## Changes to this Privacy Policy
+
+We may update Our Privacy Policy from time to time. We will notify You of any changes by posting the new Privacy Policy on this page.
+
+We will let You know via email and/or a prominent notice on Our Service, prior to the change becoming effective and update the "Last updated" date at the top of this Privacy Policy.
+
+You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.
+
+## Contact Us
+
+If you have any questions about this Privacy Policy, You can contact us:
+
+- By visiting this page on our website: [https://discord.gg/nDt7AjGJQH](https://discord.gg/nDt7AjGJQH)

docs/legal/terms-of-service.md

@@ -1,13 +1,109 @@
-# BlitzKit Terms of Service
+# BLitzKit Terms and Conditions
 
-## About
+Last updated: May 23, 2024
 
-BlitzKit is a multi-function Discord bot that serves users with needs specific to the game World of Tanks Blitz.
+Please read these terms and conditions carefully before using Our Service.
 
-## License
+## Interpretation and Definitions
 
-BlitzKit is licensed under the MIT License.
+### Interpretation
 
-## 3rd Party
+The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural.
 
-The terms of services of Discord, Wargaming, and Blitz Stars apply too since they are utilized by the bot.
+### Definitions
+
+For the purposes of these Terms and Conditions:
+
+- **Affiliate** means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority.
+- **Country** refers to: Missouri, United States
+- **Company** (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to BlitzKit.
+- **Device** means any device that can access the Service such as a computer, a cellphone or a digital tablet.
+- **Service** refers to the Website.
+- **Terms and Conditions** (also referred as "Terms") mean these Terms and Conditions that form the entire agreement between You and the Company regarding the use of the Service. This Terms and Conditions agreement has been created with the help of the [Terms and Conditions Generator](https://www.termsfeed.com/terms-conditions-generator/).
+- **Third-party Social Media Service** means any services or content (including data, information, products or services) provided by a third-party that may be displayed, included or made available by the Service.
+- **Website** refers to BlitzKit, accessible from [https://blitzkit.app/](https://blitzkit.app/)
+- **You** means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable.
+
+## Acknowledgment
+
+These are the Terms and Conditions governing the use of this Service and the agreement that operates between You and the Company. These Terms and Conditions set out the rights and obligations of all users regarding the use of the Service.
+
+Your access to and use of the Service is conditioned on Your acceptance of and compliance with these Terms and Conditions. These Terms and Conditions apply to all visitors, users and others who access or use the Service.
+
+By accessing or using the Service You agree to be bound by these Terms and Conditions. If You disagree with any part of these Terms and Conditions then You may not access the Service.
+
+You represent that you are over the age of 18. The Company does not permit those under 18 to use the Service.
+
+Your access to and use of the Service is also conditioned on Your acceptance of and compliance with the Privacy Policy of the Company. Our Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your personal information when You use the Application or the Website and tells You about Your privacy rights and how the law protects You. Please read Our Privacy Policy carefully before using Our Service.
+
+## Links to Other Websites
+
+Our Service may contain links to third-party web sites or services that are not owned or controlled by the Company.
+
+The Company has no control over, and assumes no responsibility for, the content, privacy policies, or practices of any third party web sites or services. You further acknowledge and agree that the Company shall not be responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in connection with the use of or reliance on any such content, goods or services available on or through any such web sites or services.
+
+We strongly advise You to read the terms and conditions and privacy policies of any third-party web sites or services that You visit.
+
+## Termination
+
+We may terminate or suspend Your access immediately, without prior notice or liability, for any reason whatsoever, including without limitation if You breach these Terms and Conditions.
+
+Upon termination, Your right to use the Service will cease immediately.
+
+## Limitation of Liability
+
+Notwithstanding any damages that You might incur, the entire liability of the Company and any of its suppliers under any provision of this Terms and Your exclusive remedy for all of the foregoing shall be limited to the amount actually paid by You through the Service or 100 USD if You haven't purchased anything through the Service.
+
+To the maximum extent permitted by applicable law, in no event shall the Company or its suppliers be liable for any special, incidental, indirect, or consequential damages whatsoever (including, but not limited to, damages for loss of profits, loss of data or other information, for business interruption, for personal injury, loss of privacy arising out of or in any way related to the use of or inability to use the Service, third-party software and/or third-party hardware used with the Service, or otherwise in connection with any provision of this Terms), even if the Company or any supplier has been advised of the possibility of such damages and even if the remedy fails of its essential purpose.
+
+Some states do not allow the exclusion of implied warranties or limitation of liability for incidental or consequential damages, which means that some of the above limitations may not apply. In these states, each party's liability will be limited to the greatest extent permitted by law.
+
+## "AS IS" and "AS AVAILABLE" Disclaimer
+
+The Service is provided to You "AS IS" and "AS AVAILABLE" and with all faults and defects without warranty of any kind. To the maximum extent permitted under applicable law, the Company, on its own behalf and on behalf of its Affiliates and its and their respective licensors and service providers, expressly disclaims all warranties, whether express, implied, statutory or otherwise, with respect to the Service, including all implied warranties of merchantability, fitness for a particular purpose, title and non-infringement, and warranties that may arise out of course of dealing, course of performance, usage or trade practice. Without limitation to the foregoing, the Company provides no warranty or undertaking, and makes no representation of any kind that the Service will meet Your requirements, achieve any intended results, be compatible or work with any other software, applications, systems or services, operate without interruption, meet any performance or reliability standards or be error free or that any errors or defects can or will be corrected.
+
+Without limiting the foregoing, neither the Company nor any of the company's provider makes any representation or warranty of any kind, express or implied: (i) as to the operation or availability of the Service, or the information, content, and materials or products included thereon; (ii) that the Service will be uninterrupted or error-free; (iii) as to the accuracy, reliability, or currency of any information or content provided through the Service; or (iv) that the Service, its servers, the content, or e-mails sent from or on behalf of the Company are free of viruses, scripts, trojan horses, worms, malware, timebombs or other harmful components.
+
+Some jurisdictions do not allow the exclusion of certain types of warranties or limitations on applicable statutory rights of a consumer, so some or all of the above exclusions and limitations may not apply to You. But in such a case the exclusions and limitations set forth in this section shall be applied to the greatest extent enforceable under applicable law.
+
+## Governing Law
+
+The laws of the Country, excluding its conflicts of law rules, shall govern this Terms and Your use of the Service. Your use of the Application may also be subject to other local, state, national, or international laws.
+
+## Disputes Resolution
+
+If You have any concern or dispute about the Service, You agree to first try to resolve the dispute informally by contacting the Company.
+
+## For European Union (EU) Users
+
+If You are a European Union consumer, you will benefit from any mandatory provisions of the law of the country in which You are resident.
+
+## United States Legal Compliance
+
+You represent and warrant that (i) You are not located in a country that is subject to the United States government embargo, or that has been designated by the United States government as a "terrorist supporting" country, and (ii) You are not listed on any United States government list of prohibited or restricted parties.
+
+## Severability and Waiver
+
+### Severability
+
+If any provision of these Terms is held to be unenforceable or invalid, such provision will be changed and interpreted to accomplish the objectives of such provision to the greatest extent possible under applicable law and the remaining provisions will continue in full force and effect.
+
+### Waiver
+
+Except as provided herein, the failure to exercise a right or to require performance of an obligation under these Terms shall not affect a party's ability to exercise such right or require such performance at any time thereafter nor shall the waiver of a breach constitute a waiver of any subsequent breach.
+
+## Translation Interpretation
+
+These Terms and Conditions may have been translated if We have made them available to You on our Service. You agree that the original English text shall prevail in the case of a dispute.
+
+## Changes to These Terms and Conditions
+
+We reserve the right, at Our sole discretion, to modify or replace these Terms at any time. If a revision is material We will make reasonable efforts to provide at least 30 days' notice prior to any new terms taking effect. What constitutes a material change will be determined at Our sole discretion.
+
+By continuing to access or use Our Service after those revisions become effective, You agree to be bound by the revised terms. If You do not agree to the new terms, in whole or in part, please stop using the website and the Service.
+
+## Contact Us
+
+If you have any questions about these Terms and Conditions, You can contact us:
+
+- By visiting this page on our website: [https://discord.gg/nDt7AjGJQH](https://discord.gg/nDt7AjGJQH)

docs/technical/bkni.md

@@ -0,0 +1,181 @@
+![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/dids.md

@@ -0,0 +1,18 @@
+# Discovered Ids
+
+```c
+primary DiscoveredIds {
+  utf8"DIDS" magic;
+  Header header;
+  primary Body body;
+}
+
+Header {
+  uint16 version; // always 1
+}
+
+Body {
+  uint32 count;
+  uint32[count] ids;
+}
+```

next.config.js

@@ -14,6 +14,15 @@ const nextConfig = {
     },
   }),
 
+  async headers() {
+    return [
+      {
+        source: '/(.*)?',
+        headers: [{ key: 'X-Frame-Options', value: 'DENY' }],
+      },
+    ];
+  },
+
   distDir: 'dist/website',
   reactStrictMode: false,
 };

package.json

@@ -1,10 +1,11 @@
 {
   "name": "blitzkit",
-  "version": "1.19.6",
+  "version": "1.20.3",
   "description": "🎉 Tools for everything World of Tanks Blitz",
   "main": "src/server.ts",
   "type": "module",
   "scripts": {
+    "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",
@@ -13,6 +14,7 @@
     "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",
     "dev:docs": "vitepress dev docs",
     "dev:website": "next dev",
@@ -28,7 +30,8 @@
     "knip": "knip",
     "update": "yarn upgrade --latest",
     "setup:depotdownloader": "vite-node --script scripts/setupDepotDownloader",
-    "tunnel": "cloudflared tunnel --url http://localhost:3000"
+    "tunnel": "cloudflared tunnel --url http://localhost:3000",
+    "discoverids": "scripts/discoverIds.ts"
   },
   "license": "MIT",
   "dependencies": {
@@ -44,6 +47,7 @@
     "@resvg/resvg-js": "^2.4.1",
     "@types/three": "^0.160.0",
     "@vanilla-extract/css": "^1.13.0",
+    "adm-zip": "^0.5.12",
     "bepaint": "^0.1.0-beta.3",
     "decompress": "^4.2.1",
     "discord.js": "^14.13.0",
@@ -58,16 +62,20 @@
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
     "markdown-escape": "^2.0.0",
+    "markdown-to-jsx": "^7.4.7",
     "next": "^14.1.0",
     "parse-dds": "^1.2.1",
+    "pickleparser": "^0.2.1",
     "postprocessing": "^6.34.1",
+    "progress": "^2.0.3",
+    "protobufjs": "^7.2.6",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-fuzzysort": "^1.0.1",
     "react-promise-suspense": "^0.3.4",
     "satori": "^0.10.13",
-    "sharp": "0.33.1",
+    "sharp": "^0.33.4",
     "three": "0.159.0",
     "three-stdlib": "^2.29.4",
     "vite-node": "^0.34.5",
@@ -78,6 +86,7 @@
   },
   "devDependencies": {
     "@total-typescript/ts-reset": "^0.5.1",
+    "@types/adm-zip": "^0.5.5",
     "@types/decompress": "^4.2.7",
     "@types/escape-html": "^1.0.2",
     "@types/express": "^4.17.18",
@@ -89,6 +98,7 @@
     "@types/node": "^20.6.5",
     "@types/parse-dds": "^1.0.3",
     "@types/pngjs": "^6.0.4",
+    "@types/progress": "^2.0.7",
     "@types/react": "^18.2.22",
     "@vanilla-extract/next-plugin": "^2.3.1",
     "compare-versions": "^6.1.0",
@@ -98,7 +108,7 @@
     "lz4": "^0.6.5",
     "prettier": "^3.0.3",
     "prisma": "^5.4.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.4.5"
   },
   "packageManager": "[email protected]"
 }

public/ads.txt

@@ -1,3 +1,2 @@
-google.com, pub-1289406790225052, DIRECT, f08c47fec0942fa0
 appnexus.com, 14163, RESELLER 
 pubcenter.microsoft.com, 253617120, DIRECT

public/robots.txt

@@ -1,7 +1,7 @@
 User-agent: *
 Allow: /
 
-Host: https://blitzkit.vercel.app
+Host: https://blitzkit.app
 
-Sitemap: https://blitzkit.vercel.app/sitemap.txt
-Sitemap: https://blitzkit.vercel.app/sitemap.xml
+Sitemap: https://blitzkit.app/sitemap.txt
+Sitemap: https://blitzkit.app/sitemap.xml

scripts/applyPatches.ts

@@ -4,7 +4,7 @@ import { parse as parseYaml } from 'yaml';
 import { readStringDVPL } from '../src/core/blitz/readStringDVPL';
 import { writeDVPL } from '../src/core/blitz/writeDVPL';
 import { secrets } from '../src/core/blitzkit/secrets';
-import { dvp } from '../submodules/closedkrieg/src/dvp';
+import { dvp } from '../submodules/blitzkit-closed/src/dvp';
 import { DATA } from './buildAssets/constants';
 
 const versionTextFile = await readStringDVPL(`${DATA}/version.txt.dvpl`);

scripts/averages.ts

@@ -0,0 +1,266 @@
+import { times } from 'lodash';
+import { compress } from 'lz4js';
+import { argv } from 'process';
+import ProgressBar from 'progress';
+import { Region, REGIONS } from '../src/constants/regions';
+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 {
+  AverageDefinitions,
+  AverageDefinitionsAllStats,
+} from '../src/core/blitzkit/averageDefinitions';
+import { averageDefinitionsAllStatsKeys } 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 { IndividualTankStats } from '../src/types/tanksStats';
+
+const RUN_TIME = 1000 * 60 * 60;
+const MAX_REQUESTS = 10;
+
+const production = argv.includes('--production');
+const startTime = Date.now();
+const fields = 'all,tank_id,battle_life_time';
+
+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);
+    });
+  });
+
+  console.log(
+    `Generating statistics based off ${players.length} players and ${tankIds.length} tanks...`,
+  );
+
+  const averages: AverageDefinitions = {};
+
+  tankIds.forEach((id) => {
+    const tanks = sorted[id];
+    const samples = tanks.length;
+
+    function sum(slice: (tank: AverageDefinitionsAllStats) => number) {
+      return tanks.reduce((acc, tank) => {
+        return (
+          acc + slice({ battle_life_time: tank.battle_life_time, ...tank.all })
+        );
+      }, 0);
+    }
+
+    const denominator = sum((tank) => tank.battles);
+
+    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);
+    }
+
+    function weightedAverage(
+      slice: (tank: AverageDefinitionsAllStats) => number,
+    ) {
+      return moment(slice) / denominator;
+    }
+
+    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;
+
+    averages[id] = { samples, mu, sigma, r, m, b };
+  });
+
+  commitAssets(
+    'averages',
+    [
+      {
+        path: 'definitions/averages.cdon.lz4',
+        content: superCompress(averages),
+        encoding: 'base64',
+      },
+      {
+        path: 'definitions/discovered.dids.lz4',
+        content: Buffer.from(
+          compress(new DidsWriteStream().dids(discoveredIds).uint8Array),
+        ).toString('base64'),
+        encoding: 'base64',
+      },
+    ],
+    production,
+  );
+}

scripts/buildAssets/definitions.ts

@@ -3,6 +3,7 @@ import { parse as parsePath } from 'path';
 import { Vector3Tuple } from 'three';
 import { parse as parseYaml } from 'yaml';
 import { TankClass } from '../../src/components/Tanks';
+import { WARGAMING_APPLICATION_ID } from '../../src/constants/wargamingApplicationID';
 import { readStringDVPL } from '../../src/core/blitz/readStringDVPL';
 import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
 import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
@@ -18,6 +19,7 @@ import {
   EquipmentRow,
 } from '../../src/core/blitzkit/equipmentDefinitions';
 import { GameDefinitions } from '../../src/core/blitzkit/gameDefinitions';
+import { MapDefinitions } from '../../src/core/blitzkit/mapDefinitions';
 import {
   ModelArmor,
   ModelDefinitions,
@@ -33,6 +35,7 @@ import {
   TankDefinitionPrice,
   TankDefinitions,
   Tier,
+  Unlock,
 } from '../../src/core/blitzkit/tankDefinitions';
 import { DATA, POI } from './constants';
 import { Avatar } from './skillIcons';
@@ -84,7 +87,7 @@ type VehicleDefinitionArmor = Record<
   number | { vehicleDamageFactor: 0; '#text': number }
 >;
 interface UnlocksInner {
-  cost: number;
+  cost: number | string;
   '#text': number;
 }
 type Unlocks = {
@@ -325,6 +328,31 @@ type ConsumablesVehicleFilter =
   | { name: string }
   | { extendedTags: string };
 
+export interface Maps {
+  maps: {
+    [key: string]: {
+      id: number;
+      tags?: string;
+      localName: string;
+      avaliableInTrainingRoom: boolean; // lol wg typo
+      spriteFrame: number;
+      supremacyPointsThreshold?: number;
+      availableModes: number[];
+      shadowMapsAvailable?: boolean;
+      assaultRespawnPoints: {
+        allies: MapAlly[];
+        enemies: MapAlly[];
+      };
+      levels?: number[];
+    };
+  };
+}
+
+export interface MapAlly {
+  respawnNumber: number;
+  points: Array<number[]>;
+}
+
 const blitzShellKindToBlitzkit: Record<ShellKind, ShellType> = {
   ARMOR_PIERCING: 'ap',
   ARMOR_PIERCING_CR: 'ap_cr',
@@ -339,6 +367,11 @@ export const botPattern = /^.+((tutorial_bot(\d+)?)|(TU(R?)))$/;
 export async function definitions(production: boolean) {
   console.log('Building definitions...');
 
+  const wargamingTankopedia = (await fetch(
+    `https://api.wotblitz.com/wotb/encyclopedia/vehicles/?application_id=${WARGAMING_APPLICATION_ID}&fields=description`,
+  ).then((response) => response.json())) as {
+    data: { [key: number]: { description: null | string } };
+  };
   const gameDefinitions: GameDefinitions = {
     version: (await readStringDVPL(`${DATA}/version.txt.dvpl`))
       .split(' ')[0]
@@ -348,6 +381,7 @@ export async function definitions(production: boolean) {
   };
   const tankDefinitions: TankDefinitions = {};
   const modelDefinitions: ModelDefinitions = {};
+  const mapDefinitions: MapDefinitions = {};
   const equipmentDefinitions: EquipmentDefinitions = {
     presets: {},
     equipments: {},
@@ -386,7 +420,7 @@ export async function definitions(production: boolean) {
   const avatar = await readXMLDVPL<{ root: Avatar }>(
     `${DATA}/XML/item_defs/tankmen/avatar.xml.dvpl`,
   );
-
+  const maps = await readYAMLDVPL<Maps>(`${DATA}/maps.yaml.dvpl`);
   const tankXps = new Map<number, number>();
 
   await Promise.all(
@@ -420,6 +454,46 @@ export async function definitions(production: boolean) {
         `${DATA}/${POI.vehicleDefinitions}/${nation}/components/chassis.xml.dvpl`,
       );
 
+      function resolveUnlocks(unlocks?: Unlocks) {
+        if (!unlocks) return undefined;
+
+        return Object.entries(unlocks)
+          .map(([type, list]) =>
+            (Array.isArray(list) ? list : [list]).map((item) => {
+              const typeTyped = type as keyof Unlocks;
+              let rawId: number;
+
+              if (typeTyped === 'chassis') {
+                rawId = chassisList.root.ids[item['#text']];
+              } else if (typeTyped === 'engine') {
+                rawId = enginesList.root.ids[item['#text']];
+              } else if (typeTyped === 'gun') {
+                rawId = gunList.root.ids[item['#text']];
+              } else if (typeTyped === 'turret') {
+                rawId = turretList.root.ids[item['#text']];
+              } else if (typeTyped === 'vehicle') {
+                rawId = tankList.root[item['#text']].id;
+              }
+
+              return {
+                type: typeTyped,
+                id: toUniqueId(nation, rawId!),
+                cost: {
+                  type:
+                    typeof item.cost === 'number'
+                      ? 'xp'
+                      : item.cost.split(':')[0],
+                  value:
+                    typeof item.cost === 'number'
+                      ? item.cost
+                      : Number(item.cost.split(':')[1]),
+                },
+              } satisfies Unlock;
+            }),
+          )
+          .flat();
+      }
+
       for (const tankKey in tankList.root) {
         if (botPattern.test(tankKey)) continue;
 
@@ -508,6 +582,8 @@ export async function definitions(production: boolean) {
 
         tankDefinitions[tankId] = {
           id: tankId,
+          description:
+            wargamingTankopedia.data[tankId]?.description ?? undefined,
           fixedCamouflage: fixedCamouflage ? true : undefined,
           crew,
           weight: tankDefinition.root.hull.weight,
@@ -591,6 +667,7 @@ export async function definitions(production: boolean) {
               soft: terrainResistances[2],
             },
             tier: track.level as Tier,
+            unlocks: resolveUnlocks(track.unlocks),
           });
 
           modelDefinitions[tankId].tracks[trackId] = {
@@ -615,6 +692,7 @@ export async function definitions(production: boolean) {
             tier: engineListEntry.level as Tier,
             weight: engineListEntry.weight,
             power: engineListEntry.power,
+            unlocks: resolveUnlocks(engine.unlocks),
           });
         });
 
@@ -676,6 +754,7 @@ export async function definitions(production: boolean) {
               health: turret.maxHealth,
               viewRange: turret.circularVisionRadius,
               weight: turret.weight,
+              unlocks: resolveUnlocks(turret.unlocks),
             });
 
             modelDefinitions[tankId].turrets[turretId] = {
@@ -794,6 +873,7 @@ export async function definitions(production: boolean) {
                   shot: shotDispersionFactors.afterShot,
                   traverse: shotDispersionFactors.turretRotation,
                 },
+                unlocks: resolveUnlocks(gun.unlocks),
               } as GunDefinition);
 
               modelDefinitions[tankId].turrets[turretId].guns[gunId] = {
@@ -879,7 +959,7 @@ export async function definitions(production: boolean) {
                   const currentTank = tankDefinitions[tankId];
                   const successorId = toUniqueId(nation, tankListEntry.id);
 
-                  tankXps.set(successorId, vehicle.cost);
+                  tankXps.set(successorId, vehicle.cost as number);
 
                   if (currentTank.successors === undefined) {
                     currentTank.successors = [];
@@ -893,7 +973,7 @@ export async function definitions(production: boolean) {
                 case 'gun': {
                   gunXps.set(
                     toUniqueId(nation, gunList.root.ids[vehicle['#text']]),
-                    vehicle.cost,
+                    vehicle.cost as number,
                   );
                   break;
                 }
@@ -901,7 +981,7 @@ export async function definitions(production: boolean) {
                 case 'turret': {
                   turretXps.set(
                     toUniqueId(nation, turretList.root.ids[vehicle['#text']]),
-                    vehicle.cost,
+                    vehicle.cost as number,
                   );
                   break;
                 }
@@ -909,7 +989,7 @@ export async function definitions(production: boolean) {
                 case 'engine': {
                   engineXps.set(
                     toUniqueId(nation, enginesList.root.ids[vehicle['#text']]),
-                    vehicle.cost,
+                    vehicle.cost as number,
                   );
                   break;
                 }
@@ -917,7 +997,7 @@ export async function definitions(production: boolean) {
                 case 'chassis': {
                   trackXps.set(
                     toUniqueId(nation, chassisList.root.ids[vehicle['#text']]),
-                    vehicle.cost,
+                    vehicle.cost as number,
                   );
                   break;
                 }
@@ -967,6 +1047,7 @@ export async function definitions(production: boolean) {
 
       equipmentDefinitions.equipments[optionalDeviceEntry.id] = {
         name: strings[optionalDeviceEntry.userString],
+        description: strings[optionalDeviceEntry.description],
       };
     },
   );
@@ -1122,6 +1203,13 @@ export async function definitions(production: boolean) {
     skillDefinitions.classes[tankClass as TankClass] = skills.split(' ');
   });
 
+  Object.entries(maps.maps).forEach(([key, map]) => {
+    mapDefinitions[map.id] = {
+      id: map.id,
+      name: strings[`#maps:${key}:${map.localName}`],
+    };
+  });
+
   await commitAssets(
     'definitions',
     [
@@ -1160,6 +1248,11 @@ export async function definitions(production: boolean) {
         encoding: 'base64',
         path: 'definitions/skills.cdon.lz4',
       },
+      {
+        content: superCompress(mapDefinitions),
+        encoding: 'base64',
+        path: 'definitions/maps.cdon.lz4',
+      },
     ],
     production,
   );

scripts/buildAssets/videos.ts

@@ -6,22 +6,40 @@ import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
 import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
 import { toUniqueId } from '../../src/core/blitz/toUniqueId';
 import { commitAssets } from '../../src/core/blitzkit/commitAssets';
-import {
-  VideoDefinitions,
-  videoDefinitions,
-} from '../../src/core/blitzkit/videos';
+import { VideoDefinitions } from '../../src/core/blitzkit/videos';
 import { DATA, POI } from './constants';
 import { BlitzStrings, botPattern, VehicleDefinitionList } from './definitions';
 
 const youtubers = [
   'UCKBYXp4Xn2I2tL1UL4fpbhw', // droodles
   'UCrQ-Dy8lVsm11u8pCJ8W7Tw', // fatness
+  'UCxRpZqMElssTdPYDK3x7wyg', // n90
 ];
 
 export async function videos(production: boolean) {
   console.log('Building videos...');
 
-  const currentVideos = await videoDefinitions;
+  const currentVideos = await fetch(
+    'https://raw.githubusercontent.com/tresabhi/blitzkit-assets/main/definitions/videos.csv',
+  )
+    .then((response) => response.text())
+    .then((lines) => {
+      return lines
+        .split('\n')
+        .map((line) => {
+          const [idString, lastUpdatedString, ...videos] = line.split(',');
+          const id = Number(idString);
+          const lastUpdated = Number(lastUpdatedString);
+          return { id, lastUpdated, videos };
+        })
+        .reduce<VideoDefinitions>(
+          (accumulator, { id, lastUpdated, videos }) => {
+            accumulator[id] = { lastUpdated, videos };
+            return accumulator;
+          },
+          {},
+        );
+    });
   const auth = await google.auth.getClient({
     scopes: ['https://www.googleapis.com/auth/youtube.readonly'],
   });

scripts/discoverIds.ts

@@ -0,0 +1,127 @@
+import { times } from 'lodash';
+import { argv } from 'process';
+import { Region, REGIONS } from '../src/constants/regions';
+import { requestLimitExceededEvent } from '../src/core/blitz/fetchBlitz';
+import { getAccountInfo } from '../src/core/blitz/getAccountInfo';
+import { idToRegion, MIN_IDS } from '../src/core/blitz/idToRegion';
+import { asset } from '../src/core/blitzkit/asset';
+import { commitAssets } from '../src/core/blitzkit/commitAssets';
+import { DidsReadStream, DidsWriteStream } from '../src/core/streams/dids';
+
+const RUN_TIME = 1000 * 60 * 60 * 5.5;
+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 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,
+};
+const zeroStreak: Record<Region, number> = { asia: 0, com: 0, eu: 0 };
+let regionIndex = 0;
+let outOfTimeFlagged = false;
+
+async function verify(region: Region, ids: number[]) {
+  const infos = await getAccountInfo(region, ids, undefined, {
+    // cheeky way of requesting nothing
+    fields: 'account_id,-account_id',
+  });
+  const filtered = ids.filter((_, index) => {
+    const info = infos[index];
+    return info !== null;
+  });
+
+  return filtered;
+}
+
+let discardAttempts = 0;
+requestLimitExceededEvent.on(() => {
+  discardAttempts++;
+});
+
+const interval = setInterval(async () => {
+  if (discardAttempts > 0) return discardAttempts--;
+
+  const region = indexableRegions[regionIndex];
+  const idsToVerify = times(
+    ACCOUNTS_PER_CALL,
+    (index) => regionalIdIndex[region] + index,
+  );
+  const verified = await verify(region, idsToVerify);
+
+  console.log(`${region.padEnd(4)} ${verified.length.toString().padStart(3)}`);
+
+  if (verified.length === 0) {
+    zeroStreak[region]++;
+
+    if (zeroStreak[region] >= TERMINATION_THRESHOLD) {
+      const sliceableIndex = indexableRegions.indexOf(region);
+
+      if (sliceableIndex !== -1) {
+        console.log(`Stopped discovery for ${region}`);
+        indexableRegions.splice(sliceableIndex, 1);
+
+        if (indexableRegions.length === 0) {
+          console.log('All players discovered exhaustively!');
+          post();
+        }
+      }
+    }
+  } else {
+    zeroStreak[region] = 0;
+    ids.push(...verified);
+  }
+
+  if (Date.now() - startTime > RUN_TIME && !outOfTimeFlagged) {
+    outOfTimeFlagged = true;
+    console.log('Out of time');
+    post();
+  }
+
+  regionIndex = (regionIndex + 1) % indexableRegions.length;
+  regionalIdIndex[region] += ACCOUNTS_PER_CALL;
+}, 1000 / MAX_REQUESTS);
+
+function post() {
+  clearInterval(interval);
+  console.log(`Uploading ${ids.length} ids...`);
+
+  const didsWriteStream = new DidsWriteStream().dids(ids);
+  const content = Buffer.from(didsWriteStream.uint8Array).toString('base64');
+
+  commitAssets(
+    'discovered ids',
+    [
+      {
+        content,
+        encoding: 'base64',
+        path: 'definitions/ids.dids',
+      },
+    ],
+    production,
+  );
+}

scripts/sitemap.ts

@@ -8,14 +8,14 @@ console.log('Building sitemap...');
 const awaitedTankDefinitions = await tankDefinitions;
 const values = Object.values(awaitedTankDefinitions);
 const txt = values
-  .map((tank) => `https://blitzkit.vercel.app/tools/tankopedia/${tank.id}/`)
+  .map((tank) => `https://blitzkit.app/tools/tankopedia/${tank.id}/`)
   .join('\n');
 const xml = `<?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 ${values
   .map(
     (tank) =>
-      `<url><loc>https://blitzkit.vercel.app/tools/tankopedia/${tank.id}/</loc></url>`,
+      `<url><loc>https://blitzkit.app/tools/tankopedia/${tank.id}/</loc></url>`,
   )
   .join('\n')}
 </urlset>`;

scripts/test2.ts

@@ -0,0 +1,36 @@
+import AdmZip from 'adm-zip';
+import { readFile } from 'fs/promises';
+import { BattleResultsReadStream } from '../src/core/streams/battleResults';
+
+interface WoTBReplayMeta {
+  version: string;
+  title: string;
+  dbid: string;
+  playerName: string;
+  battleStartTime: string;
+  playerVehicleName: string;
+  mapName: string;
+  arenaUniqueId: string;
+  battleDuration: number;
+  vehicleCompDescriptor: number;
+  camouflageId: number;
+  mapId: number;
+  arenaBonusType: number;
+}
+
+const file = await readFile('temp/test.wotbreplay');
+const zip = new AdmZip(file);
+const entries = zip.getEntries();
+
+const metaRaw = entries.find((entry) => entry.name === 'meta.json');
+const battleResultsRaw = entries.find(
+  (entry) => entry.name === 'battle_results.dat',
+);
+
+if (!metaRaw) throw new Error('No meta.json found');
+if (!battleResultsRaw) throw new Error('No battle_results.dat found');
+
+const meta = JSON.parse(metaRaw.getData().toString()) as WoTBReplayMeta;
+const battleResults = new BattleResultsReadStream(
+  battleResultsRaw.getData().buffer,
+).battleResults();

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

@@ -0,0 +1,62 @@
+'use client';
+
+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';
+
+export default function Page({
+  params,
+  searchParams,
+}: {
+  params: { provider: string };
+  searchParams: { [key: string]: string };
+}) {
+  const router = useRouter();
+
+  useEffect(() => {
+    switch (params.provider) {
+      case 'wargaming': {
+        if (
+          !searchParams.expires_at ||
+          !searchParams.access_token ||
+          !searchParams.account_id
+        ) {
+          break;
+        }
+
+        mutateApp((draft) => {
+          draft.login = {
+            expiresAt: Number(searchParams.expires_at),
+            id: Number(searchParams.account_id),
+            token: searchParams.access_token,
+          };
+        });
+
+        break;
+      }
+
+      default: {
+        console.error(`Unknown provider: ${params.provider}`);
+      }
+    }
+
+    router.push(searchParams.return ? searchParams.return : '/');
+  });
+
+  return (
+    <PageWrapper>
+      <Flex
+        style={{ flex: 1 }}
+        align="center"
+        justify="center"
+        direction="column"
+        gap="2"
+      >
+        <Heading>Verifying you...</Heading>
+        <Text color="gray">You'll be on your way shortly.</Text>
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/components/Checks.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import {
+  AlertDialog,
+  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';
+
+const DEV_BUILD_AGREEMENT_COOLDOWN = 8 * 24 * 60 * 60 * 1000;
+
+export function Checks() {
+  const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
+  const login = useApp((state) => state.login);
+  const policiesAgreementIndex = useApp(
+    (state) => state.policiesAgreementIndex,
+  );
+  const pathname = usePathname();
+  const isLegal = pathname.startsWith('/legal');
+  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,
+    );
+  }, [policiesAgreementIndex, isLegal]);
+
+  useEffect(() => {
+    if (!login) return;
+
+    const expiresIn = login.expiresAt - Date.now() / 1000;
+    const expiresInDays = expiresIn / 60 / 60 / 24;
+
+    if (expiresInDays < 0) {
+      logout();
+    } else if (expiresInDays < 7) {
+      extendAuth();
+    }
+  });
+
+  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="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>
+
+                <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>
+          </Flex>
+        </Flex>
+      )}
+    </>
+  );
+}

src/app/components/Hero.tsx

@@ -0,0 +1,50 @@
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import { imgur } from '../../core/blitzkit/imgur';
+
+export function Hero() {
+  return (
+    <Flex
+      align="center"
+      justify="center"
+      style={{
+        position: 'relative',
+        background: `url(${imgur('rUPie9G', { format: 'jpeg' })})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+      }}
+      px="4"
+      py="9"
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          background:
+            'linear-gradient(var(--color-panel-translucent), var(--color-background))',
+        }}
+      />
+
+      <Flex
+        direction="column"
+        gap="4"
+        align="center"
+        justify="center"
+        position="relative"
+        width="100%"
+      >
+        <Flex direction="column" align="center">
+          <Heading size="9" weight="bold" align="center">
+            BlitzKit
+          </Heading>
+          <Text color="gray" align="center" size="4">
+            Everything World of Tanks Blitz
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

src/app/docs/[directory]/[document]/page.tsx

@@ -0,0 +1,38 @@
+import { Table } from '@radix-ui/themes';
+import Markdown from 'markdown-to-jsx';
+import { use } from 'react';
+import { Link } from '../../../../components/Link';
+import PageWrapper from '../../../../components/PageWrapper';
+import isDev from '../../../../core/blitzkit/isDev';
+
+export default function Page({
+  params,
+}: {
+  params: { document: string; directory: string };
+}) {
+  const markdown = use(
+    fetch(
+      `https://raw.githubusercontent.com/tresabhi/blitzkit/${isDev() ? 'dev' : 'main'}/docs/${params.directory}/${params.document}.md`,
+    ).then((response) => response.text()),
+  );
+
+  return (
+    <PageWrapper>
+      <Markdown
+        options={{
+          overrides: {
+            a: { component: Link },
+            table: { component: Table.Root },
+            thead: { component: Table.Header },
+            tbody: { component: Table.Body },
+            tr: { component: Table.Row },
+            th: { component: Table.ColumnHeaderCell },
+            td: { component: Table.Cell },
+          },
+        }}
+      >
+        {markdown}
+      </Markdown>
+    </PageWrapper>
+  );
+}

src/app/embeds/session/page.tsx

@@ -1,338 +0,0 @@
-'use client';
-
-import { ContextMenu } from '@radix-ui/themes';
-import { useEffect, useState } from 'react';
-import * as Breakdown from '../../../components/Breakdown';
-import fetchBlitz from '../../../core/blitz/fetchBlitz';
-import { resetSession } from '../../../core/blitzkit/resetSession';
-import {
-  TankDefinition,
-  tankDefinitions,
-} from '../../../core/blitzkit/tankDefinitions';
-import { tankAverages } from '../../../core/blitzstars/tankAverages';
-import calculateWN8 from '../../../core/statistics/calculateWN8';
-import { deltaTankStats } from '../../../core/statistics/deltaTankStats';
-import getWN8Percentile from '../../../core/statistics/getWN8Percentile';
-import mutateSession, { useSession } from '../../../stores/session';
-import { IndividualTankStats, TanksStats } from '../../../types/tanksStats';
-import { CustomColumnDisplay } from '../../tools/session/components/CustomColumn';
-import { Menu } from '../../tools/session/components/Menu';
-
-const REFRESH_RATE = 1 / 5;
-
-interface SessionPageProps {
-  naked?: boolean;
-}
-
-export default function SessionPage({ naked = true }: SessionPageProps) {
-  const session = useSession();
-  const since = session.isTracking ? new Date(session.time) : undefined;
-  const [diff, setDiff] = useState<
-    | {
-        careerWN8: number;
-
-        list: {
-          stats: IndividualTankStats;
-          tankDefinitions?: TankDefinition;
-          career: IndividualTankStats;
-          currentWN8?: number;
-          careerWN8?: number;
-        }[];
-      }
-    | undefined
-  >(undefined);
-  const sessionBattles = diff?.list.reduce(
-    (accumulator, { stats }) => accumulator + stats.all.battles,
-    0,
-  );
-  const tankStatsArray = session.isTracking
-    ? (Object.values(session.tankStats) as IndividualTankStats[])
-    : [];
-  const sessionWinrate = diff
-    ? diff.list.reduce(
-        (accumulator, { stats }) => accumulator + stats.all.wins,
-        0,
-      ) / sessionBattles!
-    : 0;
-  const careerBattles = tankStatsArray.reduce(
-    (accumulator, stats) => accumulator + stats.all.battles,
-    0,
-  );
-  const careerWinrate =
-    tankStatsArray.reduce(
-      (accumulator, stats) => accumulator + stats.all.wins,
-      0,
-    ) / careerBattles;
-  const currentDamage = diff
-    ? diff.list.reduce(
-        (accumulator, { stats }) => accumulator + stats.all.damage_dealt,
-        0,
-      ) / sessionBattles!
-    : 0;
-  const careerDamage =
-    tankStatsArray.reduce(
-      (accumulator, stats) => accumulator + stats.all.damage_dealt,
-      0,
-    ) / careerBattles;
-
-  useEffect(() => {
-    if (session.title === 'Untitled session') {
-      mutateSession((draft) => {
-        if (draft.isTracking) draft.title = draft.nickname;
-      });
-    }
-  }, [session.title]);
-
-  useEffect(() => {
-    async function recalculateDiff() {
-      if (session.isTracking) {
-        const { id, region } = session;
-        const careerRaw = await fetchBlitz<TanksStats>(region, 'tanks/stats', {
-          account_id: id,
-        });
-        const career = careerRaw[id]!.reduce<
-          Record<number, IndividualTankStats>
-        >(
-          (accumulator, curr) => ({
-            ...accumulator,
-            [curr.tank_id]: curr,
-          }),
-          {},
-        );
-        const awaitedTankDefinitions = await tankDefinitions;
-        const awaitedTankAverages = await tankAverages;
-        const careerWN8 =
-          careerRaw[id]!.reduce(
-            (accumulator, { tank_id, all }) =>
-              accumulator +
-              (awaitedTankAverages[tank_id] && all.battles > 0
-                ? all.battles *
-                  calculateWN8(awaitedTankAverages[tank_id].all, all)
-                : 0),
-            0,
-          ) /
-          careerRaw[id]!.reduce(
-            (accumulator, { tank_id, all }) =>
-              accumulator +
-              (awaitedTankAverages[tank_id] && all.battles > 0
-                ? all.battles
-                : 0),
-            0,
-          );
-
-        setDiff({
-          careerWN8,
-
-          list: (
-            Object.values(
-              deltaTankStats(session.tankStats, career, session.time / 1000),
-            ) as IndividualTankStats[]
-          ).map((stats) => {
-            return {
-              stats,
-              tankDefinitions: awaitedTankDefinitions[stats.tank_id],
-              career: career[stats.tank_id],
-              currentWN8: awaitedTankAverages[stats.tank_id]
-                ? calculateWN8(
-                    awaitedTankAverages[stats.tank_id].all,
-                    stats.all,
-                  )
-                : undefined,
-              careerWN8: awaitedTankAverages[stats.tank_id]
-                ? calculateWN8(
-                    awaitedTankAverages[stats.tank_id].all,
-                    career[stats.tank_id].all,
-                  )
-                : undefined,
-            };
-          }),
-        });
-      }
-    }
-
-    recalculateDiff();
-    const interval = setInterval(recalculateDiff, 1000 / REFRESH_RATE);
-
-    return () => clearInterval(interval);
-  }, [session]);
-
-  const totalRowStats: Record<
-    CustomColumnDisplay,
-    Breakdown.RowStatItem | undefined
-  > = {
-    battles: {
-      title: 'Battles',
-      current: sessionBattles?.toLocaleString(),
-      career: tankStatsArray
-        .reduce((accumulator, stats) => accumulator + stats.all.battles, 0)
-        .toLocaleString(),
-    },
-    winrate: {
-      title: 'Winrate',
-      current: sessionBattles ? `${(100 * sessionWinrate).toFixed(2)}%` : '--',
-      career: `${(100 * careerWinrate).toFixed(2)}%`,
-      delta: sessionBattles === 0 ? 0 : sessionWinrate - careerWinrate,
-    },
-    wn8: (() => {
-      if (!diff) return undefined;
-
-      const battlesWithWN8 = diff.list.reduce(
-        (accumulator, { currentWN8, stats }) =>
-          (currentWN8 === undefined ? 0 : stats.all.battles) + accumulator,
-        0,
-      );
-      const currentWN8 =
-        diff.list.reduce(
-          (accumulator, { currentWN8, stats }) =>
-            stats.all.battles * (currentWN8 ?? 0) + accumulator,
-          0,
-        ) / battlesWithWN8!;
-
-      return {
-        title: 'WN8',
-        current: battlesWithWN8
-          ? Math.round(currentWN8!).toLocaleString()
-          : '--',
-        percentile: battlesWithWN8 ? getWN8Percentile(currentWN8!) : undefined,
-        career: Math.round(diff.careerWN8).toLocaleString(),
-      };
-    })(),
-    damage: {
-      title: 'Damage',
-      delta: sessionBattles === 0 ? 0 : currentDamage - careerDamage,
-      current: sessionBattles
-        ? Math.round(currentDamage).toLocaleString()
-        : '--',
-      career: Math.round(careerDamage).toLocaleString(),
-    },
-    none: undefined,
-  };
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div>
-          <Breakdown.Root>
-            {session.showTotal &&
-              session.isTracking &&
-              since !== undefined &&
-              diff !== undefined && (
-                <Breakdown.Row
-                  naked={naked}
-                  color={session.color}
-                  minimized={!session.showCareer}
-                  title={session.title}
-                  stats={session.customColumns.map((customColumn) => {
-                    const rowStat = totalRowStats[customColumn.display];
-
-                    if (!rowStat) return undefined;
-
-                    return {
-                      ...rowStat,
-                      delta:
-                        customColumn.showDelta &&
-                        rowStat.percentile === undefined
-                          ? rowStat.delta
-                          : undefined,
-                    };
-                  })}
-                />
-              )}
-
-            {diff?.list
-              .sort(
-                (a, b) => b.stats.last_battle_time - a.stats.last_battle_time,
-              )
-              .map(
-                ({ stats, tankDefinitions, career, careerWN8, currentWN8 }) => {
-                  const rowStats: Record<
-                    CustomColumnDisplay,
-                    Breakdown.RowStatItem | undefined
-                  > = {
-                    battles: {
-                      title: 'Battles',
-                      current: stats.all.battles.toLocaleString(),
-                      career: career.all.battles.toLocaleString(),
-                    },
-                    winrate: {
-                      title: 'Winrate',
-                      current: `${(
-                        100 *
-                        (stats.all.wins / stats.all.battles)
-                      ).toFixed(2)}%`,
-                      career: `${(
-                        100 *
-                        (career.all.wins / career.all.battles)
-                      ).toFixed(2)}%`,
-                      delta:
-                        stats.all.wins / stats.all.battles -
-                        career.all.wins / career.all.battles,
-                    },
-                    wn8: {
-                      title: 'WN8',
-                      current:
-                        currentWN8 === undefined
-                          ? undefined
-                          : Math.round(currentWN8).toLocaleString(),
-                      career:
-                        careerWN8 === undefined
-                          ? undefined
-                          : Math.round(careerWN8).toLocaleString(),
-                      percentile:
-                        currentWN8 === undefined
-                          ? undefined
-                          : getWN8Percentile(currentWN8),
-                    },
-                    damage: {
-                      title: 'Damage',
-                      current: Math.round(
-                        stats.all.damage_dealt / stats.all.battles,
-                      ).toLocaleString(),
-                      career: Math.round(
-                        career.all.damage_dealt / career.all.battles,
-                      ).toLocaleString(),
-                      delta:
-                        stats.all.damage_dealt / stats.all.battles -
-                        career.all.damage_dealt / career.all.battles,
-                    },
-                    none: undefined,
-                  };
-
-                  return (
-                    <Breakdown.Row
-                      naked={naked}
-                      color={session.color}
-                      key={stats.tank_id}
-                      minimized={!session.showCareer}
-                      title={
-                        tankDefinitions?.name ?? `Unknown tank ${stats.tank_id}`
-                      }
-                      type="tank"
-                      tankType={tankDefinitions?.class}
-                      treeType={tankDefinitions?.treeType}
-                      stats={session.customColumns.map((customColumn) => {
-                        const rowStat = rowStats[customColumn.display];
-
-                        if (!rowStat) return undefined;
-
-                        return {
-                          ...rowStat,
-                          delta:
-                            customColumn.showDelta &&
-                            rowStat.percentile === undefined
-                              ? rowStat.delta
-                              : undefined,
-                        };
-                      })}
-                    />
-                  );
-                },
-              )}
-          </Breakdown.Root>
-        </div>
-      </ContextMenu.Trigger>
-
-      <Menu reset={resetSession} Builder={ContextMenu} />
-    </ContextMenu.Root>
-  );
-}

src/app/layout.css

@@ -0,0 +1,8 @@
+*,
+html {
+  scroll-behavior: smooth;
+}
+
+.radix-themes {
+  --default-font-family: var(--font-inter);
+}

src/app/layout.tsx

@@ -1,24 +1,20 @@
 'use client';
 
-import { AlertDialog, Button, Flex, Theme } from '@radix-ui/themes';
+import { Flex, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
-import { ReactNode, Suspense, useEffect, useState } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { Footer } from '../components/Footer';
 import { Loader } from '../components/Loader';
-import Navbar from '../components/Navbar';
+import Navbar, { NAVBAR_HEIGHT } from '../components/Navbar';
 import { Party3 } from '../components/Party3';
-import isDev from '../core/blitzkit/isDev';
-import { isLocalhost } from '../core/blitzkit/isLocalhost';
-import { useFullScreen } from '../hooks/useFullScreen';
-import { useApp } from '../stores/app';
+import { Checks } from './components/Checks';
+import './layout.css';
 
 config();
 
-const DEV_BUILD_AGREEMENT_COOLDOWN = 8 * 24 * 60 * 60 * 1000;
-
 interface RootLayoutProps {
   children: ReactNode;
 }
@@ -26,24 +22,13 @@ interface RootLayoutProps {
 const robotoFlex = Roboto_Flex({
   subsets: ['latin'],
   display: 'swap',
+  variable: '--font-roboto-flex',
 });
 
 export default function RootLayout({ children }: RootLayoutProps) {
   const pathname = usePathname();
   const isEmbed = pathname.split('/')[1] === 'embeds';
   const isRoot = pathname === '/';
-  const darkMode = useApp((state) => state.darkMode);
-  const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
-  const isFullScreen = useFullScreen();
-
-  useEffect(() => {
-    setShowDevBuildAlert(
-      isDev() &&
-        !isLocalhost() &&
-        Date.now() - useApp.getState().devBuildAgreementTime >=
-          DEV_BUILD_AGREEMENT_COOLDOWN,
-    );
-  }, []);
 
   return (
     <html lang="en" className={robotoFlex.className}>
@@ -70,45 +55,23 @@ export default function RootLayout({ children }: RootLayoutProps) {
         }}
       >
         <Theme
-          appearance={darkMode ? 'dark' : 'light'}
+          appearance="dark"
           panelBackground="solid"
           radius="full"
+          accentColor="amber"
           suppressHydrationWarning
           suppressContentEditableWarning
         >
           <Flex
             direction="column"
-            style={{ minHeight: '100vh', paddingTop: isEmbed ? undefined : 64 }}
+            style={{
+              minHeight: '100vh',
+              paddingTop: isEmbed ? undefined : NAVBAR_HEIGHT,
+            }}
           >
             {!isEmbed && <Navbar />}
-            <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.vercel.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>
+            <Checks />
 
             <Suspense
               fallback={
@@ -120,7 +83,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
               {children}
             </Suspense>
 
-            {!isEmbed && !isFullScreen && <Footer />}
+            {!isEmbed && <Footer />}
           </Flex>
         </Theme>
       </body>

src/app/page.css.ts

@@ -1,15 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { theme } from '../stitches.config';
-
-export const tool = styleVariants({
-  enabled: {
-    boxShadow: `inset 0 -200px 128px -128px ${theme.colors.appBackground1}`,
-
-    ':hover': {
-      boxShadow: `inset 0 -160px 128px -128px ${theme.colors.appBackground1}`,
-    },
-  },
-  disabled: {
-    boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
-  },
-});

src/app/page.tsx

@@ -1,91 +1,149 @@
-'use client';
-
 import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Link as LinkRadix } from '@radix-ui/themes';
+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 { PatreonIcon } from '../icons/Patreon';
-import { theme } from '../stitches.config';
-import * as styles from './page.css';
+import { ImgurSize, imgur } from '../core/blitzkit/imgur';
+import { Hero } from './components/Hero';
 
 export default function Page() {
   return (
-    <PageWrapper>
-      <Flex
-        direction="column"
-        gap="5"
-        justify="center"
-        align="center"
-        style={{ flex: 1 }}
-      >
-        <LinkRadix href="https://www.patreon.com/tresabhi" target="_blank">
-          <Button
-            color="ruby"
-            style={{
-              boxShadow: `0 0 8px ${theme.colors.solidBackground_ruby}f0`,
-            }}
-          >
-            <PatreonIcon style={{ width: '1em', height: '1em' }} /> Consider
-            donating on Patreon
-          </Button>
-        </LinkRadix>
+    <>
+      <Hero />
 
-        <Flex gap="3" wrap="wrap" align="center" justify="center">
-          {TOOLS.map((tool) => (
-            <Link
-              href={tool.href ?? `/tools/${tool.id}`}
-              target={tool.href ? '_blank' : undefined}
-              className={
-                tool.disabled ? styles.tool.disabled : styles.tool.enabled
-              }
-              style={{
-                backgroundImage: `url(/assets/banners/${tool.id}.webp)`,
-                cursor: tool.disabled ? 'default' : 'pointer',
-                opacity: tool.disabled ? 0.25 : 1,
-                height: 128,
-                minWidth: 256,
-                flex: 1,
-                borderRadius: 8,
-                textDecoration: 'none',
-                backgroundSize: 'cover',
-                backgroundPosition: 'center',
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                justifyContent: 'flex-end',
-                padding: 16,
-                transition: `box-shadow ${theme.durations.regular}`,
-              }}
-              onClick={(event) => {
-                if (tool.disabled) event.preventDefault();
-              }}
-            >
-              <span
+      <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;
+
+            return (
+              <Flex
+                key={tool.id}
                 style={{
-                  fontSize: 32,
-                  color: theme.colors.textHighContrast,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
+                  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,
                 }}
               >
-                {tool.title}
-                <CaretRightIcon style={{ width: '1em', height: '1em' }} />
-              </span>
-              <span
-                style={{
-                  color: theme.colors.textLowContrast,
-                  fontSize: 16,
-                }}
-              >
-                {tool.disabled ? 'Coming soon!' : tool.description}
-              </span>
-            </Link>
-          ))}
-        </Flex>
-      </Flex>
-    </PageWrapper>
+                <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
+                    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>
+            );
+          })}
+        </Grid>
+      </PageWrapper>
+
+      <div style={{ flex: 1 }} />
+    </>
   );
 }

src/app/settings/page.tsx

@@ -6,25 +6,10 @@ import { useApp } from '../../stores/app';
 
 export default function Page() {
   const developerMode = useApp((state) => state.developerMode);
-  const darkMode = useApp((state) => state.darkMode);
 
   return (
     <PageWrapper justify="center" align="center">
       <Flex direction="column" gap="4">
-        <Flex gap="3" direction="column">
-          <Heading size="5">Appearance</Heading>
-
-          <Flex align="center" gap="2">
-            <Text>Dark mode</Text>
-            <Switch
-              checked={darkMode}
-              onCheckedChange={(checked) =>
-                useApp.setState({ darkMode: checked })
-              }
-            />
-          </Flex>
-        </Flex>
-
         <Flex gap="3" direction="column">
           <Heading size="5">Advanced</Heading>
 
@@ -38,10 +23,6 @@ export default function Page() {
             />
           </Flex>
         </Flex>
-
-        <Text color="gray">
-          <i>Not a lot here, eh?</i>
-        </Text>
       </Flex>
     </PageWrapper>
   );

src/app/tools/layout.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
 import { TOOLS } from '../../constants/tools';
+import { ImgurSize, imgur } from '../../core/blitzkit/imgur';
 import { theme } from '../../stitches.config';
 
 interface ToolsLayoutProps {
@@ -24,10 +25,7 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
           {isToolRoot && (
             <>
               <title>{tool.title}</title>
-              <meta
-                property="og:image"
-                content={`/assets/banners/${toolId}.webp`}
-              />
+              <meta property="og:image" content={imgur(tool.image)} />
 
               {tool.pageDescription !== undefined && (
                 <>
@@ -59,7 +57,7 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
           <div
             style={{
               position: 'absolute',
-              backgroundImage: `url(/assets/banners/${toolId}.webp)`,
+              backgroundImage: `url(${imgur(tool!.image, { format: 'jpeg', size: ImgurSize.HugeThumbnail })})`,
               backgroundSize: 'cover',
               backgroundPosition: 'center',
               width: '100%',
@@ -67,7 +65,7 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
               top: 0,
               left: 0,
               zIndex: -1,
-              filter: 'blur(4px)',
+              // filter: 'blur(4px)',
               transform: 'scale(calc((128 + 8) / 128))',
             }}
           />

src/app/tools/rating/components/PageTurner/index.tsx

@@ -3,7 +3,7 @@ import {
   CaretRightIcon,
   SymbolIcon,
 } from '@radix-ui/react-icons';
-import { Button, Flex, TextField } from '@radix-ui/themes';
+import { Flex, IconButton, TextField } from '@radix-ui/themes';
 import { range } from 'lodash';
 import { useEffect, useRef } from 'react';
 import { infiniteSpin } from './index.css';
@@ -42,7 +42,7 @@ export function PageTurner({
   return (
     <Flex justify="center" wrap="wrap" gap="2">
       <Flex gap="2">
-        <Button
+        <IconButton
           variant="soft"
           onClick={() => onPageChange(Math.max(page - 1, 0), true)}
           disabled={page === 0 || leftLoading}
@@ -52,7 +52,7 @@ export function PageTurner({
           ) : (
             <CaretLeftIcon />
           )}
-        </Button>
+        </IconButton>
 
         <TextField.Root
           type="number"
@@ -75,7 +75,7 @@ export function PageTurner({
           <TextField.Slot>Page</TextField.Slot>
           <TextField.Slot>out of {pages}</TextField.Slot>
         </TextField.Root>
-        <Button
+        <IconButton
           variant="soft"
           onClick={() => {
             onPageChange(Math.min(page + 1, pages - 1), true);
@@ -87,7 +87,7 @@ export function PageTurner({
           ) : (
             <CaretRightIcon />
           )}
-        </Button>
+        </IconButton>
       </Flex>
     </Flex>
   );

src/app/tools/session/components/CustomColumn.tsx

@@ -1,61 +0,0 @@
-import { ContextMenu, DropdownMenu } from '@radix-ui/themes';
-import mutateSession, { useSession } from '../../../../stores/session';
-
-export type CustomColumnDisplay =
-  | 'battles'
-  | 'winrate'
-  | 'wn8'
-  | 'damage'
-  | 'none';
-
-const NO_DELTA: CustomColumnDisplay[] = ['battles', 'wn8', 'none'];
-
-interface CustomColumn {
-  Builder: typeof DropdownMenu | typeof ContextMenu;
-  column: number;
-}
-
-export function CustomColumn({ column, Builder }: CustomColumn) {
-  const customColumn = useSession((state) => state.customColumns[column]);
-
-  return (
-    <Builder.Sub>
-      <Builder.SubTrigger>Column {column + 1}</Builder.SubTrigger>
-
-      <Builder.SubContent>
-        <Builder.RadioGroup
-          value={customColumn.display}
-          onValueChange={(event) =>
-            mutateSession((draft) => {
-              draft.customColumns[column].display =
-                event as CustomColumnDisplay;
-            })
-          }
-        >
-          <Builder.RadioItem value="battles">Battles</Builder.RadioItem>
-          <Builder.RadioItem value="winrate">Winrate</Builder.RadioItem>
-          <Builder.RadioItem value="wn8">WN8</Builder.RadioItem>
-          <Builder.RadioItem value="damage">Damage</Builder.RadioItem>
-          <Builder.RadioItem value="none">None</Builder.RadioItem>
-        </Builder.RadioGroup>
-
-        {!NO_DELTA.includes(customColumn.display) && (
-          <>
-            <Builder.Separator />
-
-            <Builder.CheckboxItem
-              checked={customColumn.showDelta}
-              onCheckedChange={(checked) =>
-                mutateSession((draft) => {
-                  draft.customColumns[column].showDelta = checked;
-                })
-              }
-            >
-              Show delta
-            </Builder.CheckboxItem>
-          </>
-        )}
-      </Builder.SubContent>
-    </Builder.Sub>
-  );
-}

src/app/tools/session/components/Menu.tsx

@@ -1,135 +0,0 @@
-import {
-  Button,
-  ContextMenu,
-  Dialog,
-  DropdownMenu,
-  Flex,
-  Heading,
-  TextField,
-} from '@radix-ui/themes';
-import { createColors } from 'bepaint';
-import { useRef, useState } from 'react';
-import {
-  ACCENT_COLORS,
-  AccentColor,
-  GRAY_COLORS,
-  GrayColor,
-  PALETTES,
-} from '../../../../constants/radixColors';
-import { useSession } from '../../../../stores/session';
-import { CustomColumn } from './CustomColumn';
-
-interface ContextMenuProps {
-  Builder: typeof DropdownMenu | typeof ContextMenu;
-  reset: () => void;
-}
-
-export function Menu({ Builder, reset }: ContextMenuProps) {
-  const session = useSession();
-  const [showTitleEditor, setShowTitleEditor] = useState(false);
-  const titleInput = useRef<HTMLInputElement>(null);
-
-  return (
-    <>
-      <Dialog.Root open={showTitleEditor} onOpenChange={setShowTitleEditor}>
-        <Dialog.Content>
-          <Flex direction="column" gap="4">
-            <Heading size="4">Edit title</Heading>
-
-            <Flex gap="2" style={{ width: '100%' }}>
-              <TextField.Root
-                style={{ flex: 1 }}
-                ref={titleInput}
-                defaultValue={session.title}
-                placeholder="Enter title..."
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter' && titleInput.current) {
-                    setShowTitleEditor(false);
-                    useSession.setState({ title: titleInput.current!.value });
-                  }
-                }}
-              />
-
-              <Dialog.Close>
-                <Button
-                  onClick={() =>
-                    useSession.setState({ title: titleInput.current!.value })
-                  }
-                >
-                  Set
-                </Button>
-              </Dialog.Close>
-            </Flex>
-          </Flex>
-        </Dialog.Content>
-      </Dialog.Root>
-
-      <Builder.Content>
-        <Builder.Sub>
-          <Builder.SubTrigger>Accent color</Builder.SubTrigger>
-
-          <Builder.SubContent>
-            <Builder.RadioGroup
-              value={session.color}
-              onValueChange={(value) =>
-                useSession.setState({ color: value as AccentColor | GrayColor })
-              }
-            >
-              {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => (
-                <Builder.RadioItem value={color} key={color}>
-                  <Flex gap="2" align="center">
-                    <div
-                      style={{
-                        backgroundColor: createColors(PALETTES[color])
-                          .solidBackground,
-                        width: 16,
-                        height: 16,
-                        borderRadius: '100%',
-                      }}
-                    />
-                    {`${color.charAt(0).toUpperCase()}${color.slice(1)}`}
-                  </Flex>
-                </Builder.RadioItem>
-              ))}
-            </Builder.RadioGroup>
-          </Builder.SubContent>
-        </Builder.Sub>
-
-        <Builder.Separator />
-
-        <Builder.Item onClick={() => setShowTitleEditor(true)}>
-          Edit title...
-        </Builder.Item>
-        <CustomColumn Builder={Builder} column={0} />
-        <CustomColumn Builder={Builder} column={1} />
-        <CustomColumn Builder={Builder} column={2} />
-        <CustomColumn Builder={Builder} column={3} />
-
-        <Builder.Separator />
-
-        <Builder.CheckboxItem
-          checked={session.showTotal}
-          onCheckedChange={(checked) =>
-            useSession.setState({ showTotal: checked })
-          }
-        >
-          Show total
-        </Builder.CheckboxItem>
-        <Builder.CheckboxItem
-          checked={session.showCareer}
-          onCheckedChange={(checked) =>
-            useSession.setState({ showCareer: checked })
-          }
-        >
-          Show career
-        </Builder.CheckboxItem>
-
-        <Builder.Separator />
-
-        <Builder.Item color="red" onClick={reset}>
-          Reset
-        </Builder.Item>
-      </Builder.Content>
-    </>
-  );
-}

src/app/tools/session/page.css.ts

@@ -1,40 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { theme } from '../../../stitches.config';
-
-export const toolBar = style({
-  '@media': {
-    'screen and (min-width: 640px)': {
-      flexDirection: 'row',
-    },
-  },
-
-  flexDirection: 'column',
-  display: 'flex',
-  gap: 8,
-});
-
-export const toolbarButton = style({
-  '@media': {
-    'screen and (min-width: 640px)': {
-      flex: 0,
-    },
-  },
-
-  flex: 1,
-});
-
-export const searchButton = style({
-  border: 'none',
-  background: 'none',
-  fontSize: 16,
-  display: 'flex',
-  padding: 8,
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  cursor: 'pointer',
-
-  ':hover': {
-    backgroundColor: theme.colors.componentInteractiveHover,
-    borderRadius: 4,
-  },
-});

src/app/tools/session/page.tsx

@@ -1,267 +1,558 @@
 'use client';
 
 import {
-  CaretDownIcon,
-  CopyIcon,
-  PersonIcon,
-  ReloadIcon,
+  ArrowDownIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
 } from '@radix-ui/react-icons';
 import {
   AlertDialog,
   Button,
-  Checkbox,
+  Card,
   DropdownMenu,
   Flex,
   Heading,
+  IconButton,
+  Link,
+  Select,
+  Spinner,
+  Table,
   Text,
   TextField,
 } from '@radix-ui/themes';
 import { debounce } from 'lodash';
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
-import { UNLOCALIZED_REGION_NAMES } from '../../../constants/regions';
+import { UNLOCALIZED_REGION_NAMES_SHORT } from '../../../constants/regions';
+import {
+  STAT_KEYS,
+  STAT_NAMES,
+  Stat,
+  generateStats,
+  prettifyStats,
+  sumStats,
+} from '../../../core/blitz/generateStats';
+import {
+  IndividualAccountInfo,
+  getAccountInfo,
+} from '../../../core/blitz/getAccountInfo';
+import getTankStats from '../../../core/blitz/getTankStats';
+import { idToRegion } from '../../../core/blitz/idToRegion';
 import searchPlayersAcrossRegions, {
   AccountListWithServer,
 } from '../../../core/blitz/searchPlayersAcrossRegions';
-import { resetSession } from '../../../core/blitzkit/resetSession';
-import { setSession } from '../../../core/blitzkit/setSession';
-import { useSession } from '../../../stores/session';
-import SessionPage from '../../embeds/session/page';
-import { Menu } from './components/Menu';
-import * as styles from './page.css';
+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 { IndividualTankStats } from '../../../types/tanksStats';
 
-export default function Page() {
+export default function Page({
+  searchParams,
+}: {
+  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);
+  const [searching, setSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<AccountListWithServer>([]);
+  const [showCCInaccessibilityPrompt, setShowCCInaccessibilityPrompt] =
+    useState(false);
   const input = useRef<HTMLInputElement>(null);
-  const [searchResults, setSearchResults] = useState<
-    AccountListWithServer | undefined
-  >(undefined);
-  const [showSearchResults, setShowSearchResults] = useState(false);
-  const handleChange = debounce(
-    async (event: ChangeEvent<HTMLInputElement>) => {
-      if (event.target.value) {
-        setSearchResults(await searchPlayersAcrossRegions(event.target.value));
-      } else {
-        setSearchResults(undefined);
-        setShowSearchResults(false);
-      }
-    },
-    500,
-  );
   const session = useSession();
+  const [tankStatsB, setTankStatsB] = useState<IndividualTankStats[] | null>(
+    null,
+  );
+  const accountInfoPromise = useMemo(
+    () =>
+      new Promise<IndividualAccountInfo | null>(async (resolve) => {
+        resolve(
+          session.tracking
+            ? await getAccountInfo(session.player.region, session.player.id)
+            : null,
+        );
+      }),
+    [session.tracking && session.player.id],
+  );
+  const accountInfo = use(accountInfoPromise);
+  const delta = useMemo(
+    () =>
+      session.tracking && tankStatsB
+        ? deltaTankStats(session.player.stats, tankStatsB)
+            .sort((a, b) => b.last_battle_time - a.last_battle_time)
+            .map((entry) => {
+              const tank = awaitedTankDefinitions[entry.tank_id];
+              const average = awaitedTankAvearges[tank.id];
+              const stats = generateStats(entry.all, average?.all);
+              const statsPretty = prettifyStats(stats);
+
+              return {
+                tank,
+                stats,
+                statsPretty,
+              };
+            })
+        : undefined,
+    [session.tracking && session.player, tankStatsB],
+  );
+  const total = useMemo(
+    () =>
+      delta
+        ? prettifyStats(sumStats(delta.map(({ stats }) => stats)))
+        : undefined,
+    [delta],
+  );
+  const [showLinkOverridePrompt, setShowLinkOverridePrompt] = useState(true);
+
+  const search = debounce(async () => {
+    if (!input.current) return;
+
+    setSearchResults(await searchPlayersAcrossRegions(input.current.value, 9));
+    setSearching(false);
+  }, 500);
+
+  async function track(id: number) {
+    const region = idToRegion(id);
+    const player = await getAccountInfo(region, id);
+    const stats = await getTankStats(region, id);
+
+    if (stats === null) {
+      setShowCCInaccessibilityPrompt(true);
+      return;
+    }
+
+    setShowSearch(false);
+    mutateSession((draft) => {
+      if (!input.current) return;
+
+      draft.tracking = true;
+      (draft as SessionTracking).player = {
+        id,
+        region,
+        since: Date.now(),
+        stats,
+      };
+
+      input.current.value = player.nickname;
+    });
+  }
 
   useEffect(() => {
-    if (session.isTracking) input.current!.value = session.nickname;
-  }, [session]);
+    async function update() {
+      if (!session.tracking) return;
+
+      const tankStats = await getTankStats(
+        idToRegion(session.player.id),
+        session.player.id,
+      );
+      setTankStatsB(tankStats);
+    }
+
+    update();
+    const interval = setInterval(update, 5 * 1000);
+
+    return () => clearInterval(interval);
+  }, [session.tracking && session.player.id]);
+
+  useEffect(() => {
+    setLoaded(true);
+
+    if (searchParams.id && !session.tracking) {
+      track(Number(searchParams.id));
+    }
+  }, []);
+
+  if (!loaded) {
+    return (
+      <PageWrapper align="center" justify="center">
+        <Spinner />
+      </PageWrapper>
+    );
+  }
 
   return (
     <PageWrapper color="blue">
-      <div className={styles.toolBar}>
-        <div style={{ flex: 1, boxSizing: 'border-box', position: 'relative' }}>
-          <TextField.Root
-            defaultValue={session.isTracking ? session.nickname : undefined}
-            ref={input}
-            onChange={(event) => {
-              event.stopPropagation();
+      <AlertDialog.Root
+        open={showCCInaccessibilityPrompt}
+        onOpenChange={setShowCCInaccessibilityPrompt}
+      >
+        <AlertDialog.Content>
+          <AlertDialog.Title>
+            You're attempting to track a CC account
+          </AlertDialog.Title>
+          <AlertDialog.Description>
+            CC (community contributor) accounts do not have public tank
+            statistics. We are in the process of adding embeds for CC accounts,
+            stay tuned.
+          </AlertDialog.Description>
 
-              if (event.target.value) {
-                setShowSearchResults(true);
-                setSearchResults(undefined);
-              } else {
-                setShowSearchResults(false);
-              }
+          <Flex mt="4" justify="end">
+            <AlertDialog.Action>
+              <Button variant="solid">Alright</Button>
+            </AlertDialog.Action>
+          </Flex>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
 
-              handleChange(event);
-            }}
-            onBlur={(event) => {
-              // TODO: remove this hack when https://github.com/radix-ui/primitives/issues/2193 (https://github.com/radix-ui/primitives/issues/1969) is fixed
-              if (showSearchResults) event.target.focus();
-            }}
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                setShowSearchResults(false);
-                input.current?.blur();
-              }
-            }}
-            placeholder="Search for a player..."
+      {searchParams.id &&
+        session.tracking &&
+        Number(searchParams.id) !== session.player.id && (
+          <AlertDialog.Root
+            open={showLinkOverridePrompt}
+            onOpenChange={setShowLinkOverridePrompt}
           >
-            <TextField.Slot>
-              <PersonIcon height="16" width="16" />
-            </TextField.Slot>
-          </TextField.Root>
-
-          <DropdownMenu.Root open={showSearchResults} modal={false}>
-            <DropdownMenu.Trigger>
-              <div />
-            </DropdownMenu.Trigger>
-
-            <DropdownMenu.Content>
-              {searchResults === undefined ? (
-                <DropdownMenu.Item disabled>Searching...</DropdownMenu.Item>
-              ) : searchResults.length === 0 ? (
-                <DropdownMenu.Item disabled>No results</DropdownMenu.Item>
-              ) : (
-                searchResults?.map(
-                  ({ account_id: id, nickname, region }, index) => (
-                    <DropdownMenu.Item
-                      key={id}
-                      onClick={() => {
-                        setShowSearchResults(false);
-                        setSession(region, id, nickname);
-                      }}
-                      shortcut={UNLOCALIZED_REGION_NAMES[region]}
-                    >
-                      {nickname}
-                    </DropdownMenu.Item>
-                  ),
-                )
-              )}
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
-        </div>
-
-        <div style={{ display: 'flex', gap: 8 }}>
-          <AlertDialog.Root>
-            <AlertDialog.Trigger>
-              <Button
-                variant="soft"
-                onClick={(event) => {
-                  if (!session.resetPrompt) {
-                    event.preventDefault();
-                    resetSession();
-                  }
-                }}
-                className={styles.toolbarButton}
-                color="red"
-              >
-                <ReloadIcon width="16" height="16" /> Reset
-              </Button>
-            </AlertDialog.Trigger>
-
             <AlertDialog.Content>
-              <Flex direction="column" gap="4">
-                <Flex direction="column" gap="0">
-                  <AlertDialog.Title>
-                    Are you sure you want to reset?
-                  </AlertDialog.Title>
-                  <AlertDialog.Description>
-                    This'll discard your current session and start tracking from
-                    scratch again.
-                  </AlertDialog.Description>
-                </Flex>
-
-                <Text size="2">
-                  <Checkbox
-                    mr="1"
-                    onCheckedChange={(checked) =>
-                      useSession.setState({
-                        resetPrompt: !checked,
-                      })
-                    }
-                  />
-                  Don't ask me again
-                </Text>
-              </Flex>
-
-              <Flex gap="3" mt="4">
-                <AlertDialog.Cancel>
-                  <Button variant="soft" color="gray">
-                    Cancel
-                  </Button>
-                </AlertDialog.Cancel>
+              <AlertDialog.Title>
+                You are currently tracking {accountInfo?.nickname}
+              </AlertDialog.Title>
+              <AlertDialog.Description>
+                Would you like to stop tracking {accountInfo?.nickname} and
+                start tracking a new player?
+              </AlertDialog.Description>
 
+              <Flex mt="4" justify="end">
                 <AlertDialog.Action>
-                  <Button variant="solid" color="red" onClick={resetSession}>
-                    Reset
+                  <Button
+                    variant="solid"
+                    onClick={() => {
+                      setShowLinkOverridePrompt(false);
+                      track(Number(searchParams.id));
+                    }}
+                  >
+                    Proceed
                   </Button>
                 </AlertDialog.Action>
               </Flex>
             </AlertDialog.Content>
           </AlertDialog.Root>
+        )}
 
-          <AlertDialog.Root>
-            <AlertDialog.Trigger>
-              <Button
-                variant="soft"
-                className={styles.toolbarButton}
-                onClick={(event) => {
-                  if (!session.embedPrompt) {
-                    event.preventDefault();
-                    resetSession();
-                  }
+      {!session.tracking && (
+        <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>
 
-                  navigator.clipboard.writeText(
-                    `${location.origin}/embeds/session`,
-                  );
+          <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%',
                 }}
               >
-                <CopyIcon width="16" height="16" /> Embed
-              </Button>
-            </AlertDialog.Trigger>
+                {searching && (
+                  <Flex justify="center">
+                    <Text color="gray">Searching...</Text>
+                  </Flex>
+                )}
 
-            <AlertDialog.Content>
-              <AlertDialog.Title>
-                Copied link to your clipboard
-              </AlertDialog.Title>
-              <AlertDialog.Description>
-                Instructions for streamers:
-                <iframe
+                {!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) => (
+                      <Button
+                        key={player.account_id}
+                        variant="ghost"
+                        onClick={() => track(player.account_id)}
+                      >
+                        {player.nickname} (
+                        {UNLOCALIZED_REGION_NAMES_SHORT[player.region]})
+                      </Button>
+                    ))}
+                  </Flex>
+                )}
+              </Card>
+            )}
+          </TextField.Root>
+        </Flex>
+      )}
+
+      {session.tracking && (
+        <Flex
+          mt="2"
+          mb="2"
+          direction={wideFormat ? 'row' : 'column'}
+          align="center"
+          justify="between"
+          gap="2"
+        >
+          <Flex mt="2" mb="2" direction="column" gap="2">
+            <Heading size="5">Tracking {accountInfo?.nickname}</Heading>
+            <Text color="gray">
+              Since {new Date(session.player.since).toLocaleString()}
+            </Text>
+          </Flex>
+
+          <Flex gap="2" align="center" justify="center">
+            <Button
+              color="red"
+              onClick={async () => {
+                const stats = await getTankStats(
+                  session.player.region,
+                  session.player.id,
+                );
+
+                if (stats === null) {
+                  setShowCCInaccessibilityPrompt(true);
+                  return;
+                }
+
+                mutateSession((draft) => {
+                  (draft as SessionTracking).player.stats = stats;
+                });
+              }}
+            >
+              Reset
+            </Button>
+            <Button
+              onClick={() => {
+                mutateSession((draft) => {
+                  draft.tracking = false;
+                });
+              }}
+            >
+              Change
+            </Button>
+          </Flex>
+        </Flex>
+      )}
+
+      {session.tracking && delta && delta.length > 0 && (
+        <Table.Root variant="surface">
+          <Table.Header>
+            <Table.Row>
+              <Table.ColumnHeaderCell>Tank</Table.ColumnHeaderCell>
+              {session.columns.map((column, index) => (
+                <Table.ColumnHeaderCell
+                  width="0"
+                  key={column}
                   style={{
-                    width: '100%',
-                    aspectRatio: '16 / 9',
-                    border: 'none',
+                    position: 'relative',
                   }}
-                  src="https://www.youtube-nocookie.com/embed/e--GwjyrJAE?si=ftEiCmpbMI2FUY5N"
-                  title="YouTube video player"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                ></iframe>
-              </AlertDialog.Description>
+                >
+                  {index === 0 && session.columns.length < 4 && (
+                    <DropdownMenu.Root>
+                      <DropdownMenu.Trigger>
+                        <IconButton
+                          size="1"
+                          variant="surface"
+                          style={{
+                            position: 'absolute',
+                            left: 0,
+                            top: '50%',
+                            transform: 'translate(-100%, -50%)',
+                            zIndex: 1,
+                          }}
+                        >
+                          <PlusIcon />
+                        </IconButton>
+                      </DropdownMenu.Trigger>
 
-              <Text size="2">
-                <Checkbox
-                  mr="1"
-                  onCheckedChange={(checked) =>
-                    useSession.setState({
-                      embedPrompt: !checked,
-                    })
-                  }
-                />
-                Don't show this again
-              </Text>
+                      <DropdownMenu.Content>
+                        {STAT_KEYS.filter(
+                          (item) => !session.columns.includes(item),
+                        ).map((key) => (
+                          <DropdownMenu.Item
+                            key={key}
+                            onClick={() => {
+                              mutateSession((draft) => {
+                                (draft as SessionTracking).columns.unshift(
+                                  key as Stat,
+                                );
+                              });
+                            }}
+                          >
+                            {STAT_NAMES[key]}
+                          </DropdownMenu.Item>
+                        ))}
+                      </DropdownMenu.Content>
+                    </DropdownMenu.Root>
+                  )}
 
-              <Flex gap="3" mt="4">
-                <AlertDialog.Cancel>
-                  <Button variant="soft">Got it!</Button>
-                </AlertDialog.Cancel>
-              </Flex>
-            </AlertDialog.Content>
-          </AlertDialog.Root>
+                  <Select.Root
+                    value={column}
+                    onValueChange={(value) => {
+                      mutateSession((draft) => {
+                        if (value === 'remove') {
+                          (draft as SessionTracking).columns.splice(index, 1);
+                        } else {
+                          (draft as SessionTracking).columns[index] =
+                            value as Stat;
+                        }
+                      });
+                    }}
+                  >
+                    <Select.Trigger variant="ghost" />
 
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <Button variant="soft" className={styles.toolbarButton}>
-                Options
-                <CaretDownIcon />
-              </Button>
-            </DropdownMenu.Trigger>
+                    <Select.Content>
+                      {STAT_KEYS.filter(
+                        (item) =>
+                          !session.columns.includes(item) || item === column,
+                      ).map((key) => (
+                        <Select.Item key={key} value={key}>
+                          {STAT_NAMES[key]}
+                        </Select.Item>
+                      ))}
 
-            <Menu Builder={DropdownMenu} reset={resetSession} />
-          </DropdownMenu.Root>
-        </div>
-      </div>
+                      <Select.Separator />
 
-      <SessionPage naked={false} />
+                      <Select.Item value="remove">Remove</Select.Item>
+                    </Select.Content>
+                  </Select.Root>
+                </Table.ColumnHeaderCell>
+              ))}
+            </Table.Row>
+          </Table.Header>
 
-      {!session.isTracking && (
+          <Table.Body>
+            <Table.Row
+              style={{
+                overflow: 'hidden',
+              }}
+            >
+              <Table.RowHeaderCell
+                style={{
+                  paddingLeft: 32,
+                  position: 'relative',
+                  overflowY: 'hidden',
+                }}
+              >
+                Total
+              </Table.RowHeaderCell>
+              {session.columns.map((column) => (
+                <Table.Cell key={column}>{total![column]}</Table.Cell>
+              ))}
+            </Table.Row>
+
+            {delta.map(({ statsPretty, tank }) => {
+              return (
+                <Table.Row
+                  key={tank.id}
+                  style={{
+                    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>
+                  {session.columns.map((column) => (
+                    <Table.Cell key={column}>{statsPretty[column]}</Table.Cell>
+                  ))}
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table.Root>
+      )}
+
+      {session.tracking && delta && delta.length === 0 && (
         <Flex
           align="center"
           justify="center"
           direction="column"
-          style={{ flex: 1 }}
+          style={{
+            flex: 1,
+          }}
         >
-          <Heading color="gray">No player selected</Heading>
-          <Text color="gray">
-            Search for a <PersonIcon /> Player to get started
-          </Text>
+          <Heading color="gray">No battles</Heading>
+          <Text color="gray">Go ahead and play a game</Text>
         </Flex>
       )}
     </PageWrapper>

src/app/tools/statistics/components/Day.tsx

@@ -1,107 +0,0 @@
-import { CaretDownIcon, CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Table, Text } from '@radix-ui/themes';
-import { random } from 'lodash';
-import { use, useMemo, useState } from 'react';
-import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
-import { tankIcon } from '../../../../core/blitzkit/tankIcon';
-
-interface DayProps {
-  offset: number;
-}
-
-export function Day({ offset }: DayProps) {
-  const timeTo = new Date(Date.now() - offset * 24 * 60 * 60 * 1000);
-  const timeFrom = new Date(Date.now() - (offset + 1) * 24 * 60 * 60 * 1000);
-  const awaitedTankDefinitions = use(tankDefinitions);
-  const tanksList = useMemo(
-    () => Object.values(awaitedTankDefinitions),
-    [awaitedTankDefinitions],
-  );
-  const [expanded, setExpanded] = useState(offset === 0);
-  const tanks = tanksList
-    .filter((tank) => tank.tier === 10)
-    .sort(() => Math.random() - 0.5)
-    .slice(0, random(2, 5));
-
-  return (
-    <>
-      <Table.Row>
-        <Table.RowHeaderCell>
-          <Button
-            style={{
-              width: '100%',
-            }}
-            variant="ghost"
-            onClick={() => setExpanded((state) => !state)}
-          >
-            <Flex
-              align="center"
-              gap="1"
-              style={{
-                width: '100%',
-              }}
-            >
-              {expanded ? <CaretDownIcon /> : <CaretRightIcon />}
-              {timeTo.toLocaleString('default', {
-                month: 'short',
-                day: 'numeric',
-              })}
-            </Flex>
-          </Button>
-        </Table.RowHeaderCell>
-        <Table.Cell align="right">{random(1, 10)}</Table.Cell>
-        <Table.Cell align="right">
-          {random(60, 80, true).toFixed(0)}%
-        </Table.Cell>
-      </Table.Row>
-
-      {expanded &&
-        tanks.map((tank) => (
-          <Table.Row
-            key={tank.id}
-            style={{
-              overflow: 'hidden',
-            }}
-          >
-            <Table.RowHeaderCell
-              style={{
-                paddingLeft: 32,
-                position: 'relative',
-                overflowY: 'hidden',
-              }}
-            >
-              <img
-                draggable={false}
-                src={tankIcon(tank.id)}
-                style={{
-                  position: 'absolute',
-                  width: 128 + 32,
-                  height: '200%',
-                  top: '-50%',
-                  left: 0,
-                  boxShadow: 'inset 128px 0 64px -64px #00000040',
-                  objectFit: 'contain',
-                  objectPosition: '50% 50%',
-                  overflow: 'hidden',
-                }}
-              />
-
-              <Text
-                style={{
-                  position: 'relative',
-                  textWrap: 'nowrap',
-                  textShadow: 'black 0 0 4px',
-                }}
-              >
-                {tank.name}
-              </Text>
-            </Table.RowHeaderCell>
-            <Table.Cell align="right">{random(1, 10)}</Table.Cell>
-            <Table.Cell align="right">
-              {random(60, 80, true).toFixed(0)}%
-            </Table.Cell>
-          </Table.Row>
-        ))}
-    </>
-  );
-}

src/app/tools/statistics/page.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { Flex, Heading, Table } from '@radix-ui/themes';
-import { random, times } from 'lodash';
-import { HeroStat } from '../../../components/AllStatsOverview/components/HeroStat';
-import PageWrapper from '../../../components/PageWrapper';
-import { Day } from './components/Day';
-
-export default function Page() {
-  return (
-    <PageWrapper color="iris">
-      <Flex gap="2">
-        <Heading>TresAbhi</Heading>
-        <Heading color="gray">[OPTML]</Heading>
-      </Flex>
-
-      <HeroStat color="#8E4EC6" subtitle="Super Unicum" value={3142} />
-
-      <Table.Root variant="surface">
-        <Table.Header>
-          <Table.Row>
-            <Table.ColumnHeaderCell>Day</Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
-              Battles
-            </Table.ColumnHeaderCell>
-            <Table.ColumnHeaderCell width="0" align="right">
-              Winrate
-            </Table.ColumnHeaderCell>
-          </Table.Row>
-        </Table.Header>
-
-        <Table.Body>
-          {times(random(5, 10), (index) => (
-            <Day offset={index} key={index} />
-          ))}
-        </Table.Body>
-      </Table.Root>
-    </PageWrapper>
-  );
-}

src/app/tools/tankopedia/[id]/components/AntagonistBar.tsx

@@ -1,251 +0,0 @@
-import { Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
-import { Button, Card, Dialog, Flex, Heading, Tabs } from '@radix-ui/themes';
-import { useState } from 'react';
-import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
-import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
-import { SmallTankIcon } from '../../../../../components/SmallTankIcon';
-import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
-import { pushTankopediaPath } from '../../../../../core/blitzkit/pushTankopediaPath';
-import {
-  SHELL_NAMES,
-  TIER_ROMAN_NUMERALS,
-} from '../../../../../core/blitzkit/tankDefinitions/constants';
-import { mutateDuel, useDuel } from '../../../../../stores/duel';
-import {
-  mutateTankopediaTemporary,
-  useTankopediaPersistent,
-} from '../../../../../stores/tankopedia';
-import { TankSearch } from '../../components/TankSearch';
-
-interface AntagonistBarProps {
-  floating?: boolean;
-}
-
-export function AntagonistBar({ floating }: AntagonistBarProps) {
-  const antagonist = useDuel((state) => state.antagonist!);
-  const mode = useTankopediaPersistent((state) => state.mode);
-  const [tab, setTab] = useState('search');
-  const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
-    useState(false);
-
-  if (mode !== 'armor') return null;
-
-  return (
-    <Flex justify="center">
-      <Card
-        style={
-          floating
-            ? {
-                position: 'absolute',
-                bottom: 8,
-                left: '50%',
-                transform: 'translateX(-50%)',
-              }
-            : undefined
-        }
-      >
-        <Flex
-          align="center"
-          justify="center"
-          wrap="wrap"
-          style={{
-            gap: 'min(5vw, 32px)',
-          }}
-        >
-          <Flex>
-            {antagonist.gun.shells.map((shell, index) => {
-              return (
-                <ShellButton
-                  selected={antagonist.shell.id === shell.id}
-                  shell={shell.icon}
-                  rowChild
-                  first={index === 0}
-                  key={shell.id}
-                  last={index === antagonist.gun.shells.length - 1}
-                  onClick={() => {
-                    mutateDuel((draft) => {
-                      draft.antagonist!.shell = shell;
-                      mutateTankopediaTemporary((draft) => {
-                        draft.shot = undefined;
-                      });
-                    });
-                  }}
-                />
-              );
-            })}
-          </Flex>
-
-          <Button
-            variant="ghost"
-            onClick={() => {
-              mutateDuel((draft) => {
-                [draft.protagonist, draft.antagonist] = [
-                  draft.antagonist,
-                  draft.protagonist,
-                ];
-                pushTankopediaPath(draft.antagonist!.tank.id);
-              });
-            }}
-          >
-            <ShuffleIcon /> Swap
-          </Button>
-
-          <Flex align="center" gap="4">
-            <Dialog.Root
-              open={antagonistSelectorOpen}
-              onOpenChange={setAntagonistSelectorVisible}
-            >
-              <Dialog.Trigger>
-                <Button variant="ghost">
-                  <Flex gap="2" align="center">
-                    Versus {antagonist.tank.name}
-                    <SmallTankIcon id={antagonist.tank.id} size={16} />
-                  </Flex>
-                </Button>
-              </Dialog.Trigger>
-
-              <Dialog.Content>
-                <Tabs.Root
-                  value={tab}
-                  onValueChange={setTab}
-                  style={{ position: 'relative' }}
-                >
-                  <Dialog.Close>
-                    <Button
-                      variant="ghost"
-                      style={{ position: 'absolute', right: 0, top: 8 }}
-                    >
-                      <Cross1Icon />
-                    </Button>
-                  </Dialog.Close>
-
-                  <Flex gap="4" direction="column">
-                    <Tabs.List>
-                      <Tabs.Trigger value="search">Search</Tabs.Trigger>
-                      <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
-                    </Tabs.List>
-
-                    <Tabs.Content value="search">
-                      <Flex
-                        direction="column"
-                        gap="4"
-                        style={{ flex: 1 }}
-                        justify="center"
-                      >
-                        <TankSearch
-                          compact
-                          onSelect={(tank) => {
-                            mutateDuel((draft) => {
-                              draft.antagonist!.tank = tank;
-                              draft.antagonist!.engine = tank.engines.at(-1)!;
-                              draft.antagonist!.track = tank.tracks.at(-1)!;
-                              draft.antagonist!.turret = tank.turrets.at(-1)!;
-                              draft.antagonist!.gun =
-                                draft.antagonist!.turret.guns.at(-1)!;
-                              draft.antagonist!.shell =
-                                draft.antagonist!.gun.shells[0];
-                            });
-                            setAntagonistSelectorVisible(false);
-                          }}
-                        />
-                      </Flex>
-                    </Tabs.Content>
-
-                    <Tabs.Content value="configure">
-                      <Flex direction="column" gap="4">
-                        <Flex direction="column" gap="2" style={{ flex: 1 }}>
-                          <Heading size="4">
-                            {antagonist.tank.name} modules
-                          </Heading>
-
-                          <Flex gap="2" wrap="wrap">
-                            <Flex>
-                              {antagonist.tank.turrets.map((turret, index) => (
-                                <ModuleButton
-                                  rowChild
-                                  first={index === 0}
-                                  last={
-                                    index === antagonist.tank.turrets.length - 1
-                                  }
-                                  key={turret.id}
-                                  onClick={() => {
-                                    mutateDuel((draft) => {
-                                      draft.antagonist!.turret = turret;
-                                      draft.antagonist!.gun =
-                                        turret.guns.at(-1)!;
-                                      draft.antagonist!.shell =
-                                        draft.antagonist!.gun.shells[0];
-                                    });
-                                    mutateTankopediaTemporary((draft) => {
-                                      draft.shot = undefined;
-                                    });
-                                  }}
-                                  selected={antagonist.turret.id === turret.id}
-                                  discriminator={
-                                    TIER_ROMAN_NUMERALS[turret.tier]
-                                  }
-                                  module="turret"
-                                />
-                              ))}
-                            </Flex>
-                            <Flex>
-                              {antagonist.turret.guns.map((gun, index) => (
-                                <ModuleButton
-                                  key={gun.id}
-                                  rowChild
-                                  first={index === 0}
-                                  last={
-                                    index === antagonist.turret.guns.length - 1
-                                  }
-                                  onClick={() => {
-                                    mutateDuel((draft) => {
-                                      draft.antagonist!.gun = gun;
-                                      draft.antagonist!.shell = gun.shells[0];
-                                    });
-                                  }}
-                                  selected={antagonist.gun.id === gun.id}
-                                  discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
-                                  module="gun"
-                                />
-                              ))}
-                            </Flex>
-                          </Flex>
-                        </Flex>
-
-                        <Flex direction="column" style={{ flex: 1 }}>
-                          <Heading size="4">Properties</Heading>
-
-                          <ul>
-                            <li>
-                              Turret: <b>{antagonist.turret.name}</b>
-                            </li>
-                            <li>
-                              Gun: <b>{antagonist.gun.name}</b>
-                            </li>
-                            <li>Shells:</li>
-                            <ul>
-                              {antagonist.gun.shells.map((shell) => (
-                                <li key={shell.id}>
-                                  {SHELL_NAMES[shell.type]}:{' '}
-                                  <b>
-                                    {resolveNearPenetration(shell.penetration)}
-                                    mm
-                                  </b>
-                                  , {shell.damage.armor}HP
-                                </li>
-                              ))}
-                            </ul>
-                          </ul>
-                        </Flex>
-                      </Flex>
-                    </Tabs.Content>
-                  </Flex>
-                </Tabs.Root>
-              </Dialog.Content>
-            </Dialog.Root>
-          </Flex>
-        </Flex>
-      </Card>
-    </Flex>
-  );
-}

src/app/tools/tankopedia/[id]/components/Characteristics/components/Info.tsx

@@ -32,7 +32,7 @@ export function Info({
       style={{ width: '100%', paddingLeft: indent ? 24 : 0 }}
       gap="4"
     >
-      <Text color={highlight ? 'amber' : undefined}>
+      <Text color={highlight ? 'amber' : 'gray'}>
         {name}
         {unit != undefined && (
           <>

src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules.tsx

@@ -1,16 +1,311 @@
-import { Button, Flex, Heading } from '@radix-ui/themes';
-import { ModuleManager } from '../../../../../../../components/ModuleManager';
+import {
+  Button,
+  ChevronDownIcon,
+  Flex,
+  Heading,
+  IconButton,
+  Link,
+  Text,
+} from '@radix-ui/themes';
+import { use } from 'react';
+import { asset } from '../../../../../../../core/blitzkit/asset';
+import {
+  ModuleDefinition,
+  ModuleType,
+  TankDefinition,
+  tankDefinitions,
+  Tier,
+  Unlock,
+} from '../../../../../../../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../../core/blitzkit/tankDefinitions/constants';
+import { tankIcon } from '../../../../../../../core/blitzkit/tankIcon';
 import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
-import { mutateTankopediaTemporary } from '../../../../../../../stores/tankopedia';
 import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
+function ModuleButton({
+  tier,
+  selected,
+  unlock,
+  top,
+  onClick,
+}: {
+  unlock: Unlock;
+  tier: Tier;
+  selected: boolean;
+  top: boolean;
+  onClick: () => void;
+}) {
+  const numberFormat = Intl.NumberFormat(undefined, {
+    notation: 'compact',
+    maximumFractionDigits: 0,
+  });
+  const isTank = unlock.type === 'vehicle';
+  const button = (
+    <IconButton
+      size="4"
+      radius="small"
+      variant={selected ? 'surface' : 'soft'}
+      color={top ? 'amber' : selected ? undefined : 'gray'}
+      onClick={onClick}
+      style={{
+        position: 'relative',
+        width: isTank ? 72 : undefined,
+        height: isTank ? 72 : undefined,
+      }}
+    >
+      <Text
+        size="1"
+        color="gray"
+        style={{
+          position: 'absolute',
+          left: isTank ? 8 : 4,
+          top: isTank ? 8 : 4,
+        }}
+      >
+        {TIER_ROMAN_NUMERALS[tier]}
+      </Text>
+
+      {unlock.cost.value > 0 && (
+        <Flex
+          style={{
+            position: 'absolute',
+            left: '50%',
+            bottom: 4,
+            transform: 'translateX(-50%)',
+          }}
+          align="center"
+          gap={isTank ? '1' : undefined}
+        >
+          <Text size="1" color="gray">
+            {numberFormat.format(unlock.cost.value)}
+          </Text>
+
+          <img
+            alt={unlock.cost.type}
+            src={asset(`icons/currencies/${unlock.cost.type}.webp`)}
+            style={{
+              width: 12,
+              height: 12,
+              objectFit: 'contain',
+            }}
+          />
+        </Flex>
+      )}
+
+      <img
+        alt={unlock.type}
+        src={
+          isTank
+            ? tankIcon(unlock.id)
+            : asset(`icons/modules/${unlock.type}.webp`)
+        }
+        style={{
+          width: isTank ? 64 : 32,
+          height: isTank ? 64 : 32,
+          objectFit: 'contain',
+        }}
+      />
+    </IconButton>
+  );
+
+  return isTank ? (
+    <Link href={`/tools/tankopedia/${unlock.id}`}>{button}</Link>
+  ) : (
+    button
+  );
+}
+
 export function Modules() {
-  const protagonist = useDuel((state) => state.protagonist!);
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const tank = useDuel((state) => state.protagonist!.tank);
   const hasUpgrades =
-    protagonist.tank.turrets.length > 1 ||
-    protagonist.tank.turrets[0].guns.length > 1 ||
-    protagonist.tank.engines.length > 1 ||
-    protagonist.tank.tracks.length > 1;
+    tank.turrets.length > 1 ||
+    tank.turrets[0].guns.length > 1 ||
+    tank.engines.length > 1 ||
+    tank.tracks.length > 1;
+  const turret = useDuel((state) => state.protagonist!.turret);
+  const gun = useDuel((state) => state.protagonist!.gun);
+  const engine = useDuel((state) => state.protagonist!.engine);
+  const track = useDuel((state) => state.protagonist!.track);
+  const turret0 = tank.turrets[0];
+  const gun0 = turret0.guns[0];
+  const engine0 = tank.engines[0];
+  const track0 = tank.tracks[0];
+  const topTurret = tank.turrets.at(-1)!;
+  const topGun = topTurret.guns.at(-1)!;
+  const topEngine = tank.engines.at(-1)!;
+  const topTrack = tank.tracks.at(-1)!;
+
+  function setByUnlock(unlock: Unlock) {
+    mutateDuel((draft) => {
+      if (unlock.type === 'turret') {
+        draft.protagonist!.turret = draft.protagonist!.tank.turrets.find(
+          (turret) => turret.id === unlock.id,
+        )!;
+
+        if (
+          !draft.protagonist!.turret.guns.some(
+            (gun) => gun.id === draft.protagonist!.gun.id,
+          )
+        ) {
+          draft.protagonist!.gun = draft.protagonist!.turret.guns.at(-1)!;
+          draft.protagonist!.shell = draft.protagonist!.gun.shells[0];
+        }
+      } else if (unlock.type === 'gun') {
+        const gunInTurret = draft.protagonist!.turret.guns.find(
+          (gun) => gun.id === unlock.id,
+        );
+        if (gunInTurret) {
+          draft.protagonist!.gun = gunInTurret;
+          draft.protagonist!.shell = gunInTurret.shells[0];
+        } else {
+          // TODO: warn somehow?
+          const suitableTurret = draft.protagonist!.tank.turrets.find(
+            (turret) => turret.guns.some((gun) => gun.id === unlock.id),
+          )!;
+          const gunInSuitableTurret = suitableTurret.guns.find(
+            (gun) => gun.id === unlock.id,
+          )!;
+
+          draft.protagonist!.turret = suitableTurret;
+          draft.protagonist!.gun = gunInSuitableTurret;
+          draft.protagonist!.shell = gunInSuitableTurret.shells[0];
+        }
+      } else if (unlock.type === 'engine') {
+        draft.protagonist!.engine = draft.protagonist!.tank.engines.find(
+          (engine) => engine.id === unlock.id,
+        )!;
+      } else if (unlock.type === 'chassis') {
+        draft.protagonist!.track = draft.protagonist!.tank.tracks.find(
+          (track) => track.id === unlock.id,
+        )!;
+      }
+    });
+  }
+
+  function tree(type: ModuleType, unlocks: Unlock[]) {
+    return (
+      <Flex gap="2">
+        {unlocks.map((unlock, index) => {
+          const first = index === 0;
+          const last = index === unlocks.length - 1;
+          const central = !first && !last;
+          let module: ModuleDefinition | TankDefinition | undefined = undefined;
+
+          if (unlock.type === 'chassis') {
+            module = tank.tracks.find((track) => track.id === unlock.id)!;
+          } else if (unlock.type === 'engine') {
+            module = tank.engines.find((engine) => engine.id === unlock.id)!;
+          } else if (unlock.type === 'turret') {
+            module = tank.turrets.find((turret) => turret.id === unlock.id)!;
+          } else if (unlock.type === 'gun') {
+            module = tank.turrets
+              .find((turret) =>
+                turret.guns.some((gun) => gun.id === unlock.id),
+              )!
+              .guns.find((gun) => gun.id === unlock.id)!;
+          } else if (unlock.type === 'vehicle') {
+            module = awaitedTankDefinitions[unlock.id];
+          }
+
+          if (module === undefined) return null;
+
+          return (
+            <Flex
+              align="center"
+              direction="column"
+              gap="2"
+              style={{
+                position: 'relative',
+              }}
+            >
+              {unlock.cost.value > 0 && (
+                <>
+                  {unlocks.length > 1 && (
+                    <div
+                      style={{
+                        backgroundColor: 'currentcolor',
+                        width: `calc(${central ? 100 : 50}% + ${central ? 8 : 4}px)`,
+                        height: 1,
+                        position: 'absolute',
+                        right: first ? 0 : undefined,
+                        left: last ? 0 : undefined,
+                        transform: `translateX(${first ? 4 : last ? -4 : 0}px)`,
+                      }}
+                    />
+                  )}
+
+                  <Flex
+                    direction="column"
+                    align="center"
+                    style={{
+                      marginBottom: -7,
+                    }}
+                  >
+                    <div
+                      style={{
+                        backgroundColor: 'currentcolor',
+                        width: 1,
+                        height: 8,
+                      }}
+                    />
+                    <ChevronDownIcon
+                      style={{
+                        transform: 'translateY(-7px)',
+                      }}
+                    />
+                  </Flex>
+                </>
+              )}
+
+              <ModuleButton
+                unlock={unlock}
+                tier={module.tier}
+                selected={
+                  (unlock.type === 'turret'
+                    ? turret.id
+                    : unlock.type === 'gun'
+                      ? gun.id
+                      : unlock.type === 'engine'
+                        ? engine.id
+                        : unlock.type === 'chassis'
+                          ? track.id
+                          : -1) === unlock.id
+                }
+                top={
+                  unlock.type === 'turret'
+                    ? module.id == topTurret.id
+                    : unlock.type === 'gun'
+                      ? module.id === topGun.id
+                      : unlock.type === 'engine'
+                        ? module.id === topEngine.id
+                        : unlock.type === 'chassis'
+                          ? module.id === topTrack.id
+                          : false
+                }
+                onClick={() => setByUnlock(unlock)}
+              />
+
+              {(module as ModuleDefinition).unlocks &&
+                (module as ModuleDefinition).unlocks!.length > 1 && (
+                  <div
+                    style={{
+                      backgroundColor: 'currentcolor',
+                      width: 1,
+                      height: 8,
+                      marginBottom: -8,
+                    }}
+                  />
+                )}
+
+              {(module as ModuleDefinition).unlocks &&
+                tree(type, (module as ModuleDefinition).unlocks!)}
+            </Flex>
+          );
+        })}
+      </Flex>
+    );
+  }
 
   return (
     <ConfigurationChildWrapper>
@@ -43,8 +338,7 @@ export function Modules() {
                     draft.protagonist!.tank.turrets.at(-1)!;
                   draft.protagonist!.gun =
                     draft.protagonist!.turret.guns.at(-1)!;
-                  draft.protagonist!.shell =
-                    draft.protagonist!.gun.shells.at(-1)!;
+                  draft.protagonist!.shell = draft.protagonist!.gun.shells[0];
                   draft.protagonist!.engine =
                     draft.protagonist!.tank.engines.at(-1)!;
                   draft.protagonist!.track =
@@ -58,22 +352,36 @@ export function Modules() {
         )}
       </Flex>
 
-      <ModuleManager
-        tank={protagonist.tank}
-        turret={protagonist.turret}
-        gun={protagonist.gun}
-        shell={protagonist.shell}
-        engine={protagonist.engine}
-        track={protagonist.track}
-        onChange={(modules) => {
-          mutateDuel((draft) => {
-            draft.protagonist = { ...draft.protagonist!, ...modules };
-          });
-          mutateTankopediaTemporary((draft) => {
-            draft.shot = undefined;
-          });
-        }}
-      />
+      <Flex gap="2">
+        {tree('engine', [
+          {
+            cost: { type: 'xp', value: 0 },
+            id: engine0.id,
+            type: 'engine',
+          },
+        ])}
+        {tree('chassis', [
+          {
+            cost: { type: 'xp', value: 0 },
+            id: track0.id,
+            type: 'chassis',
+          },
+        ])}
+        {tree('turret', [
+          {
+            cost: { type: 'xp', value: 0 },
+            id: turret0.id,
+            type: 'turret',
+          },
+        ])}
+        {tree('gun', [
+          {
+            cost: { type: 'xp', value: 0 },
+            id: gun0.id,
+            type: 'gun',
+          },
+        ])}
+      </Flex>
     </ConfigurationChildWrapper>
   );
 }

src/app/tools/tankopedia/[id]/components/Characteristics/index.tsx

@@ -11,9 +11,11 @@ import {
 import { debounce } from 'lodash';
 import { Fragment, use, useEffect, useRef, useState } from 'react';
 import { lerp } from 'three/src/math/MathUtils';
-import { ShellButton } from '../../../../../../components/ModuleButtons/ShellButton';
+import { Link } from '../../../../../../components/Link';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { isExplosive } from '../../../../../../core/blitz/isExplosive';
+import { resolvePenetrationCoefficient } from '../../../../../../core/blitz/resolvePenetrationCoefficient';
+import { asset } from '../../../../../../core/blitzkit/asset';
 import { coefficient } from '../../../../../../core/blitzkit/coefficient';
 import { equipmentDefinitions } from '../../../../../../core/blitzkit/equipmentDefinitions';
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
@@ -22,22 +24,21 @@ import { tankCharacteristics } from '../../../../../../core/blitzkit/tankCharact
 import {
   CREW_MEMBER_NAMES,
   GUN_TYPE_NAMES,
-  SHELL_NAMES,
 } from '../../../../../../core/blitzkit/tankDefinitions/constants';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
-import { useFullScreen } from '../../../../../../hooks/useFullScreen';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaTemporary } from '../../../../../../stores/tankopedia';
 import { Info } from './components/Info';
 import { InfoWithDelta } from './components/InfoWithDelta';
 
 export function Characteristics() {
+  const wideFormat = useWideFormat(960);
   const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const awaitedModelDefinitions = use(modelDefinitions);
   const awaitedProvisionDefinitions = use(provisionDefinitions);
   const crewSkills = useTankopediaTemporary((state) => state.skills);
   const penetrationDistanceInput = useRef<HTMLInputElement>(null);
-  const isFullScreen = useFullScreen();
   const hasImprovedVentilation = useEquipment(102);
   const crewMastery = useDuel((state) => state.protagonist!.crewMastery);
   const [penetrationDistance, setPenetrationDistance] = useState(250);
@@ -50,7 +51,7 @@ export function Characteristics() {
           ? total + awaitedProvisionDefinitions[provision].crew! / 100
           : total,
       0,
-    ) + (hasImprovedVentilation ? 0.05 : 0);
+    ) + (hasImprovedVentilation ? 0.08 : 0);
   const commanderMastery = crewMastery + provisionCrewBonus;
   const crewMemberMastery = commanderMastery * 1.1;
   const consumables = useDuel((state) => state.protagonist!.consumables);
@@ -86,7 +87,7 @@ export function Characteristics() {
       stockGun,
       stockTrack,
       stockTurret,
-      applyReactive: false,
+      applyReactiveArmor: false,
       applyDynamicArmor: false,
       applySpallLiner: false,
     },
@@ -102,11 +103,11 @@ export function Characteristics() {
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const penetrationCoefficient = coefficient([
     hasCalibratedShells,
-    isExplosive(shell.type) ? 0.1 : 0.05,
+    resolvePenetrationCoefficient(true, shell.type) - 1,
   ]);
   const penetrationLossOverDistanceCoefficient = coefficient([
     hasSupercharger,
-    -0.5,
+    -0.6,
   ]);
 
   useEffect(() => {
@@ -126,439 +127,449 @@ export function Characteristics() {
     });
   }, [hasImprovedVerticalStabilizer]);
 
-  if (isFullScreen) return null;
-
   return (
-    <Flex direction="column" gap="8" style={{ width: '100%' }}>
-      <Flex direction="column" gap="2">
-        <Flex align="center" gap="4">
-          <Heading size="5">Fire</Heading>
+    <Flex direction={wideFormat ? 'row' : 'column'} gap="8" wrap="wrap">
+      <Flex direction="column" gap="8" style={{ flex: 1 }}>
+        <Flex direction="column" gap="2">
+          <Flex align="center" gap="4">
+            <Heading size="5">Fire</Heading>
 
-          <Flex>
-            {gun.shells.map((thisShell, index) => {
-              return (
-                <ShellButton
+            <Flex>
+              {gun.shells.map((thisShell, shellIndex) => (
+                <IconButton
+                  color={thisShell.id === shell.id ? undefined : 'gray'}
+                  variant="soft"
                   key={thisShell.id}
-                  shell={thisShell.icon}
-                  discriminator={SHELL_NAMES[thisShell.type]}
-                  selected={thisShell.id === shell.id}
-                  first={index === 0}
-                  last={index === gun.shells.length - 1}
-                  rowChild
+                  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={() => {
                     mutateDuel((draft) => {
                       draft.protagonist!.shell = thisShell;
                     });
                   }}
-                />
-              );
-            })}
-          </Flex>
-        </Flex>
-        <Info name="Gun type">{GUN_TYPE_NAMES[gun.type]}</Info>
-        <InfoWithDelta name="DPM" decimals={0} unit="hp / min">
-          {stats.dpm}
-        </InfoWithDelta>
-        {gun.type === 'autoReloader' && (
-          <>
-            <InfoWithDelta decimals={0} indent name="Maximum" unit="hp / min">
-              {stats.dpmMaximum!}
-            </InfoWithDelta>
-            <InfoWithDelta
-              decimals={0}
-              indent
-              name="Effective at 60s"
-              unit="hp / min"
-            >
-              {stats.dpmEffective!}
-            </InfoWithDelta>
-            <Info
-              indent
-              name={
-                <a
-                  target="_blank"
-                  href="https://tresabhi.github.io/blitzkit/guide/dpm.html"
                 >
-                  What's the difference?
-                </a>
-              }
-            />
-          </>
-        )}
-        {gun.type !== 'regular' && (
-          <InfoWithDelta name="Shells">{stats.shells}</InfoWithDelta>
-        )}
-        {gun.type === 'autoReloader' ? (
-          <>
-            <Info indent name="Most optimal">
-              {stats.mostOptimalShellIndex}
-            </Info>
-            <Info name="Shell reloads" unit="s" />
-            {stats.shellReloads!.map((reload, index) => (
-              <InfoWithDelta
-                key={index}
-                indent
-                name={`Shell ${index + 1}`}
-                decimals={2}
-                deltaType="lowerIsBetter"
-              >
-                {reload}
+                  <img
+                    alt={thisShell.name}
+                    width={16}
+                    height={16}
+                    src={asset(`icons/shells/${thisShell.icon}.webp`)}
+                  />
+                </IconButton>
+              ))}
+            </Flex>
+          </Flex>
+          <Info name="Gun type">{GUN_TYPE_NAMES[gun.type]}</Info>
+          <InfoWithDelta name="DPM" decimals={0} unit="hp / min">
+            {stats.dpm}
+          </InfoWithDelta>
+          {gun.type === 'autoReloader' && (
+            <>
+              <InfoWithDelta decimals={0} indent name="Maximum" unit="hp / min">
+                {stats.dpmMaximum!}
               </InfoWithDelta>
-            ))}
-          </>
-        ) : (
-          <InfoWithDelta
-            decimals={2}
-            name="Reload"
-            unit="s"
-            deltaType="lowerIsBetter"
-          >
-            {stats.shellReload!}
-          </InfoWithDelta>
-        )}
-        {(gun.type === 'autoLoader' || gun.type === 'autoReloader') && (
-          <InfoWithDelta
-            indent
-            decimals={2}
-            name="Intra-clip"
-            unit="s"
-            deltaType="lowerIsBetter"
-          >
-            {stats.intraClip!}
-          </InfoWithDelta>
-        )}
-        <InfoWithDelta decimals={0} name="Penetration" unit="mm">
-          {stats.penetration}
-        </InfoWithDelta>
-        {typeof shell.penetration !== 'number' && (
-          <>
+              <InfoWithDelta
+                decimals={0}
+                indent
+                name="Effective at 60s"
+                unit="hp / min"
+              >
+                {stats.dpmEffective!}
+              </InfoWithDelta>
+              <Info
+                indent
+                name={
+                  <Link target="_blank" href="/docs/guide/dpm">
+                    What's the difference?
+                  </Link>
+                }
+              />
+            </>
+          )}
+          {gun.type !== 'regular' && (
+            <InfoWithDelta name="Shells">{stats.shells}</InfoWithDelta>
+          )}
+          {gun.type === 'autoReloader' ? (
+            <>
+              <Info indent name="Most optimal">
+                {stats.mostOptimalShellIndex}
+              </Info>
+              <Info name="Shell reloads" unit="s" />
+              {stats.shellReloads!.map((reload, index) => (
+                <InfoWithDelta
+                  key={index}
+                  indent
+                  name={`Shell ${index + 1}`}
+                  decimals={2}
+                  deltaType="lowerIsBetter"
+                >
+                  {reload}
+                </InfoWithDelta>
+              ))}
+            </>
+          ) : (
+            <InfoWithDelta
+              decimals={2}
+              name="Reload"
+              unit="s"
+              deltaType="lowerIsBetter"
+            >
+              {stats.shellReload!}
+            </InfoWithDelta>
+          )}
+          {(gun.type === 'autoLoader' || gun.type === 'autoReloader') && (
             <InfoWithDelta
               indent
-              decimals={0}
-              name={`At ${penetrationDistance}m`}
+              decimals={2}
+              name="Intra-clip"
+              unit="s"
+              deltaType="lowerIsBetter"
             >
-              {lerp(
-                shell.penetration[0],
-                shell.penetration[1],
-                (penetrationDistance * penetrationLossOverDistanceCoefficient) /
-                  500,
-              ) * penetrationCoefficient}
+              {stats.intraClip!}
             </InfoWithDelta>
-            <Flex align="center" gap="2" style={{ paddingLeft: 24 }}>
-              <Text>Distance</Text>
-              <Slider
-                key={penetrationDistance}
-                min={0}
-                max={500}
-                style={{ flex: 1 }}
-                defaultValue={[penetrationDistance]}
-                onValueChange={debounce(([value]) => {
-                  setPenetrationDistance(value);
-                }, 500)}
-              />
-              <TextField.Root
-                style={{ width: 64 }}
-                ref={penetrationDistanceInput}
-                defaultValue={penetrationDistance}
-                onBlur={() => {
-                  setPenetrationDistance(
-                    Math.min(
-                      parseInt(penetrationDistanceInput.current!.value),
-                      500,
-                    ),
-                  );
-                }}
-                onKeyDown={(event) => {
-                  if (event.key === 'Enter') {
-                    event.currentTarget.blur();
-                  }
-                }}
-              >
-                <TextField.Slot side="right">m</TextField.Slot>
-              </TextField.Root>
-            </Flex>
-          </>
-        )}
-        <InfoWithDelta name="Damage" unit="hp" decimals={0}>
-          {stats.damage}
-        </InfoWithDelta>
-        <InfoWithDelta name="Module damage" unit="hp" decimals={0}>
-          {stats.moduleDamage}
-        </InfoWithDelta>
-        {isExplosive(shell.type) && (
-          <InfoWithDelta name="Splash radius" unit="m" decimals={0}>
-            {stats.explosionRadius!}
+          )}
+          <InfoWithDelta decimals={0} name="Penetration" unit="mm">
+            {stats.penetration}
           </InfoWithDelta>
-        )}
-        <InfoWithDelta name="Caliber" decimals={0} unit="mm">
-          {stats.caliber}
-        </InfoWithDelta>
-        <InfoWithDelta name="Normalization" decimals={0} unit="°">
-          {stats.shellNormalization}
-        </InfoWithDelta>
-        {shell.type !== 'he' && (
-          <InfoWithDelta
-            name="Ricochet"
-            decimals={0}
-            deltaType="lowerIsBetter"
-            unit="°"
-          >
-            {stats.shellRicochet!}
-          </InfoWithDelta>
-        )}
-        <InfoWithDelta name="Shell velocity" unit="m/s" decimals={0}>
-          {stats.shellVelocity}
-        </InfoWithDelta>
-        <InfoWithDelta
-          decimals={2}
-          name="Aim time"
-          unit="s"
-          deltaType="lowerIsBetter"
-        >
-          {stats.aimTime}
-        </InfoWithDelta>
-        <Info name="Dispersion at 100m" />
-        <InfoWithDelta
-          decimals={3}
-          indent
-          name="Still"
-          unit="m"
-          deltaType="lowerIsBetter"
-        >
-          {stats.dispersion}
-        </InfoWithDelta>
-        <InfoWithDelta
-          prefix="+ "
-          decimals={3}
-          indent
-          name="Moving"
-          deltaType="lowerIsBetter"
-        >
-          {stats.dispersionMoving}
-        </InfoWithDelta>
-        <InfoWithDelta
-          decimals={3}
-          prefix="+ "
-          indent
-          name="Hull traversing"
-          deltaType="lowerIsBetter"
-        >
-          {stats.dispersionHullTraversing}
-        </InfoWithDelta>
-        <InfoWithDelta
-          decimals={3}
-          prefix="+ "
-          indent
-          name="Turret traversing"
-          deltaType="lowerIsBetter"
-        >
-          {stats.dispersionTurretTraversing}
-        </InfoWithDelta>
-        <InfoWithDelta
-          decimals={3}
-          prefix="+ "
-          indent
-          name="After shooting"
-          deltaType="lowerIsBetter"
-        >
-          {stats.dispersionShooting}
-        </InfoWithDelta>
-        <InfoWithDelta
-          decimals={1}
-          prefix="x "
-          indent
-          name="Gun damaged"
-          unit="scalar"
-          deltaType="lowerIsBetter"
-        >
-          {stats.dispersionGunDamaged}
-        </InfoWithDelta>
-        <Info name="Gun flexibility" unit="°" />
-        <InfoWithDelta decimals={1} indent name="Depression">
-          {stats.gunDepression}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={1} indent name="Elevation">
-          {stats.gunElevation}
-        </InfoWithDelta>
-        {gunModelDefinition.pitch.front && (
-          <>
-            <InfoWithDelta decimals={1} indent name="Frontal depression">
-              {stats.gunFrontalDepression!}
-            </InfoWithDelta>
-            <InfoWithDelta decimals={1} indent name="Frontal elevation">
-              {stats.gunFrontalElevation!}
-            </InfoWithDelta>
-          </>
-        )}
-        {gunModelDefinition.pitch.back && (
-          <>
-            <InfoWithDelta decimals={1} indent name="Rear depression">
-              {stats.gunRearDepression!}
-            </InfoWithDelta>
-            <InfoWithDelta decimals={1} indent name="Rear elevation">
-              {stats.gunRearElevation!}
-            </InfoWithDelta>
-          </>
-        )}
-        {turretModelDefinition.yaw && (
-          <>
-            <InfoWithDelta decimals={1} indent name="Azimuth left">
-              {stats.azimuthLeft!}
-            </InfoWithDelta>
-            <InfoWithDelta decimals={1} indent name="Azimuth right">
-              {stats.azimuthRight!}
-            </InfoWithDelta>
-          </>
-        )}
-      </Flex>
-
-      <Flex direction="column" gap="2">
-        <Heading size="5">Maneuverability</Heading>
-        <Info name="Speed" unit="km/hr" />
-        <InfoWithDelta decimals={0} indent name="Forwards">
-          {stats.speedForwards}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={0} indent name="Backwards">
-          {stats.speedBackwards}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={0} name="Engine power" unit="hp">
-          {stats.enginePower}
-        </InfoWithDelta>
-        <InfoWithDelta
-          decimals={1}
-          name="Weight"
-          unit="tn"
-          deltaType="lowerIsBetter"
-        >
-          {stats.weight}
-        </InfoWithDelta>
-        <Info name="Power to weight ratio" unit="hp/tn" />
-        <InfoWithDelta decimals={1} indent name="On hard terrain">
-          {stats.powerToWeightRatioHardTerrain}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={1} indent name="On medium terrain">
-          {stats.powerToWeightRatioMediumTerrain}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={1} indent name="On soft terrain">
-          {stats.powerToWeightRatioSoftTerrain}
-        </InfoWithDelta>
-        <InfoWithDelta name="Turret traverse speed" unit="°/s" decimals={1}>
-          {stats.turretTraverseSpeed}
-        </InfoWithDelta>
-        <Info name="Hull traverse speed" unit="°/s" />
-        <InfoWithDelta decimals={1} indent name="On hard terrain">
-          {stats.hullTraverseHardTerrain}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={1} indent name="On medium terrain">
-          {stats.hullTraverseMediumTerrain}
-        </InfoWithDelta>
-        <InfoWithDelta decimals={1} indent name="On soft terrain">
-          {stats.hullTraverseSoftTerrain}
-        </InfoWithDelta>
-      </Flex>
-
-      <Flex direction="column" gap="2">
-        <Heading size="5">Survivability</Heading>
-        <InfoWithDelta name="Health" unit="hp" decimals={0}>
-          {stats.health}
-        </InfoWithDelta>
-        <InfoWithDelta
-          name="Fire chance"
-          unit="%"
-          deltaType="lowerIsBetter"
-          decimals={0}
-        >
-          {stats.fireChance * 100}
-        </InfoWithDelta>
-        <InfoWithDelta name="View range" unit="m" decimals={0}>
-          {stats.viewRange}
-        </InfoWithDelta>
-        <Info name="Camouflage" unit="%" />
-        <InfoWithDelta indent name="Still" decimals={0}>
-          {stats.camouflageStill * 100}
-        </InfoWithDelta>
-        <InfoWithDelta indent name="Moving" decimals={0}>
-          {stats.camouflageMoving * 100}
-        </InfoWithDelta>
-        <InfoWithDelta indent name="Shooting still" decimals={0}>
-          {stats.camouflageShootingStill * 100}
-        </InfoWithDelta>
-        <InfoWithDelta indent name="Shooting moving" decimals={0}>
-          {stats.camouflageShootingMoving * 100}
-        </InfoWithDelta>
-        <InfoWithDelta indent name="Caught on fire" decimals={0}>
-          {stats.camouflageCaughtOnFire * 100}
-        </InfoWithDelta>
-        <Info name="Width" unit="m" decimals={0} deltaType="lowerIsBetter">
-          {stats.width}
-        </Info>
-        <Info name="Height" unit="m" decimals={0} deltaType="lowerIsBetter">
-          {stats.height}
-        </Info>
-        <Info name="Length" unit="m" decimals={0} deltaType="lowerIsBetter">
-          {stats.length}
-        </Info>
-        <Info name="Volume" unit="m" decimals={0} deltaType="lowerIsBetter">
-          {stats.volume}
-        </Info>
-      </Flex>
-
-      <Flex direction="column" gap="2">
-        <Flex gap="2" align="center">
-          <Heading size="5">Crew training</Heading>
-
-          <Popover.Root>
-            <Popover.Trigger>
-              <IconButton variant="ghost">
-                <InfoCircledIcon />
-              </IconButton>
-            </Popover.Trigger>
-
-            <Popover.Content>
-              <Flex gap="1" align="center">
-                <AccessibilityIcon />
-                <Text>represents the other roles a crew member can take.</Text>
-              </Flex>
-            </Popover.Content>
-          </Popover.Root>
-        </Flex>
-
-        {tank.crew.map((member) => {
-          const count = member.count ?? 1;
-
-          return (
-            <Fragment key={member.type}>
+          {typeof shell.penetration !== 'number' && (
+            <>
               <InfoWithDelta
-                key={`${member.type}-root`}
-                name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
-                unit="%"
+                indent
                 decimals={0}
+                name={`At ${penetrationDistance}m`}
               >
-                {(member.type === 'commander'
-                  ? commanderMastery
-                  : crewMemberMastery) * 100}
+                {lerp(
+                  shell.penetration[0],
+                  shell.penetration[1],
+                  (penetrationDistance *
+                    penetrationLossOverDistanceCoefficient) /
+                    500,
+                ) * penetrationCoefficient}
               </InfoWithDelta>
-              {member.substitute && (
-                <Info
-                  key={`${member.type}-substitute`}
-                  indent
-                  name={
-                    <>
-                      <Flex align="center" gap="1">
-                        <AccessibilityIcon />
-                        {member.substitute
-                          .map((sub, index) =>
-                            index === 0 ? CREW_MEMBER_NAMES[sub] : sub,
-                          )
-                          .join(', ')}
-                      </Flex>
-                    </>
-                  }
+              <Flex align="center" gap="2" style={{ paddingLeft: 24 }}>
+                <Text color="gray">Distance</Text>
+                <Slider
+                  key={penetrationDistance}
+                  min={0}
+                  max={500}
+                  style={{ flex: 1 }}
+                  defaultValue={[penetrationDistance]}
+                  onValueChange={debounce(([value]) => {
+                    setPenetrationDistance(value);
+                  }, 500)}
                 />
-              )}
-            </Fragment>
-          );
-        })}
+                <TextField.Root
+                  style={{ width: 64 }}
+                  ref={penetrationDistanceInput}
+                  defaultValue={penetrationDistance}
+                  onBlur={() => {
+                    setPenetrationDistance(
+                      Math.min(
+                        parseInt(penetrationDistanceInput.current!.value),
+                        500,
+                      ),
+                    );
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.currentTarget.blur();
+                    }
+                  }}
+                >
+                  <TextField.Slot side="right">m</TextField.Slot>
+                </TextField.Root>
+              </Flex>
+            </>
+          )}
+          <InfoWithDelta name="Damage" unit="hp" decimals={0}>
+            {stats.damage}
+          </InfoWithDelta>
+          <InfoWithDelta name="Module damage" unit="hp" decimals={0}>
+            {stats.moduleDamage}
+          </InfoWithDelta>
+          {isExplosive(shell.type) && (
+            <InfoWithDelta name="Splash radius" unit="m" decimals={0}>
+              {stats.explosionRadius!}
+            </InfoWithDelta>
+          )}
+          <InfoWithDelta name="Caliber" decimals={0} unit="mm">
+            {stats.caliber}
+          </InfoWithDelta>
+          <InfoWithDelta name="Normalization" decimals={0} unit="°">
+            {stats.shellNormalization}
+          </InfoWithDelta>
+          {!isExplosive(shell.type) && (
+            <InfoWithDelta
+              name="Ricochet"
+              decimals={0}
+              deltaType="lowerIsBetter"
+              unit="°"
+            >
+              {stats.shellRicochet!}
+            </InfoWithDelta>
+          )}
+          <InfoWithDelta name="Shell velocity" unit="m/s" decimals={0}>
+            {stats.shellVelocity}
+          </InfoWithDelta>
+          <InfoWithDelta
+            decimals={2}
+            name="Aim time"
+            unit="s"
+            deltaType="lowerIsBetter"
+          >
+            {stats.aimTime}
+          </InfoWithDelta>
+          <Info name="Dispersion at 100m" />
+          <InfoWithDelta
+            decimals={3}
+            indent
+            name="Still"
+            unit="m"
+            deltaType="lowerIsBetter"
+          >
+            {stats.dispersion}
+          </InfoWithDelta>
+          <InfoWithDelta
+            prefix="+ "
+            decimals={3}
+            indent
+            name="Moving"
+            deltaType="lowerIsBetter"
+          >
+            {stats.dispersionMoving}
+          </InfoWithDelta>
+          <InfoWithDelta
+            decimals={3}
+            prefix="+ "
+            indent
+            name="Hull traversing"
+            deltaType="lowerIsBetter"
+          >
+            {stats.dispersionHullTraversing}
+          </InfoWithDelta>
+          <InfoWithDelta
+            decimals={3}
+            prefix="+ "
+            indent
+            name="Turret traversing"
+            deltaType="lowerIsBetter"
+          >
+            {stats.dispersionTurretTraversing}
+          </InfoWithDelta>
+          <InfoWithDelta
+            decimals={3}
+            prefix="+ "
+            indent
+            name="After shooting"
+            deltaType="lowerIsBetter"
+          >
+            {stats.dispersionShooting}
+          </InfoWithDelta>
+          <InfoWithDelta
+            decimals={1}
+            prefix="x "
+            indent
+            name="Gun damaged"
+            unit="scalar"
+            deltaType="lowerIsBetter"
+          >
+            {stats.dispersionGunDamaged}
+          </InfoWithDelta>
+          <Info name="Gun flexibility" unit="°" />
+          <InfoWithDelta decimals={1} indent name="Depression">
+            {stats.gunDepression}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={1} indent name="Elevation">
+            {stats.gunElevation}
+          </InfoWithDelta>
+          {gunModelDefinition.pitch.front && (
+            <>
+              <InfoWithDelta decimals={1} indent name="Frontal depression">
+                {stats.gunFrontalDepression!}
+              </InfoWithDelta>
+              <InfoWithDelta decimals={1} indent name="Frontal elevation">
+                {stats.gunFrontalElevation!}
+              </InfoWithDelta>
+            </>
+          )}
+          {gunModelDefinition.pitch.back && (
+            <>
+              <InfoWithDelta decimals={1} indent name="Rear depression">
+                {stats.gunRearDepression!}
+              </InfoWithDelta>
+              <InfoWithDelta decimals={1} indent name="Rear elevation">
+                {stats.gunRearElevation!}
+              </InfoWithDelta>
+            </>
+          )}
+          {turretModelDefinition.yaw && (
+            <>
+              <InfoWithDelta decimals={1} indent name="Azimuth left">
+                {stats.azimuthLeft!}
+              </InfoWithDelta>
+              <InfoWithDelta decimals={1} indent name="Azimuth right">
+                {stats.azimuthRight!}
+              </InfoWithDelta>
+            </>
+          )}
+        </Flex>
+        <Flex direction="column" gap="2">
+          <Flex gap="2" align="center">
+            <Heading size="5">Crew training</Heading>
+
+            <Popover.Root>
+              <Popover.Trigger>
+                <IconButton variant="ghost">
+                  <InfoCircledIcon />
+                </IconButton>
+              </Popover.Trigger>
+
+              <Popover.Content>
+                <Flex gap="1" align="center">
+                  <AccessibilityIcon />
+                  <Text>
+                    represents the other roles a crew member can take.
+                  </Text>
+                </Flex>
+              </Popover.Content>
+            </Popover.Root>
+          </Flex>
+
+          {tank.crew.map((member) => {
+            const count = member.count ?? 1;
+
+            return (
+              <Fragment key={member.type}>
+                <InfoWithDelta
+                  key={`${member.type}-root`}
+                  name={`${CREW_MEMBER_NAMES[member.type]}${count > 1 ? ` x ${count}` : ''}`}
+                  unit="%"
+                  decimals={0}
+                >
+                  {(member.type === 'commander'
+                    ? commanderMastery
+                    : crewMemberMastery) * 100}
+                </InfoWithDelta>
+                {member.substitute && (
+                  <Info
+                    key={`${member.type}-substitute`}
+                    indent
+                    name={
+                      <>
+                        <Flex align="center" gap="1">
+                          <AccessibilityIcon />
+                          {member.substitute
+                            .map((sub, index) =>
+                              index === 0 ? CREW_MEMBER_NAMES[sub] : sub,
+                            )
+                            .join(', ')}
+                        </Flex>
+                      </>
+                    }
+                  />
+                )}
+              </Fragment>
+            );
+          })}
+        </Flex>
+      </Flex>
+
+      <Flex direction="column" gap="8" style={{ flex: 1 }}>
+        <Flex direction="column" gap="2">
+          <Heading size="5">Maneuverability</Heading>
+          <Info name="Speed" unit="km/hr" />
+          <InfoWithDelta decimals={0} indent name="Forwards">
+            {stats.speedForwards}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={0} indent name="Backwards">
+            {stats.speedBackwards}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={0} name="Engine power" unit="hp">
+            {stats.enginePower}
+          </InfoWithDelta>
+          <InfoWithDelta
+            decimals={1}
+            name="Weight"
+            unit="tn"
+            deltaType="lowerIsBetter"
+          >
+            {stats.weight}
+          </InfoWithDelta>
+          <Info name="Power to weight ratio" unit="hp/tn" />
+          <InfoWithDelta decimals={1} indent name="On hard terrain">
+            {stats.powerToWeightRatioHardTerrain}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={1} indent name="On medium terrain">
+            {stats.powerToWeightRatioMediumTerrain}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={1} indent name="On soft terrain">
+            {stats.powerToWeightRatioSoftTerrain}
+          </InfoWithDelta>
+          <InfoWithDelta name="Turret traverse speed" unit="°/s" decimals={1}>
+            {stats.turretTraverseSpeed}
+          </InfoWithDelta>
+          <Info name="Hull traverse speed" unit="°/s" />
+          <InfoWithDelta decimals={1} indent name="On hard terrain">
+            {stats.hullTraverseHardTerrain}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={1} indent name="On medium terrain">
+            {stats.hullTraverseMediumTerrain}
+          </InfoWithDelta>
+          <InfoWithDelta decimals={1} indent name="On soft terrain">
+            {stats.hullTraverseSoftTerrain}
+          </InfoWithDelta>
+        </Flex>
+        <Flex direction="column" gap="2">
+          <Heading size="5">Survivability</Heading>
+          <InfoWithDelta name="Health" unit="hp" decimals={0}>
+            {stats.health}
+          </InfoWithDelta>
+          <InfoWithDelta
+            name="Fire chance"
+            unit="%"
+            deltaType="lowerIsBetter"
+            decimals={0}
+          >
+            {stats.fireChance * 100}
+          </InfoWithDelta>
+          <InfoWithDelta name="View range" unit="m" decimals={0}>
+            {stats.viewRange}
+          </InfoWithDelta>
+          <Info name="Camouflage" unit="%" />
+          <InfoWithDelta indent name="Still" decimals={0}>
+            {stats.camouflageStill * 100}
+          </InfoWithDelta>
+          <InfoWithDelta indent name="Moving" decimals={0}>
+            {stats.camouflageMoving * 100}
+          </InfoWithDelta>
+          <InfoWithDelta indent name="Shooting still" decimals={0}>
+            {stats.camouflageShootingStill * 100}
+          </InfoWithDelta>
+          <InfoWithDelta indent name="Shooting moving" decimals={0}>
+            {stats.camouflageShootingMoving * 100}
+          </InfoWithDelta>
+          <InfoWithDelta indent name="Caught on fire" decimals={0}>
+            {stats.camouflageCaughtOnFire * 100}
+          </InfoWithDelta>
+          <Info name="Width" unit="m" decimals={0} deltaType="lowerIsBetter">
+            {stats.width}
+          </Info>
+          <Info name="Height" unit="m" decimals={0} deltaType="lowerIsBetter">
+            {stats.height}
+          </Info>
+          <Info name="Length" unit="m" decimals={0} deltaType="lowerIsBetter">
+            {stats.length}
+          </Info>
+          <Info name="Volume" unit="m" decimals={0} deltaType="lowerIsBetter">
+            {stats.volume}
+          </Info>
+        </Flex>
       </Flex>
     </Flex>
   );

src/app/tools/tankopedia/[id]/components/Control.tsx

@@ -1,6 +1,6 @@
 import { OrbitControls } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
 import { applyPitchYawLimits } from '../../../../../core/blitz/applyPitchYawLimits';
@@ -19,6 +19,7 @@ const poseDistances: Record<Pose, number> = {
 
 export function Controls() {
   const camera = useThree((state) => state.camera);
+  const canvas = useThree((state) => state.gl.domElement);
   const orbitControls = useRef<OrbitControlsClass>(null);
   const awaitedModelDefinitions = useAwait(modelDefinitions);
   const protagonist = useDuel((state) => state.protagonist!);
@@ -53,7 +54,7 @@ export function Controls() {
     protagonistTrackModelDefinition.origin[1] +
     antagonistModelDefinition.turretOrigin[1] +
     antagonistTurretModelDefinition.gunOrigin[1];
-  // const hasSetInitialPose = useRef(false);
+  const [autoRotate, setAutoRotate] = useState(true);
 
   useEffect(() => {
     camera.position.set(-4, 4, -16);
@@ -162,6 +163,20 @@ export function Controls() {
     };
   }, [camera, protagonist.tank.id, antagonist.tank.id]);
 
+  useEffect(() => {
+    function handleDisturbance() {
+      setAutoRotate(false);
+    }
+
+    poseEvent.on(handleDisturbance);
+    canvas.addEventListener('pointerdown', handleDisturbance);
+
+    return () => {
+      canvas.removeEventListener('pointerdown', handleDisturbance);
+      poseEvent.off(handleDisturbance);
+    };
+  }, []);
+
   return (
     <OrbitControls
       maxDistance={20}
@@ -170,6 +185,8 @@ export function Controls() {
       enabled={useTankopediaPersistent.getState().model.visual.controlsEnabled}
       rotateSpeed={0.25}
       enableDamping={false}
+      autoRotate={autoRotate}
+      autoRotateSpeed={1 / 4}
     />
   );
 }

src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx

@@ -0,0 +1,54 @@
+import { Flex, Heading } from '@radix-ui/themes';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
+import { Characteristics } from '../Characteristics';
+import { Consumables } from '../Characteristics/components/Consumables';
+import { Equipment } from '../Characteristics/components/Equipment';
+import { Miscellaneous } from '../Characteristics/components/Miscellaneous';
+import { Modules } from '../Characteristics/components/Modules';
+import { Provisions } from '../Characteristics/components/Provisions';
+import { Skills } from '../Characteristics/components/Skills';
+
+export function CharacteristicsSection() {
+  const wideFormat = useWideFormat(880);
+
+  return (
+    <Flex
+      align="center"
+      px="4"
+      style={{
+        boxSizing: 'border-box',
+      }}
+      direction={wideFormat ? 'row' : 'column'}
+    >
+      <Flex
+        gap="6"
+        style={{ width: '100%' }}
+        direction={wideFormat ? 'row' : 'column'}
+        justify="center"
+      >
+        <Flex direction="column" gap="4">
+          <Heading>Configuration</Heading>
+          <Modules />
+          <Equipment />
+          <Provisions />
+          <Consumables />
+          <Skills />
+          <Miscellaneous />
+        </Flex>
+
+        <Flex
+          style={{
+            flex: 1,
+            maxWidth: wideFormat ? 640 : undefined,
+            minWidth: 320,
+          }}
+          direction="column"
+          gap="4"
+        >
+          <Heading>Characteristics</Heading>
+          <Characteristics />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -0,0 +1,125 @@
+import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
+import { Button, Flex, Heading, Text } from '@radix-ui/themes';
+import Link from 'next/link';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useFullScreen } from '../../../../../../hooks/useFullScreen';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
+import strings from '../../../../../../lang/en-US.json';
+import { theme } from '../../../../../../stitches.config';
+import { useDuel } from '../../../../../../stores/duel';
+import { TankSandbox } from './TankSandbox';
+import { Options } from './components/Options';
+
+export function HeroSection() {
+  const protagonistTank = useDuel((state) => state.protagonist!.tank);
+  const antagonistTank = useDuel((state) => state.antagonist!.tank);
+  const wideFormat = useWideFormat(880);
+  const compareTanks =
+    protagonistTank.id === antagonistTank.id
+      ? [protagonistTank.id]
+      : [protagonistTank.id, antagonistTank.id];
+  const isFullScreen = useFullScreen();
+
+  return (
+    <Flex
+      justify="center"
+      pt={wideFormat ? '0' : '6'}
+      style={{
+        background: 'var(--color-surface)',
+        position: 'relative',
+        height: wideFormat ? undefined : 'calc(75vh - 64px)',
+      }}
+      gap="4"
+    >
+      <Flex
+        direction={wideFormat ? 'row' : 'column'}
+        style={{
+          maxWidth: 1600,
+          flex: 1,
+        }}
+      >
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            flex: wideFormat ? 1 : undefined,
+          }}
+        >
+          <Flex
+            gap={wideFormat ? '4' : '2'}
+            direction="column"
+            ml={wideFormat ? '8' : undefined}
+            align={wideFormat ? undefined : 'center'}
+            justify="center"
+            style={{
+              height: '100%',
+            }}
+          >
+            <Heading size={wideFormat ? '9' : '8'}>
+              {protagonistTank.name}
+            </Heading>
+
+            <Text color="gray">
+              Tier {TIER_ROMAN_NUMERALS[protagonistTank.tier]}{' '}
+              {
+                (strings.common.nations_adjectives as Record<string, string>)[
+                  protagonistTank.nation
+                ]
+              }{' '}
+              {strings.common.tank_class_short[protagonistTank.class]}
+            </Text>
+
+            <Flex gap="4" mt="-1">
+              <Link href="/tools/tankopedia">
+                <Button variant="ghost" size="1" ml="-1">
+                  <ChevronLeftIcon />
+                  Back
+                </Button>
+              </Link>
+
+              <Link href={`/tools/compare?tanks=${compareTanks.join('%2C')}`}>
+                <Button variant="ghost" size="1">
+                  <MixIcon />
+                  Compare
+                </Button>
+              </Link>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        <div
+          className="tank-sandbox-container"
+          style={{
+            flex: 2,
+            position: isFullScreen ? 'fixed' : 'relative',
+            top: isFullScreen ? 0 : undefined,
+            left: isFullScreen ? 0 : undefined,
+            width: isFullScreen ? '100vw' : undefined,
+            height: isFullScreen ? '100vh' : wideFormat ? 512 : undefined,
+            zIndex: isFullScreen ? 3 : undefined,
+            background: isFullScreen ? theme.colors.appBackground1 : undefined,
+          }}
+        >
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              position: 'absolute',
+            }}
+          >
+            <div
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+            >
+              <TankSandbox />
+            </div>
+
+            <Options />
+          </div>
+        </div>
+      </Flex>
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -1,50 +1,29 @@
-import { LightningBoltIcon } from '@radix-ui/react-icons';
-import { Button, Card, Flex, Tabs, Text, Theme } from '@radix-ui/themes';
 import { PerspectiveCamera } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
-import { Suspense, use, useEffect, useRef, useState } from 'react';
-import { isMobile } from 'react-device-detect';
+import { Suspense, use, useEffect, useRef } from 'react';
 import { Armor } from '../../../../../../components/Armor';
-import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
 import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
 import { Pose, poseEvent } from '../../../../../../core/blitzkit/pose';
-import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
-import { useFullScreen } from '../../../../../../hooks/useFullScreen';
-import { useWideFormat } from '../../../../../../hooks/useWideFormat';
-import { BlitzkitWide } from '../../../../../../icons/BlitzkitWide';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
-import mutateTankopediaPersistent, {
-  TankopediaMode,
-  mutateTankopediaTemporary,
-  useTankopediaPersistent,
-} from '../../../../../../stores/tankopedia';
-import { AntagonistBar } from '../AntagonistBar';
+import { mutateTankopediaTemporary } from '../../../../../../stores/tankopedia';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
-import { RotationInputs } from '../QuickInputs';
 import { SceneProps } from '../SceneProps';
 import { ModelLoader } from './components/ModelLoader';
-import { Options } from './components/Options';
 import { TankModel } from './components/TankModel';
 
 export function TankSandbox() {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment(122);
   const awaitedModelDefinitions = use(modelDefinitions);
-  const canvasWrapper = useRef<HTMLDivElement>(null);
-  const mode = useTankopediaPersistent((state) => state.mode);
   const protagonist = useDuel((state) => state.protagonist!);
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
-  const wideFormat = useWideFormat();
-  const [loadModel, setLoadModel] = useState(wideFormat || !isMobile);
-  const duel = useDuel();
-  const isFullScreen = useFullScreen();
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
@@ -138,137 +117,32 @@ export function TankSandbox() {
   }, [protagonist.gun, protagonist.turret]);
 
   return (
-    <Theme radius={isFullScreen ? 'none' : undefined}>
-      <Card
-        style={{
-          position: isFullScreen ? 'fixed' : 'relative',
-          border: isFullScreen ? 'none' : 'unset',
-          width: isFullScreen ? '100vw' : 'unset',
-          height: isFullScreen ? 'calc(100vh)' : 'unset',
-          top: isFullScreen ? 0 : 'unset',
-          left: isFullScreen ? 0 : 'unset',
-          zIndex: isFullScreen ? 2 : 'unset',
-        }}
-        ref={canvasWrapper}
-      >
-        <Flex
-          style={{
-            height: isFullScreen ? '100%' : '75vh',
-            maxHeight: isFullScreen ? 'unset' : 576,
-          }}
-          direction="column"
-          gap="2"
-        >
-          <Tabs.Root
-            value={mode}
-            onValueChange={(mode) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.mode = mode as TankopediaMode;
-              });
-            }}
-          >
-            <Tabs.List>
-              <Tabs.Trigger value="model">
-                <Flex gap="2" align="center">
-                  Model
-                </Flex>
-              </Tabs.Trigger>
-              <Tabs.Trigger value="armor">Armor</Tabs.Trigger>
-            </Tabs.List>
-          </Tabs.Root>
+    <Canvas
+      gl={{
+        clippingPlanes: Object.freeze([]),
+        localClippingEnabled: true,
+      }}
+      shadows
+      ref={canvas}
+      onPointerDown={handlePointerDown}
+      onPointerMissed={() => {
+        mutateTankopediaTemporary((draft) => {
+          draft.shot = undefined;
+        });
+      }}
+      style={{
+        userSelect: 'none',
+      }}
+    >
+      <PerspectiveCamera makeDefault fov={25} far={32} />
+      <Controls />
+      <SceneProps />
 
-          {wideFormat && (
-            <Text
-              color="gray"
-              style={{
-                position: 'absolute',
-                left: '50%',
-                top: 16,
-              }}
-            >
-              <BlitzkitWide height={32} />
-            </Text>
-          )}
-
-          <div
-            style={{
-              height: 'calc(100% - 64px)',
-              position: 'absolute',
-              width: '100%',
-              bottom: 0,
-            }}
-          >
-            {loadModel ? (
-              <div style={{ width: '100%', height: '100%' }}>
-                <Canvas
-                  gl={{
-                    clippingPlanes: Object.freeze([]),
-                    localClippingEnabled: true,
-                  }}
-                  shadows
-                  ref={canvas}
-                  onPointerDown={handlePointerDown}
-                  onPointerMissed={() => {
-                    mutateTankopediaTemporary((draft) => {
-                      draft.shot = undefined;
-                    });
-                  }}
-                >
-                  <PerspectiveCamera makeDefault fov={25} far={32} />
-                  <Controls />
-                  <SceneProps />
-
-                  <Suspense fallback={<ModelLoader />}>
-                    <Lighting />
-                    <TankModel />
-                    <Armor />
-                    <ShotDisplay />
-                  </Suspense>
-                </Canvas>
-              </div>
-            ) : (
-              <Flex
-                align="center"
-                justify="center"
-                style={{ height: '100%', position: 'relative' }}
-              >
-                <Button
-                  style={{
-                    zIndex: 1,
-                  }}
-                  onClick={() => {
-                    setLoadModel(true);
-                  }}
-                >
-                  <LightningBoltIcon /> Load model
-                </Button>
-
-                <Flex
-                  style={{
-                    filter: 'blur(16px)',
-                    width: 256,
-                    height: 128,
-                    display: 'flex',
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transformOrigin: 'center center',
-                    transform: 'translate(25%, -25%) scale(300%)',
-                  }}
-                >
-                  <img src={tankIcon(duel.antagonist!.tank.id, 'big')} />
-                </Flex>
-              </Flex>
-            )}
-          </div>
-
-          <Options canvasWrapper={canvasWrapper} isFullScreen={isFullScreen} />
-
-          {isFullScreen && <AntagonistBar floating />}
-
-          {loadModel && <RotationInputs isFullScreen={isFullScreen} />}
-        </Flex>
-      </Card>
-    </Theme>
+      <Suspense fallback={<ModelLoader />}>
+        <Lighting />
+        <TankModel />
+        <Armor />
+      </Suspense>
+    </Canvas>
   );
 }

src/app/tools/tankopedia/[id]/components/Model/TankopediaPlug.tsx

@@ -0,0 +1,30 @@
+import { Flex, Link, Text } from '@radix-ui/themes';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { PatreonIcon } from '../../../../../../icons/Patreon';
+
+export function TankopediaPlug() {
+  return (
+    <PageWrapper>
+      <Flex justify="center">
+        <Text>
+          Liking BlitzKit? Consider donating on{' '}
+          <Link
+            href="https://www.patreon.com/tresabhi"
+            target="_blank"
+            underline="hover"
+          >
+            <PatreonIcon
+              style={{
+                width: '1em',
+                height: '1em',
+                transform: 'translateY(12.5%)',
+              }}
+            />{' '}
+            Patreon
+          </Link>
+          .
+        </Text>
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Model/TechTreeSection.tsx

@@ -0,0 +1,220 @@
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import { ChevronDownIcon, Flex, Text } from '@radix-ui/themes';
+import Link from 'next/link';
+import { ComponentProps, use } from 'react';
+import PageWrapper from '../../../../../../components/PageWrapper';
+import { asset } from '../../../../../../core/blitzkit/asset';
+import { tankDefinitions } from '../../../../../../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useWideFormat } from '../../../../../../hooks/useWideFormat';
+import { useDuel } from '../../../../../../stores/duel';
+
+export function TreeArrow({
+  style,
+  down = false,
+  ...props
+}: ComponentProps<typeof Text> & { down?: boolean }) {
+  const Icon = down ? ChevronDownIcon : ChevronRightIcon;
+
+  return (
+    <Text
+      color="gray"
+      style={{
+        flex: 1,
+        ...style,
+      }}
+      {...props}
+    >
+      <Flex
+        style={{
+          backgroundColor: 'currentcolor',
+          height: down ? '100%' : 1,
+          width: down ? 1 : '100%',
+          position: 'relative',
+        }}
+        direction={down ? 'column' : 'row'}
+        justify="end"
+      >
+        <Icon
+          style={{
+            position: 'absolute',
+            right: down ? undefined : 0,
+            top: down ? undefined : '50%',
+            bottom: down ? 0 : undefined,
+            left: down ? '50%' : undefined,
+            transform: down ? 'translate(-50%, 2px)' : 'translate(5px, -50%)',
+          }}
+        />
+      </Flex>
+    </Text>
+  );
+}
+
+export function TechTreeSection() {
+  const wideFormat = useWideFormat(720);
+  const awaitedTankDefinitions = use(tankDefinitions);
+  const tank = useDuel((state) => state.protagonist!.tank);
+
+  if (tank.treeType !== 'researchable') return null;
+
+  function Card({ id }: { id: number }) {
+    const ancestor = awaitedTankDefinitions[id];
+
+    return (
+      <Link
+        href={`/tools/tankopedia/${id}`}
+        key={id}
+        style={{
+          textDecoration: 'none',
+          color: 'inherit',
+          position: 'relative',
+        }}
+      >
+        <Flex direction="column" align="center">
+          <img
+            alt={ancestor.name}
+            src={asset(`icons/tanks/big/${id}.webp`)}
+            width={64}
+            height={64}
+            style={{
+              objectFit: 'contain',
+            }}
+          />
+
+          <Flex direction="column" align="center">
+            <Flex gap="2" align="center">
+              <Text color="gray" size="1">
+                {TIER_ROMAN_NUMERALS[ancestor.tier]}
+              </Text>
+              <Text>{ancestor.name}</Text>
+            </Flex>
+
+            <Flex gap="2" align="center">
+              <Flex gap="1" align="center">
+                <img
+                  alt="XP"
+                  src={asset('icons/currencies/xp.webp')}
+                  width={16}
+                  height={16}
+                  style={{
+                    objectFit: 'contain',
+                  }}
+                />
+                <Text color="gray" size="1">
+                  {ancestor.xp?.toLocaleString()}
+                </Text>
+              </Flex>
+
+              <Flex gap="1" align="center">
+                <img
+                  alt="Silver"
+                  src={asset('icons/currencies/silver.webp')}
+                  width={16}
+                  height={16}
+                  style={{
+                    objectFit: 'contain',
+                  }}
+                />
+                <Text color="gray" size="1">
+                  {ancestor.price.value?.toLocaleString()}
+                </Text>
+              </Flex>
+            </Flex>
+          </Flex>
+        </Flex>
+      </Link>
+    );
+  }
+
+  return (
+    <PageWrapper
+      noFlex1
+      containerProps={{
+        style: {
+          overflow: 'hidden',
+          marginTop: 16,
+          backgroundColor: 'var(--color-surface)',
+        },
+      }}
+      size={tank.ancestors && tank.successors ? 880 : 480}
+      gap="0"
+    >
+      {/* <Flex justify="center">
+        <Heading>Tech tree</Heading>
+      </Flex> */}
+
+      <Flex
+        align="center"
+        gap="6"
+        style={{}}
+        direction={wideFormat ? 'row' : 'column'}
+      >
+        {tank.ancestors && (
+          <>
+            <Flex
+              wrap="wrap"
+              direction={wideFormat ? 'column' : 'row'}
+              align="center"
+              justify="center"
+              style={{
+                maxHeight: 360,
+              }}
+              gap="4"
+            >
+              {tank.ancestors.map((id) => (
+                <Card key={id} id={id} />
+              ))}
+            </Flex>
+
+            <TreeArrow down={!wideFormat} />
+          </>
+        )}
+
+        <Flex
+          direction="column"
+          style={{
+            position: 'relative',
+          }}
+        >
+          <img
+            alt={tank.nation}
+            src={asset(`flags/scratched/${tank.nation}.webp`)}
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              height: '200%',
+              transform: 'translate(-40%, -50%)',
+              backgroundRepeat: 'no-repeat',
+              opacity: 1 / 4,
+              filter: 'blur(4px)',
+            }}
+          />
+
+          <Card id={tank.id} />
+        </Flex>
+
+        {tank.successors && (
+          <>
+            <TreeArrow down={!wideFormat} />
+
+            <Flex
+              wrap="wrap"
+              direction={wideFormat ? 'column' : 'row'}
+              align="center"
+              justify="center"
+              style={{
+                maxHeight: 360,
+              }}
+              gap="4"
+            >
+              {tank.successors.map((id) => (
+                <Card key={id} id={id} />
+              ))}
+            </Flex>
+          </>
+        )}
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx

@@ -1,12 +1,12 @@
+import { Progress } from '@radix-ui/themes';
 import { Html, useProgress } from '@react-three/drei';
-import { Loader } from '../../../../../../../components/Loader';
 
 export function ModelLoader() {
   const { progress } = useProgress();
 
   return (
     <Html center position={[0, 1.5, 0]}>
-      <Loader naked progress={progress / 100} />
+      <Progress value={progress} style={{ width: 160 }} />
     </Html>
   );
 }

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -1,25 +1,48 @@
 import {
+  Cross1Icon,
   EnterFullScreenIcon,
   ExitFullScreenIcon,
   EyeOpenIcon,
   GearIcon,
 } from '@radix-ui/react-icons';
-import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
-import { RefObject } from 'react';
+import {
+  Box,
+  Button,
+  Dialog,
+  DropdownMenu,
+  Flex,
+  Heading,
+  IconButton,
+  Strong,
+  Switch,
+  Tabs,
+  Text,
+} from '@radix-ui/themes';
+import { useState } from 'react';
+import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
+import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon';
+import { resolveNearPenetration } from '../../../../../../../core/blitz/resolveNearPenetration';
+import { asset } from '../../../../../../../core/blitzkit/asset';
 import { Pose, poseEvent } from '../../../../../../../core/blitzkit/pose';
+import {
+  SHELL_NAMES,
+  TIER_ROMAN_NUMERALS,
+} from '../../../../../../../core/blitzkit/tankDefinitions/constants';
+import { useEquipment } from '../../../../../../../hooks/useEquipment';
+import { useFullScreen } from '../../../../../../../hooks/useFullScreen';
 import { useApp } from '../../../../../../../stores/app';
+import { mutateDuel, useDuel } from '../../../../../../../stores/duel';
 import mutateTankopediaPersistent, {
   mutateTankopediaTemporary,
   useTankopediaPersistent,
 } from '../../../../../../../stores/tankopedia';
+import { TankSearch } from '../../../../components/TankSearch';
 import { ENVIRONMENTS } from '../../Lighting';
+import { RotationInputs } from '../../QuickInputs';
 
-interface OptionsProps {
-  isFullScreen: boolean;
-  canvasWrapper: RefObject<HTMLElement>;
-}
-
-export function Options({ isFullScreen }: OptionsProps) {
+export function Options() {
+  const mode = useTankopediaPersistent((state) => state.mode);
+  const isFullScreen = useFullScreen();
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
@@ -42,157 +65,506 @@ export function Options({ isFullScreen }: OptionsProps) {
     (state) => state.model.visual.environment,
   );
   const developerMode = useApp((state) => state.developerMode);
+  const antagonistGun = useDuel((state) => state.antagonist!.gun);
+  const antagonistShell = useDuel((state) => state.antagonist!.shell);
+  const [antagonistSelectorOpen, setAntagonistSelectorOpen] = useState(false);
+  const antagonistTank = useDuel((state) => state.antagonist!.tank);
+  const antagonistTurret = useDuel((state) => state.antagonist!.turret);
+  const hasCalibratedShells = useEquipment(103, true);
+  const [tab, setTab] = useState('search');
+  const hasEnhancedArmor = useEquipment(110);
 
   return (
-    <Flex
-      gap="4"
-      style={{
-        position: 'absolute',
-        top: 18,
-        right: 18,
-      }}
-    >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Button variant="ghost">
-            <EyeOpenIcon />
-          </Button>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Content>
-          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
-            Hull down
-          </DropdownMenu.Item>
-
-          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
-            Face hug
-          </DropdownMenu.Item>
-
-          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
-            Default
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
-
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Button variant="ghost">
-            <GearIcon />
-          </Button>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Content>
-          <DropdownMenu.Label>Armor</DropdownMenu.Label>
-
-          <DropdownMenu.CheckboxItem
-            checked={showSpacedArmor}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.showSpacedArmor = checked;
-              });
-              mutateTankopediaTemporary((draft) => {
-                draft.shot = undefined;
-              });
+    <>
+      {isFullScreen && (
+        <Box
+          pl="4"
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: '50%',
+            transform: 'translateY(-50%)',
+          }}
+        >
+          <Text
+            size={{
+              initial: '3',
+              xs: '5',
+            }}
+            color="gray"
+            style={{
+              writingMode: 'vertical-lr',
             }}
           >
-            Spaced armor
-          </DropdownMenu.CheckboxItem>
+            <Strong>BlitzKit</Strong> Tankopedia
+          </Text>
+        </Box>
+      )}
 
-          <DropdownMenu.CheckboxItem
-            checked={greenPenetration}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.greenPenetration = checked;
-              });
-            }}
-          >
-            Green penetration
-          </DropdownMenu.CheckboxItem>
+      <RotationInputs />
 
-          {developerMode && (
-            <DropdownMenu.CheckboxItem
-              checked={wireframe}
-              onCheckedChange={(checked) => {
-                mutateTankopediaPersistent((draft) => {
-                  draft.model.visual.wireframe = checked;
+      {mode === 'armor' && (
+        <Flex
+          gap="2"
+          direction="column"
+          style={{
+            position: 'absolute',
+            right: 16,
+            top: '50%',
+            transform: 'translateY(-50%)',
+          }}
+        >
+          <Flex direction="column">
+            {antagonistGun.shells.map((thisShell, shellIndex) => (
+              <IconButton
+                color={thisShell.id === antagonistShell.id ? undefined : 'gray'}
+                variant="soft"
+                key={thisShell.id}
+                size={{
+                  initial: '2',
+                  sm: '3',
+                }}
+                style={{
+                  borderTopLeftRadius: shellIndex === 0 ? undefined : 0,
+                  borderTopRightRadius: shellIndex === 0 ? undefined : 0,
+                  borderBottomRightRadius:
+                    shellIndex === antagonistGun.shells.length - 1
+                      ? undefined
+                      : 0,
+                  borderBottomLeftRadius:
+                    shellIndex === antagonistGun.shells.length - 1
+                      ? undefined
+                      : 0,
+                  marginTop: shellIndex === 0 ? 0 : -1,
+                }}
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.antagonist!.shell = thisShell;
+                  });
+                  mutateTankopediaTemporary((draft) => {
+                    draft.shot = undefined;
+                  });
+                }}
+              >
+                <img
+                  alt={thisShell.name}
+                  src={asset(`icons/shells/${thisShell.icon}.webp`)}
+                  style={{
+                    width: '50%',
+                    height: '50%',
+                  }}
+                />
+              </IconButton>
+            ))}
+          </Flex>
+
+          <Flex direction="column" style={{ pointerEvents: 'auto' }}>
+            <IconButton
+              color={hasCalibratedShells ? undefined : 'gray'}
+              variant="soft"
+              style={{
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+              }}
+              size={{
+                initial: '2',
+                sm: '3',
+              }}
+              onClick={() => {
+                mutateDuel((draft) => {
+                  draft.antagonist!.equipmentMatrix[0][0] = hasCalibratedShells
+                    ? 0
+                    : 1;
+                });
+                mutateTankopediaTemporary((draft) => {
+                  draft.shot = undefined;
                 });
               }}
             >
-              Wireframe
-            </DropdownMenu.CheckboxItem>
-          )}
+              <img
+                alt="Calibrated Shells"
+                src={asset('icons/equipment/103.webp')}
+                style={{
+                  width: '50%',
+                  height: '50%',
+                }}
+              />
+            </IconButton>
+            <IconButton
+              color={hasEnhancedArmor ? undefined : 'gray'}
+              variant="soft"
+              size={{
+                initial: '2',
+                sm: '3',
+              }}
+              style={{
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0,
+                marginTop: -1,
+              }}
+              onClick={() => {
+                mutateDuel((draft) => {
+                  draft.protagonist!.equipmentMatrix[1][1] = hasEnhancedArmor
+                    ? 0
+                    : -1;
+                });
+                mutateTankopediaTemporary((draft) => {
+                  draft.shot = undefined;
+                });
+              }}
+            >
+              <img
+                alt="Enhanced Armor"
+                src={asset('icons/equipment/110.webp')}
+                style={{
+                  width: '50%',
+                  height: '50%',
+                }}
+              />
+            </IconButton>
+          </Flex>
+        </Flex>
+      )}
 
-          <DropdownMenu.CheckboxItem
-            checked={opaque}
-            onCheckedChange={(checked) => {
+      <Flex
+        style={{
+          position: 'absolute',
+          bottom: 16,
+          left: '50%',
+          transform: 'translateX(-50%)',
+        }}
+        direction="column"
+        align="center"
+        gap="2"
+      >
+        {mode === 'armor' && (
+          <Flex align="center" gap="2">
+            <Text color="gray" size="2">
+              Shooter:
+            </Text>
+            <Dialog.Root
+              open={antagonistSelectorOpen}
+              onOpenChange={setAntagonistSelectorOpen}
+            >
+              <Dialog.Trigger>
+                <Button variant="ghost">
+                  <Flex gap="2" align="center">
+                    <SmallTankIcon id={antagonistTank.id} size={16} />
+                    {antagonistTank.name}
+                  </Flex>
+                </Button>
+              </Dialog.Trigger>
+
+              <Dialog.Content>
+                <Tabs.Root
+                  value={tab}
+                  onValueChange={setTab}
+                  style={{ position: 'relative' }}
+                >
+                  <Dialog.Close>
+                    <Button
+                      variant="ghost"
+                      style={{ position: 'absolute', right: 0, top: 8 }}
+                    >
+                      <Cross1Icon />
+                    </Button>
+                  </Dialog.Close>
+
+                  <Flex gap="4" direction="column">
+                    <Tabs.List>
+                      <Tabs.Trigger value="search">Search</Tabs.Trigger>
+                      <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="search">
+                      <Flex
+                        direction="column"
+                        gap="4"
+                        style={{ flex: 1 }}
+                        justify="center"
+                      >
+                        <TankSearch
+                          compact
+                          onSelect={(tank) => {
+                            mutateDuel((draft) => {
+                              draft.antagonist!.tank = tank;
+                              draft.antagonist!.engine = tank.engines.at(-1)!;
+                              draft.antagonist!.track = tank.tracks.at(-1)!;
+                              draft.antagonist!.turret = tank.turrets.at(-1)!;
+                              draft.antagonist!.gun =
+                                draft.antagonist!.turret.guns.at(-1)!;
+                              draft.antagonist!.shell =
+                                draft.antagonist!.gun.shells[0];
+                            });
+                            setAntagonistSelectorOpen(false);
+                          }}
+                        />
+                      </Flex>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="configure">
+                      <Flex direction="column" gap="4">
+                        <Flex direction="column" gap="2" style={{ flex: 1 }}>
+                          <Heading size="4">
+                            {antagonistTank.name} modules
+                          </Heading>
+
+                          <Flex gap="2" wrap="wrap">
+                            <Flex>
+                              {antagonistTank.turrets.map((turret, index) => (
+                                <ModuleButton
+                                  rowChild
+                                  first={index === 0}
+                                  last={
+                                    index === antagonistTank.turrets.length - 1
+                                  }
+                                  key={turret.id}
+                                  onClick={() => {
+                                    mutateDuel((draft) => {
+                                      draft.antagonist!.turret = turret;
+                                      draft.antagonist!.gun =
+                                        turret.guns.at(-1)!;
+                                      draft.antagonist!.shell =
+                                        draft.antagonist!.gun.shells[0];
+                                    });
+                                    mutateTankopediaTemporary((draft) => {
+                                      draft.shot = undefined;
+                                    });
+                                  }}
+                                  selected={antagonistTurret.id === turret.id}
+                                  discriminator={
+                                    TIER_ROMAN_NUMERALS[turret.tier]
+                                  }
+                                  module="turret"
+                                />
+                              ))}
+                            </Flex>
+                            <Flex>
+                              {antagonistTurret.guns.map((gun, index) => (
+                                <ModuleButton
+                                  key={gun.id}
+                                  rowChild
+                                  first={index === 0}
+                                  last={
+                                    index === antagonistTurret.guns.length - 1
+                                  }
+                                  onClick={() => {
+                                    mutateDuel((draft) => {
+                                      draft.antagonist!.gun = gun;
+                                      draft.antagonist!.shell = gun.shells[0];
+                                    });
+                                  }}
+                                  selected={antagonistGun.id === gun.id}
+                                  discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
+                                  module="gun"
+                                />
+                              ))}
+                            </Flex>
+                          </Flex>
+                        </Flex>
+
+                        <Flex direction="column" style={{ flex: 1 }}>
+                          <Heading size="4">Properties</Heading>
+
+                          <ul>
+                            <li>
+                              Turret: <b>{antagonistTurret.name}</b>
+                            </li>
+                            <li>
+                              Gun: <b>{antagonistGun.name}</b>
+                            </li>
+                            <li>Shells:</li>
+                            <ul>
+                              {antagonistGun.shells.map((shell) => (
+                                <li key={shell.id}>
+                                  {SHELL_NAMES[shell.type]}:{' '}
+                                  <b>
+                                    {resolveNearPenetration(shell.penetration)}
+                                    mm
+                                  </b>
+                                  , {shell.damage.armor}HP
+                                </li>
+                              ))}
+                            </ul>
+                          </ul>
+                        </Flex>
+                      </Flex>
+                    </Tabs.Content>
+                  </Flex>
+                </Tabs.Root>
+              </Dialog.Content>
+            </Dialog.Root>
+          </Flex>
+        )}
+
+        <Flex gap="3" align="center">
+          <Flex
+            style={{
+              cursor: 'default',
+              userSelect: 'none',
+            }}
+            align="center"
+            gap="2"
+            onClick={() => {
               mutateTankopediaPersistent((draft) => {
-                draft.model.visual.opaque = checked;
+                draft.mode = draft.mode === 'armor' ? 'model' : 'armor';
               });
             }}
+            mr="1"
           >
-            Opaque
-          </DropdownMenu.CheckboxItem>
+            <Switch size="1" checked={mode === 'armor'} />
+            Armor
+          </Flex>
 
-          <DropdownMenu.Label>Environment</DropdownMenu.Label>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <IconButton variant="ghost" color="gray">
+                <EyeOpenIcon />
+              </IconButton>
+            </DropdownMenu.Trigger>
 
-          <DropdownMenu.CheckboxItem
-            checked={showGrid}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.showGrid = checked;
-              });
-            }}
-          >
-            Show grid
-          </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Content>
+              <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
+                Hull down
+              </DropdownMenu.Item>
 
-          <DropdownMenu.CheckboxItem
-            checked={showEnvironment}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.showEnvironment = checked;
-              });
-            }}
-          >
-            View environment
-          </DropdownMenu.CheckboxItem>
+              <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
+                Face hug
+              </DropdownMenu.Item>
 
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
+              <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
+                Default
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
 
-            <DropdownMenu.SubContent>
-              <DropdownMenu.RadioGroup value={environment}>
-                {ENVIRONMENTS.map((environment) => (
-                  <DropdownMenu.RadioItem
-                    key={environment}
-                    value={environment}
-                    onClick={() => {
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <IconButton variant="ghost" color="gray">
+                <GearIcon />
+              </IconButton>
+            </DropdownMenu.Trigger>
+
+            <DropdownMenu.Content>
+              {mode === 'armor' && (
+                <>
+                  <DropdownMenu.Label>Armor</DropdownMenu.Label>
+
+                  <DropdownMenu.CheckboxItem
+                    checked={showSpacedArmor}
+                    onCheckedChange={(checked) => {
                       mutateTankopediaPersistent((draft) => {
-                        draft.model.visual.environment = environment;
+                        draft.model.visual.showSpacedArmor = checked;
+                      });
+                      mutateTankopediaTemporary((draft) => {
+                        draft.shot = undefined;
                       });
                     }}
                   >
-                    {environment[0].toUpperCase() + environment.slice(1)}
-                  </DropdownMenu.RadioItem>
-                ))}
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+                    Spaced armor
+                  </DropdownMenu.CheckboxItem>
 
-      {fullScreenAvailable && (
-        <Button
-          variant="ghost"
-          onClick={() => {
-            if (isFullScreen) {
-              document.exitFullscreen();
-            } else document.body.requestFullscreen();
-          }}
-        >
-          {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
-        </Button>
-      )}
-    </Flex>
+                  <DropdownMenu.CheckboxItem
+                    checked={greenPenetration}
+                    onCheckedChange={(checked) => {
+                      mutateTankopediaPersistent((draft) => {
+                        draft.model.visual.greenPenetration = checked;
+                      });
+                    }}
+                  >
+                    Green penetration
+                  </DropdownMenu.CheckboxItem>
+
+                  {developerMode && (
+                    <DropdownMenu.CheckboxItem
+                      checked={wireframe}
+                      onCheckedChange={(checked) => {
+                        mutateTankopediaPersistent((draft) => {
+                          draft.model.visual.wireframe = checked;
+                        });
+                      }}
+                    >
+                      Wireframe
+                    </DropdownMenu.CheckboxItem>
+                  )}
+
+                  <DropdownMenu.CheckboxItem
+                    checked={opaque}
+                    onCheckedChange={(checked) => {
+                      mutateTankopediaPersistent((draft) => {
+                        draft.model.visual.opaque = checked;
+                      });
+                    }}
+                  >
+                    Opaque
+                  </DropdownMenu.CheckboxItem>
+                </>
+              )}
+
+              <DropdownMenu.Label>Environment</DropdownMenu.Label>
+
+              <DropdownMenu.CheckboxItem
+                checked={showGrid}
+                onCheckedChange={(checked) => {
+                  mutateTankopediaPersistent((draft) => {
+                    draft.model.visual.showGrid = checked;
+                  });
+                }}
+              >
+                Show grid
+              </DropdownMenu.CheckboxItem>
+
+              <DropdownMenu.CheckboxItem
+                checked={showEnvironment}
+                onCheckedChange={(checked) => {
+                  mutateTankopediaPersistent((draft) => {
+                    draft.model.visual.showEnvironment = checked;
+                  });
+                }}
+              >
+                {/* TODO: consider removing this? */}
+                View environment
+              </DropdownMenu.CheckboxItem>
+
+              <DropdownMenu.Sub>
+                <DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
+
+                <DropdownMenu.SubContent>
+                  <DropdownMenu.RadioGroup value={environment}>
+                    {ENVIRONMENTS.map((environment) => (
+                      <DropdownMenu.RadioItem
+                        key={environment}
+                        value={environment}
+                        onClick={() => {
+                          mutateTankopediaPersistent((draft) => {
+                            draft.model.visual.environment = environment;
+                          });
+                        }}
+                      >
+                        {environment[0].toUpperCase() + environment.slice(1)}
+                      </DropdownMenu.RadioItem>
+                    ))}
+                  </DropdownMenu.RadioGroup>
+                </DropdownMenu.SubContent>
+              </DropdownMenu.Sub>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+
+          {fullScreenAvailable && (
+            <IconButton
+              color="gray"
+              variant="ghost"
+              onClick={() => {
+                if (isFullScreen) {
+                  document.exitFullscreen();
+                } else document.body.requestFullscreen();
+              }}
+            >
+              {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
+            </IconButton>
+          )}
+        </Flex>
+      </Flex>
+    </>
   );
 }

src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx

@@ -1,6 +1,6 @@
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { memo, useEffect, useRef } from 'react';
-import { Euler, Group, Vector3 } from 'three';
+import { Euler, Group, Vector2, Vector3 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
 import { I_HAT, J_HAT, K_HAT } from '../../../../../../../constants/axis';
 import { applyPitchYawLimits } from '../../../../../../../core/blitz/applyPitchYawLimits';
@@ -142,6 +142,8 @@ export const TankModel = memo(() => {
             node.name ===
             `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`;
           const isVisible = isCurrentTurret;
+          const position = new Vector2();
+          const delta = new Vector2();
 
           if (!isVisible) return null;
 
@@ -152,6 +154,7 @@ export const TankModel = memo(() => {
             event.stopPropagation();
 
             if (isTurret) {
+              position.set(event.clientX, event.clientY);
               yaw = protagonist.yaw;
               pitch = protagonist.pitch;
 
@@ -172,9 +175,14 @@ export const TankModel = memo(() => {
               duel.protagonist!.tank.equipment,
               duel.protagonist!.equipmentMatrix,
             );
+            const boundingRect = canvas.getBoundingClientRect();
+
+            delta.set(event.clientX, event.clientY).sub(position);
+            position.set(event.clientX, event.clientY);
+
             [pitch, yaw] = applyPitchYawLimits(
               pitch,
-              yaw + event.movementX * (Math.PI / canvas.width),
+              yaw + delta.x * (Math.PI / boundingRect.width),
               gunModelDefinition.pitch,
               turretModelDefinition.yaw,
               hasImprovedVerticalStabilizer,
@@ -215,6 +223,8 @@ export const TankModel = memo(() => {
               node.name ===
               `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
             const isVisible = isCurrentGun || isCurrentMantlet;
+            const position = new Vector2();
+            const delta = new Vector2();
 
             if (!isVisible) return null;
 
@@ -230,8 +240,11 @@ export const TankModel = memo(() => {
               mutateTankopediaTemporary((draft) => {
                 draft.shot = undefined;
               });
+
+              position.set(event.clientX, event.clientY);
               pitch = protagonist.pitch;
               yaw = protagonist.yaw;
+
               window.addEventListener('pointermove', handlePointerMove);
               window.addEventListener('pointerup', handlePointerUp);
             }
@@ -242,9 +255,13 @@ export const TankModel = memo(() => {
                 duel.protagonist!.tank.equipment,
                 duel.protagonist!.equipmentMatrix,
               );
+              const boundingRect = canvas.getBoundingClientRect();
+              delta.set(event.clientX, event.clientY).sub(position);
+              position.set(event.clientX, event.clientY);
+
               [pitch, yaw] = applyPitchYawLimits(
-                pitch - event.movementY * (Math.PI / canvas.height),
-                yaw + event.movementX * (Math.PI / canvas.width),
+                pitch - delta.y * (Math.PI / boundingRect.height),
+                yaw + delta.x * (Math.PI / boundingRect.width),
                 gunModelDefinition.pitch,
                 turretModelDefinition.yaw,
                 hasImprovedVerticalStabilizer,

src/app/tools/tankopedia/[id]/components/QuickInputs/components/QuickEquipmentButton.tsx

@@ -1,25 +0,0 @@
-import { Button } from '@radix-ui/themes';
-import { ComponentProps } from 'react';
-import { asset } from '../../../../../../../core/blitzkit/asset';
-
-interface QuickEquipmentButtonProps extends ComponentProps<typeof Button> {
-  equipment: number;
-  active: boolean;
-}
-
-export function QuickEquipmentButton({
-  equipment,
-  active,
-  ...props
-}: QuickEquipmentButtonProps) {
-  return (
-    <Button variant="ghost" {...props}>
-      <img
-        style={{ opacity: active ? 1 : 0.5 }}
-        src={asset(`icons/equipment/${equipment}.webp`)}
-        width={24}
-        height={24}
-      />
-    </Button>
-  );
-}

src/app/tools/tankopedia/[id]/components/QuickInputs/index.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'none',
+
+  selectors: {
+    '.tank-sandbox-container:hover &': {
+      display: 'flex',
+    },
+  },
+});

src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx

@@ -1,185 +1,169 @@
+import { HeightIcon, WidthIcon } from '@radix-ui/react-icons';
 import { Flex, TextField } from '@radix-ui/themes';
 import { use, useEffect, useRef } from 'react';
 import { degToRad, radToDeg } from 'three/src/math/MathUtils';
 import { applyPitchYawLimits } from '../../../../../../core/blitz/applyPitchYawLimits';
 import { modelDefinitions } from '../../../../../../core/blitzkit/modelDefinitions';
-import { modelTransformEvent } from '../../../../../../core/blitzkit/modelTransform';
+import {
+  modelTransformEvent,
+  ModelTransformEventData,
+} from '../../../../../../core/blitzkit/modelTransform';
 import { useEquipment } from '../../../../../../hooks/useEquipment';
+import { useFullScreen } from '../../../../../../hooks/useFullScreen';
 import { mutateDuel, useDuel } from '../../../../../../stores/duel';
-import { useTankopediaPersistent } from '../../../../../../stores/tankopedia';
-import { QuickEquipmentButton } from './components/QuickEquipmentButton';
+import * as styles from './index.css';
 
-interface RotationInputsProps {
-  isFullScreen?: boolean;
-}
-
-export function RotationInputs({ isFullScreen }: RotationInputsProps) {
+export function RotationInputs() {
   const protagonist = useDuel((state) => state.protagonist!);
   const awaitedModelDefinitions = use(modelDefinitions);
-  const turretYawInput = useRef<HTMLInputElement>(null);
-  const gunPitchInput = useRef<HTMLInputElement>(null);
-  const mode = useTankopediaPersistent((state) => state.mode);
-  const hasCalibratedShells = useEquipment(103, true);
-  const hasEnhancedArmor = useEquipment(110);
+  const yawInput = useRef<HTMLInputElement>(null);
+  const pitchInput = useRef<HTMLInputElement>(null);
   const tankModelDefinition = awaitedModelDefinitions[protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
   const initialGunPitch = tankModelDefinition.turretRotation?.pitch ?? 0;
   const hasImprovedVerticalStabilizer = useEquipment(122);
+  const isFullScreen = useFullScreen();
 
   useEffect(() => {
-    turretYawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+    yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
   }, [protagonist.yaw]);
   useEffect(() => {
-    gunPitchInput.current!.value = (
+    pitchInput.current!.value = (
       -radToDeg(protagonist.pitch) + initialGunPitch
     ).toFixed(1);
   }, [protagonist.pitch]);
+  useEffect(() => {
+    function handleTransformEvent({ pitch, yaw }: ModelTransformEventData) {
+      if (!pitchInput.current || !yawInput.current) return;
+
+      pitchInput.current.value = (-radToDeg(pitch)).toFixed(1);
+
+      if (yaw === undefined) return;
+
+      yawInput.current.value = radToDeg(yaw).toFixed(1);
+    }
+
+    modelTransformEvent.on(handleTransformEvent);
+
+    return () => {
+      modelTransformEvent.off(handleTransformEvent);
+    };
+  }, []);
 
   return (
     <Flex
-      justify="center"
-      align="center"
+      className={isFullScreen ? undefined : styles.container}
+      gap="2"
       style={{
-        width: 'calc(100% - 16px)',
+        width: 128 + 32,
+        pointerEvents: 'auto',
         position: 'absolute',
-        left: 8,
-        bottom: isFullScreen ? 80 : 8,
-        pointerEvents: 'none',
+        left: '50%',
+        top: 16,
+        transform: 'translateX(-50%)',
       }}
-      gap="4"
     >
-      <Flex gap="2" style={{ width: 256, pointerEvents: 'auto' }}>
-        <TextField.Root
-          radius="full"
+      <TextField.Root
+        size="1"
+        radius="full"
+        style={{
+          flex: 1,
+          textAlign: 'right',
+        }}
+        onBlur={() => {
+          const value = Number(yawInput.current!.value);
+          if (isNaN(value)) {
+            yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+            return;
+          }
+          const [pitch, yaw] = applyPitchYawLimits(
+            protagonist.pitch,
+            degToRad(value),
+            gunModelDefinition.pitch,
+            turretModelDefinition.yaw,
+            hasImprovedVerticalStabilizer,
+          );
+          modelTransformEvent.emit({ pitch, yaw });
+          mutateDuel((state) => {
+            state.protagonist!.pitch = pitch;
+            state.protagonist!.yaw = yaw;
+          });
+          yawInput.current!.value = radToDeg(protagonist.yaw).toFixed(1);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            yawInput.current?.blur();
+          }
+        }}
+        onFocus={() => yawInput.current?.focus()}
+        ref={yawInput}
+      >
+        <TextField.Slot
           style={{
-            flex: 1,
-            textAlign: 'right',
+            userSelect: 'none',
           }}
-          onBlur={() => {
-            const value = Number(turretYawInput.current!.value);
-            if (isNaN(value)) {
-              turretYawInput.current!.value = radToDeg(protagonist.yaw).toFixed(
-                1,
-              );
-              return;
-            }
-            const [pitch, yaw] = applyPitchYawLimits(
-              protagonist.pitch,
-              degToRad(value),
-              gunModelDefinition.pitch,
-              turretModelDefinition.yaw,
-              hasImprovedVerticalStabilizer,
-            );
-            modelTransformEvent.emit({ pitch, yaw });
-            mutateDuel((state) => {
-              state.protagonist!.pitch = pitch;
-              state.protagonist!.yaw = yaw;
-            });
-            turretYawInput.current!.value = radToDeg(protagonist.yaw).toFixed(
-              1,
-            );
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              turretYawInput.current?.blur();
-            }
-          }}
-          onFocus={() => turretYawInput.current?.focus()}
-          ref={turretYawInput}
         >
-          <TextField.Slot
-            style={{
-              userSelect: 'none',
-            }}
-          >
-            Yaw
-          </TextField.Slot>
-          <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
-        </TextField.Root>
+          <WidthIcon />
+        </TextField.Slot>
+        <TextField.Slot style={{ userSelect: 'none' }}>°</TextField.Slot>
+      </TextField.Root>
 
-        <TextField.Root
-          radius="full"
-          style={{
-            flex: 1,
-            textAlign: 'right',
-          }}
-          onBlur={() => {
-            const value = Number(gunPitchInput.current!.value);
-            if (isNaN(value)) {
-              gunPitchInput.current!.value = (
-                -radToDeg(protagonist.pitch) + initialGunPitch
-              ).toFixed(1);
-              return;
-            }
-            const [pitch, yaw] = applyPitchYawLimits(
-              degToRad(-value + initialGunPitch),
-              protagonist.yaw,
-              gunModelDefinition.pitch,
-              turretModelDefinition.yaw,
-              hasImprovedVerticalStabilizer,
-            );
-            modelTransformEvent.emit({ pitch, yaw });
-            mutateDuel((state) => {
-              state.protagonist!.pitch = pitch;
-              state.protagonist!.yaw = yaw;
-            });
-            gunPitchInput.current!.value = (
+      <TextField.Root
+        size="1"
+        radius="full"
+        style={{
+          flex: 1,
+          textAlign: 'right',
+        }}
+        onBlur={() => {
+          const value = Number(pitchInput.current!.value);
+          if (isNaN(value)) {
+            pitchInput.current!.value = (
               -radToDeg(protagonist.pitch) + initialGunPitch
             ).toFixed(1);
+            return;
+          }
+          const [pitch, yaw] = applyPitchYawLimits(
+            degToRad(-value + initialGunPitch),
+            protagonist.yaw,
+            gunModelDefinition.pitch,
+            turretModelDefinition.yaw,
+            hasImprovedVerticalStabilizer,
+          );
+          modelTransformEvent.emit({ pitch, yaw });
+          mutateDuel((state) => {
+            state.protagonist!.pitch = pitch;
+            state.protagonist!.yaw = yaw;
+          });
+          pitchInput.current!.value = (
+            -radToDeg(protagonist.pitch) + initialGunPitch
+          ).toFixed(1);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            pitchInput.current?.blur();
+          }
+        }}
+        onFocus={() => pitchInput.current?.focus()}
+        ref={pitchInput}
+      >
+        <TextField.Slot
+          style={{
+            userSelect: 'none',
           }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              gunPitchInput.current?.blur();
-            }
-          }}
-          onFocus={() => gunPitchInput.current?.focus()}
-          ref={gunPitchInput}
         >
-          <TextField.Slot
-            style={{
-              userSelect: 'none',
-            }}
-          >
-            Pitch
-          </TextField.Slot>
-          <TextField.Slot
-            style={{
-              userSelect: 'none',
-            }}
-          >
-            °
-          </TextField.Slot>
-        </TextField.Root>
-      </Flex>
-
-      {mode === 'armor' && (
-        <Flex gap="4" style={{ pointerEvents: 'auto' }}>
-          <QuickEquipmentButton
-            equipment={103}
-            active={hasCalibratedShells}
-            onClick={() => {
-              mutateDuel((draft) => {
-                draft.antagonist!.equipmentMatrix[0][0] = hasCalibratedShells
-                  ? 0
-                  : 1;
-              });
-            }}
-          />
-          <QuickEquipmentButton
-            equipment={110}
-            active={hasEnhancedArmor}
-            onClick={() => {
-              mutateDuel((draft) => {
-                draft.protagonist!.equipmentMatrix[1][1] = hasEnhancedArmor
-                  ? 0
-                  : -1;
-              });
-            }}
-          />
-        </Flex>
-      )}
+          <HeightIcon />
+        </TextField.Slot>
+        <TextField.Slot
+          style={{
+            userSelect: 'none',
+          }}
+        >
+          °
+        </TextField.Slot>
+      </TextField.Root>
     </Flex>
   );
 }

src/app/tools/tankopedia/[id]/components/TankopediaSeparator.tsx

@@ -0,0 +1,10 @@
+import { Separator } from '@radix-ui/themes';
+import PageWrapper from '../../../../../components/PageWrapper';
+
+export function TankopediaSeparator() {
+  return (
+    <PageWrapper>
+      <Separator mt="4" style={{ width: '100%' }} />
+    </PageWrapper>
+  );
+}

src/app/tools/tankopedia/[id]/components/Title.tsx

@@ -38,6 +38,7 @@ export function Title() {
           >
             <Flex align="center" gap="2">
               <img
+                alt={protagonist.tank.name}
                 src={
                   TREE_TYPE_ICONS[protagonist.tank.treeType][
                     protagonist.tank.class

src/app/tools/tankopedia/[id]/components/Videos.tsx

@@ -1,74 +0,0 @@
-import { InfoCircledIcon, PlusIcon } from '@radix-ui/react-icons';
-import { Callout, Card, Flex, Heading, Link, Text } from '@radix-ui/themes';
-import { use } from 'react';
-import { videoDefinitions } from '../../../../../core/blitzkit/videos';
-import { useFullScreen } from '../../../../../hooks/useFullScreen';
-import { useDuel } from '../../../../../stores/duel';
-
-export function Videos() {
-  const isFullScreen = useFullScreen();
-  const tank = useDuel((state) => state.protagonist!.tank);
-  const awaitedVideoDefinitions = use(videoDefinitions);
-  const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
-
-  if (isFullScreen) return null;
-
-  return (
-    <Flex direction="column" gap="4" mt="4" align="start">
-      <Heading size="6">Review videos</Heading>
-
-      <Callout.Root>
-        <Callout.Icon>
-          <InfoCircledIcon />
-        </Callout.Icon>
-        <Callout.Text>
-          Some YouTubers may not have videos on the {tank.name} leading to
-          off-topic videos.
-        </Callout.Text>
-      </Callout.Root>
-
-      <Flex gap="3" wrap="wrap">
-        {videos.map((video) => (
-          <Link
-            key={video}
-            href={`https://www.youtube.com/watch?v=${video}`}
-            target="_blank"
-          >
-            <img
-              src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
-              style={{
-                aspectRatio: '16 / 9',
-                objectFit: 'cover',
-                height: 128,
-                borderRadius: 8,
-              }}
-            />
-          </Link>
-        ))}
-
-        <Link href="https://discord.gg/nDt7AjGJQH" target="_blank">
-          <Card
-            style={{
-              aspectRatio: '16 / 9',
-              height: 128,
-            }}
-          >
-            <Flex
-              align="center"
-              justify="center"
-              gap="1"
-              style={{
-                width: '100%',
-                height: '100%',
-              }}
-            >
-              <Text color="purple">
-                {videos.length === 0 ? 'Suggest' : 'Suggest more'} <PlusIcon />
-              </Text>
-            </Flex>
-          </Card>
-        </Link>
-      </Flex>
-    </Flex>
-  );
-}

src/app/tools/tankopedia/[id]/layout.tsx

@@ -1,7 +1,10 @@
+import { Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { ReactNode } from 'react';
+import PageWrapper from '../../../../components/PageWrapper';
 import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import { tankIcon } from '../../../../core/blitzkit/tankIcon';
+import { videoDefinitions } from '../../../../core/blitzkit/videos';
 import strings from '../../../../lang/en-US.json';
 
 interface TankopediaLayoutProps {
@@ -15,11 +18,13 @@ export default async function TankopediaLayout({
 }: TankopediaLayoutProps) {
   const id = Number(params.id);
   const awaitedTankDefinitions = await tankDefinitions;
+  const awaitedVideoDefinitions = await videoDefinitions;
   const tank = awaitedTankDefinitions[id];
   const title = `${tank.name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${
-    (strings.common.nations as Record<string, string>)[tank.nation]
+    (strings.common.nations_adjectives as Record<string, string>)[tank.nation]
   } ${strings.common.tank_class_short[tank.class]}`;
   const description = `Statistics, armor profiles, and equipment for ${tank.name}`;
+  const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
 
   return (
     <>
@@ -30,6 +35,42 @@ export default async function TankopediaLayout({
       <meta property="og:description" content={description} />
 
       {children}
+
+      <PageWrapper noFlex1>
+        <Flex direction="column" gap="4" align="start">
+          <Flex direction="column">
+            <Heading size="6">Review videos</Heading>
+            <Text color="gray">
+              BlitzKit does not endorse any review videos.
+            </Text>
+          </Flex>
+
+          <Flex gap="3" wrap="wrap">
+            {videos.map((video) => (
+              <Link
+                key={video}
+                href={`https://www.youtube.com/watch?v=${video}`}
+                target="_blank"
+              >
+                <img
+                  alt="Video thumbnail"
+                  src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+                  style={{
+                    aspectRatio: '16 / 9',
+                    objectFit: 'cover',
+                    height: 128,
+                    borderRadius: 8,
+                  }}
+                />
+              </Link>
+            ))}
+          </Flex>
+        </Flex>
+      </PageWrapper>
+      <PageWrapper noFlex1>
+        <Heading>History of the {tank.name}</Heading>
+        <Text>{tank.description}</Text>
+      </PageWrapper>
     </>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -1,28 +1,18 @@
 'use client';
 
-import { Flex } from '@radix-ui/themes';
 import { useEffect } from 'react';
 import PageWrapper from '../../../../components/PageWrapper';
 import { assignDuelMember } from '../../../../core/blitzkit/assignDuelMember';
-import { useWideFormat } from '../../../../hooks/useWideFormat';
 import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
-import { AntagonistBar } from './components/AntagonistBar';
-import { Characteristics } from './components/Characteristics';
-import { Consumables } from './components/Characteristics/components/Consumables';
-import { Equipment } from './components/Characteristics/components/Equipment';
-import { Miscellaneous } from './components/Characteristics/components/Miscellaneous';
-import { Modules } from './components/Characteristics/components/Modules';
-import { Provisions } from './components/Characteristics/components/Provisions';
-import { Skills } from './components/Characteristics/components/Skills';
-import { TankSandbox } from './components/Model/TankSandbox';
-import { Title } from './components/Title';
-import { Videos } from './components/Videos';
+import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
+import { HeroSection } from './components/Model/HeroSection';
+import { TankopediaPlug } from './components/Model/TankopediaPlug';
+import { TechTreeSection } from './components/Model/TechTreeSection';
 
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
   const assigned = useDuel((state) => state.assigned);
-  const wideFormat = useWideFormat();
 
   useEffect(() => {
     assignDuelMember('both', initialId);
@@ -65,53 +55,28 @@ export default function Page({ params }: { params: { id: string } }) {
     };
   }, [initialId, assigned]);
 
+  useEffect(() => {
+    const unsubscribe = useDuel.subscribe(
+      (state) => state.protagonist?.tank.id,
+      () => {
+        mutateTankopediaTemporary((draft) => {
+          draft.shot = undefined;
+        });
+      },
+    );
+
+    return unsubscribe;
+  }, []);
+
   return (
-    <PageWrapper color="purple" size={1600}>
+    <PageWrapper noPadding noMaxWidth color="purple" size={1600}>
       {assigned && (
         <>
-          <Title />
-
-          <Flex
-            style={{ width: '100%' }}
-            gap="8"
-            direction={wideFormat ? 'row' : 'column'}
-            align="start"
-            justify="center"
-          >
-            <Flex
-              gap="8"
-              direction="column"
-              style={{
-                flex: 1,
-                width: '100%',
-                top: 64 + 16,
-                position: wideFormat ? 'sticky' : undefined,
-              }}
-            >
-              <Flex gap="4" direction="column">
-                <TankSandbox />
-                <AntagonistBar />
-              </Flex>
-              <Flex gap="5" wrap="wrap">
-                <Modules />
-                <Provisions />
-                <Consumables />
-
-                <Flex gap="5" wrap="wrap">
-                  <Skills />
-                  <Equipment />
-                </Flex>
-
-                <Miscellaneous />
-              </Flex>
-            </Flex>
-
-            <Flex style={{ width: wideFormat ? 320 : '100%' }}>
-              <Characteristics />
-            </Flex>
-          </Flex>
-
-          <Videos />
+          <HeroSection />
+          <TankopediaPlug />
+          <CharacteristicsSection />
+          <TechTreeSection />
+          {/* <TankopediaSeparator /> */}
         </>
       )}
     </PageWrapper>

src/app/tools/tankopedia/components/PageTurner.tsx

@@ -1,5 +1,5 @@
 import { CaretLeftIcon, CaretRightIcon } from '@radix-ui/react-icons';
-import { Button, Flex, TextField } from '@radix-ui/themes';
+import { Flex, IconButton, TextField } from '@radix-ui/themes';
 import { useEffect, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
 import mutateTankopediaPersistent, {
@@ -21,7 +21,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
 
   return (
     <Flex align="center" justify="center" gap="2">
-      <Button
+      <IconButton
         variant="soft"
         disabled={page === 0}
         onClick={() => {
@@ -31,7 +31,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
         }}
       >
         <CaretLeftIcon />
-      </Button>
+      </IconButton>
       <TextField.Root
         defaultValue={1}
         type="number"
@@ -61,7 +61,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
           out of {Math.floor(searchedList.length / tanksPerPage) + 1}
         </TextField.Slot>
       </TextField.Root>
-      <Button
+      <IconButton
         variant="soft"
         disabled={Math.floor(searchedList.length / tanksPerPage) === page}
         onClick={() => {
@@ -74,7 +74,7 @@ export function PageTurner({ searchedList, tanksPerPage }: PageTurnerProps) {
         }}
       >
         <CaretRightIcon />
-      </Button>
+      </IconButton>
     </Flex>
   );
 }

src/app/tools/tankopedia/components/TankSearch/components/CompactSearchResultRow.tsx

@@ -5,7 +5,7 @@ import { TIER_ROMAN_NUMERALS } from '../../../../../../core/blitzkit/tankDefinit
 
 interface CompactSearchResultRowProps {
   tanks: TankDefinition[];
-  onSelect: (tank: TankDefinition) => void;
+  onSelect?: (tank: TankDefinition) => void;
 }
 
 export function CompactSearchResultRow({

src/app/tools/tankopedia/components/TankSearch/components/Options/index.tsx

@@ -57,6 +57,7 @@ export function Options() {
             }
           >
             <img
+              alt={type}
               src={TREE_TYPE_IMAGES[type]}
               style={{ width: '1em', height: '1em' }}
             />
@@ -124,6 +125,7 @@ export function Options() {
             }
           >
             <img
+              alt={type}
               src={TREE_TYPE_ICONS.researchable[type]}
               style={{ width: '1em', height: '1em' }}
             />

src/app/tools/tankopedia/components/TankSearch/components/Results.tsx

@@ -0,0 +1,175 @@
+import { slateDark } from '@radix-ui/colors';
+import { Card, Flex, Inset, Link, Text } from '@radix-ui/themes';
+import { asset } from '../../../../../../core/blitzkit/asset';
+import { TankDefinition } from '../../../../../../core/blitzkit/tankDefinitions';
+import {
+  TANK_ICONS,
+  TANK_ICONS_COLLECTOR,
+  TANK_ICONS_PREMIUM,
+  TIER_ROMAN_NUMERALS,
+} from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
+import { theme } from '../../../../../../stitches.config';
+import * as styles from '../../../page.css';
+import { CompactSearchResultRow } from './CompactSearchResultRow';
+
+interface ResultsProps {
+  compact?: boolean;
+  results: TankDefinition[];
+  onSelect?: (tank: TankDefinition) => void;
+}
+
+export function Results({ compact, results, onSelect }: ResultsProps) {
+  const firstChunk = compact
+    ? results.slice(0, Math.ceil(results.length / 2))
+    : [];
+  const secondChunk = compact
+    ? results.slice(Math.ceil(results.length / 2))
+    : [];
+
+  return (
+    <Flex
+      wrap="wrap"
+      gap="2"
+      style={{
+        justifyContent:
+          compact && firstChunk.length > 0 && secondChunk.length > 0
+            ? 'space-around'
+            : 'center',
+      }}
+    >
+      {!compact &&
+        results.map((tank) => (
+          <Link
+            key={tank.id}
+            className={styles.listing}
+            href={`/tools/tankopedia/${tank.id}`}
+            style={{
+              flex: 1,
+              minWidth: 256,
+            }}
+          >
+            <Card
+              key={tank.id}
+              style={{
+                cursor: 'pointer',
+                height: 64,
+                width: '100%',
+              }}
+            >
+              <Inset
+                key={tank.id}
+                style={{
+                  minHeight: 64,
+                  position: 'relative',
+                  display: 'flex',
+                }}
+              >
+                <img
+                  alt={tank.name}
+                  className={styles.flag}
+                  src={asset(`flags/scratched/${tank.nation}.webp`)}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    position: 'absolute',
+                  }}
+                />
+
+                <div
+                  className={styles.listingShadow}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    position: 'absolute',
+                    transition: `box-shadow ${theme.durations.regular}`,
+                  }}
+                />
+
+                <div
+                  style={{
+                    width: 256,
+                    height: 128,
+                  }}
+                  className={styles.listingImage}
+                >
+                  <img
+                    alt={tank.name}
+                    src={tankIcon(tank.id)}
+                    style={{
+                      objectFit: 'contain',
+                      objectPosition: 'left center',
+                    }}
+                  />
+                </div>
+
+                <Flex
+                  align="center"
+                  justify="between"
+                  className={styles.listingLabel}
+                  style={{
+                    position: 'absolute',
+                    bottom: 8,
+                    padding: '0 12px',
+                    width: '100%',
+                    boxSizing: 'border-box',
+                  }}
+                >
+                  <Flex align="center" justify="center" gap="1">
+                    <img
+                      alt={tank.name}
+                      src={
+                        (tank.treeType === 'collector'
+                          ? TANK_ICONS_COLLECTOR
+                          : tank.treeType === 'premium'
+                            ? TANK_ICONS_PREMIUM
+                            : TANK_ICONS)[tank.class]
+                      }
+                      style={{ width: '1em', height: '1em' }}
+                    />
+                    <Text
+                      size="4"
+                      color={
+                        tank.treeType === 'collector'
+                          ? 'blue'
+                          : tank.treeType === 'premium'
+                            ? 'amber'
+                            : undefined
+                      }
+                      weight="medium"
+                      style={{
+                        color:
+                          tank.treeType === 'researchable'
+                            ? slateDark.slate12
+                            : undefined,
+                        whiteSpace: 'nowrap',
+                        maxWidth: 160,
+                        display: 'block',
+                        textOverflow: 'ellipsis',
+                        overflow: 'hidden',
+                      }}
+                    >
+                      {tank.name}
+                    </Text>
+                  </Flex>
+
+                  <Text size="4" color="gray" highContrast={false}>
+                    {TIER_ROMAN_NUMERALS[tank.tier]}
+                  </Text>
+                </Flex>
+              </Inset>
+            </Card>
+          </Link>
+        ))}
+
+      {compact && firstChunk.length > 0 && (
+        <CompactSearchResultRow tanks={firstChunk} onSelect={onSelect} />
+      )}
+
+      {compact && secondChunk.length > 0 && (
+        <CompactSearchResultRow tanks={secondChunk} onSelect={onSelect} />
+      )}
+    </Flex>
+  );
+}

src/app/tools/tankopedia/components/TankSearch/components/Sort.tsx

@@ -0,0 +1,337 @@
+import { CaretDownIcon } from '@radix-ui/react-icons';
+import { Button, DropdownMenu } from '@radix-ui/themes';
+import mutateTankopediaPersistent, {
+  TankopediaSortDirection,
+  useTankopediaPersistent,
+} from '../../../../../../stores/tankopedia';
+
+export function Sort() {
+  const sort = useTankopediaPersistent((state) => state.sort);
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger>
+        <Button variant="soft" color="gray">
+          Sort
+          <CaretDownIcon />
+        </Button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content>
+        <DropdownMenu.Label>By</DropdownMenu.Label>
+
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Meta</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'meta.tier'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'meta.tier';
+                });
+              }}
+            >
+              Tier
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'meta.name'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'meta.name';
+                });
+              }}
+            >
+              Name
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.dpm'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.dpm';
+                });
+              }}
+            >
+              DPM
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.reload'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.reload';
+                });
+              }}
+            >
+              Reload
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.caliber'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.caliber';
+                });
+              }}
+            >
+              Caliber
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.standardPenetration'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.standardPenetration';
+                });
+              }}
+            >
+              Standard penetration
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.premiumPenetration'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.premiumPenetration';
+                });
+              }}
+            >
+              Premium penetration
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.damage'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.damage';
+                });
+              }}
+            >
+              Damage
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.shellVelocity'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.shellVelocity';
+                });
+              }}
+            >
+              Shell velocity
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.aimTime'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.aimTime';
+                });
+              }}
+            >
+              Aim time
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.dispersionStill'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.dispersionStill';
+                });
+              }}
+            >
+              Dispersion still
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.dispersionMoving'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.dispersionMoving';
+                });
+              }}
+            >
+              Dispersion moving
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.gunDepression'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.gunDepression';
+                });
+              }}
+            >
+              Gun depression
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'fire.gunElevation'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'fire.gunElevation';
+                });
+              }}
+            >
+              Gun elevation
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Maneuverability</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'maneuverability.forwardsSpeed'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'maneuverability.forwardsSpeed';
+                });
+              }}
+            >
+              Forwards speed
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'maneuverability.backwardsSpeed'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'maneuverability.backwardsSpeed';
+                });
+              }}
+            >
+              Backwards speed
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'maneuverability.power'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'maneuverability.power';
+                });
+              }}
+            >
+              Power
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'maneuverability.powerToWeight'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'maneuverability.powerToWeight';
+                });
+              }}
+            >
+              Power to weight
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'maneuverability.weight'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'maneuverability.weight';
+                });
+              }}
+            >
+              Weight
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'maneuverability.traverseSpeed'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'maneuverability.traverseSpeed';
+                });
+              }}
+            >
+              Traverse speed
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        <DropdownMenu.Sub>
+          <DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.health'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.health';
+                });
+              }}
+            >
+              Health
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.viewRange'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.viewRange';
+                });
+              }}
+            >
+              View range
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.camouflageStill'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.camouflageStill';
+                });
+              }}
+            >
+              Camouflage
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.camouflageMoving'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.camouflageMoving';
+                });
+              }}
+            >
+              Camouflage moving
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.camouflageShooting'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.camouflageShooting';
+                });
+              }}
+            >
+              Camouflage shooting
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.volume'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.volume';
+                });
+              }}
+            >
+              Volume
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={sort.by === 'survivability.length'}
+              onClick={() => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.sort.by = 'survivability.length';
+                });
+              }}
+            >
+              Length
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Label>Direction</DropdownMenu.Label>
+        <DropdownMenu.RadioGroup
+          value={sort.direction}
+          onValueChange={(value) =>
+            mutateTankopediaPersistent((draft) => {
+              draft.sort.direction = value as TankopediaSortDirection;
+            })
+          }
+        >
+          <DropdownMenu.RadioItem value="ascending">
+            Ascending
+          </DropdownMenu.RadioItem>
+          <DropdownMenu.RadioItem value="descending">
+            Descending
+          </DropdownMenu.RadioItem>
+        </DropdownMenu.RadioGroup>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -1,6 +1,4 @@
-import { slateDark } from '@radix-ui/colors';
 import {
-  CaretDownIcon,
   CaretRightIcon,
   MagnifyingGlassIcon,
   TrashIcon,
@@ -8,20 +6,17 @@ import {
 import {
   AlertDialog,
   Button,
-  Card,
-  DropdownMenu,
   Flex,
-  Inset,
+  Spinner,
   Text,
   TextField,
 } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
-import Link from 'next/link';
 import { use, useEffect, useMemo, useRef, useState } from 'react';
+import { isMobileOnly } from 'react-device-detect';
 import { TreeType } from '../../../../../components/Tanks';
 import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
 import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
-import { asset } from '../../../../../core/blitzkit/asset';
 import { modelDefinitions } from '../../../../../core/blitzkit/modelDefinitions';
 import { normalizeBoundingBox } from '../../../../../core/blitzkit/normalizeBoundingBox';
 import { resolveDpm } from '../../../../../core/blitzkit/resolveDpm';
@@ -31,24 +26,15 @@ import {
   TankDefinition,
   tanksDefinitionsArray,
 } from '../../../../../core/blitzkit/tankDefinitions';
-import {
-  TANK_ICONS,
-  TANK_ICONS_COLLECTOR,
-  TANK_ICONS_PREMIUM,
-  TIER_ROMAN_NUMERALS,
-} from '../../../../../core/blitzkit/tankDefinitions/constants';
-import { tankIcon } from '../../../../../core/blitzkit/tankIcon';
 import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
-import { theme } from '../../../../../stitches.config';
 import mutateTankopediaPersistent, {
   SORT_NAMES,
-  TankopediaSortDirection,
   useTankopediaPersistent,
 } from '../../../../../stores/tankopedia';
-import * as styles from '../../page.css';
 import { PageTurner } from '../PageTurner';
-import { CompactSearchResultRow } from './components/CompactSearchResultRow';
 import { Options } from './components/Options';
+import { Results } from './components/Results';
+import { Sort } from './components/Sort';
 
 interface TankSearchProps {
   compact?: boolean;
@@ -63,12 +49,13 @@ export function TankSearch({
   onSelect = () => {},
   onSelectAll,
 }: TankSearchProps) {
-  const tanksPerPage = compact ? 16 : 96;
+  const tanksPerPage = (compact ? 16 : 96) * (isMobileOnly ? 0.5 : 1);
   const nations = use(NATIONS);
   const filters = useTankopediaPersistent((state) => state.filters);
   const sort = useTankopediaPersistent((state) => state.sort);
   const awaitedTanks = use(tanksDefinitionsArray);
   const awaitedModelDefinitions = use(modelDefinitions);
+  const [loaded, setLoaded] = useState(false);
   const defaultSortedTanks = useMemo(
     () =>
       awaitedTanks
@@ -414,13 +401,6 @@ export function TankSearch({
     page * tanksPerPage,
     (page + 1) * tanksPerPage,
   );
-  const firstChunk = searchResultsPageSlice.slice(
-    0,
-    Math.ceil(searchResultsPageSlice.length / 2),
-  );
-  const secondChunk = searchResultsPageSlice.slice(
-    Math.ceil(searchResultsPageSlice.length / 2),
-  );
 
   useEffect(() => {
     mutateTankopediaPersistent((draft) => {
@@ -431,6 +411,18 @@ export function TankSearch({
     });
   }, [searchResults]);
 
+  useEffect(() => {
+    setLoaded(true);
+  }, []);
+
+  if (!loaded) {
+    return (
+      <Flex justify="center">
+        <Spinner />
+      </Flex>
+    );
+  }
+
   return (
     <>
       <Flex direction="column" gap="4">
@@ -472,332 +464,7 @@ export function TankSearch({
               )}
           </TextField.Root>
 
-          <DropdownMenu.Root>
-            <DropdownMenu.Trigger>
-              <Button variant="soft" color="gray">
-                Sort
-                <CaretDownIcon />
-              </Button>
-            </DropdownMenu.Trigger>
-            <DropdownMenu.Content>
-              <DropdownMenu.Label>By</DropdownMenu.Label>
-
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger>Meta</DropdownMenu.SubTrigger>
-                <DropdownMenu.SubContent>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'meta.tier'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'meta.tier';
-                      });
-                    }}
-                  >
-                    Tier
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'meta.name'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'meta.name';
-                      });
-                    }}
-                  >
-                    Name
-                  </DropdownMenu.CheckboxItem>
-                </DropdownMenu.SubContent>
-              </DropdownMenu.Sub>
-
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger>Fire</DropdownMenu.SubTrigger>
-                <DropdownMenu.SubContent>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.dpm'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.dpm';
-                      });
-                    }}
-                  >
-                    DPM
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.reload'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.reload';
-                      });
-                    }}
-                  >
-                    Reload
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.caliber'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.caliber';
-                      });
-                    }}
-                  >
-                    Caliber
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.standardPenetration'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.standardPenetration';
-                      });
-                    }}
-                  >
-                    Standard penetration
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.premiumPenetration'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.premiumPenetration';
-                      });
-                    }}
-                  >
-                    Premium penetration
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.damage'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.damage';
-                      });
-                    }}
-                  >
-                    Damage
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.shellVelocity'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.shellVelocity';
-                      });
-                    }}
-                  >
-                    Shell velocity
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.aimTime'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.aimTime';
-                      });
-                    }}
-                  >
-                    Aim time
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.dispersionStill'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.dispersionStill';
-                      });
-                    }}
-                  >
-                    Dispersion still
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.dispersionMoving'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.dispersionMoving';
-                      });
-                    }}
-                  >
-                    Dispersion moving
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.gunDepression'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.gunDepression';
-                      });
-                    }}
-                  >
-                    Gun depression
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'fire.gunElevation'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'fire.gunElevation';
-                      });
-                    }}
-                  >
-                    Gun elevation
-                  </DropdownMenu.CheckboxItem>
-                </DropdownMenu.SubContent>
-              </DropdownMenu.Sub>
-
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger>
-                  Maneuverability
-                </DropdownMenu.SubTrigger>
-                <DropdownMenu.SubContent>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'maneuverability.forwardsSpeed'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'maneuverability.forwardsSpeed';
-                      });
-                    }}
-                  >
-                    Forwards speed
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'maneuverability.backwardsSpeed'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'maneuverability.backwardsSpeed';
-                      });
-                    }}
-                  >
-                    Backwards speed
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'maneuverability.power'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'maneuverability.power';
-                      });
-                    }}
-                  >
-                    Power
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'maneuverability.powerToWeight'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'maneuverability.powerToWeight';
-                      });
-                    }}
-                  >
-                    Power to weight
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'maneuverability.weight'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'maneuverability.weight';
-                      });
-                    }}
-                  >
-                    Weight
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'maneuverability.traverseSpeed'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'maneuverability.traverseSpeed';
-                      });
-                    }}
-                  >
-                    Traverse speed
-                  </DropdownMenu.CheckboxItem>
-                </DropdownMenu.SubContent>
-              </DropdownMenu.Sub>
-
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger>Survivability</DropdownMenu.SubTrigger>
-                <DropdownMenu.SubContent>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.health'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.health';
-                      });
-                    }}
-                  >
-                    Health
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.viewRange'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.viewRange';
-                      });
-                    }}
-                  >
-                    View range
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.camouflageStill'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.camouflageStill';
-                      });
-                    }}
-                  >
-                    Camouflage
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.camouflageMoving'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.camouflageMoving';
-                      });
-                    }}
-                  >
-                    Camouflage moving
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.camouflageShooting'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.camouflageShooting';
-                      });
-                    }}
-                  >
-                    Camouflage shooting
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.volume'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.volume';
-                      });
-                    }}
-                  >
-                    Volume
-                  </DropdownMenu.CheckboxItem>
-                  <DropdownMenu.CheckboxItem
-                    checked={sort.by === 'survivability.length'}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.sort.by = 'survivability.length';
-                      });
-                    }}
-                  >
-                    Length
-                  </DropdownMenu.CheckboxItem>
-                </DropdownMenu.SubContent>
-              </DropdownMenu.Sub>
-
-              <DropdownMenu.Separator />
-
-              <DropdownMenu.Label>Direction</DropdownMenu.Label>
-              <DropdownMenu.RadioGroup
-                value={sort.direction}
-                onValueChange={(value) =>
-                  mutateTankopediaPersistent((draft) => {
-                    draft.sort.direction = value as TankopediaSortDirection;
-                  })
-                }
-              >
-                <DropdownMenu.RadioItem value="ascending">
-                  Ascending
-                </DropdownMenu.RadioItem>
-                <DropdownMenu.RadioItem value="descending">
-                  Descending
-                </DropdownMenu.RadioItem>
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.Content>
-          </DropdownMenu.Root>
+          <Sort />
 
           <Button
             color="red"
@@ -873,147 +540,15 @@ export function TankSearch({
         <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
       )}
 
-      <Flex
-        wrap="wrap"
-        gap="2"
-        style={{
-          justifyContent:
-            compact && firstChunk.length > 0 && secondChunk.length > 0
-              ? 'space-around'
-              : 'center',
-        }}
-      >
-        {!compact &&
-          searchResultsPageSlice.map((tank) => (
-            <Link
-              href={`/tools/tankopedia/${tank.id}`}
-              style={{
-                flex: 1,
-                minWidth: 256,
-              }}
-            >
-              <Card
-                key={tank.id}
-                className={styles.listing}
-                style={{
-                  cursor: 'pointer',
-                  height: 64,
-                  width: '100%',
-                }}
-              >
-                <Inset
-                  key={tank.id}
-                  style={{
-                    minHeight: 64,
-                    position: 'relative',
-                    display: 'flex',
-                  }}
-                >
-                  <img
-                    className={styles.flag}
-                    src={asset(`flags/scratched/${tank.nation}.webp`)}
-                    style={{
-                      width: '100%',
-                      height: '100%',
-                      objectFit: 'contain',
-                      position: 'absolute',
-                    }}
-                  />
+      <Results
+        compact={compact}
+        results={searchResultsPageSlice}
+        onSelect={onSelect}
+      />
 
-                  <div
-                    className={styles.listingShadow}
-                    style={{
-                      width: '100%',
-                      height: '100%',
-                      position: 'absolute',
-                      transition: `box-shadow ${theme.durations.regular}`,
-                    }}
-                  />
-
-                  <div
-                    style={{
-                      width: 256,
-                      height: 128,
-                    }}
-                    className={styles.listingImage}
-                  >
-                    <img
-                      src={tankIcon(tank.id)}
-                      style={{
-                        objectFit: 'contain',
-                        objectPosition: 'left center',
-                      }}
-                    />
-                  </div>
-
-                  <Flex
-                    align="center"
-                    justify="between"
-                    className={styles.listingLabel}
-                    style={{
-                      position: 'absolute',
-                      bottom: 8,
-                      padding: '0 12px',
-                      width: '100%',
-                      boxSizing: 'border-box',
-                    }}
-                  >
-                    <Flex align="center" justify="center" gap="1">
-                      <img
-                        src={
-                          (tank.treeType === 'collector'
-                            ? TANK_ICONS_COLLECTOR
-                            : tank.treeType === 'premium'
-                              ? TANK_ICONS_PREMIUM
-                              : TANK_ICONS)[tank.class]
-                        }
-                        style={{ width: '1em', height: '1em' }}
-                      />
-                      <Text
-                        size="4"
-                        color={
-                          tank.treeType === 'collector'
-                            ? 'blue'
-                            : tank.treeType === 'premium'
-                              ? 'amber'
-                              : undefined
-                        }
-                        weight="medium"
-                        style={{
-                          color:
-                            tank.treeType === 'researchable'
-                              ? slateDark.slate12
-                              : undefined,
-                          whiteSpace: 'nowrap',
-                          maxWidth: 160,
-                          display: 'block',
-                          textOverflow: 'ellipsis',
-                          overflow: 'hidden',
-                        }}
-                      >
-                        {tank.name}
-                      </Text>
-                    </Flex>
-
-                    <Text size="4" color="gray" highContrast={false}>
-                      {TIER_ROMAN_NUMERALS[tank.tier]}
-                    </Text>
-                  </Flex>
-                </Inset>
-              </Card>
-            </Link>
-          ))}
-
-        {compact && firstChunk.length > 0 && (
-          <CompactSearchResultRow tanks={firstChunk} onSelect={onSelect} />
-        )}
-
-        {compact && secondChunk.length > 0 && (
-          <CompactSearchResultRow tanks={secondChunk} onSelect={onSelect} />
-        )}
-      </Flex>
-
-      <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
+      {searchResultsPageSlice.length > tanksPerPage / 4 && (
+        <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
+      )}
     </>
   );
 }

src/commands/link.tsx

@@ -86,6 +86,7 @@ export const verifyCommand = new Promise<CommandRegistry>((resolve) => {
                 }}
               >
                 <img
+                  alt="avatar"
                   src={
                     interaction.user.avatarURL({ extension: 'png' }) ??
                     'https://i.stack.imgur.com/l60Hf.png'
@@ -139,6 +140,7 @@ export const verifyCommand = new Promise<CommandRegistry>((resolve) => {
                 }}
               >
                 <img
+                  alt="accounts linked"
                   src="https://i.imgur.com/jIcRgog.png"
                   style={{
                     width: 16,
@@ -160,6 +162,7 @@ export const verifyCommand = new Promise<CommandRegistry>((resolve) => {
               >
                 {clanAccountInfo?.clan ? (
                   <img
+                    alt="clan emblem"
                     style={{
                       width: 64,
                       height: 64,

src/commands/rating.tsx

@@ -1,3 +1,4 @@
+import { SlashCommandSubcommandBuilder } from 'discord.js';
 import markdownEscape from 'markdown-escape';
 import { Glow } from '../components/AllStatsOverview/components/HeroStat/components/Glow';
 import CommandWrapper from '../components/CommandWrapper';
@@ -11,7 +12,7 @@ import { getRatingNeighbors } from '../core/blitz/getRatingNeighbors';
 import { normalizeLeagueIcon } from '../core/blitz/normalizeLeagueIcon';
 import { emblemURL } from '../core/blitzkit/emblemURL';
 import getArchivedRatingMidnightLeaderboard from '../core/blitzkit/getArchivedRatingMidnightLeaderboard';
-import { webpToPng } from '../core/blitzkit/iconPng';
+import { iconPng } from '../core/blitzkit/iconPng';
 import addUsernameChoices from '../core/discord/addUsernameChoices';
 import { createLocalizedCommand } from '../core/discord/createLocalizedCommand';
 import resolvePlayerFromCommand from '../core/discord/resolvePlayerFromCommand';
@@ -31,20 +32,42 @@ const LEAGUE_ACCENT = [
 
 export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
   resolve({
-    command:
-      createLocalizedCommand('rating').addStringOption(addUsernameChoices),
+    command: createLocalizedCommand('rating', [
+      {
+        subcommand: 'today',
+        modify(option: SlashCommandSubcommandBuilder) {
+          option.addStringOption(addUsernameChoices);
+        },
+      },
+      {
+        subcommand: 'season',
+        modify(option: SlashCommandSubcommandBuilder) {
+          option.addStringOption(addUsernameChoices);
+        },
+      },
+    ]),
 
     inProduction: true,
     inPublic: true,
 
     async handler(interaction) {
+      const subcommand = interaction.options.getSubcommand(true) as
+        | 'season'
+        | 'today';
       const { t, translate } = translator(interaction.locale);
       const { id, region } = await resolvePlayerFromCommand(interaction);
       const clan = (await getClanAccountInfo(region, id, ['clan']))?.clan;
       const clanImage = clan ? emblemURL(clan.emblem_set_id) : undefined;
+
+      const ratingInfo = await getRatingInfo(region);
+
+      if (ratingInfo.detail) {
+        throw new Error(`Rating info not available for ${region}`);
+      }
+
       const leaderboard = await getArchivedRatingMidnightLeaderboard(
         region,
-        53,
+        ratingInfo.current_season - (subcommand === 'today' ? 0 : 1),
       );
 
       if (leaderboard?.format === BkrlFormat.Base) {
@@ -53,7 +76,6 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
         );
       }
 
-      const ratingInfo = await getRatingInfo(region);
       const accountInfo = await getAccountInfo(region, id, [
         'statistics.rating',
       ]);
@@ -63,12 +85,17 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
       const statsA = leaderboard ? leaderboard.entries[statsIndex!] : null;
       const positionA = leaderboard ? statsIndex! + 1 : undefined;
       const statsB1 = accountInfo.statistics.rating!;
-      const [statsB2] = (await getRatingNeighbors(region, id, 0)).neighbors;
+      const statsB2Array = (await getRatingNeighbors(region, id, 0)).neighbors;
+
+      if (statsB2Array === undefined) {
+        return translate('bot.commands.rating.errors.no_participation', [
+          markdownEscape(accountInfo.nickname),
+        ]);
+      }
+
+      const [statsB2] = statsB2Array;
       const league = getLeagueFromScore(statsB2.score);
 
-      if (ratingInfo.detail) {
-        throw new Error(`Rating info not available for ${region}`);
-      }
       if (!statsA) {
         return t`bot.commands.rating.errors.unrecorded_stats`;
       }
@@ -98,7 +125,7 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
           <TitleBar
             title={accountInfo.nickname}
             image={clanImage}
-            description={`${t`bot.commands.rating.body.subtitle`} • ${new Date().toLocaleDateString(
+            description={`${translate(`bot.commands.rating.body.subtitle.${subcommand}`)} • ${new Date().toLocaleDateString(
               interaction.locale,
             )}`}
           />
@@ -142,6 +169,7 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
                 }}
               >
                 <img
+                  alt={`League ${league.name}`}
                   style={{
                     width: 64,
                     height: 64,
@@ -211,13 +239,13 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
                     </span>
                     {positionDelta !== undefined && positionDelta !== 0 && (
                       <>
-                        <DeltaCaret delta={positionDelta} />
+                        <DeltaCaret delta={-positionDelta} />
                         <span
                           style={{
                             color:
                               positionDelta > 0
-                                ? theme.colors.textLowContrast_green
-                                : theme.colors.textLowContrast_red,
+                                ? theme.colors.textLowContrast_red
+                                : theme.colors.textLowContrast_green,
                             fontSize: 16,
                           }}
                         >
@@ -295,7 +323,7 @@ export const ratingCommand = new Promise<CommandRegistry>((resolve) => {
                       height: 64,
                       objectFit: 'cover',
                     }}
-                    src={await webpToPng(
+                    src={await iconPng(
                       reward.type === 'vehicle'
                         ? reward.vehicle.preview_image_url
                         : reward.stuff.image_url,

src/commands/replay.tsx

@@ -0,0 +1,565 @@
+import { clamp } from 'lodash';
+import CommandWrapper from '../components/CommandWrapper';
+import TitleBar from '../components/TitleBar';
+import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
+import { idToRegion } from '../core/blitz/idToRegion';
+import { emblemURL } from '../core/blitzkit/emblemURL';
+import { iconPng } from '../core/blitzkit/iconPng';
+import { mapDefinitions } from '../core/blitzkit/mapDefinitions';
+import { RenderConfiguration } from '../core/blitzkit/renderConfiguration';
+import { tankDefinitions } from '../core/blitzkit/tankDefinitions';
+import { TIER_ROMAN_NUMERALS } from '../core/blitzkit/tankDefinitions/constants';
+import { tankIcon } from '../core/blitzkit/tankIcon';
+import { tankAverages } from '../core/blitzstars/tankAverages';
+import buttonLink from '../core/discord/buttonLink';
+import { createLocalizedCommand } from '../core/discord/createLocalizedCommand';
+import calculateWN8 from '../core/statistics/calculateWN8';
+import { CommandRegistry } from '../events/interactionCreate';
+import { theme } from '../stitches.config';
+
+type WotInspectorReplaySubmission =
+  | { status: 'error'; data: unknown; error: { message: string } }
+  | {
+      status: 'ok';
+      data: {
+        download_url: string;
+        view_url: string;
+        summary: {
+          battle_start_time: string;
+          map_name: string;
+          battle_start_timestamp: number;
+          battle_duration: number;
+          title: string;
+          arena_unique_id: string;
+          allies: number[];
+          enemies: number[];
+          protagonist: number;
+          player_name: string;
+          vehicle: string;
+          exp_base: number;
+          exp_total: number;
+          credits_base: number;
+          credits_total: number;
+          room_type: number;
+          battle_type: number;
+          mastery_badge: number;
+          battle_result: number;
+          vehicle_tier: number;
+          vehicle_type: number;
+          protagonist_team: number;
+          winner_team: number;
+          details: {
+            achievements: unknown[];
+            base_capture_points: number;
+            base_defend_points: number;
+            chassis_id: unknown | null;
+            clan_tag: string;
+            clanid: number;
+            credits: number;
+            damage_assisted: number;
+            damage_assisted_track: number;
+            damage_blocked: unknown | null;
+            damage_made: number;
+            damage_received: number;
+            dbid: number;
+            death_reason: number;
+            distance_travelled: number;
+            enemies_damaged: number;
+            enemies_destroyed: number;
+            enemies_spotted: number;
+            entity_id: number;
+            exp: number;
+            exp_for_assist: number;
+            exp_for_damage: number;
+            exp_team_bonus: number;
+            gun_id: unknown | null;
+            hero_bonus_credits: number;
+            hero_bonus_exp: number;
+            hitpoints_left: number;
+            hits_bounced: number;
+            hits_pen: number;
+            hits_received: number;
+            hits_splash: number;
+            killed_by: number;
+            name: string;
+            shots_hit: number;
+            shots_made: number;
+            shots_pen: number;
+            shots_splash: number;
+            squad_index: number;
+            team: number;
+            time_alive: number;
+            turret_id: unknown | null;
+            vehicle_descr: number;
+            wp_points_earned: number;
+            wp_points_stolen: number;
+          };
+        };
+      };
+      error: {};
+    };
+
+interface WotInspectorReplay {
+  id: string;
+  map_id: number;
+  battle_duration: number;
+  title: unknown | null;
+  player_name: string;
+  protagonist: number;
+  vehicle_descr: number;
+  mastery_badge: number;
+  exp_base: number;
+  enemies_spotted: number;
+  enemies_destroyed: number;
+  damage_assisted: number;
+  damage_made: number;
+  details_url: string;
+  download_url: string;
+  game_version: {
+    name: string;
+    package: string;
+  };
+  arena_unique_id: string;
+  download_count: number;
+  data_version: number;
+  private: boolean;
+  private_clan: boolean;
+  battle_start_time: Date;
+  upload_time: Date;
+  allies: number[];
+  enemies: number[];
+  protagonist_clan: number;
+  protagonist_team: number;
+  battle_result: number;
+  credits_base: number;
+  tags: number[];
+  battle_type: number;
+  room_type: number;
+  last_accessed_time: Date;
+  winner_team: number;
+  finish_reason: number;
+  players_data: WotInspectorReplayPlayerData[];
+  exp_total: number;
+  credits_total: number;
+  repair_cost: number;
+  exp_free: number;
+  exp_free_base: number;
+  exp_penalty: number;
+  credits_penalty: number;
+  credits_contribution_in: number;
+  credits_contribution_out: number;
+  camouflage_id: number;
+}
+
+export interface WotInspectorReplayPlayerData {
+  team: number;
+  name: string;
+  entity_id: number;
+  dbid: number;
+  clanid: number | null;
+  clan_tag: null | string;
+  hitpoints_left: number;
+  credits: number;
+  exp: number;
+  shots_made: number;
+  shots_hit: number;
+  shots_splash: number;
+  shots_pen: number;
+  damage_made: number;
+  damage_received: number;
+  damage_assisted: number;
+  damage_assisted_track: number;
+  hits_received: number;
+  hits_bounced: number;
+  hits_splash: number;
+  hits_pen: number;
+  enemies_spotted: number;
+  enemies_damaged: number;
+  enemies_destroyed: number;
+  time_alive: number;
+  distance_travelled: number;
+  killed_by: number;
+  base_capture_points: number;
+  base_defend_points: number;
+  exp_for_damage: number;
+  exp_for_assist: number;
+  exp_team_bonus: number;
+  wp_points_earned: number;
+  wp_points_stolen: number;
+  hero_bonus_credits: number;
+  hero_bonus_exp: number;
+  death_reason: number;
+  achievements: any[];
+  vehicle_descr: number;
+  turret_id: number;
+  gun_id: number;
+  chassis_id: number;
+  squad_index: number;
+  damage_blocked: number;
+}
+
+function stat(value: string | number, flex = 2) {
+  return (
+    <div
+      style={{
+        flex,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span style={{ fontSize: 16 }}>{value}</span>
+    </div>
+  );
+}
+
+async function playerListing(
+  player: WotInspectorReplayPlayerData,
+  protagonistTeam: boolean,
+  winningTeam: number,
+  recordingPlayer = false,
+) {
+  const awaitedTankAverages = await tankAverages;
+  const awaitedTankDefinitions = await tankDefinitions;
+  const tank = awaitedTankDefinitions[player.vehicle_descr];
+  const blockAccent = recordingPlayer ? '_amber' : '';
+  const healthAccent = protagonistTeam
+    ? recordingPlayer
+      ? '_amber'
+      : '_green'
+    : '_red';
+
+  // our turret ids are always off by 1 or 2 lol so imma just grab the closest
+  // TODO: 💀
+  const turret = tank.turrets.sort(
+    (a, b) =>
+      Math.abs(a.id - player.turret_id) - Math.abs(b.id - player.turret_id),
+  )[0];
+  const totalHealth = turret.health + tank.health;
+  const healthLeft = clamp(player.hitpoints_left / totalHealth, 0, 1);
+  const tankAveragesEntry = awaitedTankAverages[player.vehicle_descr];
+  const wn8 =
+    tankAveragesEntry === undefined
+      ? -1
+      : calculateWN8(tankAveragesEntry.all, {
+          battles: 1,
+          damage_dealt: player.damage_made,
+          dropped_capture_points: player.base_defend_points,
+          frags: player.enemies_destroyed,
+          spotted: player.enemies_spotted,
+          wins: winningTeam === player.team ? 1 : 0,
+        });
+
+  return (
+    <div
+      key={player.entity_id}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        backgroundColor: theme.colors[`appBackground2${blockAccent}`],
+        padding: 8,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: 8,
+          flex: 1,
+          overflow: 'hidden',
+          alignItems: 'center',
+        }}
+      >
+        <img
+          alt={tank.name}
+          src={await iconPng(tankIcon(tank.id))}
+          style={{
+            width: 32,
+            height: 32,
+            objectFit: 'contain',
+          }}
+        />
+
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            // align
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              gap: 4,
+              alignItems: 'center',
+            }}
+          >
+            <span
+              style={{
+                color: theme.colors[`textLowContrast${blockAccent}`],
+                fontSize: 12,
+              }}
+            >
+              {TIER_ROMAN_NUMERALS[tank.tier]}
+            </span>
+            <span
+              style={{
+                color: theme.colors[`textHighContrast${blockAccent}`],
+                fontSize: 16,
+              }}
+            >
+              {tank.name}
+            </span>
+          </div>
+
+          <span
+            style={{
+              fontSize: 16,
+              color: theme.colors[`textLowContrast${blockAccent}`],
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {player.name}
+            {player.clan_tag ? ` [${player.clan_tag}]` : ''}
+          </span>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
+        {stat(player.damage_made.toLocaleString())}
+        {stat(wn8 === -1 ? '--' : Math.round(wn8).toLocaleString())}
+        {stat(player.exp.toLocaleString())}
+        {stat(player.enemies_destroyed, 1)}
+      </div>
+
+      <div
+        style={{
+          borderRadius: 2,
+          backgroundColor: theme.colors[`componentInteractive${healthAccent}`],
+          display: 'flex',
+          width: 4,
+          height: '100%',
+          transform: 'scaleY(-1)',
+        }}
+      >
+        <div
+          style={{
+            width: '100%',
+            height: `${healthLeft * 100}%`,
+            borderRadius: 2,
+            backgroundColor: theme.colors[`solidBackground${healthAccent}`],
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div
+      style={{
+        padding: 8,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+      }}
+    >
+      <div style={{ flex: 1 }} />
+
+      <div
+        style={{
+          display: 'flex',
+          flex: 1,
+        }}
+      >
+        <div
+          style={{
+            flex: 2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 16,
+              color: theme.colors.textLowContrast,
+            }}
+          >
+            Damage
+          </span>
+        </div>
+        <div
+          style={{
+            flex: 2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 16,
+              color: theme.colors.textLowContrast,
+            }}
+          >
+            WN8
+          </span>
+        </div>
+        <div
+          style={{
+            flex: 2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 16,
+              color: theme.colors.textLowContrast,
+            }}
+          >
+            XP
+          </span>
+        </div>
+        <div
+          style={{
+            flex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <span
+            style={{
+              fontSize: 16,
+              color: theme.colors.textLowContrast,
+            }}
+          >
+            Kills
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const replayCommand = new Promise<CommandRegistry>((resolve) => {
+  resolve({
+    inProduction: true,
+    inPublic: true,
+    command: createLocalizedCommand('replay').addAttachmentOption((option) =>
+      option.setName('file').setDescription('Replay file').setRequired(true),
+    ),
+
+    async handler(interaction) {
+      const awaitedMapDefinitions = await mapDefinitions;
+      const file = interaction.options.getAttachment('file')!;
+      // const file = {
+      //   url: 'https://cdn.discordapp.com/ephemeral-attachments/1232434891652861972/1232781496016834581/20240328_1530__TresAbhi_M60_1157057448155406708.wotbreplay?ex=662ab4bc&is=6629633c&hm=c784cd10e80232350ddaf291fa987b879c4d0a8083b78298c9eee4fa0d507f6c&',
+      // };
+      const submissionData = (await fetch(
+        `https://wotinspector.com/api/replay/upload/?url=${encodeURIComponent(
+          file.url,
+        )}`,
+      ).then((response) => response.json())) as WotInspectorReplaySubmission;
+
+      if (submissionData.status === 'error') {
+        return `# Uh oh! WoT Inspector didn't like that.\n\nThere was an error processing your replay. Get help on [the official Discord server](https://discord.gg/nDt7AjGJQH).`;
+      }
+
+      const replayId = submissionData.data.download_url.split('/').at(-1)!;
+      const replayData = (await fetch(
+        `https://api.wotinspector.com/v2/blitz/replays/${replayId}/`,
+      ).then((response) => response.json())) as WotInspectorReplay;
+      const antagonistTeamId = 3 - replayData.protagonist_team;
+      const players = replayData.players_data.sort(
+        (a, b) => b.damage_made - a.damage_made,
+      );
+      const clan = (
+        await getClanAccountInfo(
+          idToRegion(replayData.protagonist),
+          replayData.protagonist,
+          ['clan'],
+        )
+      )?.clan;
+      const clanImage = clan ? emblemURL(clan.emblem_set_id) : undefined;
+
+      return [
+        new RenderConfiguration({ width: 960 }),
+        <CommandWrapper>
+          <TitleBar
+            title={replayData.player_name}
+            image={clanImage}
+            description={`${
+              replayData.protagonist_team === replayData.winner_team
+                ? 'Victory'
+                : 'Defeat'
+            } • ${awaitedMapDefinitions[replayData.map_id].name}`}
+          />
+
+          <div
+            style={{
+              display: 'flex',
+              gap: 8,
+            }}
+          >
+            <div
+              style={{
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+              }}
+            >
+              <Header />
+
+              {await Promise.all(
+                players
+                  .filter(
+                    (player) => player.team === replayData.protagonist_team,
+                  )
+                  .map((player) =>
+                    playerListing(
+                      player,
+                      true,
+                      replayData.winner_team,
+                      player.dbid === replayData.protagonist,
+                    ),
+                  ),
+              )}
+            </div>
+
+            <div
+              style={{
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 4,
+              }}
+            >
+              <Header />
+
+              {await Promise.all(
+                players
+                  .filter((player) => player.team === antagonistTeamId)
+                  .map((player) =>
+                    playerListing(player, false, replayData.winner_team),
+                  ),
+              )}
+            </div>
+          </div>
+        </CommandWrapper>,
+        buttonLink(submissionData.data.view_url, 'WoT Inspector'),
+        buttonLink(submissionData.data.download_url, 'Download'),
+      ];
+    },
+  });
+});

src/commands/research.tsx

@@ -9,7 +9,7 @@ import resolveTankId from '../core/blitz/resolveTankId';
 import { asset } from '../core/blitzkit/asset';
 import { buildTechTreeLine } from '../core/blitzkit/buildTechTreeLine';
 import { emblemURL } from '../core/blitzkit/emblemURL';
-import { webpToPng } from '../core/blitzkit/iconPng';
+import { iconPng } from '../core/blitzkit/iconPng';
 import { resolveAncestry } from '../core/blitzkit/resolveAncestry';
 import { tankDefinitions } from '../core/blitzkit/tankDefinitions';
 import {
@@ -280,7 +280,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                   }}
                 >
                   <img
-                    src={await webpToPng(asset('icons/currencies/xp.webp'))}
+                    alt="XP icon"
+                    src={await iconPng(asset('icons/currencies/xp.webp'))}
                     width={16}
                     height={16}
                   />
@@ -305,7 +306,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                   }}
                 >
                   <img
-                    src={await webpToPng(asset('icons/currencies/silver.webp'))}
+                    alt="Silver icon"
+                    src={await iconPng(asset('icons/currencies/silver.webp'))}
                     width={16}
                     height={16}
                   />
@@ -330,7 +332,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                   }}
                 >
                   <img
-                    src={await webpToPng(asset('icons/currencies/silver.webp'))}
+                    alt="Silver icon"
+                    src={await iconPng(asset('icons/currencies/silver.webp'))}
                     width={16}
                     height={16}
                   />
@@ -390,6 +393,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                       }}
                     >
                       <img
+                        alt="Tank icon"
                         src={await tankIconPng(id)}
                         style={{
                           height: 100,
@@ -414,6 +418,7 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
+                          alt={tank.name}
                           src={TANK_ICONS[tank.class]}
                           width={16}
                           height={16}
@@ -447,9 +452,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
-                          src={await webpToPng(
-                            asset('icons/currencies/xp.webp'),
-                          )}
+                          alt="XP icon"
+                          src={await iconPng(asset('icons/currencies/xp.webp'))}
                           width={16}
                           height={16}
                         />
@@ -476,7 +480,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                           }}
                         >
                           <img
-                            src={await webpToPng(
+                            alt="Free XP icon"
+                            src={await iconPng(
                               asset('icons/currencies/free-xp.webp'),
                             )}
                             width={16}
@@ -503,7 +508,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
-                          src={await webpToPng(
+                          alt="Silver icon"
+                          src={await iconPng(
                             asset('icons/currencies/silver.webp'),
                           )}
                           width={16}
@@ -531,7 +537,8 @@ export const researchCommand = new Promise<CommandRegistry>((resolve) => {
                         }}
                       >
                         <img
-                          src={await webpToPng(
+                          alt="Silver icon"
+                          src={await iconPng(
                             asset('icons/currencies/silver.webp'),
                           )}
                           width={16}

src/components/AllStatsOverview/index.tsx

@@ -32,14 +32,15 @@ export default function AllStatsOverview({
 }: AllStatsOverviewProps) {
   const { t, translate } = translator(locale);
   const percentile =
-    supplementaryStats.WN8 === undefined
-      ? Percentile.VeryBad
-      : getWN8Percentile(supplementaryStats.WN8);
+    typeof supplementaryStats.WN8 === 'number'
+      ? getWN8Percentile(supplementaryStats.WN8)
+      : Percentile.VeryBad;
   const color = PERCENTILE_COLORS[percentile];
+
   const heroStat =
-    supplementaryStats.WN8 === undefined
-      ? '--'
-      : supplementaryStats.WN8.toFixed(0);
+    typeof supplementaryStats.WN8 === 'number'
+      ? supplementaryStats.WN8.toFixed(0)
+      : '--';
 
   return (
     <div

src/components/Armor/components/CoreArmorScene.tsx

@@ -13,6 +13,7 @@ import { useModelDefinitions } from '../../../hooks/useModelDefinitions';
 import { useDuel } from '../../../stores/duel';
 import { useTankopediaPersistent } from '../../../stores/tankopedia';
 import { CoreArmorSceneComponent } from './CoreArmorSceneComponent';
+import { ShotDisplay } from './ShotDisplay';
 
 export const CoreArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
@@ -135,86 +136,94 @@ export const CoreArmorScene = memo(() => {
   ).applyAxisAngle(I_HAT, Math.PI / 2);
 
   return (
-    <group
-      ref={wrapper}
-      rotation={[-Math.PI / 2, 0, 0]}
-      visible={initialTankopediaState.mode === 'armor'}
-    >
-      <group position={hullOrigin}>
-        {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
-          const isVisible = isHull;
-          const armorId = nameToArmorId(node.name);
-          const { spaced, thickness } = resolveArmor(
-            tankModelDefinition.armor,
-            armorId,
-          );
+    <>
+      <ShotDisplay />
 
-          if (!isVisible || spaced || thickness === undefined) return null;
-
-          return (
-            <CoreArmorSceneComponent
-              key={node.uuid}
-              thickness={thickness}
-              node={node}
-            />
-          );
-        })}
-      </group>
-
-      <group ref={turretContainer}>
+      <group
+        ref={wrapper}
+        rotation={[-Math.PI / 2, 0, 0]}
+        visible={initialTankopediaState.mode === 'armor'}
+      >
         <group position={hullOrigin}>
           {armorNodes.map((node) => {
-            const isCurrentTurret = node.name.startsWith(
-              `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
-            );
-            const isVisible = isCurrentTurret;
+            const isHull = node.name.startsWith('hull_');
+            const isVisible = isHull;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
-              turretModelDefinition.armor,
+              tankModelDefinition.armor,
               armorId,
             );
 
             if (!isVisible || spaced || thickness === undefined) return null;
 
             return (
-              <group key={node.uuid} position={turretOrigin}>
-                <CoreArmorSceneComponent
-                  key={node.uuid}
-                  thickness={thickness}
-                  node={node}
-                />
-              </group>
+              <CoreArmorSceneComponent
+                key={node.uuid}
+                thickness={thickness}
+                node={node}
+              />
             );
           })}
         </group>
-        <group ref={gunContainer}>
+
+        <group ref={turretContainer}>
           <group position={hullOrigin}>
             {armorNodes.map((node) => {
-              const isCurrentGun = node.name.startsWith(
-                `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+              const isCurrentTurret = node.name.startsWith(
+                `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
               );
-              const isVisible = isCurrentGun;
+              const isVisible = isCurrentTurret;
               const armorId = nameToArmorId(node.name);
               const { spaced, thickness } = resolveArmor(
-                gunModelDefinition.armor,
+                turretModelDefinition.armor,
                 armorId,
               );
 
               if (!isVisible || spaced || thickness === undefined) return null;
 
               return (
-                <group
-                  key={node.uuid}
-                  position={turretOrigin.clone().add(gunOrigin)}
-                >
-                  <CoreArmorSceneComponent thickness={thickness} node={node} />
+                <group key={node.uuid} position={turretOrigin}>
+                  <CoreArmorSceneComponent
+                    key={node.uuid}
+                    thickness={thickness}
+                    node={node}
+                  />
                 </group>
               );
             })}
           </group>
+          <group ref={gunContainer}>
+            <group position={hullOrigin}>
+              {armorNodes.map((node) => {
+                const isCurrentGun = node.name.startsWith(
+                  `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+                );
+                const isVisible = isCurrentGun;
+                const armorId = nameToArmorId(node.name);
+                const { spaced, thickness } = resolveArmor(
+                  gunModelDefinition.armor,
+                  armorId,
+                );
+
+                if (!isVisible || spaced || thickness === undefined)
+                  return null;
+
+                return (
+                  <group
+                    key={node.uuid}
+                    position={turretOrigin.clone().add(gunOrigin)}
+                  >
+                    <CoreArmorSceneComponent
+                      thickness={thickness}
+                      node={node}
+                    />
+                  </group>
+                );
+              })}
+            </group>
+          </group>
         </group>
       </group>
-    </group>
+    </>
   );
 });

src/components/Armor/components/CoreArmorSceneComponent/index.tsx

@@ -5,6 +5,7 @@ import { degToRad } from 'three/src/math/MathUtils';
 import { canSplash } from '../../../../core/blitz/canSplash';
 import { isExplosive } from '../../../../core/blitz/isExplosive';
 import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetration';
+import { resolvePenetrationCoefficient } from '../../../../core/blitz/resolvePenetrationCoefficient';
 import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../core/blitzkit/jsxTree';
 import { ShellDefinition } from '../../../../core/blitzkit/tankDefinitions';
@@ -60,7 +61,9 @@ export function CoreArmorSceneComponent({
   useEffect(() => {
     async function handleShellChange(shell: ShellDefinition) {
       material.uniforms.caliber.value = shell.caliber;
-      material.uniforms.ricochet.value = degToRad(shell.ricochet ?? 90);
+      material.uniforms.ricochet.value = degToRad(
+        isExplosive(shell.type) ? 90 : shell.ricochet!,
+      );
       material.uniforms.normalization.value = degToRad(
         shell.normalization ?? 0,
       );
@@ -91,23 +94,22 @@ export function CoreArmorSceneComponent({
         equipment,
       );
       material.uniforms.thickness.value = hasEnhancedArmor
-        ? thickness * 1.04
+        ? thickness * 1.03
         : thickness;
     }
     async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = useDuel.getState();
-      const penetration = resolveNearPenetration(
-        duel.antagonist!.shell.penetration,
-      );
+      const shell = duel.antagonist!.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
       const hasCalibratedShells = await hasEquipment(
         103,
         duel.antagonist!.tank.equipment,
         equipment,
       );
 
-      material.uniforms.penetration.value = hasCalibratedShells
-        ? penetration * (isExplosive(duel.antagonist!.shell.type) ? 1.1 : 1.05)
-        : penetration;
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
     }
 
     handleShellChange(useDuel.getState().antagonist!.shell);

src/components/Armor/components/ShotDisplay.tsx

@@ -1,27 +1,18 @@
-import { Card, Flex, Text } from '@radix-ui/themes';
+import { Card, Flex, Inset, Separator, Text } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
-import { useEffect, useRef } from 'react';
-import { Mesh } from 'three';
+import { ComponentProps, useRef } from 'react';
+import { Euler, Mesh, Quaternion } from 'three';
 import { radToDeg } from 'three/src/math/MathUtils';
-import { canSplash } from '../../../core/blitz/canSplash';
-import { isExplosive } from '../../../core/blitz/isExplosive';
-import { NaNFallback } from '../../../core/math/NaNFallback';
-import { normalToEuler } from '../../../core/math/normalToEuler';
-import { AngledPenetration } from '../../../icons/AngledPenetration';
-import { Block } from '../../../icons/Block';
-import { NominalPenetration } from '../../../icons/NominalPenetration';
-import { Ricochet } from '../../../icons/Ricochet';
-import { useDuel } from '../../../stores/duel';
+import { J_HAT } from '../../../constants/axis';
 import {
   ShotLayer,
-  ShotLayerBase,
-  ShotLayerGap,
   ShotLayerNonExternal,
-  mutateTankopediaTemporary,
+  ShotStatus,
   useTankopediaTemporary,
 } from '../../../stores/tankopedia';
 import { ArmorType } from './SpacedArmorScene';
+import { ExternalModuleVariant } from './SpacedArmorSceneComponent';
 
 const layerTypeNames: Record<ArmorType | 'null', string> = {
   [ArmorType.Core]: 'Core',
@@ -30,297 +21,378 @@ const layerTypeNames: Record<ArmorType | 'null', string> = {
   null: 'Gap',
 };
 
+const externalLayerNames: Record<ExternalModuleVariant, string> = {
+  gun: 'Gun',
+  track: 'Tracks',
+};
+
+const shotStatusNames: Record<ShotStatus, string> = {
+  blocked: 'Blocked',
+  ricochet: 'Ricochet',
+  penetration: 'penetration',
+  splash: 'splash',
+};
+
+const shotStatusColors: Record<
+  ShotStatus,
+  ComponentProps<typeof Text>['color']
+> = {
+  blocked: 'red',
+  penetration: 'green',
+  ricochet: 'yellow',
+  splash: 'orange',
+};
+
+const SURFACE_POINT_SIZE = 12;
 const LENGTH_INFINITY = 4;
-const TRACER_THICK = 1 / 64;
+const TRACER_THICK = 1 / 32;
 const TRACER_THIN = TRACER_THICK / 2;
 
+function LayerEntry({
+  layerIndex,
+  shotStatusColor,
+  layerName,
+  layer,
+  angle,
+}: {
+  layerIndex?: string;
+  shotStatusColor: ComponentProps<typeof Text>['color'];
+  layerName: string;
+  layer: ShotLayer;
+  angle?: number;
+}) {
+  return (
+    <Flex align="center" gap="2">
+      <Text
+        size="1"
+        color="gray"
+        style={{
+          width: 12,
+        }}
+      >
+        {layerIndex}
+      </Text>
+      <Text size="2" color={shotStatusColor} style={{ width: 47 }}>
+        {layerName}
+      </Text>
+
+      {layer.type === null && (
+        <>
+          <Text
+            size="2"
+            color={shotStatusColor}
+            style={{
+              width: 64,
+            }}
+          >
+            {Math.round(layer.distance * 1000).toLocaleString()}
+            <Text size="1">mm</Text>
+          </Text>
+
+          <Text size="2" color="gray">
+            {Math.max(-100, Math.round(-50 * layer.distance))}% penetration
+          </Text>
+        </>
+      )}
+
+      {layer.type === ArmorType.External && (
+        <Text
+          size="2"
+          color={shotStatusColor}
+          style={{
+            width: 64,
+          }}
+        >
+          {Math.round(layer.thickness).toLocaleString()}
+          <Text size="1">mm</Text>
+        </Text>
+      )}
+
+      {(layer.type === ArmorType.Core || layer.type === ArmorType.Spaced) && (
+        <>
+          <Text
+            size="2"
+            color={shotStatusColor}
+            style={{
+              width: 80,
+            }}
+          >
+            {Math.round(layer.thicknessAngled).toLocaleString()}
+            <Text size="1">{`mm${angle === undefined ? '' : ` ${Math.round(radToDeg(angle))}°`}`}</Text>
+          </Text>
+
+          <Text size="2" color="gray">
+            {Math.round(layer.thickness).toLocaleString()}
+            <Text size="1">mm</Text> nominal
+          </Text>
+        </>
+      )}
+    </Flex>
+  );
+}
+
 export function ShotDisplay() {
   const shot = useTankopediaTemporary((state) => state.shot);
-  const preMidPointTracer = useRef<Mesh>(null);
-  const postMidPointTracer = useRef<Mesh>(null);
-  const hasMultipleLayers = shot?.layers.some(
-    (layer, index) => index !== 0 && layer.type !== null,
-  );
-  const { shell } = useDuel.getState().antagonist!;
-  const explosive = isExplosive(shell.type);
-  const splashing = canSplash(shell.type);
-  const midPointLayer = (shot?.layers.findLast(
-    (layer) => layer.type !== null && layer.status === 'ricochet',
-  ) ?? shot?.layers.findLast((layer) => layer.type !== null)) as ShotLayerBase;
-  const firstLayer = shot?.layers[0] as Exclude<ShotLayer, ShotLayerGap>;
-  const lastLayer = shot?.layers.at(-1)!;
-  const distanceFromSpacedArmor = shot
-    ? firstLayer.point.distanceTo(shot.point)
-    : undefined;
-  const preMidPointLayers = shot?.layers.slice(
-    0,
-    shot.layers.indexOf(midPointLayer as ShotLayer),
-  );
-  const postMidPointLayers = shot?.layers.slice(
-    shot.layers.indexOf(midPointLayer as ShotLayer),
-    shot.layers.length,
-  );
-  const preMidPointGap = shot
-    ? preMidPointLayers!.reduce((accumulator, layer) => {
-        if (layer.type === null) return accumulator + layer.distance;
-        return accumulator;
-      }, 0) + LENGTH_INFINITY
-    : undefined;
-  const preMidPointThickness = shot
-    ? preMidPointLayers!.reduce(
-        (accumulator, layer) =>
-          accumulator +
-          (layer.type === null
-            ? 0
-            : layer.type === ArmorType.External
-              ? layer.thickness
-              : layer.thicknessAngled),
-        0,
-      )
-    : undefined;
-  const postMidPointGap = shot
-    ? postMidPointLayers!.reduce((accumulator, layer) => {
-        if (layer.type === null) return accumulator + layer.distance;
-        return accumulator;
-      }, 0) || LENGTH_INFINITY
-    : undefined;
+  const inTracer = useRef<Mesh>(null);
+  const outTracer = useRef<Mesh>(null);
 
   useFrame(({ clock }) => {
-    if (!shot || !preMidPointTracer.current) return;
+    if (!shot || !inTracer.current) return;
 
     const t1 = clock.elapsedTime % 1;
     const t2 = (clock.elapsedTime + 0.5) % 1;
 
-    preMidPointTracer.current.position.set(0, (1 - t1) * preMidPointGap!, 0);
-    preMidPointTracer.current.scale.set(1, 1 - 2 * Math.abs(t1 - 0.5), 1);
+    inTracer.current.scale.set(1, 1 - 2 * Math.abs(t1 - 0.5), 1);
+    inTracer.current.position.set(0, (1 - t1) * inLength, 0);
 
-    if (!postMidPointTracer.current) return;
+    if (!outTracer.current) return;
 
-    postMidPointTracer.current.position.set(0, t2 * postMidPointGap!, 0);
-    postMidPointTracer.current.scale.set(1, 1 - 2 * Math.abs(t2 - 0.5), 1);
-  });
-
-  useEffect(() => {
-    function resetShot() {
-      mutateTankopediaTemporary((draft) => {
-        draft.shot = undefined;
-      });
-    }
-
-    const unsubscribes = [
-      useDuel.subscribe((state) => state.protagonist?.tank, resetShot),
-      useDuel.subscribe((state) => state.antagonist?.tank, resetShot),
-    ];
-
-    return () => {
-      unsubscribes.forEach((unsubscribe) => unsubscribe());
-    };
+    outTracer.current.scale.set(1, 1 - 2 * Math.abs(t2 - 0.5), 1);
+    outTracer.current.position.set(0, t2 * outLength, 0);
   });
 
   if (!shot) return null;
 
+  const inLength =
+    shot.in.layers.reduce((accumulator, layer) => {
+      if (layer.type === null) return accumulator + layer.distance;
+      return accumulator;
+    }, 0) + LENGTH_INFINITY;
+  const outLength =
+    shot.out && shot.out.layers.length > 0
+      ? (shot.in.layers.at(-1) as ShotLayerNonExternal).point.distanceTo(
+          (shot.out.layers.at(-1) as ShotLayerNonExternal).point,
+        )
+      : LENGTH_INFINITY;
+  const inLast = shot.in.layers.findLast(
+    (layer) => layer.type !== null,
+  ) as ShotLayerNonExternal;
+  const outTitleColor = shot.out
+    ? shotStatusColors[shot.out.status]
+    : undefined;
+  const inTitleColor = shotStatusColors[shot.in.status];
+
   return (
-    <>
-      <group
-        position={midPointLayer.point}
-        rotation={normalToEuler(midPointLayer.shellNormal)}
+    <group>
+      <Html
+        position={inLast.point}
+        style={{
+          pointerEvents: 'none',
+          transform: 'translateY(-50%)',
+        }}
       >
-        <mesh position={[0, preMidPointGap! / 2, 0]}>
-          <cylinderGeometry args={[TRACER_THIN, TRACER_THIN, preMidPointGap]} />
-          <meshBasicMaterial depthTest={false} />
+        <Card ml="9" style={{ width: 300 }}>
+          <Flex direction="column" gap="2">
+            <Flex direction="column" gap="1">
+              <Text color={inTitleColor} weight="bold">
+                {shot.in.status !== 'blocked' &&
+                  shot.in.status !== 'ricochet' && (
+                    <>
+                      {Math.round(shot.damage).toLocaleString()}
+                      <Text size="1">hp</Text>
+                    </>
+                  )}
+                {` ${shotStatusNames[shot.in.status]} `}
+              </Text>
+
+              <Flex direction="column">
+                {shot.in.layers.map((layer, index) => {
+                  const layerName =
+                    layer.type === ArmorType.External
+                      ? externalLayerNames[layer.variant]
+                      : layerTypeNames[`${layer.type}`];
+                  const layerIndex =
+                    layer.type === null
+                      ? undefined
+                      : `${(shot.containsGaps ? index / 2 : index) + 1}.`;
+                  const shotStatusColor =
+                    shot.in.status === 'splash'
+                      ? shotStatusColors.splash
+                      : shotStatusColors[layer.status];
+
+                  return (
+                    <LayerEntry
+                      key={index}
+                      layer={layer}
+                      layerIndex={layerIndex}
+                      layerName={layerName}
+                      shotStatusColor={shotStatusColor}
+                      angle={
+                        layer.type === ArmorType.Core ||
+                        layer.type === ArmorType.Spaced
+                          ? layer.angle
+                          : undefined
+                      }
+                    />
+                  );
+                })}
+              </Flex>
+            </Flex>
+
+            {shot.out && shot.out.layers.length > 0 && (
+              <>
+                <Inset side="x">
+                  <Flex align="center" gap="2">
+                    <Separator
+                      style={{
+                        flex: 1,
+                      }}
+                    />
+                    <Text size="1" color="gray">
+                      ricochet (-25% penetration)
+                    </Text>
+                    <Separator
+                      style={{
+                        flex: 1,
+                      }}
+                    />
+                  </Flex>
+                </Inset>
+
+                <Text color={outTitleColor} weight="bold">
+                  {shot.out.status !== 'blocked' &&
+                    shot.out.status !== 'ricochet' && (
+                      <>
+                        {Math.round(shot.damage).toLocaleString()}
+                        <Text size="1">hp</Text>
+                      </>
+                    )}
+                  {` ${shotStatusNames[shot.out.status]} `}
+                </Text>
+
+                <Flex direction="column">
+                  {shot.out.layers.map((layer, index) => {
+                    const layerName =
+                      layer.type === ArmorType.External
+                        ? externalLayerNames[layer.variant]
+                        : layerTypeNames[`${layer.type}`];
+                    const shiftedIndex = index + shot.out!.layers.length;
+                    const layerIndex =
+                      layer.type === null
+                        ? undefined
+                        : `${(shot.containsGaps ? shiftedIndex / 2 : shiftedIndex) + 1}.`;
+                    const shotStatusColor =
+                      shot.out!.status === 'splash'
+                        ? shotStatusColors.splash
+                        : shotStatusColors[layer.status];
+
+                    return (
+                      <LayerEntry
+                        key={index}
+                        layer={layer}
+                        layerIndex={layerIndex}
+                        layerName={layerName}
+                        shotStatusColor={shotStatusColor}
+                        angle={
+                          layer.type === ArmorType.Core ||
+                          layer.type === ArmorType.Spaced
+                            ? layer.angle
+                            : undefined
+                        }
+                      />
+                    );
+                  })}
+                </Flex>
+              </>
+            )}
+          </Flex>
+        </Card>
+      </Html>
+
+      {[...shot.in.layers, ...(shot.out?.layers ?? [])].map((layer, index) => {
+        if (layer.type === null) return null;
+
+        const shotStatusColor =
+          shot.in.status === 'splash'
+            ? shotStatusColors.splash
+            : shotStatusColors[layer.status];
+
+        return (
+          <Html
+            position={layer.point}
+            key={index}
+            style={{
+              pointerEvents: 'none',
+              transform: 'translateY(-50%)',
+            }}
+          >
+            <Flex
+              style={{
+                marginLeft: -SURFACE_POINT_SIZE / 2,
+              }}
+            >
+              <div
+                style={{
+                  width: SURFACE_POINT_SIZE,
+                  height: SURFACE_POINT_SIZE,
+                  backgroundColor: shotStatusColor,
+                  opacity: 0.75,
+                  borderRadius: SURFACE_POINT_SIZE / 2,
+                }}
+              />
+            </Flex>
+          </Html>
+        );
+      })}
+
+      <group
+        position={inLast.point}
+        rotation={new Euler().setFromQuaternion(
+          new Quaternion().setFromUnitVectors(J_HAT, shot.in.surfaceNormal),
+        )}
+      >
+        <mesh position={[0, inLength / 2, 0]} renderOrder={2}>
+          <cylinderGeometry
+            args={[TRACER_THIN / 2, TRACER_THIN / 2, inLength]}
+          />
+          <meshBasicMaterial depthTest={false} transparent />
         </mesh>
 
-        <mesh position={[0, preMidPointGap! / 2, 0]} ref={preMidPointTracer}>
+        <mesh ref={inTracer} position={[0, inLength / 2, 0]} renderOrder={3}>
           <cylinderGeometry
-            args={[TRACER_THICK, TRACER_THICK, preMidPointGap]}
+            args={[TRACER_THICK / 2, TRACER_THICK / 2, inLength]}
           />
           <meshBasicMaterial
-            color={
-              lastLayer.status === 'blocked'
-                ? 0xff4040
-                : lastLayer.status === 'penetration'
-                  ? 0x00ff00
-                  : 0xffff00
-            }
+            color={inTitleColor}
+            depthTest={false}
+            transparent
           />
         </mesh>
       </group>
 
-      {midPointLayer.status === 'ricochet' && (
+      {shot.out && (
         <group
-          position={midPointLayer.point}
-          rotation={normalToEuler(
-            midPointLayer.shellNormal
-              .clone()
-              .reflect(midPointLayer.surfaceNormal)
-              .multiplyScalar(-1),
+          position={inLast.point}
+          rotation={new Euler().setFromQuaternion(
+            new Quaternion().setFromUnitVectors(
+              J_HAT,
+              shot.out.surfaceNormal.clone(),
+            ),
           )}
         >
-          <mesh position={[0, postMidPointGap! / 2, 0]}>
+          <mesh position={[0, outLength / 2, 0]} renderOrder={2}>
             <cylinderGeometry
-              args={[TRACER_THIN, TRACER_THIN, postMidPointGap]}
+              args={[TRACER_THIN / 2, TRACER_THIN / 2, outLength]}
             />
-            <meshBasicMaterial depthTest={false} />
+            <meshBasicMaterial depthTest={false} transparent />
           </mesh>
 
           <mesh
-            position={[0, postMidPointGap! / 2, 0]}
-            ref={postMidPointTracer}
+            ref={outTracer}
+            position={[0, outLength / 2, 0]}
+            renderOrder={3}
           >
             <cylinderGeometry
-              args={[TRACER_THICK, TRACER_THICK, postMidPointGap]}
+              args={[TRACER_THICK / 2, TRACER_THICK / 2, outLength]}
+            />
+            <meshBasicMaterial
+              color={outTitleColor}
+              depthTest={false}
+              transparent
             />
-            <meshBasicMaterial color={0xffff00} />
           </mesh>
         </group>
       )}
-
-      {shot.layers.map((layer, index) => {
-        if (layer.type === null) return;
-
-        const shellRotation = normalToEuler(layer.shellNormal);
-        const nextLayer = shot.layers[index + 1] as ShotLayerGap | undefined;
-        const trueStatus =
-          nextLayer?.status === 'blocked' ? 'blocked' : layer.status;
-
-        return (
-          <>
-            <group
-              key={`${index}-line`}
-              position={layer.point}
-              rotation={shellRotation}
-            >
-              <Html
-                center
-                style={{
-                  pointerEvents: 'none',
-                }}
-              >
-                <div
-                  style={{
-                    backgroundColor:
-                      trueStatus === 'penetration'
-                        ? '#00ff0080'
-                        : trueStatus === 'blocked'
-                          ? '#ff000080'
-                          : '#ffff0080',
-                    borderRadius: 8,
-                    border: 'none',
-                    padding: 4,
-                    width: hasMultipleLayers ? undefined : 8,
-                    height: hasMultipleLayers ? undefined : 8,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                  }}
-                >
-                  {hasMultipleLayers && (
-                    <Text
-                      size="2"
-                      style={{
-                        width: '100%',
-                        display: 'block',
-                        textAlign: 'center',
-                        color: trueStatus === 'ricochet' ? 'black' : undefined,
-                      }}
-                    >
-                      <b>{layer.index + 1}</b>
-                    </Text>
-                  )}
-                </div>
-              </Html>
-            </group>
-          </>
-        );
-      })}
-
-      <Html
-        position={midPointLayer.point}
-        style={{
-          transform: 'translateY(-50%)',
-          marginLeft: 32,
-          pointerEvents: 'none',
-        }}
-      >
-        <Card style={{ width: 256 + 32 }}>
-          <Flex direction="column">
-            <Text>
-              {lastLayer.status[0].toUpperCase()}
-              {lastLayer.status.slice(1)}
-              {lastLayer.status === 'penetration' &&
-                `: ${Math.round(shell.damage.armor)}hp`}
-              {lastLayer.status === 'blocked' &&
-                shell.type === 'he' &&
-                `: ${NaNFallback(
-                  Math.max(
-                    0,
-                    Math.round(
-                      0.5 *
-                        shell.damage.armor *
-                        (1 -
-                          distanceFromSpacedArmor! / shell.explosionRadius!) -
-                        1.1 *
-                          ((midPointLayer as ShotLayerNonExternal)
-                            .thicknessAngled +
-                            preMidPointThickness!),
-                    ),
-                  ),
-                  0,
-                )}hp`}
-            </Text>
-
-            {shot.layers.map((layer, index) => {
-              if (layer.type === null && (!explosive || splashing)) return null;
-
-              return (
-                <Flex key={index} align="center" gap="2">
-                  <Flex>
-                    {hasMultipleLayers && (
-                      <Text size="2" style={{ width: 16 }}>
-                        {layer.type === null ? null : `${layer.index + 1}.`}
-                      </Text>
-                    )}
-                    <Text size="2">{layerTypeNames[`${layer.type}`]}</Text>
-                  </Flex>
-
-                  {layer.type !== null && (
-                    <>
-                      <Flex align="center" style={{ width: 64 }}>
-                        <NominalPenetration width={16} height={16} />
-                        <Text size="2">{Math.round(layer.thickness)}mm</Text>
-                      </Flex>
-
-                      {layer.type !== ArmorType.External && (
-                        <Flex align="center">
-                          {layer.status === 'ricochet' ? (
-                            <Ricochet width={16} height={16} />
-                          ) : layer.status === 'blocked' ? (
-                            <Block width={16} height={16} />
-                          ) : (
-                            <AngledPenetration width={16} height={16} />
-                          )}
-                          <Text size="2">
-                            {Math.round(layer.thicknessAngled)}mm (
-                            {Math.round(radToDeg(layer.angle))}°)
-                          </Text>
-                        </Flex>
-                      )}
-                    </>
-                  )}
-
-                  {layer.type === null && (
-                    <Text size="2">
-                      {Math.round(layer.distance * 1000)}mm (-
-                      {Math.round(Math.min(100, layer.distance * 50))}%
-                      penetration)
-                    </Text>
-                  )}
-                </Flex>
-              );
-            })}
-          </Flex>
-        </Card>
-      </Html>
-    </>
+    </group>
   );
 }

src/components/Armor/components/SpacedArmorScene.tsx

@@ -259,9 +259,10 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           </group>
 
           {modelNodes.map((node) => {
-            const isCurrentGun = node.name.startsWith(
-              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
-            );
+            const gunString = `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
+            const isCurrentGun = gunModelDefinition.mask
+              ? node.name.startsWith(gunString)
+              : node.name === gunString;
             const isVisible = isCurrentGun;
 
             if (!isVisible) return null;

src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx

@@ -7,8 +7,8 @@ import {
   ShaderMaterial,
 } from 'three';
 import { ArmorUserData, ExternalModuleVariant } from '../..';
-import { isExplosive } from '../../../../../../core/blitz/isExplosive';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
+import { resolvePenetrationCoefficient } from '../../../../../../core/blitz/resolvePenetrationCoefficient';
 import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
 import { ShellDefinition } from '../../../../../../core/blitzkit/tankDefinitions';
@@ -62,22 +62,22 @@ export function SpacedArmorSubExternal({
         equipment,
       );
       material.uniforms.thickness.value = hasEnhancedArmor
-        ? thickness * 1.04
+        ? thickness * 1.03
         : thickness;
     }
     async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = useDuel.getState();
-      const penetration = resolveNearPenetration(
-        duel.antagonist!.shell.penetration,
-      );
+      const shell = duel.antagonist!.shell;
+      const penetration = resolveNearPenetration(shell.penetration);
       const hasCalibratedShells = await hasEquipment(
         103,
         duel.antagonist!.tank.equipment,
         equipment,
       );
-      material.uniforms.penetration.value = hasCalibratedShells
-        ? penetration * (isExplosive(duel.antagonist!.shell.type) ? 1.1 : 1.05)
-        : penetration;
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
     }
 
     handleShellChange(useDuel.getState().antagonist!.shell);

src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx

@@ -9,6 +9,7 @@ import { degToRad } from 'three/src/math/MathUtils';
 import { ArmorUserData } from '../..';
 import { isExplosive } from '../../../../../../core/blitz/isExplosive';
 import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
+import { resolvePenetrationCoefficient } from '../../../../../../core/blitz/resolvePenetrationCoefficient';
 import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
 import { ShellDefinition } from '../../../../../../core/blitzkit/tankDefinitions';
@@ -54,7 +55,9 @@ export function SpacedArmorSubSpaced({
         shell.penetration,
       );
       material.uniforms.caliber.value = shell.caliber;
-      material.uniforms.ricochet.value = degToRad(shell.ricochet ?? 90);
+      material.uniforms.ricochet.value = degToRad(
+        isExplosive(shell.type) ? 90 : shell.ricochet!,
+      );
       material.uniforms.normalization.value = degToRad(
         shell.normalization ?? 0,
       );
@@ -69,7 +72,7 @@ export function SpacedArmorSubSpaced({
         equipment,
       );
       material.uniforms.thickness.value = hasEnhancedArmor
-        ? thickness * 1.04
+        ? thickness * 1.03
         : thickness;
     }
     async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
@@ -81,9 +84,10 @@ export function SpacedArmorSubSpaced({
         duel.antagonist!.tank.equipment,
         equipment,
       );
-      material.uniforms.penetration.value = hasCalibratedShells
-        ? penetration * (isExplosive(shell.type) ? 1.1 : 1.05)
-        : penetration;
+
+      material.uniforms.penetration.value =
+        penetration *
+        resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
     }
 
     handleShellChange(useDuel.getState().antagonist!.shell);

src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -10,16 +10,17 @@ import {
   Vector3,
 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
-import { canSplash } from '../../../../core/blitz/canSplash';
 import { isExplosive } from '../../../../core/blitz/isExplosive';
 import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetration';
+import { resolvePenetrationCoefficient } from '../../../../core/blitz/resolvePenetrationCoefficient';
 import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../core/blitzkit/jsxTree';
+import { ShellType } from '../../../../core/blitzkit/tankDefinitions';
 import { useDuel } from '../../../../stores/duel';
 import {
   Shot,
   ShotLayerBase,
-  useTankopediaPersistent,
+  ShotLayerNonExternal,
   useTankopediaTemporary,
 } from '../../../../stores/tankopedia';
 import { ArmorType } from '../SpacedArmorScene';
@@ -78,6 +79,275 @@ export function SpacedArmorSceneComponent({
 }: SpacedArmorSceneComponentProps) {
   const camera = useThree((state) => state.camera);
 
+  async function shoot(
+    point: Vector3,
+    intersections: Intersection[],
+    allowRicochet: boolean,
+    remainingPenetrationInput?: number,
+  ) {
+    const { antagonist, protagonist } = useDuel.getState();
+    const shell = antagonist!.shell;
+    const cameraNormal = camera.position.clone().sub(point).normalize();
+    const shot: Shot = {
+      damage: -1,
+      containsGaps: shell.type === ShellType.HEAT,
+      in: {
+        surfaceNormal: cameraNormal,
+        layers: [],
+        status: 'blocked',
+      },
+    };
+
+    const hasCalibratedShells = await hasEquipment(
+      103,
+      antagonist!.tank.equipment,
+      antagonist!.equipmentMatrix,
+    );
+    const hasEnhancedArmor = await hasEquipment(
+      110,
+      protagonist!.tank.equipment,
+      protagonist!.equipmentMatrix,
+    );
+    const penetration =
+      resolveNearPenetration(shell.penetration) *
+      resolvePenetrationCoefficient(hasCalibratedShells, shell.type);
+    const thicknessCoefficient = hasEnhancedArmor ? 1.03 : 1;
+    const filteredIntersections = intersections.filter(
+      (intersection) => 'type' in intersection.object.userData,
+    ) as unknown as Intersection<Object3D & { userData: ArmorUserData }>[];
+    const encounteredExternalModuleVariants: ExternalModuleVariant[] = [];
+    const noDuplicateIntersections: typeof filteredIntersections = [];
+
+    for (const intersection of filteredIntersections) {
+      if (intersection.object.userData.type === ArmorType.External) {
+        if (
+          !encounteredExternalModuleVariants.includes(
+            intersection.object.userData.variant,
+          )
+        ) {
+          noDuplicateIntersections.push(intersection);
+          encounteredExternalModuleVariants.push(
+            intersection.object.userData.variant,
+          );
+        }
+      } else {
+        noDuplicateIntersections.push(intersection);
+
+        if (intersection.object.userData.type === ArmorType.Core) {
+          break;
+        }
+      }
+    }
+
+    let remainingPenetration = remainingPenetrationInput ?? penetration;
+    let index = 0;
+    for (const intersection of noDuplicateIntersections) {
+      const layer = intersection.object.userData;
+      const surfaceNormal = intersection
+        .normal!.clone()
+        .applyQuaternion(
+          intersection.object.getWorldQuaternion(new Quaternion()),
+        );
+
+      if (shell.type === ShellType.HEAT && index > 0) {
+        const lastLayer = shot.in.layers.at(-1) as ShotLayerBase;
+        const distance = lastLayer.point.distanceTo(intersection.point);
+        remainingPenetration -= 0.5 * remainingPenetration * distance;
+        const blocked = remainingPenetration <= 0;
+
+        shot.in.layers.push({
+          type: null,
+          distance,
+          status: blocked ? 'blocked' : 'penetration',
+        });
+
+        if (blocked) break;
+      }
+
+      if (layer.type === ArmorType.External) {
+        const thickness = layer.thickness * thicknessCoefficient;
+        remainingPenetration -= thickness;
+        const blocked =
+          remainingPenetration <= 0 || shell.type === ShellType.HE;
+
+        shot.in.layers.push({
+          type: ArmorType.External,
+          index,
+          thickness,
+          point: intersection.point,
+          surfaceNormal,
+          status:
+            shell.type === ShellType.HE
+              ? 'blocked'
+              : blocked
+                ? 'blocked'
+                : 'penetration',
+          variant: layer.variant,
+        });
+      } else {
+        const thickness = layer.thickness;
+        const ricochet = degToRad(
+          isExplosive(shell.type) ? 90 : shell.ricochet!,
+        );
+        const angle = surfaceNormal.angleTo(cameraNormal);
+        const threeCalibersRule =
+          shell.caliber > thickness * 3 || index > 0 || !allowRicochet;
+        const twoCalibersRule = shell.caliber > thickness * 2;
+        const normalization = degToRad(shell.normalization ?? 0);
+        const finalNormalization = twoCalibersRule
+          ? (1.4 * normalization * shell.caliber) / (2.0 * thickness)
+          : normalization;
+        const finalThickness =
+          thickness / Math.cos(Math.max(0, angle - finalNormalization));
+
+        if (!threeCalibersRule && angle >= ricochet) {
+          remainingPenetration *= 0.75;
+
+          shot.in.layers.push({
+            type: layer.type,
+            index,
+            thickness,
+            thicknessAngled: finalThickness,
+            point: intersection.point,
+            surfaceNormal,
+            status: 'ricochet',
+            angle,
+          });
+
+          break;
+        } else {
+          remainingPenetration -= finalThickness;
+          const blocked = remainingPenetration <= 0;
+
+          shot.in.layers.push({
+            type: layer.type,
+            index,
+            thickness,
+            thicknessAngled: finalThickness,
+            point: intersection.point,
+            surfaceNormal: intersection.face!.normal,
+            status:
+              shell.type === ShellType.HE && layer.type !== ArmorType.Core
+                ? 'blocked'
+                : blocked
+                  ? 'blocked'
+                  : 'penetration',
+            angle,
+          });
+        }
+      }
+
+      if (shell.type !== ShellType.HE && remainingPenetration <= 0) {
+        break;
+      }
+
+      index++;
+    }
+
+    const lastLayer = shot.in.layers.at(-1) as ShotLayerNonExternal | undefined;
+    const firstLayer = shot.in.layers[0] as ShotLayerBase | undefined;
+
+    if (!lastLayer || !firstLayer) {
+      return null;
+    } else {
+      if (shell.type === ShellType.HE) {
+        const totalSpacedArmorThickness = shot.in.layers.reduce(
+          (acc, layer) => {
+            if (layer.type === null || layer.type === ArmorType.Core) {
+              return acc;
+            }
+
+            if (layer.type === ArmorType.External) {
+              return acc + layer.thickness;
+            }
+
+            return acc + layer.thicknessAngled;
+          },
+          0,
+        );
+        const distanceFromSpacedArmor = firstLayer.point.distanceTo(
+          lastLayer.point,
+        );
+        const finalDamage = Math.max(
+          0,
+          0.5 *
+            shell.damage.armor *
+            (1 - distanceFromSpacedArmor / shell.explosionRadius!) -
+            1.1 *
+              (lastLayer.thicknessAngled +
+                Math.min(penetration, totalSpacedArmorThickness)),
+        );
+
+        /**
+         * Above is some peculiar math. We're multiplying 1.1 by the
+         * thickness of the core plate plus the total spaced armor
+         * thickness capped to the penetration itself. This is because
+         * the shader is normalized by the penetration value; hence,
+         * the total spaced armor thickness cannot ever be thicker
+         * than the penetration. This is a precision error on the
+         * shader-side and I do not intend on fixing it. Instead,
+         * for parity's sake, I am capping the value here.
+         */
+
+        if (shot.in.layers.length > 1 || lastLayer.status === 'blocked') {
+          shot.in.status = finalDamage > 0 ? 'splash' : 'blocked';
+          shot.damage = finalDamage;
+        } else {
+          shot.in.status = 'penetration';
+          shot.damage = shell.damage.armor;
+        }
+      } else {
+        if (lastLayer.status === 'blocked') {
+          shot.in.status = 'blocked';
+          shot.damage = 0;
+        } else if (lastLayer.status === 'penetration') {
+          shot.in.status = 'penetration';
+          shot.damage = shell.damage.armor;
+        } else {
+          const caster = new Raycaster();
+          // https://math.stackexchange.com/a/13263/1222875
+          const shellNormal = cameraNormal.clone().multiplyScalar(-1);
+          const ricochetNormal = shellNormal
+            .clone()
+            .sub(
+              lastLayer.surfaceNormal
+                .clone()
+                .multiplyScalar(2 * shellNormal.dot(lastLayer.surfaceNormal)),
+            );
+
+          caster.set(lastLayer.point, ricochetNormal);
+
+          const ricochetIntersections = caster.intersectObjects(
+            scene.children,
+            true,
+          );
+          const outShot = await shoot(
+            lastLayer.point,
+            ricochetIntersections,
+            false,
+            remainingPenetration,
+          );
+
+          shot.in.status = 'ricochet';
+          if (outShot === null) {
+            shot.damage = 0;
+            shot.out = {
+              surfaceNormal: ricochetNormal,
+              layers: [],
+              status: 'ricochet',
+            };
+          } else {
+            shot.damage = outShot.damage;
+            shot.out = outShot.in;
+            shot.out.surfaceNormal = ricochetNormal;
+          }
+        }
+      }
+    }
+
+    return shot;
+  }
+
   return (
     <>
       {props.type === ArmorType.Core &&
@@ -94,246 +364,11 @@ export function SpacedArmorSceneComponent({
             async onClick(event) {
               event.stopPropagation();
 
-              const duel = useDuel.getState();
-              const hasCalibratedShells = await hasEquipment(
-                103,
-                duel.antagonist!.tank.equipment,
-                duel.antagonist!.equipmentMatrix,
-              );
-              const hasEnhancedArmor = await hasEquipment(
-                110,
-                duel.protagonist!.tank.equipment,
-                duel.protagonist!.equipmentMatrix,
-              );
-              const thicknessCoefficient = hasEnhancedArmor ? 1.04 : 1;
-              const shell = useDuel.getState().antagonist!.shell;
-              const explosive = isExplosive(shell.type);
-              const splashing = canSplash(shell.type);
-              const penetration =
-                resolveNearPenetration(shell.penetration) *
-                (hasCalibratedShells
-                  ? isExplosive(shell.type)
-                    ? 1.1
-                    : 1.05
-                  : 1);
-              const shot: Shot = {
-                layers: [],
-                point: event.point,
-              }; // TODO: type this
-              let remainingPenetration = penetration;
-
-              const shellNormal = camera.position
-                .clone()
-                .sub(event.point)
-                .normalize();
-
-              pushLogs(
-                shellNormal,
-                filterIntersections(event.intersections),
-                0,
-              );
-
-              function filterIntersections(intersectionsRaw: Intersection[]) {
-                const showSpacedArmor =
-                  useTankopediaPersistent.getState().model.visual
-                    .showSpacedArmor;
-                const intersectionsTyped = intersectionsRaw.filter(
-                  ({ object }) => object.userData.type !== undefined,
-                ) as ArmorMeshIntersection[];
-                const intersectionsFiltered = intersectionsTyped.filter(
-                  ({ object }) =>
-                    showSpacedArmor
-                      ? true
-                      : object.userData.type === ArmorType.Core,
-                );
-                const intersectionsWithDuplicates = intersectionsFiltered.slice(
-                  0,
-                  intersectionsFiltered.findIndex(
-                    ({ object }) => object.userData.type === ArmorType.Core,
-                  ) + 1,
-                );
-                const firstGunIntersectionIndex =
-                  intersectionsWithDuplicates.findIndex(
-                    ({ object }) =>
-                      object.userData.type === ArmorType.External &&
-                      object.userData.variant === 'gun',
-                  );
-                const firstTrackIntersectionIndex =
-                  intersectionsWithDuplicates.findIndex(
-                    ({ object }) =>
-                      object.userData.type === ArmorType.External &&
-                      object.userData.variant === 'track',
-                  );
-                let intersections = intersectionsWithDuplicates;
-
-                if (firstGunIntersectionIndex !== -1) {
-                  intersections = intersections.filter(({ object }, index) => {
-                    return object.userData.type === ArmorType.External &&
-                      object.userData.variant === 'gun'
-                      ? index === firstGunIntersectionIndex
-                      : true;
-                  });
-                }
-                if (firstTrackIntersectionIndex !== -1) {
-                  intersections = intersections.filter(({ object }, index) => {
-                    return object.userData.type === ArmorType.External &&
-                      object.userData.variant === 'track'
-                      ? index === firstTrackIntersectionIndex
-                      : true;
-                  });
-                }
-
-                return intersections;
-              }
-
-              function pushLogs(
-                shellNormal: Vector3,
-                intersections: ArmorMeshIntersection[],
-                startingIndex: number,
-              ) {
-                let layerIndex = startingIndex;
-                let loopIndex = 0;
-
-                if (layerIndex !== 0 && intersections.length > 0) {
-                  const distance = (
-                    shot.layers.at(-1) as ShotLayerBase
-                  ).point.distanceTo(intersections[0].point);
-                  if (explosive && !splashing)
-                    remainingPenetration -=
-                      0.5 * remainingPenetration * distance;
-                  const blocked = remainingPenetration < 0;
-
-                  shot.layers.push({
-                    type: null,
-                    status: blocked ? 'blocked' : 'penetration',
-                    distance,
-                  });
-
-                  if (blocked) return;
-                }
-
-                for (const intersection of intersections) {
-                  const surfaceNormal = intersection
-                    .normal!.clone()
-                    .applyQuaternion(
-                      event.object.getWorldQuaternion(new Quaternion()),
-                    );
-                  const thickness =
-                    thicknessCoefficient *
-                    intersection.object.userData.thickness;
-
-                  if (layerIndex !== 0 && startingIndex === 0) {
-                    const previousIntersection = intersections[layerIndex - 1];
-                    const distance =
-                      intersection.distance - previousIntersection.distance;
-                    if (explosive && !splashing)
-                      remainingPenetration -=
-                        0.5 * remainingPenetration * distance;
-                    const wasted = remainingPenetration < 0;
-
-                    shot.layers.push({
-                      type: null,
-                      status: wasted ? 'blocked' : 'penetration',
-                      distance,
-                    });
-
-                    if (wasted && !splashing) return;
-                  }
-
-                  if (
-                    intersection.object.userData.type === ArmorType.External
-                  ) {
-                    remainingPenetration -= thickness;
-                    const blocked = remainingPenetration < 0;
-
-                    shot.layers.push({
-                      type: ArmorType.External,
-                      index: layerIndex,
-                      shellNormal,
-                      surfaceNormal,
-                      point: intersection.point,
-                      thickness: intersection.object.userData.thickness,
-                      status: blocked ? 'blocked' : 'penetration',
-                    });
-
-                    if (splashing) {
-                      remainingPenetration = Math.max(0, remainingPenetration);
-                    } else if (blocked) {
-                      break;
-                    }
-                  } else {
-                    const type = intersection.object.userData.type;
-                    const angle = surfaceNormal.angleTo(shellNormal);
-                    const ricochet = degToRad(shell.ricochet ?? 90);
-                    const normalization = degToRad(shell.normalization ?? 0);
-                    const threeCalibersRule =
-                      shell.caliber > thickness * 3 || layerIndex > 0;
-                    const twoCalibersRule = shell.caliber > thickness * 2;
-                    const finalNormalization = twoCalibersRule
-                      ? (1.4 * normalization * shell.caliber) /
-                        (2.0 * thickness)
-                      : normalization;
-                    const finalThickness =
-                      thickness === 0
-                        ? 0
-                        : thickness /
-                          Math.cos(Math.max(0, angle - finalNormalization));
-
-                    if (!threeCalibersRule && angle >= ricochet) {
-                      shot.layers.push({
-                        type,
-                        index: layerIndex,
-                        shellNormal,
-                        surfaceNormal,
-                        point: intersection.point,
-                        thickness,
-                        thicknessAngled: finalThickness,
-                        angle,
-                        status: 'ricochet',
-                      });
-
-                      remainingPenetration *= 0.75;
-
-                      const raycaster = new Raycaster();
-                      const newShellNormal = shellNormal
-                        .clone()
-                        .reflect(surfaceNormal);
-                      const newCameraNormal = newShellNormal
-                        .clone()
-                        .multiplyScalar(-1);
-
-                      raycaster.set(intersection.point, newCameraNormal);
-                      pushLogs(
-                        newShellNormal,
-                        filterIntersections(
-                          raycaster.intersectObjects(scene.children, true),
-                        ),
-                        layerIndex + 1,
-                      );
-
-                      break;
-                    } else {
-                      remainingPenetration -= finalThickness;
-                      const blocked = remainingPenetration < 0;
-
-                      shot.layers.push({
-                        type,
-                        index: layerIndex,
-                        shellNormal,
-                        surfaceNormal,
-                        point: intersection.point,
-                        thickness,
-                        thicknessAngled: finalThickness,
-                        angle,
-                        status: blocked ? 'blocked' : 'penetration',
-                      });
-                    }
-                  }
-
-                  layerIndex++;
-                  loopIndex++;
-                }
-              }
+              const shot = (await shoot(
+                event.point,
+                event.intersections,
+                true,
+              ))!;
 
               useTankopediaTemporary.setState({ shot });
             },

src/components/Breakdown/components/Row.tsx

@@ -69,6 +69,7 @@ export function Row({
       >
         {type === 'tank' && tankType !== undefined && (
           <img
+            alt={tankType}
             src={TREE_TYPE_ICONS[treeType ?? 'researchable'][tankType]}
             style={{ width: 16, height: 16 }}
           />

src/components/Breakdown/components/RowStat.tsx

@@ -48,6 +48,7 @@ export function RowStat({
       >
         {percentile === undefined && delta !== undefined && delta !== 0 && (
           <img
+            alt={delta > 0 ? 'Increase' : 'Decrease'}
             src={
               (delta ?? 0) > 0
                 ? 'https://i.imgur.com/qbjiXa1.png'

src/components/CommandWrapper.tsx

@@ -14,7 +14,7 @@ export default function CommandWrapper({ children, fat }: CommandWrapperProps) {
         flexDirection: 'column',
         padding: `16px ${fat ? 0 : 16}px`,
         gap: 16,
-        width: 480,
+        width: '100%',
         color: theme.colors.textHighContrast,
         position: 'relative',
         background: theme.colors.appBackground1,

src/components/ConsumablesManager.tsx

@@ -24,7 +24,14 @@ export function ConsumablesManager({
   hasHighEndConsumables,
 }: ConsumablesManagerProps) {
   return (
-    <Flex wrap="wrap">
+    <Flex
+      wrap="wrap"
+      style={{
+        maxWidth: 288,
+        borderRadius: 4,
+        overflow: 'hidden',
+      }}
+    >
       {consumables.map((consumable, index) => {
         const isSelected = selected.some((id) => id === consumable.id);
 
@@ -41,7 +48,7 @@ export function ConsumablesManager({
             cooldown={
               timers
                 ? consumable.cooldown *
-                  (hasConsumableDeliverySystem ? 0.85 : 1) *
+                  (hasConsumableDeliverySystem ? 0.88 : 1) *
                   (1 - cooldownBooster! * 0.1)
                 : undefined
             }

src/components/DeltaCaret.tsx

@@ -5,6 +5,7 @@ interface DeltaCaretProps {
 export function DeltaCaret({ delta }: DeltaCaretProps) {
   return (
     <img
+      alt={delta > 0 ? 'Increase' : 'Decrease'}
       style={{
         width: 16,
         height: 16,

src/components/Flag.tsx

@@ -13,7 +13,7 @@ export function Flag({ nation }: FlagProps) {
         overflow: 'hidden',
       }}
     >
-      <img src={asset(`flags/circle/${nation}.webp`)} alt={nation} />
+      <img alt={nation} src={asset(`flags/circle/${nation}.webp`)} />
     </div>
   );
 }

src/components/Footer/index.css.ts

@@ -0,0 +1,14 @@
+import { style } from '@vanilla-extract/css';
+
+export const containerInner = style({
+  justifyContent: 'space-between',
+  width: '100%',
+  maxWidth: 1024,
+  padding: '0 16px',
+
+  '@media': {
+    'screen and (max-width: 640px)': {
+      justifyContent: 'center',
+    },
+  },
+});

src/components/Footer/index.tsx

@@ -1,70 +1,103 @@
-import { Card, Code, Flex, Link, Spinner, Text, Theme } from '@radix-ui/themes';
-import { Suspense } from 'react';
-import packageJSON from '../../../package.json';
-import { useWideFormat } from '../../hooks/useWideFormat';
-import { WoTBVersion } from './components/WoTBVersion';
+'use client';
+
+import { Flex, Heading, Text, Theme } from '@radix-ui/themes';
+import packageJson from '../../../package.json';
+import { Link } from '../Link';
 
 export function Footer() {
-  const wideFormat = useWideFormat(640);
-
   return (
     <Theme radius="none">
-      <Card>
-        <Flex justify="center" align="center" gap="3">
-          <Flex
-            align="center"
-            justify={wideFormat ? 'between' : 'center'}
-            wrap="wrap"
-            style={{
-              width: '100%',
-              maxWidth: 800,
-              padding: '0 16px',
-            }}
-          >
-            <Flex gap="1" justify="center" align="center">
-              <Text color="gray" size="2">
-                BlitzKit
+      <Flex
+        justify="center"
+        gap="3"
+        p="6"
+        style={{
+          backgroundColor: 'var(--color-panel)',
+        }}
+      >
+        <Flex
+          align="center"
+          justify="between"
+          maxWidth="640px"
+          flexGrow="1"
+          gap="6"
+          position="relative"
+          direction={{
+            initial: 'column',
+            sm: 'row',
+          }}
+        >
+          <Flex direction="column">
+            <Heading>
+              BlitzKit{' '}
+              <Text color="gray" size="1" weight="regular">
+                {packageJson.version}
               </Text>
+            </Heading>
 
-              <Code color="gray" size="2">
-                {packageJSON.version}
-              </Code>
-
-              <Text color="gray" size="2">
-                for WoTB
-              </Text>
-
-              <Suspense fallback={<Spinner />}>
-                <WoTBVersion />
-              </Suspense>
-            </Flex>
+            <Text color="gray">Everything World of Tanks Blitz</Text>
+          </Flex>
 
+          <Flex gap="6">
             <Flex
-              justify="center"
-              align="center"
-              gap="2"
-              style={{
-                maxWidth: 800,
-                padding: '0 16px',
+              direction="column"
+              gap="1"
+              align={{
+                initial: 'end',
+                sm: 'start',
               }}
             >
-              <Link size="2" href="https://tresabhi.github.io/" target="_blank">
-                Made by TrèsAbhi
-              </Link>
-
-              <Text color="gray">•</Text>
-
-              <Link
-                size="2"
-                href="https://tresabhi.github.io/blitzkit/guide/credits.html"
-                target="_blank"
+              <Heading size="3">About</Heading>
+              <Flex
+                direction="column"
+                align={{
+                  initial: 'end',
+                  sm: 'start',
+                }}
               >
-                Full credits
-              </Link>
+                <Link href="/docs/about/credits" color="gray">
+                  Credits
+                </Link>
+                <Link
+                  href="https://discord.gg/nDt7AjGJQH"
+                  target="_blank"
+                  color="gray"
+                >
+                  Discord
+                </Link>
+                <Link
+                  href="https://github.com/tresabhi/blitzkit"
+                  target="_blank"
+                  color="gray"
+                >
+                  GitHub
+                </Link>
+
+                {/* patreon supporters? */}
+              </Flex>
+            </Flex>
+
+            <Flex direction="column" gap="1">
+              <Heading size="3">Legal</Heading>
+              <Flex direction="column">
+                <Link href="/docs/legal/privacy-policy" color="gray">
+                  Privacy policy
+                </Link>
+                <Link href="/docs/legal/terms-of-service" color="gray">
+                  Terms of service
+                </Link>
+                <Link
+                  href="https://www.google.com/settings/ads"
+                  target="_blank"
+                  color="gray"
+                >
+                  Ad settings
+                </Link>
+              </Flex>
             </Flex>
           </Flex>
         </Flex>
-      </Card>
+      </Flex>
     </Theme>
   );
 }

src/components/Leaderboard/components/Item.tsx

@@ -90,6 +90,7 @@ export function Item({
           }}
         >
           <img
+            alt={deltaPosition > 0 ? 'Increase' : 'Decrease'}
             style={{
               width: 8,
               height: 8,
@@ -139,6 +140,7 @@ export function Item({
         )}
         {deltaScore !== 0 && deltaScore !== undefined && (
           <img
+            alt={deltaScore > 0 ? 'Increase' : 'Decrease'}
             style={{
               width: 8,
               height: 8,

src/components/Link.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { LinkProps, Link as RadixLink } from '@radix-ui/themes';
+import { useRouter } from 'next/navigation';
+
+export function Link({ href, onClick, ...props }: LinkProps) {
+  const router = useRouter();
+
+  return (
+    <RadixLink
+      href={href}
+      onClick={(event) => {
+        event.preventDefault();
+        if (href) router.push(href);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+}