feat: start of selector

packages/i18n/strings/en.json

@@ -1446,17 +1446,11 @@
         "description": "Get started with BlitzKit",
         "seo_description": "Get started with BlitzKit"
       },
-      "blitz_analysis": {
-        "name": "BlitzAnalysis[]",
-        "button": "Analyze now",
-        "description": "Rich historic average stats",
-        "seo_description": "Rich historic average stats in World of Tanks Blitz"
-      },
-      "blitz_insider": {
-        "name": "Blitz Insider",
-        "button": "Discover today",
-        "description": "In-game session stats",
-        "seo_description": "In-game session stats in World of Tanks Blitz"
+      "api": {
+        "name": "API",
+        "button": "To the docs",
+        "description": "BlitzKit hosted API",
+        "seo_description": "BlitzKit hosted static API for World of Tanks Blitz"
       }
     },
 

packages/varuna/src/index.ts

@@ -1,6 +1,6 @@
 import { produce } from "immer";
 import { merge } from "lodash-es";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export class Varuna<Type, Arguments = void> {
   private listeners = new Set<(state: Type) => void>();
@@ -39,13 +39,16 @@ export class Varuna<Type, Arguments = void> {
   }
 
   useInitialization(...args: Arguments[]) {
-    if (this.initialized) return;
+    const initializedThisMount = useRef(false);
+
+    if (initializedThisMount.current) return;
 
     if (typeof this.creator !== "function") {
       throw new Error("Provider must be used with a function creator");
     }
 
     this.initialize((this.creator as (...args: Arguments[]) => Type)(...args));
+    initializedThisMount.current = true;
   }
 
   private dispatch() {

packages/website/src/components/MixerScene/components/MixerFallback.tsx

@@ -0,0 +1,13 @@
+import { Progress } from "@radix-ui/themes";
+import { Html } from "@react-three/drei";
+import { useStableProgress } from "../../../hooks/useStableProgress";
+
+export function MixerFallback() {
+  const progress = useStableProgress();
+
+  return (
+    <Html center>
+      <Progress value={progress} style={{ width: "10rem" }} />
+    </Html>
+  );
+}

packages/website/src/components/MixerScene/components/Model.tsx

@@ -1,7 +1,9 @@
+import { Html } from "@react-three/drei";
 import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
 import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import { useModel } from "../../../hooks/useModel";
 import { Mixer } from "../../../stores/mixer";
+import { Selector } from "./Selector";
 
 const modelDefinitions = await awaitableModelDefinitions;
 
@@ -48,6 +50,28 @@ export function Model() {
         });
       })}
 
+      <Html
+        position={[
+          0,
+          trackModel.origin.z + tankModel.turret_origin.z,
+          (trackModel.origin.y + tankModel.turret_origin.y) / 2,
+        ]}
+      >
+        <Selector>test hull</Selector>
+      </Html>
+
+      <Html
+        position={[
+          0,
+          trackModel.origin.z + tankModel.turret_origin.z,
+          trackModel.origin.y +
+            tankModel.turret_origin.y +
+            turretModel.gun_origin.y,
+        ]}
+      >
+        <Selector>test turret</Selector>
+      </Html>
+
       <group
         position={[
           tankModel.turret_origin.x +

packages/website/src/components/MixerScene/components/Selector.tsx

@@ -0,0 +1,28 @@
+import { Box, Flex, Text } from "@radix-ui/themes";
+import type { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export function Selector({ children }: Props) {
+  return (
+    <Flex align="center">
+      <Box
+        width="16rem"
+        height="1px"
+        style={{ backgroundColor: "var(--gray-12)" }}
+      />
+      <Box
+        style={{
+          padding: "var(--space-3)",
+          backgroundColor: "var(--gray-3)",
+          borderRadius: "var(--radius-3)",
+          boxShadow: "var(--shadow-3)",
+        }}
+      >
+        <Text style={{ whiteSpace: "nowrap" }}>{children}</Text>
+      </Box>
+    </Flex>
+  );
+}

packages/website/src/components/MixerScene/index.tsx

@@ -2,22 +2,31 @@ import { OrbitControls } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { Suspense } from "react";
 import { Lighting } from "../Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
+import { SceneProps } from "../Tankopedia/HeroSection/components/TankSandbox/components/SceneProps";
+import { MixerFallback } from "./components/MixerFallback";
 import { Model } from "./components/Model";
 
 export function MixerScene() {
   return (
     <Canvas
       shadows="soft"
+      style={{ background: "black" }}
       camera={{
         fov: 45,
-        position: [5, 5, -5],
+        position: [-4, 4, -7],
       }}
     >
-      <OrbitControls />
+      <OrbitControls
+        maxDistance={20}
+        minDistance={5}
+        enableDamping={false}
+        target={[0, 0.5, 0]}
+      />
 
       <Lighting />
+      <SceneProps />
 
-      <Suspense fallback={null}>
+      <Suspense fallback={<MixerFallback />}>
         <Model />
       </Suspense>
     </Canvas>

packages/website/src/components/Navbar.astro

@@ -1,24 +1,25 @@
 ---
-import { assertSecret } from '@blitzkit/core';
 import {
   Cross1Icon,
   DiscordLogoIcon,
   GearIcon,
   HamburgerMenuIcon,
-} from '@radix-ui/react-icons';
-import { Box, Code, Flex, IconButton, Link } from '@radix-ui/themes';
-import { TOOLS } from '../constants/tools';
-import { resolveBranchName } from '../core/blitzkit/branches';
-import { getStrings } from '../core/i18n/getStrings';
-import { Var } from '../core/radix/var';
-import { LinkI18n } from './LinkI18n';
+} from "@radix-ui/react-icons";
+import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
+import { resolveBranchName } from "../core/blitzkit/branches";
+import { getStrings } from "../core/i18n/getStrings";
+import { Var } from "../core/radix/var";
+import { LinkI18n } from "./LinkI18n";
+import { tools } from "../constants/tools";
 
 export interface Props {
   integrated?: boolean;
 }
 
 const { integrated = false } = Astro.props;
-const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
+const toolsFiltered = Object.values(tools).filter(
+  (tool) => !tool.href && !tool.disabled
+);
 const { locale } = Astro.params;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
@@ -39,49 +40,45 @@ const strings = getStrings(locale);
     height: 0;
   }
 
-  .navbar[data-expanded='false'] *[data-expanded] {
+  .navbar[data-expanded="false"] *[data-expanded] {
     display: none;
   }
 
-  .navbar[data-expanded='true'] {
+  .navbar[data-expanded="true"] {
     height: 100%;
   }
 
-  .navbar[data-expanded='false'][data-integrated='false'] .content {
+  .navbar[data-expanded="false"][data-integrated="false"] .content {
     background-color: var(--black-a8);
     backdrop-filter: blur(4rem);
     box-shadow: var(--shadow-3);
   }
 
-  .navbar[data-expanded='true'] .content {
+  .navbar[data-expanded="true"] .content {
     background-color: var(--gray-1);
   }
 
-  .navbar[data-expanded='true'] *[data-closed] {
+  .navbar[data-expanded="true"] *[data-closed] {
     display: none;
   }
 </style>
 
 <script>
-  const navbar = document.querySelector<HTMLDivElement>('.navbar');
-  const hamburger = document.querySelector<HTMLButtonElement>('.hamburger');
+  const navbar = document.querySelector<HTMLDivElement>(".navbar");
+  const hamburger = document.querySelector<HTMLButtonElement>(".hamburger");
 
-  navbar?.addEventListener('click', () => {
-    navbar.dataset.expanded = 'false';
+  navbar?.addEventListener("click", () => {
+    navbar.dataset.expanded = "false";
   });
-  hamburger?.addEventListener('click', (event) => {
+  hamburger?.addEventListener("click", (event) => {
     if (!navbar) return;
 
     event.stopPropagation();
-    navbar.dataset.expanded = `${navbar.dataset.expanded === 'false'}`;
+    navbar.dataset.expanded = `${navbar.dataset.expanded === "false"}`;
   });
 </script>
 
-{
-  !integrated && (
-    <Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
-  )
-}
+<Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
 
 <Flex
   direction="column"
@@ -94,16 +91,16 @@ const strings = getStrings(locale);
   position="fixed"
   style={{
     zIndex: 1,
-    backdropFilter: 'blur(4rem)',
+    backdropFilter: "blur(4rem)",
   }}
 >
   <Flex
     className="content"
     width="100%"
-    p={{ initial: '4', sm: '3' }}
+    p={{ initial: "4", sm: "3" }}
     direction="column"
     align="center"
-    style={{ backgroundColor: integrated ? undefined : Var('gray-1') }}
+    style={{ backgroundColor: integrated ? undefined : Var("gray-1") }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">
@@ -131,33 +128,27 @@ const strings = getStrings(locale);
 
         <Flex
           align="center"
-          gap={{ initial: '4', md: '6' }}
-          display={{ initial: 'none', sm: 'flex' }}
+          gap={{ initial: "3", md: "6" }}
+          display={{ initial: "none", sm: "flex" }}
           justify="center"
           className="tools"
         >
           {
             toolsFiltered.map((tool) => {
-              const unavailableOnBranch = tool.branches?.every(
-                (branch) =>
-                  branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
-              );
               const selected = Astro.url.pathname.includes(`/${tool.id}`);
               const toolStrings =
                 strings.website.tools[
-                  (tool.stringsId ??
+                  (tool.strings ??
                     tool.id) as keyof typeof strings.website.tools
                 ];
 
-              if (unavailableOnBranch) return null;
-
               return (
                 <LinkI18n
                   {locale}
-                  weight={selected ? 'medium' : 'regular'}
+                  weight={selected ? "medium" : "regular"}
                   color="gray"
                   highContrast={selected}
-                  size="2"
+                  size={{ initial: "1", md: "2" }}
                   href={`/${tool.id}`}
                   underline="hover"
                 >
@@ -172,7 +163,7 @@ const strings = getStrings(locale);
 
         <Flex align="center" gap="4">
           <Link
-            style={{ display: 'flex', alignContent: 'center' }}
+            style={{ display: "flex", alignContent: "center" }}
             color="gray"
             href="https://discord.gg/nDt7AjGJQH"
             underline="none"
@@ -183,7 +174,7 @@ const strings = getStrings(locale);
 
           <LinkI18n
             {locale}
-            style={{ display: 'flex', alignContent: 'center' }}
+            style={{ display: "flex", alignContent: "center" }}
             color="gray"
             href="/settings"
             underline="none"
@@ -193,7 +184,7 @@ const strings = getStrings(locale);
 
           <!-- <NavbarAccount client:idle /> -->
 
-          <Flex align="center" display={{ initial: 'flex', sm: 'none' }}>
+          <Flex align="center" display={{ initial: "flex", sm: "none" }}>
             <IconButton variant="ghost" color="gray" className="hamburger">
               <Cross1Icon data-expanded />
               <HamburgerMenuIcon data-closed />
@@ -206,36 +197,28 @@ const strings = getStrings(locale);
         direction="column"
         data-expanded
         gap="3"
-        display={{ initial: 'flex', sm: 'none' }}
+        display={{ initial: "flex", sm: "none" }}
       >
         {
-          toolsFiltered.map((tool) => {
-            const unavailableOnBranch = tool.branches?.every(
-              (branch) =>
-                branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
-            );
-
-            if (unavailableOnBranch) return null;
-
+          toolsFiltered.map(( tool) => {
             const toolStrings =
               strings.website.tools[
-                (tool.stringsId ??
-                  tool.id) as keyof typeof strings.website.tools
+                (tool.strings ?? tool.id) as keyof typeof strings.website.tools
               ];
 
             return (
               <Link
                 color="gray"
                 highContrast
-                style={{ display: 'contents' }}
+                style={{ display: "contents" }}
                 href={`/${tool.id}`}
               >
                 <Box
                   style={{
-                    borderRadius: Var('radius-2'),
+                    borderRadius: Var("radius-2"),
                     backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-                    backgroundSize: '200%',
-                    backgroundPosition: 'right center',
+                    backgroundSize: "200%",
+                    backgroundPosition: "right center",
                   }}
                 >
                   <Flex
@@ -243,7 +226,7 @@ const strings = getStrings(locale);
                     justify="end"
                     flexGrow="1"
                     style={{
-                      background: `linear-gradient(90deg, transparent, ${Var('gray-1')} 90%)`,
+                      background: `linear-gradient(90deg, transparent, ${Var("gray-1")} 90%)`,
                     }}
                   >
                     {toolStrings.name}
@@ -261,11 +244,11 @@ const strings = getStrings(locale);
     data-expanded
     flexGrow="1"
     width="100%"
-    display={{ initial: 'block', sm: 'none' }}
+    display={{ initial: "block", sm: "none" }}
     style={{
-      backgroundColor: Var('black-a7'),
-      backdropFilter: 'blur(0.5rem)',
-      WebkitBackdropFilter: 'blur(0.5rem)',
+      backgroundColor: Var("black-a7"),
+      backdropFilter: "blur(0.5rem)",
+      WebkitBackdropFilter: "blur(0.5rem)",
     }}
   />
 </Flex>

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx

@@ -1,13 +1,12 @@
-import { Box, Progress } from '@radix-ui/themes';
-import { useProgress } from '@react-three/drei';
+import { Box, Progress } from "@radix-ui/themes";
+import { useStableProgress } from "../../../../../../../hooks/useStableProgress";
 
 interface Props {
   fontSize?: string;
 }
 
 export function Tracker({ fontSize }: Props) {
-  const { loaded, total } = useProgress();
-  const progress = total === 0 ? 0 : (loaded / total) * 100;
+  const progress = useStableProgress();
 
   return (
     <Box

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

@@ -266,7 +266,6 @@ export function Controls({
       ref={orbitControls}
       enabled={Tankopedia.state.controlsEnabled}
       enableDamping={false}
-      autoRotateSpeed={1 / 4}
     />
   );
 }

packages/website/src/components/ToolCard.astro

@@ -1,24 +1,27 @@
 ---
-import { assertSecret } from '@blitzkit/core';
-import { CaretRightIcon } from '@radix-ui/react-icons';
-import { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
-import type { Tool } from '../constants/tools';
-import { getStrings } from '../core/i18n/getStrings';
-import { LinkI18n } from './LinkI18n';
+import { CaretRightIcon } from "@radix-ui/react-icons";
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Text,
+  type ButtonProps,
+} from "@radix-ui/themes";
+import type { Tool } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import { LinkI18n } from "./LinkI18n";
 
 interface Props {
   tool: Tool;
 }
 
 const { tool } = Astro.props;
-const disabled = tool.branches?.every(
-  (branch) => branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
-);
 const { locale } = Astro.params;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
-    (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
   ];
 ---
 
@@ -29,11 +32,12 @@ const toolStrings =
     background-position: center;
     height: 16rem;
 
-    &[data-disabled='true'] {
+    &[data-disabled="true"] {
       opacity: 0.25;
     }
 
-    &[data-significant='true'] {
+    &[data-significant="true"] {
+      width: 100%;
       height: min(20rem, 50vh);
     }
   }
@@ -48,91 +52,78 @@ const toolStrings =
 </style>
 
 <Flex
-  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
-  data-disabled={disabled}
+  style={{
+    backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
+  }}
   data-significant={tool.significant}
   className="container"
   position="relative"
   overflow="hidden"
-  flexGrow={tool.significant ? undefined : '1'}
-  flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
+  flexGrow={tool.significant ? undefined : "1"}
+  flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
 >
   <LinkI18n
     {locale}
     className="link"
     underline="none"
-    href={disabled ? '#' : (tool.href ?? `/${tool.id}`)}
-    target={tool.href ? '_blank' : undefined}
+    href={tool.href ?? `/${tool.id}`}
+    target={tool.href ? "_blank" : undefined}
   >
     <Box
       flexGrow="1"
       style={{
         backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
+        backgroundSize: "cover",
+        backgroundPosition: "center",
       }}
     />
 
     <Flex
-      px={{ initial: '6', md: tool.significant ? '8' : '6' }}
-      py={{ initial: '4', sm: tool.significant ? '6' : '4' }}
+      px={{ initial: "6", md: tool.significant ? "8" : "6" }}
+      py={{ initial: "4", sm: tool.significant ? "6" : "4" }}
       gap="4"
       align="center"
       justify="between"
       width="100%"
-      direction={{ initial: 'column', xs: 'row' }}
+      direction={{ initial: "column", xs: "row" }}
       style={{
-        backgroundColor: 'var(--color-panel-translucent)',
-        backdropFilter: 'blur(64px)',
-        WebkitBackdropFilter: 'blur(64px)',
+        backgroundColor: "var(--color-panel-translucent)",
+        backdropFilter: "blur(64px)",
+        WebkitBackdropFilter: "blur(64px)",
       }}
     >
       <Flex
         direction="column"
         justify="center"
-        align={{ initial: 'center', xs: 'start' }}
+        align={{ initial: "center", xs: "start" }}
       >
         <Heading
-          align={{ initial: 'center', sm: 'left' }}
-          size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
+          align={{ initial: "center", sm: "left" }}
+          size={{ initial: "6", sm: tool.significant ? "7" : "5" }}
           weight="medium"
         >
           {toolStrings.name}
         </Heading>
         <Text
-          align={{ initial: 'center', sm: 'left' }}
-          size={{ initial: '3', sm: tool.significant ? '4' : '3' }}
+          align={{ initial: "center", sm: "left" }}
+          size={{ initial: "3", sm: tool.significant ? "4" : "3" }}
           color="gray"
         >
-          {
-            disabled ? (
-              <>
-                Unavailable on{' '}
-                <Code>{assertSecret(import.meta.env.PUBLIC_BRANCH)}</Code>
-              </>
-            ) : (
-              toolStrings.description
-            )
-          }
+          {toolStrings.description}
         </Text>
       </Flex>
 
-      {
-        !disabled && (
-          <Button
-            highContrast={tool.button.highContrast}
-            size={{
-              initial: undefined,
-              sm: tool.significant ? '3' : undefined,
-            }}
-            color={tool.button.color}
-            style={{ cursor: 'inherit' }}
-          >
-            {toolStrings.button}
-            <CaretRightIcon />
-          </Button>
-        )
-      }
+      <Button
+        size={{
+          initial: undefined,
+          sm: tool.significant ? "3" : undefined,
+        }}
+        color={tool.button as ButtonProps["color"]}
+        style={{ cursor: "inherit" }}
+      >
+        {toolStrings.button}
+        <CaretRightIcon />
+      </Button>
     </Flex>
   </LinkI18n>
 </Flex>

packages/website/src/components/ToolOpenGraph.astro

@@ -1,7 +1,7 @@
 ---
-import { AstroSeo } from '@astrolib/seo';
-import { type Tool } from '../constants/tools';
-import { getStrings } from '../core/i18n/getStrings';
+import { AstroSeo } from "@astrolib/seo";
+import type { Tool } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
 
 interface Props {
   tool: Tool;
@@ -12,7 +12,7 @@ const { locale } = Astro.params;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
-    (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
   ];
 ---
 
@@ -23,11 +23,13 @@ const toolStrings =
   openGraph={{
     url: Astro.url.href,
     images: [
-      { url: `${Astro.url.origin}/assets/images/tools/${tool.id}.webp` },
+      {
+        url: `${Astro.url.origin}/assets/images/tools/${tool.id}.webp`,
+      },
     ],
     title: toolStrings.name,
     description: toolStrings.seo_description,
-    site_name: 'BlitzKit',
+    site_name: "BlitzKit",
   }}
-  twitter={{ cardType: 'summary_large_image' }}
+  twitter={{ cardType: "summary_large_image" }}
 />

packages/website/src/constants/tools.ts

@@ -1,148 +1,78 @@
-import { Button } from '@radix-ui/themes';
-import type { ComponentProps } from 'react';
+import type { ButtonProps } from "@radix-ui/themes";
 
 export interface Tool {
   id: string;
-  stringsId?: string;
+  strings?: string;
+
+  button: ButtonProps["color"];
+  significant?: boolean;
   disabled?: boolean;
   href?: string;
-  button: {
-    highContrast?: boolean;
-    color: ComponentProps<typeof Button>['color'];
-  };
-  significant?: boolean;
-  branches?: string[];
 }
 
-export const tankopediaTool: Tool = {
-  id: 'tanks',
-  stringsId: 'tankopedia',
-  button: {
-    color: 'purple',
+export const tools: Record<string, Tool> = {
+  tanks: {
+    id: "tanks",
+    strings: "tankopedia",
+    button: "purple",
+    significant: true,
   },
-  significant: true,
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-// export const ratingTool: Tool = {
-//   id: 'rating',
-//   image: 'WEyMZH3',
-//   button: {
-//     color: 'orange',
-//   },
-//   branches: ['main', 'dev'],
-// };
-
-export const compareTool: Tool = {
-  id: 'compare',
-  button: {
-    color: 'crimson',
+  players: {
+    id: "players",
+    disabled: true,
+    button: "blue",
   },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const sessionTool: Tool = {
-  // TODO: rename to tracker
-  id: 'session',
-  button: {
-    color: 'blue',
+  compare: {
+    id: "compare",
+    button: "crimson",
   },
-  branches: ['main', 'dev'],
-};
-
-export const discordTool: Tool = {
-  id: 'discord',
-  href: 'https://discord.com/application-directory/1097673957865443370',
-  button: {
-    color: 'indigo',
+  performance: {
+    id: "performance",
+    button: "jade",
+  },
+  charts: {
+    id: "charts",
+    disabled: true,
+    button: "bronze",
+  },
+  guess: {
+    id: "guess",
+    button: "cyan",
+  },
+  mixer: {
+    id: "mixer",
+    button: "gray",
+  },
+  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",
   },
 };
-
-export const moreTool: Tool = {
-  id: 'more',
-  href: 'https://discord.gg/nDt7AjGJQH',
-  button: {
-    color: 'plum',
-  },
-};
-
-export const playersTool: Tool = {
-  id: 'players',
-  button: {
-    color: 'blue',
-  },
-  href: '_', // TODO: remove this to re-enable link
-  branches: ['main', 'dev'],
-};
-
-export const performanceTool: Tool = {
-  id: 'performance',
-  button: {
-    color: 'jade',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const embedTool: Tool = {
-  id: 'embed',
-  button: {
-    color: 'red',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const homeTool: Tool = {
-  id: 'home',
-  button: { color: 'blue' },
-};
-
-export const galleryTool: Tool = {
-  id: 'gallery',
-  button: {
-    color: 'gold',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const tierListTool: Tool = {
-  id: 'tier-list',
-  stringsId: 'tier_list',
-  button: {
-    color: 'orange',
-  },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const chartsTool: Tool = {
-  id: 'charts',
-  button: {
-    color: 'bronze',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const guessTool: Tool = {
-  id: 'guess',
-  button: { color: 'cyan' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const mixerTool: Tool = {
-  id: 'mixer',
-  button: { color: 'red' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const TOOLS: Tool[] = [
-  tankopediaTool,
-  compareTool,
-  performanceTool,
-  guessTool,
-  // mixerTool,
-  // chartsTool,
-  galleryTool,
-  sessionTool,
-  tierListTool,
-  embedTool,
-  // ratingTool,
-];

packages/website/src/hooks/useStableProgress.ts

@@ -0,0 +1,14 @@
+import { useProgress } from "@react-three/drei";
+import { useRef } from "react";
+
+export function useStableProgress() {
+  const { loaded, total } = useProgress();
+  const progress = useRef(0);
+
+  progress.current = Math.max(
+    progress.current,
+    total === 0 ? 0 : (loaded / total) * 100
+  );
+
+  return progress.current;
+}

packages/website/src/layouts/ToolLayout.astro

@@ -1,9 +1,9 @@
 ---
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import ToolOpenGraph from '../components/ToolOpenGraph.astro';
-import { type Tool } from '../constants/tools';
-import { getStrings } from '../core/i18n/getStrings';
-import BaseLayout from './BaseLayout.astro';
+import { Box, Flex, Heading, Text } from "@radix-ui/themes";
+import ToolOpenGraph from "../components/ToolOpenGraph.astro";
+import type { Tool } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import BaseLayout from "./BaseLayout.astro";
 
 interface Props {
   tool: Tool;
@@ -14,17 +14,17 @@ const { locale } = Astro.params;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
-    (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
   ];
 ---
 
-<ToolOpenGraph tool={tool} />
+<ToolOpenGraph {tool} />
 
 <BaseLayout>
   <Box
     style={{
       backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-      backgroundSize: 'cover',
+      backgroundSize: "cover",
     }}
   >
     <Flex
@@ -32,8 +32,8 @@ const toolStrings =
       align="center"
       py="6"
       style={{
-        backdropFilter: 'blur(4rem)',
-        WebkitBackdropFilter: 'blur(4rem)',
+        backdropFilter: "blur(4rem)",
+        WebkitBackdropFilter: "blur(4rem)",
       }}
     >
       <Heading size="7">{toolStrings.name}</Heading>

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

@@ -1,15 +1,15 @@
 ---
-import ToolOpenGraph from '../../../components/ToolOpenGraph.astro';
-import { compareTool } from '../../../constants/tools';
-import BaseLayout from '../../../layouts/BaseLayout.astro';
-import { Page } from './_index';
+import ToolOpenGraph from "../../../components/ToolOpenGraph.astro";
+import { tools } from "../../../constants/tools";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolOpenGraph tool={compareTool} />
+<ToolOpenGraph tool={tools.compare} />
 
 <BaseLayout noFooter>
   <Page {locale} client:load />

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

@@ -1,13 +1,13 @@
 ---
-import { embedTool } from '../../../constants/tools';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
-import { Page } from './_index';
+import { tools } from "../../../constants/tools";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={embedTool}>
+<ToolLayout tool={tools.embed}>
   <Page {locale} />
 </ToolLayout>

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

@@ -1,15 +1,15 @@
 ---
-import { galleryTool } from '../../../constants/tools';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
-import type { getStaticPaths } from '../index.astro';
-import { Page } from './_index';
+import { tools } from "../../../constants/tools";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import type { getStaticPaths } from "../index.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={galleryTool}>
+<ToolLayout tool={tools.gallery}>
   <Page {locale} client:only="react">
     <Page {locale} skeleton slot="fallback" />
   </Page>

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

@@ -1,37 +1,47 @@
 ---
-import { AstroSeo } from '@astrolib/seo';
-import { assertSecret } from '@blitzkit/core';
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/i18n';
-import { literals } from '@blitzkit/i18n/src/literals';
-import { Box, Flex, Heading, Link } from '@radix-ui/themes';
-import type { GetStaticPaths } from 'astro';
-import { AesonPlug } from '../../components/AesonPlug';
-import HomeHero from '../../components/HomeHero.astro';
-import { Plugs } from '../../components/Plugs';
-import ToolCard from '../../components/ToolCard.astro';
-import {
-  compareTool,
-  discordTool,
-  embedTool,
-  galleryTool,
-  guessTool,
-  moreTool,
-  performanceTool,
-  sessionTool,
-  tankopediaTool,
-  tierListTool,
-} from '../../constants/tools';
-import { getStrings } from '../../core/i18n/getStrings';
-import BaseLayout from '../../layouts/BaseLayout.astro';
+import { AstroSeo } from "@astrolib/seo";
+import { assertSecret } from "@blitzkit/core";
+import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "@blitzkit/i18n";
+import { literals } from "@blitzkit/i18n/src/literals";
+import { Box, Flex, Link } from "@radix-ui/themes";
+import type { GetStaticPaths } from "astro";
+import { AesonPlug } from "../../components/AesonPlug";
+import HomeHero from "../../components/HomeHero.astro";
+import { Plugs } from "../../components/Plugs";
+import ToolCard from "../../components/ToolCard.astro";
+import { tools, type Tool } from "../../constants/tools";
+import { getStrings } from "../../core/i18n/getStrings";
+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 strings = getStrings(Astro.params.locale);
+const rows: Tool[][] = [];
+
+for (const id in tools) {
+  const tool = tools[id];
+
+  if ("disabled" in tool && tool.disabled) continue;
+
+  const compatibleRow = rows.find(
+    (row) =>
+      row.length < MAX_TOOLS_PER_ROW &&
+      !("significant" in row[0] && row[0].significant)
+  );
+
+  if (compatibleRow) {
+    compatibleRow.push(tool);
+  } else {
+    rows.push([tool]);
+  }
+}
 
 export const getStaticPaths = (() => {
   return [
     ...SUPPORTED_LOCALES.filter((locale) => locale !== DEFAULT_LOCALE).map(
-      (locale) => ({ params: { locale } }),
+      (locale) => ({ params: { locale } })
     ),
     { params: { locale: undefined } },
   ];
@@ -44,11 +54,11 @@ export const getStaticPaths = (() => {
   canonical={Astro.url.href}
   openGraph={{
     url: Astro.url.href,
-    title: 'BlitzKit',
+    title: "BlitzKit",
     description: strings.website.home.seo_description,
-    site_name: 'BlitzKit',
+    site_name: "BlitzKit",
   }}
-  twitter={{ cardType: 'summary_large_image' }}
+  twitter={{ cardType: "summary_large_image" }}
 />
 
 <BaseLayout>
@@ -79,7 +89,7 @@ export const getStaticPaths = (() => {
           underline="always"
         >
           {literals(strings.website.home.help_translate, [
-            'BlitzKit',
+            "BlitzKit",
             strings.common.locales[locale],
           ])}
         </Link>
@@ -90,7 +100,7 @@ export const getStaticPaths = (() => {
   <Plugs client:idle />
 
   {
-    PUBLIC_ASSET_BRANCH === 'preview' && (
+    PUBLIC_ASSET_BRANCH === "preview" && (
       <Flex justify="center" my="8" px="4">
         <AesonPlug />
       </Flex>
@@ -99,57 +109,19 @@ export const getStaticPaths = (() => {
 
   <Flex p="4" justify="center" gap="4" mt="3">
     <Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
-      <ToolCard tool={tankopediaTool} />
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        {/* <ToolCard tool={playerStatsTool} /> */}
-        <ToolCard tool={compareTool} />
-        <ToolCard tool={performanceTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <!-- <ToolCard tool={chartsTool} /> -->
-        <ToolCard tool={guessTool} />
-        <ToolCard tool={galleryTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={sessionTool} />
-        <ToolCard tool={discordTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={tierListTool} />
-        <ToolCard tool={embedTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={moreTool} />
-        <Box flexGrow="1" />
-      </Flex>
-
-      <Heading align="center" mt="6"
-        >{strings.website.home.other_projects.title}</Heading
-      >
-
-      <Flex gap="4" mb="6" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard
-          tool={{
-            button: { color: 'blue' },
-            id: 'blitz-analysis',
-            stringsId: 'blitz_analysis',
-            href: 'https://blitzanalysiz.com/',
-          }}
-        />
-        <ToolCard
-          tool={{
-            button: { color: 'purple', highContrast: true },
-            id: 'blitz-insider',
-            stringsId: 'blitz_insider',
-            href: 'https://discord.gg/UjWf9eGgtR',
-          }}
-        />
-      </Flex>
+      {
+        rows.map((row) => (
+          <Flex gap="4" direction={{ initial: "column", sm: "row" }}>
+            {row.map((tool) => (
+              <ToolCard {tool} />
+            ))}
+            {row.length < MAX_TOOLS_PER_ROW &&
+              !("significant" in row[0] && row[0].significant) && (
+                <Box flexGrow="1" />
+              )}
+          </Flex>
+        ))
+      }
     </Flex>
   </Flex>
 

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

@@ -1,7 +1,7 @@
 import { Box } from "@radix-ui/themes";
 import { useRef } from "react";
 import { MixerScene } from "../../../components/MixerScene";
-import { PageWrapper } from "../../../components/PageWrapper";
+import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
 import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
 import {
   LocaleProvider,
@@ -10,7 +10,14 @@ import {
 import { Mixer } from "../../../stores/mixer";
 
 const tankDefinitions = await awaitableTankDefinitions;
-const tanks = Object.values(tankDefinitions.tanks);
+const modelDefinitions = await awaitableModelDefinitions;
+const tanks = Object.values(tankDefinitions.tanks).filter((tank) => {
+  const tankModel = modelDefinitions.models[tank.id];
+  const turret = tank.turrets.at(-1)!;
+  const turretModel = tankModel.turrets[turret.id];
+
+  return tank.tier >= 10 && !turretModel.yaw;
+});
 
 export function Page({ locale }: LocaleAcceptorProps) {
   const hull = useRef(tanks[Math.floor(Math.random() * tanks.length)]);
@@ -51,12 +58,10 @@ export function Page({ locale }: LocaleAcceptorProps) {
 
 function Content() {
   return (
-    <PageWrapper p="0">
-      <Box flexGrow="1" position="relative">
-        <Box position="absolute" width="100%" height="100%" top="0" left="0">
-          <MixerScene />
-        </Box>
+    <Box flexGrow="1" position="relative">
+      <Box position="absolute" width="100%" height="100%" top="0" left="0">
+        <MixerScene />
       </Box>
-    </PageWrapper>
+    </Box>
   );
 }

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

@@ -1,15 +1,15 @@
 ---
-import { PageWrapper } from '../../../components/PageWrapper';
-import BaseLayout from '../../../layouts/BaseLayout.astro';
-import { Page } from './_index';
+import { PageWrapper } from "../../../components/PageWrapper";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<BaseLayout>
-  <PageWrapper p="0" maxWidth="unset">
+<BaseLayout integrated>
+  <PageWrapper color="gray" p="0" maxWidth="unset">
     <Page {locale} client:load />
   </PageWrapper>
 </BaseLayout>

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

@@ -1,16 +1,16 @@
 ---
-import ToolOpenGraph from '../../../components/ToolOpenGraph.astro';
-import { performanceTool } from '../../../constants/tools';
-import BaseLayout from '../../../layouts/BaseLayout.astro';
-import type { getStaticPaths } from '../index.astro';
-import { Page } from './_index';
+import ToolOpenGraph from "../../../components/ToolOpenGraph.astro";
+import { tools } from "../../../constants/tools";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import type { getStaticPaths } from "../index.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolOpenGraph tool={performanceTool} />
+<ToolOpenGraph tool={tools.performance} />
 
 <BaseLayout noFooter>
   <Page client:only="react" {locale}>

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

@@ -1,14 +1,14 @@
 ---
-import { sessionTool } from '../../../constants/tools';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
-import type { getStaticPaths } from '../index.astro';
-import { Page } from './_index';
+import { tools } from "../../../constants/tools";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import type { getStaticPaths } from "../index.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={sessionTool}>
+<ToolLayout tool={tools.session}>
   <Page client:load {locale} />
 </ToolLayout>

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

@@ -1,14 +1,14 @@
 ---
-import { tankopediaTool } from '../../../constants/tools';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
-import { Page } from './_index';
+import { tools } from "../../../constants/tools";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={tankopediaTool}>
+<ToolLayout tool={tools.tanks}>
   <Page {locale} client:only="react">
     <Page {locale} skeleton slot="fallback" />
   </Page>

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

@@ -1,13 +1,15 @@
 ---
-import { tierListTool } from '../../../constants/tools';
-import ToolLayout from '../../../layouts/ToolLayout.astro';
-import { Page } from './_index';
+import { tools } from "../../../constants/tools";
+import ToolLayout from "../../../layouts/ToolLayout.astro";
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
+
+
 ---
 
-<ToolLayout tool={tierListTool}>
+<ToolLayout tool={tools.tier_list}>
   <Page {locale} client:load />
 </ToolLayout>

packages/website/src/pages/api/index.astro

@@ -0,0 +1,6 @@
+---
+import { tools } from "../../constants/tools";
+import ToolLayout from "../../layouts/ToolLayout.astro";
+---
+
+<ToolLayout tool={tools.api}></ToolLayout>

packages/website/src/pages/api/tankopedia/tank-icon/[id]/_index.tsx

@@ -1,33 +0,0 @@
-import { TankSandbox } from "../../../../../components/Tankopedia/HeroSection/components/TankSandbox";
-import { awaitableModelDefinitions } from "../../../../../core/awaitables/modelDefinitions";
-import { awaitableTankDefinitions } from "../../../../../core/awaitables/tankDefinitions";
-import { LocaleProvider } from "../../../../../hooks/useLocale";
-import { Duel } from "../../../../../stores/duel";
-import { Tankopedia } from "../../../../../stores/tankopedia";
-
-const [tankDefinitions, modelDefinitions] = await Promise.all([
-  awaitableTankDefinitions,
-  awaitableModelDefinitions,
-]);
-
-interface PageProps {
-  id: number;
-}
-
-export function Page({ id }: PageProps) {
-  const tank = tankDefinitions.tanks[id];
-  const model = modelDefinitions.models[id];
-
-  Tankopedia.useInitialization(model);
-  Duel.useInitialization({ tank, model });
-
-  return (
-    <LocaleProvider locale="en">
-      <Content />
-    </LocaleProvider>
-  );
-}
-
-function Content() {
-  return <TankSandbox naked thicknessRange={{ value: 0 }} />;
-}

packages/website/src/pages/api/tankopedia/tank-icon/[id]/index.astro

@@ -1,30 +0,0 @@
----
-import { assertSecret } from '@blitzkit/core';
-import type { GetStaticPaths } from 'astro';
-import { getStaticPaths as tankopediaGetStaticPaths } from '../../../../[...locale]/tools/tankopedia/[id]/index.astro';
-import { Page } from './_index';
-
-export const getStaticPaths = (async () => {
-  if (assertSecret(import.meta.env.MODE) === 'development') {
-    return await tankopediaGetStaticPaths();
-  } else {
-    return [];
-  }
-}) satisfies GetStaticPaths;
-
-const { id } = Astro.params;
----
-
-<html>
-  <head>
-    <style is:global>
-      body {
-        margin: 0;
-      }
-    </style>
-  </head>
-
-  <body>
-    <Page {id} client:load />
-  </body>
-</html>