From e72a3a9f45fe627de260d95ef964e9a8b564e9c8 Mon Sep 17 00:00:00 2001 From: Dennis Postma Date: Thu, 11 Jul 2024 19:52:33 +0200 Subject: [PATCH] Updated tiles logics --- src/components/forms/ChipsInput.vue | 9 +- .../assetManager/partials/TileDetails.vue | 98 ++++++++++++------- .../assetManager/partials/TileList.vue | 25 ++--- src/components/utilities/zoneEditor/Tiles.vue | 67 +++++++------ .../utilities/zoneEditor/ZoneEditor.vue | 12 +-- src/config.ts | 2 +- src/stores/assetManager.ts | 10 +- src/stores/zoneEditor.ts | 12 +-- src/types.ts | 13 ++- 9 files changed, 143 insertions(+), 105 deletions(-) diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue index 04e9825..237d346 100644 --- a/src/components/forms/ChipsInput.vue +++ b/src/components/forms/ChipsInput.vue @@ -4,7 +4,8 @@ {{ chip }} X - + + @@ -15,7 +16,9 @@ const modelValue = defineModel('modelValue', { type: Array, default: () => [] }) const currentInput = ref('') -const saveChip = () => { +const saveChip = (event) => { + // Prevent form submission explicitly if needed + event.preventDefault() if (currentInput.value.trim() && !modelValue.value.includes(currentInput.value)) { modelValue.value = [...modelValue.value, currentInput.value] currentInput.value = '' @@ -31,4 +34,4 @@ const backspaceDelete = (event) => { modelValue.value = modelValue.value.slice(0, -1) } } - + \ No newline at end of file diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue index c286ba7..7f0258d 100644 --- a/src/components/utilities/assetManager/partials/TileDetails.vue +++ b/src/components/utilities/assetManager/partials/TileDetails.vue @@ -2,66 +2,61 @@
- - + +
-
-
- - + +
+ +
+
+ + +
+
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue index 1e35dc8..520318a 100644 --- a/src/components/utilities/assetManager/partials/TileList.vue +++ b/src/components/utilities/assetManager/partials/TileList.vue @@ -5,17 +5,17 @@ Upload tile(s) -
+
-
- -
- Tile - {{ tile }} + +
+
+ Tile
-
- -
+ {{ tile.name }} +
+
+ + \ No newline at end of file diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue index b09152e..47e59d4 100644 --- a/src/components/utilities/zoneEditor/ZoneEditor.vue +++ b/src/components/utilities/zoneEditor/ZoneEditor.vue @@ -119,9 +119,9 @@ function eraser(tile: Phaser.Tilemaps.Tile) { function pencil(tile: Phaser.Tilemaps.Tile) { if (zoneEditorStore.drawMode === 'tile') { - if (!zoneEditorStore.selectedTile) return - placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile) - zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile + if (zoneEditorStore.selectedTile === null) return + placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id) + zoneTiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id } if (zoneEditorStore.drawMode === 'object') { @@ -161,9 +161,9 @@ function pencil(tile: Phaser.Tilemaps.Tile) { } function paint(tile: Phaser.Tilemaps.Tile) { - if (!zoneEditorStore.selectedTile) return - exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile))) - zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile)) + if (zoneEditorStore.selectedTile === null) return + exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zoneTilemap, tiles, x, y, zoneEditorStore.selectedTile.id))) + zoneTiles.forEach((row, y) => row.forEach((tile, x) => zoneTiles[y][x] = zoneEditorStore.selectedTile.id)) } function save() { diff --git a/src/config.ts b/src/config.ts index baeb04a..aa183de 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,7 +1,7 @@ export default { name: 'New Quest', - server_endpoint: 'https://nq-server.cr-a.directonline.io', development: true, + server_endpoint: 'http://localhost:4000', width: 960, height: 540, tile_size: { x: 64, y: 32, z: 1 }, diff --git a/src/stores/assetManager.ts b/src/stores/assetManager.ts index 8b4af45..eeba5d3 100644 --- a/src/stores/assetManager.ts +++ b/src/stores/assetManager.ts @@ -1,15 +1,15 @@ import { ref } from 'vue' import { defineStore } from 'pinia' -import type { Object } from '@/types' +import type { Tile, Object } from '@/types' export const useAssetManagerStore = defineStore('assetManager', () => { - const tileList = ref([]) - const selectedTile = ref(null) + const tileList = ref([]) + const selectedTile = ref(null) const objectList = ref([]) const selectedObject = ref(null) - function setTileList(tiles: string[]) { + function setTileList(tiles: Tile[]) { tileList.value = tiles } @@ -17,7 +17,7 @@ export const useAssetManagerStore = defineStore('assetManager', () => { objectList.value = objects } - function setSelectedTile(tile: string) { + function setSelectedTile(tile: Tile | null) { selectedTile.value = tile } diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts index 102e7ae..aa17454 100644 --- a/src/stores/zoneEditor.ts +++ b/src/stores/zoneEditor.ts @@ -1,5 +1,5 @@ import { defineStore } from 'pinia' -import type { Object, ZoneObject, Zone } from '@/types' +import type { Zone, Object, Tile } from '@/types' export const useZoneEditorStore = defineStore('zoneEditor', { state: () => ({ @@ -7,9 +7,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', { zone: null as Zone | null, tool: 'move', drawMode: 'tile', - tileList: [] as string[], + tileList: [] as Tile[], objectList: [] as Object[], - selectedTile: '', + selectedTile: null as Tile | null, selectedObject: null as Object | null, objectDepth: 0, isZoneListModalShown: false, @@ -44,13 +44,13 @@ export const useZoneEditorStore = defineStore('zoneEditor', { setDrawMode(mode: string) { this.drawMode = mode }, - setTileList(tiles: string[]) { + setTileList(tiles: Tile[]) { this.tileList = tiles }, setObjectList(objects: Object[]) { this.objectList = objects }, - setSelectedTile(tile: string) { + setSelectedTile(tile: Tile) { this.selectedTile = tile }, setSelectedObject(object: any) { @@ -74,7 +74,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', { this.objectList = [] this.tool = 'move' this.drawMode = 'tile' - this.selectedTile = '' + this.selectedTile = null this.selectedObject = null this.objectDepth = 0 this.isSettingsModalShown = false diff --git a/src/types.ts b/src/types.ts index 2395238..2ecd381 100644 --- a/src/types.ts +++ b/src/types.ts @@ -10,6 +10,14 @@ export type Asset = { type: 'base64' | 'link' } +export type Tile = { + id: string + name: string + tags: string[] + createdAt: Date + updatedAt: Date +} + export type Object = { id: string name: string @@ -65,11 +73,6 @@ export type CharacterItem = { quantity: number } -export type TileTag = { - tile: string - tags: any // Using 'any' for Json type, consider using a more specific type if possible -} - export type Zone = { id: number name: string