#184: Listen for weather updates from client

src/components/Effects.vue

@@ -1,21 +1,35 @@
 <template>
-  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene" />
 </template>
 
 <script setup lang="ts">
 import { Scene } from 'phavuer'
 import { useZoneStore } from '@/stores/zoneStore'
+import { useGameStore } from '@/stores/gameStore'
 import { onBeforeUnmount, ref, watch } from 'vue'
+import type { WeatherState } from '@/types'
 
+// Stores
+const gameStore = useGameStore()
 const zoneStore = useZoneStore()
 
+// Scene ref
 const sceneRef = ref<Phaser.Scene | null>(null)
 
-// Effect-related refs
+// Effect refs
 const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
 const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
 const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
 
+// Weather state
+const weatherState = ref<WeatherState>({
+  isRainEnabled: false,
+  rainPercentage: 0,
+  isFogEnabled: false,
+  fogDensity: 0
+})
+
+// Scene lifecycle methods
 const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('raindrop', 'assets/raindrop.png')
   scene.load.image('fog', 'assets/fog.png')
@@ -23,15 +37,21 @@ const preloadScene = async (scene: Phaser.Scene) => {
 
 const createScene = async (scene: Phaser.Scene) => {
   sceneRef.value = scene
-  createLightEffect(scene)
+  setupEffects(scene)
-  createRainEffect(scene)
+  setupWeatherListeners()
-  createFogEffect(scene)
 }
 
 const updateScene = () => {
   updateEffects()
 }
 
+// Effect setup
+const setupEffects = (scene: Phaser.Scene) => {
+  createLightEffect(scene)
+  createRainEffect(scene)
+  createFogEffect(scene)
+}
+
 const createLightEffect = (scene: Phaser.Scene) => {
   lightEffect.value = scene.add.graphics()
   lightEffect.value.setDepth(1000)
@@ -59,9 +79,18 @@ const createFogEffect = (scene: Phaser.Scene) => {
   fogSprite.value.setDepth(950)
 }
 
+// Effect updates
 const updateEffects = () => {
   const effects = zoneStore.zone?.zoneEffects || []
 
+  if (effects.length > 0) {
+    updateZoneEffects(effects)
+  } else {
+    updateWeatherEffects()
+  }
+}
+
+const updateZoneEffects = (effects: any[]) => {
   effects.forEach((effect) => {
     switch (effect.effect) {
       case 'light':
@@ -77,6 +106,11 @@ const updateEffects = () => {
   })
 }
 
+const updateWeatherEffects = () => {
+  updateRainEffect(weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0)
+  updateFogEffect(weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0)
+}
+
 const updateLightEffect = (strength: number) => {
   if (!lightEffect.value) return
   const darkness = 1 - strength / 100
@@ -100,11 +134,28 @@ const updateFogEffect = (strength: number) => {
   fogSprite.value.setAlpha(strength / 100)
 }
 
-watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
+// Weather socket handlers
-
+const setupWeatherListeners = () => {
-onBeforeUnmount(() => {
+  // Initial weather state
-  if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.emit('weather', (response: WeatherState) => {
+    if (!zoneStore.zone) return
+    weatherState.value = response
+    updateEffects()
   })
 
-// @TODO : Fix resize issue
+  // Weather updates
+  gameStore.connection?.on('weather', (data: WeatherState) => {
+    weatherState.value = data
+    updateEffects()
+  })
+}
+
+// Watchers
+watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
+
+// Cleanup
+onBeforeUnmount(() => {
+  if (sceneRef.value) sceneRef.value.scene.remove('effects')
+  gameStore.connection?.off('weather')
+})
 </script>

src/types.ts

@@ -224,3 +224,10 @@ export type WorldSettings = {
   isFogEnabled: boolean
   fogDensity: number
 }
+
+export type WeatherState = {
+  isRainEnabled: boolean
+  rainPercentage: number
+  isFogEnabled: boolean
+  fogDensity: number
+}