revive sandbox

packages/website/src/components/Scroller/index.module.css

@@ -61,8 +61,10 @@
     .content {
       flex: 1 1 auto;
       min-height: 0;
+
       overflow-x: hidden;
       overflow-y: auto;
+
       padding-bottom: 0;
     }
 

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

@@ -1,10 +1,4 @@
-import {
-  forwardRef,
-  Suspense,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-} from "react";
+import { Suspense, useEffect, useRef } from "react";
 import { applyPitchYawLimits } from "../../core/blitz/applyPitchYawLimits";
 import { modelTransformEvent } from "../../core/blitzkit/modelTransform";
 import { Pose, poseEvent } from "../../core/blitzkit/pose";
@@ -14,6 +8,7 @@ import { useModel } from "../../hooks/useModel";
 import { Tankopedia } from "../../stores/tankopedia";
 import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
 import { TankopediaDisplay } from "../../stores/tankopediaPersistent/constants";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 import { ArmorPlateDisplay } from "../ArmorPlateDisplay";
 import { CanvasAutoClear } from "../CanvasAutoClear";
 import { CanvasControl } from "../CanvasControl";
@@ -27,19 +22,18 @@ import { StaticArmor, type ThicknessRange } from "../StaticArmor";
 import { TankModel } from "../TankModel";
 import styles from "./index.module.css";
 
-interface TankSandboxProps {
+type TankSandboxProps = MaybeSkeletonComponentProps & {
   thicknessRange: ThicknessRange;
-}
+};
 
-export const TankopediaSandbox = forwardRef<
-  HTMLCanvasElement,
-  TankSandboxProps
->(({ thicknessRange }, ref) => {
+export function TankopediaSandbox({
+  skeleton,
+  thicknessRange,
+}: TankSandboxProps) {
   const canvas = useRef<HTMLCanvasElement>(null);
   const hasImprovedVerticalStabilizer = useEquipment("protagonist", 122);
   const hasDownImprovedVerticalStabilizer = useEquipment("protagonist", 124);
 
-  const tank = useDuel("protagonist", DuelModule.Tank);
   const gun = useDuel("protagonist", DuelModule.Gun);
   const turret = useDuel("protagonist", DuelModule.Turret);
 
@@ -47,13 +41,6 @@ export const TankopediaSandbox = forwardRef<
   const turretModelDefinition = model.turrets[turret.id];
   const gunModelDefinition = turretModelDefinition.guns[gun.id];
   const display = Tankopedia.use((state) => state.display);
-  const hideTankModelUnderArmor = TankopediaPersistent.use(
-    (state) => state.hideTankModelUnderArmor,
-  );
-
-  const { hasPbr } = useModel(tank.id);
-
-  useImperativeHandle(ref, () => canvas.current!, []);
 
   function handlePointerDown() {
     window.addEventListener("pointermove", handlePointerMove);
@@ -169,29 +156,47 @@ export const TankopediaSandbox = forwardRef<
           });
         }}
       >
-        <Lighting hasPbr={hasPbr} />
-
-        <SceneProps />
-        {(display === TankopediaDisplay.Model ||
-          (display === TankopediaDisplay.DynamicArmor &&
-            !hideTankModelUnderArmor)) && <TankModel />}
-
-        <ShotDisplay />
-        <ArmorPlateDisplay />
-        <CanvasAutoClear />
-
-        <Suspense>
-          {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
-          <CanvasControl />
-
-          {display === TankopediaDisplay.DynamicArmor && <DynamicArmor />}
-          {display === TankopediaDisplay.StaticArmor && (
-            <StaticArmor thicknessRange={thicknessRange} />
-          )}
-        </Suspense>
-
-        <InitialCameraAligner />
+        {!skeleton && <Content thicknessRange={thicknessRange} />}
       </SmartCanvas>
     </div>
   );
-});
+}
+
+function Content({ thicknessRange }: { thicknessRange: ThicknessRange }) {
+  const display = Tankopedia.use((state) => state.display);
+  const tank = useDuel("protagonist", DuelModule.Tank);
+
+  const { hasPbr } = useModel(tank.id);
+
+  const hideTankModelUnderArmor = TankopediaPersistent.use(
+    (state) => state.hideTankModelUnderArmor,
+  );
+
+  return (
+    <>
+      <Lighting hasPbr={hasPbr} />
+
+      <SceneProps />
+
+      {(display === TankopediaDisplay.Model ||
+        (display === TankopediaDisplay.DynamicArmor &&
+          !hideTankModelUnderArmor)) && <TankModel />}
+
+      <ShotDisplay />
+      <ArmorPlateDisplay />
+      <CanvasAutoClear />
+
+      <Suspense>
+        {/* Controls within Suspense to allow for frame-perfect start of camera auto-rotate */}
+        <CanvasControl />
+
+        {display === TankopediaDisplay.DynamicArmor && <DynamicArmor />}
+        {display === TankopediaDisplay.StaticArmor && (
+          <StaticArmor thicknessRange={thicknessRange} />
+        )}
+      </Suspense>
+
+      <InitialCameraAligner />
+    </>
+  );
+}

packages/website/src/pages/[...chunk_default]/[...locale]/tanks/[slug]/_index.tsx

@@ -5,6 +5,7 @@ import type { ThicknessRange } from "../../../../../components/StaticArmor";
 import { TankopediaCharacteristics } from "../../../../../components/TankopediaCharacteristics";
 import { TankopediaGameModeAbilities } from "../../../../../components/TankopediaGameModeAbilities";
 import { TankopediaLoadout } from "../../../../../components/TankopediaLoadout";
+import { TankopediaSandbox } from "../../../../../components/TankopediaSandbox";
 import { defaultEqualizer } from "../../../../../config/equalizer";
 import { withErrorWrapper } from "../../../../../hocs/withErrorWrapper";
 import { withLocale } from "../../../../../hocs/withLocale";
@@ -60,7 +61,10 @@ export const Page = withErrorWrapper(
         </Scroller>
 
         <div className={styles.sandbox}>
-          {/* {!skeleton && <TankopediaSandbox thicknessRange={thicknessRange} />} */}
+          <TankopediaSandbox
+            skeleton={skeleton}
+            thicknessRange={thicknessRange}
+          />
           <TankopediaCharacteristics characteristics={characteristics} />
           <TankopediaGameModeAbilities />
         </div>