Stash WIP zone effect

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

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="350" :is-resizable="false">
+  <Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">Zone settings</h3>
     </template>
@@ -27,6 +27,20 @@
                 <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>
@@ -45,11 +59,13 @@ 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)
@@ -66,4 +82,8 @@ watch(height, (value) => {
 watch(pvp, (value) => {
   zoneEditorStore.setZonePvp(value)
 })
+
+watch(zoneEffects, (value) => {
+  zoneEditorStore.setZoneEffects({ zoneEffect: value, zoneEffectPercentage: zoneEffectPercentage.value })
+})
 </script>

src/stores/zoneEditorStore.ts

@@ -2,13 +2,18 @@ import { defineStore } from 'pinia'
 import { useGameStore } from '@/stores/gameStore'
 import type { Zone, Object, Tile, ZoneObject } from '@/types'
 
-type TeleportSettings = {
+export type TeleportSettings = {
   toZoneId: number
   toPositionX: number
   toPositionY: number
   toRotation: number
 }
 
+export type ZoneEffects = {
+  zoneEffect: string
+  zoneEffectPercentage: number
+}
+
 export const useZoneEditorStore = defineStore('zoneEditor', {
   state: () => {
     return {
@@ -33,14 +38,18 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
         name: '',
         width: 0,
         height: 0,
-        pvp: false
+        pvp: false,
+        zoneEffects: {
+          zoneEffect: '',
+          zoneEffectPercentage: 0
+        } as ZoneEffects
       },
       teleportSettings: {
         toZoneId: 0,
         toPositionX: 0,
         toPositionY: 0,
         toRotation: 0
-      }
+      } as TeleportSettings
     }
   },
   actions: {
@@ -66,6 +75,10 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
       if (!this.zone) return
       this.zone.pvp = pvp
     },
+    setZoneEffects(zoneEffects: ZoneEffects) {
+      if (!this.zone) return
+      this.zone.zoneEffects = zoneEffects
+    },
     setTool(tool: string) {
       this.tool = tool
     },

src/types.ts

@@ -1,3 +1,5 @@
+import type { ZoneEffects } from '@/stores/zoneEditorStore'
+
 export type Notification = {
   id?: string
   title?: string
@@ -53,6 +55,7 @@ export type Zone = {
   height: number
   tiles: any | null
   pvp: boolean
+  zoneEffects: ZoneEffects
   zoneEventTiles: ZoneEventTile[]
   zoneObjects: ZoneObject[]
   characters: Character[]