feat: implement some

.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",
@@ -175,6 +174,7 @@
     "ratingleaderboard",
     "raycaster",
     "Redirector",
+    "REGEN",
     "Relogin",
     "researchable",
     "Resvg",
@@ -189,6 +189,7 @@
     "searchtanks",
     "SHAREDEXP",
     "SKLLD",
+    "sluggify",
     "smoothstep",
     "Smri",
     "Specularity",

bun.lock

@@ -176,6 +176,43 @@
         "vite": "^7.1.9",
       },
     },
+    "packages/website-ue": {
+      "name": "@blitzkit/website-ue",
+      "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:*",
+        "@radix-ui/colors": "^3.0.0",
+        "@radix-ui/react-icons": "^1.3.2",
+        "@radix-ui/themes": "^3.2.1",
+        "@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": {
     "@apideck/better-ajv-errors": ["@apideck/[email protected]", "", { "dependencies": { "json-schema": "^0.4.0", "jsonpointer": "^5.0.0", "leven": "^3.1.0" }, "peerDependencies": { "ajv": ">=8" } }, "sha512-P+ZygBLZtkp0qqOAJJVX4oX/sFo5JR3eBWwwuqHHhK0GIgQOKWrAfiAaWX0aArHkRWHMuggFEgAZNxVPwPZYaA=="],
@@ -404,6 +441,8 @@
 
     "@blitzkit/website": ["@blitzkit/website@workspace:packages/website"],
 
+    "@blitzkit/website-ue": ["@blitzkit/website-ue@workspace:packages/website-ue"],
+
     "@bufbuild/protobuf": ["@bufbuild/[email protected]", "", {}, "sha512-fdRs9PSrBF7QUntpZpq6BTw58fhgGJojgg39m9oFOJGZT+nip9b0so5cYY1oWl5pvemDLr0cPPsH46vwThEbpQ=="],
 
     "@capsizecss/unpack": ["@capsizecss/[email protected]", "", { "dependencies": { "fontkit": "^2.0.2" } }, "sha512-+ntATQe1AlL7nTOYjwjj6w3299CgRot48wL761TUGYpYgAou3AaONZazp0PKZyCyWhudWsjhq1nvRHOvbMzhTA=="],
@@ -2620,6 +2659,8 @@
 
     "@blitzkit/website/vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg=="],
 
+    "@blitzkit/website-ue/vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg=="],
+
     "@discordjs/rest/@discordjs/collection": ["@discordjs/[email protected]", "", {}, "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg=="],
 
     "@discordjs/ws/@discordjs/collection": ["@discordjs/[email protected]", "", {}, "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg=="],

package.json

@@ -7,7 +7,7 @@
     "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,22 +16,22 @@
     "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",

packages/core/src/blitzkit/index.ts

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

@@ -12,6 +12,7 @@ const TS_PROTO_EXECUTABLE_LOCATIONS = [
 const roots = [
   // "../../packages/core/src/protos",
   "../../packages/closed/protos",
+  "../../packages/website-ue/src/protos",
 ];
 
 const exec = promisify(execSync);
@@ -66,7 +67,7 @@ for (const root of roots) {
 
       if (command.length + newLine.length < MAX_COMMAND_LENGTH) {
         command += newLine;
-        files.pop();
+        console.log(`  ${files.pop()}`);
       } else {
         break;
       }

packages/website-ue/astro.config.ts

@@ -0,0 +1,114 @@
+import node from "@astrojs/node";
+import react from "@astrojs/react";
+import { wrapper } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import strings from "@blitzkit/i18n/strings/en.json";
+import { mauve, mauveDark } from "@radix-ui/colors";
+import AstroPWA from "@vite-pwa/astro";
+import favicons from "astro-favicons";
+import { defineConfig } from "astro/config";
+import packageJSON from "../../package.json";
+import { tools } from "./src/core/tools/tools";
+
+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: [] } },
+  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/images/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,
+      },
+    }),
+
+    AstroPWA({
+      manifest: false,
+      devOptions: { enabled: true },
+      workbox: {
+        globPatterns: ["**/*.{html,css,js,png,webp,svg,xml,json}"],
+        runtimeCaching: [
+          {
+            urlPattern: ({ url }) =>
+              url.href.startsWith(import.meta.env.PUBLIC_ASSET_BASE),
+            handler: "NetworkFirst",
+          },
+        ],
+      },
+    }),
+
+    react(),
+  ],
+});

packages/website-ue/package.json

@@ -0,0 +1,45 @@
+{
+  "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:*",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/themes": "^3.2.1",
+    "@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/core/api/abstract.ts

@@ -0,0 +1,13 @@
+import type { TankCatalogComponent } from "@protos/blitz_static_tank_component";
+import type { Tanks } from "../../protos/tanks";
+
+export abstract class AbstractAPI {
+  abstract tanks(): Promise<Tanks>;
+
+  abstract strings(
+    locale: string,
+    prefix?: string
+  ): Promise<Record<string, string>>;
+
+  abstract tank(id: string): Promise<TankCatalogComponent>;
+}

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

@@ -0,0 +1,12 @@
+import { TankCatalogComponent } from "@protos/blitz_static_tank_component";
+import { AbstractAPI } from "./abstract";
+
+export class ClientAPI extends AbstractAPI {
+  async tank(id: string) {
+    const response = await fetch(`/api/tanks/${id}.pb`);
+    const buffer = await response.arrayBuffer();
+    const array = new Uint8Array(buffer);
+
+    return TankCatalogComponent.decode(array);
+  }
+}

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

@@ -0,0 +1,21 @@
+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(
+    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,122 @@
+import type { MetadataAccessor } from "@blitzkit/closed";
+import { sluggify } from "@blitzkit/core";
+import type { RemoteStorageComponent } from "@protos/blitz_static_remote_storage_component";
+import { parse } from "yaml";
+import type { TanksEntry } from "../../protos/tanks";
+import { AbstractAPI } from "./abstract";
+
+if (typeof window !== "undefined") {
+  throw new Error("ServerAPI is being evaluated in the browser");
+}
+
+interface LocalizationConfig {
+  namespaces: string[];
+}
+
+export class ServerAPI extends AbstractAPI {
+  constructor(private metadata: MetadataAccessor) {
+    super();
+  }
+
+  async strings(locale: 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
+      );
+    }
+
+    return strings;
+  }
+
+  async tanks() {
+    const group = this.metadata.group("TankEntity");
+    const tanks: TanksEntry[] = [];
+    const strings = await this.strings("en");
+
+    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);
+
+      tanks.push({ id, slug });
+    }
+
+    return { tanks };
+  }
+
+  async tank(id: string) {
+    const item = this.metadata.item(`TankEntity.${id}`);
+    const tankCatalog = item.TankCatalog();
+
+    return tankCatalog;
+  }
+}

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

@@ -0,0 +1,212 @@
+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) {
+    if (penetrationGroupUpgrade1.primary_armor.length > 0) {
+      throw new Error("Primary armor is not empty; implement this");
+    }
+
+    let penetrationGroupUpgrade0 = stage0.penetration_groups_upgrades.find(
+      (group) => group.tank_part === penetrationGroupUpgrade1.tank_part
+    );
+
+    if (!penetrationGroupUpgrade0) {
+      penetrationGroupUpgrade0 = PenetrationGroupUpgrade.create({
+        tank_part: penetrationGroupUpgrade1.tank_part,
+      });
+
+      stage0.penetration_groups_upgrades.push(penetrationGroupUpgrade0);
+    }
+
+    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)
+        );
+      }
+    }
+  }
+
+  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) {
+    throw new Error("Pump reload times not implemented");
+  }
+
+  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[],
+  stage: number
+) {
+  const stage0 = StageParameters.create();
+
+  patch(stage0, base);
+
+  /**
+   * 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 (stage0.stage_number === 0 && import.meta.env.DEV) {
+    throw new Error(
+      "Base stats are now stage 0. In-game bug fixed, please remove hack."
+    );
+  }
+
+  stage0.stage_number = 0;
+
+  stages.forEach((stage) => patch(stage0, stage));
+
+  return stage0;
+}

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

@@ -0,0 +1,309 @@
+import {
+  ShellUpgrageSingleChange_AttributeName,
+  TankAttributeChange_AttributeName,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+
+export type CharacteristicOutput = number | 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;
+}) => CharacteristicOutput;
+
+export type CharacteristicName = keyof typeof characteristics;
+
+export enum GunType {
+  Regular,
+  AutoLoader,
+  AutoReloader,
+}
+
+export const characteristics = {
+  gun_type({ attribute }) {
+    const isPump = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_IS_PUMP
+    );
+
+    if (isPump === 1) return GunType.AutoReloader;
+
+    const clipSize = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+    );
+
+    if (clipSize === 1) return GunType.Regular;
+
+    return GunType.AutoLoader;
+  },
+
+  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.Regular) return null;
+
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_RELOAD_TIME
+    );
+  },
+
+  dpm({ characteristic }) {
+    let dps: number;
+    const gunType = characteristic("gun_type")!;
+    const damage = characteristic("damage")!;
+
+    switch (gunType) {
+      case GunType.Regular: {
+        const reload = characteristic("reload")!;
+        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);
+  },
+
+  shell_range({ shellSafe }) {
+    const maxDistance = shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_DISTANCE
+    );
+    return maxDistance === null ? Infinity : maxDistance;
+  },
+
+  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
+    );
+  },
+
+  dispersion_still({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_ANGLE
+    );
+  },
+
+  dispersion_moving({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_MOVEMENT
+    );
+  },
+
+  dispersion_hull_traversing({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_ROTATION
+    );
+  },
+
+  dispersion_turret_traversing({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_TURRET_ROTATION
+    );
+  },
+
+  dispersion_shooting({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_AFTER_SHOT
+    );
+  },
+
+  dispersion_gun_damaged({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_WHILE_GUN_DAMAGED
+    );
+  },
+
+  gun_depression({ attributeSafe }) {
+    return (
+      attributeSafe(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_PITCH_LIMIT_DOWN
+      ) ?? -Infinity
+    );
+  },
+
+  gun_elevation({ attributeSafe }) {
+    return (
+      attributeSafe(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_PITCH_LIMIT_UP
+      ) ?? -Infinity
+    );
+  },
+
+  speed_forward({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FORWARD_MAX_SPEED
+    );
+  },
+
+  speed_backward({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_BACKWARD_MAX_SPEED
+    );
+  },
+
+  engine_power({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_ENGINE_POWER
+    );
+  },
+
+  weight({ attribute }) {
+    return attribute(TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MASS);
+  },
+
+  terrain_coefficient_hard({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_HARD
+    );
+  },
+
+  terrain_coefficient_medium({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_MEDIUM
+    );
+  },
+
+  terrain_coefficient_soft({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_SOFT
+    );
+  },
+
+  power_to_weight_hard() {
+    return -1;
+  },
+
+  power_to_weight_medium() {
+    return -1;
+  },
+
+  power_to_weight_soft() {
+    return -1;
+  },
+
+  turret_traverse_speed({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TURRET_ROTATION_SPEED
+    );
+  },
+
+  hull_traverse_speed_hard() {
+    return -1;
+  },
+
+  hull_traverse_speed_medium() {
+    return -1;
+  },
+
+  hull_traverse_speed_soft() {
+    return -1;
+  },
+
+  health({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MAX_HEALTH
+    );
+  },
+
+  fire_chance({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FIRE_START_CHANCE
+    );
+  },
+
+  view_range({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CIRCULAR_VISION_RADIUS
+    );
+  },
+
+  camouflage_still({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_STILL
+    );
+  },
+
+  camouflage_moving({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_MOVING
+    );
+  },
+
+  camouflage_shooting_still({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FACTOR_AT_SHOT
+    );
+  },
+
+  camouflage_shooting_moving() {
+    return -1;
+  },
+
+  camouflage_on_fire({ attributeSafe }) {
+    return (
+      attributeSafe(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FIRE_PENALTY
+      ) ?? -Infinity
+    );
+  },
+
+  height() {
+    return -1;
+  },
+
+  length() {
+    return -1;
+  },
+
+  volume() {
+    return -1;
+  },
+} satisfies Record<string, Characteristic>;

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

@@ -0,0 +1,108 @@
+import type { CharacteristicName } from "./characteristics";
+
+export enum BetterDirection {
+  Higher,
+  Lower,
+}
+
+type CharacteristicsOrder = {
+  group: string;
+  order: (
+    | {
+        name: CharacteristicName;
+        decimals?: number;
+      }
+    | {
+        toy: string;
+      }
+  )[];
+}[];
+
+export const characteristicsGroups: CharacteristicsOrder = [
+  {
+    group: "firepower",
+    order: [
+      { name: "gun_type" },
+      { name: "dpm", decimals: 0 },
+      { name: "damage" },
+      { name: "module_damage" },
+      { name: "penetration" },
+      { name: "reload" },
+
+      { toy: "reload" },
+
+      { name: "caliber" },
+      { name: "normalization" },
+      { name: "ricochet" },
+
+      { toy: "ricochet" },
+
+      { name: "shell_velocity" },
+      { name: "shell_range" },
+      { name: "shell_capacity" },
+
+      { name: "aim_time" },
+
+      { name: "dispersion_still" },
+      { name: "dispersion_moving" },
+      { name: "dispersion_hull_traversing" },
+      { name: "dispersion_turret_traversing" },
+      { name: "dispersion_shooting" },
+      { name: "dispersion_gun_damaged" },
+
+      { name: "gun_depression" },
+      { name: "gun_elevation" },
+
+      { toy: "flexibility" },
+    ],
+  },
+  {
+    group: "maneuverability",
+    order: [
+      { name: "speed_forward" },
+      { name: "speed_backward" },
+
+      { name: "engine_power" },
+      { name: "weight" },
+
+      { name: "terrain_coefficient_hard" },
+      { name: "terrain_coefficient_medium" },
+      { name: "terrain_coefficient_soft" },
+
+      { name: "power_to_weight_hard" },
+      { name: "power_to_weight_medium" },
+      { name: "power_to_weight_soft" },
+
+      { name: "turret_traverse_speed" },
+      { name: "hull_traverse_speed_hard" },
+      { name: "hull_traverse_speed_medium" },
+      { name: "hull_traverse_speed_soft" },
+
+      { toy: "traverse" },
+    ],
+  },
+  {
+    group: "survivability",
+    order: [
+      { name: "health" },
+      { name: "fire_chance" },
+      { name: "view_range" },
+
+      { toy: "view_range" },
+
+      { name: "camouflage_still" },
+      { name: "camouflage_moving" },
+      { name: "camouflage_shooting_still" },
+      { name: "camouflage_shooting_moving" },
+      { name: "camouflage_on_fire" },
+
+      { name: "height" },
+      { name: "length" },
+      { name: "volume" },
+    ],
+  },
+  {
+    group: "miscellaneous",
+    order: [],
+  },
+];

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

@@ -0,0 +1,88 @@
+import {
+  ShellUpgrageSingleChange_AttributeName,
+  TankAttributeChange_AttributeName,
+  type StageParameters,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import {
+  characteristics,
+  type CharacteristicName,
+  type CharacteristicOutput,
+} from "./characteristics";
+import type { TankState } from "./tankState";
+
+export function computeCharacteristics(
+  parameters: StageParameters,
+  state: TankState
+) {
+  const computed: Partial<Record<CharacteristicName, CharacteristicOutput>> =
+    {};
+
+  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,
+    });
+    computed[name] = value;
+  }
+
+  return computed as Record<CharacteristicName, CharacteristicOutput>;
+}

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

@@ -0,0 +1,5 @@
+export interface TankState {
+  stage: number;
+
+  shell: number;
+}

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

@@ -0,0 +1,82 @@
+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,
+  },
+  players: {
+    id: "players",
+    disabled: true,
+    button: "blue",
+  },
+  compare: {
+    id: "compare",
+    button: "crimson",
+  },
+  performance: {
+    id: "performance",
+    button: "jade",
+  },
+  charts: {
+    id: "charts",
+    disabled: true,
+    button: "bronze",
+  },
+  playlist: {
+    id: "playlist",
+    button: "tomato",
+  },
+  mixer: {
+    id: "mixer",
+    button: "gray",
+  },
+  guess: {
+    id: "guess",
+    button: "cyan",
+  },
+  gallery: {
+    id: "gallery",
+    button: "gold",
+  },
+  session: {
+    id: "session",
+    button: "blue",
+  },
+  discord: {
+    id: "discord",
+    href: "https://discord.com/application-directory/1097673957865443370",
+    button: "indigo",
+  },
+  tier_list: {
+    id: "tier-list",
+    strings: "tier_list",
+    button: "orange",
+  },
+  embed: {
+    id: "embed",
+    button: "red",
+  },
+  api: {
+    id: "api",
+    disabled: true,
+    button: "bronze",
+  },
+  more: {
+    id: "more",
+    href: "https://discord.gg/nDt7AjGJQH",
+    button: "plum",
+  },
+};

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/layouts/BaseLayout.astro

@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>

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

@@ -0,0 +1,14 @@
+import { TankCatalogComponent } from "@protos/blitz_static_tank_component";
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (async () => {
+  const { tanks } = await api.tanks();
+
+  return tanks.map(({ id }) => ({ params: { id } }));
+}) satisfies GetStaticPaths;
+
+export async function GET({ params }: APIContext<never, { id: string }>) {
+  const tank = await api.tank(params.id);
+  return new Response(TankCatalogComponent.encode(tank).finish());
+}

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

@@ -0,0 +1,5 @@
+import { _characteristicsOrder } from "../../../../core/tankopedia/characteristics";
+
+export function GET() {
+  return Response.json(_characteristicsOrder);
+}

packages/website-ue/src/pages/index.astro

@@ -0,0 +1 @@
+go to <a href="/tanks">/tanks</a>

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

@@ -0,0 +1,107 @@
+import { times } from "lodash-es";
+import { Suspense, useMemo } from "react";
+import { api } from "../../../core/api/dynamic";
+import { aggregateStageParameters } from "../../../core/tankopedia/aggregateStageParameters";
+import { characteristicsGroups } from "../../../core/tankopedia/characteristicsGroups";
+import { computeCharacteristics } from "../../../core/tankopedia/computeCharacteristics";
+import { useAwait } from "../../../hooks/useAwait";
+import { Tankopedia } 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 protagonist = Tankopedia.use((state) => state.protagonist);
+  const parameters = useMemo(
+    () =>
+      aggregateStageParameters(
+        tank.base_stats!,
+        tank.upgrade_stages.slice(0, protagonist.stage),
+        protagonist.shell
+      ),
+    [protagonist]
+  );
+  const characteristics = useMemo(
+    () => computeCharacteristics(parameters, protagonist),
+    [protagonist]
+  );
+
+  return (
+    <>
+      <h1>{id}</h1>
+
+      <div style={{ display: "flex", flexWrap: "wrap" }}>
+        {times(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" }}>
+        {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>
+
+      {characteristicsGroups.map(({ group, order }) => (
+        <>
+          <h2 key={group}>{group}</h2>
+
+          {order.map((entry) => {
+            if ("toy" in entry) {
+            } else {
+              const characteristic = characteristics[entry.name];
+
+              if (characteristic === null) return null;
+
+              let rendered: string | number;
+
+              if (Number.isFinite(characteristic)) {
+                if (entry.decimals === undefined) {
+                  rendered = characteristic;
+                } else {
+                  rendered = characteristic.toFixed(entry.decimals);
+                }
+              } else {
+                rendered = `${Math.sign(characteristic) === 1 ? "" : "-"}∞`;
+              }
+
+              return (
+                <p key={entry.name}>
+                  {entry.name}: {rendered}
+                </p>
+              );
+            }
+          })}
+        </>
+      ))}
+    </>
+  );
+}

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

@@ -1,6 +1,8 @@
 ---
 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 { tanks } = await api.tanks();
@@ -14,8 +16,6 @@ export const getStaticPaths = (async () => {
 const { id } = Astro.props;
 ---
 
-<h1>Tank {id}</h1>
+<BaseLayout>
-
+  <Page {id} client:load />
-<code>
+</BaseLayout>
-  <pre>{JSON.stringify(await api.tank(id), null, 2)}</pre>
-</code>

packages/website-ue/src/pages/tanks/index.astro

@@ -0,0 +1,19 @@
+---
+import { api } from "../../core/api/dynamic";
+
+const tanksList = await api.tanks();
+---
+
+<h1>Tanks</h1>
+
+<ul>
+  {
+    tanksList.tanks.map(({ id, slug }) => (
+      <li>
+        <a href={`/tanks/${slug}`}>
+          {slug} ({id})
+        </a>
+      </li>
+    ))
+  }
+</ul>

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

@@ -0,0 +1,12 @@
+syntax = "proto3";
+
+package blitzkit;
+
+message Tanks {
+  repeated TanksEntry tanks = 1;
+}
+
+message TanksEntry {
+  string id = 1;
+  string slug = 2;
+}

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

@@ -0,0 +1,10 @@
+import { Varuna } from "varuna";
+import type { TankState } from "../core/tankopedia/tankState";
+
+interface Tankopedia {
+  protagonist: TankState;
+}
+
+export const Tankopedia = new Varuna<Tankopedia>({
+  protagonist: { stage: 0, shell: 0 },
+});

packages/website-ue/tsconfig.json

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