feat: screenshot button

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -1,7 +1,7 @@
 import { ChevronLeftIcon, MixIcon } from '@radix-ui/react-icons';
 import { Box, Button, Flex, Heading, Text } from '@radix-ui/themes';
 import Link from 'next/link';
-import { Suspense, use, useEffect, useMemo, useState } from 'react';
+import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
 import { classIcons } from '../../../../../../components/ClassIcon';
 import { ScienceIcon } from '../../../../../../components/ScienceIcon';
 import { ThicknessRange } from '../../../../../../components/StaticArmor';
@@ -20,6 +20,7 @@ interface HeroSectionProps {
 }
 
 export function HeroSection({ id }: HeroSectionProps) {
+  const canvas = useRef<HTMLCanvasElement>(null);
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const antagonist = Duel.use((state) => state.antagonist.tank);
   const compareTanks =
@@ -169,11 +170,11 @@ export function HeroSection({ id }: HeroSectionProps) {
                   />
                 }
               >
-                <TankSandbox thicknessRange={thicknessRange} />
+                <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
               </Suspense>
             </Box>
 
-            <Options thicknessRange={thicknessRange} />
+            <Options canvas={canvas} thicknessRange={thicknessRange} />
           </Box>
         </Box>
       </Flex>

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -1,5 +1,11 @@
 import { Canvas } from '@react-three/fiber';
-import { Suspense, useEffect, useRef } from 'react';
+import {
+  forwardRef,
+  Suspense,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
 import { Armor } from '../../../../../../components/Armor';
 import { ArmorPlateDisplay } from '../../../../../../components/Armor/components/ArmorPlateDisplay';
 import { ShotDisplay } from '../../../../../../components/Armor/components/ShotDisplay';
@@ -26,7 +32,8 @@ interface TankSandboxProps {
   thicknessRange: ThicknessRange;
 }
 
-export function TankSandbox({ thicknessRange }: TankSandboxProps) {
+export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
+  ({ thicknessRange }, ref) => {
     const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
     const canvas = useRef<HTMLCanvasElement>(null);
     const hasImprovedVerticalStabilizer = useEquipment(122);
@@ -38,6 +45,8 @@ export function TankSandbox({ thicknessRange }: TankSandboxProps) {
     const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
     const display = TankopediaPersistent.use((state) => state.display);
 
+    useImperativeHandle(ref, () => canvas.current!, []);
+
     function handlePointerDown() {
       window.addEventListener('pointermove', handlePointerMove);
       window.addEventListener('pointerup', handlePointerUp);
@@ -146,7 +155,11 @@ export function TankSandbox({ thicknessRange }: TankSandboxProps) {
     return (
       <Canvas
         frameloop="demand"
-      gl={{ clippingPlanes: Object.freeze([]), localClippingEnabled: true }}
+        gl={{
+          clippingPlanes: Object.freeze([]),
+          localClippingEnabled: true,
+          preserveDrawingBuffer: true,
+        }}
         shadows
         ref={canvas}
         onPointerDown={handlePointerDown}
@@ -176,4 +189,5 @@ export function TankSandbox({ thicknessRange }: TankSandboxProps) {
         </Suspense>
       </Canvas>
     );
-}
+  },
+);

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -1,4 +1,5 @@
 import {
+  CameraIcon,
   EnterFullScreenIcon,
   ExitFullScreenIcon,
   EyeOpenIcon,
@@ -19,7 +20,7 @@ import {
   Tooltip,
 } from '@radix-ui/themes';
 import { invalidate } from '@react-three/fiber';
-import { useEffect, useState } from 'react';
+import { RefObject, useEffect, useState } from 'react';
 import { ModuleButton } from '../../../../../../../components/ModuleButtons/ModuleButton';
 import { SmallTankIcon } from '../../../../../../../components/SmallTankIcon';
 import { ThicknessRange } from '../../../../../../../components/StaticArmor';
@@ -45,9 +46,10 @@ import { Thicknesses } from '../../Thicknesses';
 
 interface OptionsProps {
   thicknessRange: ThicknessRange;
+  canvas: RefObject<HTMLCanvasElement>;
 }
 
-export function Options({ thicknessRange }: OptionsProps) {
+export function Options({ thicknessRange, canvas }: OptionsProps) {
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
   const displayRaw = TankopediaPersistent.use((state) => state.display);
@@ -73,6 +75,7 @@ export function Options({ thicknessRange }: OptionsProps) {
     (state) => state.model.visual.environment,
   );
   const developerMode = App.useDeferred(false, (state) => state.developerMode);
+  const protagonist = Duel.use((state) => state.protagonist.tank);
   const antagonistGun = Duel.use((state) => state.antagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
   const [antagonistSelectorOpen, setAntagonistSelectorOpen] = useState(false);
@@ -122,12 +125,9 @@ export function Options({ thicknessRange }: OptionsProps) {
         <Flex
           gap="2"
           direction="column"
-          style={{
+          top="50%"
-            position: 'absolute',
+          right="3"
-            right: 16,
+          style={{ position: 'absolute', transform: 'translateY(-50%)' }}
-            top: '50%',
-            transform: 'translateY(-50%)',
-          }}
           align="end"
         >
           <Text color="gray" size={{ initial: '1', sm: '2' }}>
@@ -302,6 +302,24 @@ export function Options({ thicknessRange }: OptionsProps) {
         </Flex>
       )}
 
+      <Box position="absolute" bottom="3" right="3">
+        <IconButton
+          size="3"
+          variant="soft"
+          onClick={() => {
+            if (!canvas.current) return;
+
+            const anchor = document.createElement('a');
+
+            anchor.setAttribute('download', `${protagonist.name}.png`);
+            anchor.setAttribute('href', canvas.current.toDataURL('image/png'));
+            anchor.click();
+          }}
+        >
+          <CameraIcon />
+        </IconButton>
+      </Box>
+
       <Flex
         style={{
           position: 'absolute',