From 90f3056e0821cb5ac94ee2a1d75e1566efcbc919 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 6 Feb 2025 13:22:52 +0100
Subject: [PATCH] Minor improvements
---
.../game/map/partials/PlacedMapObject.vue | 2 +-
src/components/gameMaster/GmPanel.vue | 2 -
.../mapPartials/PlacedMapObjects.vue | 6 +--
.../partials/SelectedPlacedMapObject.vue | 47 +++++++++++++++++--
4 files changed, 48 insertions(+), 9 deletions(-)
diff --git a/src/components/game/map/partials/PlacedMapObject.vue b/src/components/game/map/partials/PlacedMapObject.vue
index bb94afd..7f6ba6d 100644
--- a/src/components/game/map/partials/PlacedMapObject.vue
+++ b/src/components/game/map/partials/PlacedMapObject.vue
@@ -41,7 +41,7 @@ async function initialize() {
}
const mapObjectStorage = new MapObjectStorage()
- const _mapObject = await mapObjectStorage.get(props.placedMapObject.mapObject)
+ const _mapObject = await mapObjectStorage.get(props.placedMapObject.mapObject as string)
if (!_mapObject) return
mapObject.value = _mapObject
diff --git a/src/components/gameMaster/GmPanel.vue b/src/components/gameMaster/GmPanel.vue
index e0cde14..843de09 100644
--- a/src/components/gameMaster/GmPanel.vue
+++ b/src/components/gameMaster/GmPanel.vue
@@ -20,13 +20,11 @@
<script setup lang="ts">
import AssetManager from '@/components/gameMaster/assetManager/AssetManager.vue'
import Modal from '@/components/utilities/Modal.vue'
-import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
import { useGameStore } from '@/stores/gameStore'
import { ref } from 'vue'
defineEmits(['open-map-editor'])
const gameStore = useGameStore()
-const mapEditor = useMapEditorComposable()
let toggle = ref('asset-manager')
</script>
diff --git a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
index 76fe98a..57b4f73 100644
--- a/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
+++ b/src/components/gameMaster/mapEditor/mapPartials/PlacedMapObjects.vue
@@ -1,10 +1,10 @@
<template>
- <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
+ <SelectedPlacedMapObjectComponent v-if="mapEditor.selectedPlacedObject.value" :key="mapEditor.selectedPlacedObject.value.id" :map :placedMapObject="mapEditor.selectedPlacedObject.value" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
<PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tileMap :tileMapLayer :placedMapObject @pointerdown="clickPlacedMapObject(placedMapObject)" />
</template>
<script setup lang="ts">
-import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT, UUID } from '@/application/types'
+import type { MapObject, Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
import { uuidv4 } from '@/application/utilities'
import PlacedMapObject from '@/components/game/map/partials/PlacedMapObject.vue'
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
@@ -18,7 +18,7 @@ import TilemapLayer = Phaser.Tilemaps.TilemapLayer
const scene = useScene()
const mapEditor = useMapEditorComposable()
-const map = computed(() => mapEditor.currentMap.value)
+const map = computed(() => mapEditor.currentMap.value!)
defineExpose({ handlePointer })
diff --git a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
index dcd4cd7..b4840e2 100644
--- a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
+++ b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
@@ -33,7 +33,7 @@
<input class="input-field" v-model="mapObjectOriginY" name="originY" id="originY" type="number" />
</div>
</div>
- <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+ <button class="btn-cyan px-4 py-1.5 min-w-24" @click="handleUpdate">Save</button>
</form>
</div>
</template>
@@ -41,9 +41,12 @@
</template>
<script setup lang="ts">
-import type { Map as MapT, PlacedMapObject } from '@/application/types'
+import type { Map as MapT, MapObject, PlacedMapObject } from '@/application/types'
import Modal from '@/components/utilities/Modal.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { MapObjectStorage } from '@/storage/storages'
+import { useGameStore } from '@/stores/gameStore'
+import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
const props = defineProps<{
placedMapObject: PlacedMapObject
@@ -52,6 +55,11 @@ const props = defineProps<{
const emit = defineEmits(['move', 'rotate', 'delete'])
+const gameStore = useGameStore()
+const mapEditor = useMapEditorComposable()
+
+const mapObjectStorage = new MapObjectStorage()
+const mapObject = ref<MapObject | null>(null)
const showMapObjectSettings = ref(false)
const mapObjectName = ref('')
const mapObjectOriginX = ref(0)
@@ -68,4 +76,37 @@ const handleRotate = () => {
const handleDelete = () => {
emit('delete', props.placedMapObject.id, props.map)
}
+
+async function handleUpdate () {
+ if (!mapObject.value) return
+
+ gameStore.connection?.emit(
+ 'gm:mapObject:update',
+ {
+ id: props.placedMapObject.mapObject as string,
+ name: mapObjectName.value,
+ originX: mapObjectOriginX.value,
+ originY: mapObjectOriginY.value,
+ }, async (response: boolean) => {
+ if (!response) return
+ // Update mapObject in storage
+ await mapObjectStorage.update(mapObject.value!.id, {
+ name: mapObjectName.value,
+ originX: mapObjectOriginX.value,
+ originY: mapObjectOriginY.value
+ })
+ }
+ )
+}
+
+onMounted(async () => {
+ if (!props.placedMapObject.mapObject) return
+
+ mapObject.value = await mapObjectStorage.get(props.placedMapObject.mapObject as string)
+ if (!mapObject.value) return
+
+ mapObjectName.value = mapObject.value.name
+ mapObjectOriginX.value = mapObject.value.originX
+ mapObjectOriginY.value = mapObject.value.originY
+})
</script>