feat: some simplification

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

@@ -104,6 +104,7 @@ export function Lighting() {
             castShadow={highGraphics}
             decay={1}
             color="#ffffff"
+            angle={0}
           />
         );
       })}

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

@@ -174,6 +174,8 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           outline: naked ? "1rem red solid" : undefined,
         }}
       >
+        <Lighting />
+
         {!naked && <SceneProps />}
         {(display === TankopediaDisplay.Model ||
           (display === TankopediaDisplay.DynamicArmor &&
@@ -190,7 +192,6 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
           {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)"
+            ? "calc(100svh - 8rem)"
-              : {
+            : {
-                  initial: "28rem",
+                initial: "28rem",
-                  md: "calc(100svh - 14rem)",
+                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
+            <Box width="100%" height="100%" position="relative">
-              width="100%"
-              height="100%"
-              position="relative"
-              style={{
-                transitionDuration: "1s",
-              }}
-            >
               <Box
-                style={{
+                position="absolute"
-                  width: "100%",
+                width="100%"
-                  height: "100%",
+                height="100%"
-                  transitionDuration: "2s",
+                top="0"
-                  opacity: revealed ? 1 : 0,
+                left="0"
-                  filter: disturbed
-                    ? undefined
-                    : `drop-shadow(0 1rem 1rem black)`,
-                }}
               >
-                <Suspense>
+                {!skeleton && (
-                  {!skeleton && (
+                  <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
-                    <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                )}
-                  )}
-                </Suspense>
               </Box>
             </Box>