fix: keys

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

@@ -216,7 +216,7 @@ export function PrimaryArmorSceneComponent({
           return (
             <mesh
               {...props}
-              key={key}
+              key={`${key}-exclude`}
               renderOrder={0}
               material={excludeMaterial}
             />
@@ -226,7 +226,12 @@ export function PrimaryArmorSceneComponent({
       {jsxTree(node, {
         mesh(_, props, key) {
           return (
-            <mesh {...props} key={key} renderOrder={1} material={material} />
+            <mesh
+              {...props}
+              key={`${key}-include`}
+              renderOrder={1}
+              material={material}
+            />
           );
         },
       })}

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

@@ -74,7 +74,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           return (
             <SpacedArmorSceneComponent
               scene={scene}
-              key={node.uuid}
+              key={`${node.uuid}-hull`}
               type={spaced ? ArmorType.Spaced : ArmorType.Primary}
               thickness={thickness}
               node={node}
@@ -93,7 +93,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
         return (
           <SpacedArmorSceneComponent
             scene={scene}
-            key={node.uuid}
+            key={`${node.uuid}-track`}
             type={ArmorType.External}
             thickness={trackModelDefinition.thickness}
             variant="track"
@@ -127,7 +127,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
               <group position={turretOrigin}>
                 <SpacedArmorSceneComponent
                   scene={scene}
-                  key={node.uuid}
+                  key={`${node.uuid}-turret`}
                   type={spaced ? ArmorType.Spaced : ArmorType.Primary}
                   thickness={thickness}
                   node={node}
@@ -158,7 +158,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
               return null;
 
             return (
-              <group position={hullOrigin} key={node.uuid}>
+              <group position={hullOrigin} key={`${node.uuid}-gun-spaced}`}>
                 <group position={turretOrigin.clone().add(gunOrigin)}>
                   <SpacedArmorSceneComponent
                     scene={scene}
@@ -185,7 +185,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
             return (
               <SpacedArmorSceneComponent
                 scene={scene}
-                key={node.uuid}
+                key={`${node.uuid}-gun-external`}
                 type={ArmorType.External}
                 thickness={gunModelDefinition.thickness}
                 variant="gun"

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

@@ -115,11 +115,17 @@ export function SpacedArmorSubExternal({
   return (
     <>
       {jsxTree(node, {
+        group(_, props, key) {
+          return (
+            <group {...props} key={`${key}-spaced-sub-external-exclude`} />
+          );
+        },
+
         mesh(_, props, key) {
           return (
             <mesh
               {...props}
-              key={key}
+              key={`${key}-spaced-sub-external-exclude`}
               renderOrder={3}
               material={
                 new MeshBasicMaterial({
@@ -142,9 +148,20 @@ export function SpacedArmorSubExternal({
       })}
 
       {jsxTree(node, {
+        group(_, props, key) {
+          return (
+            <group {...props} key={`${key}-spaced-sub-external-include`} />
+          );
+        },
+
         mesh(_, props, key) {
           return (
-            <mesh {...props} key={key} renderOrder={4} material={material} />
+            <mesh
+              {...props}
+              key={`${key}-spaced-sub-external-include`}
+              renderOrder={4}
+              material={material}
+            />
           );
         },
       })}

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

@@ -125,11 +125,15 @@ export function SpacedArmorSubSpaced({
   return (
     <>
       {jsxTree(node, {
+        group(_, props, key) {
+          return <group {...props} key={`${key}-spaced-sub-spaced-exclude`} />;
+        },
+
         mesh(_, props, key) {
           return (
             <mesh
               {...props}
-              key={key}
+              key={`${key}-spaced-sub-spaced-exclude`}
               renderOrder={2}
               material={material}
               onClick={() => {}}
@@ -145,11 +149,15 @@ export function SpacedArmorSubSpaced({
       })}
 
       {jsxTree(node, {
+        group(_, props, key) {
+          return <group {...props} key={`${key}-spaced-sub-spaced-include`} />;
+        },
+
         mesh(_, props, key) {
           return (
             <mesh
               {...props}
-              key={key}
+              key={`${key}-spaced-sub-spaced-include`}
               renderOrder={5}
               material={depthWriteMaterial}
             />

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

@@ -373,11 +373,11 @@ export function SpacedArmorSceneComponent({
     <>
       {props.type === ArmorType.Primary &&
         jsxTree(node, {
-          mesh(mesh, props, key) {
+          mesh(_, props, key) {
             return (
               <mesh
                 {...props}
-                key={key}
+                key={`${key}-spaced-component`}
                 renderOrder={0}
                 material={omitMaterial}
                 userData={

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

@@ -25,6 +25,12 @@ export function InitialFogReveal() {
 
       fog.near = near;
       fog.far = far;
+
+      if (x >= 1) {
+        fog.near = forNear0;
+        fog.far = fogFar0;
+        clearInterval(interval);
+      }
     }, 1000 / 60);
 
     return () => clearInterval(interval);

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

@@ -70,8 +70,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
       if (rawDisplay === display) return;
 
       const t0 = Date.now();
-
+      const interval = setInterval(() => {
-      const interval = setInterval((e) => {
         const t = (Date.now() - t0) / 1000;
         const x = t / fogAnimationTime;
         const y = Math.cbrt(-2 * Math.abs(x - 0.5)) + 1;

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

@@ -4,6 +4,7 @@ import { times } from 'lodash-es';
 import { Suspense, useEffect, useMemo, useRef } from 'react';
 import { NAVBAR_HEIGHT } from '../../../constants/navbar';
 import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { Var } from '../../../core/radix/var';
 import { useFullScreen } from '../../../hooks/useFullScreen';
 import { useLocale } from '../../../hooks/useLocale';
 import { Duel } from '../../../stores/duel';
@@ -107,6 +108,19 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
               left={disturbed ? '0' : { initial: '0', md: '12.5%' }}
               style={{ transitionDuration: '200ms' }}
             >
+              {!revealed && (
+                <Spinner
+                  style={{
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                    width: Var('space-6'),
+                    height: Var('space-6'),
+                  }}
+                />
+              )}
+
               {/* {skeleton && <TankSandboxLoader id={protagonist.id} />} */}
 
               <Suspense>
@@ -147,21 +161,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
               }
               style={{ transitionDuration: '200ms', position: 'relative' }}
             >
-              <Icon
+              <Icon width="1em" height="1em" />
-                width="1em"
-                height="1em"
-                style={{ opacity: revealed ? 1 : 0 }}
-              />
-              <Spinner
-                style={{
-                  position: 'absolute',
-                  top: '0',
-                  left: '0',
-                  width: '1em',
-                  height: '1em',
-                  opacity: revealed ? 0 : 1,
-                }}
-              />
             </Heading>
 
             <Heading
@@ -179,14 +179,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
             </Heading>
           </Flex>
 
-          <Box
+          <Box ml="3">
-            ml="3"
-            style={{
-              transitionDuration: '200ms',
-              opacity: revealed ? 1 : 0,
-              transform: revealed ? 'translateY(0)' : 'translateY(-100%)',
-            }}
-          >
             <Text
               color="gray"
               size={{ initial: '3', lg: disturbed ? '4' : '5' }}

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

@@ -1,4 +1,4 @@
-import type { MeshProps, Object3DProps } from '@react-three/fiber';
+import type { GroupProps, MeshProps } from '@react-three/fiber';
 import type { ReactNode } from 'react';
 import { Mesh, Object3D } from 'three';
 
@@ -6,11 +6,7 @@ export function jsxTree(
   node: Object3D,
   mergers?: {
     mesh?: (mesh: Mesh, props: MeshProps, key: string) => ReactNode;
-    group?: (
+    group?: (object3d: Object3D, props: GroupProps, key: string) => ReactNode;
-      object3d: Object3D,
-      props: Object3DProps,
-      key: string,
-    ) => ReactNode;
   },
 ): ReactNode {
   if (node instanceof Mesh) {