diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue index 317bfc9..ba54bdf 100644 --- a/src/components/utilities/assetManager/partials/ObjectDetails.vue +++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue @@ -1,6 +1,7 @@ <template> <div class="object-manager"> <div class="image-container"> +<!-- @TODO show img with width100% to keep quality and show it center with padding around it, preferably the window wont jump if a larger object is selected --> <img :src="objectImageUrl" :alt="'Object ' + selectedObject" /> </div> <div class="modal-form asset-manager"> diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue index f32ab31..1232628 100644 --- a/src/components/utilities/assetManager/partials/ObjectList.vue +++ b/src/components/utilities/assetManager/partials/ObjectList.vue @@ -6,10 +6,11 @@ </label> <input class="input-cyan search-field" placeholder="Search..." /> </div> - <a class="asset" :class="{ active: assetManagerStore.selectedObject === object }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object)"> + <a class="asset" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)"> <div class="asset-details"> - <img :src="`${config.server_endpoint}/assets/objects/${object}.png`" alt="Object" /> - <span class="asset-name">{{ object }}</span> +<!-- @TODO make all img have same width so text aligns nicely --> + <img :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" /> + <span class="asset-name">{{ object.name }}</span> </div> </a> </template> @@ -19,6 +20,7 @@ import config from '@/config' import { useSocketStore } from '@/stores/socket' import { onMounted, ref } from 'vue' import { useAssetManagerStore } from '@/stores/assetManager' +import type { Object } from '@/types' const socket = useSocketStore() const objectUploadField = ref(null) @@ -32,14 +34,14 @@ const handleFileUpload = (e: Event) => { if (config.development) console.error('Failed to upload object') return } - socket.connection.emit('gm:object:list', {}, (response: string[]) => { + socket.connection.emit('gm:object:list', {}, (response: Object[]) => { assetManagerStore.setObjectList(response) }) }) } onMounted(() => { - socket.connection.emit('gm:object:list', {}, (response: string[]) => { + socket.connection.emit('gm:object:list', {}, (response: Object[]) => { if (config.development) console.log(response) assetManagerStore.setObjectList(response) }) diff --git a/src/components/utilities/zoneEditor/Toolbar.vue b/src/components/utilities/zoneEditor/Toolbar.vue index 790d8bd..db36386 100644 --- a/src/components/utilities/zoneEditor/Toolbar.vue +++ b/src/components/utilities/zoneEditor/Toolbar.vue @@ -70,6 +70,7 @@ import { onBeforeUnmount, ref, watch } from 'vue' import { useScene } from 'phavuer' import { getTile } from '@/services/zone' import { useZoneEditorStore } from '@/stores/zoneEditor' +import TilemapLayer = Phaser.Tilemaps.TilemapLayer const zoneEditorStore = useZoneEditorStore() @@ -98,7 +99,7 @@ function drawTile(pointer: Phaser.Input.Pointer) { const px = scene.cameras.main.worldView.x + pointer.x const py = scene.cameras.main.worldView.y + pointer.y - const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile + const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile if (!pointer_tile) { return } diff --git a/src/components/utilities/zoneEditor/ZoneEditor.vue b/src/components/utilities/zoneEditor/ZoneEditor.vue index 3da9c8b..0ed791e 100644 --- a/src/components/utilities/zoneEditor/ZoneEditor.vue +++ b/src/components/utilities/zoneEditor/ZoneEditor.vue @@ -57,7 +57,7 @@ type ZoneObject = { const zoneObjects = ref<ZoneObject[]>([]) /** - * Walk through tiles and add them to the zone as tilesetImages + * Walk through object and add them to the zone as tilesetImages */ let tileCount = 1 toRaw(assetStore.assets).forEach((asset) => { @@ -78,10 +78,10 @@ console.log(pos) // Watch for changes in the zoneStore and update the layer // watch( -// () => zoneEditorStore.tiles, +// () => zoneEditorStore.object, // () => { // // @TODO : change to zone for when loading other maps -// zoneEditorStore.tiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y))) +// zoneEditorStore.object.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y))) // }, // { deep: true } // ) diff --git a/src/stores/assetManager.ts b/src/stores/assetManager.ts index caeb543..7e74e4a 100644 --- a/src/stores/assetManager.ts +++ b/src/stores/assetManager.ts @@ -1,9 +1,10 @@ import { ref } from 'vue' import { defineStore } from 'pinia' +import type { Object } from '@/types' export const useAssetManagerStore = defineStore('assetManager', () => { const tileList = ref<string[]>([]) - const objectList = ref<string[]>([]) + const objectList = ref<Object[]>([]) const selectedTile = ref<string | null>(null) const selectedObject = ref<string | null>(null) const objectDetails = ref<Record<string, any>>({}) @@ -12,7 +13,7 @@ export const useAssetManagerStore = defineStore('assetManager', () => { tileList.value = tiles } - function setObjectList(objects: string[]) { + function setObjectList(objects: Object[]) { objectList.value = objects }