feat: start of custom renders

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

@@ -35,7 +35,11 @@ const ARCADE_MODE_DISTANCE = 19;
 const ARCADE_MODE_ANGLE = degToRad(10);
 const ARCADE_MODE_FOV = 54;
 
-export function Controls() {
+interface ControlsProps {
+  naked?: boolean;
+}
+
+export function Controls({ naked }: ControlsProps) {
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const display = TankopediaEphemeral.use((state) => state.display);
   const duelStore = Duel.useStore();
@@ -82,7 +86,7 @@ export function Controls() {
     antagonistModelDefinition.turret_origin.y +
     antagonistTurretModelDefinition.gun_origin.y;
   const [autoRotate, setAutoRotate] = useState(
-    display !== TankopediaDisplay.ShootingRange,
+    display !== TankopediaDisplay.ShootingRange && !naked,
   );
   const gunHeight =
     protagonistHullOrigin.y +

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

@@ -31,10 +31,11 @@ import { TankModel } from './components/TankModel';
 
 interface TankSandboxProps {
   thicknessRange: ThicknessRange;
+  naked?: boolean;
 }
 
 export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
-  ({ thicknessRange }, ref) => {
+  ({ thicknessRange, naked }, ref) => {
     const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
     const canvas = useRef<HTMLCanvasElement>(null);
     const hasImprovedVerticalStabilizer = useEquipment(122);
@@ -179,10 +180,15 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
             draft.highlightArmor = undefined;
           });
         }}
-        style={{ userSelect: 'none' }}
+        style={{
+          userSelect: 'none',
+          width: naked ? 640 : '100%',
+          height: naked ? 480 : '100%',
+          outline: naked ? '1rem red solid' : undefined,
+        }}
       >
-        <Controls />
+        <Controls naked={naked} />
-        <SceneProps />
+        {!naked && <SceneProps />}
         {display !== TankopediaDisplay.StaticArmor && <TankModel />}
         <ShotDisplay />
         <ArmorPlateDisplay />

packages/website/src/pages/api/tankopedia/tank-icon/[id]/_index.tsx

@@ -0,0 +1,40 @@
+import { TankSandbox } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox';
+import { awaitableModelDefinitions } from '../../../../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from '../../../../../core/awaitables/provisionDefinitions';
+import { awaitableTankDefinitions } from '../../../../../core/awaitables/tankDefinitions';
+import { App } from '../../../../../stores/app';
+import { Duel } from '../../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../../stores/tankopediaEphemeral';
+import { TankopediaPersistent } from '../../../../../stores/tankopediaPersistent';
+
+const [provisionDefinitions, tankDefinitions, modelDefinitions] =
+  await Promise.all([
+    awaitableProvisionDefinitions,
+    awaitableTankDefinitions,
+    awaitableModelDefinitions,
+  ]);
+
+interface PageProps {
+  id: number;
+}
+
+export function Page({ id }: PageProps) {
+  const tank = tankDefinitions.tanks[id];
+  const model = modelDefinitions.models[id];
+
+  return (
+    <App.Provider>
+      <TankopediaPersistent.Provider>
+        <Duel.Provider data={{ provisionDefinitions, tank }}>
+          <TankopediaEphemeral.Provider data={model}>
+            <Content />
+          </TankopediaEphemeral.Provider>
+        </Duel.Provider>
+      </TankopediaPersistent.Provider>
+    </App.Provider>
+  );
+}
+
+function Content() {
+  return <TankSandbox naked thicknessRange={{ value: 0 }} />;
+}

packages/website/src/pages/api/tankopedia/tank-icon/[id]/index.astro

@@ -0,0 +1,30 @@
+---
+import { assertSecret } from '@blitzkit/core';
+import type { GetStaticPaths } from 'astro';
+import { getStaticPaths as tankopediaGetStaticPaths } from '../../../../tools/tankopedia/[id]/index.astro';
+import { Page } from './_index';
+
+export const getStaticPaths = (async () => {
+  if (assertSecret(import.meta.env.MODE) === 'development') {
+    return await tankopediaGetStaticPaths();
+  } else {
+    return [];
+  }
+}) satisfies GetStaticPaths;
+
+const { id } = Astro.params;
+---
+
+<html>
+  <head>
+    <style is:global>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <Page {id} client:load />
+  </body>
+</html>