noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dennis Postma 2024-06-08 15:29:49 +02:00
parent 247e7e1b84
commit b25a05839e
4 changed files with 70 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
package-lock.json generated
View File

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

11
src/components/Game.vue
View File

@ -1,5 +1,14 @@
<template> <template>
<div class="game-container"> <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> <div class="top-ui"><Hud /></div>
<Game :config="gameConfig" class="game" @create="createGame"> <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 Chat from '@/components/game/Chat.vue'
import Menubar from '@/components/game/Menu.vue' import Menubar from '@/components/game/Menu.vue'
import { onUnmounted } from 'vue' import { onUnmounted } from 'vue'
import ZoneEditor from '@/components/utilities/zoneEditor/ZoneEditor.vue'
import Modal from '@/components/utilities/Modal.vue'
const socket = useSocketStore() const socket = useSocketStore()

9
src/components/screens/Login.vue
View File

@ -23,15 +23,6 @@
</div> </div>
<audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio> <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" /> <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> </template>
<script setup lang="ts"> <script setup lang="ts">

28
src/components/utilities/zoneEditor/ZoneEditor.vue
View File

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