Merge branch 'main' into dev

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

@@ -67,7 +67,9 @@ export const PrimaryArmorScene = memo(() => {
       <group ref={turretContainer}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`
+            `turret_${turretModelDefinition.model_id
+              .toString()
+              .padStart(2, "0")}`
           );
           const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx

@@ -4,6 +4,7 @@ import {
   resolvePenetrationCoefficient,
 } from "@blitzkit/core";
 import { invalidate, useFrame } from "@react-three/fiber";
+import type { QuicklimeEvent } from "quicklime";
 import { useEffect } from "react";
 import {
   MeshBasicMaterial,
@@ -21,6 +22,7 @@ import { jsxTree } from "../../../../core/blitzkit/jsxTree";
 import { Duel, type EquipmentMatrix } from "../../../../stores/duel";
 import { Tankopedia } from "../../../../stores/tankopedia";
 import { TankopediaPersistent } from "../../../../stores/tankopediaPersistent";
+import { transitionEvent } from "../../../Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
 import fragmentShader from "./shaders/fragment.glsl?raw";
 import vertexShader from "./shaders/vertex.glsl?raw";
 import { spacedArmorRenderTarget } from "./target";
@@ -72,6 +74,8 @@ export function PrimaryArmorSceneComponent({
         resolution: { value: new Vector2() },
         spacedArmorBuffer: { value: null },
         spacedArmorDepth: { value: null },
+
+        opacity: { value: 0 },
       },
     ]),
   });
@@ -154,6 +158,10 @@ export function PrimaryArmorSceneComponent({
       if (!noInvalidate) invalidate();
     }
 
+    function handleTransitionEvent(event: QuicklimeEvent<number>) {
+      material.uniforms.opacity.value = event.data;
+    }
+
     handleShellChange();
     handleGreenPenetrationChange(TankopediaPersistent.state.greenPenetration);
     handleAdvancedHighlightingChange(
@@ -164,6 +172,8 @@ export function PrimaryArmorSceneComponent({
     handleProtagonistEquipmentChange(Duel.state.protagonist.equipmentMatrix);
     handleAntagonistEquipmentChange(Duel.state.antagonist.equipmentMatrix);
 
+    transitionEvent.on(handleTransitionEvent);
+
     const unsubscribes = [
       Duel.on((state) => state.antagonist.shell, handleShellChange),
       Tankopedia.on((state) => state.customShell, handleShellChange),
@@ -184,12 +194,13 @@ export function PrimaryArmorSceneComponent({
         (state) => state.antagonist.equipmentMatrix,
         (equipment) => handleAntagonistEquipmentChange(equipment)
       ),
+      () => transitionEvent.off(handleTransitionEvent),
     ];
 
     return () => {
       unsubscribes.forEach((unsubscribe) => unsubscribe());
     };
-  });
+  }, []);
 
   useFrame(({ gl, camera }) => {
     gl.getSize(material.uniforms.resolution.value).multiplyScalar(

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/fragment.glsl

@@ -1,12 +1,9 @@
 precision mediump float;
 
-#define USE_FOG
-
-#include <fog_pars_fragment>
-
 varying vec3 vNormal;
 varying vec3 vViewPosition;
 
+uniform float opacity;
 uniform float thickness;
 uniform float penetration;
 uniform float caliber;
@@ -119,5 +116,5 @@ void main() {
     gl_FragColor = vec4(baseColor, (1.0 - penetrationChance) * alpha);
   }
 
-  #include <fog_fragment>
+  gl_FragColor.a *= opacity;
 }

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/vertex.glsl

@@ -1,9 +1,5 @@
 precision mediump float;
 
-#define USE_FOG
-
-#include <fog_pars_vertex>
-
 varying vec3 vNormal;
 varying vec3 vViewPosition;
 
@@ -14,6 +10,4 @@ void main() {
   vNormal = normalMatrix * normal;
 
   gl_Position = projectionMatrix * mvPosition;
-
-  #include <fog_vertex>
 }

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

@@ -24,6 +24,7 @@ import {
 } from "../../../core/blitzkit/modelTransform";
 import { discardClippingPlane } from "../../../core/three/discardClippingPlane";
 import { Tankopedia } from "../../../stores/tankopedia";
+import { transitionEvent } from "../../Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
 import { ArmorType } from "./SpacedArmorScene";
 import type {
   ArmorUserData,
@@ -108,10 +109,11 @@ export function StaticArmorSceneComponent({
     () =>
       new MeshBasicMaterial({
         color,
-        opacity,
-        transparent: opacity < 1,
+        transparent: true,
         depthWrite,
         ...(props.clip ? { clippingPlanes: [props.clip] } : {}),
+        opacity: 0,
+        userData: { opacity0: opacity },
       }),
     [thickness]
   );
@@ -121,6 +123,8 @@ export function StaticArmorSceneComponent({
         color: color
           .clone()
           .multiplyScalar(props.type === ArmorType.Spaced ? 2 ** 2 : 2 ** -1),
+        opacity: 0,
+        transparent: true,
       }),
     [thickness]
   );
@@ -163,11 +167,22 @@ export function StaticArmorSceneComponent({
       surfaceMaterial.needsUpdate = true;
     }
 
+    function handleTransitionEvent(event: QuicklimeEvent<number>) {
+      surfaceMaterial.opacity = surfaceMaterial.userData.opacity0 * event.data;
+      outlineMaterial.opacity = event.data;
+
+      surfaceMaterial.transparent = surfaceMaterial.opacity < 1;
+      outlineMaterial.transparent = outlineMaterial.opacity < 1;
+    }
+
+    transitionEvent.on(handleTransitionEvent);
+
     const unsubscribes = [
       Tankopedia.on(
         (state) => state.highlightArmor?.name,
         handleHighlightArmor
       ),
+      () => transitionEvent.off(handleTransitionEvent),
     ];
 
     if (props.clip) {

packages/website/src/components/HelpingSpotLight.tsx

@@ -1,3 +1,5 @@
+import { Box, Text } from "@radix-ui/themes";
+import { Html } from "@react-three/drei";
 import { memo, type ComponentProps } from "react";
 
 interface Props extends ComponentProps<"spotLight"> {
@@ -8,10 +10,20 @@ export const HelpingSpotLight = memo<Props>(({ debug, ...props }) => {
   return (
     <>
       {debug && (
-        <mesh position={props.position}>
-          <icosahedronGeometry args={[0.1, 2]} />
-          <meshBasicMaterial color={props.color} />
-        </mesh>
+        <group position={props.position}>
+          <mesh>
+            <icosahedronGeometry args={[0.1, 2]} />
+            <meshBasicMaterial color={props.color} />
+          </mesh>
+
+          <Html center>
+            <Box pb="9">
+              <Text wrap="nowrap">
+                {props.intensity} @ {JSON.stringify(props.userData)}
+              </Text>
+            </Box>
+          </Html>
+        </group>
       )}
 
       <spotLight {...props} />

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

@@ -12,6 +12,7 @@ import {
   EyeOpenIcon,
   ShadowInnerIcon,
   ShadowNoneIcon,
+  SunIcon,
 } from "@radix-ui/react-icons";
 import {
   Button,
@@ -55,7 +56,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
   const hasCustomShell = Tankopedia.use(
     (state) => state.customShell !== undefined
   );
-  const display = Tankopedia.use((state) => state.display);
+  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
   const isFullScreen = useFullScreen();
   const advancedHighlighting = TankopediaPersistent.use(
     (state) => state.advancedHighlighting
@@ -73,6 +74,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
   const { strings, unwrap } = useLocale();
   const revealed = Tankopedia.use((state) => state.revealed);
   const disturbed = Tankopedia.use((state) => state.disturbed);
+  const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
 
   return (
     <>
@@ -84,7 +86,9 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
         gap="2"
         direction="column"
         top="50%"
-        right={display === TankopediaDisplay.DynamicArmor ? "3" : "-4rem"}
+        right={
+          requestedDisplay === TankopediaDisplay.DynamicArmor ? "3" : "-4rem"
+        }
         style={{
           position: "absolute",
           transform: "translateY(-50%)",
@@ -296,7 +300,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
         >
           {disturbed && (
             <>
-              {display === TankopediaDisplay.DynamicArmor && (
+              {requestedDisplay === TankopediaDisplay.DynamicArmor && (
                 <IconButton
                   size="2"
                   highContrast
@@ -349,6 +353,20 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                 </DropdownMenu.Content>
               </DropdownMenu.Root>
 
+              <IconButton
+                size="2"
+                highContrast
+                onClick={() => {
+                  TankopediaPersistent.mutate((draft) => {
+                    draft.highGraphics = !draft.highGraphics;
+                  });
+                }}
+                color={highGraphics ? undefined : "gray"}
+                variant={highGraphics ? "solid" : "surface"}
+              >
+                <SunIcon />
+              </IconButton>
+
               <ScreenshotButton
                 color="gray"
                 size="2"
@@ -384,11 +402,11 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
         <Flex gap="3" align="center" mt="2">
           <SegmentedControl.Root
             variant="classic"
-            value={`${disturbed ? display : -1}`}
+            value={`${disturbed ? requestedDisplay : -1}`}
             onValueChange={(value) => {
               Tankopedia.mutate((draft) => {
                 draft.disturbed = true;
-                draft.display = Number(value);
+                draft.requestedDisplay = Number(value);
               });
             }}
           >
@@ -430,7 +448,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
             </SegmentedControl.Item>
           </SegmentedControl.Root>
 
-          {display === TankopediaDisplay.DynamicArmor && (
+          {requestedDisplay === TankopediaDisplay.DynamicArmor && (
             <Dialog.Root
               open={antagonistSelectorOpen}
               onOpenChange={setAntagonistSelectorOpen}

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

@@ -1,40 +0,0 @@
-import { invalidate, useThree } from "@react-three/fiber";
-import { useEffect } from "react";
-import type { Fog } from "three";
-import { fogAnimationTime, fogFar0, fogFar1, forNear0, forNear1 } from "..";
-import { Tankopedia } from "../../../../../../stores/tankopedia";
-
-export function InitialFogReveal() {
-  const fog = useThree((state) => state.scene.fog as Fog | null);
-
-  useEffect(() => {
-    Tankopedia.mutate((draft) => {
-      draft.revealed = true;
-    });
-
-    if (!fog) return;
-
-    const t0 = Date.now();
-
-    const interval = setInterval(() => {
-      const t = (Date.now() - t0) / 1000;
-      const x = t / fogAnimationTime;
-      const near = forNear1 + (forNear0 - forNear1) * x;
-      const far = fogFar1 + (fogFar0 - fogFar1) * x;
-
-      fog.near = near;
-      fog.far = far;
-      invalidate();
-
-      if (x >= 1) {
-        fog.near = forNear0;
-        fog.far = fogFar0;
-        clearInterval(interval);
-      }
-    }, 1000 / 60);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return null;
-}

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

@@ -1,82 +1,118 @@
-import { useHelper } from "@react-three/drei";
-import { useFrame } from "@react-three/fiber";
+import { useFrame, useThree } from "@react-three/fiber";
 import { times } from "lodash-es";
-import { useRef, useState } from "react";
-import { Color, SpotLight, SpotLightHelper } from "three";
-import { degToRad } from "three/src/math/MathUtils.js";
-import { isHalloween } from "../../../../../../core/blitzkit/isHalloween";
+import { Quicklime } from "quicklime";
+import { useEffect, useRef } from "react";
+import { HemisphereLight, SpotLight, type Group } from "three";
+import { clamp, degToRad, lerp } from "three/src/math/MathUtils.js";
+import { Tankopedia } from "../../../../../../stores/tankopedia";
+import { TankopediaPersistent } from "../../../../../../stores/tankopediaPersistent";
 import { HelpingSpotLight } from "../../../../../HelpingSpotLight";
 
+const ANGLE = Math.PI * 2 ** -2;
+const REVEAL_ANIMATION_TIME = 3;
+const TRANSITION_ANIMATION_TIME = 0.5;
+
 const LIGHTS_COUNT = 5;
+const THETA_OFFSET = degToRad(-152);
 const LIGHT_DISTANCE = 13;
 const LIGHT_HEIGHT_0 = 4;
 const LIGHT_HEIGHT_1 = 2;
-const INTENSITY = 50;
+const INTENSITY_0 = 3.5;
+const INTENSITY_1 = 1.5;
+const HEMISPHERE_INTENSITY = 2;
 
-const N = 128;
-const TARGET_FRAME_RATE = 30;
+export const transitionEvent = new Quicklime<number>(0);
 
 export function Lighting() {
-  const [cast, setCast] = useState(true);
-
+  const wrapper = useRef<Group>(null!);
   const t0 = useRef(0);
-  const topLight = useRef<SpotLight>(null!);
-  const frontLight = useRef<SpotLight>(null!);
+  const transition = useRef(false);
+  const clock = useThree((state) => state.clock);
+  const display = Tankopedia.use((state) => state.display);
+  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
+  const animationTime = useRef(REVEAL_ANIMATION_TIME);
+  const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
 
-  useHelper(topLight, SpotLightHelper, "red");
-  useHelper(frontLight, SpotLightHelper, "green");
+  useEffect(() => {
+    Tankopedia.mutate((draft) => {
+      draft.revealed = true;
+    });
 
-  const last = useRef<number>(0);
-  const samples = useRef<number[]>([]);
+    t0.current = clock.elapsedTime - REVEAL_ANIMATION_TIME;
+  }, []);
 
-  useFrame(({ clock, frameloop }) => {
-    if (frameloop === "never") {
+  useFrame(({ invalidate }) => {
+    if (transition.current) {
+      transition.current = false;
       t0.current = clock.elapsedTime;
-      samples.current = [];
-      return;
-    }
-    if (!cast || clock.elapsedTime - t0.current < TARGET_FRAME_RATE * N) {
-      return;
     }
 
-    const dt = clock.elapsedTime - last.current;
-    last.current = clock.elapsedTime;
+    const x = clamp(
+      (clock.elapsedTime - t0.current) / animationTime.current,
+      0,
+      2
+    );
+    const t = (0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5) ** 2;
 
-    const fps = 1 / dt;
-    samples.current.push(fps);
+    if (t !== transitionEvent.last) {
+      transitionEvent.dispatch(t);
+    }
 
-    if (samples.current.length > N) samples.current.shift();
+    for (const child of wrapper.current.children) {
+      if (child instanceof SpotLight) {
+        child.angle = ANGLE * t;
+      } else if (child instanceof HemisphereLight) {
+        child.intensity = HEMISPHERE_INTENSITY * t;
+      }
+    }
 
-    const avg =
-      samples.current.reduce((a, b) => a + b, 0) / samples.current.length;
+    if (x < 2) invalidate();
 
-    if (avg < TARGET_FRAME_RATE) setCast(false);
+    if (
+      x > 1 &&
+      Tankopedia.state.display !== Tankopedia.state.requestedDisplay
+    ) {
+      Tankopedia.mutate((draft) => {
+        draft.display = requestedDisplay;
+      });
+    }
   });
 
+  useEffect(() => {
+    if (requestedDisplay === display) return;
+
+    transition.current = true;
+    animationTime.current = TRANSITION_ANIMATION_TIME;
+  }, [requestedDisplay]);
+
   return (
-    <>
+    <group ref={wrapper}>
+      <hemisphereLight intensity={0} color="#ffffff" groundColor="#afafaf" />
+
       {times(LIGHTS_COUNT, (index) => {
         const x = index / (LIGHTS_COUNT - 1);
-        const theta = 2 * Math.PI * (index / LIGHTS_COUNT) - degToRad(152);
+        const theta = 2 * Math.PI * (index / LIGHTS_COUNT) + THETA_OFFSET;
         const position = [
           LIGHT_DISTANCE * Math.sin(theta),
-          LIGHT_HEIGHT_0 * (1 - x) + LIGHT_HEIGHT_1 * x,
+          lerp(LIGHT_HEIGHT_0, LIGHT_HEIGHT_1, x),
           LIGHT_DISTANCE * Math.cos(theta),
         ] as const;
-        const color = new Color();
+        const intensity = lerp(INTENSITY_0, INTENSITY_1, x);
 
         return (
           <HelpingSpotLight
+            userData={{ index }}
             key={index}
             position={position}
-            intensity={INTENSITY}
+            intensity={intensity}
             penumbra={1}
-            castShadow={cast}
-            decay={1}
-            color={color}
+            castShadow={highGraphics}
+            decay={0}
+            color="#ffffff"
+            angle={0}
           />
         );
       })}
-    </>
+    </group>
   );
 }

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

@@ -4,7 +4,7 @@ import { Quicklime, type QuicklimeEvent } from "quicklime";
 import { useEffect, useRef } from "react";
 import { Mesh, MeshStandardMaterial } from "three";
 
-const SIZE = 2 ** 5;
+const SIZE = 2 ** 6;
 
 export const screenshotReadyEvent = new Quicklime(false);
 
@@ -36,6 +36,7 @@ export function SceneProps() {
       receiveShadow
       visible={!screenshotReadyEvent.last!}
       ref={mesh}
+      renderOrder={-1}
     >
       <planeGeometry args={[SIZE, SIZE]} />
       <meshStandardMaterial
@@ -43,7 +44,7 @@ export function SceneProps() {
         ref={material}
         color="black"
         roughness={1}
-        metalness={1}
+        metalness={0}
       />
     </mesh>
   );

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

@@ -106,7 +106,9 @@ export function TankModel() {
           const isTurret = node.name.startsWith("turret_");
           const isCurrentTurret =
             node.name ===
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`;
+            `turret_${turretModelDefinition.model_id
+              .toString()
+              .padStart(2, "0")}`;
           const isVisible = isCurrentTurret;
           const position = new Vector2();
           const delta = new Vector2();

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

@@ -1,12 +1,10 @@
 import { BLITZKIT_TANK_ICON_SIZE } from "@blitzkit/core";
-import { invalidate } from "@react-three/fiber";
 import {
   forwardRef,
   Suspense,
   useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from "react";
 import { Fog } from "three";
 import { applyPitchYawLimits } from "../../../../../core/blitz/applyPitchYawLimits";
@@ -29,26 +27,17 @@ import { SmartCanvas } from "../../../../SmartCanvas";
 import { AutoClear } from "./components/AutoClear";
 import { Controls } from "./components/Control";
 import { InitialAligner } from "./components/InitialAligner";
-import { InitialFogReveal } from "./components/InitialFogReveal";
 import { Lighting } from "./components/Lighting";
 import { SceneProps } from "./components/SceneProps";
 import { TankModel } from "./components/TankModel";
-import { TransitionSkeleton } from "./components/TransitionSkeleton";
 
 interface TankSandboxProps {
   thicknessRange: ThicknessRange;
   naked?: boolean;
 }
 
-export const forNear0 = 30;
-export const fogFar0 = 50;
-export const forNear1 = 0;
-export const fogFar1 = 0;
-export const fogAnimationTime = 2.5;
-
 export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
   ({ thicknessRange, naked }, ref) => {
-    const fog = useRef(new Fog("black", forNear1, fogFar1));
     const canvas = useRef<HTMLCanvasElement>(null);
     const hasImprovedVerticalStabilizer = useEquipment(122);
     const hasDownImprovedVerticalStabilizer = useEquipment(124);
@@ -58,40 +47,11 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
     const turretModelDefinition =
       tankModelDefinition.turrets[protagonistTurret.id];
     const gunModelDefinition = turretModelDefinition.guns[protagonistGun.id];
-    const rawDisplay = Tankopedia.use((state) => state.display);
-    const [display, setDisplay] = useState(rawDisplay);
+    const display = Tankopedia.use((state) => state.display);
     const hideTankModelUnderArmor = TankopediaPersistent.use(
       (state) => state.hideTankModelUnderArmor
     );
 
-    useEffect(() => {
-      if (rawDisplay === display) return;
-
-      const t0 = Date.now();
-      const interval = setInterval(() => {
-        const t = (Date.now() - t0) / 1000;
-        const x = t / fogAnimationTime;
-        const y = Math.sin(Math.PI * x);
-
-        const near = forNear0 + (forNear1 - forNear0) * y;
-        const far = fogFar0 + (fogFar1 - fogFar0) * y;
-
-        fog.current.near = near;
-        fog.current.far = far;
-
-        invalidate();
-
-        if (rawDisplay !== display && x >= 0.5) setDisplay(rawDisplay);
-        if (x >= 1) {
-          fog.current.near = forNear0;
-          fog.current.far = fogFar0;
-          clearInterval(interval);
-        }
-      }, 1000 / 60);
-
-      return () => clearInterval(interval);
-    }, [rawDisplay]);
-
     useImperativeHandle(ref, () => canvas.current!, []);
 
     function handlePointerDown() {
@@ -188,10 +148,12 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
       }
     }, [display]);
 
+    console.log(TankopediaDisplay[display]);
+
     return (
       <SmartCanvas
         ref={canvas}
-        scene={{ fog: naked ? undefined : fog.current }}
+        scene={{ fog: naked ? undefined : new Fog("black", 30, 50) }}
         gl={{
           clippingPlanes: [],
           localClippingEnabled: true,
@@ -212,11 +174,12 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           outline: naked ? "1rem red solid" : undefined,
         }}
       >
+        <Lighting />
+
         {!naked && <SceneProps />}
         {(display === TankopediaDisplay.Model ||
           (display === TankopediaDisplay.DynamicArmor &&
             !hideTankModelUnderArmor)) && <TankModel />}
-        <TransitionSkeleton />
         <ShotDisplay />
         <ArmorPlateDisplay />
         <AutoClear />
@@ -224,13 +187,11 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
         <Suspense>
           {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
           <Controls naked={naked} />
-          <InitialFogReveal />
 
           {display === TankopediaDisplay.DynamicArmor && <Armor />}
           {display === TankopediaDisplay.StaticArmor && (
             <StaticArmor thicknessRange={thicknessRange} />
           )}
-          <Lighting />
         </Suspense>
 
         <InitialAligner />

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

@@ -1,6 +1,6 @@
 import { Box, Flex } from "@radix-ui/themes";
 import { times } from "lodash-es";
-import { Suspense, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
 import { useFullScreen } from "../../../hooks/useFullScreen";
 import { Duel } from "../../../stores/duel";
@@ -99,11 +99,11 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           isFullScreen
             ? "100vh"
             : disturbed
-              ? "calc(100svh - 8rem)"
-              : {
-                  initial: "28rem",
-                  md: "calc(100svh - 14rem)",
-                }
+            ? "calc(100svh - 8rem)"
+            : {
+                initial: "28rem",
+                md: "calc(100svh - 14rem)",
+              }
         }
         maxWidth={isFullScreen ? undefined : "120rem"}
         flexGrow="1"
@@ -120,30 +120,17 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           position="relative"
         >
           <Box position="absolute" width="100%" height="100%" overflow="hidden">
-            <Box
-              width="100%"
-              height="100%"
-              position="relative"
-              style={{
-                transitionDuration: "1s",
-              }}
-            >
+            <Box width="100%" height="100%" position="relative">
               <Box
-                style={{
-                  width: "100%",
-                  height: "100%",
-                  transitionDuration: "2s",
-                  opacity: revealed ? 1 : 0,
-                  filter: disturbed
-                    ? undefined
-                    : `drop-shadow(0 1rem 1rem black)`,
-                }}
+                position="absolute"
+                width="100%"
+                height="100%"
+                top="0"
+                left="0"
               >
-                <Suspense>
-                  {!skeleton && (
-                    <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
-                  )}
-                </Suspense>
+                {!skeleton && (
+                  <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                )}
               </Box>
             </Box>
 

packages/website/src/stores/tankopedia.ts

@@ -100,6 +100,7 @@ interface Tankopedia {
   );
   xpMultiplier: (typeof XP_MULTIPLIERS)[number];
   customShell?: ShellDefinition;
+  requestedDisplay: TankopediaDisplay;
   display: TankopediaDisplay;
   statSearch?: string;
 }
@@ -114,5 +115,6 @@ export const Tankopedia = new Varuna<Tankopedia, ModelDefinition>((model) => ({
   skills: createDefaultSkills(skillDefinitions),
   model,
   xpMultiplier: 1,
+  requestedDisplay: TankopediaDisplay.Model,
   display: TankopediaDisplay.Model,
 }));

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

@@ -15,6 +15,7 @@ export interface TankopediaPersistent {
   showPrimaryArmor: boolean;
   recentlyViewed: number[];
   hideTankModelUnderArmor: boolean;
+  highGraphics: boolean;
 
   sort: {
     by: TankopediaSortBy;
@@ -33,6 +34,7 @@ export const TankopediaPersistent = new Varuna<TankopediaPersistent>(
     showExternalModules: true,
     showPrimaryArmor: true,
     recentlyViewed: [],
+    highGraphics: true,
     sort: {
       by: "meta.none",
       direction: "ascending",