Merge branch 'main' into ue

.github/workflows/website-ue.yml

@@ -0,0 +1,66 @@
+name: Website UE
+
+on:
+  push:
+  workflow_dispatch:
+
+  schedule:
+    - cron: "0 4 * * *"
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref == 'refs/heads/main' }}
+
+env:
+  WOTB_SERVER: ${{ secrets.WOTB_SERVER }}
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          submodules: recursive
+          token: ${{ secrets.GH_TOKEN }}
+
+      - uses: oven-sh/setup-bun@v2
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: latest
+
+      - uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GH_TOKEN }}
+
+      - uses: actions/configure-pages@v5
+
+      - run: bun run setup
+
+      - name: Build website
+        run: bun run build:website
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: dist/website
+
+  deploy-github-pages:
+    if: ${{ github.ref == 'refs/heads/ue' && github.repository == 'blitzkit/host-beta' }}
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: Production
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -22,7 +22,7 @@ depots
 public/sitemap*
 /firebase.json
 target
-# packages/core/src/protos/*.ts
+packages/website-ue/src/protos/*.ts
 /.vercel
 .astro
 .vercel

.vscode/settings.json

@@ -17,8 +17,6 @@
     "astrojs",
     "astrolib",
     "atgm",
-    "Autoloader",
-    "Autoreloader",
     "AYUV",
     "battleresults",
     "bbox",
@@ -61,6 +59,7 @@
     "Ddpf",
     "Ddsd",
     "deadrail",
+    "DEBUFF",
     "debugflags",
     "deburr",
     "decalmask",
@@ -177,6 +176,7 @@
     "ratingleaderboard",
     "raycaster",
     "Redirector",
+    "REGEN",
     "Relogin",
     "researchable",
     "Resvg",
@@ -191,10 +191,12 @@
     "searchtanks",
     "SHAREDEXP",
     "SKLLD",
+    "sluggify",
     "smoothstep",
     "Smri",
     "Specularity",
     "SSAO",
+    "stackable",
     "startcase",
     "statkit",
     "statsfull",

package.json

@@ -1,13 +1,13 @@
 {
   "name": "blitzkit",
-  "version": "1.29.10",
+  "version": "2.0.0-beta.2",
   "license": "BlitzKit License",
   "private": true,
   "scripts": {
     "build:assets": "cd packages/scripts && bun run build:assets",
     "build:averages": "bun --filter=@blitzkit/scripts run build:averages",
     "build:bot": "cd packages/scripts && bun run build:bot",
-    "build:website": "cd packages/website && bun run build",
+    "build:website": "cd packages/website-ue && bun run build",
     "build:prisma": "prisma generate",
     "build:proxyclient": "cd packages/scripts && bun run build:proxyclient",
     "build:catalogitemaccesssor": "cd packages/scripts && bun run build:catalogitemaccesssor",
@@ -16,26 +16,26 @@
     "dev:bot": "bun run build:bot --dev && bun start:bot",
     "start:bot": "bun dist/bot/main.js",
     "dev:docs": "vitepress dev docs",
-    "dev:website": "cd packages/website && bun run dev",
+    "dev:website": "cd packages/website-ue && bun run dev",
     "dev:app": "cd packages/app && bun run dev",
     "dev": "bun run dev:website",
     "dev:api": "bun --filter=@blitzkit/api run dev",
     "setup:depotdownloader": "bun --filter=@blitzkit/scripts run setup:depotdownloader",
     "setup:patches": "bun --filter=@blitzkit/scripts run setup:patches",
-    "start:website": "bun --filter=@blitzkit/website run start",
+    "start:website": "bun --filter=@blitzkit/website-ue run start",
     "host:docs": "vitepress preview docs",
     "lint": "tsc",
-    "lint:website": "cd packages/website && bun run lint",
+    "lint:website": "cd packages/website-ue && bun run lint",
     "format": "prettier --write \"**/*.@(json|js|jsx|css|md|ts|tsx|html|xml|yml|gltf)\"",
     "update": "yarn upgrade --latest",
     "tunnel": "cloudflared tunnel --url http://localhost:3000",
     "discoverids": "scripts/discoverIds.ts",
     "build:protos": "cd packages/scripts && bun run build:protos",
-    "preview:website": "cd packages/website && bun run preview",
+    "preview:website": "cd packages/website-ue && bun run preview",
     "build:reviews": "cd packages/scripts && bun build:reviews",
     "build:ids": "cd packages/scripts && bun build:ids",
     "prunestrings": "cd packages/scripts && bun prunestrings",
-    "setup": "bun install && bun run build:prisma && bun run build:protos && bun run build:proxyclient",
+    "setup": "bun install && bun run build:prisma && bun run build:protos && bun run build:proxyclient && bun run build:catalogitemaccesssor",
     "patchnotes": "cd packages/scripts && bun run patchnotes"
   },
   "type": "module",
@@ -43,6 +43,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@prisma/client": "^6.18.0",
     "prisma": "^6.18.0",
     "typescript": "^5.9.3"

packages/core/src/blitzkit/index.ts

@@ -1,49 +1,50 @@
-export * from './assertSecret';
-export * from './asset';
-export * from './availableProvisions';
-export * from './averageDefinitions';
+export * from "./assertSecret";
+export * from "./asset";
+export * from "./availableProvisions";
+export * from "./averageDefinitions";
 // export * from './camouflageDefinitions';
 // export * from './checkConsumableProvisionInclusivity';
-export * from './coefficient';
-export * from './consumableDefinitions';
+export * from "./coefficient";
+export * from "./consumableDefinitions";
 // export * from './context';
-export * from './createDefaultSkills';
-export * from './degressiveStat';
-export * from './discoveredIdDefinitions';
-export * from './emblemURL';
-export * from './equipmentDefinitions';
-export * from './eventManager';
-export * from './gameDefinitions';
-export * from './getArchivedLatestSeasonNumber';
+export * from "./createDefaultSkills";
+export * from "./degressiveStat";
+export * from "./discoveredIdDefinitions";
+export * from "./emblemURL";
+export * from "./equipmentDefinitions";
+export * from "./eventManager";
+export * from "./gameDefinitions";
+export * from "./getArchivedLatestSeasonNumber";
 // export * from './getArchivedRatingInfo';
-export * from './getArchivedRatingLeaderboard';
+export * from "./getArchivedRatingLeaderboard";
 // export * from './getArchivedRatingMidnightLeaderboard';
-export * from './getTimeDaysAgo';
-export * from './isExplosive';
-export * from './mapDefinitions';
-export * from './modelDefinitions';
-export * from './normalizeBoundingBox';
+export * from "./getTimeDaysAgo";
+export * from "./isExplosive";
+export * from "./mapDefinitions";
+export * from "./modelDefinitions";
+export * from "./normalizeBoundingBox";
 // export * from './parseBkni';
 // export * from './patientFetch';
-export * from './patientFetchJSON';
-export * from './progressiveStat';
-export * from './provisionDefinitions';
-export * from './resolveDpm';
-export * from './resolvePenetrationCoefficient';
-export * from './reviews';
-export * from './skillDefinitions';
-export * from './sum';
-export * from './tankDefinitions';
-export * from './tankIcon';
-export * from './tankNames';
-export * from './unionBoundingBox';
-export * from './uniqueGuns';
-export * from './unwrapBlitzkitResponse';
-export * from './votes';
+export * from "./patientFetchJSON";
+export * from "./progressiveStat";
+export * from "./provisionDefinitions";
+export * from "./resolveDpm";
+export * from "./resolvePenetrationCoefficient";
+export * from "./reviews";
+export * from "./skillDefinitions";
+export * from "./sum";
+export * from "./tankDefinitions";
+export * from "./tankIcon";
+export * from "./tankNames";
+export * from "./unionBoundingBox";
+export * from "./uniqueGuns";
+export * from "./unwrapBlitzkitResponse";
+export * from "./votes";
 // export * from './withCORSProxy';
-export * from './createDefaultProvisions';
-export * from './gallery';
-export * from './metaSortTank';
-export * from './popularTanks';
-export * from './romanize';
-export * from './youtubers';
+export * from "./createDefaultProvisions";
+export * from "./gallery";
+export * from "./metaSortTank";
+export * from "./popularTanks";
+export * from "./romanize";
+export * from "./sluggify.ts";
+export * from "./youtubers";

packages/core/src/blitzkit/sluggify.ts

@@ -0,0 +1,16 @@
+import { deburr } from "lodash-es";
+
+const nonAlphanumericRegex = /[^a-z0-9]/g;
+const multipleDashesRegex = /--+/g;
+const trailingDashRegex = /-$/g;
+const leadingDashRegex = /^-/g;
+
+export function sluggify(value: string) {
+  let slug = deburr(value).toLowerCase();
+  slug = slug.replaceAll(nonAlphanumericRegex, "-");
+  slug = slug.replaceAll(multipleDashesRegex, "-");
+  slug = slug.replaceAll(trailingDashRegex, "");
+  slug = slug.replaceAll(leadingDashRegex, "");
+
+  return slug;
+}

packages/core/src/math/index.ts

@@ -3,6 +3,7 @@ export * from "./fisherYates";
 export * from "./formatCompact";
 export * from "./isNumber";
 export * from "./NaNFallback";
+export * from "./normalizeAngleDeg";
 export * from "./normalizeAngleRad";
 export * from "./normalToEuler";
 export * from "./numberToRomanNumeral";

packages/core/src/math/normalizeAngleDeg.ts

@@ -0,0 +1,6 @@
+export function normalizeAngleDeg(angle: number) {
+  const newAngle = angle % 360;
+  if (newAngle > 360) return newAngle - 360;
+  if (newAngle < -360) return newAngle + 360;
+  return newAngle;
+}

packages/i18n/src/index.ts

@@ -1,4 +1,2 @@
 export * from "./literals";
 export * from "./strings";
-export * from "./unwrapper";
-export * from "./wrapper";

packages/i18n/src/strings.ts

@@ -1,68 +1,3 @@
-import { merge } from "ts-deepmerge";
-import locales from "../locales.json";
-import en from "../strings/en.json";
-import es from "../strings/es.json";
-import fr from "../strings/fr.json";
-import ja from "../strings/ja.json";
-import pl from "../strings/pl.json";
-import pt from "../strings/pt.json";
-import ru from "../strings/ru.json";
-import uk from "../strings/uk.json";
-import zh from "../strings/zh.json";
+import type en from "../strings/en.json";
 
-export type BlitzKitStrings = typeof en;
-
-const stringsRaw: Record<string, TranslationTree> = {
-  en,
-  es,
-  fr,
-  ja,
-  pl,
-  pt,
-  ru,
-  uk,
-  zh,
-};
-
-export const STRINGS: Record<string, BlitzKitStrings> = {};
-
-for (const locale in stringsRaw) {
-  if (locale === locales.default) {
-    STRINGS[locales.default] = stringsRaw[locales.default] as BlitzKitStrings;
-    continue;
-  }
-
-  const localeStrings = stringsRaw[locale];
-  STRINGS[locale] = merge(
-    stringsRaw[locales.default],
-    localeStrings
-  ) as BlitzKitStrings;
-}
-
-export const SUPPORTED_LOCALE_BLITZ_MAP: Record<string, string> = {
-  en: "en",
-  es: "es",
-  fr: "fr",
-  ja: "ja",
-  pt: "pt",
-  ru: "ru",
-  uk: "uk",
-  zh: "zh-Hans",
-  pl: "pl",
-};
-
-export const SUPPORTED_LOCALE_FLAGS: Record<string, string> = {
-  en: "🇺🇸",
-  es: "🇪🇸",
-  fr: "🇫🇷",
-  ja: "🇯🇵",
-  pt: "🇵🇹",
-  ru: "🇷🇺",
-  uk: "🇺🇦",
-  zh: "🇨🇳",
-  pl: "🇵🇱",
-};
-
-export type TranslationTree = { [key: string]: TranslationNode };
-
-export type TranslationNode = string | TranslationTree;
+export type Strings = typeof en;

packages/i18n/src/unwrapper.ts

@@ -1,12 +0,0 @@
-import { I18nString } from "../../core/src";
-import locales from "../locales.json";
-
-export function unwrapper(locale = locales.default) {
-  return function (i18nString: I18nString) {
-    if (locale in i18nString.locales) {
-      return i18nString.locales[locale];
-    }
-
-    return i18nString.locales[locales.default];
-  };
-}

packages/i18n/src/wrapper.ts

@@ -1,15 +0,0 @@
-import locales from "../locales.json";
-import { type BlitzKitStrings, STRINGS } from "./strings";
-
-export function wrapper(slicer: (strings: BlitzKitStrings) => string) {
-  const defaultString = slicer(STRINGS[locales.default] as BlitzKitStrings);
-
-  const object = { [locales.default]: defaultString };
-
-  for (const { locale } of locales.supported) {
-    const string = slicer(STRINGS[locale] as BlitzKitStrings);
-    if (string !== defaultString) object[locale] = string;
-  }
-
-  return object;
-}

packages/scripts/src/protos.ts

@@ -1,21 +1,16 @@
-import { exec as execSync } from "child_process";
+import { execFile } from "child_process";
 import { existsSync } from "fs";
-import { readdir, rm } from "fs/promises";
-import { promisify } from "util";
+import { mkdir, readdir, rm, writeFile } from "fs/promises";
 
-const MAX_COMMAND_LENGTH = 2 ** 11;
 const TS_PROTO_EXECUTABLE_LOCATIONS = [
   "./node_modules/.bin/protoc-gen-ts_proto",
   "../../node_modules/.bin/protoc-gen-ts_proto",
 ];
-
-const roots = [
-  // "../../packages/core/src/protos",
+const ROOTS = [
   "../../packages/closed/protos",
+  "../../packages/website-ue/src/protos",
 ];
 
-const exec = promisify(execSync);
-
 let tsProtoExecutableLocation: string | undefined = undefined;
 
 for (const location of TS_PROTO_EXECUTABLE_LOCATIONS) {
@@ -36,42 +31,38 @@ if (!tsProtoExecutableLocation) {
   );
 }
 
-for (const root of roots) {
+await mkdir("temp", { recursive: true });
+
+for (const root of ROOTS) {
+  let args = "";
+
+  for (const include of ROOTS) {
+    args += `-I=${include}\n`;
+  }
+
+  args += `--plugin=${tsProtoExecutableLocation}\n`;
+  args += "--ts_proto_opt=esModuleInterop=true\n";
+  args += "--ts_proto_opt=oneof=unions-value\n";
+  args += "--ts_proto_opt=unrecognizedEnum=false\n";
+  args += "--ts_proto_opt=snakeToCamel=false\n";
+  args += `--ts_proto_out=${root}\n`;
+
   const filesRaw = await readdir(`${root}`);
   const files: string[] = [];
 
   for (const file of filesRaw) {
-    if (file.endsWith(".proto")) files.push(file);
+    if (file.endsWith(".proto")) {
+      files.push(file);
+      args += `${root}/${file}\n`;
+    }
+
     if (file.endsWith(".ts")) await rm(`${root}/${file}`);
   }
 
-  while (files.length > 0) {
-    let command = [
-      "protoc",
-      `--plugin=${tsProtoExecutableLocation}`,
-      "--ts_proto_opt=esModuleInterop=true",
-      "--ts_proto_opt=oneof=unions-value",
-      // "--ts_proto_opt=removeEnumPrefix=true",
-      "--ts_proto_opt=unrecognizedEnum=false",
-      "--ts_proto_opt=snakeToCamel=false",
-      `--ts_proto_out=${root}`,
-      `-I=${root}`,
-    ].join(" ");
-
-    while (true) {
-      if (files.length === 0) break;
-
-      const file = files.at(-1);
-      const newLine = ` ${root}/${file}`;
-
-      if (command.length + newLine.length < MAX_COMMAND_LENGTH) {
-        command += newLine;
-        files.pop();
-      } else {
-        break;
-      }
-    }
-
-    await exec(command);
-  }
+  await writeFile("temp/protoc.txt", args);
+  execFile("protoc", ["@temp/protoc.txt"], (error, stdout, stderr) => {
+    if (error) throw new Error(error.message);
+    if (stderr) console.error(stderr);
+    if (stdout) console.log(stdout);
+  });
 }

packages/website-ue/astro.config.ts

@@ -0,0 +1,104 @@
+import node from "@astrojs/node";
+import react from "@astrojs/react";
+import locales from "@blitzkit/i18n/locales.json";
+import strings from "@blitzkit/i18n/strings/en.json";
+import { mauve, mauveDark } from "@radix-ui/colors";
+import favicons from "astro-favicons";
+import { defineConfig } from "astro/config";
+import packageJSON from "../../package.json";
+
+const POSSIBLE_TARGETS = ["app", "web"];
+
+const target = process.env.PUBLIC_TARGET;
+
+if (!target || !POSSIBLE_TARGETS.includes(target)) {
+  throw new Error("Invalid target");
+}
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+
+  vite: {
+    server: { allowedHosts: [] },
+
+    esbuild: {
+      minifyIdentifiers: true,
+      minifySyntax: false,
+      minifyWhitespace: true,
+    },
+  },
+  output: target === "web" ? "static" : "server",
+  site: "https://blitzkit.app",
+  outDir: "../../dist/website",
+  prefetch: { defaultStrategy: "hover", prefetchAll: true },
+
+  // build: { concurrency: 4 },
+  adapter: target === "app" ? node({ mode: "standalone" }) : undefined,
+
+  integrations: [
+    favicons({
+      name: strings.common.name,
+      short_name: strings.common.name,
+
+      background: mauveDark.mauve1,
+      themes: [mauve.mauve1, mauveDark.mauve1],
+      appleStatusBarStyle: "black-translucent",
+
+      version: packageJSON.version,
+
+      // shortcuts: Object.values(tools)
+      //   .filter((tool) => !tool.disabled && !tool.href)
+      //   .map((tool) => {
+      //     const stringId = (tool.strings ??
+      //       tool.id) as keyof typeof strings.website.tools;
+
+      //     return {
+      //       name: strings.website.tools[stringId].name,
+      //       name_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].name
+      //       ),
+      //       description: strings.website.tools[stringId].description,
+      //       description_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].description
+      //       ),
+      //       short_name: strings.website.tools[stringId].name,
+      //       short_name_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].name
+      //       ),
+      //       url: `/${tool.id}`,
+      //       icon: `public/assets/tools/${tool.id}.webp`,
+      //     };
+      //   }),
+
+      manifest: {
+        // description: strings.website.home.seo_description,
+        // description_localized: wrapper(
+        //   (strings) => strings.website.home.seo_description
+        // ),
+
+        dir: "ltr",
+        categories: ["utilities", "games", "developer", "developer tools"],
+
+        id: "com.tresabhi.blitzkit",
+        start_url: "/",
+        launch_handler: { client_mode: "navigate-new" },
+        display: "fullscreen",
+        display_override: ["fullscreen", "standalone", "minimal-ui"],
+
+        lang: locales.default,
+        orientation: "any",
+      },
+
+      icons: {
+        windows: true,
+        android: true,
+        appleIcon: true,
+        appleStartup: true,
+        favicons: true,
+        yandex: true,
+      },
+    }),
+
+    react(),
+  ],
+});

packages/website-ue/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@blitzkit/website-ue",
+  "type": "module",
+  "scripts": {
+    "dev": "PUBLIC_TARGET=web astro dev",
+    "build": "PUBLIC_TARGET=web astro build",
+    "preview": "PUBLIC_TARGET=web astro preview",
+    "lint": "PUBLIC_TARGET=web astro check",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^9.4.4",
+    "@astrojs/react": "^4.4.0",
+    "@astrolib/seo": "^1.0.0-beta.8",
+    "@blitzkit/closed": "workspace:*",
+    "@blitzkit/core": "workspace:*",
+    "@blitzkit/i18n": "workspace:*",
+    "@bufbuild/protobuf": "^2.10.2",
+    "@fontsource-variable/roboto-flex": "^5.2.8",
+    "@fontsource-variable/roboto-mono": "^5.2.8",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@react-three/drei": "^10.7.6",
+    "@react-three/fiber": "^9.4.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@types/three": "^0.180.0",
+    "@vite-pwa/astro": "^1.1.0",
+    "astro": "^5.14.4",
+    "astro-favicons": "^3.1.5",
+    "fuzzysort": "^3.1.0",
+    "immer": "^10.1.3",
+    "lodash-es": "^4.17.21",
+    "quicklime": "^1.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-promise-suspense": "^0.3.4",
+    "three": "^0.180.0",
+    "three-stdlib": "^2.36.0",
+    "typescript": "^5.9.3",
+    "varuna": "workspace:*",
+    "vite": "^7.1.9",
+    "yaml": "^2.8.1"
+  }
+}

packages/website-ue/public/favicon.svg

@@ -0,0 +1,46 @@
+<svg width="426" height="426" viewBox="0 0 426 426" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M416.628 244.997L235.625 372.974C223.13 381.809 202.87 381.809 190.375 372.974L9.37173 244.997C3.1239 240.58 -3.95076e-06 234.79 0 229V196.6H426V229C426 234.79 422.876 240.58 416.628 244.997Z" fill="#0D2847"/>
+<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37172 180.603C-3.12391 189.438 -3.12391 203.762 9.37173 212.597L190.375 340.574C202.87 349.409 223.13 349.409 235.625 340.574L416.628 212.597C429.124 203.762 429.124 189.438 416.628 180.603Z" fill="#D9D9D9"/>
+<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37172 180.603C-3.12391 189.438 -3.12391 203.762 9.37173 212.597L190.375 340.574C202.87 349.409 223.13 349.409 235.625 340.574L416.628 212.597C429.124 203.762 429.124 189.438 416.628 180.603Z" fill="url(#paint0_linear_764_240)"/>
+<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37172 180.603C-3.12391 189.438 -3.12391 203.762 9.37173 212.597L190.375 340.574C202.87 349.409 223.13 349.409 235.625 340.574L416.628 212.597C429.124 203.762 429.124 189.438 416.628 180.603Z" fill="url(#paint1_linear_764_240)"/>
+<g filter="url(#filter0_d_764_240)">
+<path d="M197.056 150.108L201.368 153.051L290.596 213.945L306.6 202.599L310.832 199.599L289.153 184.23L288.86 177.31L335.236 182.298L351.706 170.622L359.102 165.378L288.049 158.111L286.355 118L263.968 133.871L265.867 167.722L217.292 135.762L197.056 150.108Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.905 289L74.2242 204.714L70 201.714L116.393 168.767C129.906 159.17 143.124 153.539 156.048 151.875C168.971 150.211 180.919 153.275 191.893 161.069C198.702 165.905 202.718 171.006 203.941 176.372C205.165 181.658 204.302 186.506 201.354 190.918L201.692 191.158C208.978 188.301 216.935 187.286 225.563 188.113C234.247 188.9 242.613 192.151 250.66 197.866C261.803 205.779 266.398 214.825 264.446 225.004C262.551 235.142 254.96 244.929 241.672 254.366L192.905 289ZM221.999 242.08L200.456 257.38L163.905 231.422L185.448 216.123C192.007 211.465 198.473 209.23 204.846 209.42C211.22 209.529 217.193 211.562 222.764 215.519C228.392 219.516 231.31 223.797 231.521 228.364C231.732 232.85 228.558 237.422 221.999 242.08ZM165.937 205.64L146.77 219.252L114.693 196.472L133.861 182.859C140.363 178.241 146.435 175.887 152.076 175.798C157.717 175.708 163.07 177.462 168.135 181.059C173.256 184.696 175.809 188.557 175.796 192.643C175.726 196.69 172.44 201.022 165.937 205.64Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M197.056 156.108L290.596 219.945L310.832 205.599L306.6 202.599L289.153 190.23L288.86 183.31L335.236 188.298L359.102 171.378L351.706 170.622L288.049 164.111L286.355 124L263.968 139.871L265.867 173.722L217.292 141.762L201.368 153.051L197.056 156.108Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.905 295L70 207.714L74.2242 204.714L116.393 174.767C129.906 165.17 143.124 159.539 156.048 157.875C168.971 156.211 180.919 159.275 191.893 167.069C198.702 171.905 202.718 177.006 203.941 182.372C205.165 187.658 204.302 192.506 201.354 196.918L201.692 197.158C208.978 194.301 216.935 193.286 225.563 194.113C234.247 194.9 242.613 198.151 250.66 203.866C261.803 211.779 266.398 220.825 264.446 231.004C262.551 241.142 254.96 250.929 241.672 260.366L192.905 295ZM221.999 248.08L200.456 263.38L163.905 237.422L185.448 222.123C192.007 217.465 198.473 215.23 204.846 215.42C211.22 215.529 217.193 217.562 222.764 221.519C228.392 225.516 231.31 229.797 231.521 234.364C231.732 238.85 228.558 243.422 221.999 248.08ZM165.937 211.64L146.77 225.252L114.693 202.472L133.861 188.859C140.363 184.241 146.435 181.887 152.076 181.798C157.717 181.708 163.07 183.462 168.135 187.059C173.256 190.696 175.809 194.557 175.796 198.643C175.726 202.69 172.44 207.022 165.937 211.64Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M310.832 199.599L306.6 202.599L310.832 205.599V199.599Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M359.102 165.378L351.706 170.622L359.102 171.378V165.378Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M201.368 153.051L197.056 150.108V156.108L201.368 153.051Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M74.2242 204.714L70 201.714V207.714L74.2242 204.714Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<path d="M197.056 150.108L290.596 213.945L310.832 199.599L289.153 184.23L288.86 177.31L335.236 182.298L359.102 165.378L288.049 158.111L286.355 118L263.968 133.871L265.867 167.722L217.292 135.762L197.056 150.108Z" fill="url(#paint2_linear_764_240)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.905 289L70 201.714L116.393 168.767C129.906 159.17 143.124 153.539 156.048 151.875C168.971 150.211 180.919 153.275 191.893 161.069C198.702 165.905 202.718 171.006 203.941 176.372C205.165 181.658 204.302 186.506 201.354 190.918L201.692 191.158C208.978 188.301 216.935 187.286 225.563 188.113C234.247 188.9 242.613 192.151 250.66 197.866C261.803 205.779 266.398 214.825 264.446 225.004C262.551 235.142 254.96 244.929 241.672 254.366L192.905 289ZM221.999 242.08L200.456 257.38L163.905 231.422L185.448 216.123C192.007 211.465 198.473 209.23 204.846 209.42C211.22 209.529 217.193 211.562 222.764 215.519C228.392 219.516 231.31 223.797 231.521 228.364C231.732 232.85 228.558 237.422 221.999 242.08ZM165.937 205.64L146.77 219.252L114.693 196.472L133.861 182.859C140.363 178.241 146.435 175.887 152.076 175.798C157.717 175.708 163.07 177.462 168.135 181.059C173.256 184.696 175.809 188.557 175.796 192.643C175.726 196.69 172.44 201.022 165.937 205.64Z" fill="url(#paint3_linear_764_240)"/>
+<defs>
+<filter id="filter0_d_764_240" x="66" y="116" width="297.103" height="185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_764_240"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_764_240" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_764_240" x1="213" y1="46" x2="213" y2="347.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#10243E"/>
+<stop offset="1" stop-color="#0F1B2D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_240" x1="127.008" y1="96.51" x2="241.48" y2="334.974" gradientUnits="userSpaceOnUse">
+<stop stop-color="#262A65"/>
+<stop offset="1" stop-color="#104D87"/>
+</linearGradient>
+<linearGradient id="paint2_linear_764_240" x1="215" y1="98.5" x2="299.5" y2="210.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.379808" stop-color="#C2E6FF"/>
+<stop offset="0.706731" stop-color="#70B8FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_764_240" x1="215" y1="98.5" x2="299.5" y2="210.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.379808" stop-color="#C2E6FF"/>
+<stop offset="0.706731" stop-color="#70B8FF"/>
+</linearGradient>
+</defs>
+</svg>

packages/website-ue/src/components/BaseMeta.astro

@@ -0,0 +1,3 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="sitemap" href="/sitemap-index.xml" />

packages/website-ue/src/components/BaseStyles.astro

@@ -0,0 +1,56 @@
+---
+import "@fontsource-variable/jetbrains-mono";
+import "@fontsource-variable/roboto-flex";
+---
+
+<style>
+  body {
+    --space-0: 0.0625rem;
+    --space-1: 0.125rem;
+    --space-2: 0.25rem;
+    --space-3: 0.5rem;
+    --space-4: 1rem;
+    --space-5: 2rem;
+    --space-6: 4rem;
+    --space-7: 8rem;
+    --space-8: 16rem;
+    --space-9: 32rem;
+
+    --max-size: max(100vw, 100vh);
+
+    --font-size-regular: var(--space-4);
+
+    --font-family-regular: "Roboto Flex Variable", sans-serif;
+    --font-family-mono: "JetBrains Mono Variable", monospace;
+
+    --weight-thin: 100;
+    --weight-extra-light: 200;
+    --weight-light: 300;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+    --weight-bold: 700;
+    --weight-extra-bold: 800;
+    --weight-black: 900;
+
+    --outline-interactive: solid var(--space-1) var(--gray-5);
+    --outline-focus: var(--space-1) solid var(--accent-6);
+
+    --shadow-cavity:
+      inset var(--space-1) var(--space-1) var(--space-1) var(--gray-2),
+      inset calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1)
+        var(--gray-4);
+    --shadow-focus: 0 0 var(--space-3) var(--accent-4);
+
+    background-color: var(--gray-1);
+    color: var(--gray-12);
+    font-family: var(--font-family-regular);
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  body {
+    margin: 0;
+  }
+</style>

packages/website-ue/src/components/Button/index.css

@@ -0,0 +1,2 @@
+.button {
+}

packages/website-ue/src/components/Button/index.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface ButtonProps extends ComponentProps<"button"> {}
+
+export function Button({ className, ...props }: ButtonProps) {
+  return <button className={classNames("button", className)} {...props} />;
+}

packages/website-ue/src/components/Code/index.css

@@ -0,0 +1,3 @@
+.code {
+  font-family: var(--font-family-mono);
+}

packages/website-ue/src/components/Code/index.tsx

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface CodeProps extends ComponentProps<"code"> {}
+
+export function Code({ className, ...props }: CodeProps) {
+  return <code className={classNames("code", className)} {...props} />;
+}

packages/website-ue/src/components/ColorAlias.astro

@@ -0,0 +1,23 @@
+---
+import type { Color } from "../pages/styles/colors/[accent].css";
+
+interface Props {
+  color: Color;
+  alias: string;
+}
+
+const { color, alias } = Astro.props;
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--${alias}-${n}:var(--${color}-${n});`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>

packages/website-ue/src/components/ColorScale.astro

@@ -0,0 +1,25 @@
+---
+import * as colors from "@radix-ui/colors";
+import type { Color } from "../core/ui/color";
+
+interface Props {
+  color: Color;
+}
+
+const { color } = Astro.props;
+const scale = colors[`${color}Dark`];
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  const value = scale[`${color}${n}` as keyof typeof scale];
+  styles += `--${color}-${n}:${value};`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>

packages/website-ue/src/components/HomeHero.astro

@@ -0,0 +1,110 @@
+---
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { api } from "../core/api/dynamic";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
+import { Text } from "./Text";
+import { TextField } from "./TextField";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .home-hero {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    padding: 0 var(--space-4);
+    position: relative;
+
+    .wallpaper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: calc(100% - var(--space-5) / 2);
+
+      z-index: -1;
+
+      background-image: url(/assets/home-hero.webp);
+      background-size: cover;
+      background-position: top;
+
+      .gradient {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: var(--space-7);
+
+        width: 100%;
+        height: 100%;
+
+        background: linear-gradient(
+          color-mix(in srgb, transparent 50%, var(--gray-1)),
+          var(--gray-1)
+        );
+      }
+    }
+
+    .name {
+      margin: var(--space-6) 0;
+
+      .icon-wrapper {
+        position: relative;
+
+        width: var(--space-6);
+        height: var(--space-6);
+
+        .icon {
+          width: 100%;
+          height: 100%;
+        }
+
+        .version {
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translate(100%, 0);
+          padding-left: var(--space-2);
+
+          font-weight: var(--weight-bold);
+          letter-spacing: -0.15em;
+        }
+      }
+    }
+
+    .text-field {
+      width: 100%;
+      max-width: 25rem;
+    }
+  }
+</style>
+
+<div class="home-hero">
+  <div class="wallpaper">
+    <div class="gradient"></div>
+  </div>
+
+  <div class="name">
+    <div class="icon-wrapper">
+      <BlitzKitIcon className="icon" />
+      <Code className="version">2.0</Code>
+    </div>
+
+    <Text lowContrast>
+      {strings.home.credit}
+    </Text>
+  </div>
+
+  <TextField placeholder={strings.home.search}>
+    <MagnifyingGlassIcon />
+  </TextField>
+</div>

packages/website-ue/src/components/TankopediaCharacteristic.tsx

@@ -0,0 +1,26 @@
+import type { CharacteristicOutput } from "../core/tankopedia/characteristics";
+import type { CharacteristicRenderConfig } from "../core/tankopedia/characteristicsOrder";
+import { renderCharacteristic } from "../core/tankopedia/renderCharacteristic";
+
+interface Props {
+  characteristic: CharacteristicOutput;
+  others: CharacteristicOutput[];
+  config: CharacteristicRenderConfig;
+}
+
+export function TankopediaCharacteristic({
+  characteristic,
+  others,
+  config,
+}: Props) {
+  if (characteristic === null) return null;
+
+  const rendered = renderCharacteristic(characteristic, config);
+
+  return (
+    <p>
+      {config.name}: {rendered} {config.units && `${config.units}`} (1 /{" "}
+      {others.length})
+    </p>
+  );
+}

packages/website-ue/src/components/TankopediaToy.tsx

@@ -0,0 +1,7 @@
+interface Props {
+  toy: string;
+}
+
+export function TankopediaToy({ toy }: Props) {
+  return <p>toy: {toy}</p>;
+}

packages/website-ue/src/components/Text/index.css

@@ -0,0 +1,3 @@
+.text {
+  font-size: var(--font-size-regular);
+}

packages/website-ue/src/components/Text/index.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import type { Color } from "../../core/ui/color";
+import "./index.css";
+
+export interface TextProps extends ComponentProps<"span"> {
+  color?: Color;
+  lowContrast?: boolean;
+}
+
+export function Text({
+  color = "gray",
+  lowContrast,
+  className,
+  ...props
+}: TextProps) {
+  return (
+    <span
+      className={classNames("text", className)}
+      style={{ color: `var(--${color}-${lowContrast ? 11 : 12})` }}
+      {...props}
+    />
+  );
+}

packages/website-ue/src/components/TextField/index.css

@@ -0,0 +1,52 @@
+.text-field {
+  display: flex;
+  align-items: center;
+
+  gap: var(--space-3);
+  margin: 0 var(--space-4);
+
+  border-radius: var(--max-size);
+
+  background-color: var(--gray-3);
+  outline: var(--outline-interactive);
+  box-shadow: var(--shadow-cavity);
+
+  font-size: var(--font-size-regular);
+  color: var(--gray-11);
+
+  &[data-has-icon="true"] {
+    padding-left: var(--space-3);
+  }
+
+  &:focus-within {
+    outline: var(--outline-focus);
+    box-shadow: var(--shadow-focus);
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  input {
+    min-width: 0;
+    flex: 1;
+
+    background: none;
+    border: none;
+
+    font-size: inherit;
+    font-weight: medium;
+    padding: var(--space-3) 0;
+
+    color: var(--gray-12);
+
+    &::placeholder {
+      color: var(--gray-11);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

packages/website-ue/src/components/TextField/index.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps, ReactNode } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface TextFieldProps extends ComponentProps<"input"> {
+  children?: ReactNode;
+}
+
+export function TextField({ children, className, ...props }: TextFieldProps) {
+  return (
+    <div
+      className={classNames("text-field", className)}
+      data-has-icon={children !== undefined}
+    >
+      {children}
+      <input {...props} />
+    </div>
+  );
+}

packages/website-ue/src/components/ToolCard.astro

@@ -0,0 +1,31 @@
+---
+import { CaretRightIcon } from "@radix-ui/react-icons";
+import type { Tool } from "../core/tools/tools";
+import { Button } from "./Button";
+import { Text } from "./Text";
+
+interface Props {
+  tool: Tool;
+}
+
+const { tool } = Astro.props;
+---
+
+<style>
+  .tool-card {
+  }
+</style>
+
+<div class="tool-card">
+  <div>
+    <div>
+      <Text>{tool.id}</Text>
+      <Text>{tool.id}</Text>
+    </div>
+
+    <Button>
+      {tool.id}
+      <CaretRightIcon />
+    </Button>
+  </div>
+</div>

packages/website-ue/src/core/api/abstract.ts

@@ -0,0 +1,46 @@
+import type { CatalogItemAccessor } from "@blitzkit/closed";
+import type { Strings } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import type { Tank } from "../../protos/tank";
+import type { TankList } from "../../protos/tank_list";
+import type { Tanks } from "../../protos/tanks";
+
+export abstract class AbstractAPI {
+  abstract tanks(): Promise<Tanks>;
+
+  abstract tankList(): Promise<TankList>;
+
+  abstract _strings(locale: string): Promise<Strings>;
+  abstract _gameStrings(
+    locale: string,
+    prefix: string
+  ): Promise<Record<string, string>>;
+
+  private assertLocale(locale: string) {
+    const supported = locales.supported.find(
+      (supported) => supported.locale === locale
+    );
+
+    if (supported === undefined) {
+      throw new Error(`Unsupported locale: ${locale}`);
+    }
+
+    return supported;
+  }
+  async strings(locale: string) {
+    this.assertLocale(locale);
+    return await this._strings(locale);
+  }
+  async gameStrings(locale: string, prefix: string) {
+    this.assertLocale(locale);
+    return await this._gameStrings(locale, prefix);
+  }
+
+  abstract tank(id: string): Promise<Tank>;
+
+  abstract avatars(): Promise<CatalogItemAccessor[]>;
+  abstract avatar(id: string): Promise<CatalogItemAccessor>;
+
+  abstract backgrounds(): Promise<CatalogItemAccessor[]>;
+  abstract background(id: string): Promise<CatalogItemAccessor>;
+}

packages/website-ue/src/core/api/client.ts

@@ -0,0 +1,19 @@
+import { fetchPB } from "@blitzkit/core";
+import { Tank } from "../../protos/tank";
+import { TankList } from "../../protos/tank_list";
+import { Tanks } from "../../protos/tanks";
+import { AbstractAPI } from "./abstract";
+
+export class ClientAPI extends AbstractAPI {
+  tanks() {
+    return fetchPB("/api/tanks/all.pb", Tanks);
+  }
+
+  tankList() {
+    return fetchPB("/api/tanks/list.pb", TankList);
+  }
+
+  tank(id: string) {
+    return fetchPB(`/api/tanks/${id}.pb`, Tank);
+  }
+}

packages/website-ue/src/core/api/dynamic.ts

@@ -0,0 +1,22 @@
+import { assertSecret } from "@blitzkit/core";
+import type { AbstractAPI } from "./abstract";
+
+let dynamicAPI: AbstractAPI;
+
+if (typeof window === "undefined") {
+  const { ProxyClient } = await import("@blitzkit/closed");
+  const { ServerAPI } = await import("./server");
+
+  const proxyClient = await new ProxyClient(
+    assertSecret(import.meta.env.WOTB_SERVER)
+  ).handshake();
+  const metadata = await proxyClient.metadata();
+
+  dynamicAPI = new ServerAPI(metadata);
+} else {
+  const { ClientAPI } = await import("./client");
+
+  dynamicAPI = new ClientAPI();
+}
+
+export const api = dynamicAPI;

packages/website-ue/src/core/api/server.ts

@@ -0,0 +1,192 @@
+import type { MetadataAccessor } from "@blitzkit/closed";
+import { sluggify, type DeepPartial } from "@blitzkit/core";
+import type { Strings } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import type { RemoteStorageComponent } from "@protos/blitz_static_remote_storage_component";
+import { merge } from "lodash-es";
+import { parse } from "yaml";
+import type { Tank } from "../../protos/tank";
+import type { TankList, TankListEntry } from "../../protos/tank_list";
+import type { Tanks } from "../../protos/tanks";
+import { AbstractAPI } from "./abstract";
+
+if (typeof window !== "undefined") {
+  throw new Error("ServerAPI is being evaluated in the browser");
+}
+
+const globbedStrings = import.meta.glob("../../../../i18n/strings/*.json", {
+  import: "default",
+});
+
+interface LocalizationConfig {
+  namespaces: string[];
+}
+
+export class ServerAPI extends AbstractAPI {
+  constructor(private metadata: MetadataAccessor) {
+    super();
+  }
+
+  async _gameStrings(locale: string, prefix: string) {
+    const group = this.metadata.group("ClientConfigsEntity");
+
+    if (group.length !== 1) {
+      throw new RangeError(
+        `Don't know how to handle ${group.length} ClientConfigsEntities`
+      );
+    }
+
+    const clientConfig = this.metadata.item(group[0].id);
+    const localizationResources = clientConfig.LocalizationResources();
+
+    if (!localizationResources.remote_storage) {
+      throw new Error("Localization resources not found");
+    }
+
+    let remoteStorage: RemoteStorageComponent | undefined = undefined;
+
+    for (const candidateId of localizationResources.remote_storage
+      .remote_urls) {
+      const item = this.metadata.item(candidateId);
+      const candidate = item.RemoteStorage();
+
+      if (
+        remoteStorage === undefined ||
+        candidate.download_speed_weight > remoteStorage.download_speed_weight
+      ) {
+        remoteStorage = candidate;
+      }
+    }
+
+    if (remoteStorage === undefined) {
+      throw new Error("No suitable production remote storage found");
+    }
+
+    const strings: Record<string, string> = {};
+    const configPath = `${remoteStorage.url}/${remoteStorage.relative_path}/config.yaml`;
+
+    try {
+      const config = await fetch(configPath)
+        .then((response) => response.text())
+        .then((text) => parse(text) as LocalizationConfig);
+
+      for (const namespace of config.namespaces) {
+        Object.assign(
+          strings,
+          await fetch(
+            `${remoteStorage.url}${remoteStorage.relative_path}/${namespace}/${locale}.yaml`
+          )
+            .then((response) => response.text())
+            .then((text) => {
+              const strings: Record<string, string> = {};
+              const parsed = parse(text) as Record<string, string>;
+
+              for (const key in parsed) {
+                strings[key] = parsed[key].replaceAll('\\"', '"');
+              }
+
+              return strings;
+            })
+        );
+      }
+    } catch (error) {
+      console.warn(
+        `Failed to fetch config from ${configPath}. Returning empty strings. This will throw an error in production. Error:`,
+        error
+      );
+    }
+
+    const filtered: Record<string, string> = {};
+
+    for (const key in strings) {
+      if (key.startsWith(`${prefix}__`)) {
+        filtered[key] = strings[key];
+      }
+    }
+
+    return filtered;
+  }
+
+  async _strings(locale: string) {
+    const localized = (await globbedStrings[
+      `../../../../i18n/strings/${locale}.json`
+    ]()) as DeepPartial<Strings>;
+    const defaults = (await globbedStrings[
+      `../../../../i18n/strings/${locales.default}.json`
+    ]()) as Strings;
+    const strings = merge({}, defaults, localized);
+
+    return strings;
+  }
+
+  _tankList: TankList | undefined;
+  async tankList() {
+    if (this._tankList === undefined) {
+      const group = this.metadata.group("TankEntity");
+      const list: TankListEntry[] = [];
+      const strings = await this.gameStrings("en", "TankEntity");
+
+      for (const item of group) {
+        const tankCatalog = item.TankCatalog();
+
+        if (!tankCatalog.name) continue;
+
+        const name = strings[tankCatalog.name.value];
+
+        if (!name) continue;
+
+        const id = item.name;
+        const slug = sluggify(name);
+
+        list.push({ id, slug });
+      }
+
+      this._tankList = { list };
+    }
+
+    return this._tankList;
+  }
+
+  async tanks() {
+    const tankList = await this.tankList();
+    const data: Tanks = { tanks: {} };
+
+    for (const { id } of tankList.list) {
+      data.tanks[id] = await this.tank(id);
+    }
+
+    return data;
+  }
+
+  async tank(id: string) {
+    const tankList = await this.tankList();
+    const tankListEntry = tankList.list.find((tank) => tank.id === id);
+
+    if (!tankListEntry) {
+      throw new Error(`Tank with id ${id} not found`);
+    }
+
+    const { slug } = tankListEntry;
+    const item = this.metadata.item(`TankEntity.${id}`);
+    const tank = item.TankCatalog();
+    const compensation = item.Compensation();
+
+    return { tank, compensation, slug } satisfies Tank;
+  }
+
+  async avatars() {
+    return this.metadata.group("ProfileAvatarEntity");
+  }
+
+  async avatar(id: string) {
+    return this.metadata.item(`ProfileAvatarEntity.${id}`);
+  }
+
+  async backgrounds() {
+    return this.metadata.group("ProfileBackgroundEntity");
+  }
+
+  async background(id: string) {
+    return this.metadata.item(`ProfileBackgroundEntity.${id}`);
+  }
+}

packages/website-ue/src/core/tankopedia/aggregateStageParameters.ts

@@ -0,0 +1,205 @@
+import { StandardSinglePrice } from "@protos/blitz_static_standard_single_price";
+import { PenetrationGroup } from "@protos/blitz_static_tank_penetration_group";
+import {
+  PenetrationGroupUpgrade,
+  PitchLimit,
+  ShellUpgrade,
+  ShellUpgrageSingleChange,
+  StageParameters,
+  TankAttributeChange,
+  TankAttributeChange_AttributeName,
+  TankAttributeChange_Modifier,
+  VisualChanges,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+
+function patch(stage0: StageParameters, stage1: StageParameters) {
+  if (stage1.stage_number !== ++stage0.stage_number) {
+    throw new Error("Change stage number must be 1 greater than base");
+  }
+
+  for (const attribute1 of stage1.attributes) {
+    let value1: number;
+
+    switch (attribute1.modifier) {
+      case TankAttributeChange_Modifier.MODIFIER_OVERRIDE:
+        value1 = attribute1.value;
+        break;
+
+      case TankAttributeChange_Modifier.MODIFIER_MULTIPLY:
+      case TankAttributeChange_Modifier.MODIFIER_ADD:
+        const attribute0 = stage0.attributes.find(
+          (attribute0) =>
+            attribute0.attribute_name === attribute1.attribute_name
+        );
+
+        if (!attribute0) {
+          throw new Error(
+            `Missing attribute ${
+              TankAttributeChange_AttributeName[attribute1.attribute_name]
+            } (${attribute1.attribute_name}) to modify`
+          );
+        }
+
+      case TankAttributeChange_Modifier.MODIFIER_MULTIPLY: {
+        value1 = attribute0!.value! * attribute1.value;
+        break;
+      }
+
+      case TankAttributeChange_Modifier.MODIFIER_ADD: {
+        value1 = attribute0!.value! + attribute1.value;
+        break;
+      }
+
+      default:
+        throw new Error(
+          `Unhandled modified ${
+            TankAttributeChange_Modifier[attribute1.modifier]
+          }`
+        );
+    }
+
+    const attribute0 = TankAttributeChange.create({
+      modifier: TankAttributeChange_Modifier.MODIFIER_OVERRIDE,
+      attribute_name: attribute1.attribute_name,
+      value: value1,
+    });
+    const index0 = stage0.attributes.findIndex(
+      (attribute) => attribute.attribute_name === attribute1.attribute_name
+    );
+
+    if (index0 === -1) {
+      stage0.attributes.push(attribute0);
+    } else {
+      stage0.attributes[index0] = attribute0;
+    }
+  }
+
+  for (const penetrationGroupUpgrade1 of stage1.penetration_groups_upgrades) {
+    const penetrationGroupUpgrade0 = stage0.penetration_groups_upgrades.find(
+      (group) => group.tank_part === penetrationGroupUpgrade1.tank_part
+    );
+
+    if (penetrationGroupUpgrade0) {
+      penetrationGroupUpgrade0.primary_armor = [
+        ...penetrationGroupUpgrade1.primary_armor,
+      ];
+
+      for (const penetrationGroup1 of penetrationGroupUpgrade1.penetration_groups) {
+        const penetrationGroup0 =
+          penetrationGroupUpgrade0.penetration_groups.find(
+            (baseGroup) => baseGroup.group_name === penetrationGroup1.group_name
+          );
+
+        if (penetrationGroup0) {
+          penetrationGroup0.common_data = penetrationGroup1.common_data;
+          penetrationGroup0.armor = penetrationGroup1.armor;
+        } else {
+          penetrationGroupUpgrade0.penetration_groups.push(
+            PenetrationGroup.create(penetrationGroup1)
+          );
+        }
+      }
+    } else {
+      stage0.penetration_groups_upgrades.push(
+        PenetrationGroupUpgrade.create(penetrationGroupUpgrade1)
+      );
+    }
+  }
+
+  if (stage1.modules_upgrades.length > 0) {
+    throw new Error("Modules upgrades not implemented");
+  }
+
+  for (const shellUpgrades1 of stage1.shells_upgrades) {
+    let shellUpgrades0 = stage0.shells_upgrades.find(
+      (baseShell) => baseShell.shell_id === shellUpgrades1.shell_id
+    );
+
+    if (shellUpgrades0) {
+      shellUpgrades0.shell_type = shellUpgrades1.shell_type;
+
+      for (const changedShellUpgrade of shellUpgrades1.changes) {
+        const shellUpgrade0 = shellUpgrades0.changes.find(
+          (baseShellUpgrade) =>
+            baseShellUpgrade.attribute_name ===
+            changedShellUpgrade.attribute_name
+        );
+
+        if (shellUpgrade0) {
+          shellUpgrade0.value = changedShellUpgrade.value;
+        } else {
+          shellUpgrades0.changes.push(
+            ShellUpgrageSingleChange.create(changedShellUpgrade)
+          );
+        }
+      }
+
+      shellUpgrades0.silver_price =
+        shellUpgrades1.silver_price === undefined
+          ? undefined
+          : StandardSinglePrice.create(shellUpgrades1.silver_price);
+    } else {
+      stage0.shells_upgrades.push(ShellUpgrade.create(shellUpgrades1));
+    }
+  }
+
+  if (stage1.pump_reload_times.length > 0) {
+    stage0.pump_reload_times = [...stage1.pump_reload_times];
+  }
+
+  if (stage1.pitch_limits_up.length > 0 && stage0.pitch_limits_up.length > 0) {
+    throw new Error("Pitch limits not implemented");
+  }
+
+  for (const pitchLimitUp1 of stage1.pitch_limits_up) {
+    stage0.pitch_limits_up.push(PitchLimit.create(pitchLimitUp1));
+  }
+
+  if (
+    stage1.pitch_limits_down.length > 0 &&
+    stage0.pitch_limits_down.length > 0
+  ) {
+    throw new Error("Pitch limits not implemented");
+  }
+
+  for (const pitchLimitDown1 of stage1.pitch_limits_down) {
+    stage0.pitch_limits_down.push(PitchLimit.create(pitchLimitDown1));
+  }
+
+  for (const visualChange1 of stage1.visual_changes) {
+    const visualChange0 = stage0.visual_changes.find(
+      (baseVisualChange) =>
+        baseVisualChange.tank_part === visualChange1.tank_part
+    );
+
+    if (visualChange0) {
+      visualChange0.name = visualChange1.name;
+    } else {
+      stage0.visual_changes.push(VisualChanges.create(visualChange1));
+    }
+  }
+}
+
+export function aggregateStageParameters(
+  base: StageParameters,
+  stages: StageParameters[]
+) {
+  const stage0 = StageParameters.create({ ...base, stage_number: 0 });
+
+  /**
+   * Bug in Reforged: base stats are stage 1, so is the first upgrade. Manually
+   * setting it to stage 0 below and if the bug's been fixed, throw an error
+   * in dev mode to allow clean up in the future. Also, update the initial
+   * stage number to -1.
+   */
+
+  if (base.stage_number === 0 && import.meta.env.DEV) {
+    throw new Error(
+      "Base stats are now stage 0. In-game bug fixed, please remove hack."
+    );
+  }
+
+  stages.forEach((stage) => patch(stage0, stage));
+
+  return stage0;
+}

packages/website-ue/src/core/tankopedia/applyPitchYawLimits.ts

@@ -0,0 +1,100 @@
+import { normalizeAngleDeg } from "@blitzkit/core";
+import type { PitchLimit } from "@protos/blitz_static_tank_upgrade_single_stage";
+import { clamp, degToRad, lerp, radToDeg } from "three/src/math/MathUtils.js";
+
+export function applyPitchYawLimits(
+  givenPitch: number,
+  givenYaw: number,
+  pitchLimitsUp: PitchLimit[],
+  pitchLimitsDown: PitchLimit[]
+) {
+  const givenYawDeg = normalizeAngleDeg(radToDeg(givenYaw));
+  const givenPitchDeg = normalizeAngleDeg(radToDeg(givenPitch));
+
+  const yawDeg = givenYawDeg;
+  const yaw = degToRad(givenYawDeg);
+
+  let leftLimitUp: PitchLimit | undefined;
+  let rightLimitUp: PitchLimit | undefined;
+  let leftLimitDown: PitchLimit | undefined;
+  let rightLimitDown: PitchLimit | undefined;
+
+  for (const limit of pitchLimitsUp) {
+    const normalizedAngle = normalizeAngleDeg(limit.angle);
+
+    if (normalizedAngle <= yawDeg) {
+      if (
+        !leftLimitUp ||
+        normalizeAngleDeg(yawDeg - normalizedAngle) <
+          normalizeAngleDeg(yawDeg - leftLimitUp.angle)
+      ) {
+        leftLimitUp = limit;
+      }
+    }
+
+    if (normalizedAngle >= yawDeg) {
+      if (
+        !rightLimitUp ||
+        normalizeAngleDeg(normalizedAngle - yawDeg) <
+          normalizeAngleDeg(rightLimitUp.angle - yawDeg)
+      ) {
+        rightLimitUp = limit;
+      }
+    }
+  }
+
+  for (const limit of pitchLimitsDown) {
+    const normalizedAngle = normalizeAngleDeg(limit.angle);
+
+    if (normalizedAngle <= yawDeg) {
+      if (
+        !leftLimitDown ||
+        normalizeAngleDeg(yawDeg - normalizedAngle) <
+          normalizeAngleDeg(yawDeg - leftLimitDown.angle)
+      ) {
+        leftLimitDown = limit;
+      }
+    }
+
+    if (normalizedAngle >= yawDeg) {
+      if (
+        !rightLimitDown ||
+        normalizeAngleDeg(normalizedAngle - yawDeg) <
+          normalizeAngleDeg(rightLimitDown.angle - yawDeg)
+      ) {
+        rightLimitDown = limit;
+      }
+    }
+  }
+
+  if (!leftLimitUp || !rightLimitUp || !leftLimitDown || !rightLimitDown) {
+    throw new Error("Pitch limits not found");
+  }
+
+  const spanUp = rightLimitUp.angle - leftLimitUp.angle;
+  const spanDown = rightLimitDown.angle - leftLimitDown.angle;
+
+  let limitUp: number;
+  let limitDown: number;
+
+  if (spanUp === 0) {
+    limitUp = leftLimitUp.limit;
+  } else {
+    const delta = givenYawDeg - leftLimitUp.angle;
+    const t = delta / spanUp;
+    limitUp = lerp(leftLimitUp.limit, rightLimitUp.limit, t);
+  }
+
+  if (spanDown === 0) {
+    limitDown = leftLimitDown.limit;
+  } else {
+    const delta = givenYawDeg - leftLimitDown.angle;
+    const t = delta / spanDown;
+    limitDown = lerp(leftLimitDown.limit, rightLimitDown.limit, t);
+  }
+
+  const pitchDeg = clamp(givenPitchDeg, -limitDown, limitUp);
+  const pitch = degToRad(pitchDeg);
+
+  return { pitch, yaw };
+}

packages/website-ue/src/core/tankopedia/characteristics.ts

@@ -0,0 +1,423 @@
+import { TankClass } from "@blitzkit/core";
+import {
+  ShellUpgrageSingleChange_AttributeName,
+  StageParameters,
+  TankAttributeChange_AttributeName,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import { radToDeg } from "three/src/math/MathUtils.js";
+import type { Tank } from "../../protos/tank";
+import { applyPitchYawLimits } from "./applyPitchYawLimits";
+import { TerrainHardness, type TankState } from "./tankState";
+
+export type CharacteristicOutput = number | number[] | string | null;
+
+type Characteristic = (helpers: {
+  characteristic: (name: CharacteristicName) => CharacteristicOutput;
+  attribute: (name: TankAttributeChange_AttributeName) => number;
+  attributeSafe: (name: TankAttributeChange_AttributeName) => number | null;
+  shell: (name: ShellUpgrageSingleChange_AttributeName) => number;
+  shellSafe: (name: ShellUpgrageSingleChange_AttributeName) => number | null;
+  state: TankState;
+  tank: Tank;
+  parameters: StageParameters;
+  id: string;
+}) => CharacteristicOutput;
+
+export type CharacteristicName = keyof typeof characteristics;
+
+export enum GunType {
+  Regular,
+  AutoLoader,
+  AutoReloader,
+}
+
+export const characteristics = {
+  gun_type({ attributeSafe, attribute }) {
+    const isPump =
+      attributeSafe(TankAttributeChange_AttributeName.ATTRIBUTE_NAME_IS_PUMP) ??
+      0;
+
+    if (isPump === 1) return GunType.AutoReloader;
+
+    const clipSize = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+    );
+
+    if (clipSize === 1) return GunType.Regular;
+
+    return GunType.AutoLoader;
+  },
+
+  clip_size({ attribute, characteristic }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType === GunType.Regular) return null;
+
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+    );
+  },
+
+  damage({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_ARMOR_DAMAGE
+    );
+  },
+
+  module_damage({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MODULE_DAMAGE
+    );
+  },
+
+  penetration({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_PIERCING_POWER
+    );
+  },
+
+  reload({ characteristic, attribute }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType === GunType.AutoReloader) return null;
+
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_RELOAD_TIME
+    );
+  },
+
+  reloads({ characteristic, parameters }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType !== GunType.AutoReloader) return null;
+
+    return parameters.pump_reload_times;
+  },
+
+  intra_clip({ characteristic, attribute }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType === GunType.Regular) return null;
+
+    const clipRate = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_RATE
+    );
+
+    return 60 / clipRate;
+  },
+
+  optimal_shell({ characteristic }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType !== GunType.AutoReloader) return null;
+
+    const intraClip = characteristic("intra_clip") as number;
+    const reloads = characteristic("reloads") as number[];
+    let optimal: number | undefined = undefined;
+
+    for (let index = 0; index < reloads.length; index++) {
+      const reload = reloads[index] + (index > 0 ? intraClip : 0);
+      if (optimal === undefined || reload < reloads[optimal]) optimal = index;
+    }
+
+    if (optimal === undefined) {
+      throw new Error("Unable to find optimal shell");
+    }
+
+    return optimal;
+  },
+
+  dpm({ characteristic }) {
+    let dps: number;
+    const gunType = characteristic("gun_type")!;
+    const damage = characteristic("damage") as number;
+
+    switch (gunType) {
+      case GunType.Regular: {
+        const reload = characteristic("reload") as number;
+
+        dps = damage / reload;
+        break;
+      }
+
+      case GunType.AutoLoader: {
+        const reload = characteristic("reload") as number;
+        const intraClip = characteristic("intra_clip") as number;
+        const clipSize = characteristic("clip_size") as number;
+
+        dps = (damage * clipSize) / (reload + (clipSize - 1) * intraClip);
+        break;
+      }
+
+      case GunType.AutoReloader: {
+        const reloads = characteristic("reloads") as number[];
+        const optimalShell = characteristic("optimal_shell") as number;
+        const intraClip = characteristic("intra_clip") as number;
+        const reload =
+          reloads[optimalShell] + (optimalShell > 0 ? intraClip : 0);
+
+        dps = damage / reload;
+        break;
+      }
+
+      default:
+        throw new Error("Unknown gun type");
+    }
+
+    return 60 * dps;
+  },
+
+  caliber({ shell }) {
+    return shell(ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_CALIBER);
+  },
+
+  normalization({ shellSafe }) {
+    return shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_NORMALIZATION
+    );
+  },
+
+  ricochet({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_RICOCHET_ANGLE
+    );
+  },
+
+  shell_velocity({ shell }) {
+    return (
+      shell(ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_SPEED) / 100
+    );
+  },
+
+  shell_range({ shellSafe }) {
+    const maxDistance = shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_DISTANCE
+    );
+    return maxDistance === null ? Infinity : maxDistance / 100;
+  },
+
+  shell_capacity({ shellSafe }) {
+    const count = shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_COUNT
+    );
+    return count === -1 || count === null ? Infinity : count;
+  },
+
+  aim_time({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_AIMING_TIME
+    );
+  },
+
+  speed_forward({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FORWARD_MAX_SPEED
+    );
+  },
+
+  speed_backward({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_BACKWARD_MAX_SPEED
+    );
+  },
+
+  dispersion({ attribute, characteristic, state }) {
+    const base = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_ANGLE
+    );
+    const movement = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_MOVEMENT
+    );
+    const vehicleRotation = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_ROTATION
+    );
+    const turretRotation = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_TURRET_ROTATION
+    );
+    const afterShot = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_AFTER_SHOT
+    );
+    const gunDamaged = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_WHILE_GUN_DAMAGED
+    );
+    const maxSpeed = characteristic("speed_forward") as number;
+
+    return (
+      (state.isGunDamaged ? gunDamaged : 1) *
+      (base +
+        (state.speed / maxSpeed) * movement +
+        (state.isHullTraversing ? vehicleRotation : 0) +
+        (state.isTurretTraversing ? turretRotation : 0) +
+        (state.isShooting ? afterShot : 0))
+    );
+  },
+
+  gun_depression({ parameters, tank }) {
+    return -radToDeg(
+      applyPitchYawLimits(
+        -Math.PI / 2,
+        0,
+        parameters.pitch_limits_up,
+        parameters.pitch_limits_down
+      ).pitch
+    );
+  },
+
+  gun_elevation({ parameters }) {
+    return radToDeg(
+      applyPitchYawLimits(
+        Math.PI / 2,
+        0,
+        parameters.pitch_limits_up,
+        parameters.pitch_limits_down
+      ).pitch
+    );
+  },
+
+  engine_power({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_ENGINE_POWER
+    );
+  },
+
+  weight({ attribute }) {
+    return (
+      attribute(TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MASS) / 1000
+    );
+  },
+
+  terrain_coefficient({ attribute, state }) {
+    let name: TankAttributeChange_AttributeName;
+
+    switch (state.terrainHardness) {
+      case TerrainHardness.Soft:
+        name =
+          TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_SOFT;
+        break;
+      case TerrainHardness.Medium:
+        name =
+          TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_MEDIUM;
+        break;
+      case TerrainHardness.Hard:
+        name =
+          TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_HARD;
+        break;
+    }
+
+    return attribute(name);
+  },
+
+  power_to_weight({ characteristic }) {
+    const power = characteristic("engine_power") as number;
+    const weight = characteristic("weight") as number;
+    const terrainCoefficient = characteristic("terrain_coefficient") as number;
+    return power / weight / terrainCoefficient;
+  },
+
+  turret_traverse_speed({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TURRET_ROTATION_SPEED
+    );
+  },
+
+  hull_traverse_speed() {
+    return -Infinity;
+  },
+
+  health({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MAX_HEALTH
+    );
+  },
+
+  fire_chance({ attribute }) {
+    return (
+      attribute(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FIRE_START_CHANCE
+      ) * 100
+    );
+  },
+
+  view_range({ attribute }) {
+    return (
+      attribute(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CIRCULAR_VISION_RADIUS
+      ) / 100
+    );
+  },
+
+  class({ tank }) {
+    return tank.tank!.tank_class;
+  },
+
+  camouflage({ attribute, characteristic, attributeSafe, state }) {
+    const tankClass = characteristic("class");
+    const base = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_STILL
+    );
+    const moving =
+      tankClass === TankClass.LIGHT
+        ? 0
+        : attribute(
+            TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_MOVING
+          );
+    const shooting = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FACTOR_AT_SHOT
+    );
+
+    if (
+      attributeSafe(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FIRE_PENALTY
+      )
+    ) {
+      throw new Error("Fire penalty implemented! Code it in!!");
+    }
+
+    return (
+      100 *
+      base *
+      (1 + moving * state.speed) *
+      (state.isShooting ? shooting : 1)
+    );
+  },
+
+  height() {
+    return -Infinity;
+  },
+
+  length() {
+    return -Infinity;
+  },
+
+  volume() {
+    return -Infinity;
+  },
+
+  nation({ tank }) {
+    return tank.tank!.nation;
+  },
+
+  name({ tank }) {
+    return tank.tank!.name!.value;
+  },
+
+  tier({ tank }) {
+    return tank.tank!.tier_catalog_id;
+  },
+
+  type({ tank }) {
+    return tank.tank!.tank_type;
+  },
+
+  id({ id }) {
+    return id;
+  },
+
+  slug({ tank }) {
+    return tank.slug;
+  },
+
+  compensation({ tank }) {
+    return tank.compensation!.compensation?.currency_reward?.amount ?? null;
+  },
+} satisfies Record<string, Characteristic>;

packages/website-ue/src/core/tankopedia/characteristicsOrder.ts

@@ -0,0 +1,138 @@
+import {
+  Nation,
+  TankClass,
+  TankType,
+} from "@protos/blitz_static_tank_component";
+import {
+  GunType,
+  type CharacteristicName,
+  type CharacteristicOutput,
+} from "./characteristics";
+
+export enum BetterDirection {
+  Higher,
+  Lower,
+}
+
+export interface CharacteristicRenderConfig {
+  name: CharacteristicName;
+  decimals?: number;
+  units?: string;
+  render?: (output: CharacteristicOutput) => string;
+}
+
+type CharacteristicsOrder = {
+  group: string;
+  order: (
+    | CharacteristicRenderConfig
+    | {
+        toy: string;
+      }
+  )[];
+}[];
+
+export const characteristicsOrder: CharacteristicsOrder = [
+  {
+    group: "meta",
+    order: [
+      { name: "name" },
+      { name: "tier" },
+      {
+        name: "nation",
+        render(output) {
+          return Nation[output as Nation];
+        },
+      },
+      {
+        name: "class",
+        render(output) {
+          return TankClass[output as TankClass];
+        },
+      },
+      {
+        name: "type",
+        render(output) {
+          return TankType[output as TankType];
+        },
+      },
+      { name: "compensation" },
+      { name: "id" },
+      { name: "slug" },
+    ],
+  },
+  {
+    group: "firepower",
+    order: [
+      {
+        name: "gun_type",
+        render(output) {
+          return GunType[output as GunType];
+        },
+      },
+      { name: "dpm", decimals: 0, units: "hp_min" },
+      { name: "reload", decimals: 2, units: "s" },
+      { name: "reloads", decimals: 2, units: "s" },
+      { name: "damage", units: "hp" },
+      { name: "module_damage", units: "hp" },
+      { name: "penetration", units: "mm" },
+      { name: "clip_size" },
+      { name: "intra_clip", decimals: 2, units: "s" },
+
+      { toy: "reload" },
+
+      { name: "caliber", units: "mm" },
+      { name: "normalization", units: "deg" },
+      { name: "ricochet", units: "deg" },
+
+      { toy: "ricochet" },
+
+      { name: "shell_velocity", units: "m_s" },
+      { name: "shell_range", units: "m" },
+      { name: "shell_capacity" },
+
+      { name: "aim_time", decimals: 1, units: "s" },
+
+      { toy: "aim_time" },
+
+      { name: "dispersion", decimals: 3, units: "m" },
+
+      { name: "gun_depression", decimals: 0, units: "deg" },
+      { name: "gun_elevation", decimals: 0, units: "deg" },
+
+      { toy: "flexibility" },
+    ],
+  },
+  {
+    group: "maneuverability",
+    order: [
+      { name: "speed_forward", units: "km_h" },
+      { name: "speed_backward", units: "km_h" },
+
+      { name: "engine_power", units: "bhp" },
+      { name: "weight", decimals: 1, units: "t" },
+
+      { name: "terrain_coefficient" },
+      { name: "power_to_weight", decimals: 1, units: "bhp_t" },
+      { name: "hull_traverse_speed", units: "deg_s" },
+      { name: "turret_traverse_speed", units: "deg_s" },
+
+      { toy: "traverse" },
+    ],
+  },
+  {
+    group: "survivability",
+    order: [
+      { name: "health", units: "hp" },
+      { name: "fire_chance", units: "%" },
+      { name: "view_range", units: "m" },
+
+      { toy: "view_range" },
+
+      { name: "camouflage", decimals: 0, units: "%" },
+
+      { name: "height", units: "m" },
+      { name: "length", units: "m" },
+      { name: "volume", units: "m" },
+    ],
+  },
+];

packages/website-ue/src/core/tankopedia/computeCharacteristics.ts

@@ -0,0 +1,106 @@
+import {
+  ShellUpgrageSingleChange_AttributeName,
+  TankAttributeChange_AttributeName,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import type { Tank } from "../../protos/tank";
+import { aggregateStageParameters } from "./aggregateStageParameters";
+import {
+  characteristics,
+  type CharacteristicName,
+  type CharacteristicOutput,
+} from "./characteristics";
+import type { TankState } from "./tankState";
+
+export type ComputedCharacteristics = Record<
+  CharacteristicName,
+  CharacteristicOutput
+>;
+
+export function computeCharacteristics(
+  id: string,
+  tank: Tank,
+  state: TankState
+) {
+  const parameters = aggregateStageParameters(
+    tank.tank!.base_stats!,
+    tank.tank!.upgrade_stages.slice(0, state.stage)
+  );
+
+  const computed: Partial<ComputedCharacteristics> = {};
+
+  function characteristic(name: CharacteristicName) {
+    if (name in computed) return computed[name] as CharacteristicOutput;
+    throw new Error(`${name} not computed yet`);
+  }
+
+  function attributeSafe(name: TankAttributeChange_AttributeName) {
+    const attribute = parameters.attributes.find(
+      (attribute) => attribute.attribute_name === name
+    );
+
+    return attribute ? attribute.value : null;
+  }
+
+  function attribute(name: TankAttributeChange_AttributeName) {
+    const attribute = attributeSafe(name);
+
+    if (attribute === null) {
+      throw new Error(
+        `Attribute ${TankAttributeChange_AttributeName[name]} (${name}) not found`
+      );
+    }
+
+    return attribute;
+  }
+
+  function shellSafe(name: ShellUpgrageSingleChange_AttributeName) {
+    const shell = parameters.shells_upgrades.find(
+      (shell) => shell.shell_id === state.shell
+    );
+
+    if (!shell) {
+      throw new Error(
+        `Shell ${ShellUpgrageSingleChange_AttributeName[name]} (${name}) not found`
+      );
+    }
+
+    const attribute = shell.changes.find(
+      (change) => change.attribute_name === name
+    );
+
+    return attribute ? attribute.value : null;
+  }
+
+  function shell(name: ShellUpgrageSingleChange_AttributeName) {
+    const attribute = shellSafe(name);
+
+    if (attribute === null) {
+      throw new Error(
+        `Shell attribute ${ShellUpgrageSingleChange_AttributeName[name]} (${name}) not found`
+      );
+    }
+
+    return attribute;
+  }
+
+  for (const _name in characteristics) {
+    const name = _name as CharacteristicName;
+    const value = characteristics[name]({
+      characteristic,
+      attribute,
+      attributeSafe,
+      shell,
+      shellSafe,
+      state,
+      tank,
+      parameters,
+      id,
+    });
+    computed[name] = value;
+  }
+
+  return {
+    characteristics: computed as ComputedCharacteristics,
+    parameters,
+  };
+}

packages/website-ue/src/core/tankopedia/createTankState.ts

@@ -0,0 +1,16 @@
+import type { TankCatalogComponent } from "@protos/blitz_static_tank_component";
+import { TerrainHardness } from "./tankState";
+
+export function createTankState(tank: TankCatalogComponent) {
+  return {
+    stage: tank.upgrade_stages.length,
+    shell: 0,
+    isGunDamaged: false,
+    isHullTraversing: false,
+    isShooting: false,
+    isTurretTraversing: false,
+    speed: 0,
+    terrainHardness: TerrainHardness.Hard,
+    isCaughtOnFire: false,
+  };
+}

packages/website-ue/src/core/tankopedia/renderCharacteristic.ts

@@ -0,0 +1,29 @@
+import type { CharacteristicOutput } from "./characteristics";
+import type { CharacteristicRenderConfig } from "./characteristicsOrder";
+
+export function renderCharacteristic(
+  characteristic: CharacteristicOutput,
+  config: CharacteristicRenderConfig
+): string | null {
+  if (characteristic === null) return null;
+
+  if (config.render) return config.render(characteristic);
+
+  if (typeof characteristic === "number") {
+    if (Number.isFinite(characteristic)) {
+      if (config.decimals === undefined) {
+        return characteristic.toString();
+      }
+
+      return characteristic.toFixed(config.decimals);
+    }
+
+    return `${characteristic < 0 ? "-" : ""}∞`;
+  }
+
+  if (typeof characteristic === "string") {
+    return characteristic;
+  }
+
+  return characteristic.map((c) => renderCharacteristic(c, config)).join(", ");
+}

packages/website-ue/src/core/tankopedia/tankState.ts

@@ -0,0 +1,17 @@
+export enum TerrainHardness {
+  Soft,
+  Medium,
+  Hard,
+}
+
+export interface TankState {
+  stage: number;
+  shell: number;
+  speed: number;
+  isHullTraversing: boolean;
+  isTurretTraversing: boolean;
+  isShooting: boolean;
+  isGunDamaged: boolean;
+  terrainHardness: TerrainHardness;
+  isCaughtOnFire: boolean;
+}

packages/website-ue/src/core/tools/tools.ts

@@ -0,0 +1,36 @@
+import type { ButtonProps } from "@radix-ui/themes";
+
+export interface Tool {
+  id: string;
+  strings?: string;
+
+  button: ButtonProps["color"];
+  significant?: boolean;
+  disabled?: boolean;
+  href?: string;
+}
+
+export const tools: Record<string, Tool> = {
+  tanks: {
+    id: "tanks",
+    strings: "tankopedia",
+    button: "purple",
+    significant: true,
+  },
+
+  avatars: {
+    id: "avatars",
+    button: "gold",
+  },
+
+  backgrounds: {
+    id: "backgrounds",
+    button: "amber",
+  },
+
+  api: {
+    id: "api",
+    disabled: true,
+    button: "bronze",
+  },
+};

packages/website-ue/src/core/ui/classNames.ts

@@ -0,0 +1,3 @@
+export function classNames(...classes: (string | undefined)[]) {
+  return classes.filter(Boolean).join(" ");
+}

packages/website-ue/src/core/ui/color.ts

@@ -0,0 +1,7 @@
+import type * as colors from "@radix-ui/colors";
+
+const ignoreEndings = ["A", "P3", "Dark", "DarkA", "DarkP3"] as const;
+export type Color = Exclude<
+  keyof typeof colors,
+  `${string}${(typeof ignoreEndings)[number]}` | "__esModule"
+>;

packages/website-ue/src/hooks/useAwait.ts

@@ -0,0 +1,19 @@
+import { use } from "react";
+
+const cache = new Map<string, Promise<unknown>>();
+
+export function useAwait<Type>(
+  creator: () => Promise<Type>,
+  discriminator: string
+) {
+  let promise;
+
+  if (cache.has(discriminator)) {
+    promise = cache.get(discriminator) as Promise<Type>;
+  } else {
+    promise = creator();
+    cache.set(discriminator, promise);
+  }
+
+  return use(promise);
+}

packages/website-ue/src/icons/BlitzKit.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+
+export function BlitzKitIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="128"
+      height="128"
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M48.4082 19.8652C56.6277 19.8652 62.3045 21.5665 65.4375 24.9688C67.7005 27.3762 68.8875 30.4035 69 34.0498L52.1045 58.1982L61.252 68.375L30.8174 120.845L32.3818 93.4385H0L12.9863 19.8652H48.4082ZM83.584 58.1318L103.038 35.7969H128L99.2139 65.7285L117.691 109.37H90.4053L81.2812 84.373L78.4297 87.3389L74.5391 109.37H50.0312L52.4111 95.8789L71.4209 68.375L62.2734 58.1982L92.6064 7L83.584 58.1318ZM26.5791 77.875H32.9961C35.3204 77.875 37.1735 77.1677 38.5547 75.7529C39.9358 74.3381 40.8292 72.485 41.2334 70.1943C41.6376 67.9037 41.4012 66.0505 40.5254 64.6357C39.6495 63.1876 38.0496 62.463 35.7256 62.4629H29.3076L26.5791 77.875ZM31.4297 50.4365H37.1904C39.3126 50.4365 40.9635 49.8137 42.1426 48.5674C43.3553 47.2873 44.1641 45.5016 44.5684 43.2109C44.9726 40.954 44.8036 39.2186 44.0625 38.0059C43.3213 36.7598 41.8725 36.1367 39.7168 36.1367H33.957L31.4297 50.4365Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

packages/website-ue/src/layouts/BaseLayout.astro

@@ -0,0 +1,32 @@
+---
+import BaseMeta from "../components/BaseMeta.astro";
+import BaseStyles from "../components/BaseStyles.astro";
+import ColorAlias from "../components/ColorAlias.astro";
+import ColorScale from "../components/ColorScale.astro";
+import Navbar from "../components/Navbar.astro";
+import type { Color } from "../pages/styles/colors/[accent].css";
+
+interface Props {
+  accent: Color;
+  noNavbar?: boolean;
+}
+
+const { accent, noNavbar } = Astro.props;
+---
+
+<html>
+  <head>
+    <BaseMeta />
+
+    <ColorScale color="mauve" />
+    <ColorScale color={accent} />
+    <ColorAlias color="mauve" alias="gray" />
+    <ColorAlias color={accent} alias="accent" />
+    <BaseStyles />
+  </head>
+
+  <body class="dark">
+    {!noNavbar && <Navbar />}
+    <slot />
+  </body>
+</html>

packages/website-ue/src/pages/[...locale]/api/index.astro

@@ -0,0 +1,58 @@
+---
+import "@radix-ui/colors/amber-dark.css";
+import {
+  createProgram,
+  displayPartsToString,
+  forEachChild,
+  isFunctionDeclaration,
+} from "typescript";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+
+const root = `/src/pages/api`;
+const globbed = import.meta.glob("/src/pages/api/**/*.ts", {
+  eager: true,
+  query: "?raw",
+});
+const paths: {
+  path: string;
+  documentation: string;
+}[] = [];
+
+for (const fullPath in globbed) {
+  const relativePath = `.${fullPath}`;
+  const path = fullPath.slice(root.length + 1, -3);
+  const program = createProgram([relativePath], {});
+  const source = program.getSourceFile(relativePath);
+  if (!source) throw new Error(`Could not find source for ${fullPath}`);
+
+  const checker = program.getTypeChecker();
+
+  const getter = forEachChild(source, (node) => {
+    if (!isFunctionDeclaration(node) || node.name?.text !== "GET") return;
+    return checker.getSymbolAtLocation(node.name);
+  });
+
+  const documentationComment = getter?.getDocumentationComment(checker);
+  if (!documentationComment) continue;
+
+  const documentation = displayPartsToString(documentationComment);
+  if (documentation.length === 0) continue;
+
+  paths.push({ path, documentation });
+}
+
+paths.sort((a, b) => a.path.localeCompare(b.path));
+---
+
+<BaseLayout accent="amber">
+  <h1>api</h1>
+
+  {
+    paths.map(({ path, documentation }) => (
+      <>
+        <h2>{path}</h2>
+        <pre>{documentation}</pre>
+      </>
+    ))
+  }
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/avatars/index.astro

@@ -0,0 +1,38 @@
+---
+import { ProfileAvatarComponent_Category } from "@protos/blitz_static_profile_avatar_component";
+import { Grade } from "@protos/blitz_static_standard_grades_enum";
+import { api } from "../../../core/api/dynamic";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+
+const avatars = await api.avatars();
+---
+
+<BaseLayout accent="gold">
+  {
+    avatars.map((avatar) => {
+      const ui = avatar.StuffUI("UIComponent");
+      const profileAvatar = avatar.ProfileAvatar();
+
+      return (
+        <>
+          <h3>
+            {ui.display_name} {Grade[ui.grade]}{" "}
+            {ProfileAvatarComponent_Category[profileAvatar.category]}
+          </h3>
+
+          {ui.description && <p>{ui.description}</p>}
+          {ui.obtaining_methods && <p>{ui.obtaining_methods}</p>}
+          {ui.features && <p>{ui.features}</p>}
+
+          <img width="128" src={`/api/avatars/${avatar.name}.webp`} />
+
+          {avatar.components.sellableComponent && (
+            <pre>{JSON.stringify(avatar.Sellable(), null, 2)}</pre>
+          )}
+
+          <br />
+        </>
+      );
+    })
+  }
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/backgrounds/index.astro

@@ -0,0 +1,38 @@
+---
+import { Grade } from "@protos/blitz_static_standard_grades_enum";
+import { api } from "../../../core/api/dynamic";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+
+const backgrounds = await api.backgrounds();
+---
+
+<BaseLayout accent="amber">
+  {
+    backgrounds.map((background) => {
+      const ui = background.StuffUI("UIComponent");
+      const profileBackground = background.ProfileBackground();
+
+      return (
+        <>
+          <h3>
+            {ui.display_name} {Grade[ui.grade]}{" "}
+          </h3>
+
+          <pre>{JSON.stringify(profileBackground, null, 2)}</pre>
+
+          {ui.description && <p>{ui.description}</p>}
+          {ui.obtaining_methods && <p>{ui.obtaining_methods}</p>}
+          {ui.features && <p>{ui.features}</p>}
+
+          <img width="128" src={`/api/backgrounds/${background.name}.webp`} />
+
+          {background.components.sellableComponent && (
+            <pre>{JSON.stringify(background.Sellable(), null, 2)}</pre>
+          )}
+
+          <br />
+        </>
+      );
+    })
+  }
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/index.astro

@@ -0,0 +1,29 @@
+---
+import locales from "@blitzkit/i18n/locales.json";
+import "@radix-ui/colors/amber-dark.css";
+import type { GetStaticPaths } from "astro";
+import packageJson from "../../../../../package.json";
+import HomeHero from "../../components/HomeHero.astro";
+import ToolCard from "../../components/ToolCard.astro";
+import { tools } from "../../core/tools/tools";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export const getStaticPaths = (() => {
+  return [
+    ...locales.supported
+      .filter(({ locale }) => locale !== locales.default)
+      .map(({ locale }) => ({ params: { locale }, props: { locale } })),
+    { params: { locale: undefined }, props: { locale: locales.default } },
+  ];
+}) satisfies GetStaticPaths;
+
+const { locale } = Astro.props;
+---
+
+<BaseLayout accent="amber">
+  <HomeHero {locale} />
+
+  <h1>blitzkit {packageJson.version}</h1>
+
+  {Object.values(tools).map((tool) => <ToolCard {tool} />)}
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -0,0 +1,254 @@
+import { times } from "lodash-es";
+import { Suspense, useMemo } from "react";
+import { TankopediaCharacteristic } from "../../../../components/TankopediaCharacteristic";
+import { TankopediaToy } from "../../../../components/TankopediaToy";
+import { api } from "../../../../core/api/dynamic";
+import { characteristicsOrder } from "../../../../core/tankopedia/characteristicsOrder";
+import { computeCharacteristics } from "../../../../core/tankopedia/computeCharacteristics";
+import type { TerrainHardness } from "../../../../core/tankopedia/tankState";
+import { useAwait } from "../../../../hooks/useAwait";
+import {
+  Tankopedia,
+  type TankopediaCompare,
+} from "../../../../stores/tankopedia";
+
+export function Page({ id }: { id: string }) {
+  return (
+    <Suspense fallback={null}>
+      <Content id={id} />
+    </Suspense>
+  );
+}
+
+function Content({ id }: { id: string }) {
+  const tank = useAwait(() => api.tank(id), `tank-${id}`);
+  const tankList = useAwait(() => api.tankList(), "tank-list");
+  const otherTanks = useAwait(() => api.tanks(), "tanks");
+
+  Tankopedia.useInitialization(tank.tank!);
+
+  const protagonist = Tankopedia.use((state) => state.protagonist);
+  const compare = Tankopedia.use((state) => state.compare);
+  const characteristics = useMemo(
+    () => computeCharacteristics(id, tank, protagonist),
+    [protagonist]
+  );
+  // const otherCharacteristics = useMemo(
+  //   () =>
+  //     tankList.list
+  //       .filter((tank) => tank.id !== id)
+  //       .map(({ id }) => {
+  //         const state = { ...protagonist };
+  //         const tank = otherTanks.tanks[id];
+
+  //         return computeCharacteristics(
+  //           id,
+  //           tank.tank!,
+  //           tank.compensation!,
+  //           state
+  //         );
+  //       }),
+  //   [protagonist]
+  // );
+
+  return (
+    <>
+      <h1>{id}</h1>
+
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "1rem" }}>
+        {tank.tank?.feature_screens?.tags.map((tag) => (
+          <span>{tag.value}</span>
+        ))}
+      </div>
+
+      <br />
+
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {times(tank.tank!.upgrade_stages.length + 1, (index) => (
+          <button
+            key={index}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                draft.protagonist.stage = index;
+              });
+            }}
+          >
+            Stage {index} {index === protagonist.stage && "(selected)"}
+          </button>
+        ))}
+      </div>
+
+      <br />
+
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {characteristics.parameters.shells_upgrades.map((shell) => (
+          <button
+            key={shell.shell_id}
+            onClick={() => {
+              Tankopedia.mutate((draft) => {
+                draft.protagonist.shell = shell.shell_id;
+              });
+            }}
+          >
+            Shell {shell.shell_id}{" "}
+            {shell.shell_id === protagonist.shell && "(selected)"}
+          </button>
+        ))}
+      </div>
+
+      <br />
+
+      <div>
+        <span>speed (0 - {characteristics.characteristics.speed_forward})</span>
+        <input
+          type="range"
+          min={0}
+          max={characteristics.characteristics.speed_forward as number}
+          value={protagonist.speed}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.speed = event.target.valueAsNumber;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isHullTraversing</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isHullTraversing}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isHullTraversing = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isTurretTraversing</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isTurretTraversing}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isTurretTraversing = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isShooting</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isShooting}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isShooting = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div>
+        <span>isGunDamaged</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isGunDamaged}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isGunDamaged = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {Object.values(TerrainHardness).map(
+          (hardness) =>
+            typeof hardness === "number" && (
+              <button
+                key={hardness}
+                onClick={() => {
+                  Tankopedia.mutate((draft) => {
+                    draft.protagonist.terrainHardness = hardness;
+                  });
+                }}
+              >
+                {TerrainHardness[hardness]}{" "}
+                {hardness === protagonist.terrainHardness && "(selected)"}
+              </button>
+            )
+        )}
+      </div>
+
+      <br />
+
+      <div>
+        <span>isCaughtOnFire</span>
+        <input
+          type="checkbox"
+          value={`${protagonist.isCaughtOnFire}`}
+          onChange={(event) => {
+            Tankopedia.mutate((draft) => {
+              draft.protagonist.isCaughtOnFire = event.target.checked;
+            });
+          }}
+        />
+      </div>
+
+      <br />
+
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {Object.values(TankopediaCompare).map(
+          (c) =>
+            typeof c === "number" && (
+              <button
+                key={c}
+                onClick={() => {
+                  Tankopedia.mutate((draft) => {
+                    draft.compare = c;
+                  });
+                }}
+              >
+                {TankopediaCompare[c]} {c === compare && "(selected)"}
+              </button>
+            )
+        )}
+      </div>
+
+      <br />
+
+      {characteristicsOrder.map(({ group, order }) => (
+        <>
+          <h2 key={group}>{group}</h2>
+
+          {order.map((config) =>
+            "toy" in config ? (
+              <TankopediaToy key={`toy-${config.toy}`} toy={config.toy} />
+            ) : (
+              <TankopediaCharacteristic
+                key={`characteristic-${config.name}`}
+                characteristic={characteristics.characteristics[config.name]}
+                others={[]}
+                config={config}
+              />
+            )
+          )}
+        </>
+      ))}
+    </>
+  );
+}

packages/website-ue/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -0,0 +1,22 @@
+---
+import "@radix-ui/colors/violet-dark.css";
+import type { GetStaticPaths } from "astro";
+import { api } from "../../../../core/api/dynamic";
+import BaseLayout from "../../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
+
+export const getStaticPaths = (async () => {
+  const { list } = await api.tankList();
+
+  return list.map((tank) => ({
+    params: { slug: tank.slug },
+    props: { id: tank.id },
+  }));
+}) satisfies GetStaticPaths;
+
+const { id } = Astro.props;
+---
+
+<BaseLayout accent="violet">
+  <Page {id} client:load />
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/tanks/index.astro

@@ -0,0 +1,21 @@
+---
+import "@radix-ui/colors/violet-dark.css";
+import { api } from "../../../core/api/dynamic";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+
+const tankList = await api.tankList();
+---
+
+<BaseLayout accent="violet">
+  <h1>tanks</h1>
+
+  {
+    tankList.list.map(({ id, slug }) => (
+      <p>
+        <a href={`/tanks/${slug}`}>
+          {slug} ({id})
+        </a>
+      </p>
+    ))
+  }
+</BaseLayout>

packages/website-ue/src/pages/api/avatars/[id].webp.ts

@@ -0,0 +1,27 @@
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (async () => {
+  const avatars = await api.avatars();
+
+  return avatars.map((avatar) => ({
+    params: { id: avatar.name },
+  }));
+}) satisfies GetStaticPaths;
+
+/**
+ * One day I will write documentation for this
+ */
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const avatar = await api.avatar(params.id);
+  const profileAvatar = avatar.ProfileAvatar();
+
+  if (import.meta.env.DEV) {
+    return Response.redirect(profileAvatar.avatar);
+  }
+
+  const response = await fetch(profileAvatar.avatar);
+  const buffer = await response.arrayBuffer();
+
+  return new Response(buffer);
+}

packages/website-ue/src/pages/api/backgrounds/[id].webp.ts

@@ -0,0 +1,27 @@
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (async () => {
+  const backgrounds = await api.backgrounds();
+
+  return backgrounds.map((avatar) => ({
+    params: { id: avatar.name },
+  }));
+}) satisfies GetStaticPaths;
+
+/**
+ * One day I will write documentation for this
+ */
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const avatar = await api.background(params.id);
+  const profileBackground = avatar.ProfileBackground();
+
+  if (import.meta.env.DEV) {
+    return Response.redirect(profileBackground.background);
+  }
+
+  const response = await fetch(profileBackground.background);
+  const buffer = await response.arrayBuffer();
+
+  return new Response(buffer);
+}

packages/website-ue/src/pages/api/enums/[enum].json.ts

@@ -0,0 +1,39 @@
+import { TankClass, TankType } from "@blitzkit/core";
+import { Nation } from "@protos/blitz_static_tank_component";
+import type { APIContext, GetStaticPaths } from "astro";
+import { GunType } from "../../../core/tankopedia/characteristics";
+
+const enums = {
+  nation: Nation,
+  "tank-class": TankClass,
+  "tank-type": TankType,
+  "gun-type": GunType,
+};
+
+export const getStaticPaths = (() => {
+  return Object.keys(enums).map((name) => ({ params: { enum: name } }));
+}) satisfies GetStaticPaths;
+
+/**
+ * Enumerations used within BlitzKit, for nominal development reference only.
+ *
+ * DO NOT programmatically use this API as it is designed solely for human
+ * reference.
+ *
+ * DO NOT blindly copy entries as naming conventions vary. Most enums come
+ * directly from the game which uses a SCREAMING_SNAKE_CASE convention while
+ * BlitzKit uses PascalCase.
+ */
+export function GET({
+  params,
+}: APIContext<never, { enum: keyof typeof enums }>) {
+  const map: Record<number, string> = {};
+
+  for (const key in enums[params.enum]) {
+    const value = enums[params.enum][key];
+    if (typeof value !== "string") continue;
+    map[key] = value;
+  }
+
+  return Response.json(map);
+}

packages/website-ue/src/pages/api/strings/[locale].json.ts

@@ -0,0 +1,15 @@
+import locales from "@blitzkit/i18n/locales.json";
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (() => {
+  return locales.supported.map(({ locale }) => ({ params: { locale } }));
+}) satisfies GetStaticPaths;
+
+/**
+ * BlitzKit strings.
+ */
+export async function GET({ params }: APIContext<never, { locale: string }>) {
+  const strings = await api.strings(params.locale);
+  return Response.json(strings);
+}

packages/website-ue/src/pages/api/tanks/[id].json.ts

@@ -0,0 +1,12 @@
+import type { APIContext } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export { getStaticPaths } from "./[id].pb";
+
+/**
+ * Even Noah can't save these animals.
+ */
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const tank = await api.tank(params.id);
+  return Response.json(tank);
+}

packages/website-ue/src/pages/api/tanks/[id].pb.ts

@@ -0,0 +1,16 @@
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+import { Tank } from "../../../protos/tank";
+
+export const getStaticPaths = (async () => {
+  const { list } = await api.tankList();
+  return list.map(({ id }) => ({ params: { id } }));
+}) satisfies GetStaticPaths;
+
+/**
+ * Even Noah can't save these animals.
+ */
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const tank = await api.tank(params.id);
+  return new Response(Tank.encode(tank).finish());
+}

packages/website-ue/src/pages/api/tanks/all.json.ts

@@ -0,0 +1,9 @@
+import { api } from "../../../core/api/dynamic";
+
+/**
+ * Literally all the tanks in one place lmao.
+ */
+export async function GET() {
+  const tanks = await api.tanks();
+  return Response.json(tanks);
+}

packages/website-ue/src/pages/api/tanks/all.pb.ts

@@ -0,0 +1,10 @@
+import { api } from "../../../core/api/dynamic";
+import { Tanks } from "../../../protos/tanks";
+
+/**
+ * Literally all the tanks in one place lmao.
+ */
+export async function GET() {
+  const tanks = await api.tanks();
+  return new Response(Tanks.encode(tanks).finish());
+}

packages/website-ue/src/pages/api/tanks/characteristics.json.ts

@@ -0,0 +1,8 @@
+import { characteristicsOrder } from "../../../core/tankopedia/characteristicsOrder";
+
+/**
+ * The naked man fears no pickpocket.
+ */
+export function GET() {
+  return Response.json(characteristicsOrder);
+}

packages/website-ue/src/pages/api/tanks/list.json.ts

@@ -0,0 +1,9 @@
+import { api } from "../../../core/api/dynamic";
+
+/**
+ * List!
+ */
+export async function GET() {
+  const list = await api.tankList();
+  return Response.json(list);
+}

packages/website-ue/src/pages/api/tanks/list.pb.ts

@@ -0,0 +1,10 @@
+import { api } from "../../../core/api/dynamic";
+import { TankList } from "../../../protos/tank_list";
+
+/**
+ * List!!
+ */
+export async function GET() {
+  const list = await api.tankList();
+  return new Response(TankList.encode(list).finish());
+}

packages/website-ue/src/protos/tank.proto

@@ -0,0 +1,13 @@
+syntax = "proto3";
+
+package blitzkit;
+
+import "blitz_static_compensation_component.proto";
+import "blitz_static_tank_component.proto";
+
+message Tank {
+  blitz_static_tank_component.TankCatalogComponent tank = 1;
+  blitz_static_compensation_component.CompensationComponent compensation = 2;
+
+  string slug = 3;
+}

packages/website-ue/src/protos/tank_list.proto

@@ -0,0 +1,12 @@
+syntax = "proto3";
+
+package blitzkit;
+
+message TankList {
+  repeated TankListEntry list = 1;
+}
+
+message TankListEntry {
+  string id = 1;
+  string slug = 2;
+}

packages/website-ue/src/protos/tanks.proto

@@ -0,0 +1,9 @@
+syntax = "proto3";
+
+package blitzkit;
+
+import "tank.proto";
+
+message Tanks {
+  map<string, Tank> tanks = 1;
+}

packages/website-ue/src/stores/tankopedia.ts

@@ -0,0 +1,22 @@
+import type { TankCatalogComponent } from "@protos/blitz_static_tank_component";
+import { Varuna } from "varuna";
+import { createTankState } from "../core/tankopedia/createTankState";
+import { type TankState } from "../core/tankopedia/tankState";
+
+interface Tankopedia {
+  compare: TankopediaCompare;
+  protagonist: TankState;
+}
+
+export enum TankopediaCompare {
+  TierAndClass,
+  Tier,
+  All,
+}
+
+export const Tankopedia = new Varuna<Tankopedia, TankCatalogComponent>(
+  (tank) => ({
+    compare: TankopediaCompare.TierAndClass,
+    protagonist: createTankState(tank),
+  })
+);

packages/website-ue/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["../../tsconfig.json", "astro/tsconfigs/base"],
+  "compilerOptions": {
+    "paths": {
+      "@protos/*": ["../../packages/closed/protos/*"]
+    }
+  }
+}

packages/website/src/layouts/BaseLayout.astro

@@ -11,7 +11,6 @@ import LocaleRedirector from "../components/LocaleRedirector.astro";
 import Meta from "../components/Meta.astro";
 import Navbar from "../components/Navbar.astro";
 import Servicing from "../components/Servicing.astro";
-import "./base.css";
 
 export interface Props {
   noFooter?: boolean;