imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Redundant code removal and synchronizing map settings modal with the editor

Browse Source
This commit is contained in:
Andrei 2025-02-03 16:15:44 -06:00
parent ff9dcb91b0
commit 0ecd951710
4 changed files with 31 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/gameMaster/mapEditor/Map.vue
View File

@ -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">

8
src/components/gameMaster/mapEditor/mapPartials/MapEventTiles.vue
View File

@ -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) {

61
src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
View File

@ -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
@ -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) => {
if (placedMapObject.id === id) {
return {
...placedMapObject,
isRotated: !placedMapObject.isRotated
}
}
return placedMapObject
})
const matchingObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.id === id)
matchingObject!.isRotated = !matchingObject!.isRotated
}
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>

56
src/components/gameMaster/mapEditor/partials/MapSettings.vue
View File

@ -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">
<label for="pvp">PVP enabled</label>
<select v-model="pvp" class="input-field" name="pvp" id="pvp">
<option :value="false">No</option>
<option :value="true">Yes</option>
</select>
<div>
<label class="mr-4" for="pvp">PVP enabled</label>
<input type="checkbox" v-model="pvp" @input="updateValue" class="input-field scale-125" name="pvp" id="pvp"/>
</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 width = ref(mapEditor.currentMap.value?.width)
const height = ref(mapEditor.currentMap.value?.height)
const pvp = ref(mapEditor.currentMap.value?.pvp)
const name = ref<string | undefined>("Map")
const width = ref<number>(0)
const height = ref<number>(0)
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) => {
mapEditor.updateProperty('name', value!)
})
function updateValue(event: Event) {
let ev = event.target as HTMLInputElement
mapEditor.updateProperty(ev.name as 'name' | 'width' | 'height' | 'pvp' | 'mapEffects', ev.value)
}
watch(width, (value) => {
mapEditor.updateProperty('width', value!)
})
watch(height, (value) => {
mapEditor.updateProperty('height', value!)
})
watch(pvp, (value) => {
mapEditor.updateProperty('pvp', value!)
})
watch(mapEffects, (value) => {
mapEditor.updateProperty('mapEffects', value!)
watch(() => mapEditor.currentMap.value, (map) => {
if (!map) return
name.value = map.name
width.value = map.width
height.value = map.height
pvp.value = map.pvp
mapEffects.value = map.mapEffects
})
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>