From b25a05839ed87044c614f17ca379011304464246 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sat, 8 Jun 2024 15:29:49 +0200
Subject: [PATCH] npm update, moved tile editor to game, load tiles image
 instead of needing to select one

---
 package-lock.json                             | 62 +++++++++++--------
 src/components/Game.vue                       | 11 ++++
 src/components/screens/Login.vue              |  9 ---
 .../utilities/zoneEditor/ZoneEditor.vue       | 50 +++++++--------
 4 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 720fbc6..daddaab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2134,19 +2134,19 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.2.5.tgz",
-      "integrity": "sha512-2htyAuxRrAgETmFeUhT4XLELk3LiEcqoW/B8YUXMF6BrGWLMwIR09MFaZYvrA2UhbdAeSyeQ726HaWSWkexUcQ==",
+      "version": "2.3.0-alpha.14",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0-alpha.14.tgz",
+      "integrity": "sha512-80HmdD27fPHs+EB9s5RIdRFdvKil2xXMbsKSPYcPFOLP3iysOJ/i9OKnG83Rhgn6rTLJdfM97WOdx/dsBwJtag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.2.5"
+        "@volar/source-map": "2.3.0-alpha.14"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.2.5.tgz",
-      "integrity": "sha512-wrOEIiZNf4E+PWB0AxyM4tfhkfldPsb3bxg8N6FHrxJH2ohar7aGu48e98bp3pR9HUA7P/pR9VrLmkTrgCCnWQ==",
+      "version": "2.3.0-alpha.14",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0-alpha.14.tgz",
+      "integrity": "sha512-la0CSIfo593WRga2r9STkCtObECX/3xZs4cQKlygU8G13zCtYP8uOQc/jgBQEQK3ne50i7X4Z0ZRLj9ht8+Ppg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2154,14 +2154,15 @@
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.2.5.tgz",
-      "integrity": "sha512-eSV/n75+ppfEVugMC/salZsI44nXDPAyL6+iTYCNLtiLHGJsnMv9GwiDMujrvAUj/aLQyqRJgYtXRoxop2clCw==",
+      "version": "2.3.0-alpha.14",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0-alpha.14.tgz",
+      "integrity": "sha512-YnaivvHu/HlVgFRUFPh3X42GXYawSIXPvkIGND/RZXJ1iyrj9CB/UEtsMUV55TOULbfJyc92F2EpOMn/lMyqwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.2.5",
-        "path-browserify": "^1.0.1"
+        "@volar/language-core": "2.3.0-alpha.14",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
       }
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
@@ -2381,13 +2382,13 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.19.tgz",
-      "integrity": "sha512-A9EGOnvb51jOvnCYoRLnMP+CcoPlbZVxI9gZXE/y2GksRWM6j/PrLEIC++pnosWTN08tFpJgxhSS//E9v/Sg+Q==",
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.20.tgz",
+      "integrity": "sha512-PudZnVVhZV9++4xndha6K8G1P+pa5WB4H926IK6Pn82EKD+7MEnBJ858t+cI5jpXqx1X/72+NfzRrgsocN5LrA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "~2.2.4",
+        "@volar/language-core": "~2.3.0-alpha.14",
         "@vue/compiler-dom": "^3.4.0",
         "@vue/shared": "^3.4.0",
         "computeds": "^0.0.1",
@@ -3408,9 +3409,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.795",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.795.tgz",
-      "integrity": "sha512-hHo4lK/8wb4NUa+NJYSFyJ0xedNHiR6ylilDtb8NUW9d4dmBFmGiecYEKCEbti1wTNzbKXLfl4hPWEkAFbHYlw==",
+      "version": "1.4.796",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.796.tgz",
+      "integrity": "sha512-NglN/xprcM+SHD2XCli4oC6bWe6kHoytcyLKCWXmRL854F0qhPhaYgUswUsglnPxYaNQIg2uMY4BvaomIf3kLA==",
       "dev": true,
       "license": "ISC"
     },
@@ -6823,6 +6824,13 @@
         }
       }
     },
+    "node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vue": {
       "version": "3.4.27",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz",
@@ -6845,9 +6853,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.19.tgz",
-      "integrity": "sha512-cN3f1aTxxKo4lzNeQAkVopswuImUrb5Iurll9Gaw5cqpnbTAxtEMM1mgi6ou4X79OCyqYv1U1mzBHJkzmiK82w==",
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.20.tgz",
+      "integrity": "sha512-Weol01CnbTkPrKHT4Gi5q+llB170X/q/oJ0AYrC1zRBm+OhEun1+j4mKr2Y1kXG1hgGnjvuBPshy+bRefGczTA==",
       "dev": true,
       "license": "MIT"
     },
@@ -6888,14 +6896,14 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.0.19",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.19.tgz",
-      "integrity": "sha512-JWay5Zt2/871iodGF72cELIbcAoPyhJxq56mPPh+M2K7IwI688FMrFKc/+DvB05wDWEuCPexQJ6L10zSwzzapg==",
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.20.tgz",
+      "integrity": "sha512-FlyW/vtf9mfUfOSMnPma2USaWwdZQKCHSTgtJwlt6q471ZaVzx9Wy4UiSCFW4bQHjExMzwmjbCbkYoYdiNFv0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/typescript": "~2.2.4",
-        "@vue/language-core": "2.0.19",
+        "@volar/typescript": "~2.3.0-alpha.14",
+        "@vue/language-core": "2.0.20",
         "semver": "^7.5.4"
       },
       "bin": {
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 9b27fa2..6d63ace 100644
--- a/src/components/Game.vue
+++ b/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()
 
diff --git a/src/components/screens/Login.vue b/src/components/screens/Login.vue
index c6485fd..64c86d3 100644
--- a/src/components/screens/Login.vue
+++ b/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">
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue
index 65a3949..3a9b539 100644
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/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);
 });
 
 /**