feat: search page

packages/core/src/blitzkit/index.ts

@@ -30,11 +30,11 @@ export * from './normalizeBoundingBox';
 // export * from './patientFetch';
 // export * from './patientFetchJSON';
 // export * from './progressiveStat';
-// export * from './provisionDefinitions';
+export * from './provisionDefinitions';
 export * from './resolveDpm';
-// export * from './resolvePenetrationCoefficient';
+export * from './resolvePenetrationCoefficient';
 // export * from './reviews';
-// export * from './skillDefinitions';
+export * from './skillDefinitions';
 // export * from './sum';
 export * from './superCompress';
 export * from './superDecompress';

packages/core/src/blitzkit/provisionDefinitions.ts

@@ -1,5 +1,5 @@
-import { TankFilterDefinition } from '@blitzkit/core';
 import { asset } from './asset';
+import { TankFilterDefinition } from './consumableDefinitions';
 import { fetchCdonLz4 } from './fetchCdonLz4';
 
 export type ProvisionEntry = {

packages/core/src/index.ts

@@ -3,7 +3,7 @@ export * from './blitzkit';
 // export * from './blitzstars';
 // export * from './databases';
 export * from './imgur';
-// export * from './math';
+export * from './math';
 export * from './patreon';
 // export * from './protobuf';
 export * from './statistics';

packages/website-legacy/package.json

@@ -17,8 +17,6 @@
     "lodash": "^4.17.21",
     "next": "^14.2.7",
     "three-stdlib": "^2.32.2",
-    "@react-three/drei": "^9.111.5",
-    "@react-three/fiber": "^8.17.6",
     "urlon": "^3.1.0",
     "react": "^18.3.1",
     "@vanilla-extract/css": "^1.15.5",
@@ -29,7 +27,6 @@
     "react-fuzzysort": "^1.0.1",
     "immer": "^10.1.1",
     "@vanilla-extract/dynamic": "^2.1.2",
-    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@types/react-dom": "^18",

packages/website-legacy/src/app/tools/tankopedia/[id]/components/Content.tsx

@@ -2,19 +2,19 @@ import { TIER_ROMAN_NUMERALS } from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
 import { invalidate } from '@react-three/fiber';
 import { useEffect } from 'react';
+import { CalloutsSection } from '../../../../../../../website/src/components/Tankopedia/CalloutsSection';
+import { CharacteristicsSection } from '../../../../../../../website/src/components/Tankopedia/CharacteristicsSection';
+import { GameModeSection } from '../../../../../../../website/src/components/Tankopedia/GameModeSection';
+import { HeroSection } from '../../../../../../../website/src/components/Tankopedia/HeroSection';
+import { HistorySection } from '../../../../../../../website/src/components/Tankopedia/HistorySection';
+import { MetaSection } from '../../../../../../../website/src/components/Tankopedia/MetaSection';
+import { ShotDisplaySection } from '../../../../../../../website/src/components/Tankopedia/ShotDisplaySection';
+import { TechTreeSection } from '../../../../../../../website/src/components/Tankopedia/TechTreeSection';
 import { AdMidSectionResponsive } from '../../../../../components/AdMidSectionResponsive';
 import { PageWrapper } from '../../../../../components/PageWrapper';
 import { useAdExempt } from '../../../../../hooks/useAdExempt';
 import * as Duel from '../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../stores/tankopediaEphemeral';
-import { CalloutsSection } from './CalloutsSection';
-import { HistorySection } from './HistorySection';
-import { CharacteristicsSection } from './Model/CharacteristicsSection';
-import { GameModeSection } from './Model/GameModeSection';
-import { HeroSection } from './Model/HeroSection';
-import { MetaSection } from './Model/MetaSection';
-import { TechTreeSection } from './Model/TechTreeSection';
-import { ShotDisplaySection } from './ShotDisplaySection';
 import { VideoSection } from './VideoSection';
 
 export function Content() {

packages/website-legacy/src/app/tools/tankopedia/[id]/page.tsx

@@ -2,19 +2,19 @@ import { TIER_ROMAN_NUMERALS } from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
 import { invalidate } from '@react-three/fiber';
 import { useEffect } from 'react';
+import { CalloutsSection } from '../../../../../../website/src/components/Tankopedia/CalloutsSection';
+import { CharacteristicsSection } from '../../../../../../website/src/components/Tankopedia/CharacteristicsSection';
+import { GameModeSection } from '../../../../../../website/src/components/Tankopedia/GameModeSection';
+import { HeroSection } from '../../../../../../website/src/components/Tankopedia/HeroSection';
+import { HistorySection } from '../../../../../../website/src/components/Tankopedia/HistorySection';
+import { MetaSection } from '../../../../../../website/src/components/Tankopedia/MetaSection';
+import { ShotDisplaySection } from '../../../../../../website/src/components/Tankopedia/ShotDisplaySection';
+import { TechTreeSection } from '../../../../../../website/src/components/Tankopedia/TechTreeSection';
 import { AdMidSectionResponsive } from '../../../../components/AdMidSectionResponsive';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { useAdExempt } from '../../../../hooks/useAdExempt';
 import * as Duel from '../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../stores/tankopediaEphemeral';
-import { CalloutsSection } from './components/CalloutsSection';
-import { HistorySection } from './components/HistorySection';
-import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
-import { GameModeSection } from './components/Model/GameModeSection';
-import { HeroSection } from './components/Model/HeroSection';
-import { MetaSection } from './components/Model/MetaSection';
-import { TechTreeSection } from './components/Model/TechTreeSection';
-import { ShotDisplaySection } from './components/ShotDisplaySection';
 import { VideoSection } from './components/VideoSection';
 
 export default function Page() {

packages/website-legacy/tsconfig.json

@@ -10,6 +10,13 @@
   "include": [
     "src/**/*",
     ".next/types/**/*.ts",
-    "../website/src/components/TankSearch/components/FilterControl.tsx"
+    "../website/src/components/TankSearch/components/FilterControl.tsx",
+    "../website/src/components/Tankopedia/HeroSection/index.tsx",
+    "../website/src/components/Tankopedia/GameModeSection.tsx",
+    "../website/src/components/Tankopedia/CharacteristicsSection.tsx",
+    "../website/src/components/Tankopedia/MetaSection",
+    "../website/src/components/Tankopedia/HistorySection.tsx",
+    "../website/src/components/Tankopedia/CalloutsSection.tsx",
+    "../website/src/components/Tankopedia/ShotDisplaySection.tsx"
   ]
 }

packages/website/package.json

@@ -18,10 +18,13 @@
     "@radix-ui/themes": "^3.1.3",
     "@vanilla-extract/css": "^1.15.5",
     "astro": "^4.15.6",
+    "@react-three/drei": "^9.111.5",
+    "@react-three/fiber": "^8.17.6",
     "astro-purgecss": "^4.6.0",
     "nanostores": "^0.11.3",
     "purgecss": "^6.0.0",
     "react": "^18.3.1",
+    "zustand": "^4.5.5",
     "react-dom": "^18.3.1",
     "react-promise-suspense": "^0.3.4"
   },

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

@@ -9,11 +9,7 @@ import {
 } from '@radix-ui/themes';
 import { Html } from '@react-three/drei';
 import { useRef } from 'react';
-import { radToDeg } from 'three/src/math/MathUtils';
-import { resolveArmorIndex } from '../../../../../website-legacy/src/core/blitzkit/resolveArmorIndex';
-import * as App from '../../../../../website-legacy/src/stores/app';
-import * as Duel from '../../../../../website-legacy/src/stores/duel';
-import * as TankopediaEphemeral from '../../../../../website-legacy/src/stores/tankopediaEphemeral';
+import { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
 import { layerTypeNames } from './ShotDisplayCard';
 import { ArmorType } from './SpacedArmorScene';
 

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

@@ -1,4 +1,4 @@
-import { GroupProps } from '@react-three/fiber';
+import type { GroupProps } from '@react-three/fiber';
 import { forwardRef } from 'react';
 import { Group } from 'three';
 

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

@@ -1,12 +1,11 @@
 import { memo, useRef } from 'react';
 import { Group } from 'three';
-import { correctZYTuple } from '../../../../../website-legacy/src/core/blitz/correctZYTuple';
-import { nameToArmorId } from '../../../../../website-legacy/src/core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../../../website-legacy/src/core/blitzkit/resolveThickness';
-import { useArmor } from '../../../../../website-legacy/src/hooks/useArmor';
-import { useTankModelDefinition } from '../../../../../website-legacy/src/hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../../../website-legacy/src/hooks/useTankTransform';
-import * as Duel from '../../../../../website-legacy/src/stores/duel';
+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 { ModelTankWrapper } from './ModelTankWrapper';
 import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
 

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

@@ -1,13 +1,12 @@
 import { memo, useRef } from 'react';
 import { Group, Plane, Scene, Vector3 } from 'three';
-import { correctZYTuple } from '../../../../../website-legacy/src/core/blitz/correctZYTuple';
-import { nameToArmorId } from '../../../../../website-legacy/src/core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../../../website-legacy/src/core/blitzkit/resolveThickness';
-import { useArmor } from '../../../../../website-legacy/src/hooks/useArmor';
-import { useModel } from '../../../../../website-legacy/src/hooks/useModel';
-import { useTankModelDefinition } from '../../../../../website-legacy/src/hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../../../website-legacy/src/hooks/useTankTransform';
-import * as Duel from '../../../../../website-legacy/src/stores/duel';
+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 { ModelTankWrapper } from './ModelTankWrapper';
 import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
 

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

@@ -1,7 +1,7 @@
 import {
-  ShellDefinition,
   resolveNearPenetration,
   resolvePenetrationCoefficient,
+  type ShellDefinition,
 } from '@blitzkit/core';
 import { useEffect } from 'react';
 import {
@@ -11,10 +11,10 @@ import {
   Plane,
   ShaderMaterial,
 } from 'three';
-import { ArmorUserData, ExternalModuleVariant } from '../..';
-import { hasEquipment } from '../../../../../../../../website-legacy/src/core/blitzkit/hasEquipment';
-import { jsxTree } from '../../../../../../../../website-legacy/src/core/blitzkit/jsxTree';
-import * as Duel from '../../../../../../../../website-legacy/src/stores/duel';
+import type { ArmorUserData, ExternalModuleVariant } from '../..';
+import { hasEquipment } from '../../../../../../core/blitzkit/hasEquipment';
+import { jsxTree } from '../../../../../../core/blitzkit/jsxTree';
+import { Duel, type EquipmentMatrix } from '../../../../../../stores/duel';
 import { ArmorType } from '../../../SpacedArmorScene';
 import fragmentShader from './shaders/fragment.glsl';
 import vertexShader from './shaders/vertex.glsl';
@@ -56,7 +56,7 @@ export function SpacedArmorSubExternal({
       );
     }
     async function handleProtagonistEquipmentChange(
-      equipment: Duel.EquipmentMatrix,
+      equipment: EquipmentMatrix,
     ) {
       const duel = duelStore.getState();
       const hasEnhancedArmor = await hasEquipment(
@@ -68,9 +68,7 @@ export function SpacedArmorSubExternal({
         ? thickness * 1.03
         : thickness;
     }
-    async function handleAntagonistEquipmentChange(
-      equipment: Duel.EquipmentMatrix,
-    ) {
+    async function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
       const shell = duel.antagonist.shell;
       const penetration = resolveNearPenetration(shell.penetration);

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

@@ -1,20 +1,19 @@
 import { normalizeAngleRad } from '@blitzkit/core';
-import { ThreeEvent, useThree } from '@react-three/fiber';
+import { useThree, type ThreeEvent } from '@react-three/fiber';
 import { memo, useRef } from 'react';
 import { Group, Plane, Vector2, Vector3 } from 'three';
-import { applyPitchYawLimits } from '../../../../../website-legacy/src/core/blitz/applyPitchYawLimits';
-import { correctZYTuple } from '../../../../../website-legacy/src/core/blitz/correctZYTuple';
-import { hasEquipment } from '../../../../../website-legacy/src/core/blitzkit/hasEquipment';
-import { modelTransformEvent } from '../../../../../website-legacy/src/core/blitzkit/modelTransform';
-import { nameToArmorId } from '../../../../../website-legacy/src/core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../../../website-legacy/src/core/blitzkit/resolveThickness';
-import { useArmor } from '../../../../../website-legacy/src/hooks/useArmor';
-import { useModel } from '../../../../../website-legacy/src/hooks/useModel';
-import { useTankModelDefinition } from '../../../../../website-legacy/src/hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../../../website-legacy/src/hooks/useTankTransform';
-import * as Duel from '../../../../../website-legacy/src/stores/duel';
-import * as TankopediaEphemeral from '../../../../../website-legacy/src/stores/tankopediaEphemeral';
-import * as TankopediaPersistent from '../../../../../website-legacy/src/stores/tankopediaPersistent';
+import { applyPitchYawLimits } from '../../../core/blitz/applyPitchYawLimits';
+import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
+import { hasEquipment } from '../../../core/blitzkit/hasEquipment';
+import { modelTransformEvent } from '../../../core/blitzkit/modelTransform';
+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 { TankopediaEphemeral } from '../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../stores/tankopediaPersistent';
 import { ModelTankWrapper } from './ModelTankWrapper';
 import { ArmorType } from './SpacedArmorScene';
 import { StaticArmorSceneComponent } from './StaticArmorSceneComponent';
@@ -56,13 +55,13 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
       ? undefined
       : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
   const showPrimaryArmor = TankopediaPersistent.use(
-    (state) => state.model.visual.showPrimaryArmor,
+    (state) => state.showPrimaryArmor,
   );
   const showSpacedArmor = TankopediaPersistent.use(
-    (state) => state.model.visual.showSpacedArmor,
+    (state) => state.showSpacedArmor,
   );
   const showExternalModules = TankopediaPersistent.use(
-    (state) => state.model.visual.showExternalModules,
+    (state) => state.showExternalModules,
   );
   const isDynamicArmorActive = Duel.use((state) =>
     state.protagonist.consumables.includes(73),

packages/website/src/components/CrewSkillManager.tsx

@@ -2,11 +2,10 @@ import {
   asset,
   permanentSkills,
   skillDefinitions,
-  Tier,
   TIER_ROMAN_NUMERALS,
+  type Tier,
 } from '@blitzkit/core';
 import { Flex } from '@radix-ui/themes';
-import { use } from 'react';
 import { GenericTankComponentButton } from './ModuleButtons/GenericTankComponentButton';
 
 interface CrewSkillManagerProps {
@@ -14,12 +13,12 @@ interface CrewSkillManagerProps {
   onChange?: (skillLevels: Record<string, number>) => void;
 }
 
+const awaitedSkillDefinitions = await skillDefinitions;
+
 export function CrewSkillManager({
   skillLevels,
   onChange,
 }: CrewSkillManagerProps) {
-  const awaitedSkillDefinitions = use(skillDefinitions);
-
   return (
     <Flex direction="column" gap="2">
       {Object.entries(awaitedSkillDefinitions.classes).map(

packages/website/src/components/ModuleButtons/ConsumableButton.tsx

@@ -1,7 +1,6 @@
 import { asset, consumableDefinitions } from '@blitzkit/core';
 import { ClockIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { Flex, Text } from '@radix-ui/themes';
-import { use } from 'react';
 import { useDelta } from '../../../../website-legacy/src/hooks/useDelta';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import { TankComponentButtonProps } from './TankComponentButton';
@@ -12,13 +11,14 @@ interface ConsumableButtonProps extends TankComponentButtonProps {
   cooldown?: number;
 }
 
+const awaitedConsumableDefinitions = await consumableDefinitions;
+
 export function ConsumableButton({
   consumable,
   cooldown,
   duration,
   ...props
 }: ConsumableButtonProps) {
-  const awaitedConsumableDefinitions = use(consumableDefinitions);
   const cooldownDelta = useDelta(cooldown ?? 0);
   const durationDelta = useDelta(duration ?? 0);
 

packages/website/src/components/ModuleButtons/EquipmentButton.tsx

@@ -1,5 +1,4 @@
 import { asset, equipmentDefinitions } from '@blitzkit/core';
-import { use } from 'react';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import { TankComponentButtonProps } from './TankComponentButton';
 
@@ -7,9 +6,9 @@ interface EquipmentButtonProps extends TankComponentButtonProps {
   equipment: number;
 }
 
-export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
-  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
+const awaitedEquipmentDefinitions = await equipmentDefinitions;
 
+export function EquipmentButton({ equipment, ...props }: EquipmentButtonProps) {
   return (
     <GenericTankComponentButton
       tooltip={awaitedEquipmentDefinitions.equipments[equipment].name}

packages/website/src/components/ModuleButtons/GenericTankComponentButton.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import {
   TankComponentButton,
   TankComponentButtonProps,

packages/website/src/components/ModuleButtons/ProvisionButton.tsx

@@ -1,5 +1,4 @@
 import { asset, provisionDefinitions } from '@blitzkit/core';
-import { use } from 'react';
 import { GenericTankComponentButton } from './GenericTankComponentButton';
 import { TankComponentButtonProps } from './TankComponentButton';
 
@@ -7,9 +6,9 @@ interface ProvisionButtonProps extends TankComponentButtonProps {
   provision: number;
 }
 
-export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
-  const awaitedProvisionDefinitions = use(provisionDefinitions);
+const awaitedProvisionDefinitions = await provisionDefinitions;
 
+export function ProvisionButton({ provision, ...props }: ProvisionButtonProps) {
   return (
     <GenericTankComponentButton
       tooltip={awaitedProvisionDefinitions[provision].name}

packages/website/src/components/NavbarAccount.tsx

@@ -1,113 +0,0 @@
-import { patreonLoginUrl } from '@blitzkit/core';
-import { useStore } from '@nanostores/react';
-import { PersonIcon } from '@radix-ui/react-icons';
-import {
-  Button,
-  Flex,
-  IconButton,
-  Inset,
-  Link,
-  Popover,
-  Separator,
-  Skeleton,
-  Text,
-} from '@radix-ui/themes';
-import { Suspense } from 'react';
-import { $patreonLogin } from '../stores/patreonLogin';
-import { $wargamingLogin } from '../stores/wargamingLogin';
-import { BlitzKitTheme } from './BlitzKitTheme';
-import { PatreonIcon } from './PatreonIcon';
-import { WargamingAccountName } from './WargamingAccountName';
-import { WargamingIcon } from './WargamingIcon';
-import { WargamingLoginButton } from './WargamingLoginButton';
-
-export function NavbarAccount() {
-  const patreonLogin = useStore($patreonLogin);
-  const wargamingLogin = useStore($wargamingLogin);
-
-  return (
-    <Popover.Root>
-      <Popover.Trigger>
-        <IconButton variant="ghost" color="gray">
-          <PersonIcon />
-        </IconButton>
-      </Popover.Trigger>
-
-      <BlitzKitTheme>
-        <Popover.Content
-          align="end"
-          width="320px"
-          onOpenAutoFocus={(event) => event.preventDefault()}
-        >
-          {(patreonLogin.token || wargamingLogin.token) && (
-            <Flex direction="column" gap="2">
-              <Text align="center" color="gray">
-                Logged in accounts
-              </Text>
-
-              {patreonLogin.token && (
-                <Flex align="center" gap="2" justify="center">
-                  <PatreonIcon width={15} height={15} />
-                  <Text>Patreon</Text>
-                  <Button
-                    color="red"
-                    variant="ghost"
-                    onClick={() => {
-                      $patreonLogin.set({ token: undefined });
-                    }}
-                  >
-                    Logout
-                  </Button>
-                </Flex>
-              )}
-
-              {wargamingLogin.token && (
-                <Flex align="center" gap="2" justify="center">
-                  <WargamingIcon width={15} height={15} />
-                  <Text>
-                    <Suspense fallback={<Skeleton height="1em" width="5rem" />}>
-                      <WargamingAccountName />
-                    </Suspense>
-                  </Text>
-                  <Button
-                    color="red"
-                    variant="ghost"
-                    onClick={() => {
-                      $wargamingLogin.set({ token: undefined });
-                    }}
-                  >
-                    Logout
-                  </Button>
-                </Flex>
-              )}
-            </Flex>
-          )}
-
-          {!patreonLogin.token !== !wargamingLogin.token && (
-            <Inset side="x">
-              <Separator my="4" size="4" />
-            </Inset>
-          )}
-
-          {(!patreonLogin.token || !wargamingLogin.token) && (
-            <Flex direction="column" gap="2">
-              <Text align="center" color="gray">
-                Log in with...
-              </Text>
-
-              {!patreonLogin.token && (
-                <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
-                  <Button style={{ width: '100%' }} color="tomato">
-                    <PatreonIcon width={15} height={15} /> Patreon
-                  </Button>
-                </Link>
-              )}
-
-              {!wargamingLogin.token && <WargamingLoginButton />}
-            </Flex>
-          )}
-        </Popover.Content>
-      </BlitzKitTheme>
-    </Popover.Root>
-  );
-}

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

@@ -0,0 +1,118 @@
+import { patreonLoginUrl } from '@blitzkit/core';
+import { useStore } from '@nanostores/react';
+import { PersonIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Flex,
+  IconButton,
+  Inset,
+  Link,
+  Popover,
+  Separator,
+  Skeleton,
+  Text,
+} from '@radix-ui/themes';
+import { Suspense } from 'react';
+import { App } from '../../stores/app';
+import { $patreonLogin } from '../../stores/patreonLogin';
+import { $wargamingLogin } from '../../stores/wargamingLogin';
+import { BlitzKitTheme } from '../BlitzKitTheme';
+import { PatreonIcon } from '../PatreonIcon';
+import { WargamingAccountName } from '../WargamingAccountName';
+import { WargamingIcon } from '../WargamingIcon';
+import { WargamingLoginButton } from '../WargamingLoginButton';
+
+export function NavbarAccount() {
+  const patreon = useStore($patreonLogin);
+  const wargaming = useStore($wargamingLogin);
+
+  return (
+    <App.Provider>
+      <Popover.Root>
+        <Popover.Trigger>
+          <IconButton variant="ghost" color="gray">
+            <PersonIcon />
+          </IconButton>
+        </Popover.Trigger>
+
+        <BlitzKitTheme>
+          <Popover.Content
+            align="end"
+            width="320px"
+            onOpenAutoFocus={(event) => event.preventDefault()}
+          >
+            {(patreon.token || wargaming.token) && (
+              <Flex direction="column" gap="2">
+                <Text align="center" color="gray">
+                  Logged in accounts
+                </Text>
+
+                {patreon.token && (
+                  <Flex align="center" gap="2" justify="center">
+                    <PatreonIcon width={15} height={15} />
+                    <Text>Patreon</Text>
+                    <Button
+                      color="red"
+                      variant="ghost"
+                      onClick={() => {
+                        $patreonLogin.setKey('token', undefined);
+                      }}
+                    >
+                      Logout
+                    </Button>
+                  </Flex>
+                )}
+
+                {wargaming.token && (
+                  <Flex align="center" gap="2" justify="center">
+                    <WargamingIcon width={15} height={15} />
+                    <Text>
+                      <Suspense
+                        fallback={<Skeleton height="1em" width="5rem" />}
+                      >
+                        <WargamingAccountName />
+                      </Suspense>
+                    </Text>
+                    <Button
+                      color="red"
+                      variant="ghost"
+                      onClick={() => {
+                        $wargamingLogin.setKey('token', undefined);
+                      }}
+                    >
+                      Logout
+                    </Button>
+                  </Flex>
+                )}
+              </Flex>
+            )}
+
+            {!patreon.token !== !wargaming.token && (
+              <Inset side="x">
+                <Separator my="4" size="4" />
+              </Inset>
+            )}
+
+            {(!patreon.token || !wargaming.token) && (
+              <Flex direction="column" gap="2">
+                <Text align="center" color="gray">
+                  Log in with...
+                </Text>
+
+                {!patreon.token && (
+                  <Link style={{ width: '100%' }} href={patreonLoginUrl()}>
+                    <Button style={{ width: '100%' }} color="tomato">
+                      <PatreonIcon width={15} height={15} /> Patreon
+                    </Button>
+                  </Link>
+                )}
+
+                {!wargaming.token && <WargamingLoginButton />}
+              </Flex>
+            )}
+          </Popover.Content>
+        </BlitzKitTheme>
+      </Popover.Root>
+    </App.Provider>
+  );
+}

packages/website/src/components/Plugs.tsx

@@ -10,19 +10,13 @@ import {
   Separator,
   Text,
 } from '@radix-ui/themes';
-import { useLayoutEffect, useState } from 'react';
 import { useAdExempt } from '../hooks/useAdExempt';
 import { $patreonLogin } from '../stores/patreonLogin';
 import { PatreonIcon } from './PatreonIcon';
 
 export function Plugs() {
-  const [hasPatreon, setHasPatreon] = useState(false);
   const exempt = useAdExempt();
-  const patreonLogin = useStore($patreonLogin);
-
-  useLayoutEffect(() => {
-    setHasPatreon(patreonLogin !== undefined);
-  }, [patreonLogin]);
+  const hasPatreon = useStore($patreonLogin).token !== undefined;
 
   return (
     <Flex

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

@@ -1,11 +1,11 @@
 import { Flex, Heading } from '@radix-ui/themes';
-import { Characteristics } from '../Characteristics';
-import { Consumables } from '../Characteristics/components/Consumables';
-import { Equipment } from '../Characteristics/components/Equipment';
-import { Miscellaneous } from '../Characteristics/components/Miscellaneous';
-import { Modules } from '../Characteristics/components/Modules';
-import { Provisions } from '../Characteristics/components/Provisions';
-import { Skills } from '../Characteristics/components/Skills';
+import { Characteristics } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics';
+import { Consumables } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Consumables';
+import { Equipment } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Equipment';
+import { Miscellaneous } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Miscellaneous';
+import { Modules } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Modules';
+import { Provisions } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Provisions';
+import { Skills } from '../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
   return (

packages/website/src/components/Tankopedia/GameModeSection.tsx

@@ -5,14 +5,14 @@ import {
   provisionDefinitions,
 } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { use } from 'react';
 import * as Duel from '../../../../../../stores/duel';
 
+const awaitedGameDefinitions = await gameDefinitions;
+const awaitedConsumableDefinitions = await consumableDefinitions;
+const awaitedProvisionDefinitions = await provisionDefinitions;
+
 export function GameModeSection() {
   const tank = Duel.use((state) => state.protagonist.tank);
-  const awaitedGameDefinitions = use(gameDefinitions);
-  const awaitedConsumableDefinitions = use(consumableDefinitions);
-  const awaitedProvisionDefinitions = use(provisionDefinitions);
   const roles = Object.entries(tank.roles);
 
   if (roles.length === 0) return null;

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx

@@ -1,9 +1,8 @@
 import { asset } from '@blitzkit/core';
 import { IconButton } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
-import { useArmor } from '../../../../../../../../../hooks/useArmor';
-import * as Duel from '../../../../../../../../../stores/duel';
-import * as TankopediaEphemeral from '../../../../../../../../../stores/tankopediaEphemeral';
+import { useArmor } from '../../../../../../hooks/useArmor';
+import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemeral';
 
 export function DynamicArmorSwitcher() {
   const tank = Duel.use((state) => state.protagonist.tank);

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

@@ -1,4 +1,11 @@
-import { asset, imgur, resolveNearPenetration, resolvePenetrationCoefficient, TIER_ROMAN_NUMERALS, uniqueGuns } from '@blitzkit/core';
+import {
+  asset,
+  imgur,
+  resolveNearPenetration,
+  resolvePenetrationCoefficient,
+  TIER_ROMAN_NUMERALS,
+  uniqueGuns,
+} from '@blitzkit/core';
 import {
   CameraIcon,
   CopyIcon,
@@ -21,24 +28,22 @@ import {
   Tooltip,
 } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
-import { RefObject, useEffect, useState } from 'react';
-import { useEquipment } from '../../../../../../../../hooks/useEquipment';
-import { useFullScreen } from '../../../../../../../../hooks/useFullScreen';
-import { useFullscreenAvailability } from '../../../../../../../../hooks/useFullscreenAvailability';
-import * as App from '../../../../../../../../stores/app';
-import * as Duel from '../../../../../../../../stores/duel';
-import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral';
-import * as TankopediaPersistent from '../../../../../../../../stores/tankopediaPersistent';
-import { TankopediaDisplay } from '../../../../../../../../stores/tankopediaPersistent/constants';
-import { TankSearch } from '../../../../../components/TankSearch';
-import { ENVIRONMENTS } from '../../../Lighting';
-import { QuickInputs } from '../../../QuickInputs';
-import { Thicknesses } from '../../../Thicknesses';
+import { type RefObject, useState } from 'react';
+import { ENVIRONMENTS } from '../../../../../constants/lightingEnvironments';
+import { Pose, poseEvent } from '../../../../../core/blitzkit/pose';
+import { useEquipment } from '../../../../../hooks/useEquipment';
+import { useFullScreen } from '../../../../../hooks/useFullScreen';
+import { useFullscreenAvailability } from '../../../../../hooks/useFullscreenAvailability';
+import { useStoreBoolean } from '../../../../../hooks/useStoreBoolean';
+import { useStoreKey } from '../../../../../hooks/useStoreKey';
+import { $app } from '../../../../../stores/app';
+import { $tankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
+import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants';
+import type { ThicknessRange } from '../../../../Armor/components/StaticArmor';
+import { ModuleButton } from '../../../../ModuleButtons/ModuleButton';
+import { SmallTankIcon } from '../../../../SmallTankIcon';
+import { TankSearch } from '../../../../TankSearch';
 import { DynamicArmorSwitcher } from './components/DynamicArmorSwitcher';
-import { ThicknessRange } from '../../../../../../../../components/Armor/components/StaticArmor';
-import { ModuleButton } from '../../../../../../../../components/ModuleButtons/ModuleButton';
-import { SmallTankIcon } from '../../../../../../../../components/SmallTankIcon';
-import { poseEvent, Pose } from '../../../../../../../../core/blitzkit/pose';
 
 interface OptionsProps {
   thicknessRange: ThicknessRange;
@@ -46,31 +51,23 @@ interface OptionsProps {
 }
 
 export function Options({ thicknessRange, canvas }: OptionsProps) {
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
-  const displayRaw = TankopediaPersistent.use((state) => state.display);
-  const [display, setDisplay] = useState<TankopediaDisplay>(
-    TankopediaDisplay.Model,
-  );
+  // const { display } = useStore($tankopediaPersistent, { keys: ['display'] });
+  const display = useStoreKey($tankopediaPersistent, 'display');
   const isFullScreen = useFullScreen();
-  const showGrid = TankopediaPersistent.use(
-    (state) => state.model.visual.showGrid,
+  const showGrid = useStoreBoolean($tankopediaPersistent, 'showGrid');
+  const showEnvironment = useStoreBoolean(
+    $tankopediaPersistent,
+    'showEnvironment',
   );
-  const showEnvironment = TankopediaPersistent.use(
-    (state) => state.model.visual.showEnvironment,
+  const greenPenetration = useStoreBoolean(
+    $tankopediaPersistent,
+    'greenPenetration',
   );
-  const greenPenetration = TankopediaPersistent.use(
-    (state) => state.model.visual.greenPenetration,
-  );
-  const wireframe = TankopediaPersistent.use(
-    (state) => state.model.visual.wireframe,
-  );
-  const opaque = TankopediaPersistent.use((state) => state.model.visual.opaque);
+  const wireframe = useStoreBoolean($tankopediaPersistent, 'wireframe');
+  const opaque = useStoreBoolean($tankopediaPersistent, 'opaque');
   const fullScreenAvailable = useFullscreenAvailability();
-  const environment = TankopediaPersistent.use(
-    (state) => state.model.visual.environment,
-  );
-  const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const environment = useStoreKey($tankopediaPersistent, 'environment');
+  const developerMode = useStoreBoolean($app, 'developerMode');
   const protagonistTank = Duel.use((state) => state.protagonist.tank);
   const antagonistGun = Duel.use((state) => state.antagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
@@ -82,8 +79,6 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
   const hasEnhancedArmor = useEquipment(110);
   const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
 
-  useEffect(() => setDisplay(displayRaw), [displayRaw]);
-
   return (
     <>
       <QuickInputs />

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

@@ -23,12 +23,12 @@ import * as Duel from '../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../stores/tankopediaEphemeral';
 import * as TankopediaPersistent from '../../../../../../stores/tankopediaPersistent';
 import { TankopediaDisplay } from '../../../../../../stores/tankopediaPersistent/constants';
-import { Controls } from '../Control';
-import { Lighting } from '../Lighting';
-import { SceneProps } from '../SceneProps';
-import { AutoClear } from './AutoClear';
-import { ModelLoader } from './components/ModelLoader';
-import { TankModel } from './components/TankModel';
+import { Controls } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Control';
+import { Lighting } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Lighting';
+import { SceneProps } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/SceneProps';
+import { AutoClear } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Model/AutoClear';
+import { ModelLoader } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader';
+import { TankModel } from '../../../../../../website-legacy/src/app/tools/tankopedia/[id]/components/Model/components/TankModel';
 
 interface TankSandboxProps {
   thicknessRange: ThicknessRange;

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

@@ -1,20 +1,25 @@
 import { resolveNearPenetration, tankDefinitions } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
-import { ThicknessRange } from '../../../../../../components/Armor/components/StaticArmor';
-import { classIcons } from '../../../../../../components/ClassIcon';
-import { NAVBAR_HEIGHT } from '../../../../../../components/Navbar/index.css';
-import { Var } from '../../../../../../core/radix/var';
-import { useFullScreen } from '../../../../../../hooks/useFullScreen';
-import * as Duel from '../../../../../../stores/duel';
-import { TankSandbox } from './TankSandbox';
-import { TankSandboxLoader } from './TankSandboxLoader';
+import { Suspense, useEffect, useMemo, useRef, useState } from 'react';
+import { NAVBAR_HEIGHT } from '../../../constants/navbar';
+import { Var } from '../../../core/radix/var';
+import { useFullScreen } from '../../../hooks/useFullScreen';
+import type { ThicknessRange } from '../../Armor/components/StaticArmor';
+import { classIcons } from '../../ClassIcon';
 import { Options } from './components/Options';
+import { TankSandbox } from './components/TankSandbox';
+import { TankSandboxLoader } from './components/TankSandboxLoader';
 
-export function HeroSection() {
+const awaitedTankDefinitions = await tankDefinitions;
+
+interface HeroSectionProps {
+  id: number;
+}
+
+export function HeroSection({ id }: HeroSectionProps) {
   const canvas = useRef<HTMLCanvasElement>(null);
   const isFullScreen = useFullScreen();
-  const protagonist = Duel.use((state) => state.protagonist.tank);
+  const protagonist = awaitedTankDefinitions[id];
   const Icon = classIcons[protagonist.class];
   const [dummyLoader, setDummyLoader] = useState(true);
   const treeColor =
@@ -23,7 +28,6 @@ export function HeroSection() {
       : protagonist.treeType === 'premium'
         ? 'amber'
         : undefined;
-  const awaitedTankDefinitions = use(tankDefinitions);
   const thicknessRange = useMemo(() => {
     const entries = Object.values(awaitedTankDefinitions);
     const filtered = entries.filter(

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

@@ -7,7 +7,7 @@ import {
 import strings from '@blitzkit/core/lang/en-US.json';
 import { ChevronLeftIcon, MixIcon, UpdateIcon } from '@radix-ui/react-icons';
 import { Button, Code, Dialog, Flex } from '@radix-ui/themes';
-import { use, useState } from 'react';
+import { useState } from 'react';
 import { classIcons } from '../../../../../../../components/ClassIcon';
 import { Link } from '../../../../../../../components/Link';
 import { ScienceIcon } from '../../../../../../../components/ScienceIcon';
@@ -18,6 +18,9 @@ import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphe
 import { TankSearch } from '../../../../components/TankSearch';
 import { Listing } from './components/Listing';
 
+const awaitedProvisionDefinitions = await provisionDefinitions;
+const awaitedModelDefinitions = await modelDefinitions;
+
 export function MetaSection() {
   const developerMode = App.useDeferred(false, (state) => state.developerMode);
   const protagonist = Duel.use((state) => state.protagonist.tank);
@@ -29,9 +32,7 @@ export function MetaSection() {
       : [protagonist.id, antagonist.id];
   const mutateDuel = Duel.useMutation();
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
-  const awaitedProvisionDefinitions = use(provisionDefinitions);
   const [showSwapDialog, setShowSwapDialog] = useState(false);
-  const awaitedModelDefinitions = use(modelDefinitions);
 
   return (
     <Flex justify="center" align="center">

packages/website/src/components/Tankopedia/TechTreeSection/components/Node.tsx

@@ -7,7 +7,6 @@ import {
 } from '@blitzkit/core';
 import { Box, Flex, Text } from '@radix-ui/themes';
 import Link from 'next/link';
-import { use } from 'react';
 import * as TankopediaEphemeral from '../../../../../../../../stores/tankopediaEphemeral';
 
 interface NodeProps {
@@ -16,12 +15,13 @@ interface NodeProps {
   highlight?: boolean;
 }
 
+const awaitedTankDefinitions = await tankDefinitions;
+const awaitedAverageDefinitions = await averageDefinitions;
+
 export function Node({ id, highlight, nextIds }: NodeProps) {
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
-  const awaitedTankDefinitions = use(tankDefinitions);
   const tank = awaitedTankDefinitions[id];
   const nextTanks = nextIds?.map((id) => awaitedTankDefinitions[id]);
-  const awaitedAverageDefinitions = use(averageDefinitions);
   const thisTankXp =
     tank.xp === undefined || tank.tier === 1 ? 0 : tank.xp! / xpMultiplier;
   const nextTanksXp = nextTanks?.reduce(

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

@@ -1,7 +1,7 @@
 import { asset, imgur, tankDefinitions } from '@blitzkit/core';
 import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
-import { Fragment, use, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import * as Duel from '../../../../../../../stores/duel';
 import * as TankopediaEphemeral from '../../../../../../../stores/tankopediaEphemeral';
 import { Arrow } from './components/Arrow';
@@ -9,13 +9,14 @@ import { Node } from './components/Node';
 
 type Line = number[];
 
+const awaitedTankDefinitions = await tankDefinitions;
+
 export const XP_MULTIPLIERS = [1, 2, 3, 4, 5, 10];
 
 export function TechTreeSection() {
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const master = Duel.use((state) => state.protagonist.tank);
-  const awaitedTankDefinitions = use(tankDefinitions);
   const container = useRef<HTMLDivElement>(null);
   const lines = useMemo(() => {
     function extend(line: Line): Line[] {

packages/website/src/components/WargamingAccountName.tsx

@@ -6,21 +6,21 @@ import usePromise from 'react-promise-suspense';
 import { $wargamingLogin } from '../stores/wargamingLogin';
 
 export function WargamingAccountName() {
-  const wargamingLogin = useStore($wargamingLogin);
+  const wargaming = useStore($wargamingLogin);
   const promise = useMemo(async () => {
-    if (!wargamingLogin.token) return null;
+    if (!wargaming.token) return null;
 
     const data = await getAccountInfo(
-      idToRegion(Number(wargamingLogin.id)),
-      Number(wargamingLogin.id),
+      idToRegion(Number(wargaming.id)),
+      Number(wargaming.id),
       [],
       {
-        access_token: wargamingLogin.token,
+        access_token: wargaming.token,
       },
     );
 
     return data?.nickname as string | undefined;
-  }, [wargamingLogin.token]);
+  }, [wargaming]);
   const nickname = usePromise(() => promise, []);
 
   return nickname ?? <Text color="gray">Unknown Account</Text>;

packages/website/src/core/blitz/correctZYTuple.ts

@@ -1,4 +1,4 @@
-import { Vector3, Vector3Tuple } from 'three';
+import { Vector3, type Vector3Tuple } from 'three';
 import { rotateDavaVector } from './rotateDavaVector';
 
 export function correctZYTuple(tuple: Vector3Tuple) {

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

@@ -1,4 +1,4 @@
-import { GroupProps, MeshProps } from '@react-three/fiber';
+import type { GroupProps, MeshProps } from '@react-three/fiber';
 import { Mesh, Object3D } from 'three';
 
 export function jsxTree(

packages/website/src/core/zustand/createContextualStore.tsx

@@ -20,7 +20,7 @@ type ExtractState<S> = S extends {
   ? T
   : never;
 
-export function createContextualSafeStore<
+export function createContextualStore<
   Store extends StoreApi<unknown>,
   InitData,
 >(initialize: (data: InitData) => Store) {

packages/website/src/hooks/useAdExempt.ts

@@ -5,17 +5,17 @@ import { $patreonLogin } from '../stores/patreonLogin';
 let cache: Record<string, boolean | Promise<boolean>> = {};
 
 export function useAdExempt() {
-  const patreonLogin = useStore($patreonLogin);
+  const patreon = useStore($patreonLogin);
   const [exempt, setExempt] = useState(false);
 
   useLayoutEffect(() => {
     (async () => {
-      if (!patreonLogin.token) return setExempt(false);
+      if (!patreon.token) return setExempt(false);
 
-      if (!(patreonLogin.token in cache)) {
-        cache[patreonLogin.token] = new Promise<boolean>(async (resolve) => {
+      if (!(patreon.token in cache)) {
+        cache[patreon.token] = new Promise<boolean>(async (resolve) => {
           const response = await fetch(
-            `/api/patreon/membership/${patreonLogin.token}`,
+            `/api/patreon/membership/${patreon.token}`,
             { cache: 'force-cache' },
           );
 
@@ -24,12 +24,12 @@ export function useAdExempt() {
           const json = await response.json();
           const exempt = typeof json === 'boolean' && json;
 
-          cache[patreonLogin.token] = exempt;
+          cache[patreon.token] = exempt;
           resolve(exempt);
         });
       }
 
-      setExempt(await cache[patreonLogin.token]);
+      setExempt(await cache[patreon.token]);
     })();
   }, []);
 

packages/website/src/hooks/useArmor.ts

@@ -1,6 +1,6 @@
 import { asset } from '@blitzkit/core';
-import { ObjectMap, useLoader } from '@react-three/fiber';
-import { GLTF, GLTFLoader } from 'three-stdlib';
+import { type ObjectMap, useLoader } from '@react-three/fiber';
+import { type GLTF, GLTFLoader } from 'three-stdlib';
 
 const cache: Record<
   number,

packages/website/src/hooks/useAveragesExclusionRatio.ts

@@ -1,10 +1,9 @@
 import { averageDefinitions, discoveredIdsDefinitions } from '@blitzkit/core';
-import { use } from 'react';
+
+const awaitedDiscoveredIdsDefinitions = await discoveredIdsDefinitions;
+const awaitedAverageDefinitions = await averageDefinitions;
 
 export function useAveragesExclusionRatio() {
-  const awaitedDiscoveredIdsDefinitions = use(discoveredIdsDefinitions);
-  const awaitedAverageDefinitions = use(averageDefinitions);
-
   return (
     awaitedDiscoveredIdsDefinitions.count /
     awaitedAverageDefinitions.samples.total

packages/website/src/hooks/useEccentricity.ts

@@ -1,6 +1,6 @@
 import { TankDefinition, tankDefinitions } from '@blitzkit/core';
 import { sumBy } from 'lodash-es';
-import { use, useMemo } from 'react';
+import { useMemo } from 'react';
 import * as Duel from '../stores/duel';
 
 export enum UseEccentricityMode {
@@ -8,8 +8,9 @@ export enum UseEccentricityMode {
   Class,
 }
 
+const awaitedTankDefinitions = await tankDefinitions;
+
 export function useEccentricity(mode: UseEccentricityMode) {
-  const awaitedTankDefinitions = use(tankDefinitions);
   const tank = Duel.use((state) => state.protagonist.tank);
   const similarTanks = useMemo(
     () =>

packages/website/src/hooks/useEquipment.ts

@@ -1,9 +1,10 @@
 import { equipmentDefinitions } from '@blitzkit/core';
-import { use, useMemo } from 'react';
+import { useMemo } from 'react';
 import * as Duel from '../stores/duel';
 
+const awaitedEquipmentDefinitions = await equipmentDefinitions;
+
 export function useEquipment(id: number, antagonist = false) {
-  const awaitedEquipmentDefinitions = use(equipmentDefinitions);
   const member = Duel.use(
     (state) => state[antagonist ? 'antagonist' : 'protagonist']!,
   );

packages/website/src/hooks/useModel.ts

@@ -1,7 +1,7 @@
 import { asset } from '@blitzkit/core';
-import { ObjectMap, useLoader } from '@react-three/fiber';
+import { type ObjectMap, useLoader } from '@react-three/fiber';
 import { Mesh, MeshStandardMaterial } from 'three';
-import { GLTF, GLTFLoader } from 'three-stdlib';
+import { type GLTF, GLTFLoader } from 'three-stdlib';
 
 const cache: Record<
   number,

packages/website/src/hooks/useOnScreen.ts

@@ -1,4 +1,4 @@
-import { RefObject, useEffect, useRef, useState } from 'react';
+import { type RefObject, useEffect, useRef, useState } from 'react';
 
 /**
  * Thanks GuCier!

packages/website/src/hooks/useStoreBoolean.ts

@@ -0,0 +1,10 @@
+import { type StoreKeys } from '@nanostores/react';
+import type { Store } from 'nanostores';
+import { useStoreKey } from './useStoreKey';
+
+export function useStoreBoolean<Type>(
+  store: Store<Type>,
+  key: StoreKeys<Store<Type>>,
+) {
+  return Boolean(useStoreKey(store, key));
+}

packages/website/src/hooks/useStoreKey.ts

@@ -0,0 +1,10 @@
+import { useStore, type StoreKeys } from '@nanostores/react';
+import type { Store } from 'nanostores';
+
+export function useStoreKey<Type, Key extends StoreKeys<Store<Type>>>(
+  store: Store<Type>,
+  key: Key,
+) {
+  const state = useStore(store, { keys: [key] });
+  return state[key];
+}

packages/website/src/hooks/useTankTransform.ts

@@ -1,5 +1,5 @@
 import { I_HAT, J_HAT, K_HAT } from '@blitzkit/core';
-import { RefObject, useEffect } from 'react';
+import { type RefObject, useEffect } from 'react';
 import { Euler, Group, Vector3 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
 import { correctZYTuple } from '../core/blitz/correctZYTuple';

packages/website/src/pages/tools/tankopedia/[id]/index.astro

@@ -0,0 +1,17 @@
+---
+import { tankDefinitions } from '@blitzkit/core';
+import type { GetStaticPaths } from 'astro';
+import { Page } from './index';
+
+export const getStaticPaths = (async () => {
+  const awaitedTankDefinitions = await tankDefinitions;
+
+  return Object.values(awaitedTankDefinitions).map((tank) => ({
+    params: { id: tank.id },
+  }));
+}) satisfies GetStaticPaths;
+
+const { id } = Astro.params;
+---
+
+<Page id={id} client:load />

packages/website/src/pages/tools/tankopedia/[id]/index.tsx

@@ -0,0 +1,25 @@
+import { PageWrapper } from '../../../../components/PageWrapper';
+import { HeroSection } from '../../../../components/Tankopedia/HeroSection';
+
+interface PageProps {
+  id: number;
+}
+
+export function Page({ id }: PageProps) {
+  return (
+    <PageWrapper p="0" noMaxWidth color="purple" size={1600} gap="9">
+      <HeroSection id={id} />
+      {/* <ShotDisplaySection />
+      <MetaSection />
+      <TechTreeSection />
+      {!exempt && <AdMidSectionResponsive />}
+      <CalloutsSection />
+      <CharacteristicsSection />
+      {!exempt && <AdMidSectionResponsive />}
+      <GameModeSection />
+      <VideoSection />
+      <HistorySection />
+      {!exempt && <AdMidSectionResponsive mb="6" />} */}
+    </PageWrapper>
+  );
+}

packages/website/src/stores/app/index.ts

@@ -1,23 +1,14 @@
-import lodash from 'lodash-es';
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../../core/zustand/createContextualStore';
 
-export interface App {
+interface AppStore {
   developerMode: boolean;
   policiesAgreementIndex: number;
 }
 
-export const { Provider, use, useMutation, useStore, useDeferred } =
-  createContextualSafeStore(() =>
-    create<App>()(
-      persist(
-        (set) => ({
+export const App = createContextualStore(() =>
+  create<AppStore>()(() => ({
     developerMode: false,
-          policiesAgreementIndex: -1,
-          logins: {},
-        }),
-        { name: 'app', merge: (a, b) => lodash.merge(b, a) },
-      ),
-    ),
+    policiesAgreementIndex: 0,
+  })),
 );

packages/website/src/stores/compareEphemeral.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
-import { DuelMember } from './duel';
+import { createContextualStore } from '../core/zustand/createContextualStore';
+import type { DuelMember } from './duel';
 
 export interface CompareMember extends DuelMember {
   key: string;
@@ -14,8 +15,8 @@ export interface CompareEphemeral {
   };
 }
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(() =>
+export const { Provider, use, useMutation, useStore } = createContextualStore(
+  () =>
     create<CompareEphemeral>()(() => ({
       crewSkills: {},
       members: [],

packages/website/src/stores/comparePersistent.ts

@@ -1,15 +1,15 @@
 import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
-import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../core/zustand/createContextualStore';
 
 export type DeltaMode = 'none' | 'percentage' | 'absolute';
 export interface ComparePersistent {
   deltaMode: DeltaMode;
 }
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(() =>
+export const { Provider, use, useMutation, useStore } = createContextualStore(
+  () =>
     create<ComparePersistent>()(
       persist(
         subscribeWithSelector<ComparePersistent>(() => ({

packages/website/src/stores/duel/index.ts

@@ -10,7 +10,7 @@ import {
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { tankToDuelMember } from '../../core/blitzkit/tankToDuelMember';
-import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../../core/zustand/createContextualStore';
 
 type EquipmentMatrixItem = -1 | 0 | 1;
 type EquipmentMatrixRow = [
@@ -41,13 +41,12 @@ export interface DuelMember {
   cooldownBooster: number;
 }
 
-export interface Duel {
+export interface DuelStore {
   protagonist: DuelMember;
   antagonist: DuelMember;
 }
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(
+export const Duel = createContextualStore(
   ({
     tank,
     provisionDefinitions,
@@ -57,8 +56,8 @@ export const { Provider, use, useMutation, useStore } =
   }) => {
     const protagonist = tankToDuelMember(tank, provisionDefinitions);
 
-      return create<Duel>()(
-        subscribeWithSelector<Duel>(() => ({
+    return create<DuelStore>()(
+      subscribeWithSelector<DuelStore>(() => ({
         protagonist,
         antagonist: protagonist,
       })),

packages/website/src/stores/embedState/index.ts

@@ -1,6 +1,6 @@
 import * as radixColors from '@radix-ui/colors';
 import { create } from 'zustand';
-import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../../core/zustand/createContextualStore';
 import {
   type EmbedConfigItemType,
   EmbedItemType,
@@ -104,7 +104,6 @@ export type EmbedConfigItem = (
 
 export type EmbedState = Record<string, EmbedConfigItem['default']>;
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore((init: EmbedState) =>
-    create<EmbedState>()(() => init),
+export const { Provider, use, useMutation, useStore } = createContextualStore(
+  (init: EmbedState) => create<EmbedState>()(() => init),
 );

packages/website/src/stores/session.ts

@@ -2,7 +2,7 @@ import { IndividualTankStats, Region, Stat } from '@blitzkit/core';
 import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../core/zustand/createContextualStore';
 
 interface SessionBase {
   columns: Stat[];
@@ -24,8 +24,8 @@ interface SessionNotTracking extends SessionBase {
 
 type Session = SessionTracking | SessionNotTracking;
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(() =>
+export const { Provider, use, useMutation, useStore } = createContextualStore(
+  () =>
     create<Session>()(
       persist(
         (set) => ({

packages/website/src/stores/tankPerformancePersistent/index.ts

@@ -1,15 +1,15 @@
 import lodash from 'lodash-es';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
-import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../../core/zustand/createContextualStore';
 import { PlayerCountPeriod } from './constants';
 
 export interface TankPerformancePersistent {
   playerCountPeriod: PlayerCountPeriod;
 }
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(() =>
+export const { Provider, use, useMutation, useStore } = createContextualStore(
+  () =>
     create<TankPerformancePersistent>()(
       persist(
         subscribeWithSelector<TankPerformancePersistent>(() => ({

packages/website/src/stores/tankPerformanceSort/index.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../../core/zustand/createContextualStore';
 import { TankPerformanceSortTypeNames } from './constants';
 
 export type TankPerformanceSortType = keyof typeof TankPerformanceSortTypeNames;
@@ -9,8 +9,8 @@ export interface TankPerformanceSort {
   direction: -1 | 1;
 }
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(() =>
+export const { Provider, use, useMutation, useStore } = createContextualStore(
+  () =>
     create<TankPerformanceSort>()(() => ({
       type: 'winrate',
       direction: -1,

packages/website/src/stores/tankopediaEphemeral.ts

@@ -1,34 +1,11 @@
-import { ModelDefinition } from '@blitzkit/core';
+import type { ModelDefinition } from '@blitzkit/core';
 import { Vector3 } from 'three';
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
-import { XP_MULTIPLIERS } from '../app/tools/tankopedia/[id]/components/Model/TechTreeSection';
 import { ArmorType } from '../components/Armor/components/SpacedArmorScene';
-import { ExternalModuleVariant } from '../components/Armor/components/SpacedArmorSceneComponent';
-import { createContextualSafeStore } from '../core/zustand/createContextualSafeStore';
-
-interface TankopediaEphemeral {
-  shot?: Shot;
-  skills: Record<string, number>;
-  controlsEnabled: boolean;
-  model: ModelDefinition;
-  editStatic: boolean;
-  highlightArmor?: {
-    editingPlate: boolean;
-    name: string;
-    point: Vector3;
-    thickness: number;
-    color: string;
-  } & (
-    | {
-        type: ArmorType.Primary | ArmorType.Spaced;
-        thicknessAngled: number;
-        angle: number;
-      }
-    | { type: ArmorType.External }
-  );
-  xpMultiplier: (typeof XP_MULTIPLIERS)[number];
-}
+import type { ExternalModuleVariant } from '../components/Armor/components/SpacedArmorSceneComponent';
+import type { XP_MULTIPLIERS } from '../components/Tankopedia/TechTreeSection';
+import { createContextualStore } from '../core/zustand/createContextualStore';
 
 export interface ShotLayerBase {
   index: number;
@@ -89,8 +66,8 @@ export type ArmorPiercingLayer =
       gap: number;
     };
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore((model: ModelDefinition) =>
+export const TankopediaEphemeral = createContextualStore(
+  (model: ModelDefinition) =>
     create<TankopediaEphemeral>()(
       subscribeWithSelector<TankopediaEphemeral>(() => ({
         editStatic: false,
@@ -101,3 +78,26 @@ export const { Provider, use, useMutation, useStore } =
       })),
     ),
 );
+
+interface TankopediaEphemeral {
+  shot?: Shot;
+  skills: Record<string, number>;
+  controlsEnabled: boolean;
+  model: ModelDefinition;
+  editStatic: boolean;
+  highlightArmor?: {
+    editingPlate: boolean;
+    name: string;
+    point: Vector3;
+    thickness: number;
+    color: string;
+  } & (
+    | {
+        type: ArmorType.Primary | ArmorType.Spaced;
+        thicknessAngled: number;
+        angle: number;
+      }
+    | { type: ArmorType.External }
+  );
+  xpMultiplier: (typeof XP_MULTIPLIERS)[number];
+}

packages/website/src/stores/tankopediaPersistent/index.ts

@@ -1,17 +1,15 @@
-import type { TankClass, Tier, TreeType } from '@blitzkit/core';
-import lodash from 'lodash-es';
+import * as lodash from 'lodash-es';
 import { create } from 'zustand';
-import { persist, subscribeWithSelector } from 'zustand/middleware';
+import { persist } from 'zustand/middleware';
 import { ENVIRONMENTS } from '../../constants/lightingEnvironments';
-import { createContextualSafeStore } from '../../core/zustand/createContextualSafeStore';
+import { createContextualStore } from '../../core/zustand/createContextualStore';
 import { SORT_NAMES, TankopediaDisplay } from './constants';
 
 export type TankopediaSortBy = keyof typeof SORT_NAMES;
 export type TankopediaSortDirection = 'ascending' | 'descending';
 export type TankopediaTestTankDisplay = 'include' | 'exclude' | 'only';
-export interface TankopediaPersistent {
-  model: {
-    visual: {
+
+export interface TankopediaPersistentStore {
   wireframe: boolean;
   opaque: boolean;
   environment: (typeof ENVIRONMENTS)[number];
@@ -21,55 +19,34 @@ export interface TankopediaPersistent {
   showSpacedArmor: boolean;
   showExternalModules: boolean;
   showPrimaryArmor: boolean;
-    };
-  };
+
   sort: {
     by: TankopediaSortBy;
     direction: TankopediaSortDirection;
   };
-  filters: {
-    tiers: Tier[];
-    types: TankClass[];
-    treeTypes: TreeType[];
-    nations: string[];
-    test: TankopediaTestTankDisplay;
-    page: number;
-  };
+
   display: TankopediaDisplay;
 }
 
-export const { Provider, use, useMutation, useStore } =
-  createContextualSafeStore(() =>
-    create<TankopediaPersistent>()(
+export const TankopediaPersistent = createContextualStore(() =>
+  create<TankopediaPersistentStore>()(
     persist(
-        subscribeWithSelector<TankopediaPersistent>(() => ({
-          model: {
-            visual: {
-              showSpacedArmor: true,
-              showExternalModules: true,
-              showPrimaryArmor: true,
+      (set) => ({
         wireframe: false,
         opaque: false,
         environment: ENVIRONMENTS[0],
         showGrid: true,
-              greenPenetration: false,
-              showEnvironment: false,
-            },
-          },
+        greenPenetration: true,
+        showEnvironment: true,
+        showSpacedArmor: true,
+        showExternalModules: true,
+        showPrimaryArmor: true,
         sort: {
           by: 'meta.none',
-            direction: 'descending',
-          },
-          filters: {
-            tiers: [],
-            types: [],
-            treeTypes: [],
-            nations: [],
-            test: 'include',
-            page: 0,
+          direction: 'ascending',
         },
         display: TankopediaDisplay.Model,
-        })),
+      }),
       { name: 'tankopedia', merge: (a, b) => lodash.merge(b, a) },
     ),
   ),