#137 : Listen for zoneEffects in effects component

src/components/Effects.vue

@@ -4,26 +4,18 @@
 
 <script setup lang="ts">
 import { Scene } from 'phavuer'
-import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
-import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onBeforeUnmount, ref, watch } from 'vue'
-import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
 
-const gameStore = useGameStore()
+const zoneStore = useZoneStore()
-const zoneEditorStore = useZoneEditorStore()
-
-// See if there's a dat
 
 const sceneRef = ref<Phaser.Scene | null>(null)
 
 // Effect-related refs
-const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
+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)
 
-// Effect parameters
-const dayNightDuration = 300000 // 5 minutes in milliseconds
-const maxDarkness = 0.7
-
 const preloadScene = async (scene: Phaser.Scene) => {
   scene.load.image('raindrop', 'assets/raindrop.png')
   scene.load.image('fog', 'assets/fog.png')
@@ -31,28 +23,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
 
 const createScene = async (scene: Phaser.Scene) => {
   sceneRef.value = scene
-  createDayNightCycle(scene)
+  createLightEffect(scene)
   createRainEffect(scene)
   createFogEffect(scene)
 }
 
-const updateScene = (scene: Phaser.Scene, time: number) => {
+const updateScene = () => {
-  updateDayNightCycle(time)
+  updateEffects()
-  updateFogEffect()
 }
 
-const createDayNightCycle = (scene: Phaser.Scene) => {
+const createLightEffect = (scene: Phaser.Scene) => {
-  dayNightCycle.value = scene.add.graphics()
+  lightEffect.value = scene.add.graphics()
-  dayNightCycle.value.setDepth(1000)
+  lightEffect.value.setDepth(1000)
-}
-
-const updateDayNightCycle = (time: number) => {
-  if (!dayNightCycle.value) return
-
-  const darkness = Math.sin(((time % dayNightDuration) / dayNightDuration) * Math.PI) * maxDarkness
-  dayNightCycle.value.clear()
-  dayNightCycle.value.fillStyle(0x000000, darkness)
-  dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
 }
 
 const createRainEffect = (scene: Phaser.Scene) => {
@@ -67,13 +49,7 @@ const createRainEffect = (scene: Phaser.Scene) => {
     blendMode: 'ADD'
   })
   rainEmitter.value.setDepth(900)
-  toggleRain(true) // Start with rain off
+  rainEmitter.value.stop()
-}
-
-const toggleRain = (isRaining: boolean) => {
-  if (rainEmitter.value) {
-    rainEmitter.value.setVisible(isRaining)
-  }
 }
 
 const createFogEffect = (scene: Phaser.Scene) => {
@@ -83,26 +59,48 @@ const createFogEffect = (scene: Phaser.Scene) => {
   fogSprite.value.setDepth(950)
 }
 
-const updateFogEffect = () => {
+const updateEffects = () => {
-  if (fogSprite.value) {
+  const effects = zoneStore.zone?.zoneEffects || []
-    // Example: Oscillate fog opacity
+
-    const fogOpacity = ((Math.sin(Date.now() / 5000) + 1) / 2) * 0.3
+  effects.forEach(effect => {
-    fogSprite.value.setAlpha(fogOpacity)
+    switch (effect.effect) {
+      case 'light':
+        updateLightEffect(effect.strength)
+        break
+      case 'rain':
+        updateRainEffect(effect.strength)
+        break
+      case 'fog':
+        updateFogEffect(effect.strength)
+        break
+    }
+  })
+}
+
+const updateLightEffect = (strength: number) => {
+  if (!lightEffect.value) return
+  const darkness = 1 - (strength / 100)
+  lightEffect.value.clear()
+  lightEffect.value.fillStyle(0x000000, darkness)
+  lightEffect.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
+}
+
+const updateRainEffect = (strength: number) => {
+  if (!rainEmitter.value) return
+  if (strength > 0) {
+    rainEmitter.value.start()
+    rainEmitter.value.setQuantity(Math.floor((strength / 100) * 10))
+  } else {
+    rainEmitter.value.stop()
   }
 }
 
-// Expose methods to control effects
+const updateFogEffect = (strength: number) => {
-const controlEffects = {
+  if (!fogSprite.value) return
-  toggleRain,
+  fogSprite.value.setAlpha(strength / 100)
-  setFogDensity: (density: number) => {
-    if (fogSprite.value) {
-      fogSprite.value.setAlpha(density)
-    }
-  }
 }
 
-// Make control methods available to parent components
+watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
-defineExpose(controlEffects)
 
 onBeforeUnmount(() => {
   if (sceneRef.value) sceneRef.value.scene.remove('effects')