enhancement: polish lightning and add darkmode background (#922)

* enhancement: polish scene lightning

* fix: update dep array

* chore: remove unused `color` prop from directionalLight

---------

Co-authored-by: Begoña Alvarez <[email protected]>

client/src/features/visualizer-threejs/VisualizerInstance.tsx

@@ -6,12 +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";
@@ -24,6 +19,7 @@ import { NovaFeedClient } from "../../services/nova/novaFeedClient";
 import { Wrapper } from "./wrapper/Wrapper";
 import "./Visualizer.scss";
 import { IFeedBlockMetadata } from "~/models/api/stardust/feed/IFeedBlockMetadata";
+import { useGetThemeMode } from '~/helpers/hooks/useGetThemeMode';
 import { StardustFeedClient } from "~/services/stardust/stardustFeedClient";
 
 const features = {
@@ -40,6 +36,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);
 
@@ -228,9 +225,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 position={[400, 700, 920]} intensity={DIRECTIONAL_LIGHT_INTENSITY} />
                 <Emitter
                     emitterRef={emitterRef}
                     setRunListeners={setRunListeners}

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 = 20;
@@ -38,6 +39,14 @@ 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",
+}
 
 // emitter
 

client/src/features/visualizer-threejs/enums.ts

@@ -0,0 +1,4 @@
+export enum ThemeMode {
+    Light = "light",
+    Dark = "dark"
+}

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)
+    }
+  }, [])
+
+  return themeMode
+}