more shit

src/components/gameMaster/mapEditor/MapEditor.vue

@@ -23,11 +23,10 @@ import ObjectList from '@/components/gameMaster/mapEditor/partials/MapObjectList
 import MapSettings from '@/components/gameMaster/mapEditor/partials/MapSettings.vue'
 import TeleportModal from '@/components/gameMaster/mapEditor/partials/TeleportModal.vue'
 import TileList from '@/components/gameMaster/mapEditor/partials/TileList.vue'
-// Components
 import Toolbar from '@/components/gameMaster/mapEditor/partials/Toolbar.vue'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
-import { onUnmounted, ref, shallowRef } from 'vue'
+import { onUnmounted, shallowRef } from 'vue'
 
 const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
@@ -58,8 +57,6 @@ function save() {
     placedMapObjects: mapEditorStore.map.placedMapObjects?.map(({ id, mapObject, depth, isRotated, positionX, positionY }) => ({ id, mapObject, depth, isRotated, positionX, positionY })) ?? []
   }
 
-  console.log(data.mapEventTiles)
-
   if (mapEditorStore.isSettingsModalShown) {
     mapEditorStore.toggleSettingsModal()
   }

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -6,25 +6,30 @@
 import config from '@/application/config'
 import type { TextureData } from '@/application/types'
 import Controls from '@/components/utilities/Controls.vue'
-import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/mapComposable'
+import {
+  createTileArray,
+  FlattenMapArray,
+  getTile,
+  loadMapTilesIntoScene,
+  placeTile,
+  setLayerTiles
+} from '@/composables/mapComposable'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapEditorStore } from '@/stores/mapEditorStore'
 import { useScene } from 'phavuer'
-import { onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
+import { TileStorage } from '@/storage/storages'
+import Tileset = Phaser.Tilemaps.Tileset
 
 const emit = defineEmits(['tileMap:create'])
 
 const scene = useScene()
-const gameStore = useGameStore()
 const mapEditorStore = useMapEditorStore()
-const tileMap = createTileMap()
+const tileStorage = new TileStorage()
-const tileLayer = createTileLayer()
+
+const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
+const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
-/**
- * A Tilemap is a container for Tilemap data.
- * This isn't a display object, rather, it holds data about the map and allows you to add tilesets and tilemap layers to it.
- * A map can have one or more tilemap layers, which are the display objects that actually render the tiles.
- */
 function createTileMap() {
   const mapData = new Phaser.Tilemaps.MapData({
     width: mapEditorStore.map?.width,
@@ -37,31 +42,34 @@ function createTileMap() {
 
   const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
   emit('tileMap:create', newTileMap)
-
   return newTileMap
 }
 
-/**
+async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
- * A Tileset is a combination of a single image containing the tiles and a container for data about each tile.
+  const tiles = await tileStorage.getAll()
- */
+  const tilesetImages = []
-function createTileLayer() {
-  const tilesArray = gameStore.getLoadedAssetsByGroup('tiles')
 
-  const tilesetImages = Array.from(tilesArray).map((tile: TextureData, index: number) => {
+  for (const tile of tiles) {
-    return tileMap.addTilesetImage(tile.key, tile.key, config.tile_size.width, config.tile_size.height, 1, 2, index + 1, { x: 0, y: -config.tile_size.height })
+    tilesetImages.push(
-  }) as any
+      currentTileMap.addTilesetImage(tile.id, tile.id, config.tile_size.width, config.tile_size.height, 1, 2, tilesetImages.length + 1, { x: 0, y: -config.tile_size.height })
+    )
+  }
 
   // Add blank tile
-  tilesetImages.push(tileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height }))
+  tilesetImages.push(
-  const layer = tileMap.createBlankLayer('tiles', tilesetImages, 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
+    currentTileMap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.width, config.tile_size.height, 1, 2, 0, { x: 0, y: -config.tile_size.height })
+  )
+
+  const layer = currentTileMap.createBlankLayer('tiles', tilesetImages as Tileset[], 0, config.tile_size.height) as Phaser.Tilemaps.TilemapLayer
 
   layer.setDepth(0)
   layer.setCullPadding(2, 2)
-
   return layer
 }
 
 function pencil(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
   if (!mapEditorStore.map) return
 
@@ -81,17 +89,19 @@ function pencil(pointer: Phaser.Input.Pointer) {
   if (pointer.event.shiftKey) return
 
   // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Place tile
-  placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditorStore.selectedTile)
 
   // Adjust mapEditorStore.map.tiles
   mapEditorStore.map.tiles[tile.y][tile.x] = mapEditorStore.selectedTile
 }
 
 function eraser(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
   if (!mapEditorStore.map) return
 
@@ -111,17 +121,19 @@ function eraser(pointer: Phaser.Input.Pointer) {
   if (pointer.event.altKey) return
 
   // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Place tile
-  placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
+  placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
 
   // Adjust mapEditorStore.map.tiles
   mapEditorStore.map.tiles[tile.y][tile.x] = 'blank_tile'
 }
 
 function paint(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
   if (!mapEditorStore.map) return
 
@@ -141,14 +153,16 @@ function paint(pointer: Phaser.Input.Pointer) {
   if (pointer.event.altKey) return
 
   // Set new tileArray with selected tile
-  setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
+  setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile))
 
   // Adjust mapEditorStore.map.tiles
-  mapEditorStore.map.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)
+  mapEditorStore.map.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditorStore.selectedTile)
 }
 
 // When alt is pressed, and the pointer is down, select the tile that the pointer is over
 function tilePicker(pointer: Phaser.Input.Pointer) {
+  if (!tileMap.value || !tileLayer.value) return
+
   // Check if map is set
   if (!mapEditorStore.map) return
 
@@ -168,29 +182,30 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   if (!pointer.event.altKey) return
 
   // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
+  const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
   if (!tile) return
 
   // Select the tile
   mapEditorStore.setSelectedTile(mapEditorStore.map.tiles[tile.y][tile.x])
 }
 
-watch(
+watch(() => mapEditorStore.shouldClearTiles, (shouldClear) => {
-  () => mapEditorStore.shouldClearTiles,
+    if (shouldClear && mapEditorStore.map && tileMap.value && tileLayer.value) {
-  (shouldClear) => {
+      const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
-    if (shouldClear && mapEditorStore.map) {
+      setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
-      const blankTiles = createTileArray(tileMap.width, tileMap.height, 'blank_tile')
-      setLayerTiles(tileMap, tileLayer, blankTiles)
       mapEditorStore.map.tiles = blankTiles
       mapEditorStore.resetClearTilesFlag()
     }
   }
 )
 
-onMounted(() => {
+onMounted(async () => {
-  if (!mapEditorStore.map?.tiles) {
+  if (!mapEditorStore.map?.tiles) return
-    return
+
-  }
+  await loadMapTilesIntoScene(mapEditorStore.map.id, scene)
+
+  tileMap.value = createTileMap()
+  tileLayer.value = await createTileLayer(tileMap.value)
 
   // First fill the entire map with blank tiles using current map dimensions
   const blankTiles = createTileArray(mapEditorStore.map.width, mapEditorStore.map.height, 'blank_tile')
@@ -199,14 +214,13 @@ onMounted(() => {
   const mapTiles = mapEditorStore.map.tiles
   for (let y = 0; y < mapEditorStore.map.height; y++) {
     for (let x = 0; x < mapEditorStore.map.width; x++) {
-      // Only copy if the source tiles array has this position
       if (mapTiles[y] && mapTiles[y][x] !== undefined) {
         blankTiles[y][x] = mapTiles[y][x]
       }
     }
   }
 
-  setLayerTiles(tileMap, tileLayer, blankTiles)
+  setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
 
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
@@ -220,8 +234,10 @@ onUnmounted(() => {
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
   scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
 
-  tileMap.destroyLayer('tiles')
+  if (tileMap.value) {
-  tileMap.removeAllLayers()
+    tileMap.value.destroyLayer('tiles')
-  tileMap.destroy()
+    tileMap.value.removeAllLayers()
+    tileMap.value.destroy()
+  }
 })
 </script>