Half working effects

Command triggered effects still brokey

src/components/Effects.vue

@@ -3,8 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import type { WeatherState } from '@/application/types'
+import type { Map, WeatherState } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
+import { MapStorage } from '@/storage/storages'
 import { useMapStore } from '@/stores/mapStore'
 import { Scene } from 'phavuer'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
@@ -20,8 +21,10 @@ const LIGHT_CONFIG = {
 // Stores and refs
 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
 const effects = {
@@ -50,6 +53,25 @@ const createScene = (scene: Phaser.Scene) => {
   setupSocketListeners()
 }
 
+const loadMap = async () => {
+  if (!mapStore.mapId) return
+  const loadedMap = await mapStorage.get(mapStore.mapId)
+  mapObject.value = loadedMap
+}
+
+// Watch for mapId changes and load map when it's available
+watch(
+  () => mapStore.mapId,
+  async (newMapId) => {
+    if (newMapId) {
+      mapEffectsReady.value = false
+      await loadMap()
+      updateScene()
+    }
+  },
+  { immediate: true }
+)
+
 const initializeEffects = (scene: Phaser.Scene) => {
   // Light
   effects.light.value = scene.add.graphics().setDepth(1000)
@@ -80,7 +102,7 @@ const initializeEffects = (scene: Phaser.Scene) => {
 // Effect updates
 const updateScene = () => {
   const timeBasedLight = calculateLightStrength(gameStore.world.date)
-  const mapEffects = mapStore.map?.mapEffects?.reduce(
+  const mapEffects = mapObject.value?.mapEffects?.reduce(
     (acc, curr) => ({
       ...acc,
       [curr.effect]: curr.strength
@@ -105,7 +127,6 @@ const updateScene = () => {
           rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
           fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
         }
-
   applyEffects(finalEffects)
 }
 
@@ -161,7 +182,7 @@ const handleResize = () => {
 
 // Lifecycle
 watch(
-  () => mapStore.map,
+  () => mapObject.value,
   () => {
     mapEffectsReady.value = false
     updateScene()