diff --git a/src/app/tools/tankopedia/[id]/components/Lighting.tsx b/src/app/tools/tankopedia/[id]/components/Lighting.tsx index 67884e630..520c8d343 100644 --- a/src/app/tools/tankopedia/[id]/components/Lighting.tsx +++ b/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 ( <> - + state.model.visual.environment, + ); return ( Green penetration - { - mutateTankopediaPersistent((draft) => { - draft.model.visual.showEnvironment = checked; - }); - }} - > - Show environment - + + Environment + + + Style + + {ENVIRONMENTS.map((environment) => ( + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.environment = environment; + }); + }} + > + {environment[0].toUpperCase() + environment.slice(1)} + + ))} + + + Configuration + { + mutateTankopediaPersistent((draft) => { + draft.model.visual.showEnvironment = checked; + }); + }} + > + Display + + + diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts index eccabe1d5..14d7d8425 100644 --- a/src/stores/tankopedia.ts +++ b/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()( calibratedShells: false, }, visual: { + environment: 'warehouse', controlsEnabled: true, showGrid: true, greenPenetration: false,