feat: cooler header

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

@@ -64,6 +64,7 @@ export function InfoWithDelta({
       : (stats[props.value] as number);
   const delta = useDelta(uhWhatDoICallThisVariable);
   const protagonistTank = Duel.use((state) => state.protagonist.tank);
+  const model = modelDefinitions.models[protagonistTank.id];
   const others = useMemo(() => {
     const defaultSkills = createDefaultSkills(skillDefinitions);
 
@@ -78,7 +79,12 @@ export function InfoWithDelta({
           relativeAgainst === TankopediaRelativeAgainst.All,
       )
       .map((tank) => {
-        const member = tankToDuelMember(tank, provisionDefinitions);
+        const thisTankModel = modelDefinitions.models[tank.id];
+        const member = tankToDuelMember(
+          tank,
+          thisTankModel,
+          provisionDefinitions,
+        );
 
         return tankCharacteristics(
           {

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

@@ -1,7 +1,7 @@
 import { OrbitControls } from '@react-three/drei';
 import { invalidate, useThree } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { PerspectiveCamera, Vector3 } from 'three';
 import { OrbitControls as OrbitControlsClass } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils.js';
@@ -81,16 +81,14 @@ export function Controls({ naked }: ControlsProps) {
     protagonistTrackModelDefinition.origin.y +
     antagonistModelDefinition.turret_origin.y +
     antagonistTurretModelDefinition.gun_origin.y;
-  const [autoRotate, setAutoRotate] = useState(
-    display !== TankopediaDisplay.ShootingRange && !naked,
-  );
+  const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
   const gunHeight =
     protagonistHullOrigin.y +
     protagonistTurretOrigin.y +
     protagonistGunOrigin.y;
   const inspectModeInitialPosition = [
     -8,
-    gunHeight + (naked ? 10 : 4),
+    gunHeight + (naked ? 10 : 2),
     -13,
   ] as const;
   const protagonistGunOriginOnlyY = new Vector3(
@@ -217,10 +215,6 @@ export function Controls({ naked }: ControlsProps) {
   useEffect(() => {
     let isInitialIteration = true;
 
-    function handleDisturbance() {
-      setAutoRotate(false);
-    }
-
     function handleKeyDown(event: KeyboardEvent) {
       if (display !== TankopediaDisplay.ShootingRange || event.repeat) return;
 
@@ -254,8 +248,14 @@ export function Controls({ naked }: ControlsProps) {
       event.preventDefault();
     }
 
-    poseEvent.on(handleDisturbance);
-    canvas.addEventListener('pointerdown', handleDisturbance);
+    function disturb() {
+      mutateTankopediaEphemeral((draft) => {
+        draft.disturbed = true;
+      });
+    }
+
+    poseEvent.on(disturb);
+    canvas.addEventListener('pointerdown', disturb);
     window.addEventListener('keydown', handleKeyDown);
     canvas.addEventListener('wheel', handleWheel);
     document.body.addEventListener('scroll', handleScroll);
@@ -319,7 +319,7 @@ export function Controls({ naked }: ControlsProps) {
     const unsubscribeDisplay = tankopediaEphemeralStore.subscribe(
       (state) => state.display === TankopediaDisplay.ShootingRange,
       () => {
-        handleDisturbance();
+        disturb();
         updateCamera();
       },
     );
@@ -330,8 +330,8 @@ export function Controls({ naked }: ControlsProps) {
     );
 
     return () => {
-      canvas.removeEventListener('pointerdown', handleDisturbance);
-      poseEvent.off(handleDisturbance);
+      canvas.removeEventListener('pointerdown', disturb);
+      poseEvent.off(disturb);
       unsubscribeDisplay();
       unsubscribeShootingRangeZoom();
       window.removeEventListener('keydown', handleKeyDown);
@@ -347,7 +347,7 @@ export function Controls({ naked }: ControlsProps) {
       ref={orbitControls}
       enabled={tankopediaEphemeralStore.getState().controlsEnabled}
       enableDamping={false}
-      autoRotate={autoRotate}
+      autoRotate={!disturbed}
       autoRotateSpeed={1 / 4}
     />
   );

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

@@ -18,6 +18,7 @@ import { TankSandboxLoader } from './components/TankSandboxLoader';
 const tankDefinitions = await awaitableTankDefinitions;
 
 export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
+  const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
   const { unwrap } = useLocale();
   const canvas = useRef<HTMLCanvasElement>(null);
   const isFullScreen = useFullScreen();
@@ -73,10 +74,13 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   }, []);
 
   return (
-    <Flex justify="center" style={{ backgroundColor: 'black' }}>
+    <Flex justify="center">
       <Flex
         direction={{ initial: 'column', md: 'row' }}
-        style={{ zIndex: isFullScreen ? 2 : undefined }}
+        style={{
+          zIndex: isFullScreen ? 2 : undefined,
+          backgroundColor: 'black',
+        }}
         height={
           isFullScreen ? '100vh' : `calc(100vh - ${NAVBAR_HEIGHT}px - 8rem)`
         }
@@ -94,22 +98,33 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           left={{ initial: '0', md: '5', lg: '9' }}
           py="4"
           top={{ initial: '8', md: '50%' }}
-          style={{ transform: 'translateY(-50%)' }}
+          style={{ transform: 'translateY(-50%)', transitionDuration: '200ms' }}
           direction="column"
           align={{ initial: 'center', md: 'start' }}
+          gap={disturbed ? '0' : '2'}
         >
           <Flex align="center" gap="3">
             <Heading
               color={treeColor}
               trim="end"
-              size={{ initial: '7', lg: '6' }}
+              size={
+                disturbed
+                  ? { initial: '7', lg: '8' }
+                  : { initial: '8', lg: '9' }
+              }
+              style={{ transitionDuration: '200ms' }}
             >
               <Icon width="1em" height="1em" />
             </Heading>
 
             <Heading
               weight="bold"
-              size={{ initial: '7', lg: '8' }}
+              size={
+                disturbed
+                  ? { initial: '7', lg: '8' }
+                  : { initial: '8', lg: '9' }
+              }
+              style={{ transitionDuration: '200ms' }}
               wrap="nowrap"
               color={treeColor}
             >
@@ -117,14 +132,21 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
             </Heading>
           </Flex>
 
-          <Text
-            color="gray"
-            size={{ initial: '3', lg: '4' }}
-            weight="light"
-            ml={{ initial: '0', md: '7', lg: '7' }}
-          >
-            BlitzKit Tankopedia
-          </Text>
+          <Box ml="3">
+            <Text
+              color="gray"
+              size={{ initial: '3', lg: disturbed ? '4' : '5' }}
+              weight="light"
+              ml={{
+                initial: '0',
+                md: '8',
+                lg: disturbed ? 'var(--font-size-8)' : 'var(--font-size-9)',
+              }}
+              style={{ transitionDuration: '200ms' }}
+            >
+              BlitzKit Tankopedia
+            </Text>
+          </Box>
         </Flex>
 
         <Box
@@ -134,8 +156,14 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           flexShrink="0"
           position="relative"
         >
-          <Box position="absolute" width="100%" height="100%">
-            <Box width="100%" height="100%">
+          <Box position="absolute" width="100%" height="100%" overflow="hidden">
+            <Box
+              width="100%"
+              height="100%"
+              position="relative"
+              left={disturbed ? '0' : '12.5%'}
+              style={{ transitionDuration: '200ms' }}
+            >
               {skeleton && <TankSandboxLoader id={protagonist.id} />}
 
               <Suspense fallback={<TankSandboxLoader id={protagonist.id} />}>

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

@@ -95,6 +95,8 @@ export function MetaSection() {
               <TankSearch
                 compact
                 onSelect={(tank) => {
+                  const model = modelDefinitions.models[tank.id];
+
                   setShowSwapDialog(false);
                   mutateTankopediaEphemeral((draft) => {
                     draft.model = modelDefinitions.models[tank.id];
@@ -102,6 +104,7 @@ export function MetaSection() {
                   mutateDuel((draft) => {
                     draft.protagonist = tankToDuelMember(
                       tank,
+                      model,
                       provisionDefinitions,
                     );
                   });