feat: settings basework

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

@@ -5,6 +5,7 @@ import {
   CaretRightIcon,
   EnterFullScreenIcon,
   ExitFullScreenIcon,
+  GearIcon,
   MagnifyingGlassIcon,
 } from '@radix-ui/react-icons';
 import {
@@ -38,6 +39,7 @@ import {
   tankNamesDiacritics,
 } from '../../../../core/blitzkrieg/tankDefinitions';
 import { theme } from '../../../../stitches.config';
+import mutateTankopedia from '../../../../stores/tankopedia';
 import { Loader } from '../../components/Loader';
 import { Controls } from './components/Control';
 import { RotationInputs } from './components/RotationInputs';
@@ -169,13 +171,27 @@ export default function Page({ params }: { params: { id: string } }) {
                     </Canvas>
                   </div>
 
-                  <Button
+                  <Flex
-                    variant="ghost"
+                    gap="4"
                     style={{
                       position: 'absolute',
                       top: 18,
                       right: 18,
                     }}
+                  >
+                    <Button
+                      variant="ghost"
+                      onClick={() => {
+                        mutateTankopedia((draft) => {
+                          draft.showSettings = true;
+                        });
+                      }}
+                    >
+                      <GearIcon />
+                    </Button>
+
+                    <Button
+                      variant="ghost"
                       onClick={() => {
                         if (isFullScreen) {
                           document.exitFullscreen();
@@ -190,6 +206,7 @@ export default function Page({ params }: { params: { id: string } }) {
                         <EnterFullScreenIcon />
                       )}
                     </Button>
+                  </Flex>
 
                   <RotationInputs
                     gunId={gun.id}

src/stores/tankopedia.ts

@@ -25,6 +25,7 @@ type Tankopedia = {
     gunPitch: number;
     controlsEnabled: boolean;
   };
+  showSettings: boolean;
 };
 
 export const useTankopedia = create<Tankopedia>()(() => ({
@@ -45,6 +46,7 @@ export const useTankopedia = create<Tankopedia>()(() => ({
     turretYaw: 0,
     controlsEnabled: true,
   },
+  showSettings: false,
 }));
 
 export default function mutateTankopedia(recipe: (draft: Tankopedia) => void) {