npm update, worked on zone effects

src/components/Effects.vue

@@ -0,0 +1,106 @@
+<template>
+  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene">
+  </Scene>
+</template>
+
+<script setup lang="ts">
+import { Scene } from 'phavuer'
+import { useGameStore } from '@/stores/gameStore'
+import { useZoneEditorStore } from '@/stores/zoneEditorStore'
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+
+const gameStore = useGameStore()
+const zoneEditorStore = useZoneEditorStore()
+
+// Effect-related refs
+const dayNightCycle = 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.3
+
+const preloadScene = async (scene: Phaser.Scene) => {
+  scene.load.image('raindrop', 'assets/raindrop.png')
+  scene.load.image('fog', 'assets/fog.png')
+}
+
+const createScene = async (scene: Phaser.Scene) => {
+  createDayNightCycle(scene)
+  createRainEffect(scene)
+  createFogEffect(scene)
+}
+
+const updateScene = (scene: Phaser.Scene, time: number) => {
+  updateDayNightCycle(time)
+  updateFogEffect()
+}
+
+const createDayNightCycle = (scene: Phaser.Scene) => {
+  dayNightCycle.value = scene.add.graphics()
+  dayNightCycle.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) => {
+  rainEmitter.value = scene.add.particles(0, 0, 'raindrop', {
+    x: { min: 0, max: window.innerWidth },
+    y: -50,
+    quantity: 5,
+    lifespan: 2000,
+    speedY: { min: 300, max: 500 },
+    scale: { start: 0.1, end: 0.2 },
+    alpha: { start: 0.5, end: 0 },
+    blendMode: 'ADD'
+  })
+  rainEmitter.value.setDepth(900)
+  toggleRain(false) // Start with rain off
+}
+
+const toggleRain = (isRaining: boolean) => {
+  if (rainEmitter.value) {
+    rainEmitter.value.setVisible(isRaining)
+  }
+}
+
+const createFogEffect = (scene: Phaser.Scene) => {
+  fogSprite.value = scene.add.sprite(window.width / 2, window.innerHeight / 2, 'fog')
+  fogSprite.value.setScale(2)
+  fogSprite.value.setAlpha(0)
+  fogSprite.value.setDepth(950)
+}
+
+const updateFogEffect = () => {
+  if (fogSprite.value) {
+    // Example: Oscillate fog opacity
+    const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3
+    fogSprite.value.setAlpha(fogOpacity)
+  }
+}
+
+// Expose methods to control effects
+const controlEffects = {
+  toggleRain,
+  setFogDensity: (density: number) => {
+    if (fogSprite.value) {
+      fogSprite.value.setAlpha(density)
+    }
+  }
+}
+
+// Make control methods available to parent components
+defineExpose(controlEffects)
+
+onBeforeUnmount(() => {
+  scene.destroy()
+})
+</script>

src/components/gameMaster/zoneEditor/partials/ZoneSettings.vue

@@ -27,20 +27,6 @@
                 <option :value="true">Yes</option>
               </select>
             </div>
-            <div class="form-field-full">
-              <label for="zoneEffects">Zone effects</label>
-              <select class="input-cyan" name="zoneEffects" id="zoneEffects" multiple>
-                <option :value="''">None</option>
-                <option :value="'darkness'">Darkness</option>
-                <option :value="'light'">Light</option>
-                <option :value="'rain'">Rain</option>
-                <option :value="'snow'">Snow</option>
-              </select>
-            </div>
-            <div class="form-field-full">
-              <label for="zoneEffectPercentage">Zone effect percentage</label>
-              <input class="input-cyan" v-model="zoneEffectPercentage" name="zoneEffectPercentage" id="zoneEffectPercentage" type="number" />
-            </div>
           </div>
         </form>
       </div>
@@ -59,13 +45,11 @@ zoneEditorStore.setZoneName(zoneEditorStore.zone.name)
 zoneEditorStore.setZoneWidth(zoneEditorStore.zone.width)
 zoneEditorStore.setZoneHeight(zoneEditorStore.zone.height)
 zoneEditorStore.setZonePvp(zoneEditorStore.zone.pvp)
-zoneEditorStore.setZoneEffects(zoneEditorStore.zone.zoneEffects)
 
 const name = ref(zoneEditorStore.zoneSettings.name)
 const width = ref(zoneEditorStore.zoneSettings.width)
 const height = ref(zoneEditorStore.zoneSettings.height)
 const pvp = ref(zoneEditorStore.zoneSettings.pvp)
-const zoneEffects = ref(zoneEditorStore.zoneSettings.zoneEffects.zoneEffect)
 
 watch(name, (value) => {
   zoneEditorStore.setZoneName(value)
@@ -82,8 +66,4 @@ watch(height, (value) => {
 watch(pvp, (value) => {
   zoneEditorStore.setZonePvp(value)
 })
-
-watch(zoneEffects, (value) => {
-  zoneEditorStore.setZoneEffects({ zoneEffect: value, zoneEffectPercentage: zoneEffectPercentage.value })
-})
 </script>