feat: better ui sizing

src/app/tools/tankopedia/[id]/components/RotationInputs.tsx

@@ -46,115 +46,120 @@ export function RotationInputs({
 
   return (
     <Flex
-      gap="2"
+      justify="center"
       align="center"
       style={{
+        width: 'calc(100% - 16px)',
         position: 'absolute',
-        left: 16,
-        bottom: 16,
+        left: 8,
+        bottom: 8,
       }}
     >
-      <TextField.Root
-        variant="surface"
+      <Flex
+        gap="2"
         style={{
-          width: 115,
+          width: 352,
         }}
       >
-        <TextField.Slot>Hull</TextField.Slot>
-        <TextField.Input
-          defaultValue={Math.round(model.hullYaw * (180 / Math.PI))}
-          onBlur={() => {
-            const normalized = normalizeAnglePI(
-              -Number(hullYawInput.current?.value) * (Math.PI / 180),
-            );
-            mutateTankopedia((state) => {
-              state.model.hullYaw = normalized;
-            });
-            hullYawInput.current!.value = `${Math.round(normalized)}`;
+        <TextField.Root
+          style={{
+            flex: 1,
           }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              hullYawInput.current?.blur();
-            }
-          }}
-          onFocus={() => hullYawInput.current?.focus()}
-          ref={hullYawInput}
-          style={{ textAlign: 'right' }}
-        />
-        <TextField.Slot>°</TextField.Slot>
-      </TextField.Root>
+        >
+          <TextField.Slot>Hull</TextField.Slot>
+          <TextField.Input
+            defaultValue={Math.round(model.hullYaw * (180 / Math.PI))}
+            onBlur={() => {
+              const normalized = normalizeAnglePI(
+                -Number(hullYawInput.current?.value) * (Math.PI / 180),
+              );
+              mutateTankopedia((state) => {
+                state.model.hullYaw = normalized;
+              });
+              hullYawInput.current!.value = `${Math.round(normalized)}`;
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                hullYawInput.current?.blur();
+              }
+            }}
+            onFocus={() => hullYawInput.current?.focus()}
+            ref={hullYawInput}
+            style={{ textAlign: 'right' }}
+          />
+          <TextField.Slot>°</TextField.Slot>
+        </TextField.Root>
 
-      <TextField.Root
-        variant="surface"
-        style={{
-          width: 115,
-        }}
-      >
-        <TextField.Slot>Turret</TextField.Slot>
-        <TextField.Input
-          defaultValue={Math.round(model.turretYaw * (180 / Math.PI))}
-          onBlur={() => {
-            const [pitch, yaw] = applyPitchYawLimits(
-              model.gunPitch,
-              -Number(turretYawInput.current?.value) * (Math.PI / 180),
-              gunModelDefinition.pitch,
-              turretModelDefinition.yaw,
-            );
-            mutateTankopedia((state) => {
-              state.model.gunPitch = pitch;
-              state.model.turretYaw = yaw;
-            });
-            turretYawInput.current!.value = `${Math.round(
-              yaw * (180 / Math.PI),
-            )}`;
+        <TextField.Root
+          style={{
+            flex: 1,
           }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              turretYawInput.current?.blur();
-            }
-          }}
-          onFocus={() => turretYawInput.current?.focus()}
-          ref={turretYawInput}
-          style={{ textAlign: 'right' }}
-        />
-        <TextField.Slot>°</TextField.Slot>
-      </TextField.Root>
+        >
+          <TextField.Slot>Turret</TextField.Slot>
+          <TextField.Input
+            defaultValue={Math.round(model.turretYaw * (180 / Math.PI))}
+            onBlur={() => {
+              const [pitch, yaw] = applyPitchYawLimits(
+                model.gunPitch,
+                -Number(turretYawInput.current?.value) * (Math.PI / 180),
+                gunModelDefinition.pitch,
+                turretModelDefinition.yaw,
+              );
+              mutateTankopedia((state) => {
+                state.model.gunPitch = pitch;
+                state.model.turretYaw = yaw;
+              });
+              turretYawInput.current!.value = `${Math.round(
+                yaw * (180 / Math.PI),
+              )}`;
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                turretYawInput.current?.blur();
+              }
+            }}
+            onFocus={() => turretYawInput.current?.focus()}
+            ref={turretYawInput}
+            style={{ textAlign: 'right' }}
+          />
+          <TextField.Slot>°</TextField.Slot>
+        </TextField.Root>
 
-      <TextField.Root
-        variant="surface"
-        style={{
-          width: 115,
-        }}
-      >
-        <TextField.Slot>Gun</TextField.Slot>
-        <TextField.Input
-          defaultValue={-Math.round(model.gunPitch * (180 / Math.PI))}
-          onBlur={() => {
-            const [pitch, yaw] = applyPitchYawLimits(
-              -Number(gunPitchInput.current?.value) * (Math.PI / 180),
-              model.turretYaw,
-              gunModelDefinition.pitch,
-              turretModelDefinition.yaw,
-            );
-            mutateTankopedia((state) => {
-              state.model.gunPitch = pitch;
-              state.model.turretYaw = yaw;
-            });
-            gunPitchInput.current!.value = `${Math.round(
-              pitch * (180 / Math.PI),
-            )}`;
+        <TextField.Root
+          style={{
+            flex: 1,
           }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              gunPitchInput.current?.blur();
-            }
-          }}
-          onFocus={() => gunPitchInput.current?.focus()}
-          ref={gunPitchInput}
-          style={{ textAlign: 'right' }}
-        />
-        <TextField.Slot>°</TextField.Slot>
-      </TextField.Root>
+        >
+          <TextField.Slot>Gun</TextField.Slot>
+          <TextField.Input
+            defaultValue={-Math.round(model.gunPitch * (180 / Math.PI))}
+            onBlur={() => {
+              const [pitch, yaw] = applyPitchYawLimits(
+                -Number(gunPitchInput.current?.value) * (Math.PI / 180),
+                model.turretYaw,
+                gunModelDefinition.pitch,
+                turretModelDefinition.yaw,
+              );
+              mutateTankopedia((state) => {
+                state.model.gunPitch = pitch;
+                state.model.turretYaw = yaw;
+              });
+              gunPitchInput.current!.value = `${Math.round(
+                pitch * (180 / Math.PI),
+              )}`;
+            }}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                gunPitchInput.current?.blur();
+              }
+            }}
+            onFocus={() => gunPitchInput.current?.focus()}
+            ref={gunPitchInput}
+            style={{ textAlign: 'right' }}
+          />
+          <TextField.Slot>°</TextField.Slot>
+        </TextField.Root>
+      </Flex>
     </Flex>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -3,6 +3,8 @@
 import {
   ArrowLeftIcon,
   CaretRightIcon,
+  EnterFullScreenIcon,
+  ExitFullScreenIcon,
   MagnifyingGlassIcon,
 } from '@radix-ui/react-icons';
 import {
@@ -24,7 +26,7 @@ import { Canvas } from '@react-three/fiber';
 import { go } from 'fuzzysort';
 import { debounce } from 'lodash';
 import Link from 'next/link';
-import { Suspense, use, useRef, useState } from 'react';
+import { Suspense, use, useEffect, useRef, useState } from 'react';
 import { Group, Vector3 } from 'three';
 import { Flag } from '../../../../components/Flag';
 import { ModuleButtons } from '../../../../components/ModuleButton';
@@ -37,7 +39,6 @@ import {
 } from '../../../../core/blitzkrieg/tankDefinitions';
 import { theme } from '../../../../stitches.config';
 import { Loader } from '../../components/Loader';
-import * as styles from '../page.css';
 import { Controls } from './components/Control';
 import { RotationInputs } from './components/RotationInputs';
 import { SceneProps } from './components/SceneProps';
@@ -64,6 +65,8 @@ export default function Page({ params }: { params: { id: string } }) {
   const [versusGun, setVersusGun] = useState(versusTurret.guns.at(-1)!);
   const [versusTankTab, setVersusTankTab] = useState('search');
   const canvas = useRef<HTMLCanvasElement>(null);
+  const canvasWrapper = useRef<HTMLDivElement>(null);
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
   function handlePointerDown() {
     window.addEventListener('pointermove', handlePointerMove);
@@ -79,6 +82,18 @@ export default function Page({ params }: { params: { id: string } }) {
     window.removeEventListener('pointerup', handlePointerUp);
   }
 
+  useEffect(() => {
+    function handleFullScreenChange() {
+      setIsFullScreen(document.fullscreenElement !== null);
+    }
+
+    document.addEventListener('fullscreenchange', handleFullScreenChange);
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullScreenChange);
+    };
+  });
+
   return (
     <PageWrapper color="purple">
       <Flex gap="8" direction="column">
@@ -90,7 +105,7 @@ export default function Page({ params }: { params: { id: string } }) {
             >
               <Flex gap="1" align="center">
                 <ArrowLeftIcon />
-                <Text>Back to tankopedia</Text>
+                <Text>Back</Text>
               </Flex>
             </Link>
 
@@ -100,59 +115,91 @@ export default function Page({ params }: { params: { id: string } }) {
             </Flex>
           </Flex>
 
-          <Card style={{ position: 'relative' }}>
-            <Flex direction="column" gap="2">
-              <Tabs.Root value={mode} onValueChange={setMode}>
-                <Tabs.List>
-                  <Tabs.Trigger value="model">Model</Tabs.Trigger>
-                  <Tabs.Trigger value="armor">Armor</Tabs.Trigger>
-                </Tabs.List>
-              </Tabs.Root>
-
-              <div style={{ height: '50vh', maxHeight: 576 }}>
-                <Canvas
-                  shadows
-                  ref={canvas}
-                  camera={{ fov: 20 }}
-                  onPointerDown={handlePointerDown}
+          <Theme radius={isFullScreen ? 'none' : undefined}>
+            <Card
+              style={{
+                position: 'relative',
+                border: isFullScreen ? 'none' : 'unset',
+              }}
+              ref={canvasWrapper}
+            >
+              <Theme radius="full" style={{ height: '100%' }}>
+                <Flex
+                  style={{
+                    height: isFullScreen ? '100%' : '75vh',
+                    maxHeight: isFullScreen ? 'unset' : 576,
+                  }}
+                  direction="column"
+                  gap="2"
                 >
-                  <Controls />
-                  <SceneProps />
+                  <Tabs.Root value={mode} onValueChange={setMode}>
+                    <Tabs.List>
+                      <Tabs.Trigger value="model">Model</Tabs.Trigger>
+                      <Tabs.Trigger value="armor">Armor</Tabs.Trigger>
+                    </Tabs.List>
+                  </Tabs.Root>
 
-                  <Suspense
-                    fallback={
-                      <Html center position={[0, 1.5, 0]}>
-                        <Loader
-                          naked
-                          color={theme.colors.textHighContrast_purple}
+                  <div style={{ height: '100%' }}>
+                    <Canvas
+                      shadows
+                      ref={canvas}
+                      camera={{ fov: 20 }}
+                      onPointerDown={handlePointerDown}
+                    >
+                      <Controls />
+                      <SceneProps />
+
+                      <Suspense
+                        fallback={
+                          <Html center position={[0, 1.5, 0]}>
+                            <Loader
+                              naked
+                              color={theme.colors.textHighContrast_purple}
+                            />
+                          </Html>
+                        }
+                      >
+                        <TankModel
+                          gunId={gun.id}
+                          tankId={tank.id}
+                          turretId={turret.id}
+                          ref={hullContainer}
                         />
-                      </Html>
-                    }
+                      </Suspense>
+                    </Canvas>
+                  </div>
+
+                  <Button
+                    variant="ghost"
+                    style={{
+                      position: 'absolute',
+                      top: 18,
+                      right: 18,
+                    }}
+                    onClick={() => {
+                      if (isFullScreen) {
+                        document.exitFullscreen();
+                      } else {
+                        canvasWrapper.current?.requestFullscreen();
+                      }
+                    }}
                   >
-                    <TankModel
-                      gunId={gun.id}
-                      tankId={tank.id}
-                      turretId={turret.id}
-                      ref={hullContainer}
-                    />
-                  </Suspense>
-                </Canvas>
-              </div>
+                    {isFullScreen ? (
+                      <ExitFullScreenIcon />
+                    ) : (
+                      <EnterFullScreenIcon />
+                    )}
+                  </Button>
 
-              {mode === 'armor' && (
-                <Flex gap="2" align="center" className={styles.enhancedArmor}>
-                  <Checkbox defaultChecked />
-                  <Text>Enhanced armor</Text>
+                  <RotationInputs
+                    gunId={gun.id}
+                    tankId={tank.id}
+                    turretId={turret.id}
+                  />
                 </Flex>
-              )}
-
-              <RotationInputs
-                gunId={gun.id}
-                tankId={tank.id}
-                turretId={turret.id}
-              />
-            </Flex>
-          </Card>
+              </Theme>
+            </Card>
+          </Theme>
 
           <Theme radius="small">
             <Flex gap="4">

src/app/tools/tankopedia/page.css.ts

@@ -41,7 +41,7 @@ export const listingImage = style({
   },
 });
 
-export const enhancedArmor = style({
+export const alignTopRight = style({
   '@media': {
     'screen and (min-width: 400px)': {
       position: 'absolute',

src/app/tools/tankopedia/page.tsx

@@ -16,6 +16,7 @@ import {
   TextField,
 } from '@radix-ui/themes';
 import { go } from 'fuzzysort';
+import Link from 'next/link';
 import { Suspense, use, useEffect, useMemo, useRef, useState } from 'react';
 import PageWrapper from '../../../components/PageWrapper';
 import { asset } from '../../../core/blitzkrieg/asset';
@@ -198,7 +199,7 @@ export default function Page() {
         <Flex wrap="wrap" gap="3" justify="center">
           {searchedList
             .map((tank) => (
-              <a
+              <Link
                 key={tank.id}
                 href={`/tools/tankopedia/${tank.id}`}
                 style={{
@@ -309,7 +310,7 @@ export default function Page() {
                     </Flex>
                   </Inset>
                 </Card>
-              </a>
+              </Link>
             ))
             .slice(page * TANKS_PER_PAGE, (page + 1) * TANKS_PER_PAGE)}
         </Flex>