From 5c6e900278168616d2ddbe1b24b566b71aca1326 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 13 Dec 2023 12:39:43 +0100
Subject: [PATCH 1/3] enhancement: polish scene lightning

---
 .../visualizer-threejs/VisualizerInstance.tsx |  8 +++--
 .../features/visualizer-threejs/constants.ts  |  9 ++++++
 .../src/features/visualizer-threejs/enums.ts  |  4 +++
 client/src/helpers/hooks/useGetThemeMode.ts   | 30 +++++++++++++++++++
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 client/src/features/visualizer-threejs/enums.ts
 create mode 100644 client/src/helpers/hooks/useGetThemeMode.ts

diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx
index 69bac25b7..c5a0a0cb5 100644
--- a/client/src/features/visualizer-threejs/VisualizerInstance.tsx
+++ b/client/src/features/visualizer-threejs/VisualizerInstance.tsx
@@ -6,7 +6,7 @@ import React, { useEffect, useRef } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import * as THREE from "three";
 import { Box3 } from "three";
-import { ACCEPTED_BLOCK_COLORS, PENDING_BLOCK_COLOR, TIME_DIFF_COUNTER, ZOOM_DEFAULT } from "./constants";
+import { ACCEPTED_BLOCK_COLORS, DIRECTIONAL_LIGHT_INTENSITY, PENDING_BLOCK_COLOR, TIME_DIFF_COUNTER, VISUALIZER_BACKGROUND, ZOOM_DEFAULT } from "./constants";
 import Emitter from "./Emitter";
 import { useTangleStore, useConfigStore } from "./store";
 import { getGenerateY, randomIntFromInterval, timer } from "./utils";
@@ -19,6 +19,7 @@ import { StardustFeedClient } from "../../services/stardust/stardustFeedClient";
 import { Wrapper } from "./wrapper/Wrapper";
 import "./Visualizer.scss";
 import { IFeedBlockMetadata } from "~/models/api/stardust/feed/IFeedBlockMetadata";
+import { useGetThemeMode } from '~/helpers/hooks/useGetThemeMode';
 
 const features = {
     statsEnabled: true,
@@ -34,6 +35,7 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
 }) => {
     const [networkConfig] = useNetworkConfig(network);
     const generateY = getGenerateY({ withRandom: true });
+    const themeMode = useGetThemeMode()
 
     const [runListeners, setRunListeners] = React.useState<boolean>(false);
 
@@ -222,9 +224,9 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
                     position={[0, 0, 1500]}
                     zoom={ZOOM_DEFAULT}
                 />
-                <color attach="background" args={["#f2f2f2"]} />
+                <color attach="background" args={[VISUALIZER_BACKGROUND[themeMode]]} />
                 <ambientLight />
-                <directionalLight position={[100, 100, 50]} />
+                <directionalLight color={0xFFFFFF} position={[400, 700, 920]} intensity={DIRECTIONAL_LIGHT_INTENSITY} />
                 <Emitter
                     emitterRef={emitterRef}
                     setRunListeners={setRunListeners}
diff --git a/client/src/features/visualizer-threejs/constants.ts b/client/src/features/visualizer-threejs/constants.ts
index 7951020cc..90cdf5be3 100644
--- a/client/src/features/visualizer-threejs/constants.ts
+++ b/client/src/features/visualizer-threejs/constants.ts
@@ -1,4 +1,5 @@
 import { Color } from "three";
+import { ThemeMode } from './enums';
 
 // steps
 export const STEP_Y_PX = 10;
@@ -39,4 +40,12 @@ export const COLORS = [
   ...ACCEPTED_BLOCK_COLORS,
 ]
 
+// visualizer
+
+export const DIRECTIONAL_LIGHT_INTENSITY = 0.45;
+
+export const VISUALIZER_BACKGROUND: Record<ThemeMode, string> = {
+  [ThemeMode.Dark]: "#000000",
+  [ThemeMode.Light]: "#f2f2f2",
+}
 
diff --git a/client/src/features/visualizer-threejs/enums.ts b/client/src/features/visualizer-threejs/enums.ts
new file mode 100644
index 000000000..360b12a6a
--- /dev/null
+++ b/client/src/features/visualizer-threejs/enums.ts
@@ -0,0 +1,4 @@
+export enum ThemeMode {
+    Light = "light",
+    Dark = "dark"
+}
diff --git a/client/src/helpers/hooks/useGetThemeMode.ts b/client/src/helpers/hooks/useGetThemeMode.ts
new file mode 100644
index 000000000..461146fd4
--- /dev/null
+++ b/client/src/helpers/hooks/useGetThemeMode.ts
@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+import { ServiceFactory } from '~/factories/serviceFactory'
+import { ThemeMode } from '~/features/visualizer-threejs/enums';
+import { SettingsService } from '~/services/settingsService'
+
+export function useGetThemeMode(): ThemeMode {
+  const [settingsService] = useState<SettingsService>(
+    ServiceFactory.get<SettingsService>('settings')
+  )
+
+  const [isDarkMode, setIsDarkMode] = useState<boolean | null>(
+    settingsService.get().darkMode ?? null
+  )
+
+  const themeMode = isDarkMode ? ThemeMode.Dark : ThemeMode.Light
+
+  function toggleDarkMode(event: Event): void {
+    const darkMode = (event as CustomEvent).detail.darkMode
+    setIsDarkMode(darkMode)
+  }
+
+  useEffect(() => {
+    window.addEventListener('theme-change', toggleDarkMode)
+    return () => {
+      window.removeEventListener('theme-change', toggleDarkMode)
+    }
+  }, [settingsService])
+
+  return themeMode
+}

From 692c33a53cab8146e794b1fa0f8b8a6b04c5eb7f Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 13 Dec 2023 12:42:55 +0100
Subject: [PATCH 2/3] fix: update dep array

---
 client/src/helpers/hooks/useGetThemeMode.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/helpers/hooks/useGetThemeMode.ts b/client/src/helpers/hooks/useGetThemeMode.ts
index 461146fd4..a7ba6cb5f 100644
--- a/client/src/helpers/hooks/useGetThemeMode.ts
+++ b/client/src/helpers/hooks/useGetThemeMode.ts
@@ -24,7 +24,7 @@ export function useGetThemeMode(): ThemeMode {
     return () => {
       window.removeEventListener('theme-change', toggleDarkMode)
     }
-  }, [settingsService])
+  }, [])
 
   return themeMode
 }

From 689af7c200796ffba4ea91063afe273cbf2d32c9 Mon Sep 17 00:00:00 2001
From: JCNoguera <jcnoguera@boxfish.studio>
Date: Wed, 13 Dec 2023 15:05:23 +0100
Subject: [PATCH 3/3] chore: remove unused `color` prop from directionalLight

---
 client/src/features/visualizer-threejs/VisualizerInstance.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/features/visualizer-threejs/VisualizerInstance.tsx b/client/src/features/visualizer-threejs/VisualizerInstance.tsx
index c5a0a0cb5..057703c8c 100644
--- a/client/src/features/visualizer-threejs/VisualizerInstance.tsx
+++ b/client/src/features/visualizer-threejs/VisualizerInstance.tsx
@@ -226,7 +226,7 @@ const VisualizerInstance: React.FC<RouteComponentProps<VisualizerRouteProps>> =
                 />
                 <color attach="background" args={[VISUALIZER_BACKGROUND[themeMode]]} />
                 <ambientLight />
-                <directionalLight color={0xFFFFFF} position={[400, 700, 920]} intensity={DIRECTIONAL_LIGHT_INTENSITY} />
+                <directionalLight position={[400, 700, 920]} intensity={DIRECTIONAL_LIGHT_INTENSITY} />
                 <Emitter
                     emitterRef={emitterRef}
                     setRunListeners={setRunListeners}