fix: update errors

.gitignore

@@ -24,7 +24,7 @@ public/sitemap*
 target
 # packages/core/src/protos/*.ts
 /.vercel
-/.astro
+.astro
 .vercel
 /src
 /packages/bot/src/prisma

packages/core/src/blitzkit/tankNames.ts

@@ -1,8 +1,8 @@
-import { deburr } from 'lodash-es';
-import { SUPPORTED_LOCALES } from '../../../i18n/src/strings';
-import { I18nString } from '../protos';
-import { fetchCamouflageDefinitions } from './camouflageDefinitions';
-import { fetchTankDefinitions } from './tankDefinitions';
+import locales from "@blitzkit/i18n/locales.json";
+import { deburr } from "lodash-es";
+import { I18nString } from "../protos";
+import { fetchCamouflageDefinitions } from "./camouflageDefinitions";
+import { fetchTankDefinitions } from "./tankDefinitions";
 
 export async function fetchTankNames() {
   const [tankDefinitions, camouflageDefinitions] = await Promise.all([
@@ -26,25 +26,27 @@ export async function fetchTankNames() {
         searchableNameDeburr,
         camouflages: tank.camouflages
           ?.map((id) =>
-            SUPPORTED_LOCALES.map(
-              (locale) =>
-                camouflageDefinitions.camouflages[id]?.name.locales[locale],
-            ),
+            locales.supported.map(
+              ({ locale }) =>
+                camouflageDefinitions.camouflages[id]?.name.locales[locale]
+            )
           )
           .flat()
           .filter(Boolean)
           .map(deburr)
-          .join(' '),
+          .join(" "),
         treeType: tank.type,
       };
-    }),
+    })
   );
 }
 
 export const SEARCH_KEYS = [
-  ...SUPPORTED_LOCALES.map((locale) => [
-    `searchableName.locales.${locale}`,
-    `searchableNameDeburr.locales.${locale}`,
-  ]).flat(),
-  'camouflages',
+  ...locales.supported
+    .map(({ locale }) => [
+      `searchableName.locales.${locale}`,
+      `searchableNameDeburr.locales.${locale}`,
+    ])
+    .flat(),
+  "camouflages",
 ];

packages/i18n/src/index.ts

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

packages/i18n/src/strings.ts

@@ -1,98 +1,66 @@
-import { merge } from 'ts-deepmerge';
-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 { 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";
 
 export type BlitzKitStrings = typeof en;
 
-const stringsRaw = { en, es, fr, ja, pl, pt, ru, uk, zh };
+const stringsRaw: Record<string, TranslationTree> = {
+  en,
+  es,
+  fr,
+  ja,
+  pl,
+  pt,
+  ru,
+  uk,
+  zh,
+};
 
-export const SUPPORTED_LOCALES = Object.keys(stringsRaw) as SupportedLocale[];
-
-export const DEFAULT_LOCALE = SUPPORTED_LOCALES[0];
-
-function redact(string: string) {
-  const matches = [...string.matchAll(/%s\d+/g)];
-  const characters = string
-    .split('')
-    .map((char) => (char === ' ' ? ' ' : '█')) as string[];
-
-  matches.forEach((match) => {
-    const start = match.index;
-    const matchText = match[0];
-    for (let i = 0; i < matchText.length; i++) {
-      characters[start + i] = matchText[i];
-    }
-  });
-
-  return characters.join('');
-}
-
-function nuke(object: TranslationTree) {
-  for (const key in object) {
-    const typedKey = key as keyof typeof object;
-
-    if (typeof object[typedKey] === 'string') {
-      const value = object[typedKey];
-      object[typedKey] = redact(value as string);
-    } else nuke(object[typedKey] as TranslationTree);
-  }
-}
-
-const stringsPartial: Partial<Record<SupportedLocale, TranslationTree>> = {};
+export const STRINGS: Record<string, BlitzKitStrings> = {};
 
 for (const locale in stringsRaw) {
-  if (locale === DEFAULT_LOCALE) {
-    stringsPartial[DEFAULT_LOCALE] = stringsRaw[DEFAULT_LOCALE];
+  if (locale === locales.default) {
+    STRINGS[locales.default] = stringsRaw[locales.default] as BlitzKitStrings;
     continue;
   }
 
-  const localeStrings = stringsRaw[locale as SupportedLocale];
-  stringsPartial[locale as SupportedLocale] = merge(
-    stringsRaw[DEFAULT_LOCALE],
-    localeStrings,
-  );
-
-  if (import.meta.env.PUBLIC_DEBUG_MISSING_I18N === 'true') {
-    nuke(stringsPartial[locale as SupportedLocale]!);
-  }
+  const localeStrings = stringsRaw[locale];
+  STRINGS[locale] = merge(
+    stringsRaw[locales.default],
+    localeStrings
+  ) as BlitzKitStrings;
 }
 
-export const STRINGS = stringsPartial as Record<
-  SupportedLocale,
-  BlitzKitStrings
->;
-
-export type SupportedLocale = keyof typeof stringsRaw;
-
-export const SUPPORTED_LOCALE_BLITZ_MAP: Record<SupportedLocale, string> = {
-  en: 'en',
-  es: 'es',
-  fr: 'fr',
-  ja: 'ja',
-  pt: 'pt',
-  ru: 'ru',
-  uk: 'uk',
-  zh: 'zh-Hans',
-  pl: 'pl',
+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<SupportedLocale, string> = {
-  en: '🇺🇸',
-  es: '🇪🇸',
-  fr: '🇫🇷',
-  ja: '🇯🇵',
-  pt: '🇵🇹',
-  ru: '🇷🇺',
-  uk: '🇺🇦',
-  zh: '🇨🇳',
-  pl: '🇵🇱',
+export const SUPPORTED_LOCALE_FLAGS: Record<string, string> = {
+  en: "🇺🇸",
+  es: "🇪🇸",
+  fr: "🇫🇷",
+  ja: "🇯🇵",
+  pt: "🇵🇹",
+  ru: "🇷🇺",
+  uk: "🇺🇦",
+  zh: "🇨🇳",
+  pl: "🇵🇱",
 };
 
 export type TranslationTree = { [key: string]: TranslationNode };

packages/i18n/src/unwrapper.ts

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

packages/i18n/src/wrapper.ts

@@ -0,0 +1,15 @@
+import locales from "../locales.json";
+import { 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/website/.gitignore

@@ -1,24 +0,0 @@
-# build output
-dist/
-# generated types
-.astro/
-
-# dependencies
-node_modules/
-
-# logs
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
-
-# jetbrains setting folder
-.idea/
-.vercel/

packages/website/astro.config.mjs

@@ -1,58 +0,0 @@
-// @ts-check
-
-import react from "@astrojs/react";
-import sitemap from "@astrojs/sitemap";
-import { SUPPORTED_LOCALES } from "@blitzkit/i18n";
-import strings from "@blitzkit/i18n/strings/en.json";
-import favicons from "astro-favicons";
-import { defineConfig } from "astro/config";
-
-export default defineConfig({
-  i18n: {
-    defaultLocale: "en",
-    locales: [...SUPPORTED_LOCALES],
-    routing: {
-      prefixDefaultLocale: false,
-    },
-  },
-
-  devToolbar: { enabled: false },
-  output: "static",
-  site: "https://blitzkit.app",
-  outDir: "../../dist/website",
-  prefetch: true,
-
-  integrations: [
-    react(),
-    sitemap(),
-    favicons({
-      name: strings.common.name,
-      short_name: strings.common.name,
-
-      manifest: {
-        start_url: "/",
-        display_override: ["minimal-ui"],
-      },
-
-      icons: {
-        windows: true,
-        android: true,
-        appleIcon: true,
-        appleStartup: true,
-        favicons: true,
-        yandex: true,
-      },
-    }),
-  ],
-  vite: {
-    resolve: {
-      alias: {
-        ".prisma/client/index-browser":
-          "../../node_modules/.prisma/client/index-browser.js",
-      },
-    },
-    ssr: {
-      noExternal: [/^d3.*$/, /^@nivo.*$/],
-    },
-  },
-});

packages/website/astro.config.ts

@@ -0,0 +1,82 @@
+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/constants/tools";
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+
+  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}`,
+          };
+        }),
+
+      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 }),
+
+    react(),
+  ],
+});

packages/website/package.json

@@ -3,52 +3,22 @@
   "type": "module",
   "scripts": {
     "dev": "astro dev",
-    "start": "astro dev",
-    "lint": "astro check",
-    "build": "astro check && astro build",
+    "build": "astro build",
     "preview": "astro preview",
+    "lint": "astro check",
     "astro": "astro"
   },
   "dependencies": {
-    "@astrolib/seo": "^1.0.0-beta.8",
-    "@blitzkit/core": "workspace:*",
-    "@blitzkit/i18n": "workspace:*",
-    "varuna": "workspace:*",
-    "@fontsource/inter": "^5.2.8",
-    "@nanostores/persistent": "^1.1.0",
-    "@nanostores/react": "^1.0.0",
-    "@nivo/bar": "^0.99.0",
-    "@nivo/line": "^0.99.0",
-    "@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.3.0",
-    "compare-versions": "^6.1.1",
-    "echarts": "^6.0.0",
-    "immer": "^10.1.3",
-    "js-cookie": "^3.0.5",
-    "markdown-to-jsx": "^7.7.13",
-    "nanostores": "^1.0.1",
-    "quicklime": "^1.2.0",
-    "react": "^19.1.1",
-    "react-device-detect": "^2.2.3",
-    "react-dom": "^19.1.1",
-    "react-promise-suspense": "^0.3.4",
-    "three": "^0.180.0",
-    "urlon": "^3.1.0"
-  },
-  "devDependencies": {
-    "@astrojs/check": "^0.9.4",
     "@astrojs/react": "^4.4.0",
-    "@astrojs/sitemap": "^3.6.0",
-    "@playform/compress": "^0.2.0",
-    "@playform/inline": "^0.1.2",
-    "@types/js-cookie": "^3.0.6",
+    "@radix-ui/colors": "^3.0.0",
+    "@react-three/fiber": "^9.3.0",
     "@types/react": "^19.1.14",
     "@types/react-dom": "^19.1.9",
-    "@types/three": "^0.180.0",
+    "@vite-pwa/astro": "^1.1.0",
     "astro": "^5.14.1",
-    "astro-compressor": "^1.1.2"
+    "astro-favicons": "^3.1.5",
+    "fuzzysort": "^3.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   }
 }

packages/website/public/favicon.svg

@@ -1,47 +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="url(#paint0_linear_544_230)"/>
-<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="url(#paint1_linear_544_230)"/>
-<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37173 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.37173 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(#paint2_linear_544_230)"/>
-<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37173 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(#paint3_linear_544_230)"/>
-<g filter="url(#filter0_d_544_230)">
-<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(#paint4_linear_544_230)"/>
-<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.557 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(#paint5_linear_544_230)"/>
+<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_544_230" x="51.6" y="107.6" width="325.902" height="207.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<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="8"/>
-<feGaussianBlur stdDeviation="9.2"/>
+<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_544_230"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_544_230" result="shape"/>
+<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_544_230" x1="127.008" y1="227.288" x2="174.926" y2="391.583" gradientUnits="userSpaceOnUse">
-<stop stop-color="#0F3F7D"/>
-<stop offset="1" stop-color="#10284C"/>
-</linearGradient>
-<linearGradient id="paint1_linear_544_230" x1="213" y1="196.6" x2="213" y2="379.6" gradientUnits="userSpaceOnUse">
+<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="paint2_linear_544_230" x1="213" y1="46" x2="213" y2="347.2" gradientUnits="userSpaceOnUse">
-<stop stop-color="#10243E"/>
-<stop offset="1" stop-color="#0F1B2D"/>
+<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="paint3_linear_544_230" x1="127.008" y1="96.51" x2="241.48" y2="334.974" gradientUnits="userSpaceOnUse">
-<stop stop-color="#0F3F7D"/>
-<stop offset="1" stop-color="#10284C"/>
+<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="paint4_linear_544_230" x1="318.524" y1="40.5884" x2="402.41" y2="158.706" gradientUnits="userSpaceOnUse">
-<stop offset="0.34" stop-color="#EAF6FF"/>
-<stop offset="0.64" stop-color="#97CBFF"/>
-</linearGradient>
-<linearGradient id="paint5_linear_544_230" x1="318.524" y1="40.5884" x2="402.41" y2="158.706" gradientUnits="userSpaceOnUse">
-<stop offset="0.34" stop-color="#EAF6FF"/>
-<stop offset="0.64" stop-color="#97CBFF"/>
+<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/src/components/Armor/components/ModelTankWrapper.tsx

@@ -1,7 +1,8 @@
-import type { GroupProps } from '@react-three/fiber';
-import { forwardRef } from 'react';
-import { Group } from 'three';
+import { forwardRef, type ComponentProps } from "react";
+import { Group } from "three";
 
-export const ModelTankWrapper = forwardRef<Group, GroupProps>((props, ref) => {
-  return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
-});
+export const ModelTankWrapper = forwardRef<Group, ComponentProps<"group">>(
+  (props, ref) => {
+    return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
+  }
+);

packages/website/src/components/Armor/components/PrimaryArmorScene.tsx

@@ -1,19 +1,19 @@
-import { memo, useRef } from 'react';
-import { Group } from 'three';
-import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
-import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../core/blitzkit/resolveThickness';
-import { useArmor } from '../../../hooks/useArmor';
-import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../hooks/useTankTransform';
-import { Duel } from '../../../stores/duel';
-import { ModelTankWrapper } from './ModelTankWrapper';
-import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
+import { memo, useRef } from "react";
+import { Group } from "three";
+import { correctZYTuple } from "../../../core/blitz/correctZYTuple";
+import { nameToArmorId } from "../../../core/blitzkit/nameToArmorId";
+import { resolveArmor } from "../../../core/blitzkit/resolveThickness";
+import { useArmor } from "../../../hooks/useArmor";
+import { useTankModelDefinition } from "../../../hooks/useTankModelDefinition";
+import { useTankTransform } from "../../../hooks/useTankTransform";
+import { Duel } from "../../../stores/duel";
+import { ModelTankWrapper } from "./ModelTankWrapper";
+import { PrimaryArmorSceneComponent } from "./PrimaryArmorSceneComponent";
 
 export const PrimaryArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -28,7 +28,7 @@ export const PrimaryArmorScene = memo(() => {
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
   const isDynamicArmorActive = Duel.use((state) =>
-    state.protagonist.consumables.includes(73),
+    state.protagonist.consumables.includes(73)
   );
 
   useTankTransform(track, turret, turretContainer, gunContainer);
@@ -37,20 +37,20 @@ export const PrimaryArmorScene = memo(() => {
     <ModelTankWrapper ref={wrapper}>
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
+          const isHull = node.name.startsWith("hull_");
           const isVisible = isHull;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             tankModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             spaced ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_01')) ||
-            (!isDynamicArmorActive && node.name.includes('state_00'))
+            (isDynamicArmorActive && node.name.includes("state_01")) ||
+            (!isDynamicArmorActive && node.name.includes("state_00"))
           )
             return null;
 
@@ -67,21 +67,21 @@ export const PrimaryArmorScene = memo(() => {
       <group ref={turretContainer}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, '0')}`,
+            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`
           );
           const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             turretModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             spaced ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_01')) ||
-            (!isDynamicArmorActive && node.name.includes('state_00'))
+            (isDynamicArmorActive && node.name.includes("state_01")) ||
+            (!isDynamicArmorActive && node.name.includes("state_00"))
           )
             return null;
 
@@ -101,21 +101,21 @@ export const PrimaryArmorScene = memo(() => {
         <group ref={gunContainer}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
-              `gun_${gunModelDefinition.model_id.toString().padStart(2, '0')}`,
+              `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`
             );
             const isVisible = isCurrentGun;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
               gunModelDefinition.armor,
-              armorId,
+              armorId
             );
 
             if (
               !isVisible ||
               spaced ||
               thickness === undefined ||
-              (isDynamicArmorActive && node.name.includes('state_01')) ||
-              (!isDynamicArmorActive && node.name.includes('state_00'))
+              (isDynamicArmorActive && node.name.includes("state_01")) ||
+              (!isDynamicArmorActive && node.name.includes("state_00"))
             )
               return null;
 

packages/website/src/components/Armor/components/SpacedArmorScene.tsx

@@ -1,15 +1,15 @@
-import { memo, useRef } from 'react';
-import { Group, Plane, Scene, Vector3 } from 'three';
-import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
-import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../core/blitzkit/resolveThickness';
-import { useArmor } from '../../../hooks/useArmor';
-import { useModel } from '../../../hooks/useModel';
-import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../hooks/useTankTransform';
-import { Duel } from '../../../stores/duel';
-import { ModelTankWrapper } from './ModelTankWrapper';
-import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
+import { memo, useRef } from "react";
+import { Group, Plane, Scene, Vector3 } from "three";
+import { correctZYTuple } from "../../../core/blitz/correctZYTuple";
+import { nameToArmorId } from "../../../core/blitzkit/nameToArmorId";
+import { resolveArmor } from "../../../core/blitzkit/resolveThickness";
+import { useArmor } from "../../../hooks/useArmor";
+import { useModel } from "../../../hooks/useModel";
+import { useTankModelDefinition } from "../../../hooks/useTankModelDefinition";
+import { useTankTransform } from "../../../hooks/useTankTransform";
+import { Duel } from "../../../stores/duel";
+import { ModelTankWrapper } from "./ModelTankWrapper";
+import { SpacedArmorSceneComponent } from "./SpacedArmorSceneComponent";
 
 export enum ArmorType {
   Primary,
@@ -23,8 +23,8 @@ interface SpacedArmorSceneProps {
 
 export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
   const wrapper = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -45,7 +45,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       ? undefined
       : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
   const isDynamicArmorActive = Duel.use((state) =>
-    state.protagonist.consumables.includes(73),
+    state.protagonist.consumables.includes(73)
   );
 
   useTankTransform(track, turret, turretContainer, gunContainer);
@@ -54,19 +54,19 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
     <ModelTankWrapper ref={wrapper}>
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
+          const isHull = node.name.startsWith("hull_");
           const isVisible = isHull;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             tankModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_00')) ||
-            (!isDynamicArmorActive && node.name.includes('state_01'))
+            (isDynamicArmorActive && node.name.includes("state_00")) ||
+            (!isDynamicArmorActive && node.name.includes("state_01"))
           )
             return null;
 
@@ -83,8 +83,8 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       </group>
 
       {modelNodes.map((node) => {
-        const isWheel = node.name.startsWith('chassis_wheel_');
-        const isTrack = node.name.startsWith('chassis_track_');
+        const isWheel = node.name.startsWith("chassis_wheel_");
+        const isTrack = node.name.startsWith("chassis_track_");
         const isVisible = isWheel || isTrack;
 
         if (!isVisible) return null;
@@ -104,20 +104,20 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       <group ref={turretContainer}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, '0')}`,
+            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`
           );
           const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             turretModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_00')) ||
-            (!isDynamicArmorActive && node.name.includes('state_01'))
+            (isDynamicArmorActive && node.name.includes("state_00")) ||
+            (!isDynamicArmorActive && node.name.includes("state_01"))
           )
             return null;
 
@@ -139,20 +139,20 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
         <group ref={gunContainer}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
-              `gun_${gunModelDefinition.model_id.toString().padStart(2, '0')}`,
+              `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`
             );
             const isVisible = isCurrentGun;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
               gunModelDefinition.armor,
-              armorId,
+              armorId
             );
 
             if (
               !isVisible ||
               thickness === undefined ||
-              (isDynamicArmorActive && node.name.includes('state_00')) ||
-              (!isDynamicArmorActive && node.name.includes('state_01'))
+              (isDynamicArmorActive && node.name.includes("state_00")) ||
+              (!isDynamicArmorActive && node.name.includes("state_01"))
             )
               return null;
 
@@ -173,7 +173,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           {modelNodes.map((node) => {
             const gunString = `gun_${gunModelDefinition.model_id
               .toString()
-              .padStart(2, '0')}`;
+              .padStart(2, "0")}`;
             const isCurrentGun = gunModelDefinition.mask
               ? node.name.startsWith(gunString)
               : node.name === gunString;

packages/website/src/components/Armor/components/StaticArmor.tsx

@@ -28,8 +28,8 @@ export interface ThicknessRange {
 
 export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const wrapper = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);

packages/website/src/components/Armor/components/StaticArmorSceneComponent.tsx

@@ -1,8 +1,8 @@
 import { I_HAT, J_HAT } from "@blitzkit/core";
-import { type MeshProps, useThree } from "@react-three/fiber";
+import { useThree } from "@react-three/fiber";
 import { clamp } from "lodash-es";
 import type { QuicklimeEvent } from "quicklime";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, type ComponentProps } from "react";
 import {
   Box3,
   Color,
@@ -19,8 +19,8 @@ import {
 import { unrotateDavaVector } from "../../../core/blitz/unrotateDavaVector";
 import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import {
-  type ModelTransformEventData,
   modelTransformEvent,
+  type ModelTransformEventData,
 } from "../../../core/blitzkit/modelTransform";
 import { discardClippingPlane } from "../../../core/three/discardClippingPlane";
 import { Tankopedia } from "../../../stores/tankopedia";
@@ -36,7 +36,7 @@ type StaticArmorSceneComponentProps = {
   thickness: number;
   thicknessRange: ThicknessRange;
   node: Object3D;
-  onPointerDown?: MeshProps["onPointerDown"];
+  onPointerDown?: ComponentProps<"mesh">["onPointerDown"];
 } & (
   | {
       type: Exclude<ArmorType, ArmorType.External>;

packages/website/src/components/Favicons.astro

@@ -1,5 +1,7 @@
 ---
 import { localizedHTML as favicons } from "astro-favicons/middleware";
+
+const { locale } = Astro.params;
 ---
 
-<Fragment set:html={favicons(Astro.currentLocale)} />
+<Fragment set:html={favicons(locale)} />

packages/website/src/components/Footer.astro

@@ -1,15 +1,15 @@
 ---
-import { assertSecret, fetchGameDefinitions } from '@blitzkit/core';
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { Box, Code, Flex, Heading, Link, Text } from '@radix-ui/themes';
-import packageJson from '../../../../package.json';
-import { getStrings } from '../core/i18n/getStrings';
-import { LinkI18n } from './LinkI18n';
-import { LocaleSwitcherThemeWrapper } from './LocaleSwitcher';
+import { assertSecret, fetchGameDefinitions } from "@blitzkit/core";
+import locales from "@blitzkit/i18n/locales.json";
+import { Box, Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
+import packageJson from "../../../../package.json";
+import { getStrings } from "../core/i18n/getStrings";
+import { LinkI18n } from "./LinkI18n";
+import { LocaleSwitcherThemeWrapper } from "./LocaleSwitcher";
 
 const gameDefinitions = await fetchGameDefinitions();
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale ?? locales.default;
 const strings = getStrings(locale);
 ---
 
@@ -28,13 +28,13 @@ const strings = getStrings(locale);
     flexGrow="1"
     gap="5"
     position="relative"
-    direction={{ initial: 'column', sm: 'row' }}
+    direction={{ initial: "column", sm: "row" }}
   >
     <Flex
       direction="column"
       align={{
-        initial: 'center',
-        sm: 'start',
+        initial: "center",
+        sm: "start",
       }}
     >
       <Heading>BlitzKit</Heading>
@@ -51,32 +51,32 @@ const strings = getStrings(locale);
     <Flex
       gap="6"
       width={{
-        initial: '100%',
-        sm: 'auto',
+        initial: "100%",
+        sm: "auto",
       }}
     >
       <Flex
         direction="column"
         gap="1"
         align={{
-          initial: 'end',
-          sm: 'start',
+          initial: "end",
+          sm: "start",
         }}
         flexGrow={{
-          initial: '1',
-          sm: '0',
+          initial: "1",
+          sm: "0",
         }}
         flexBasis={{
-          initial: '0',
-          sm: 'auto',
+          initial: "0",
+          sm: "auto",
         }}
       >
         <Heading size="3">{strings.website.footer.about.title}</Heading>
         <Flex
           direction="column"
           align={{
-            initial: 'end',
-            sm: 'start',
+            initial: "end",
+            sm: "start",
           }}
         >
           <LinkI18n {locale} href="/docs/about/credits" color="gray">
@@ -106,12 +106,12 @@ const strings = getStrings(locale);
         direction="column"
         gap="1"
         flexGrow={{
-          initial: '1',
-          sm: '0',
+          initial: "1",
+          sm: "0",
         }}
         flexBasis={{
-          initial: '0',
-          sm: 'auto',
+          initial: "0",
+          sm: "auto",
         }}
       >
         <Heading size="3">{strings.website.footer.legal.title}</Heading>
@@ -127,11 +127,11 @@ const strings = getStrings(locale);
     </Flex>
   </Flex>
 
-  <Flex gap="5" display={{ initial: 'flex', sm: 'none' }} width="100%">
+  <Flex gap="5" display={{ initial: "flex", sm: "none" }} width="100%">
     <Flex direction="column" gap="1" flexGrow="1" flexBasis="0" align="end">
       <Text size="2" color="gray">BlitzKit</Text>
       {
-        PUBLIC_ASSET_BRANCH !== 'preview' && (
+        PUBLIC_ASSET_BRANCH !== "preview" && (
           <Text size="2" color="gray">
             WoTB
           </Text>
@@ -145,7 +145,7 @@ const strings = getStrings(locale);
         {packageJson.version}
       </Code>
       {
-        PUBLIC_ASSET_BRANCH !== 'preview' && (
+        PUBLIC_ASSET_BRANCH !== "preview" && (
           <Code size="2" color="gray">
             {gameDefinitions.version}
           </Code>
@@ -157,14 +157,14 @@ const strings = getStrings(locale);
     </Flex>
   </Flex>
 
-  <Flex gap="2" align="center" display={{ initial: 'none', sm: 'flex' }}>
+  <Flex gap="2" align="center" display={{ initial: "none", sm: "flex" }}>
     <Text size="2" color="gray">BlitzKit</Text>
     <Code size="2" color="gray">
       {packageJson.version}
     </Code>
 
     {
-      PUBLIC_ASSET_BRANCH !== 'preview' && (
+      PUBLIC_ASSET_BRANCH !== "preview" && (
         <>
           <Text size="2" color="gray">
             WoTB

packages/website/src/components/Gallery/Card.tsx

@@ -1,5 +1,5 @@
-import { asset, Avatar } from '@blitzkit/core';
-import { Cross1Icon, DownloadIcon } from '@radix-ui/react-icons';
+import { asset, Avatar } from "@blitzkit/core";
+import { Cross1Icon, DownloadIcon } from "@radix-ui/react-icons";
 import {
   Dialog,
   Flex,
@@ -7,11 +7,11 @@ import {
   Link,
   Skeleton,
   Text,
-} from '@radix-ui/themes';
-import { useRef } from 'react';
-import { useIntersection } from '../../hooks/useIntersection';
-import { useLocale } from '../../hooks/useLocale';
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+} from "@radix-ui/themes";
+import { useRef } from "react";
+import { useIntersection } from "../../hooks/useIntersection";
+import { useLocale } from "../../hooks/useLocale";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 
 type GalleryCardProps = MaybeSkeletonComponentProps<{
   avatar: Avatar;
@@ -19,9 +19,9 @@ type GalleryCardProps = MaybeSkeletonComponentProps<{
 
 export function GalleryCard(props: GalleryCardProps) {
   const src = asset(
-    `gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`,
+    `gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`
   );
-  const card = useRef<HTMLDivElement>(null);
+  const card = useRef<HTMLDivElement>(null!);
   const { unwrap } = useLocale();
 
   useIntersection(() => props.skeleton && props.onIntersection?.(), card, {
@@ -35,7 +35,7 @@ export function GalleryCard(props: GalleryCardProps) {
       width="6rem"
       gap="1"
       ref={card}
-      style={{ cursor: 'pointer' }}
+      style={{ cursor: "pointer" }}
     >
       {props.skeleton && (
         <>
@@ -48,16 +48,16 @@ export function GalleryCard(props: GalleryCardProps) {
         <>
           <img
             style={{
-              width: '4rem',
-              height: '4.57rem',
+              width: "4rem",
+              height: "4.57rem",
               // aspect ratio 7 / 8
-              objectFit: 'cover',
+              objectFit: "cover",
             }}
             src={src}
             alt={unwrap(props.avatar.name)}
           />
 
-          <Text size="1" align="center" style={{ maxWidth: '100%' }}>
+          <Text size="1" align="center" style={{ maxWidth: "100%" }}>
             {unwrap(props.avatar.name)}
           </Text>
         </>
@@ -94,7 +94,7 @@ export function GalleryCard(props: GalleryCardProps) {
         </Flex>
 
         <Flex justify="center" mt="4">
-          <Dialog.Title align="center" style={{ maxWidth: '10rem' }}>
+          <Dialog.Title align="center" style={{ maxWidth: "10rem" }}>
             {unwrap(props.avatar.name)}
           </Dialog.Title>
         </Flex>

packages/website/src/components/HelpingSpotLight.tsx

@@ -1,7 +1,6 @@
-import type { SpotLightProps } from '@react-three/fiber';
-import { memo } from 'react';
+import { memo, type ComponentProps } from "react";
 
-interface Props extends SpotLightProps {
+interface Props extends ComponentProps<"spotLight"> {
   debug?: boolean;
 }
 

packages/website/src/components/Home/HomeLocaleSwitcher.tsx

@@ -1,12 +1,12 @@
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { GlobeIcon } from '@radix-ui/react-icons';
-import { Flex, Text } from '@radix-ui/themes';
-import type { LocaleAcceptorProps } from '../../hooks/useLocale';
-import { BlitzKitTheme } from '../BlitzKitTheme';
-import { LocaleSwitcher } from '../LocaleSwitcher';
+import locales from "@blitzkit/i18n/locales.json";
+import { GlobeIcon } from "@radix-ui/react-icons";
+import { Flex, Text } from "@radix-ui/themes";
+import type { LocaleAcceptorProps } from "../../hooks/useLocale";
+import { BlitzKitTheme } from "../BlitzKitTheme";
+import { LocaleSwitcher } from "../LocaleSwitcher";
 
 export function HomeLocaleSwitcher({
-  locale = DEFAULT_LOCALE,
+  locale = locales.default,
 }: LocaleAcceptorProps) {
   return (
     <BlitzKitTheme>

packages/website/src/components/LinkI18n.tsx

@@ -1,14 +1,14 @@
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { Link, type LinkProps } from '@radix-ui/themes';
-import type { LocaleAcceptorProps } from '../hooks/useLocale';
+import locales from "@blitzkit/i18n/locales.json";
+import { Link, type LinkProps } from "@radix-ui/themes";
+import type { LocaleAcceptorProps } from "../hooks/useLocale";
 
 type LinkI18nProps = LinkProps & LocaleAcceptorProps;
 
 export function LinkI18n({ locale, href, ...props }: LinkI18nProps) {
   const prefix =
-    locale === undefined || locale === DEFAULT_LOCALE ? '' : `/${locale}`;
+    locale === undefined || locale === locales.default ? "" : `/${locale}`;
 
   return (
-    <Link href={href?.startsWith('/') ? `${prefix}${href}` : href} {...props} />
+    <Link href={href?.startsWith("/") ? `${prefix}${href}` : href} {...props} />
   );
 }

packages/website/src/components/LocaleRedirector.astro

@@ -1,12 +1,13 @@
 <script>
-  import { SUPPORTED_LOCALES } from "@blitzkit/i18n";
+  import locales from "@blitzkit/i18n/locales.json";
   import { getBestLocale } from "../core/i18n/getBestLocale";
+
   const isAPI = window.location.pathname.startsWith("/api");
-  const isI18nPath = SUPPORTED_LOCALES.some((locale) =>
+  const isI18nPath = locales.supported.some(({ locale }) =>
     window.location.pathname.startsWith(`/${locale}`)
   );
   const bestLocale = getBestLocale();
-  const currentPathLocale = SUPPORTED_LOCALES.find((locale) =>
+  const currentPathLocale = locales.supported.find(({ locale }) =>
     window.location.pathname.startsWith(`/${locale}`)
   );
 

packages/website/src/components/LocaleSwitcher.tsx

@@ -1,17 +1,16 @@
-import {} from '@blitzkit/core';
 import {
-  DEFAULT_LOCALE,
   STRINGS,
-  SUPPORTED_LOCALES,
   SUPPORTED_LOCALE_FLAGS,
-} from '@blitzkit/i18n';
-import { Select } from '@radix-ui/themes';
-import type { LocaleAcceptorProps } from '../hooks/useLocale';
-import { BlitzKitTheme } from './BlitzKitTheme';
+  type BlitzKitStrings,
+} from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import { Select } from "@radix-ui/themes";
+import type { LocaleAcceptorProps } from "../hooks/useLocale";
+import { BlitzKitTheme } from "./BlitzKitTheme";
 
 export function LocaleSwitcherThemeWrapper({ locale }: LocaleAcceptorProps) {
   return (
-    <BlitzKitTheme style={{ background: 'transparent' }}>
+    <BlitzKitTheme style={{ background: "transparent" }}>
       <LocaleSwitcher locale={locale} />
     </BlitzKitTheme>
   );
@@ -22,29 +21,33 @@ export function LocaleSwitcher({ locale }: LocaleAcceptorProps) {
     <Select.Root
       defaultValue={locale}
       onValueChange={(locale) => {
-        localStorage.setItem('preferred-locale', locale);
+        localStorage.setItem("preferred-locale", locale);
 
         let rawPath = window.location.pathname;
 
-        for (const supportedLocale of SUPPORTED_LOCALES) {
-          if (window.location.pathname.startsWith(`/${supportedLocale}`)) {
-            rawPath = rawPath.replace(`/${supportedLocale}`, '');
+        for (const supported of locales.supported) {
+          if (window.location.pathname.startsWith(`/${supported.locale}`)) {
+            rawPath = rawPath.replace(`/${supported.locale}`, "");
             break;
           }
         }
 
         window.location.pathname = `${
-          locale === DEFAULT_LOCALE ? '' : `/${locale}`
+          locale === locales.default ? "" : `/${locale}`
         }${rawPath}`;
       }}
     >
       <Select.Trigger variant="classic" />
 
       <Select.Content>
-        {SUPPORTED_LOCALES.map((locale) => (
+        {locales.supported.map(({ locale }) => (
           <Select.Item key={locale} value={locale}>
-            {SUPPORTED_LOCALE_FLAGS[locale]}{' '}
-            {STRINGS[locale].common.locales[locale]}
+            {SUPPORTED_LOCALE_FLAGS[locale]}{" "}
+            {
+              STRINGS[locale].common.locales[
+                locale as keyof BlitzKitStrings["common"]["locales"]
+              ]
+            }
           </Select.Item>
         ))}
       </Select.Content>

packages/website/src/components/Nivo/ThemedBar.tsx

@@ -1,19 +0,0 @@
-import {
-  ResponsiveBar,
-  type BarDatum,
-  type ResponsiveBarSvgProps,
-} from '@nivo/bar';
-import { nivoTheme } from '../../core/nivo/theme';
-
-export function ThemedBar<RawDatum extends BarDatum>(
-  props: ResponsiveBarSvgProps<RawDatum>,
-) {
-  return (
-    <ResponsiveBar
-      colors={{ scheme: 'yellow_green_blue' }}
-      theme={nivoTheme}
-      borderRadius={4}
-      {...props}
-    />
-  );
-}

packages/website/src/components/Nivo/ThemedLine.tsx

@@ -1,15 +0,0 @@
-import { ResponsiveLine, type LineSvgProps } from '@nivo/line';
-import { nivoTheme } from '../../core/nivo/theme';
-
-export function ThemedLine(props: LineSvgProps) {
-  return (
-    <ResponsiveLine
-      colors={{ scheme: 'yellow_green_blue' }}
-      theme={nivoTheme}
-      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-      enablePoints={true}
-      useMesh
-      {...props}
-    />
-  );
-}

packages/website/src/components/Performance/RowLoader.tsx

@@ -1,15 +1,15 @@
-import { Skeleton, Table } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { memo, useRef } from 'react';
-import { useIntersection } from '../../hooks/useIntersection';
-import { TankPerformanceSortTypeNamesArray } from '../../stores/tankPerformanceSort/constants';
+import { Skeleton, Table } from "@radix-ui/themes";
+import { times } from "lodash-es";
+import { memo, useRef } from "react";
+import { useIntersection } from "../../hooks/useIntersection";
+import { TankPerformanceSortTypeNamesArray } from "../../stores/tankPerformanceSort/constants";
 
 interface RowLoaderProps {
   onIntersection?: () => void;
 }
 
 export const RowLoader = memo<RowLoaderProps>(({ onIntersection }) => {
-  const row = useRef<HTMLTableRowElement>(null);
+  const row = useRef<HTMLTableRowElement>(null!);
 
   useIntersection(() => onIntersection?.(), row, {
     disabled: onIntersection === undefined,

packages/website/src/components/SmartCanvas.tsx

@@ -1,20 +1,20 @@
-import { Canvas, type CanvasProps } from '@react-three/fiber';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { useOnScreen } from '../hooks/useOnScreen';
+import { Canvas, type CanvasProps } from "@react-three/fiber";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useOnScreen } from "../hooks/useOnScreen";
 
 export const SmartCanvas = forwardRef<HTMLCanvasElement, CanvasProps>(
   (props, ref) => {
-    const canvas = useRef<HTMLCanvasElement>(null);
+    const canvas = useRef<HTMLCanvasElement>(null!);
     const onScreen = useOnScreen(canvas);
 
     useImperativeHandle(ref, () => canvas.current!, []);
 
     return (
       <Canvas
-        frameloop={onScreen ? 'demand' : 'never'}
+        frameloop={onScreen ? "demand" : "never"}
         ref={canvas}
         {...props}
       />
     );
-  },
+  }
 );

packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx

@@ -1,6 +1,6 @@
-import { Flex, Skeleton } from '@radix-ui/themes';
-import { memo, useRef } from 'react';
-import { useIntersection } from '../../../hooks/useIntersection';
+import { Flex, Skeleton } from "@radix-ui/themes";
+import { memo, useRef } from "react";
+import { useIntersection } from "../../../hooks/useIntersection";
 
 interface SkeletonTankCardProps {
   onIntersection?: () => void;
@@ -8,7 +8,7 @@ interface SkeletonTankCardProps {
 
 export const SkeletonTankCard = memo(
   ({ onIntersection }: SkeletonTankCardProps) => {
-    const card = useRef<HTMLDivElement>(null);
+    const card = useRef<HTMLDivElement>(null!);
 
     useIntersection(() => onIntersection?.(), card, {
       disabled: onIntersection === undefined,
@@ -21,5 +21,5 @@ export const SkeletonTankCard = memo(
       </Flex>
     );
   },
-  () => true,
+  () => true
 );

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Info.tsx

@@ -38,7 +38,7 @@ export function Info({
     const result = fuzzysort.single(statSearch, name);
 
     if (result) {
-      label = fuzzysort.highlight(result, (match, index) => (
+      label = result.highlight((match, index) => (
         <Mark key={index}>{match}</Mark>
       ));
       highlighted = true;

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx

@@ -19,8 +19,8 @@ export function TankModel() {
   const turret = Duel.use((state) => state.protagonist.turret);
   const canvas = useThree((state) => state.gl.domElement);
   const hullContainer = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TransitionSkeleton/index.tsx

@@ -26,8 +26,8 @@ export function TransitionSkeleton() {
   const gun = Duel.use((state) => state.protagonist.gun);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const { gltf: armorGltf } = useArmor(tank.id);
   const { gltf: modelGltf } = useModel(tank.id);
   const modelNodes = Object.values(modelGltf.nodes);

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -16,7 +16,7 @@ const tankDefinitions = await awaitableTankDefinitions;
 export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   const revealed = Tankopedia.use((state) => state.revealed);
   const disturbed = Tankopedia.use((state) => state.disturbed);
-  const canvas = useRef<HTMLCanvasElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null!);
   const isFullScreen = useFullScreen();
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const thicknessRange = useMemo(() => {

packages/website/src/core/blitzkit/branches.ts

@@ -1,15 +1,16 @@
-import { assertSecret } from '@blitzkit/core';
-import { DEFAULT_LOCALE, STRINGS, type SupportedLocale } from '@blitzkit/i18n';
+import { assertSecret } from "@blitzkit/core";
+import { STRINGS } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
 
-export function resolveBranchName(locale: string = DEFAULT_LOCALE) {
+export function resolveBranchName(locale: string = locales.default) {
   if (!(locale in STRINGS)) throw new Error(`Unsupported locale: ${locale}`);
 
-  const strings = STRINGS[locale as SupportedLocale];
+  const strings = STRINGS[locale];
   const secret = assertSecret(import.meta.env.PUBLIC_BRANCH);
 
   if (
-    assertSecret(import.meta.env.MODE) === 'development' &&
-    secret === 'dev'
+    assertSecret(import.meta.env.MODE) === "development" &&
+    secret === "dev"
   ) {
     return strings.common.branches.local;
   } else {

packages/website/src/core/blitzkit/jsxTree.tsx

@@ -1,13 +1,20 @@
-import type { GroupProps, MeshProps } from '@react-three/fiber';
-import type { ReactNode } from 'react';
-import { Mesh, Object3D } from 'three';
+import type { ComponentProps, ReactNode } from "react";
+import { Mesh, Object3D } from "three";
 
 export function jsxTree(
   node: Object3D,
   mergers?: {
-    mesh?: (mesh: Mesh, props: MeshProps, key: string) => ReactNode;
-    group?: (object3d: Object3D, props: GroupProps, key: string) => ReactNode;
-  },
+    mesh?: (
+      mesh: Mesh,
+      props: ComponentProps<"mesh">,
+      key: string
+    ) => ReactNode;
+    group?: (
+      object3d: Object3D,
+      props: ComponentProps<"group">,
+      key: string
+    ) => ReactNode;
+  }
 ): ReactNode {
   if (node instanceof Mesh) {
     const props = {

packages/website/src/core/i18n/getBestLocale.ts

@@ -1,13 +1,13 @@
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/i18n';
+import locales from "@blitzkit/i18n/locales.json";
 
 export function getBestLocale() {
   const desiredLocale =
-    localStorage.getItem('preferred-locale') ??
-    navigator.language.split('-')[0];
-  const isSupported = (SUPPORTED_LOCALES as unknown as string[]).includes(
-    desiredLocale,
+    localStorage.getItem("preferred-locale") ??
+    navigator.language.split("-")[0];
+  const isSupported = locales.supported.some(
+    ({ locale }) => locale === desiredLocale
   );
-  const isDefault = desiredLocale === DEFAULT_LOCALE;
+  const isDefault = desiredLocale === locales.default;
 
   if (!isSupported || isDefault) return undefined;
 

packages/website/src/core/i18n/getStrings.ts

@@ -1,6 +1,7 @@
-import { DEFAULT_LOCALE, STRINGS, type SupportedLocale } from '@blitzkit/i18n';
+import { STRINGS } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
 
-export function getStrings(locale: string = DEFAULT_LOCALE) {
-  if (locale in STRINGS) return STRINGS[locale as SupportedLocale];
+export function getStrings(locale: string = locales.default) {
+  if (locale in STRINGS) return STRINGS[locale];
   throw new Error(`Unsupported locale: ${locale}`);
 }

packages/website/src/core/nivo/theme.ts

@@ -1,39 +0,0 @@
-import type { Theme } from '@nivo/core';
-import { Var } from '../radix/var';
-
-export const nivoTheme = {
-  background: Var('color-background'),
-  text: {
-    fill: Var('gray-contrast'),
-    fontFamily: 'inherit',
-  },
-  axis: {
-    ticks: {
-      text: {
-        fill: Var('gray-indicator'),
-      },
-      line: {
-        stroke: Var('gray-indicator'),
-      },
-    },
-  },
-  grid: {
-    line: {
-      stroke: Var('gray-indicator'),
-    },
-  },
-  tooltip: {
-    container: {
-      background: Var('color-overlay'),
-      backdropFilter: 'blur(4rem)',
-      WebkitBackdropFilter: 'blur(4rem)',
-      color: Var('gray-contrast'),
-      borderRadius: Var('radius-2'),
-    },
-  },
-  labels: {
-    text: {
-      fill: Var('gray-1'),
-    },
-  },
-} satisfies Theme;

packages/website/src/hooks/useIntersection.ts

@@ -1,4 +1,4 @@
-import { type RefObject, useEffect, useRef } from 'react';
+import { type RefObject, useEffect, useRef } from "react";
 
 interface UseIntersectionOptions extends IntersectionObserverInit {
   disabled: boolean;
@@ -7,9 +7,9 @@ interface UseIntersectionOptions extends IntersectionObserverInit {
 export function useIntersection(
   callback: () => void,
   ref: RefObject<HTMLElement>,
-  options?: UseIntersectionOptions,
+  options?: UseIntersectionOptions
 ) {
-  const observer = useRef<IntersectionObserver>();
+  const observer = useRef<IntersectionObserver>(null!);
 
   useEffect(() => {
     if (options?.disabled || !ref.current) return;

packages/website/src/hooks/useLocale.tsx

@@ -1,6 +1,7 @@
-import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
-import { createContext, useContext, type ReactNode } from 'react';
-import { getStrings } from '../core/i18n/getStrings';
+import { unwrapper } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import { createContext, useContext, type ReactNode } from "react";
+import { getStrings } from "../core/i18n/getStrings";
 
 const LocaleContext = createContext<{
   locale: string;
@@ -14,7 +15,7 @@ interface LocaleProviderProps extends LocaleAcceptorProps {
 export function LocaleProvider({ locale, children }: LocaleProviderProps) {
   return (
     <LocaleContext.Provider
-      value={{ locale: locale ?? DEFAULT_LOCALE, localeRaw: locale }}
+      value={{ locale: locale ?? locales.default, localeRaw: locale }}
     >
       {children}
     </LocaleContext.Provider>
@@ -25,7 +26,7 @@ export function useLocale() {
   const context = useContext(LocaleContext);
 
   if (!context) {
-    throw new Error('useLocale must be used within a LocaleProvider');
+    throw new Error("useLocale must be used within a LocaleProvider");
   }
 
   const strings = getStrings(context.locale);

packages/website/src/hooks/useOnScreen.ts

@@ -1,17 +1,17 @@
-import { type RefObject, useEffect, useRef, useState } from 'react';
+import { type RefObject, useEffect, useRef, useState } from "react";
 
 /**
- * Thanks GuCier!
+ * Thanks GuCire!
  *
  * https://stackoverflow.com/a/65008608/12294756
  */
 export function useOnScreen(ref: RefObject<HTMLElement>) {
   const [isIntersecting, setIntersecting] = useState(false);
-  const observer = useRef<IntersectionObserver>();
+  const observer = useRef<IntersectionObserver>(null!);
 
   useEffect(() => {
     observer.current = new IntersectionObserver(([entry]) =>
-      setIntersecting(entry.isIntersecting),
+      setIntersecting(entry.isIntersecting)
     );
   }, [ref]);
 

packages/website/src/layouts/BaseLayout.astro

@@ -1,5 +1,4 @@
 ---
-import { DEFAULT_LOCALE } from "@blitzkit/i18n";
 import strings from "@blitzkit/i18n/strings/en.json";
 import "@fontsource/inter";
 import { Flex } from "@radix-ui/themes";
@@ -22,7 +21,7 @@ export interface Props {
 
 const servicing = import.meta.env.SERVICING;
 const { noFooter, noNavbar, integrated } = Astro.props;
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale;
 ---
 
 <html lang={locale}>

packages/website/src/pages/[...locale]/embed/[embed]/_index.tsx

@@ -60,7 +60,7 @@ function Content({ embed }: PageProps) {
   const [backgroundImage, setBackgroundImage] = useState(
     "/assets/images/backgrounds/embed-default.webp"
   );
-  const fileInput = useRef<HTMLInputElement>();
+  const fileInput = useRef<HTMLInputElement>(null!);
   const { strings } = useLocale();
 
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 ---
 import { AstroSeo } from "@astrolib/seo";
 import { assertSecret } from "@blitzkit/core";
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
 import { literals } from "@blitzkit/i18n/src/literals";
 import { Box, Flex, Link } from "@radix-ui/themes";
 import type { GetStaticPaths } from "astro";
@@ -16,7 +16,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
 const MAX_TOOLS_PER_ROW = 2;
 
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale ?? locales.default;
 const strings = getStrings(Astro.params.locale);
 const rows: Tool[][] = [];
 
@@ -40,9 +40,9 @@ for (const id in tools) {
 
 export const getStaticPaths = (() => {
   return [
-    ...SUPPORTED_LOCALES.filter((locale) => locale !== DEFAULT_LOCALE).map(
-      (locale) => ({ params: { locale } })
-    ),
+    ...locales.supported
+      .filter(({ locale }) => locale !== locales.default)
+      .map(({ locale }) => ({ params: { locale } })),
     { params: { locale: undefined } },
   ];
 }) satisfies GetStaticPaths;
@@ -81,7 +81,7 @@ export const getStaticPaths = (() => {
   </Flex> -->
 
   {
-    locale !== DEFAULT_LOCALE && (
+    locale !== locales.default && (
       <Flex justify="center" mb="4">
         <Link
           href="https://crowdin.com/project/blitzkrieg"
@@ -90,7 +90,9 @@ export const getStaticPaths = (() => {
         >
           {literals(strings.website.home.help_translate, [
             "BlitzKit",
-            strings.common.locales[locale],
+            strings.common.locales[
+              locale as keyof typeof strings.common.locales
+            ],
           ])}
         </Link>
       </Flex>

packages/website/src/pages/[...locale]/mixer/_index.tsx

@@ -109,7 +109,7 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
   const hull = Mixer.use((state) => state.hull);
   const turretId = Mixer.use((state) => state.turret.tank.id);
   const gunId = Mixer.use((state) => state.gun.tank.id);
-  const canvas = useRef<HTMLCanvasElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null!);
   const { strings } = useLocale();
 
   return (

packages/website/src/pages/[...locale]/settings/_index.tsx

@@ -1,4 +1,3 @@
-import { DEFAULT_LOCALE } from "@blitzkit/i18n";
 import { Flex, Switch, Text } from "@radix-ui/themes";
 import { LocaleSwitcher } from "../../../components/LocaleSwitcher";
 import { PageWrapper } from "../../../components/PageWrapper";
@@ -9,7 +8,7 @@ import {
 } from "../../../hooks/useLocale";
 import { App } from "../../../stores/app";
 
-export function Page({ locale = DEFAULT_LOCALE }: LocaleAcceptorProps) {
+export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
       <Content locale={locale} />

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

@@ -1,5 +1,5 @@
 ---
-import { AstroSeo } from '@astrolib/seo';
+import { AstroSeo } from "@astrolib/seo";
 import {
   assertSecret,
   asset,
@@ -11,17 +11,17 @@ import {
   fetchSkillDefinitions,
   fetchTankDefinitions,
   TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
-import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
-import { literals } from '@blitzkit/i18n/src/literals';
-import type { GetStaticPaths } from 'astro';
-import { load } from 'cheerio';
-import { tankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
-import { getStrings } from '../../../../core/i18n/getStrings';
-import BaseLayout from '../../../../layouts/BaseLayout.astro';
-import { genericDefaultEquipmentMatrix } from '../../../../stores/duel/constants';
-import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
-import { Page } from './_index';
+} from "@blitzkit/core";
+import { unwrapper } from "@blitzkit/i18n";
+import { literals } from "@blitzkit/i18n/src/literals";
+import type { GetStaticPaths } from "astro";
+import { load } from "cheerio";
+import { tankCharacteristics } from "../../../../core/blitzkit/tankCharacteristics";
+import { getStrings } from "../../../../core/i18n/getStrings";
+import BaseLayout from "../../../../layouts/BaseLayout.astro";
+import { genericDefaultEquipmentMatrix } from "../../../../stores/duel/constants";
+import { getStaticPaths as parentGetStaticPaths } from "../index.astro";
+import { Page } from "./_index";
 
 export const getStaticPaths = (async () => {
   const tankDefinitions = await fetchTankDefinitions();
@@ -32,13 +32,13 @@ export const getStaticPaths = (async () => {
       parentPaths.map((parent) => ({
         params: { ...parent.params, slug: tank.slug },
         props: { id: tank.id },
-      })),
+      }))
     )
     .flat();
 }) satisfies GetStaticPaths;
 
 const { id } = Astro.props;
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale;
 const strings = getStrings(locale);
 const tankDefinitions = await fetchTankDefinitions();
 const skillDefinitions = await fetchSkillDefinitions();
@@ -56,7 +56,7 @@ const title = literals(strings.website.tools.tankopedia.tank_seo_title, [
     tank.nation as keyof typeof strings.common.nations_adjectives
   ],
   strings.common.tank_class_short[tank.class],
-  'BlitzKit',
+  "BlitzKit",
   strings.common.nations[tank.nation as keyof typeof strings.common.nations],
 ]);
 const url = import.meta.env.SITE + Astro.url.pathname;
@@ -87,7 +87,7 @@ const characteristics = tankCharacteristics(
     track: tank.tracks.at(-1)!,
     assaultDistance: 0,
   },
-  { equipmentDefinitions, provisionDefinitions, tankModelDefinition },
+  { equipmentDefinitions, provisionDefinitions, tankModelDefinition }
 );
 const description = literals(
   strings.website.tools.tankopedia.tank_seo_description,
@@ -98,7 +98,7 @@ const description = literals(
     Math.round(characteristics.penetration).toLocaleString(locale),
     Math.round(characteristics.speedForwards).toLocaleString(locale),
     Math.round(characteristics.health).toLocaleString(locale),
-  ],
+  ]
 );
 
 export interface TankGuide {
@@ -113,8 +113,8 @@ const guideResponse = await fetch(guideUrl);
 
 if (guideResponse.ok) {
   const $ = await guideResponse.text().then(load);
-  const description = $('.entry-content p').first().text();
-  const image = $('.entry-content img').first().attr('src')?.toString();
+  const description = $(".entry-content p").first().text();
+  const image = $(".entry-content img").first().attr("src")?.toString();
 
   if (description !== undefined || image !== undefined) {
     guide = {