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

src/components/Game.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="game-container">
+    <Modal :isModalOpen="true">
+      <template #modal-header>
+        <h1>Zone Editor</h1>
+      </template>
+      <template #modal-body>
+        <ZoneEditor />
+      </template>
+    </Modal>
+
     <div class="top-ui"><Hud /></div>
 
     <Game :config="gameConfig" class="game" @create="createGame">
@@ -25,6 +34,8 @@ import Hud from '@/components/game/Hud.vue'
 import Chat from '@/components/game/Chat.vue'
 import Menubar from '@/components/game/Menu.vue'
 import { onUnmounted } from 'vue'
+import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
+import Modal from '@/components/utilities/Modal.vue'
 
 const socket = useSocketStore()
 

src/components/screens/Login.vue

@@ -23,15 +23,6 @@
   </div>
   <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
   <img draggable="false" src="/assets/bglogin.png" id="bg-img" alt="New Quest login background" />
-
-  <Modal :isModalOpen="true">
-    <template #modal-header>
-      <h1>Zone Editor</h1>
-    </template>
-    <template #modal-body>
-      <ZoneEditor />
-    </template>
-  </Modal>
 </template>
 
 <script setup lang="ts">

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);
 });
 
 /**