Redundant code removal and synchronizing map settings modal with the editor

src/components/gameMaster/mapEditor/Map.vue

@@ -1,7 +1,7 @@
 <template>
   <MapTiles ref="mapTiles" v-if="tileMap && tileMapLayer" :tileMapLayer :tileMap @tileMap:create="tileMap = $event" />
   <PlacedMapObjects ref="mapObjects" v-if="tileMap && tileMapLayer" :tileMapLayer :tileMap />
-  <MapEventTiles ref="eventTiles" v-if="tileMap && tileMapLayer" :tileMapLayer :tileMap />
+  <MapEventTiles ref="eventTiles" v-if="tileMap" :tileMap />
 </template>
 
 <script setup lang="ts">

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

@@ -56,7 +56,7 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
             toPositionY: mapEditor.teleportSettings.value.toPositionY,
             toRotation: mapEditor.teleportSettings.value.toRotation
           }
-        : {}
+        : undefined
   }
 
   map.mapEventTiles.push(newEventTile)
@@ -80,12 +80,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   const map = mapEditor.currentMap.value
   if (!map) return
 
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
   if (pointer.event.altKey) return
 
   switch (mapEditor.tool.value) {

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

@@ -10,7 +10,6 @@ import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
 import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
 import { useScene } from 'phavuer'
-import { watch } from 'vue'
 import { getTile } from '@/composables/mapComposable'
 import Tilemap = Phaser.Tilemaps.Tilemap
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
@@ -28,7 +27,7 @@ const props = defineProps<{
 function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
   if (!tile) return
-  
+
   // Check if object already exists on position
   const existingPlacedMapObject = findObjectByPointer(pointer, map)
   if (existingPlacedMapObject) return
@@ -46,7 +45,6 @@ function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
   }
 
   // Add new object to mapObjects
-
   map.placedMapObjects.push(newPlacedMapObject)
   mapEditor.selectedPlacedObject.value = newPlacedMapObject
 }
@@ -64,7 +62,7 @@ function findObjectByPointer(pointer: Phaser.Input.Pointer, map: MapT) : PlacedM
   const tile = getTile(props.tileMap, pointer.worldX, pointer.worldY)
   if (!tile) return undefined
 
-  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)!
+  return map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
 }
 
 function objectPicker(pointer: Phaser.Input.Pointer, map: MapT) {
@@ -99,15 +97,8 @@ function moveMapObject(id: string, map: MapT) {
 }
 
 function rotatePlacedMapObject(id: string, map: MapT) {
-  map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => {
+  const matchingObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.id === id)
-    if (placedMapObject.id === id) {
+  matchingObject!.isRotated = !matchingObject!.isRotated
-      return {
-        ...placedMapObject,
-        isRotated: !placedMapObject.isRotated
-      }
-    }
-    return placedMapObject
-  })
 }
 
 function deletePlacedMapObject(id: string, map: MapT) {
@@ -129,14 +120,6 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   const map = mapEditor.currentMap.value
   if (!map) return
 
-  if (mapEditor.drawMode.value !== 'map_object') return
-
-  // Check if left mouse button is pressed
-  if (!pointer.isDown) return
-
-  // Check if shift is not pressed, this means we are moving the camera
-  if (pointer.event.shiftKey) return
-
   // Check if alt is pressed, this means we are selecting the object
   if (pointer.event.altKey) return
 
@@ -154,42 +137,4 @@ function handlePointer(pointer: Phaser.Input.Pointer) {
   }
 }
 
-// watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
-watch(
-  () => mapEditor.currentMap.value,
-  (map) => {
-    if (!map) return
-
-    const updatedMapObjects = map.placedMapObjects.map((mapObject) => {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
-      if (updatedMapObject) {
-        return {
-          ...mapObject,
-          mapObject: {
-            ...mapObject.mapObject,
-            originX: updatedMapObject.positionX,
-            originY: updatedMapObject.positionY
-          }
-        }
-      }
-      return mapObject
-    })
-
-    // Update the map with the new mapObjects
-    map.placedMapObjects.concat(updatedMapObjects)
-
-    // Update mapObject if it's set
-    if (mapEditor.selectedMapObject.value) {
-      const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditor.selectedMapObject.value?.id)
-      if (updatedMapObject) {
-        mapEditor.setSelectedMapObject({
-          ...mapEditor.selectedMapObject.value,
-          originX: updatedMapObject.positionX,
-          originY: updatedMapObject.positionY
-        })
-      }
-    }
-  }
-  // { deep: true }
-)
 </script>

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

@@ -14,22 +14,19 @@
           <div class="gap-2.5 flex flex-wrap mt-4">
             <div class="form-field-full">
               <label for="name">Name</label>
-              <input class="input-field" v-model="name" name="name" id="name" />
+              <input class="input-field" v-model="name" @input="updateValue" name="name" id="name" />
             </div>
             <div class="form-field-half">
               <label for="width">Width</label>
-              <input class="input-field" v-model="width" name="width" id="width" type="number" />
+              <input class="input-field" v-model="width" @input="updateValue" name="width" id="width" type="number" />
             </div>
             <div class="form-field-half">
               <label for="height">Height</label>
-              <input class="input-field" v-model="height" name="height" id="height" type="number" />
+              <input class="input-field" v-model="height" @input="updateValue" name="height" id="height" type="number" />
             </div>
-            <div class="form-field-full">
+            <div>
-              <label for="pvp">PVP enabled</label>
+              <label class="mr-4" for="pvp">PVP enabled</label>
-              <select v-model="pvp" class="input-field" name="pvp" id="pvp">
+              <input type="checkbox" v-model="pvp" @input="updateValue" class="input-field scale-125" name="pvp" id="pvp"/>
-                <option :value="false">No</option>
-                <option :value="true">Yes</option>
-              </select>
             </div>
           </div>
         </form>
@@ -51,15 +48,15 @@ import type { UUID } from '@/application/types'
 import { uuidv4 } from '@/application/utilities'
 import Modal from '@/components/utilities/Modal.vue'
 import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
-import { ref, useTemplateRef, watch } from 'vue'
+import { onMounted, ref, useTemplateRef, watch } from 'vue'
 
 const mapEditor = useMapEditorComposable()
 const screen = ref('settings')
 
-const name = ref(mapEditor.currentMap.value?.name)
+const name = ref<string | undefined>("Map")
-const width = ref(mapEditor.currentMap.value?.width)
+const width = ref<number>(0)
-const height = ref(mapEditor.currentMap.value?.height)
+const height = ref<number>(0)
-const pvp = ref(mapEditor.currentMap.value?.pvp)
+const pvp = ref<boolean>(false)
 const mapEffects = ref(mapEditor.currentMap.value?.mapEffects || [])
 const modalRef = useTemplateRef('modalRef')
 
@@ -67,24 +64,18 @@ defineExpose({
   open: () => modalRef.value?.open()
 })
 
-watch(name, (value) => {
+function updateValue(event: Event) {
-  mapEditor.updateProperty('name', value!)
+  let ev = event.target as HTMLInputElement
-})
+  mapEditor.updateProperty(ev.name as 'name' | 'width' | 'height' | 'pvp' | 'mapEffects', ev.value)
+}
 
-watch(width, (value) => {
+watch(() => mapEditor.currentMap.value, (map) => {
-  mapEditor.updateProperty('width', value!)
+  if (!map) return
-})
+  name.value = map.name
-
+  width.value = map.width
-watch(height, (value) => {
+  height.value = map.height
-  mapEditor.updateProperty('height', value!)
+  pvp.value = map.pvp
-})
+  mapEffects.value = map.mapEffects
-
-watch(pvp, (value) => {
-  mapEditor.updateProperty('pvp', value!)
-})
-
-watch(mapEffects, (value) => {
-  mapEditor.updateProperty('mapEffects', value!)
 })
 
 const addEffect = () => {
@@ -94,9 +85,12 @@ const addEffect = () => {
     effect: '',
     strength: 1
   })
+  mapEditor.updateProperty('mapEffects', mapEffects.value)
 }
 
 const removeEffect = (index: number) => {
   mapEffects.value.splice(index, 1)
+  mapEditor.updateProperty('mapEffects', mapEffects.value)
 }
+
 </script>