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

worked on wall logics

Browse Source
This commit is contained in:
Dennis Postma
2024-06-15 03:15:20 +02:00
parent 92103cea9e
commit 4a04bf06cc
10 changed files with 172 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/utilities/zoneEditor/Decorations.vue
View File

@ -22,7 +22,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
const wallWidth = config.wall_size.x
const wallHeight = config.wall_size.y
const walls = ref<string[]>([])
const walls = ref<number[][]>([])
const selectedWall = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

2
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -22,7 +22,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
const tileWidth = config.tile_size.x
const tileHeight = config.tile_size.y
const tiles = ref<string[]>([])
const tiles = ref<number[][]>([])
const selectedTile = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

2
src/components/utilities/zoneEditor/Walls.vue
View File

@ -22,7 +22,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditor'
const wallWidth = config.wall_size.x
const wallHeight = config.wall_size.y
const walls = ref<string[]>([])
const walls = ref<number[][]>([])
const selectedWall = ref<number | null>(null)
const canvas = ref<HTMLCanvasElement | null>(null)
const isModalOpen = ref(false)

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

@ -1,7 +1,8 @@
<template>
<TilemapLayerC :tilemap="tileMap" :tileset="zoneEditorStore.tiles" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
<Controls :layer="layer" />
<Toolbar :layer="layer" @eraser="eraser" @pencil="pencil" @save="save" />
<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" />
<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'" />
<ZoneSettings v-if="zoneEditorStore.isSettingsModalShown" />
@ -28,23 +29,48 @@ let scene = useScene()
const socket = useSocketStore()
const zoneEditorStore = useZoneEditorStore()
let tileMap = generateTilemap(scene, zoneEditorStore.width, zoneEditorStore.height);
let tileset: Tileset = tileMap.addTilesetImage('default', 'tiles') as Tileset
let layer: TilemapLayer = tileMap.createBlankLayer('layer', tileset, 0, config.tile_size.y) as TilemapLayer
// Tile tilemap
const tileMapData = new Phaser.Tilemaps.MapData({
width: zoneEditorStore.width,
height: zoneEditorStore.height,
tileWidth: config.tile_size.x,
tileHeight: config.tile_size.y,
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
format: Phaser.Tilemaps.Formats.ARRAY_2D
})
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
})
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, config.tile_size.y) as TilemapLayer
// center camera
const centerY = (tileMap.height * tileMap.tileHeight) / 2
const centerX = (tileMap.width * tileMap.tileWidth) / 2
const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
scene.cameras.main.centerOn(centerX, centerY)
onBeforeMount(() => {
socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })
})
const tiles = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 0))
zoneEditorStore.setTiles(tiles)
zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)))
// Watch for changes in the zoneStore and update the layer
// watch(
// () => zoneEditorStore.tiles,
@ -55,21 +81,39 @@ zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTile
// { deep: true }
// )
socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
tileMap = generateTilemap(scene, data.width, data.height);
zoneEditorStore.setName(data.name)
zoneEditorStore.setWidth(data.width)
zoneEditorStore.setTiles(data.tilesForPublic)
})
// socket.connection.on('gm:zone_editor:zone:load', (data: Zone) => {
// tileTilemap = generateTilemap(scene, data.width, data.height);
// zoneEditorStore.setName(data.name)
// zoneEditorStore.setWidth(data.width)
// zoneEditorStore.setHeight(data.height)
// })
function eraser(tile: Phaser.Tilemaps.Tile) {
layer.putTileAt(0, tile.x, tile.y)
if (zoneEditorStore.drawMode === 'tile') {
tiles.putTileAt(0, tile.x, tile.y)
zoneEditorStore.updateTile(tile.x, tile.y, 0);
}
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.selectedTile === null) return
layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
zoneEditorStore.updateTile(tile.x, tile.y, zoneEditorStore.selectedTile);
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);
}
if (zoneEditorStore.drawMode === 'wall') {
// @TODO fix position
if (zoneEditorStore.selectedWall === null) return
walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y)
zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall);
}
}
function save() {
@ -79,6 +123,7 @@ function save() {
width: zoneEditorStore.width,
height: zoneEditorStore.height,
tiles: zoneEditorStore.tiles,
walls: zoneEditorStore.walls
})
}

2
src/components/utilities/zoneEditor/ZoneSettings.vue
View File

@ -1,5 +1,5 @@
<template>
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-height="440">
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="300" :modal-height="345" :is-resizable="false">
<template #modalHeader>
<h3 class="modal-title">Zone settings</h3>
</template>