WIP

src/components/utilities/zoneEditor/Toolbar.vue

@@ -13,8 +13,21 @@
         <button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
           <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
         </button>
+        <div class="divider"></div>
+        <button>
+          <img src="/assets/icons/zoneEditor/gear.svg" alt="Zone settings" />
+        </button>
+        <div class="divider"></div>
+        <button>
+          <img src="/assets/icons/zoneEditor/monster.svg" alt="Zone settings" />
+        </button>
+        <div class="divider"></div>
+        <button>
+          <img src="/assets/icons/zoneEditor/cart.svg" alt="Zone settings" />
+        </button>
       </div>
       <div class="buttons">
+        <button class="btn-cyan">Save as new</button>
         <button class="btn-cyan">Save</button>
         <button class="btn-cyan">Load</button>
         <button class="btn-cyan">Clear</button>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -3,6 +3,7 @@
   <Controls :layer="layer" />
   <Toolbar :layer="layer" @erase="erase" @tile="tile" />
   <Tiles />
+  <ZoneSettings />
 </template>
 
 <script setup lang="ts">
@@ -17,6 +18,7 @@ import { useZoneStore } from '@/stores/zone'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
+import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
 
 // Phavuer logic
 let scene = useScene()

src/components/utilities/zoneEditor/ZoneSettings.vue

@@ -0,0 +1,42 @@
+<template>
+  <Modal :isModalOpen="properties.isModalOpen" @modal:close="() => console.log(1)">
+    <template #modalHeader>
+      <h3 class="modal-title">Zone settings</h3>
+    </template>
+
+    <template #modalBody>
+      <form method="post" @submit.prevent="" class="modal-form">
+        <div class="form-fields">
+          <div>
+            <label for="name">Name</label>
+            <input v-model="name" name="name" id="name" />
+          </div>
+          <div>
+            <label for="name">Width</label>
+            <input v-model="name" name="name" id="name" />
+
+            <label for="name">Height</label>
+            <input v-model="name" name="name" id="name" />
+          </div>
+          <div>
+            <label for="name">PVP enabled</label>
+            <input v-model="name" name="name" id="name" />
+          </div>
+        </div>
+        <div class="submit">
+          <button class="btn-cyan" type="submit">Save</button>
+        </div>
+      </form>
+      <button class="btn-cyan" @click="() => console.log(1)">Cancel</button>
+    </template>
+  </Modal>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Modal from '@/components/utilities/Modal.vue'
+
+const properties = ref({
+  isModalOpen: true
+})
+</script>