Simplified effects code and implemented smooth interpolation between day an night light values

src/components/game/map/Effects.vue

@@ -15,7 +15,8 @@ const LIGHT_CONFIG = {
   SUNRISE_HOUR: 6,
   SUNSET_HOUR: 20,
   DAY_STRENGTH: 100,
-  NIGHT_STRENGTH: 30
+  NIGHT_STRENGTH: 30,
+  TRANSITION_HOURS: 3
 }
 
 // Stores and refs
@@ -23,7 +24,6 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 const mapStorage = new MapStorage()
 const sceneRef = ref<Phaser.Scene | null>(null)
-const mapEffectsReady = ref(false)
 const mapObject = ref<Map | null>(null)
 
 // Effect objects
@@ -61,7 +61,6 @@ watch(
   () => mapStore.mapId,
   async (newMapId) => {
     if (newMapId) {
-      mapEffectsReady.value = false
       await loadMap()
       updateScene()
     }
@@ -107,54 +106,54 @@ const updateScene = () => {
     {}
   ) as { [key: string]: number }
 
-  // Only update effects once mapEffects are loaded
+  const finalEffects = {...mapEffects,
-  if (!mapEffectsReady.value) {
-    if (mapObject.value) {
-      mapEffectsReady.value = true
-    } else {
-      return
-    }
-  }
-
-  const finalEffects =
-    mapEffects && Object.keys(mapEffects).length
-      ? mapEffects
-      : {
         light: timeBasedLight,
         rain: weatherState.value.rainPercentage,
-          fog: weatherState.value.fogDensity * 100
+        fog: weatherState.value.fogDensity * 100 }
-        }
+  console.log(finalEffects)
   applyEffects(finalEffects)
 }
 
 const applyEffects = (effectValues: any) => {
   if (effects.light.value) {
-    const darkness = 1 - (effectValues.light ?? 100) / 100
+    const darkness = 1 - (effectValues.light) / 100
     effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
   }
 
-  if (effects.rain.value) {
+  if (effects.rain)
-    const strength = effectValues.rain ?? 0
+    effects.rain.value.start().setQuantity(effectValues.rain / 10)
-    strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
+  else effects.rain.value.stop()
-  }
 
-  if (effects.fog.value) {
+  effects.fog.value.setAlpha(effectValues.fog / 100)
-    effects.fog.value.setAlpha((effectValues.fog ?? 0) / 100)
-  }
 }
 
+// Linear Interpolation
+// moves a value between x and y where a is the percentage of progress the value has made in moving from x to y
+// a = 0 return x
+// a = 0.5 return (x+y)/2
+// a = 1 return y
+const lerp = (x,y,a) => x * (1-a) + y * a
+
 const calculateLightStrength = (time: Date): number => {
   const hour = time.getHours()
   const minute = time.getMinutes()
 
-  if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
-
-  if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
-
-  if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
-
   const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
-  return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
+
+  //Transition from daylight to night
+  if (hour >= LIGHT_CONFIG.SUNSET_HOUR - LIGHT_CONFIG.TRANSITION_HOURS && hour < LIGHT_CONFIG.SUNSET_HOUR)
+    return lerp(LIGHT_CONFIG.DAY_STRENGTH, LIGHT_CONFIG.NIGHT_STRENGTH,
+      (hour-(LIGHT_CONFIG.SUNSET_HOUR-LIGHT_CONFIG.TRANSITION_HOURS))/LIGHT_CONFIG.TRANSITION_HOURS)
+
+  //Transition from sunrise to morning
+  else if (hour >= LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNRISE_HOUR + LIGHT_CONFIG.TRANSITION_HOURS)
+    return lerp(LIGHT_CONFIG.NIGHT_STRENGTH, LIGHT_CONFIG.DAY_STRENGTH,
+      (hour-LIGHT_CONFIG.SUNRISE_HOUR)/LIGHT_CONFIG.TRANSITION_HOURS)
+
+  else if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR)
+      return LIGHT_CONFIG.DAY_STRENGTH
+  else
+      return LIGHT_CONFIG.NIGHT_STRENGTH
 }
 
 // Socket and window handlers
@@ -181,7 +180,6 @@ const handleResize = () => {
 watch(
   () => mapObject.value,
   () => {
-    mapEffectsReady.value = false
     updateScene()
   },
   { deep: true }