Prepping to work on Placed map objects

src/components/gameMaster/mapEditor/Map.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import config from '@/application/config'
-import type { Map as MapT } from '@/application/types'
 import MapEventTiles from '@/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue'
 import MapTiles from '@/components/gameMaster/mapEditor/mapPartials/MapTiles.vue'
 import PlacedMapObjects from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue'

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

@@ -89,8 +89,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   // Check if shift is not pressed, this means we are moving the camera
   if (pointer.event.shiftKey) return
 
-  if (mapEditor.drawMode.value !== 'blocking tile' && mapEditor.drawMode.value !== 'teleport') return
-
   switch (mapEditor.tool.value) {
     case 'pencil': pencil(pointer, map) ; break
     case 'eraser': erase(pointer, map) ; break

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

@@ -8,31 +8,24 @@ import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/applica
 import { uuidv4 } from '@/application/utilities'
 import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
-import { getTile } from '@/composables/mapComposable'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useScene } from 'phavuer'
 import { ref, watch } from 'vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 
 const scene = useScene()
 const mapEditor = useMapEditorComposable()
 const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
 const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
 
-const tileLayer = ref<Phaser.Tilemaps.TilemapLayer>()
-
 const props = defineProps<{
   tileMap: Phaser.Tilemaps.Tilemap
 }>()
 
-defineExpose({handlePointer})
+defineExpose({ handlePointer })
 
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
-  // Check if there is a tile
-  const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
   // Check if object already exists on position
-  const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
+  const existingPlacedMapObject = findInMap(pointer, map)
   if (existingPlacedMapObject) return
 
   const newPlacedMapObject: PlacedMapObjectT = {
@@ -41,8 +34,8 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
     map: map,
     mapObject: mapEditor.selectedMapObject.value!,
     isRotated: false,
-    positionX: tile.x,
+    positionX: pointer.x,
-    positionY: tile.y
+    positionY: pointer.y
   }
 
   // Add new object to mapObjects
@@ -50,25 +43,21 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
 }
 
 function eraser(pointer: Phaser.Input.Pointer, map: MapT) {
-  // Check if there is a tile
-  const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
-  if (!tile) return
-
   // Check if object already exists on position
-  const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
+  const existingPlacedMapObject = findInMap(pointer, map)
   if (!existingPlacedMapObject) return
 
   // Remove existing object
   map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
 }
 
-function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
+function findInMap(pointer: Phaser.Input.Pointer, map: MapT) {
-  // Check if there is a tile
+  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === pointer.worldX && placedMapObject.positionY === pointer.worldY)
-  const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
+}
-  if (!tile) return
 
+function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
   // Check if object already exists on position
-  const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
+  const existingPlacedMapObject = findInMap(pointer, map)
   if (!existingPlacedMapObject) return
 
   // Select the object
@@ -81,11 +70,8 @@ function moveMapObject(id: string, map: MapT) {
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
     if (!movingPlacedMapObject.value) return
 
-    const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
+    movingPlacedMapObject.value.positionX = pointer.worldX
-    if (!tile) return
+    movingPlacedMapObject.value.positionY = pointer.worldY
-
-    movingPlacedMapObject.value.positionX = tile.x
-    movingPlacedMapObject.value.positionY = tile.y
   }
 
   scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)

src/components/gameMaster/mapEditor/partials/CreateMap.vue

@@ -53,6 +53,8 @@ const width = ref(0)
 const height = ref(0)
 const pvp = ref(false)
 
+defineExpose({ open: () => modalRef.value?.open()})
+
 async function submit() {
   gameStore.connection?.emit('gm:map:create', { name: name.value, width: width.value, height: height.value }, async (response: Map | false) => {
     if (!response) {

src/components/gameMaster/mapEditor/partials/MapList.vue

@@ -7,7 +7,7 @@
       <div class="my-4 mx-auto h-full">
         <div class="text-center mb-4 px-2 flex gap-2.5">
           <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchMaps">Refresh</button>
-          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => $emit('open-create-map')">New</button>
+          <button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="createMapModal?.open">New</button>
         </div>
         <div class="overflow-y-auto h-[calc(100%-20px)]">
           <div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(map, index) in mapList" :key="map.id">
@@ -25,7 +25,7 @@
     </template>
   </Modal>
 
-  <CreateMap @create="fetchMaps" v-if="modalRef?.isModalOpen" />
+  <CreateMap ref="createMapModal" @create="fetchMaps" />
 </template>
 
 <script setup lang="ts">
@@ -44,6 +44,7 @@ const mapEditor = useMapEditorComposable()
 const mapStorage = new MapStorage()
 const mapList = ref<Map[]>([])
 const modalRef = useTemplateRef('modalRef')
+const createMapModal = useTemplateRef('createMapModal')
 
 defineEmits(['open-create-map'])
 

src/components/gameMaster/mapEditor/partials/Toolbar.vue

@@ -16,19 +16,19 @@
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectPencilOpen && mapEditor.tool.value === 'pencil'">
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile'); setPencilMode">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('map_object'); setPencilMode">
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport'); setPencilMode">
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile'); setPencilMode">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -43,19 +43,19 @@
               <img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
             </div>
             <div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('tile')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('tile'); setEraserMode">
                 Tile
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('map_object')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('object'); setEraserMode">
                 Map object
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('teleport')">
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('teleport'); setEraserMode">
                 Teleport
                 <div class="absolute w-4/5 left-1/2 -translate-x-1/2 bottom-0 h-px bg-cyan"></div>
               </span>
-              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setEraserMode('blocking tile')">Blocking tile</span>
+              <span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="setDrawMode('blocking tile'); setEraserMode">Blocking tile</span>
             </div>
           </div>
         </button>
@@ -85,6 +85,7 @@
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { onClickOutside } from '@vueuse/core'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useScene } from 'phavuer'
 
 const mapEditor = useMapEditorComposable()
 
@@ -109,10 +110,16 @@ function setDrawMode(value: string) {
 
   mapEditor.setDrawMode(value)
   selectPencilOpen.value = false
+  selectEraserOpen.value = false
+}
+
+function setPencilMode() {
+  mapEditor.setTool('pencil')
+  selectPencilOpen.value = false
 }
 
 // drawMode
-function setEraserMode(value: string) {
+function setEraserMode() {
   mapEditor.setTool('eraser')
   selectEraserOpen.value = false
 }
@@ -134,11 +141,7 @@ function cycleToolMode(tool: 'pencil' | 'eraser') {
   const nextIndex = (currentIndex + 1) % modes.length
   const nextMode = modes[nextIndex]
 
-  if (tool === 'pencil') {
+  setDrawMode(nextMode)
-    setDrawMode(nextMode)
-  } else {
-    setEraserMode(nextMode)
-  }
 }
 
 function initKeyShortcuts(event: KeyboardEvent) {

src/composables/mapComposable.ts

@@ -114,5 +114,5 @@ export async function loadAllTilesIntoScene(scene: Phaser.Scene) {
   const tileStorage = new TileStorage()
   const tiles = await tileStorage.getAll()
 
-  getTiles(tiles, scene)
+  await getTiles(tiles, scene)
 }