#258 - Put update effects in the timeout corner until zoneEffects is ready

Reverted latest changes due to zoneEffects needing to fully overwrite

src/components/Effects.vue

@@ -21,6 +21,7 @@ const LIGHT_CONFIG = {
 const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 const sceneRef = ref<Phaser.Scene | null>(null)
+const zoneEffectsReady = ref(false)
 
 // Effect objects
 const effects = {
@@ -76,21 +77,29 @@ const initializeEffects = (scene: Phaser.Scene) => {
 // Effect updates
 const updateScene = () => {
   const timeBasedLight = calculateLightStrength(gameStore.world.date)
-  const defaultEffects = {
-    light: timeBasedLight,
-    rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
-    fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
-  }
-
   const zoneEffects = zoneStore.zone?.zoneEffects?.reduce((acc, curr) => ({
     ...acc,
     [curr.effect]: curr.strength
   }), {}) as { [key: string]: number }
 
-  applyEffects({
-    ...defaultEffects,
-    ...(zoneEffects || {})
-  })
+  // Only update effects once zoneEffects are loaded
+  if (!zoneEffectsReady.value) {
+    if (zoneEffects && Object.keys(zoneEffects).length) {
+      zoneEffectsReady.value = true
+    } else {
+      return
+    }
+  }
+
+  const finalEffects = zoneEffects && Object.keys(zoneEffects).length
+    ? zoneEffects
+    : {
+      light: timeBasedLight,
+      rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
+      fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
+    }
+
+  applyEffects(finalEffects)
 }
 
 const applyEffects = (effectValues: any) => {
@@ -155,7 +164,10 @@ const handleResize = () => {
 }
 
 // Lifecycle
-watch(() => zoneStore.zone?.zoneEffects, updateScene, { deep: true })
+watch(() => zoneStore.zone, () => {
+  zoneEffectsReady.value = false
+  updateScene()
+}, { deep: true })
 
 onMounted(() => window.addEventListener('resize', handleResize))