imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests 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": {
"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": {

11
src/components/Game.vue
View File

@ -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()

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

@ -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">

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

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