feat: environment options

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

@@ -3,16 +3,21 @@ import { useModel } from '../../../../../hooks/useModel';
 import { useDuel } from '../../../../../stores/duel';
 import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
 
+export const ENVIRONMENTS = ['warehouse', 'dawn', 'sunset'] as const;
+
 export function Lighting() {
   const protagonist = useDuel((state) => state.protagonist!);
   const { hasPbr } = useModel(protagonist.tank.id);
   const showEnvironment = useTankopediaPersistent(
     (state) => state.model.visual.showEnvironment,
   );
+  const environment = useTankopediaPersistent(
+    (state) => state.model.visual.environment,
+  );
 
   return (
     <>
-      <Environment preset="warehouse" background={showEnvironment} blur={0} />
+      <Environment preset={environment} background={showEnvironment} blur={0} />
       <directionalLight
         position={[1, 1, -1]}
         intensity={hasPbr ? 1 : 5}

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

@@ -10,6 +10,7 @@ import { Pose, poseEvent } from '../../../../../../../core/blitzkrieg/pose';
 import mutateTankopediaPersistent, {
   useTankopediaPersistent,
 } from '../../../../../../../stores/tankopedia';
+import { ENVIRONMENTS } from '../../Lighting';
 
 interface OptionsProps {
   isFullScreen: boolean;
@@ -28,6 +29,9 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
   );
   const fullScreenAvailable =
     typeof document !== 'undefined' && document.fullscreenEnabled;
+  const environment = useTankopediaPersistent(
+    (state) => state.model.visual.environment,
+  );
 
   return (
     <Flex
@@ -89,16 +93,40 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
           >
             Green penetration
           </DropdownMenu.CheckboxItem>
-          <DropdownMenu.CheckboxItem
+          <DropdownMenu.Sub>
-            checked={showEnvironment}
+            <DropdownMenu.SubTrigger>Environment</DropdownMenu.SubTrigger>
-            onCheckedChange={(checked) => {
+
-              mutateTankopediaPersistent((draft) => {
+            <DropdownMenu.SubContent>
-                draft.model.visual.showEnvironment = checked;
+              <DropdownMenu.Label>Style</DropdownMenu.Label>
-              });
+              <DropdownMenu.RadioGroup value={environment}>
-            }}
+                {ENVIRONMENTS.map((environment) => (
-          >
+                  <DropdownMenu.RadioItem
-            Show environment
+                    key={environment}
-          </DropdownMenu.CheckboxItem>
+                    value={environment}
+                    onClick={() => {
+                      mutateTankopediaPersistent((draft) => {
+                        draft.model.visual.environment = environment;
+                      });
+                    }}
+                  >
+                    {environment[0].toUpperCase() + environment.slice(1)}
+                  </DropdownMenu.RadioItem>
+                ))}
+              </DropdownMenu.RadioGroup>
+
+              <DropdownMenu.Label>Configuration</DropdownMenu.Label>
+              <DropdownMenu.CheckboxItem
+                checked={showEnvironment}
+                onCheckedChange={(checked) => {
+                  mutateTankopediaPersistent((draft) => {
+                    draft.model.visual.showEnvironment = checked;
+                  });
+                }}
+              >
+                Display
+              </DropdownMenu.CheckboxItem>
+            </DropdownMenu.SubContent>
+          </DropdownMenu.Sub>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
 

src/stores/tankopedia.ts

@@ -2,6 +2,7 @@ import { produce } from 'immer';
 import { Vector3Tuple } from 'three';
 import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
+import { ENVIRONMENTS } from '../app/tools/tankopedia/[id]/components/Lighting';
 import { TankType, TreeType } from '../components/Tanks';
 import {
   EngineDefinition,
@@ -30,6 +31,7 @@ interface TankopediaPersistent {
       calibratedShells: boolean;
     };
     visual: {
+      environment: (typeof ENVIRONMENTS)[number];
       controlsEnabled: boolean;
       showGrid: boolean;
       greenPenetration: boolean;
@@ -98,6 +100,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
           calibratedShells: false,
         },
         visual: {
+          environment: 'warehouse',
           controlsEnabled: true,
           showGrid: true,
           greenPenetration: false,