fix: use ref for HouseComponents to solve material reset (#110)

* fix: solve flickering of the house materials
graasp · Dec 16, 2024 · 3099c8d · 3099c8d
1 parent 028e27d
commit 3099c8d
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 80 deletions.
diff --git a/src/context/SimulationContext.tsx b/src/context/SimulationContext.tsx
@@ -128,22 +128,14 @@ export const SimulationProvider = ({
 
   // Hooks
   const houseComponentsHook = useHouseComponents({
-    houseConfigurator: simulationSettings.houseConfigurator,
-    onChange: (houseConfigurator) => {
+    onChange: (newHouseConfigurator) => {
       dispatchHistory({
         type: 'updateHouseConfigurator',
-        houseConfigurator,
+        houseConfigurator: newHouseConfigurator,
       });
     },
   });
 
-  const resetSimulation = useCallback(() => {
-    dispatchHistory({
-      type: 'reset',
-      temperatureRows: temperatures.current,
-    });
-  }, []);
-
   // Load CSV
   useEffect(() => {
     if (!csv) {
@@ -154,15 +146,12 @@ export const SimulationProvider = ({
 
     loadTemperaturesFromCSV(csv.path).then((rows) => {
       temperatures.current = rows;
-      resetSimulation();
+      dispatchHistory({
+        type: 'load',
+        temperatureRows: temperatures.current,
+      });
     });
-  }, [
-    csv,
-    csv.measurementFrequency,
-    csv.path,
-    resetSimulation,
-    simulationDuration.value,
-  ]);
+  }, [csv, csv.measurementFrequency, csv.path, simulationDuration.value]);
 
   useEffect(() => {
     // Only set the status from LOADING to IDLE when the heat loss is computed.
@@ -180,19 +169,21 @@ export const SimulationProvider = ({
       throw new Error('The temperatures are not loaded!');
     }
 
+    if (simulationStatus === SimulationStatus.FINISHED) {
+      dispatchHistory({
+        type: 'restart',
+      });
+    }
+
     if (
       simulationStatus === SimulationStatus.RUNNING ||
       simulationStatus === SimulationStatus.LOADING
     ) {
       return;
     }
 
-    if (simulationStatus === SimulationStatus.FINISHED) {
-      resetSimulation();
-    }
-
     setSimulationStatus(SimulationStatus.RUNNING);
-  }, [resetSimulation, simulationStatus]);
+  }, [simulationStatus]);
 
   const pauseSimulation = useCallback((): void => {
     if (
@@ -209,6 +200,11 @@ export const SimulationProvider = ({
   // and creating too many new days.
   const gotToDay = useDebouncedCallback((idx: number): void => {
     pauseSimulation();
+
+    if (idx >= numberOfDays - 1) {
+      setSimulationStatus(SimulationStatus.FINISHED);
+    }
+
     dispatchHistory({ type: 'goToDay', dayIdx: idx });
   }, 10);
 

diff --git a/src/hooks/useHouseComponents.tsx b/src/hooks/useHouseComponents.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
 import {
   HOUSE_INSULATIONS,
@@ -52,16 +52,15 @@ const DEFAULT_COMPONENTS_INSULATION = {
 };
 
 type Props = {
-  houseConfigurator: HouseComponentsConfigurator;
   onChange: (newHouseComponents: HouseComponentsConfigurator) => void;
 };
 
 export const useHouseComponents = ({
-  houseConfigurator,
   onChange,
 }: Props): UseHouseComponentsReturnType => {
-  // Not working now...
-  const houseComponentsConfigurator = houseConfigurator;
+  const houseComponentsConfigurator = useRef(
+    HouseComponentsConfigurator.create(),
+  );
 
   const registerComponent = useCallback(
     ({
@@ -71,7 +70,7 @@ export const useHouseComponents = ({
       componentType,
     }: RegisterComponentParams): void => {
       const { buildingMaterials, insulationName } =
-        houseComponentsConfigurator.getFirstOfType(componentType) ??
+        houseComponentsConfigurator.current.getFirstOfType(componentType) ??
         DEFAULT_COMPONENTS_INSULATION[componentType];
 
       if (!buildingMaterials?.length) {
@@ -81,7 +80,7 @@ export const useHouseComponents = ({
       }
 
       onChange(
-        houseComponentsConfigurator.add({
+        houseComponentsConfigurator.current.add({
           componentId,
           parentId,
           component: {
@@ -99,7 +98,7 @@ export const useHouseComponents = ({
 
   const unregisterComponent = useCallback(
     ({ componentId }: Pick<RegisterComponentParams, 'componentId'>): void => {
-      onChange(houseComponentsConfigurator.remove({ componentId }));
+      onChange(houseComponentsConfigurator.current.remove({ componentId }));
     },
     [houseComponentsConfigurator, onChange],
   );
@@ -126,7 +125,7 @@ export const useHouseComponents = ({
       const buildingMaterials = HOUSE_INSULATIONS[componentType][newInsulation];
 
       onChange(
-        houseComponentsConfigurator.updateInsulation({
+        houseComponentsConfigurator.current.updateInsulation({
           componentType,
           insulation: { name: newInsulation, buildingMaterials },
         }),
@@ -144,7 +143,7 @@ export const useHouseComponents = ({
       materialProps: { name: string } & FromBuildingMaterial;
     }): void => {
       const component =
-        houseComponentsConfigurator.getFirstOfType(componentType);
+        houseComponentsConfigurator.current.getFirstOfType(componentType);
 
       if (!component) {
         throw new Error(`No ${componentType} component was found!`);
@@ -169,7 +168,7 @@ export const useHouseComponents = ({
       });
 
       onChange(
-        houseComponentsConfigurator.updateInsulation({
+        houseComponentsConfigurator.current.updateInsulation({
           componentType,
           insulation: {
             name: insulationName,

diff --git a/src/hooks/useHouseMaterial.tsx b/src/hooks/useHouseMaterial.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 import { Color, Material, MeshStandardMaterial } from 'three';
 
@@ -9,12 +9,14 @@ type Props = {
   houseMaterial: Material;
   houseComponent: HouseComponent;
   colors: { [name: string]: Color };
+  defaultColor?: Color;
 };
 
 export const useHouseMaterial = ({
   houseMaterial,
   houseComponent,
   colors,
+  defaultColor,
 }: Props): Material => {
   const { houseComponentsConfigurator } = useSimulation();
 
@@ -24,26 +26,21 @@ export const useHouseMaterial = ({
     [houseComponent, houseComponentsConfigurator],
   );
 
-  const [newMaterial, setNewMaterial] = useState(() => houseMaterial);
+  const copiedMaterial = new MeshStandardMaterial().copy(houseMaterial);
 
-  useEffect(() => {
-    if (houseComponentMaterials) {
-      setNewMaterial((curr) => {
-        const copiedMaterial = new MeshStandardMaterial().copy(curr);
-        const color = colors[houseComponentMaterials.insulationName];
+  if (houseComponentMaterials) {
+    const color = colors[houseComponentMaterials.insulationName];
 
-        if (!color) {
-          throw new Error(
-            `No color was found for the ${houseComponent} insulation ${houseComponentMaterials.insulationName}!`,
-          );
-        }
-
-        copiedMaterial.color = color;
-
-        return copiedMaterial;
-      });
+    if (!color) {
+      throw new Error(
+        `No color was found for the ${houseComponent} insulation ${houseComponentMaterials.insulationName}!`,
+      );
     }
-  }, [colors, houseComponent, houseComponentMaterials]);
 
-  return newMaterial;
+    copiedMaterial.color = color;
+  } else if (defaultColor) {
+    copiedMaterial.color = defaultColor;
+  }
+
+  return copiedMaterial;
 };
diff --git a/src/hooks/useWallMaterial.tsx b/src/hooks/useWallMaterial.tsx
@@ -1,6 +1,7 @@
 import { Color, Material } from 'three';
 
 import { HouseInsulationPerComponent } from '@/config/houseInsulations';
+import { SIMULATION_DEFAULT_WALL_COMPONENT_INSULATION } from '@/config/simulation';
 import { HouseComponent } from '@/types/houseComponent';
 import { fromHSL } from '@/utils/colors';
 
@@ -32,6 +33,8 @@ const COLORS: {
   [HouseInsulationPerComponent.Wall.Brick]: fromHSL({ h: 20, s: 0.6, l: 0.4 }),
 };
 
+type WallColor = keyof typeof HouseInsulationPerComponent.Wall;
+
 export const useWallMaterial = ({
   wallMaterial,
 }: {
@@ -41,4 +44,8 @@ export const useWallMaterial = ({
     houseMaterial: wallMaterial,
     houseComponent: HouseComponent.Wall,
     colors: COLORS,
+    defaultColor:
+      COLORS[
+        SIMULATION_DEFAULT_WALL_COMPONENT_INSULATION.insulationName as WallColor
+      ],
   });
diff --git a/src/hooks/useWindowMaterial.tsx b/src/hooks/useWindowMaterial.tsx
@@ -1,6 +1,7 @@
 import { Color, Material } from 'three';
 
 import { HouseInsulationPerComponent } from '@/config/houseInsulations';
+import { SIMULATION_DEFAULT_WINDOW_COMPONENT_INSULATION } from '@/config/simulation';
 import { HouseComponent } from '@/types/houseComponent';
 import { fromRGB } from '@/utils/colors';
 
@@ -30,6 +31,8 @@ type UseWindowMaterialReturnType = {
   frameMaterial: Material;
 };
 
+type WindowColor = keyof typeof HouseInsulationPerComponent.Window;
+
 export const useWindowMaterial = ({
   windowMaterial,
 }: {
@@ -39,5 +42,9 @@ export const useWindowMaterial = ({
     houseMaterial: windowMaterial,
     houseComponent: HouseComponent.Window,
     colors: COLORS,
+    defaultColor:
+      COLORS[
+        SIMULATION_DEFAULT_WINDOW_COMPONENT_INSULATION.insulationName as WindowColor
+      ],
   }),
 });
diff --git a/src/reducer/simulationHistoryReducer.tsx b/src/reducer/simulationHistoryReducer.tsx
@@ -96,9 +96,12 @@ const computeSimulation = (
 
 type Action =
   | {
-      type: 'reset';
+      type: 'load';
       temperatureRows: TemperatureRow[];
     }
+  | {
+      type: 'restart';
+    }
   | {
       type: 'goToDay';
       dayIdx: number;
@@ -128,32 +131,28 @@ type Action =
       windowSize: WindowSizeType;
     };
 
-export const createDefault = (): SimulationHistory => {
-  const houseConfigurator = HouseComponentsConfigurator.create();
-
-  return {
-    currentDayIdx: 0,
-    simulationDays: CreateNonEmptyArray([
-      {
-        heatLoss: {} as SimulationHeatLoss,
-        totalHeatLoss: 0,
-        totalElectricityCost: 0,
-        weatherTemperature: 0,
-      },
-    ]),
-    simulationSettings: {
-      indoorTemperature: SIMULATION_INDOOR_TEMPERATURE_CELCIUS.DEFAULT,
-      outdoorTemperature: {
-        userOverride: false,
-        value: SIMULATION_OUTDOOR_TEMPERATURE_CELCIUS.DEFAULT,
-      },
-      pricekWh: SIMULATION_PRICE_KWH,
-      numberOfFloors: 1,
-      houseConfigurator,
-      windowSize: 'Medium',
+export const createDefault = (): SimulationHistory => ({
+  currentDayIdx: 0,
+  simulationDays: CreateNonEmptyArray([
+    {
+      heatLoss: {} as SimulationHeatLoss,
+      totalHeatLoss: 0,
+      totalElectricityCost: 0,
+      weatherTemperature: 0,
     },
-  };
-};
+  ]),
+  simulationSettings: {
+    indoorTemperature: SIMULATION_INDOOR_TEMPERATURE_CELCIUS.DEFAULT,
+    outdoorTemperature: {
+      userOverride: false,
+      value: SIMULATION_OUTDOOR_TEMPERATURE_CELCIUS.DEFAULT,
+    },
+    pricekWh: SIMULATION_PRICE_KWH,
+    numberOfFloors: 1,
+    houseConfigurator: HouseComponentsConfigurator.create(), // will be replaced on component register
+    windowSize: 'Medium',
+  },
+});
 
 export const simulationHistory = (
   state: SimulationHistory,
@@ -166,7 +165,7 @@ export const simulationHistory = (
   const { simulationDays } = state;
 
   switch (type) {
-    case 'reset': {
+    case 'load': {
       const numberOfDays = action.temperatureRows.length;
       return computeSimulation(
         {
@@ -187,6 +186,8 @@ export const simulationHistory = (
         {},
       );
     }
+    case 'restart':
+      return { ...state, currentDayIdx: 0 };
     case 'goToDay': {
       const { dayIdx } = action;
       const numberOfDays = simulationDays.length;

diff --git a/tests/player/house-floors.spec.ts b/tests/player/house-floors.spec.ts
@@ -25,3 +25,19 @@ test('changing the number of floors should change the simulation info', async ({
     totElectricityCost,
   );
 });
+
+test('resetting the number of floors should not change the wall insulation', async ({
+  page,
+}) => {
+  const housePage = new HousePage(page);
+  const { settings } = housePage;
+  await housePage.goto();
+
+  await settings.selectWallInsulation('Brick');
+
+  await settings.selectNumberOfFloors(2);
+  await settings.selectWallInsulation('Aerogel');
+
+  await settings.selectNumberOfFloors(1);
+  await expect(page.getByLabel('Aerogel')).toBeVisible();
+});