From 082996b1528e0e7b41b77d7a3c896ed521056341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 1 Feb 2024 12:28:56 -0600
Subject: [PATCH] feat: show environment

---
 .../tools/tankopedia/[id]/components/Lighting.tsx  |  6 +++++-
 .../[id]/components/Model/components/Options.tsx   | 14 +++++++++++++-
 .../tankopedia/[id]/components/SceneProps.tsx      |  5 ++++-
 src/stores/tankopedia.ts                           |  2 ++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Lighting.tsx b/src/app/tools/tankopedia/[id]/components/Lighting.tsx
index 538d96399..67884e630 100644
--- a/src/app/tools/tankopedia/[id]/components/Lighting.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Lighting.tsx
@@ -1,14 +1,18 @@
 import { Environment } from '@react-three/drei';
 import { useModel } from '../../../../../hooks/useModel';
 import { useDuel } from '../../../../../stores/duel';
+import { useTankopediaPersistent } from '../../../../../stores/tankopedia';
 
 export function Lighting() {
   const protagonist = useDuel((state) => state.protagonist!);
   const { hasPbr } = useModel(protagonist.tank.id);
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
 
   return (
     <>
-      <Environment preset="warehouse" />
+      <Environment preset="warehouse" background={showEnvironment} blur={0} />
       <directionalLight
         position={[1, 1, -1]}
         intensity={hasPbr ? 1 : 5}
diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index e6bcd152a..a77e860ee 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -8,7 +8,6 @@ import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
 import { RefObject } from 'react';
 import { Pose, poseEvent } from '../../../../../../../core/blitzkrieg/pose';
 import mutateTankopediaPersistent, {
-  mutateTankopediaTemporary,
   useTankopediaPersistent,
 } from '../../../../../../../stores/tankopedia';
 
@@ -21,6 +20,9 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
   const greenPenetration = useTankopediaPersistent(
     (state) => state.model.visual.greenPenetration,
   );
@@ -87,6 +89,16 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
           >
             Green penetration
           </DropdownMenu.CheckboxItem>
+          <DropdownMenu.CheckboxItem
+            checked={showEnvironment}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.showEnvironment = checked;
+              });
+            }}
+          >
+            Show environment
+          </DropdownMenu.CheckboxItem>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
 
diff --git a/src/app/tools/tankopedia/[id]/components/SceneProps.tsx b/src/app/tools/tankopedia/[id]/components/SceneProps.tsx
index 49cd9a8ec..2be3155b5 100644
--- a/src/app/tools/tankopedia/[id]/components/SceneProps.tsx
+++ b/src/app/tools/tankopedia/[id]/components/SceneProps.tsx
@@ -6,8 +6,11 @@ export function SceneProps() {
   const showGrid = useTankopediaPersistent(
     (state) => state.model.visual.showGrid,
   );
+  const showEnvironment = useTankopediaPersistent(
+    (state) => state.model.visual.showEnvironment,
+  );
 
-  if (!showGrid) return null;
+  if (!showGrid || showEnvironment) return null;
 
   return (
     <>
diff --git a/src/stores/tankopedia.ts b/src/stores/tankopedia.ts
index aa6603f08..5343690b1 100644
--- a/src/stores/tankopedia.ts
+++ b/src/stores/tankopedia.ts
@@ -32,6 +32,7 @@ interface TankopediaPersistent {
       controlsEnabled: boolean;
       showGrid: boolean;
       greenPenetration: boolean;
+      showEnvironment: boolean;
     };
   };
   sort: {
@@ -76,6 +77,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
           controlsEnabled: true,
           showGrid: true,
           greenPenetration: false,
+          showEnvironment: false,
         },
       },
       sort: {