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,