npm update, moved tile editor to game, load tiles image instead of needing to select one

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -1,15 +1,16 @@
 <template>
-  <input type="file" @change="onFileChange" accept="image/*" />
-  <canvas ref="tileCanvas" :width="tileWidth" :height="tileHeight" style="display: none;"></canvas>
-  <div class="tiles">
-    <img
-      v-for="(tile, index) in tiles"
-      :key="index"
-      :src="tile"
-      alt="Tile"
-      @click="selectTile(index)"
-      :class="{ selected: selectedTile === index }"
-    />
+  <div>
+    <canvas ref="tileCanvas" :width="tileWidth" :height="tileHeight" style="display: none;"></canvas>
+    <div class="tiles">
+      <img
+        v-for="(tile, index) in tiles"
+        :key="index"
+        :src="tile"
+        alt="Tile"
+        @click="selectTile(index)"
+        :class="{ selected: selectedTile === index }"
+      />
+    </div>
   </div>
 </template>
 
@@ -22,19 +23,15 @@ const tiles = ref([]);
 const selectedTile = ref(null);
 const tileCanvas = ref(null);
 
-const onFileChange = (event) => {
-  const file = event.target.files[0];
-  if (file) {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const img = new Image();
-      img.onload = () => {
-        splitTiles(img);
-      };
-      img.src = e.target.result;
-    };
-    reader.readAsDataURL(file);
-  }
+// Hardcoded image path
+const imagePath = '/assets/tiles/default.png';
+
+const loadImage = (src) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.src = src;
+  });
 };
 
 const splitTiles = (img) => {
@@ -67,8 +64,9 @@ const selectTile = (index) => {
   selectedTile.value = index;
 };
 
-onMounted(() => {
-  // Any additional setup if needed
+onMounted(async () => {
+  const img = await loadImage(imagePath);
+  splitTiles(img);
 });
 
 /**