diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue index 8cc533d..dcc7e4d 100644 --- a/src/components/utilities/zoneEditor/Toolbar.vue +++ b/src/components/utilities/zoneEditor/Toolbar.vue @@ -47,8 +47,8 @@ Tile
- - Decoration + + Object
diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue index ade770f..b09152e 100644 --- a/src/components/utilities/zoneEditor/ZoneEditor.vue +++ b/src/components/utilities/zoneEditor/ZoneEditor.vue @@ -7,7 +7,7 @@ - + @@ -27,15 +27,21 @@ 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 { placeTile, setAllTiles, tileToWorldX, tileToWorldXY, tileToWorldY } from '@/services/zone' +import { placeTile, setAllTiles, tileToWorldX, tileToWorldY } from '@/services/zone' import { useAssetStore } from '@/stores/assets' import Objects from '@/components/utilities/zoneEditor/Objects.vue' -import type { ZoneEventTile, ZoneObject } from '@/types' +import type { Zone, ZoneEventTile, ZoneObject } from '@/types' import { storeToRefs } from 'pinia' import ZoneList from '@/components/utilities/zoneEditor/ZoneList.vue' import Tileset = Phaser.Tilemaps.Tileset import TilemapLayer = Phaser.Tilemaps.TilemapLayer +function uuidv4() { + return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => + (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16) + ); +} + const scene = useScene() const socket = useSocketStore() const zoneEditorStore = useZoneEditorStore() @@ -103,6 +109,12 @@ function eraser(tile: Phaser.Tilemaps.Tile) { return object.position_x !== tile.x || object.position_y !== tile.y }) } + + if (zoneEditorStore.drawMode === 'blocking tile') { + zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent) => { + return zoneTileEvent.position_x !== tile.x || zoneTileEvent.position_y !== tile.y + }) + } } function pencil(tile: Phaser.Tilemaps.Tile) { @@ -117,7 +129,7 @@ function pencil(tile: Phaser.Tilemaps.Tile) { if (zoneEditorStore.selectedObject === null) return zoneObjects.value.push({ - id: Math.random(), + id: uuidv4(), zoneId: zoneEditorStore.zone.id, zone: zoneEditorStore.zone, objectId: zoneEditorStore.selectedObject.id, @@ -127,23 +139,24 @@ function pencil(tile: Phaser.Tilemaps.Tile) { position_y: tile.y }) - // console.log(tileToWorldX(zoneTilemap, tile.x), tileToWorldY(zoneTilemap, tile.y)) - console.log(tile.x, tile.y); - console.log(tileToWorldX(tiles, tile.x, tile.y), tileToWorldY(tiles, tile.x, tile.y)) - // remove duplicates based on object, pos x and y zoneObjects.value = zoneObjects.value.filter((object, index, self) => index === self.findIndex((t) => t.objectId === object.objectId && t.position_x === object.position_x && t.position_y === object.position_y)) } if (zoneEditorStore.drawMode === 'blocking tile') { + if (zoneEditorStore.zone === null) return + zoneEventTiles.value.push({ - id: Math.random(), + id: uuidv4(), zoneId: zoneEditorStore.zone.id, zone: zoneEditorStore.zone, type: 'BLOCK', position_x: tile.x, position_y: tile.y }) + + // remove duplicates based on type, pos x and y + zoneEventTiles.value = zoneEventTiles.value.filter((zoneTileEvent, index, self) => index === self.findIndex((t) => t.type === zoneTileEvent.type && t.position_x === zoneTileEvent.position_x && t.position_y === zoneTileEvent.position_y)) } } @@ -156,21 +169,44 @@ function paint(tile: Phaser.Tilemaps.Tile) { function save() { if (!zoneEditorStore.zone) return - console.log(zoneTiles); - - socket.connection.emit('gm:zone_editor:zone:update', { + const data = { zoneId: zoneEditorStore.zone.id, name: zoneEditorStore.zone.name, - width: zoneTilemap.width, - height: zoneTilemap.height, + width: zoneEditorStore.zone.width, + height: zoneEditorStore.zone.height, tiles: zoneTiles, - objects: zoneObjects.value - }) + zoneEventTiles: toRaw(zoneEventTiles.value).map(tile => ({ + id: tile.id, + zoneId: tile.zoneId, + type: tile.type, + position_x: tile.position_x, + position_y: tile.position_y + })), + zoneObjects: toRaw(zoneObjects.value).map(obj => ({ + id: obj.id, + zoneId: obj.zoneId, + objectId: obj.objectId, + depth: obj.depth, + position_x: obj.position_x, + position_y: obj.position_y + })) + }; + + socket.connection.emit('gm:zone_editor:zone:update', data); + + socket.connection.emit('gm:zone_editor:zone:request', { zoneId: zoneEditorStore.zone.id }, (response: Zone) => { + zoneEditorStore.setZone(response) + }); + + if (zoneEditorStore.isSettingsModalShown) { + zoneEditorStore.toggleSettingsModal() + } } function clear() { exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile'))) zoneTiles = exampleTilesArray + zoneEventTiles.value = [] zoneObjects.value = [] } @@ -179,14 +215,36 @@ onBeforeMount(() => { zoneTiles = exampleTilesArray if (zoneEditorStore.zone && zoneEditorStore.zone.tiles) { - setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles) - zoneTiles = zoneEditorStore.zone.tiles + setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles); + zoneTiles = zoneEditorStore.zone.tiles; + + // Determine the current zone dimensions + const currentZoneWidth = zoneEditorStore.zone.width ?? 0; + const currentZoneHeight = zoneEditorStore.zone.height ?? 0; + + // Ensure zoneTiles matches the current zone dimensions, filling new spaces with 'blank_tile' + for (let y = 0; y < currentZoneHeight; y++) { + zoneTiles[y] = zoneTiles[y] || []; // Ensure the row exists + for (let x = 0; x < currentZoneWidth; x++) { + zoneTiles[y][x] = zoneTiles[y][x] || 'blank_tile'; // Fill missing tiles with 'blank_tile' + } + } + + // Update the tilemap with any new 'blank_tile' entries + zoneTiles.forEach((row, y) => { + row.forEach((tileId, x) => { + placeTile(zoneTilemap, tiles, x, y, tileId); + }); + }); } - zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? [] + zoneEventTiles.value = zoneEditorStore.zone?.zoneEventTiles ?? [] + zoneObjects.value = zoneEditorStore.zone?.zoneObjects ?? [] }) onBeforeUnmount(() => { + zoneEventTiles.value = [] + zoneObjects.value = [] tiles.destroy() zoneTilemap.removeAllLayers() zoneTilemap.destroy() diff --git a/src/components/utilities/zoneEditor/ZoneSettings.vue b/src/components/utilities/zoneEditor/ZoneSettings.vue index 4258b1a..26b9782 100644 --- a/src/components/utilities/zoneEditor/ZoneSettings.vue +++ b/src/components/utilities/zoneEditor/ZoneSettings.vue @@ -25,7 +25,6 @@ - @@ -39,19 +38,19 @@ import { useZoneEditorStore } from '@/stores/zoneEditor' const zoneEditorStore = useZoneEditorStore() -const name = ref(zoneEditorStore.name) -const width = ref(zoneEditorStore.width) -const height = ref(zoneEditorStore.height) +const name = ref(zoneEditorStore.zone?.name) +const width = ref(zoneEditorStore.zone?.width) +const height = ref(zoneEditorStore.zone?.height) watch(name, (value) => { - zoneEditorStore.setName(value) + zoneEditorStore.setZoneName(value) }) watch(width, (value) => { - zoneEditorStore.setWidth(parseInt(value)) + zoneEditorStore.setZoneWidth(value) }) watch(height, (value) => { - zoneEditorStore.setHeight(parseInt(value)) + zoneEditorStore.setZoneHeight(value) }) diff --git a/src/screens/Game.vue b/src/screens/Game.vue index c07bde3..e6488c2 100644 --- a/src/screens/Game.vue +++ b/src/screens/Game.vue @@ -122,8 +122,8 @@ const preloadScene = (scene: Phaser.Scene) => { } }) - scene.load.image('bt_tile', '/assets/zone/bt_tile.png') - scene.load.image('tp_tile', '/assets/zone/tp_tile.png') + scene.load.image('BLOCK', '/assets/zone/bt_tile.png') + scene.load.image('WARP', '/assets/zone/tp_tile.png') scene.load.image('blank_tile', '/assets/zone/blank_tile.png') scene.load.image('blank_object', '/assets/zone/blank_tile.png') scene.load.image('waypoint', '/assets/waypoint.png') diff --git a/src/services/zone.ts b/src/services/zone.ts index d771098..266b5c1 100644 --- a/src/services/zone.ts +++ b/src/services/zone.ts @@ -19,12 +19,12 @@ export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number { const worldPoint = layer.tileToWorldXY(pos_x, pos_y); - return worldPoint.x + config.tile_size.y; + return worldPoint.x + config.tile_size.x / 2; } export function tileToWorldY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number { const worldPoint = layer.tileToWorldXY(pos_x, pos_y); - return worldPoint.y; + return worldPoint.y + config.tile_size.y * 1.5; } export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) { diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts index f2402ff..102e7ae 100644 --- a/src/stores/zoneEditor.ts +++ b/src/stores/zoneEditor.ts @@ -23,6 +23,21 @@ export const useZoneEditorStore = defineStore('zoneEditor', { setZone(zone: Zone) { this.zone = zone }, + setZoneName(name: string) { + if (this.zone) { + this.zone.name = name + } + }, + setZoneWidth(width: number) { + if (this.zone) { + this.zone.width = width + } + }, + setZoneHeight(height: number) { + if (this.zone) { + this.zone.height = height + } + }, setTool(tool: string) { this.tool = tool }, diff --git a/src/types.ts b/src/types.ts index 98c7fd5..2395238 100644 --- a/src/types.ts +++ b/src/types.ts @@ -85,7 +85,7 @@ export type Zone = { } export type ZoneObject = { - id: number + id: string zoneId: number zone: Zone objectId: string @@ -96,7 +96,7 @@ export type ZoneObject = { } export type ZoneEventTile = { - id: number + id: string zoneId: number zone: Zone type: "BLOCK" | "WARP" | "NPC" | "ITEM"