diff --git a/package-lock.json b/package-lock.json
index 5f82427..46ce8bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"@vueuse/core": "^10.9.0",
"@vueuse/integrations": "^10.10.0",
"axios": "^1.6.8",
+ "jszip": "^3.10.1",
"phaser": "^3.80.1",
"pinia": "^2.1.7",
"socket.io-client": "^4.7.5",
@@ -1774,9 +1775,9 @@
"license": "MIT"
},
"node_modules/@types/node": {
- "version": "20.14.6",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.6.tgz",
- "integrity": "sha512-JbA0XIJPL1IiNnU7PFxDXyfAwcwVVrOoqyzzyQTyMeVhBzkJVMSkC1LlVsRQ2lpqiY4n6Bb9oCS6lzDKVQxbZw==",
+ "version": "20.14.8",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.8.tgz",
+ "integrity": "sha512-DO+2/jZinXfROG7j7WKFn/3C6nFwxy2lLpgLjEXJz+0XKphZlTLJ14mo8Vfg8X5BWN6XjyESXq+LcYdT7tR3bA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2136,33 +2137,30 @@
}
},
"node_modules/@volar/language-core": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0.tgz",
- "integrity": "sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==",
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.1.tgz",
+ "integrity": "sha512-25CZ3ulM6jWgQsPQjKb7maKDlryvXWvsl7ytw4uj1Yyy17BgdiTWqMuNSxIODC3+/7IBOOGYoINC/1OOLACLLw==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@volar/source-map": "2.3.0"
+ "@volar/source-map": "2.3.1"
}
},
"node_modules/@volar/source-map": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0.tgz",
- "integrity": "sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==",
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.1.tgz",
+ "integrity": "sha512-fU3IL19wRy5S5OaGq67ejSl+/xdMuOHgp9Rsp3OiOhLyg25CctLYDdGZ9Y3+MJ1iqTLDh94PdvdR1BZX6I0hNQ==",
"dev": true,
- "license": "MIT",
- "dependencies": {
- "muggle-string": "^0.4.0"
- }
+ "license": "MIT"
},
"node_modules/@volar/typescript": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0.tgz",
- "integrity": "sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==",
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.1.tgz",
+ "integrity": "sha512-OrUV6dYt/1h92+aWElexra6dp++gF/IEddvwyxeobyYfKAoKDUMsWU0iJCj0clZlfdyYaLmNEAkulJlVimxnOw==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@volar/language-core": "2.3.0",
+ "@volar/language-core": "2.3.1",
"path-browserify": "^1.0.1",
"vscode-uri": "^3.0.8"
}
@@ -2302,14 +2300,14 @@
"license": "MIT"
},
"node_modules/@vue/devtools-core": {
- "version": "7.3.2",
- "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.2.tgz",
- "integrity": "sha512-WJ0VQJ+zIiS5Q0k7AEPXsFStdOnZY+Eg7vbFiMHq3Z2glfyJWVrBljJU2mOxPYHdqS/ok7z0dZSMP8gotY+1OA==",
+ "version": "7.3.3",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.3.tgz",
+ "integrity": "sha512-i6Bwkx4OwfY0QVHjAdsivhlzZ2HMj7fbNRYJsWspQ+dkA1f3nTzycPqZmVUsm2TGkbQlhTMhCAdDoP97JKoc+g==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-kit": "^7.3.2",
- "@vue/devtools-shared": "^7.3.2",
+ "@vue/devtools-kit": "^7.3.3",
+ "@vue/devtools-shared": "^7.3.3",
"mitt": "^3.0.1",
"nanoid": "^3.3.4",
"pathe": "^1.1.2",
@@ -2317,13 +2315,13 @@
}
},
"node_modules/@vue/devtools-kit": {
- "version": "7.3.2",
- "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.2.tgz",
- "integrity": "sha512-ba60JnbeLPzhfF5j0BPDGn9q5Ma9dWUV5gtVNjD+zm5uRf7LW8saAGNRnxxkRA56HZFzSAnXRGADc7YMAdrm0w==",
+ "version": "7.3.3",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.3.tgz",
+ "integrity": "sha512-m+dFI57BrzKYPKq73mt4CJ5GWld5OLBseLHPHGVP7CaILNY9o1gWVJWAJeF8XtQ9LTiMxZSaK6NcBsFuxAhD0g==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-shared": "^7.3.2",
+ "@vue/devtools-shared": "^7.3.3",
"birpc": "^0.2.17",
"hookable": "^5.5.3",
"mitt": "^3.0.1",
@@ -2333,9 +2331,9 @@
}
},
"node_modules/@vue/devtools-shared": {
- "version": "7.3.2",
- "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.2.tgz",
- "integrity": "sha512-RpYfqStbzljD6zf9LPXF2T7kM3fMfepxJB5yjzyloFel5nEB49DUm4TeA426IH+hKvwjjRorZyh6CT1cG/H2Vw==",
+ "version": "7.3.3",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.3.tgz",
+ "integrity": "sha512-JQTVDM1WE4RRAsHTZvAB7+jczdHcbHgNUU/MWSIx5sV7FzCmnyWETPQ7K4/Y477weqT5xbybtBaK/OpzdaCiBQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3170,6 +3168,12 @@
"url": "https://github.com/sponsors/mesqueeb"
}
},
+ "node_modules/core-util-is": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+ "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+ "license": "MIT"
+ },
"node_modules/cross-fetch": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
@@ -3440,9 +3444,9 @@
}
},
"node_modules/electron-to-chromium": {
- "version": "1.4.806",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.806.tgz",
- "integrity": "sha512-nkoEX2QIB8kwCOtvtgwhXWy2IHVcOLQZu9Qo36uaGB835mdX/h8uLRlosL6QIhLVUnAiicXRW00PwaPZC74Nrg==",
+ "version": "1.4.810",
+ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.810.tgz",
+ "integrity": "sha512-Kaxhu4T7SJGpRQx99tq216gCq2nMxJo+uuT6uzz9l8TVN2stL7M06MIIXAtr9jsrLs2Glflgf2vMQRepxawOdQ==",
"dev": true,
"license": "ISC"
},
@@ -4358,6 +4362,12 @@
"node": ">= 4"
}
},
+ "node_modules/immediate": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+ "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+ "license": "MIT"
+ },
"node_modules/immutable": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
@@ -4408,7 +4418,6 @@
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
- "dev": true,
"license": "ISC"
},
"node_modules/ini": {
@@ -4568,6 +4577,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/isarray": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+ "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+ "license": "MIT"
+ },
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4777,6 +4792,18 @@
"node": ">= 10.0.0"
}
},
+ "node_modules/jszip": {
+ "version": "3.10.1",
+ "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+ "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+ "license": "(MIT OR GPL-3.0-or-later)",
+ "dependencies": {
+ "lie": "~3.3.0",
+ "pako": "~1.0.2",
+ "readable-stream": "~2.3.6",
+ "setimmediate": "^1.0.5"
+ }
+ },
"node_modules/keyv": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -4808,6 +4835,15 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/lie": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+ "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+ "license": "MIT",
+ "dependencies": {
+ "immediate": "~3.0.5"
+ }
+ },
"node_modules/local-pkg": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
@@ -5020,13 +5056,6 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"license": "MIT"
},
- "node_modules/muggle-string": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
- "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
- "dev": true,
- "license": "MIT"
- },
"node_modules/mustache": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
@@ -5341,6 +5370,12 @@
"dev": true,
"license": "BlueOak-1.0.0"
},
+ "node_modules/pako": {
+ "version": "1.0.11",
+ "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+ "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+ "license": "(MIT AND Zlib)"
+ },
"node_modules/papaparse": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz",
@@ -5710,6 +5745,12 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
+ "node_modules/process-nextick-args": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+ "license": "MIT"
+ },
"node_modules/proto-list": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -5789,6 +5830,21 @@
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
}
},
+ "node_modules/readable-stream": {
+ "version": "2.3.8",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+ "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+ "license": "MIT",
+ "dependencies": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.3",
+ "isarray": "~1.0.0",
+ "process-nextick-args": "~2.0.0",
+ "safe-buffer": "~5.1.1",
+ "string_decoder": "~1.1.1",
+ "util-deprecate": "~1.0.1"
+ }
+ },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -5987,6 +6043,12 @@
"queue-microtask": "^1.2.2"
}
},
+ "node_modules/safe-buffer": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+ "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+ "license": "MIT"
+ },
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -6038,6 +6100,12 @@
"node": ">=10"
}
},
+ "node_modules/setimmediate": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+ "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+ "license": "MIT"
+ },
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6177,6 +6245,15 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/string_decoder": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+ "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+ "license": "MIT",
+ "dependencies": {
+ "safe-buffer": "~5.1.0"
+ }
+ },
"node_modules/string-width": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -6632,7 +6709,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
- "dev": true,
"license": "MIT"
},
"node_modules/vite": {
@@ -6760,15 +6836,15 @@
}
},
"node_modules/vite-plugin-vue-devtools": {
- "version": "7.3.2",
- "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.2.tgz",
- "integrity": "sha512-ysFbLOZrTfdk+jcQzwL3vv1wNaBXxBbY3Ux0eD88adZzdrpQ/AT8ZlepWJCJ6JWsZjjU5yC/7N9s9uXD7+PQiQ==",
+ "version": "7.3.3",
+ "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.3.tgz",
+ "integrity": "sha512-LWOCjArhHaSJ/rzInFkCnEccUB/F1sxyof0govFPpUeglq3CLnkP7bj55bQAixwYBN2pwK9DmDidcXXrX6QVFw==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-core": "^7.3.2",
- "@vue/devtools-kit": "^7.3.2",
- "@vue/devtools-shared": "^7.3.2",
+ "@vue/devtools-core": "^7.3.3",
+ "@vue/devtools-kit": "^7.3.3",
+ "@vue/devtools-shared": "^7.3.3",
"execa": "^8.0.1",
"sirv": "^2.0.4",
"vite-plugin-inspect": "^0.8.4",
diff --git a/package.json b/package.json
index 4fcebf9..e0254a4 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"@vueuse/core": "^10.9.0",
"@vueuse/integrations": "^10.10.0",
"axios": "^1.6.8",
+ "jszip": "^3.10.1",
"phaser": "^3.80.1",
"pinia": "^2.1.7",
"socket.io-client": "^4.7.5",
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
index 256e983..1e2fe8c 100644
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -12,6 +12,9 @@ $blue-gray: #778899;
$cyan: #368f8b;
$dark-cyan: #376362;
$light-cyan: #00b3b3;
+$bordeaux: #800020;
+$dark-bordeaux: #4c0000;
+$light-bordeaux: #cc0033;
$green: #09ad19;
// Fonts
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index fd97fb7..355253c 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -79,11 +79,22 @@ button {
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
- &:hover {
+ &.active, &:hover {
background-color: $cyan;
}
}
+ &.btn-bordeaux {
+ background-color: rgba($bordeaux, 0.5);
+ border: 1px solid $white;
+ border-radius: 5px;
+ text-shadow: 0 3px 6px rgba($black, 0.2);
+
+ &.active, &:hover {
+ background-color: $bordeaux;
+ }
+ }
+
&:hover {
cursor: pointer;
}
diff --git a/src/components/utilities/GmPanel.vue b/src/components/utilities/GmPanel.vue
index 6fc5ca5..9757290 100644
--- a/src/components/utilities/GmPanel.vue
+++ b/src/components/utilities/GmPanel.vue
@@ -1,11 +1,14 @@
<template>
- <Modal :isModalOpen="true" :modal-width="800" :modal-height="650">
+ <Modal :isModalOpen="true" :modal-width="1000" :modal-height="650">
<template #modalHeader>
<h3 class="modal-title">GM Panel</h3>
<div class="gm-selector">
- <button class="btn-cyan" @click="toggle = 'asset-manager'">Asset Manager</button>
- <button class="btn-cyan" >Button 2</button>
- <button class="btn-cyan" >Button 3</button>
+ <button class="btn-cyan">General</button>
+ <button class="btn-cyan">Users</button>
+ <button class="btn-cyan">Items</button>
+ <button class="btn-cyan">NPCs</button>
+ <button class="btn-cyan">Chats</button>
+ <button class="btn-cyan active">AM</button>
</div>
</template>
<template #modalBody>
@@ -19,24 +22,20 @@
<script setup lang="ts">
import { ref } from 'vue'
import Modal from '@/components/utilities/Modal.vue'
-import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
+import AssetManager from '@/components/utilities/assetManager/AssetManager.vue'
let toggle = ref('asset-manager');
</script>
-<style lang="scss">
+<style lang="scss" scoped>
@import '@/assets/scss/main';
.gm-selector {
display: flex;
gap: 5px;
- align-self: end;
button {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- border-bottom: none;
padding: 6px 15px;
min-width: 100px;
}
diff --git a/src/components/utilities/AssetManager/AssetManager.vue b/src/components/utilities/assetManager/AssetManager.vue
similarity index 68%
rename from src/components/utilities/AssetManager/AssetManager.vue
rename to src/components/utilities/assetManager/AssetManager.vue
index 097f9ef..022daff 100644
--- a/src/components/utilities/AssetManager/AssetManager.vue
+++ b/src/components/utilities/assetManager/AssetManager.vue
@@ -1,13 +1,13 @@
<template>
<div class="assets-container">
<div class="asset-categories">
- <!-- TODO: Asset categories, replace with loop -->
- <a class="category">
+
+ <!-- Asset Categories -->
+ <a class="category selected">
<span class="category-name">Tiles</span>
</a>
- <!-- Example selected category -->
- <a class="category selected">
- <span class="category-name">Walls</span>
+ <a class="category">
+ <span class="category-name">Objects</span>
</a>
<a class="category">
<span class="category-name">Weapons</span>
@@ -17,46 +17,42 @@
</a>
</div>
- <!-- TODO: Show content based on selected category, replace with loop -->
- <div class="assets tiles">
-
+ <!-- Assets -->
+ <div class="assets active">
+ <a class="asset">
+ <span class="asset-name">Upload new</span>
+ <input ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
+ </a>
+ <a class="asset">
+ <span class="asset-name" v-for="(tile, index) in tiles" :key="index">{{ tile }}</span>
+ </a>
</div>
- <!-- Example selected category & asset -->
- <div class="assets walls active">
+ <div class="assets">
<a class="asset selected">
<span class="asset-name">Wall #1</span>
</a>
</div>
- <div class="assets weapons">
+ <div class="assets">
</div>
- <div class="assets npcs">
+ <div class="assets">
</div>
<div class="asset-info">
<div class="image-container">
- <img src="/assets/placeholders/wall-1.png"/>
+ <img src="/assets/placeholders/wall-1.png" />
</div>
<div class="modal-form asset-manager">
<form class="form-fields">
<div class="form-field name">
<label for="name">Name</label>
- <input class="input-cyan" type="text" name="name" placeholder="Wall #1">
- </div>
-
- <div class="form-field">
- <label for="originX">OriginX</label>
- <input class="input-cyan" type="number" name="originX" placeholder="0">
- </div>
-
- <div class="form-field">
- <label for="originY">OriginY</label>
- <input class="input-cyan" type="number" name="originY" placeholder="0">
+ <input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="submit">
- <button class="btn-cyan" type="submit">SAVE</button>
+ <button class="btn-cyan" type="submit">Save</button>
+ <button class="btn-bordeaux" type="submit">Remove</button>
</div>
</form>
</div>
@@ -65,6 +61,24 @@
</template>
<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import {useSocketStore} from '@/stores/socket'
+
+const socket = useSocketStore()
+const tileUploadField = ref(null)
+const tiles = ref()
+
+const handleFileUpload = (e: Event) => {
+ const files = (e.target as HTMLInputElement).files
+ if (!files) return
+ socket.connection.emit('gm:tile:upload', files)
+}
+
+onMounted(() => {
+ socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+ tiles.value = response
+ })
+})
</script>
<style lang="scss">
@@ -87,7 +101,7 @@
}
.assets {
- width: 25%;
+ width: 35%;
display: none;
&.active {
display: flex;
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index b4c6b40..d865b1c 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -21,6 +21,7 @@ import { ref, onMounted, nextTick } from 'vue'
import config from '@/config'
import Modal from '@/components/utilities/Modal.vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
+import JSZip from 'jszip'
const tileWidth = config.tile_size.x
const tileHeight = config.tile_size.y