Updated tiles, improved folder & file structure, npm update, more progress on zone editor

src/components/utilities/zoneEditor/Tiles.vue

@@ -7,7 +7,7 @@
       <template #modalBody>
         <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="selectTile(index)" :class="{ selected: selectedTile === index }" />
+          <img v-for="(tile, index) in tiles" :key="index" :src="tile" alt="Tile" @click="zoneEditorStore.setSelectedTile(index)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === index }" />
         </div>
       </template>
     </Modal>
@@ -18,6 +18,7 @@
 import { ref, onMounted, nextTick } from 'vue'
 import config from '@/config'
 import Modal from '@/components/utilities/Modal.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
 const tileWidth = config.tile_size.x
 const tileHeight = config.tile_size.y
@@ -25,6 +26,7 @@ const tiles = ref<string[]>([])
 const selectedTile = ref<number | null>(null)
 const canvas = ref<HTMLCanvasElement | null>(null)
 const isModalOpen = ref(false)
+const zoneEditorStore = useZoneEditorStore()
 
 // Hardcoded image path
 const imagePath = '/assets/tiles/default.png'

src/components/utilities/zoneEditor/Toolbar.vue

@@ -2,16 +2,16 @@
   <div class="wrapper">
     <div class="toolbar">
       <div class="tools">
-        <button :class="{ active: activeTool === 'move' }" @click="activeTool = 'move'">
-          <img src="/assets/icons/zoneEditor/move.svg" alt="Eraser tool" />
+        <button :class="{ active: zoneEditorStore.tool === 'move' }" @click="zoneEditorStore.setTool('move')">
+          <img src="/assets/icons/zoneEditor/move.svg" alt="Move camera" />
         </button>
         <div class="divider"></div>
-        <button :class="{ active: activeTool === 'tiles' }" @click="activeTool = 'tiles'">
-          <img src="/assets/icons/zoneEditor/tiles.svg" alt="Eraser tool" />
+        <button :class="{ active: zoneEditorStore.tool === 'tile' }" @click="zoneEditorStore.setTool('tile')">
+          <img src="/assets/icons/zoneEditor/tiles.svg" alt="Draw tiles" />
         </button>
         <div class="divider"></div>
-        <button :class="{ active: activeTool === 'eraser' }" @click="activeTool = 'eraser'">
-          <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser tool" />
+        <button :class="{ active: zoneEditorStore.tool === 'eraser' }" @click="zoneEditorStore.setTool('eraser')">
+          <img src="/assets/icons/zoneEditor/eraser.svg" alt="Eraser" />
         </button>
       </div>
       <div class="buttons">
@@ -38,10 +38,11 @@ const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer
 })
 const scene = useScene()
-const activeTool = ref('move')
 const emit = defineEmits(['erase', 'move', 'tile'])
 
-function onPointerClick(pointer: Phaser.Input.Pointer) {
+function drawTiles(pointer: Phaser.Input.Pointer) {
+  if (!pointer.isDown) return
+
   const px = scene.cameras.main.worldView.x + pointer.x
   const py = scene.cameras.main.worldView.y + pointer.y
 
@@ -50,15 +51,19 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
     return
   }
 
-  if (activeTool.value === 'eraser') {
+  if (zoneEditorStore.tool === 'eraser') {
     emit('erase', pointer_tile)
   }
+
+  if (zoneEditorStore.tool === 'tile') {
+    emit('tile', pointer_tile)
+  }
 }
 
-scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 
 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerClick)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
 })
 </script>
 

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -16,6 +16,7 @@ import { useSocketStore } from '@/stores/socket'
 import { useZoneStore } from '@/stores/zone'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
 import Tiles from '@/components/utilities/zoneEditor/Tiles.vue'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
 
 // Phavuer logic
 let scene = useScene()
@@ -39,6 +40,7 @@ scene.cameras.main.centerOn(centerX, centerY)
 
 // Multiplayer / server logics
 const zoneStore = useZoneStore()
+const zoneEditorStore = useZoneEditorStore()
 const socket = useSocketStore()
 
 zoneStore.setTiles([
@@ -66,8 +68,11 @@ watch(
 )
 
 function erase(tile: Phaser.Tilemaps.Tile) {
-  layer.removeTileAt(tile.x, tile.y)
+  layer.putTileAt(0, tile.x, tile.y)
 }
 
-function tile() {}
+function tile(tile: Phaser.Tilemaps.Tile) {
+  if (zoneEditorStore.selectedTile === null) return
+  layer.putTileAt(zoneEditorStore.selectedTile, tile.x, tile.y)
+}
 </script>