#137 : Added logic to set effects per zone in zone editor

src/components/gameMaster/zoneEditor/ZoneEditor.vue

@@ -48,6 +48,7 @@ function save() {
     height: zoneEditorStore.zoneSettings.height,
     tiles: zoneEditorStore.zone.tiles,
     pvp: zoneEditorStore.zone.pvp,
+    zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
     zoneEventTiles: zoneEditorStore.zone.zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
     zoneObjects: zoneEditorStore.zone.zoneObjects.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
   }

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

@@ -6,19 +6,23 @@
 
     <template #modalBody>
       <div class="m-4">
-        <form method="post" @submit.prevent="" class="inline">
-          <div class="gap-2.5 flex flex-wrap">
+        <div class="space-x-2">
+          <button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'settings'">Settings</button>
+          <button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'effects'">Effects</button>
+        </div>
+        <form method="post" @submit.prevent="" class="inline" v-if="screen === 'settings'">
+          <div class="gap-2.5 flex flex-wrap mt-4">
             <div class="form-field-full">
               <label for="name">Name</label>
               <input class="input-field" v-model="name" name="name" id="name" />
             </div>
             <div class="form-field-half">
-              <label for="name">Width</label>
-              <input class="input-field" v-model="width" name="name" id="name" type="number" />
+              <label for="width">Width</label>
+              <input class="input-field" v-model="width" name="width" id="width" type="number" />
             </div>
             <div class="form-field-half">
-              <label for="name">Height</label>
-              <input class="input-field" v-model="height" name="name" id="name" type="number" />
+              <label for="height">Height</label>
+              <input class="input-field" v-model="height" name="height" id="height" type="number" />
             </div>
             <div class="form-field-full">
               <label for="pvp">PVP enabled</label>
@@ -29,6 +33,14 @@
             </div>
           </div>
         </form>
+        <form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
+          <div v-for="(effect, index) in zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
+            <input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
+            <input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
+            <button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
+          </div>
+          <button class="btn-green py-1 px-2 mt-2" type="button" @click="addEffect">Add Effect</button>
+        </form>
       </div>
     </template>
   </Modal>
@@ -40,16 +52,19 @@ import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 
 const zoneEditorStore = useZoneEditorStore()
+const screen = ref('settings')
 
 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 || [])
 
 watch(name, (value) => {
   zoneEditorStore.setZoneName(value)
@@ -66,4 +81,22 @@ watch(height, (value) => {
 watch(pvp, (value) => {
   zoneEditorStore.setZonePvp(value)
 })
+
+watch(zoneEffects, (value) => {
+  zoneEditorStore.setZoneEffects(value)
+}, { deep: true })
+
+const addEffect = () => {
+  zoneEffects.value.push({
+    id: Date.now().toString(), // Simple unique id generation
+    zoneId: zoneEditorStore.zone?.id,
+    zone: zoneEditorStore.zone,
+    effect: '',
+    strength: 1
+  })
+}
+
+const removeEffect = (index) => {
+  zoneEffects.value.splice(index, 1)
+}
 </script>

src/stores/zoneEditorStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
-import type { Zone, Object, Tile, ZoneObject, ZoneEffects } from '@/types'
+import type { Zone, Object, Tile, ZoneEffect } from '@/types'
 
 export type TeleportSettings = {
   toZoneId: number
@@ -33,7 +33,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
         width: 0,
         height: 0,
         pvp: false,
-        effects: [] as ZoneEffects[]
+        zoneEffects: [] as ZoneEffect[]
       },
       teleportSettings: {
         toZoneId: 0,
@@ -66,9 +66,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       if (!this.zone) return
       this.zone.pvp = pvp
     },
-    setZoneEffects(zoneEffects: ZoneEffects) {
+    setZoneEffects(zoneEffects: ZoneEffect[]) {
       if (!this.zone) return
-      this.zone.zoneEffects = zoneEffects
+      this.zoneSettings.zoneEffects = zoneEffects
     },
     setTool(tool: string) {
       this.tool = tool

src/types.ts

@@ -53,7 +53,7 @@ export type Zone = {
   height: number
   tiles: any | null
   pvp: boolean
-  zoneEffects: ZoneEffects
+  zoneEffects: ZoneEffect[]
   zoneEventTiles: ZoneEventTile[]
   zoneObjects: ZoneObject[]
   characters: Character[]
@@ -62,7 +62,7 @@ export type Zone = {
   updatedAt: Date
 }
 
-export type ZoneEffects = {
+export type ZoneEffect = {
   id: string
   zoneId: number
   zone: Zone