npm update, worked on zone effects

package-lock.json

@@ -2434,39 +2434,39 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.12.tgz",
-      "integrity": "sha512-PwAdxs7/9Hc3ieBO12tXzmTD+Ln4qhT/56S+8DvrrZ4kLDn4Z/AMUr8tXJD0axiJBS0RKIoNaR0yMuQB9v9Udg==",
+      "integrity": "sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.11",
+        "@vue/shared": "3.5.12",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz",
-      "integrity": "sha512-pyGf8zdbDDRkBrEzf8p7BQlMKNNF5Fk/Cf/fQ6PiUz9at4OaUfyXW0dGJTo2Vl1f5U9jSLCNf0EZJEogLXoeew==",
+      "integrity": "sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.11",
+        "@vue/compiler-core": "3.5.12",
-        "@vue/shared": "3.5.11"
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz",
-      "integrity": "sha512-gsbBtT4N9ANXXepprle+X9YLg2htQk1sqH/qGJ/EApl+dgpUBdTv3yP7YlR535uHZY3n6XaR0/bKo0BgwwDniw==",
+      "integrity": "sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==",
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.11",
+        "@vue/compiler-core": "3.5.12",
-        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-ssr": "3.5.11",
+        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.11",
+        "@vue/shared": "3.5.12",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.11",
         "postcss": "^8.4.47",
@@ -2474,13 +2474,13 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz",
-      "integrity": "sha512-P4+GPjOuC2aFTk1Z4WANvEhyOykcvEd5bIj2KVNGKGfM745LaXGr++5njpdBTzVz5pZifdlR1kpYSJJpIlSePA==",
+      "integrity": "sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-dom": "3.5.12",
-        "@vue/shared": "3.5.11"
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -2600,53 +2600,53 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.12.tgz",
-      "integrity": "sha512-Nqo5VZEn8MJWlCce8XoyVqHZbd5P2NH+yuAaFzuNSR96I+y1cnuUiq7xfSG+kyvLSiWmaHTKP1r3OZY4mMD50w==",
+      "integrity": "sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/shared": "3.5.11"
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.12.tgz",
-      "integrity": "sha512-7PsxFGqwfDhfhh0OcDWBG1DaIQIVOLgkwA5q6MtkPiDFjp5gohVnJEahSktwSFLq7R5PtxDKy6WKURVN1UDbzA==",
+      "integrity": "sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.11",
+        "@vue/reactivity": "3.5.12",
-        "@vue/shared": "3.5.11"
+        "@vue/shared": "3.5.12"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz",
-      "integrity": "sha512-GNghjecT6IrGf0UhuYmpgaOlN7kxzQBhxWEn08c/SQDxv1yy4IXI1bn81JgEpQ4IXjRxWtPyI8x0/7TF5rPfYQ==",
+      "integrity": "sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/reactivity": "3.5.11",
+        "@vue/reactivity": "3.5.12",
-        "@vue/runtime-core": "3.5.11",
+        "@vue/runtime-core": "3.5.12",
-        "@vue/shared": "3.5.11",
+        "@vue/shared": "3.5.12",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.12.tgz",
-      "integrity": "sha512-cVOwYBxR7Wb1B1FoxYvtjJD8X/9E5nlH4VSkJy2uMA1MzYNdzAAB//l8nrmN9py/4aP+3NjWukf9PZ3TeWULaA==",
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.11",
+        "@vue/compiler-ssr": "3.5.12",
-        "@vue/shared": "3.5.11"
+        "@vue/shared": "3.5.12"
       },
       "peerDependencies": {
-        "vue": "3.5.11"
+        "vue": "3.5.12"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.12.tgz",
-      "integrity": "sha512-W8GgysJVnFo81FthhzurdRAWP/byq3q2qIw70e0JWblzVhjgOMiC2GyovXrZTFQJnFVryYaKGP3Tc9vYzYm6PQ==",
+      "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==",
       "license": "MIT"
     },
     "node_modules/@vue/test-utils": {
@@ -5647,13 +5647,13 @@
       }
     },
     "node_modules/parse5": {
-      "version": "7.1.2",
+      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
-      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+      "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "entities": "^4.4.0"
+        "entities": "^4.5.0"
       },
       "funding": {
         "url": "https://github.com/inikulin/parse5?sponsor=1"
@@ -5755,9 +5755,9 @@
       "license": "MIT"
     },
     "node_modules/phaser": {
-      "version": "3.85.2",
+      "version": "3.86.0",
-      "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.85.2.tgz",
+      "resolved": "https://registry.npmjs.org/phaser/-/phaser-3.86.0.tgz",
-      "integrity": "sha512-bD/58E1gvCsEH0Lftb2BiJ8FQ86kb8HHOS656lLXPwg8ZXkskZGsfdyQO21Y57+neGOUEaUthSFfDyVULy5B1g==",
+      "integrity": "sha512-A7rog3GhXYcWsPimteQmudyY6W0fx0eviOoo9Cwpzae1RPeJBDkhmWv5IFrQO9dL+T907E4dprQPnd2D4WhoEw==",
       "license": "MIT",
       "dependencies": {
         "eventemitter3": "^5.0.1"
@@ -7430,16 +7430,16 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.5.11",
+      "version": "3.5.12",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.11.tgz",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.12.tgz",
-      "integrity": "sha512-/8Wurrd9J3lb72FTQS7gRMNQD4nztTtKPmuDuPuhqXmmpD6+skVjAeahNpVzsuky6Sy9gy7wn8UadqPtt9SQIg==",
+      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.11",
+        "@vue/compiler-dom": "3.5.12",
-        "@vue/compiler-sfc": "3.5.11",
+        "@vue/compiler-sfc": "3.5.12",
-        "@vue/runtime-dom": "3.5.11",
+        "@vue/runtime-dom": "3.5.12",
-        "@vue/server-renderer": "3.5.11",
+        "@vue/server-renderer": "3.5.12",
-        "@vue/shared": "3.5.11"
+        "@vue/shared": "3.5.12"
       },
       "peerDependencies": {
         "typescript": "*"

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>

src/screens/Game.vue

@@ -5,6 +5,7 @@
 
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
+        <Effects />
         <Scene name="main" @preload="preloadScene" @create="createScene">
           <div v-if="isLoaded">
             <Inventory />
@@ -51,6 +52,7 @@ import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
 import GmPanel from '@/components/gameMaster/GmPanel.vue'
 import Inventory from '@/components/gui/UserPanel.vue'
 import { loadAssets } from '@/composables/zoneComposable'
+import Effects from '@/components/Effects.vue'
 
 const gameStore = useGameStore()
 const zoneEditorStore = useZoneEditorStore()

src/stores/zoneEditorStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone, Object, Tile, ZoneObject } from '@/types'
+import type { Zone, Object, Tile, ZoneObject, ZoneEffects } from '@/types'
 
 export type TeleportSettings = {
   toZoneId: number
@@ -9,11 +9,6 @@ export type TeleportSettings = {
   toRotation: number
 }
 
-export type ZoneEffects = {
-  zoneEffect: string
-  zoneEffectPercentage: number
-}
-
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => {
     return {
@@ -39,10 +34,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
         width: 0,
         height: 0,
         pvp: false,
-        zoneEffects: {
+        effects: [] as ZoneEffects[]
-          zoneEffect: '',
-          zoneEffectPercentage: 0
-        } as ZoneEffects
       },
       teleportSettings: {
         toZoneId: 0,

src/types.ts

@@ -1,5 +1,3 @@
-import type { ZoneEffects } from '@/stores/zoneEditorStore'
-
 export type Notification = {
   id?: string
   title?: string
@@ -64,6 +62,14 @@ export type Zone = {
   updatedAt: Date
 }
 
+export type ZoneEffects = {
+  id: string
+  zoneId: number
+  zone: Zone
+  effect: string
+  strength: number
+}
+
 export type ZoneObject = {
   id: string
   zoneId: number