forked from noxious/client
More work on wall positioning, started working on GM asset manager
This commit is contained in:
parent
d7cc8ba8fd
commit
0339df9a8d
106
package-lock.json
generated
106
package-lock.json
generated
@ -2302,14 +2302,14 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/devtools-core": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.2.1.tgz",
|
||||
"integrity": "sha512-OyWl455UnJIVgZ6lo5WQ79WbDMoXtSRwyNKp9WzCZ0HhuQywIk4qv59KtLRe75uVmtGBde4hXNaSyRm+x9bY6g==",
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.0.tgz",
|
||||
"integrity": "sha512-J5nmaYadJvDgH9zsQI9vSLlWjfZn/TdKWEKMcc9xjbF3OvdhQwRrojvFax1G+WPoQ/X67EZKeUVY/ovCCyLo7A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-kit": "^7.2.1",
|
||||
"@vue/devtools-shared": "^7.2.1",
|
||||
"@vue/devtools-kit": "^7.3.0",
|
||||
"@vue/devtools-shared": "^7.3.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nanoid": "^3.3.4",
|
||||
"pathe": "^1.1.2",
|
||||
@ -2317,26 +2317,28 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-kit": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.2.1.tgz",
|
||||
"integrity": "sha512-Wak/fin1X0Q8LLIfCAHBrdaaB+R6IdpSXsDByPHbQ3BmkCP0/cIo/oEGp9i0U2+gEqD4L3V9RDjNf1S34DTzQQ==",
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.0.tgz",
|
||||
"integrity": "sha512-J9C+ue3Ka8cumQY/hMsNTcbb1tczqVBBXFMw4isa5YvPjyIBgEtJBfDSUVIK3nE+YWk7UNliUuCcE1GHEKaGcw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-shared": "^7.2.1",
|
||||
"@vue/devtools-shared": "^7.3.0",
|
||||
"birpc": "^0.2.17",
|
||||
"hookable": "^5.5.3",
|
||||
"mitt": "^3.0.1",
|
||||
"perfect-debounce": "^1.0.0",
|
||||
"speakingurl": "^14.0.1"
|
||||
"speakingurl": "^14.0.1",
|
||||
"superjson": "^2.2.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-shared": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.2.1.tgz",
|
||||
"integrity": "sha512-PCJF4UknJmOal68+X9XHyVeQ+idv0LFujkTOIW30+GaMJqwFVN9LkQKX4gLqn61KkGMdJTzQ1bt7EJag3TI6AA==",
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.0.tgz",
|
||||
"integrity": "sha512-bYw4BtZclxzVrYBeYYHzNOcLlvVZbe9tutwtrixTtdgynHvuSJa5KI2MqWiumpGYm2feFI5sHlC8Vt61v4z18g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -2835,6 +2837,16 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/birpc": {
|
||||
"version": "0.2.17",
|
||||
"resolved": "https://registry.npmjs.org/birpc/-/birpc-0.2.17.tgz",
|
||||
"integrity": "sha512-+hkTxhot+dWsLpp3gia5AkVHIsKlZybNT5gIYiDlNzJrmYPcTM9k5/w2uaj3IPpd7LlEYpmCj4Jj1nC41VhDFg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/boolbase": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
|
||||
@ -3145,6 +3157,22 @@
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/copy-anything": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
|
||||
"integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-what": "^4.1.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.13"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/cross-fetch": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
|
||||
@ -3415,9 +3443,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.802",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.802.tgz",
|
||||
"integrity": "sha512-TnTMUATbgNdPXVSHsxvNVSG0uEd6cSZsANjm8c9HbvflZVVn1yTRcmVXYT1Ma95/ssB/Dcd30AHweH2TE+dNpA==",
|
||||
"version": "1.4.803",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.803.tgz",
|
||||
"integrity": "sha512-61H9mLzGOCLLVsnLiRzCbc63uldP0AniRYPV3hbGVtONA1pI7qSGILdbofR7A8TMbOypDocEAjH/e+9k1QIe3g==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -3986,9 +4014,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/foreground-child": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.0.tgz",
|
||||
"integrity": "sha512-CrWQNaEl1/6WeZoarcM9LHupTo3RpZO2Pdk1vktwzPiQTsJnAKJmm3TACKeG5UZbWDfaH2AbvYxzP96y0MT7fA==",
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
|
||||
"integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
@ -4534,6 +4562,19 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-what": {
|
||||
"version": "4.1.16",
|
||||
"resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
|
||||
"integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12.13"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mesqueeb"
|
||||
}
|
||||
},
|
||||
"node_modules/is-wsl": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.0.tgz",
|
||||
@ -6295,6 +6336,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/superjson": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.1.tgz",
|
||||
"integrity": "sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"copy-anything": "^3.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@ -6722,19 +6776,19 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-vue-devtools": {
|
||||
"version": "7.2.1",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.2.1.tgz",
|
||||
"integrity": "sha512-4k7QNZz0nSojoePQoxnE5fIzi8RU1QJHc0TEg4golv2phZxhBGfjScZD2B8X6bcrRbUQ9CaRKN0dzBs1xtzzNg==",
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.0.tgz",
|
||||
"integrity": "sha512-XnxQzTloGkQUTpsRdWVsEBzyh9F6i8NBmuPo8lotx4lSUnWYJ+jUlXvfftzmOf14hFgsTOySLJCr9nhaqOzgOA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-core": "^7.2.1",
|
||||
"@vue/devtools-kit": "^7.2.1",
|
||||
"@vue/devtools-shared": "^7.2.1",
|
||||
"@vue/devtools-core": "^7.3.0",
|
||||
"@vue/devtools-kit": "^7.3.0",
|
||||
"@vue/devtools-shared": "^7.3.0",
|
||||
"execa": "^8.0.1",
|
||||
"sirv": "^2.0.4",
|
||||
"vite-plugin-inspect": "^0.8.4",
|
||||
"vite-plugin-vue-inspector": "^5.1.0"
|
||||
"vite-plugin-vue-inspector": "^5.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=v14.21.3"
|
||||
|
||||
BIN
public/assets/zone/wall1.png
Normal file
BIN
public/assets/zone/wall1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/assets/zone/wall2.png
Normal file
BIN
public/assets/zone/wall2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
18
src/components/utilities/AssetManager/AssetManager.vue
Normal file
18
src/components/utilities/AssetManager/AssetManager.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" :modal-width="800" :modal-height="560">
|
||||
<template #modalHeader>
|
||||
<h3 class="modal-title">Asset manager</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
|
||||
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="745" :modal-height="460">
|
||||
<template #modalHeader>
|
||||
<h3 class="modal-title">Walls</h3>
|
||||
<h3 class="modal-title">Decorations</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<canvas ref="canvas" :width="wallWidth" :height="wallHeight" style="display: none"></canvas>
|
||||
<div class="walls">
|
||||
<img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === index }" />
|
||||
<div class="buttons">
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Walls</button>
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">Decorations</button>
|
||||
<button class="btn-cyan" @click="zoneEditorStore.setDrawMode('tile')">NPC</button>
|
||||
</div>
|
||||
<hr>
|
||||
<canvas ref="canvas" :width="decorationWidth" :height="decorationHeight" style="display: none"></canvas>
|
||||
<div class="decorations">
|
||||
<img v-for="(decoration, index) in decorations" :key="index" :src="decoration" alt="Decoration" @click="zoneEditorStore.setSelectedDecoration(index)" :class="{ selected: zoneEditorStore.selectedDecoration && zoneEditorStore.selectedDecoration === index }" />
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
@ -20,10 +26,10 @@ import config from '@/config'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
|
||||
const wallWidth = config.wall_size.x
|
||||
const wallHeight = config.wall_size.y
|
||||
const walls = ref<number[][]>([])
|
||||
const selectedWall = ref<number | null>(null)
|
||||
const decorationWidth = config.wall_size.x
|
||||
const decorationHeight = config.wall_size.y
|
||||
const decorations = ref<number[][]>([])
|
||||
const selectedDecoration = ref<number | null>(null)
|
||||
const canvas = ref<HTMLCanvasElement | null>(null)
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
@ -39,7 +45,7 @@ const loadImage = (src: string): Promise<HTMLImageElement> => {
|
||||
})
|
||||
}
|
||||
|
||||
const splitWalls = (img: HTMLImageElement) => {
|
||||
const splitDecorations = (img: HTMLImageElement) => {
|
||||
if (!canvas.value) {
|
||||
console.error('Canvas not found')
|
||||
return
|
||||
@ -50,48 +56,48 @@ const splitWalls = (img: HTMLImageElement) => {
|
||||
return
|
||||
}
|
||||
|
||||
const wallsetWidth = img.width
|
||||
const wallsetHeight = img.height
|
||||
const columns = Math.floor(wallsetWidth / wallWidth)
|
||||
const rows = Math.floor(wallsetHeight / wallHeight)
|
||||
const decorationsetWidth = img.width
|
||||
const decorationsetHeight = img.height
|
||||
const columns = Math.floor(decorationsetWidth / decorationWidth)
|
||||
const rows = Math.floor(decorationsetHeight / decorationHeight)
|
||||
|
||||
walls.value = []
|
||||
selectedWall.value = null
|
||||
decorations.value = []
|
||||
selectedDecoration.value = null
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < columns; col++) {
|
||||
const x = col * wallWidth
|
||||
const y = row * wallHeight
|
||||
const x = col * decorationWidth
|
||||
const y = row * decorationHeight
|
||||
|
||||
ctx.clearRect(0, 0, wallWidth, wallHeight)
|
||||
ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
|
||||
ctx.clearRect(0, 0, decorationWidth, decorationHeight)
|
||||
ctx.drawImage(img, x, y, decorationWidth, decorationHeight, 0, 0, decorationWidth, decorationHeight)
|
||||
|
||||
const wallDataURL = canvas.value.toDataURL()
|
||||
walls.value.push(wallDataURL)
|
||||
const decorationDataURL = canvas.value.toDataURL()
|
||||
decorations.value.push(decorationDataURL)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectWall = (index: number) => {
|
||||
selectedWall.value = index
|
||||
const selectDecoration = (index: number) => {
|
||||
selectedDecoration.value = index
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
const img = await loadImage(imagePath)
|
||||
await nextTick()
|
||||
splitWalls(img)
|
||||
splitDecorations(img)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.walls {
|
||||
.decorations {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.walls img {
|
||||
.decorations img {
|
||||
width: 30px;
|
||||
height: 130px;
|
||||
cursor: pointer;
|
||||
@ -99,7 +105,12 @@ onMounted(async () => {
|
||||
transition: border 0.3s ease;
|
||||
}
|
||||
|
||||
.walls img.selected {
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.decorations img.selected {
|
||||
border: 2px solid #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,7 +17,6 @@
|
||||
</div>
|
||||
<div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
|
||||
<span class="option" @click="setDrawMode('tile')">Tile</span>
|
||||
<span class="option" @click="setDrawMode('wall')">Wall</span>
|
||||
<span class="option" @click="setDrawMode('decoration')">Decoration</span>
|
||||
<span class="option" @click="setDrawMode('teleport')">Teleport</span>
|
||||
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
|
||||
@ -36,7 +35,6 @@
|
||||
</div>
|
||||
<div class="options" v-show="selectEraserOpen">
|
||||
<span class="option" @click="setDrawMode('tile')">Tile</span>
|
||||
<span class="option" @click="setDrawMode('wall')">Wall</span>
|
||||
<span class="option" @click="setDrawMode('decoration')">Decoration</span>
|
||||
<span class="option" @click="setDrawMode('teleport')">Teleport</span>
|
||||
<span class="option" @click="setDrawMode('blocking tile')">Blocking tile</span>
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<Modal v-if="isModalOpen" :isModalOpen="true" :closable="false" :modal-width="645" :modal-height="260">
|
||||
<template #modalHeader>
|
||||
<h3 class="modal-title">Walls</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<canvas ref="canvas" :width="wallWidth" :height="wallHeight" style="display: none"></canvas>
|
||||
<div class="walls">
|
||||
<img v-for="(wall, index) in walls" :key="index" :src="wall" alt="Wall" @click="zoneEditorStore.setSelectedWall(index)" :class="{ selected: zoneEditorStore.selectedWall && zoneEditorStore.selectedWall === index }" />
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import config from '@/config'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
|
||||
const wallWidth = config.wall_size.x
|
||||
const wallHeight = config.wall_size.y
|
||||
const walls = ref<number[][]>([])
|
||||
const selectedWall = ref<number | null>(null)
|
||||
const canvas = ref<HTMLCanvasElement | null>(null)
|
||||
const isModalOpen = ref(false)
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
// Hardcoded image path
|
||||
const imagePath = '/assets/zone/walls.png'
|
||||
|
||||
const loadImage = (src: string): Promise<HTMLImageElement> => {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image()
|
||||
img.onload = () => resolve(img)
|
||||
img.src = src
|
||||
})
|
||||
}
|
||||
|
||||
const splitWalls = (img: HTMLImageElement) => {
|
||||
if (!canvas.value) {
|
||||
console.error('Canvas not found')
|
||||
return
|
||||
}
|
||||
const ctx = canvas.value.getContext('2d')
|
||||
if (!ctx) {
|
||||
console.error('Failed to get canvas context')
|
||||
return
|
||||
}
|
||||
|
||||
const wallsetWidth = img.width
|
||||
const wallsetHeight = img.height
|
||||
const columns = Math.floor(wallsetWidth / wallWidth)
|
||||
const rows = Math.floor(wallsetHeight / wallHeight)
|
||||
|
||||
walls.value = []
|
||||
selectedWall.value = null
|
||||
|
||||
for (let row = 0; row < rows; row++) {
|
||||
for (let col = 0; col < columns; col++) {
|
||||
const x = col * wallWidth
|
||||
const y = row * wallHeight
|
||||
|
||||
ctx.clearRect(0, 0, wallWidth, wallHeight)
|
||||
ctx.drawImage(img, x, y, wallWidth, wallHeight, 0, 0, wallWidth, wallHeight)
|
||||
|
||||
const wallDataURL = canvas.value.toDataURL()
|
||||
walls.value.push(wallDataURL)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selectWall = (index: number) => {
|
||||
selectedWall.value = index
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
isModalOpen.value = true
|
||||
const img = await loadImage(imagePath)
|
||||
await nextTick()
|
||||
splitWalls(img)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.walls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.walls img {
|
||||
width: 30px;
|
||||
height: 130px;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: border 0.3s ease;
|
||||
}
|
||||
|
||||
.walls img.selected {
|
||||
border: 2px solid #ff0000;
|
||||
}
|
||||
</style>
|
||||
@ -1,34 +1,44 @@
|
||||
<template>
|
||||
<TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
<TilemapLayerC :tilemap="wallTilemap" :tileset="[]" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
|
||||
<Controls :layer="exampleTiles" />
|
||||
<!-- @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
|
||||
<Container>
|
||||
<Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
|
||||
<Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />
|
||||
<Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
|
||||
</Container>
|
||||
|
||||
<Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
|
||||
<Tiles v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'tile'" />
|
||||
<Walls v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'wall'" />
|
||||
<Decorations v-if="(zoneEditorStore.tool === 'pencil' || zoneEditorStore.tool === 'eraser') && zoneEditorStore.drawMode === 'decoration'" />
|
||||
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
|
||||
<AssetManager />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
import { Container, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
|
||||
import { onBeforeMount, onBeforeUnmount, ref, type Ref, watch } from 'vue'
|
||||
import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
|
||||
import { onBeforeMount, onBeforeUnmount, onMounted, ref, type Ref, watch } from 'vue'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { useSocketStore } from '@/stores/socket'
|
||||
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
|
||||
import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
||||
import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
|
||||
import Walls from '@/components/utilities/zoneEditor/Walls.vue'
|
||||
import { generateTilemap } from '@/services/zone'
|
||||
import Decorations from '@/components/utilities/zoneEditor/Decorations.vue'
|
||||
import { generateTilemap, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone'
|
||||
import type { Zone } from '@/types'
|
||||
import AssetManager from '@/components/utilities/AssetManager/AssetManager.vue'
|
||||
|
||||
// Phavuer logic
|
||||
let scene = useScene()
|
||||
const socket = useSocketStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
|
||||
// Tile tilemap
|
||||
const tileMapData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.width,
|
||||
@ -41,34 +51,23 @@ const tileMapData = new Phaser.Tilemaps.MapData({
|
||||
let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData);
|
||||
let tilesImg = tileTilemap.addTilesetImage('default', 'tiles')
|
||||
let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
|
||||
let tiles = tileTilemap.createBlankLayer('tiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer
|
||||
|
||||
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
|
||||
|
||||
// Wall tilemap
|
||||
const wallMapData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.width,
|
||||
height: zoneEditorStore.height,
|
||||
tileWidth: config.wall_size.x,
|
||||
tileHeight: config.wall_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
onMounted(() => {
|
||||
})
|
||||
let wallTilemap = new Phaser.Tilemaps.Tilemap(scene, wallMapData);
|
||||
let wallsImg = wallTilemap.addTilesetImage('default', 'walls', undefined, undefined, undefined, undefined, undefined, {
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
let walls = wallTilemap.createBlankLayer('walls', wallsImg as Tileset, 0, 0) as TilemapLayer
|
||||
|
||||
|
||||
const pos = tileToWorldXY(exampleTiles, 1, 1);
|
||||
const pos2 = tileToWorldXY(exampleTiles, 1, 2);
|
||||
const pos3 = tileToWorldXY(exampleTiles, 2, 1);
|
||||
console.log(pos);
|
||||
// center camera
|
||||
const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
|
||||
const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
|
||||
onBeforeMount(() => {
|
||||
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => exampleTiles.putTileAt(tile, x, y)))
|
||||
|
||||
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
|
||||
})
|
||||
|
||||
@ -96,7 +95,7 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'wall') {
|
||||
walls.putTileAt(0, tile.x, tile.y)
|
||||
walls.putTileAt(0, tile.x, tile.y )
|
||||
zoneEditorStore.updateWall(tile.x, tile.y, 0);
|
||||
}
|
||||
}
|
||||
@ -105,7 +104,6 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (zoneEditorStore.drawMode === 'tile') {
|
||||
if (zoneEditorStore.selectedTile === null) return
|
||||
tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
|
||||
// isometric fix
|
||||
zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile);
|
||||
}
|
||||
|
||||
|
||||
@ -71,6 +71,8 @@ const preloadScene = (scene: Phaser.Scene) => {
|
||||
*/
|
||||
scene.load.image('tiles', '/assets/zone/tiles.png')
|
||||
scene.load.image('walls', '/assets/zone/walls.png')
|
||||
scene.load.image('wall1', '/assets/zone/wall1.png')
|
||||
scene.load.image('wall2', '/assets/zone/wall2.png')
|
||||
scene.load.image('waypoint', '/assets/waypoint.png')
|
||||
scene.textures.addBase64(
|
||||
'character',
|
||||
|
||||
@ -7,10 +7,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
width: 10,
|
||||
height: 10,
|
||||
tiles: [] as number[][],
|
||||
walls: [] as number[][],
|
||||
decorations: [] as number[][],
|
||||
tool: 'move',
|
||||
drawMode: 'wall',
|
||||
drawMode: 'tile',
|
||||
selectedTile: null,
|
||||
selectedWall: null,
|
||||
selectedDecoration: null,
|
||||
@ -35,12 +34,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
updateTile(x: number, y: number, tile: number) {
|
||||
this.tiles[y][x] = tile
|
||||
},
|
||||
setWalls(walls: number[][]) {
|
||||
this.walls = walls
|
||||
},
|
||||
updateWall(x: number, y: number, wall: number) {
|
||||
this.walls[y][x] = wall
|
||||
},
|
||||
setDecorations(decorations: number[][]) {
|
||||
this.decorations = decorations
|
||||
},
|
||||
@ -71,7 +64,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
this.height = 10
|
||||
this.tiles = []
|
||||
this.tool = 'move'
|
||||
this.drawMode = 'wall'
|
||||
this.drawMode = 'tile'
|
||||
this.selectedTile = null
|
||||
this.selectedWall = null
|
||||
this.selectedDecoration = null
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user