diff --git a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue index 9f4270f..52afbd9 100644 --- a/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue +++ b/src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue @@ -55,12 +55,10 @@ import type { MapObject } from '@/application/types' import ChipsInput from '@/components/forms/ChipsInput.vue' import { useAssetManagerStore } from '@/stores/assetManagerStore' import { useGameStore } from '@/stores/gameStore' -import { useMapEditorStore } from '@/stores/mapEditorStore' import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue' const gameStore = useGameStore() const assetManagerStore = useAssetManagerStore() -const mapEditorStore = useMapEditorStore() const selectedMapObject = computed(() => assetManagerStore.selectedMapObject) @@ -105,10 +103,6 @@ function refreshObjectList(unsetSelectedMapObject = true) { if (unsetSelectedMapObject) { assetManagerStore.setSelectedMapObject(null) } - - if (mapEditorStore.active) { - mapEditorStore.setMapObjectList(response) - } }) } diff --git a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue index 14c4799..2f73b55 100644 --- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue +++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue @@ -30,9 +30,11 @@ import { useAssetManagerStore } from '@/stores/assetManagerStore' import { useGameStore } from '@/stores/gameStore' import { useMapEditorStore } from '@/stores/mapEditorStore' import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue' +import { TileStorage } from '@/storage/storages' const gameStore = useGameStore() const assetManagerStore = useAssetManagerStore() +const tileStorage = new TileStorage() const selectedTile = computed(() => assetManagerStore.selectedTile) @@ -54,12 +56,13 @@ watch(selectedTile, (tile: Tile | null) => { tileTags.value = tile.tags }) -function deleteTile() { - gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, (response: boolean) => { +async function deleteTile() { + gameStore.connection?.emit('gm:tile:delete', { id: selectedTile.value?.id }, async (response: boolean) => { if (!response) { console.error('Failed to delete tile') return } + await tileStorage.delete(selectedTile.value!.id) refreshTileList() }) } diff --git a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue index 23a2da9..763e3aa 100644 --- a/src/components/gameMaster/mapEditor/partials/MapObjectList.vue +++ b/src/components/gameMaster/mapEditor/partials/MapObjectList.vue @@ -78,7 +78,7 @@ const toggleTag = (tag: string) => { onMounted(async () => { isModalOpen.value = true gameStore.connection?.emit('gm:mapObject:list', {}, (response: MapObject[]) => { - mapEditorStore.setMapObjectList(response) + // mapEditorStore.setMapObjectList(response) }) }) diff --git a/src/components/gameMaster/mapEditor/partials/TileList.vue b/src/components/gameMaster/mapEditor/partials/TileList.vue index b4e025b..c2a6370 100644 --- a/src/components/gameMaster/mapEditor/partials/TileList.vue +++ b/src/components/gameMaster/mapEditor/partials/TileList.vue @@ -84,26 +84,27 @@ import config from '@/application/config' import type { Tile } from '@/application/types' import Modal from '@/components/utilities/Modal.vue' -import { useGameStore } from '@/stores/gameStore' import { useMapEditorStore } from '@/stores/mapEditorStore' -import { computed, onMounted, ref } from 'vue' +import { computed, onMounted, onUnmounted, ref } from 'vue' +import { TileStorage } from '@/storage/storages' +import { liveQuery } from 'dexie' -const gameStore = useGameStore() -const isModalOpen = ref(false) +const tileStorage = new TileStorage() const mapEditorStore = useMapEditorStore() const searchQuery = ref('') const selectedTags = ref([]) const tileCategories = ref>(new Map()) const selectedGroup = ref<{ parent: Tile; children: Tile[] } | null>(null) +const tiles = ref([]) const uniqueTags = computed(() => { - const allTags = mapEditorStore.tileList.flatMap((tile) => tile.tags || []) + const allTags = tiles.value.flatMap((tile) => tile.tags || []) return Array.from(new Set(allTags)) }) const groupedTiles = computed(() => { const groups: { parent: Tile; children: Tile[] }[] = [] - const filteredTiles = mapEditorStore.tileList.filter((tile) => { + const filteredTiles = tiles.value.filter((tile) => { const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()) const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some((tag) => tile.tags.includes(tag))) return matchesSearch && matchesTags @@ -173,10 +174,8 @@ function processTile(tile: Tile) { } function getDominantColor(imageData: ImageData) { - let r = 0, - g = 0, - b = 0, - total = 0 + let r = 0, g = 0, b = 0, total = 0 + for (let i = 0; i < imageData.data.length; i += 4) { if (imageData.data[i + 3] > 0) { // Only consider non-transparent pixels @@ -186,6 +185,7 @@ function getDominantColor(imageData: ImageData) { total++ } } + return { r: Math.round(r / total), g: Math.round(g / total), @@ -226,7 +226,22 @@ function isActiveTile(tile: Tile): boolean { return mapEditorStore.selectedTile === tile.id } -onMounted(async () => { - isModalOpen.value = true +let subscription: any = null + +onMounted(() => { + subscription = liveQuery(() => tileStorage.liveQuery()).subscribe({ + next: (result) => { + tiles.value = result + }, + error: (error) => { + console.error('Failed to fetch tiles:', error) + } + }) +}) + +onUnmounted(() => { + if (subscription) { + subscription.unsubscribe() + } }) diff --git a/src/storage/baseStorage.ts b/src/storage/baseStorage.ts index 457c975..ad7ec61 100644 --- a/src/storage/baseStorage.ts +++ b/src/storage/baseStorage.ts @@ -68,6 +68,10 @@ export class BaseStorage { } } + liveQuery() { + return this.dexie.table(this.tableName).toArray() + } + async reset() { try { await this.dexie.table(this.tableName).clear()