Zone editor GUI (WIP), added a few helper functions

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -16,9 +16,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
+import config from '@/config'
 
-const tileWidth = 64;
-const tileHeight = 32;
+const tileWidth = config.tile_size.x;
+const tileHeight = config.tile_size.y;
 const tiles = ref([]);
 const selectedTile = ref(null);
 const tileCanvas = ref(null);

src/components/utilities/zoneEditor/ZoneEditorToolbar.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="toolbar">
+    <div class="tools">
+      <button :class="{ active: activeTool === 'tiles' }" @click="activeTool = 'tiles'">
+        <img src="/assets/icons/zoneEditor/tiles.svg" alt="Eraser tool" />
+      </button>
+      <div class="divider"></div>
+      <button :class="{ active: activeTool === 'eraser' }" @click="activeTool = 'eraser'">
+        <img src="/assets/icons/zoneEditor/eraser-tool.svg" alt="Eraser tool" />
+      </button>
+    </div>
+    <div class="buttons">
+      <button class="btn-cyan">Save</button>
+      <button class="btn-cyan">Load</button>
+      <button class="btn-cyan">Clear</button>
+      <button class="btn-cyan">Exit</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeTool = ref('tiles');
+</script>
+
+<style scoped lang="scss">
+@import '@/assets/scss/main';
+
+.toolbar {
+  position: absolute;
+  border-radius: 5px;
+  opacity: 0.8;
+  display: flex;
+  background: $dark-gray;
+  border: 2px solid $cyan;
+  color: $light-gray;
+  padding: 5px;
+  min-width: 100%;
+  height: 40px;
+
+  .tools {
+    display: flex;
+    gap: 10px;
+
+    .divider {
+      width: 1px;
+      background: $cyan;
+    }
+
+    // vertical center
+    button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &.active {
+        border-bottom: 3px solid $light-cyan;
+        border-radius: 5px;
+      }
+    }
+
+    img {
+      filter: invert(1);
+      width: 35px;
+      height: 35px;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    gap: 10px;
+    margin-left: auto;
+
+    button {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+}
+</style>