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

Added search functionality for tiles and objects, finished object management and added its logic to the zone editor

Browse Source
This commit is contained in:
Dennis Postma
2024-07-06 21:15:22 +02:00
parent d5a32de32e
commit 93e54b2164
6 changed files with 88 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/utilities/zoneEditor/Objects.vue
View File

@ -17,11 +17,11 @@
<img
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
alt="Object"
@click="zoneEditorStore.setSelectedObject(object.id)"
@click="zoneEditorStore.setSelectedObject(object)"
:class="{
'w-full h-auto cursor-pointer border-2 transition-all duration-300': true,
'border-2 border-solid border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject === object.id,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject !== object.id
'border-2 border-solid border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject?.id === object.id,
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject?.id !== object.id
}"
/>
</div>

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

@ -2,10 +2,8 @@
<TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="tiles" />
<!-- @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 v-for="object in zoneObjects" :key="object.id" :texture="object.object" :x="object.position_x" :y="object.position_y" />
<Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="object.object.origin_x" :originX="object.object.origin_y" />
</Container>
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @save="save" />
@ -19,7 +17,7 @@ import config from '@/config'
import Tileset = Phaser.Tilemaps.Tileset
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
import { onBeforeMount, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
import { onBeforeMount, onBeforeUnmount, ref, toRaw } from 'vue'
import Controls from '@/components/utilities/Controls.vue'
import { useSocketStore } from '@/stores/socket'
import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
@ -29,6 +27,7 @@ import ZoneSettings from '@/components/utilities/zoneEditor/ZoneSettings.vue'
import { placeTile, tileToWorldXY } from '@/services/zone'
import { useAssetStore } from '@/stores/assets'
import Objects from '@/components/utilities/zoneEditor/Objects.vue'
import type { Object } from '@/types'
const scene = useScene()
const socket = useSocketStore()
@ -50,7 +49,7 @@ const tilesetImages: Tileset[] = []
type ZoneObject = {
id: string
object: string
object: Object
position_x: number
position_y: number
}
@ -69,16 +68,6 @@ tilesetImages.push(zone.addTilesetImage('blank_tile', 'blank_tile', config.tile_
const tiles = zone.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.y) as TilemapLayer
const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 'blank_tile'))
// Watch for changes in the zoneStore and update the layer
// watch(
// () => zoneEditorStore.object,
// () => {
// // @TODO : change to zone for when loading other maps
// zoneEditorStore.object.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
// },
// { deep: true }
// )
// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
// tileTilemap = generateTilemap(scene, data.width, data.height);
// zoneEditorStore.setName(data.name)
@ -91,25 +80,18 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
zoneEditorStore.updateTile(tile.x, tile.y, 'blank_tile')
}
// if (zoneEditorStore.drawMode === 'wall') {
// walls.putTileAt(0, tile.x, tile.y)
// zoneEditorStore.updateWall(tile.x, tile.y, 0)
// }
}
function pencil(tile: Phaser.Tilemaps.Tile) {
if (zoneEditorStore.drawMode === 'tile') {
if (!zoneEditorStore.selectedTile) return
console.log('placing tile', tile.x, tile.y, zoneEditorStore.selectedTile)
placeTile(zone, tiles, tile.x, tile.y, zoneEditorStore.selectedTile)
// zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
}
if (zoneEditorStore.drawMode === 'object') {
// @TODO fix position
if (zoneEditorStore.selectedObject === null) return
if (config.development) console.log('placing object', tile.x, tile.y, zoneEditorStore.selectedObject)
console.log('zoneObjects.value', zoneObjects.value)
zoneObjects.value.push({
id: Math.random().toString(10),
object: zoneEditorStore.selectedObject,
@ -120,9 +102,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
}
function paint(tile: Phaser.Tilemaps.Tile) {
console.log('yoo')
if (!zoneEditorStore.selectedTile) return
console.log('placing tile', tile.x, tile.y, zoneEditorStore.selectedTile)
exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, zoneEditorStore.selectedTile)))
}