asset mngr stuff

2024-06-29 22:39:22 +02:00
parent 2313a0faea
commit 270b14d8e5
22 changed files with 316 additions and 261 deletions
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@ -6,9 +6,8 @@
      </template>
      <template #modalBody>
        <div class="container tiles">
-          <canvas ref="canvas" :width="tileWidth" :height="tileHeight" style="display: none"></canvas>
          <div class="tiles">
-            <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
+            <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
          </div>
        </div>
      </template>
@ -17,73 +16,22 @@
 </template>

 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
 import config from '@/config'
-import Modal from '@/components/utilities/Modal.vue'
+import { ref, onMounted } from 'vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import JSZip from 'jszip'
+import { useSocketStore } from '@/stores/socket'
+import Modal from '@/components/utilities/Modal.vue'

-const tileWidth = config.tile_size.x
-const tileHeight = config.tile_size.y
-const tiles = ref<number[][]>([])
-const selectedTile = ref<number | null>(null)
-const canvas = ref<HTMLCanvasElement | null>(null)
+const socket = useSocketStore()
+const tiles = ref<string[]>([])
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()

-// Hardcoded image path
-const imagePath = '/assets/zone/tiles.png'
-
-const loadImage = (src: string): Promise<HTMLImageElement> => {
-  return new Promise((resolve) => {
-    const img = new Image()
-    img.onload = () => resolve(img)
-    img.src = src
-  })
-}
-
-const splitTiles = (img: HTMLImageElement) => {
-  if (!canvas.value) {
-    console.error('Canvas not found')
-    return
-  }
-  const ctx = canvas.value.getContext('2d')
-  if (!ctx) {
-    console.error('Failed to get canvas context')
-    return
-  }
-
-  const tilesetWidth = img.width
-  const tilesetHeight = img.height
-  const columns = Math.floor(tilesetWidth / tileWidth)
-  const rows = Math.floor(tilesetHeight / tileHeight)
-
-  tiles.value = []
-  selectedTile.value = null
-
-  for (let row = 0; row < rows; row++) {
-    for (let col = 0; col < columns; col++) {
-      const x = col * tileWidth
-      const y = row * tileHeight
-
-      ctx.clearRect(0, 0, tileWidth, tileHeight)
-      ctx.drawImage(img, x, y, tileWidth, tileHeight, 0, 0, tileWidth, tileHeight)
-
-      const tileDataURL = canvas.value.toDataURL()
-      tiles.value.push(tileDataURL)
-    }
-  }
-}
-
-const selectTile = (index: number) => {
-  selectedTile.value = index
-}
-
 onMounted(async () => {
  isModalOpen.value = true
-  const img = await loadImage(imagePath)
-  await nextTick()
-  splitTiles(img)
+  socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
+    tiles.value = response.map((tile) => `${config.server_endpoint}/assets/tiles/${tile}`)
+  })
 })
 </script>

@ -107,5 +55,4 @@ onMounted(async () => {
 .tiles img.selected {
  border: 2px solid $red;
 }
-
-</style>
+</style>
--- a/src/components/utilities/zoneEditor/Toolbar.vue
+++ b/src/components/utilities/zoneEditor/Toolbar.vue
@ -13,7 +13,7 @@
          <div class="select" v-if="zoneEditorStore.tool === 'pencil'">
            <div class="select-trigger" :class="{ open: selectPencilOpen }" @click="selectPencilOpen = !selectPencilOpen">
              {{ zoneEditorStore.drawMode }}
-              <img src="/assets/icons/zoneEditor/chevron.svg"/>
+              <img src="/assets/icons/zoneEditor/chevron.svg" />
            </div>
            <div class="options" v-show="selectPencilOpen && zoneEditorStore.tool === 'pencil'">
              <span class="option" @click="setDrawMode('tile')">Tile</span>
@ -31,7 +31,7 @@
          <div class="select" v-if="zoneEditorStore.tool === 'eraser'">
            <div class="select-trigger" :class="{ open: selectEraserOpen }" @click="selectEraserOpen = !selectEraserOpen">
              {{ zoneEditorStore.drawMode }}
-              <img src="/assets/icons/zoneEditor/chevron.svg"/>
+              <img src="/assets/icons/zoneEditor/chevron.svg" />
            </div>
            <div class="options" v-show="selectEraserOpen">
              <span class="option" @click="setDrawMode('tile')">Tile</span>
@ -75,8 +75,8 @@ const scene = useScene()
 const emit = defineEmits(['move', 'eraser', 'pencil', 'save'])

 // track select state
-let selectPencilOpen = ref(false);
-let selectEraserOpen = ref(false);
+let selectPencilOpen = ref(false)
+let selectEraserOpen = ref(false)

 // drawMode
 function setDrawMode(value: string) {
--- a/src/components/utilities/zoneEditor/ZoneEditor.vue
+++ b/src/components/utilities/zoneEditor/ZoneEditor.vue
@ -2,11 +2,11 @@
  <TilemapLayerC :tilemap="tileTilemap" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />

  <Controls :layer="exampleTiles" />
-<!--  @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
+  <!--  @TODO: inside asset manager we need to be able to set the originX and originY per individial asset -->
  <Container>
-    <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1"  />
-    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1"  />
-    <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1"  />
+    <Image :texture="'wall1'" :x="pos.position_x" :y="pos.position_y" :originY="1.13" :originX="1" />
+    <Image :texture="'wall1'" :x="pos2.position_x" :y="pos2.position_y" :originY="1.13" :originX="1" />
+    <Image :texture="'wall2'" :x="pos3.position_x" :y="pos3.position_y" :originY="1.255" :originX="1" />
  </Container>

  <Toolbar :layer="exampleTiles" @eraser="eraser" @pencil="pencil" @save="save" />
@ -38,7 +38,6 @@ let scene = useScene()
 const socket = useSocketStore()
 const zoneEditorStore = useZoneEditorStore()

-
 // Tile tilemap
 const tileMapData = new Phaser.Tilemaps.MapData({
  width: zoneEditorStore.width,
@ -48,18 +47,17 @@ const tileMapData = new Phaser.Tilemaps.MapData({
  orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
  format: Phaser.Tilemaps.Formats.ARRAY_2D
 })
-let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData);
+let tileTilemap = new Phaser.Tilemaps.Tilemap(scene, tileMapData)
 let tilesImg = tileTilemap.addTilesetImage('default', 'tiles')
 let exampleTiles = tileTilemap.createBlankLayer('exampleTiles', tilesImg as Tileset, 0, config.tile_size.y) as TilemapLayer

 const exampleTilesArray = Array.from({ length: zoneEditorStore.width }, () => Array.from({ length: zoneEditorStore.height }, () => 1))

-onMounted(() => {
-})
-  const pos = tileToWorldXY(exampleTiles, 1, 1);
-  const pos2 = tileToWorldXY(exampleTiles, 1, 2);
-  const pos3 = tileToWorldXY(exampleTiles, 2, 1);
-console.log(pos);
+onMounted(() => {})
+const pos = tileToWorldXY(exampleTiles, 1, 1)
+const pos2 = tileToWorldXY(exampleTiles, 1, 2)
+const pos3 = tileToWorldXY(exampleTiles, 2, 1)
+console.log(pos)
 // center camera
 const centerY = (tileTilemap.height * tileTilemap.tileHeight) / 2
 const centerX = (tileTilemap.width * tileTilemap.tileWidth) / 2
@ -91,12 +89,12 @@ onBeforeMount(() => {
 function eraser(tile: Phaser.Tilemaps.Tile) {
  if (zoneEditorStore.drawMode === 'tile') {
    tiles.putTileAt(0, tile.x, tile.y)
-    zoneEditorStore.updateTile(tile.x, tile.y, 0);
+    zoneEditorStore.updateTile(tile.x, tile.y, 0)
  }

  if (zoneEditorStore.drawMode === 'wall') {
-    walls.putTileAt(0, tile.x, tile.y )
-    zoneEditorStore.updateWall(tile.x, tile.y, 0);
+    walls.putTileAt(0, tile.x, tile.y)
+    zoneEditorStore.updateWall(tile.x, tile.y, 0)
  }
 }

@ -104,14 +102,14 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
  if (zoneEditorStore.drawMode === 'tile') {
    if (zoneEditorStore.selectedTile === null) return
    tiles.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
-    zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile);
+    zoneEditorStore.setTiles(tile.x, tile.y, zoneEditorStore.selectedTile)
  }

  if (zoneEditorStore.drawMode === 'wall') {
    // @TODO fix position
    if (zoneEditorStore.selectedWall === null) return
    walls.putTileAt(zoneEditorStore.selectedWall, tile.x, tile.y)
-    zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall);
+    zoneEditorStore.updateWall(tile.x, tile.y, zoneEditorStore.selectedWall)
  }
 }

@ -127,7 +125,7 @@ function save() {
 }

 onBeforeUnmount(() => {
-  zoneEditorStore.reset();
+  zoneEditorStore.reset()
 })

 /**
--- a/src/components/utilities/zoneEditor/ZoneSettings.vue
+++ b/src/components/utilities/zoneEditor/ZoneSettings.vue
@ -55,4 +55,4 @@ watch(width, (value) => {
 watch(height, (value) => {
  zoneEditorStore.setHeight(parseInt(value))
 })
-</script>
+</script>