feat: better fullscreen

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

@@ -0,0 +1,270 @@
+import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
+import {
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Heading,
+  Tabs,
+  Text,
+  Tooltip,
+} from '@radix-ui/themes';
+import { useState } from 'react';
+import { ModuleButton } from '../../../../../components/ModuleButtons/ModuleButton';
+import { ShellButton } from '../../../../../components/ModuleButtons/ShellButton';
+import { SmallTankIcon } from '../../../../../components/SmallTankIcon';
+import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
+import {
+  SHELL_NAMES,
+  TIER_ROMAN_NUMERALS,
+} from '../../../../../core/blitzkrieg/tankDefinitions';
+import { mutateDuel, useDuel } from '../../../../../stores/duel';
+import {
+  mutateTankopediaTemporary,
+  useTankopediaPersistent,
+} from '../../../../../stores/tankopedia';
+import { TankSearch } from '../../components/TankSearch';
+
+interface AntagonistBarProps {
+  floating?: boolean;
+}
+
+export function AntagonistBar({ floating }: AntagonistBarProps) {
+  const antagonist = useDuel((state) => state.antagonist!);
+  const mode = useTankopediaPersistent((state) => state.mode);
+  const [tab, setTab] = useState('search');
+  const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
+    useState(false);
+
+  if (mode !== 'armor') return null;
+
+  return (
+    <Card
+      style={
+        floating
+          ? {
+              position: 'absolute',
+              bottom: 8,
+              left: '50%',
+              transform: 'translateX(-50%)',
+            }
+          : undefined
+      }
+    >
+      <Flex align="center" justify="between" gap="6">
+        <Flex>
+          {antagonist.gun.shells.map((shell, index) => {
+            return (
+              <ShellButton
+                selected={antagonist.shell.id === shell.id}
+                shell={shell.icon}
+                rowChild
+                first={index === 0}
+                key={shell.id}
+                last={index === antagonist.gun.shells.length - 1}
+                onClick={() => {
+                  mutateDuel((draft) => {
+                    draft.antagonist!.shell = shell;
+                    mutateTankopediaTemporary((draft) => {
+                      draft.shot = undefined;
+                    });
+                  });
+                }}
+              />
+            );
+          })}
+        </Flex>
+
+        <Flex align="center" gap="4">
+          {!floating && <Text>Versus</Text>}
+
+          {floating && (
+            <Flex gap="2" align="center">
+              Versus {antagonist.tank.name}
+              <SmallTankIcon id={antagonist.tank.id} size={16} />
+            </Flex>
+          )}
+
+          {!floating && (
+            <Dialog.Root
+              open={antagonistSelectorOpen}
+              onOpenChange={setAntagonistSelectorVisible}
+            >
+              <Dialog.Trigger>
+                <Button variant="ghost">
+                  <Flex gap="2" align="center">
+                    {antagonist.tank.name}
+                    <SmallTankIcon id={antagonist.tank.id} size={16} />
+                    <CaretRightIcon />
+                  </Flex>
+                </Button>
+              </Dialog.Trigger>
+
+              <Dialog.Content>
+                <Tabs.Root
+                  value={tab}
+                  onValueChange={setTab}
+                  style={{ position: 'relative' }}
+                >
+                  <Dialog.Close>
+                    <Button
+                      variant="ghost"
+                      style={{ position: 'absolute', right: 0, top: 8 }}
+                    >
+                      <Cross1Icon />
+                    </Button>
+                  </Dialog.Close>
+
+                  <Flex gap="4" direction="column">
+                    <Tabs.List>
+                      <Tabs.Trigger value="search">Search</Tabs.Trigger>
+                      <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
+                    </Tabs.List>
+
+                    <Tabs.Content value="search">
+                      <Flex
+                        direction="column"
+                        gap="4"
+                        style={{ flex: 1 }}
+                        justify="center"
+                      >
+                        <TankSearch
+                          compact
+                          onSelect={(tank) => {
+                            mutateDuel((draft) => {
+                              draft.antagonist!.tank = tank;
+                              draft.antagonist!.engine = tank.engines.at(-1)!;
+                              draft.antagonist!.track = tank.tracks.at(-1)!;
+                              draft.antagonist!.turret = tank.turrets.at(-1)!;
+                              draft.antagonist!.gun =
+                                draft.antagonist!.turret.guns.at(-1)!;
+                              draft.antagonist!.shell =
+                                draft.antagonist!.gun.shells[0];
+                            });
+                            setAntagonistSelectorVisible(false);
+                          }}
+                        />
+                      </Flex>
+                    </Tabs.Content>
+
+                    <Tabs.Content value="configure">
+                      <Flex direction="column" gap="4">
+                        <Flex direction="column" gap="2" style={{ flex: 1 }}>
+                          <Heading size="4">
+                            {antagonist.tank.name} modules
+                          </Heading>
+
+                          <Flex gap="2" wrap="wrap">
+                            <Flex>
+                              {antagonist.tank.turrets.map((turret, index) => (
+                                <Tooltip content={turret.name} key={turret.id}>
+                                  <ModuleButton
+                                    rowChild
+                                    first={index === 0}
+                                    last={
+                                      index ===
+                                      antagonist.tank.turrets.length - 1
+                                    }
+                                    key={turret.id}
+                                    onClick={() => {
+                                      mutateDuel((draft) => {
+                                        draft.antagonist!.turret = turret;
+                                        draft.antagonist!.gun =
+                                          turret.guns.at(-1)!;
+                                        draft.antagonist!.shell =
+                                          draft.antagonist!.gun.shells[0];
+                                      });
+                                      mutateTankopediaTemporary((draft) => {
+                                        draft.shot = undefined;
+                                      });
+                                    }}
+                                    selected={
+                                      antagonist.turret.id === turret.id
+                                    }
+                                    discriminator={
+                                      TIER_ROMAN_NUMERALS[turret.tier]
+                                    }
+                                    module="turret"
+                                  />
+                                </Tooltip>
+                              ))}
+                            </Flex>
+                            <Flex>
+                              {antagonist.turret.guns.map((gun, index) => (
+                                <Tooltip content={gun.name} key={gun.id}>
+                                  <ModuleButton
+                                    rowChild
+                                    first={index === 0}
+                                    last={
+                                      index ===
+                                      antagonist.turret.guns.length - 1
+                                    }
+                                    onClick={() => {
+                                      mutateDuel((draft) => {
+                                        draft.antagonist!.gun = gun;
+                                        draft.antagonist!.shell = gun.shells[0];
+                                      });
+                                    }}
+                                    selected={antagonist.gun.id === gun.id}
+                                    discriminator={
+                                      TIER_ROMAN_NUMERALS[gun.tier]
+                                    }
+                                    module="gun"
+                                  />
+                                </Tooltip>
+                              ))}
+                            </Flex>
+                          </Flex>
+                        </Flex>
+
+                        <Flex direction="column" style={{ flex: 1 }}>
+                          <Heading size="4">Properties</Heading>
+
+                          <ul>
+                            <li>
+                              Turret: <b>{antagonist.turret.name}</b>
+                            </li>
+                            <li>
+                              Gun: <b>{antagonist.gun.name}</b>
+                            </li>
+                            <li>Shells:</li>
+                            <ul>
+                              {antagonist.gun.shells.map((shell) => (
+                                <li key={shell.id}>
+                                  {SHELL_NAMES[shell.type]}:{' '}
+                                  <b>
+                                    {resolveNearPenetration(shell.penetration)}
+                                    mm
+                                  </b>
+                                  , {shell.damage.armor}HP
+                                </li>
+                              ))}
+                            </ul>
+                          </ul>
+                        </Flex>
+                      </Flex>
+                    </Tabs.Content>
+                  </Flex>
+                </Tabs.Root>
+              </Dialog.Content>
+            </Dialog.Root>
+          )}
+        </Flex>
+
+        <Button
+          variant="ghost"
+          onClick={() => {
+            mutateDuel((draft) => {
+              [draft.protagonist, draft.antagonist] = [
+                draft.antagonist,
+                draft.protagonist,
+              ];
+            });
+          }}
+        >
+          <ShuffleIcon /> Swap tanks
+        </Button>
+      </Flex>
+    </Card>
+  );
+}

src/app/tools/tankopedia/[id]/components/AntagonistBar/index.tsx

@@ -1,240 +0,0 @@
-import { CaretRightIcon, Cross1Icon, ShuffleIcon } from '@radix-ui/react-icons';
-import {
-  Button,
-  Card,
-  Dialog,
-  Flex,
-  Heading,
-  Tabs,
-  Text,
-  Tooltip,
-} from '@radix-ui/themes';
-import { useState } from 'react';
-import { ModuleButton } from '../../../../../../components/ModuleButtons/ModuleButton';
-import { ShellButton } from '../../../../../../components/ModuleButtons/ShellButton';
-import { SmallTankIcon } from '../../../../../../components/SmallTankIcon';
-import { resolveNearPenetration } from '../../../../../../core/blitz/resolveNearPenetration';
-import {
-  SHELL_NAMES,
-  TIER_ROMAN_NUMERALS,
-} from '../../../../../../core/blitzkrieg/tankDefinitions';
-import { mutateDuel, useDuel } from '../../../../../../stores/duel';
-import {
-  mutateTankopediaTemporary,
-  useTankopediaPersistent,
-} from '../../../../../../stores/tankopedia';
-import { TankSearch } from '../../../components/TankSearch';
-
-export function AntagonistBar() {
-  const antagonist = useDuel((state) => state.antagonist!);
-  const mode = useTankopediaPersistent((state) => state.mode);
-  const [tab, setTab] = useState('search');
-  const [antagonistSelectorOpen, setAntagonistSelectorVisible] =
-    useState(false);
-
-  if (mode !== 'armor') return null;
-
-  return (
-    <Card>
-      <Flex align="center" justify="between" gap="2">
-        <Flex>
-          {antagonist.gun.shells.map((shell, index) => {
-            return (
-              <ShellButton
-                selected={antagonist.shell.id === shell.id}
-                shell={shell.icon}
-                rowChild
-                first={index === 0}
-                key={shell.id}
-                last={index === antagonist.gun.shells.length - 1}
-                onClick={() => {
-                  mutateDuel((draft) => {
-                    draft.antagonist!.shell = shell;
-                    mutateTankopediaTemporary((draft) => {
-                      draft.shot = undefined;
-                    });
-                  });
-                }}
-              />
-            );
-          })}
-        </Flex>
-
-        <Flex align="center" gap="4">
-          <Text>Versus</Text>
-
-          <Dialog.Root
-            open={antagonistSelectorOpen}
-            onOpenChange={setAntagonistSelectorVisible}
-          >
-            <Dialog.Trigger>
-              <Button variant="ghost">
-                <Flex gap="2" align="center">
-                  {antagonist.tank.name}
-                  <SmallTankIcon id={antagonist.tank.id} size={16} />
-                  <CaretRightIcon />
-                </Flex>
-              </Button>
-            </Dialog.Trigger>
-
-            <Dialog.Content>
-              <Tabs.Root
-                value={tab}
-                onValueChange={setTab}
-                style={{ position: 'relative' }}
-              >
-                <Dialog.Close>
-                  <Button
-                    variant="ghost"
-                    style={{ position: 'absolute', right: 0, top: 8 }}
-                  >
-                    <Cross1Icon />
-                  </Button>
-                </Dialog.Close>
-
-                <Flex gap="4" direction="column">
-                  <Tabs.List>
-                    <Tabs.Trigger value="search">Search</Tabs.Trigger>
-                    <Tabs.Trigger value="configure">Configure</Tabs.Trigger>
-                  </Tabs.List>
-
-                  <Tabs.Content value="search">
-                    <Flex
-                      direction="column"
-                      gap="4"
-                      style={{ flex: 1 }}
-                      justify="center"
-                    >
-                      <TankSearch
-                        compact
-                        onSelect={(tank) => {
-                          mutateDuel((draft) => {
-                            draft.antagonist!.tank = tank;
-                            draft.antagonist!.engine = tank.engines.at(-1)!;
-                            draft.antagonist!.track = tank.tracks.at(-1)!;
-                            draft.antagonist!.turret = tank.turrets.at(-1)!;
-                            draft.antagonist!.gun =
-                              draft.antagonist!.turret.guns.at(-1)!;
-                            draft.antagonist!.shell =
-                              draft.antagonist!.gun.shells[0];
-                          });
-                          setAntagonistSelectorVisible(false);
-                        }}
-                      />
-                    </Flex>
-                  </Tabs.Content>
-
-                  <Tabs.Content value="configure">
-                    <Flex direction="column" gap="4">
-                      <Flex direction="column" gap="2" style={{ flex: 1 }}>
-                        <Heading size="4">
-                          {antagonist.tank.name} modules
-                        </Heading>
-
-                        <Flex gap="2" wrap="wrap">
-                          <Flex>
-                            {antagonist.tank.turrets.map((turret, index) => (
-                              <Tooltip content={turret.name} key={turret.id}>
-                                <ModuleButton
-                                  rowChild
-                                  first={index === 0}
-                                  last={
-                                    index === antagonist.tank.turrets.length - 1
-                                  }
-                                  key={turret.id}
-                                  onClick={() => {
-                                    mutateDuel((draft) => {
-                                      draft.antagonist!.turret = turret;
-                                      draft.antagonist!.gun =
-                                        turret.guns.at(-1)!;
-                                      draft.antagonist!.shell =
-                                        draft.antagonist!.gun.shells[0];
-                                    });
-                                    mutateTankopediaTemporary((draft) => {
-                                      draft.shot = undefined;
-                                    });
-                                  }}
-                                  selected={antagonist.turret.id === turret.id}
-                                  discriminator={
-                                    TIER_ROMAN_NUMERALS[turret.tier]
-                                  }
-                                  module="turret"
-                                />
-                              </Tooltip>
-                            ))}
-                          </Flex>
-                          <Flex>
-                            {antagonist.turret.guns.map((gun, index) => (
-                              <Tooltip content={gun.name} key={gun.id}>
-                                <ModuleButton
-                                  rowChild
-                                  first={index === 0}
-                                  last={
-                                    index === antagonist.turret.guns.length - 1
-                                  }
-                                  onClick={() => {
-                                    mutateDuel((draft) => {
-                                      draft.antagonist!.gun = gun;
-                                      draft.antagonist!.shell = gun.shells[0];
-                                    });
-                                  }}
-                                  selected={antagonist.gun.id === gun.id}
-                                  discriminator={TIER_ROMAN_NUMERALS[gun.tier]}
-                                  module="gun"
-                                />
-                              </Tooltip>
-                            ))}
-                          </Flex>
-                        </Flex>
-                      </Flex>
-
-                      <Flex direction="column" style={{ flex: 1 }}>
-                        <Heading size="4">Properties</Heading>
-
-                        <ul>
-                          <li>
-                            Turret: <b>{antagonist.turret.name}</b>
-                          </li>
-                          <li>
-                            Gun: <b>{antagonist.gun.name}</b>
-                          </li>
-                          <li>Shells:</li>
-                          <ul>
-                            {antagonist.gun.shells.map((shell) => (
-                              <li key={shell.id}>
-                                {SHELL_NAMES[shell.type]}:{' '}
-                                <b>
-                                  {resolveNearPenetration(shell.penetration)}
-                                  mm
-                                </b>
-                                , {shell.damage.armor}HP
-                              </li>
-                            ))}
-                          </ul>
-                        </ul>
-                      </Flex>
-                    </Flex>
-                  </Tabs.Content>
-                </Flex>
-              </Tabs.Root>
-            </Dialog.Content>
-          </Dialog.Root>
-        </Flex>
-
-        <Button
-          variant="ghost"
-          onClick={() => {
-            mutateDuel((draft) => {
-              [draft.protagonist, draft.antagonist] = [
-                draft.antagonist,
-                draft.protagonist,
-              ];
-            });
-          }}
-        >
-          <ShuffleIcon /> Swap tanks
-        </Button>
-      </Flex>
-    </Card>
-  );
-}

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

@@ -17,6 +17,7 @@ import mutateTankopediaPersistent, {
   mutateTankopediaTemporary,
   useTankopediaPersistent,
 } from '../../../../../../stores/tankopedia';
+import { AntagonistBar } from '../AntagonistBar';
 import { Controls } from '../Control';
 import { Lighting } from '../Lighting';
 import { RotationInputs } from '../QuickInputs';
@@ -242,9 +243,14 @@ export function TankSandbox() {
               )}
             </div>
 
-            <Options canvas={canvasWrapper} isFullScreen={isFullScreen} />
+            <Options
+              canvasWrapper={canvasWrapper}
+              isFullScreen={isFullScreen}
+            />
 
-            {loadModel && <RotationInputs />}
+            {isFullScreen && <AntagonistBar floating />}
+
+            {loadModel && <RotationInputs isFullScreen={isFullScreen} />}
           </Flex>
         </Theme>
       </Card>

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

@@ -14,10 +14,10 @@ import { ENVIRONMENTS } from '../../Lighting';
 
 interface OptionsProps {
   isFullScreen: boolean;
-  canvas: RefObject<HTMLElement>;
+  canvasWrapper: RefObject<HTMLElement>;
 }
 
-export function Options({ isFullScreen, canvas }: OptionsProps) {
+export function Options({ isFullScreen, canvasWrapper }: OptionsProps) {
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
@@ -45,103 +45,107 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
         right: 18,
       }}
     >
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Button variant="ghost">
-            <EyeOpenIcon />
-          </Button>
-        </DropdownMenu.Trigger>
+      {!isFullScreen && (
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Button variant="ghost">
+              <EyeOpenIcon />
+            </Button>
+          </DropdownMenu.Trigger>
 
-        <DropdownMenu.Content>
-          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
-            Hull down
-          </DropdownMenu.Item>
+          <DropdownMenu.Content>
+            <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.HullDown)}>
+              Hull down
+            </DropdownMenu.Item>
 
-          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
-            Face hug
-          </DropdownMenu.Item>
+            <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.FaceHug)}>
+              Face hug
+            </DropdownMenu.Item>
 
-          <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
-            Default
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+            <DropdownMenu.Item onClick={() => poseEvent.emit(Pose.Default)}>
+              Default
+            </DropdownMenu.Item>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      )}
 
-      <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-          <Button variant="ghost">
-            <GearIcon />
-          </Button>
-        </DropdownMenu.Trigger>
+      {!isFullScreen && (
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Button variant="ghost">
+              <GearIcon />
+            </Button>
+          </DropdownMenu.Trigger>
 
-        <DropdownMenu.Content>
-          <DropdownMenu.CheckboxItem
-            checked={greenPenetration}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.greenPenetration = checked;
-              });
-            }}
-          >
-            Green penetration
-          </DropdownMenu.CheckboxItem>
+          <DropdownMenu.Content>
+            <DropdownMenu.CheckboxItem
+              checked={greenPenetration}
+              onCheckedChange={(checked) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.model.visual.greenPenetration = checked;
+                });
+              }}
+            >
+              Green penetration
+            </DropdownMenu.CheckboxItem>
 
-          <DropdownMenu.CheckboxItem
-            checked={showGrid}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.showGrid = checked;
-              });
-            }}
-          >
-            Show grid
-          </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={showGrid}
+              onCheckedChange={(checked) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.model.visual.showGrid = checked;
+                });
+              }}
+            >
+              Show grid
+            </DropdownMenu.CheckboxItem>
 
-          <DropdownMenu.CheckboxItem
-            checked={showEnvironment}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.showEnvironment = checked;
-              });
-            }}
-          >
-            View environment
-          </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={showEnvironment}
+              onCheckedChange={(checked) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.model.visual.showEnvironment = checked;
+                });
+              }}
+            >
+              View environment
+            </DropdownMenu.CheckboxItem>
 
-          <DropdownMenu.Sub>
-            <DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
+            <DropdownMenu.Sub>
+              <DropdownMenu.SubTrigger>Lighting</DropdownMenu.SubTrigger>
 
-            <DropdownMenu.SubContent>
-              <DropdownMenu.RadioGroup value={environment}>
-                {ENVIRONMENTS.map((environment) => (
-                  <DropdownMenu.RadioItem
-                    key={environment}
-                    value={environment}
-                    onClick={() => {
-                      mutateTankopediaPersistent((draft) => {
-                        draft.model.visual.environment = environment;
-                      });
-                    }}
-                  >
-                    {environment[0].toUpperCase() + environment.slice(1)}
-                  </DropdownMenu.RadioItem>
-                ))}
-              </DropdownMenu.RadioGroup>
-            </DropdownMenu.SubContent>
-          </DropdownMenu.Sub>
+              <DropdownMenu.SubContent>
+                <DropdownMenu.RadioGroup value={environment}>
+                  {ENVIRONMENTS.map((environment) => (
+                    <DropdownMenu.RadioItem
+                      key={environment}
+                      value={environment}
+                      onClick={() => {
+                        mutateTankopediaPersistent((draft) => {
+                          draft.model.visual.environment = environment;
+                        });
+                      }}
+                    >
+                      {environment[0].toUpperCase() + environment.slice(1)}
+                    </DropdownMenu.RadioItem>
+                  ))}
+                </DropdownMenu.RadioGroup>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Sub>
 
-          <DropdownMenu.CheckboxItem
-            checked={wireframe}
-            onCheckedChange={(checked) => {
-              mutateTankopediaPersistent((draft) => {
-                draft.model.visual.wireframe = checked;
-              });
-            }}
-          >
-            Wireframe
-          </DropdownMenu.CheckboxItem>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+            <DropdownMenu.CheckboxItem
+              checked={wireframe}
+              onCheckedChange={(checked) => {
+                mutateTankopediaPersistent((draft) => {
+                  draft.model.visual.wireframe = checked;
+                });
+              }}
+            >
+              Wireframe
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      )}
 
       {fullScreenAvailable && (
         <Button
@@ -149,9 +153,7 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
           onClick={() => {
             if (isFullScreen) {
               document.exitFullscreen();
-            } else {
-              canvas.current?.requestFullscreen();
-            }
+            } else canvasWrapper.current?.requestFullscreen();
           }}
         >
           {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}

src/app/tools/tankopedia/[id]/components/QuickInputs/index.tsx

@@ -8,7 +8,11 @@ import { mutateDuel, useDuel } from '../../../../../../stores/duel';
 import { useTankopediaPersistent } from '../../../../../../stores/tankopedia';
 import { QuickEquipmentButton } from './components/QuickEquipmentButton';
 
-export function RotationInputs() {
+interface RotationInputsProps {
+  isFullScreen?: boolean;
+}
+
+export function RotationInputs({ isFullScreen }: RotationInputsProps) {
   const protagonist = useDuel((state) => state.protagonist!);
   const awaitedModelDefinitions = use(modelDefinitions);
   const turretYawInput = useRef<HTMLInputElement>(null);
@@ -41,7 +45,7 @@ export function RotationInputs() {
         width: 'calc(100% - 16px)',
         position: 'absolute',
         left: 8,
-        bottom: 8,
+        bottom: isFullScreen ? 80 : 8,
       }}
       gap="4"
     >