From b195f1399fe9bea2cb5ead87c0eb77784fb44670 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Wed, 5 Feb 2025 21:04:47 +0100
Subject: [PATCH] Updated modal bg styles to correct values, started working on
 map object setting modal

---
 .../sprite/partials/SpriteImagesInput.vue     |  2 +-
 .../sprite/partials/SpritePreview.vue         |  2 +-
 .../mapEditor/partials/CreateMap.vue          |  2 +-
 .../gameMaster/mapEditor/partials/MapList.vue |  2 +-
 .../mapEditor/partials/MapSettings.vue        |  2 +-
 .../partials/SelectedPlacedMapObject.vue      | 36 ++++++++++++++++++-
 .../mapEditor/partials/TeleportModal.vue      |  2 +-
 7 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
index 382ebfc..79f1f44 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue
@@ -17,7 +17,7 @@
         </button>
       </div>
 
-      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" :bg-style="'none'" @modal:close="closeOffsetModal">
+      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" bg-style="none" @modal:close="closeOffsetModal">
         <template #modalHeader>
           <h3 class="m-0 font-medium shrink-0 text-white">Action offset ({{ selectedImageIndex }})</h3>
         </template>
diff --git a/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue b/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue
index 61bcc4e..78a0877 100644
--- a/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue
+++ b/src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :bg-style="'none'" @modal:close="closeModal">
+  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" bg-style="none" @modal:close="closeModal">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
     </template>
diff --git a/src/components/gameMaster/mapEditor/partials/CreateMap.vue b/src/components/gameMaster/mapEditor/partials/CreateMap.vue
index e1552f0..437770a 100644
--- a/src/components/gameMaster/mapEditor/partials/CreateMap.vue
+++ b/src/components/gameMaster/mapEditor/partials/CreateMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
     </template>
diff --git a/src/components/gameMaster/mapEditor/partials/MapList.vue b/src/components/gameMaster/mapEditor/partials/MapList.vue
index c4b7282..a7af24d 100644
--- a/src/components/gameMaster/mapEditor/partials/MapList.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapList.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
+  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" bg-style="none">
     <template #modalHeader>
       <h3 class="text-lg text-white">Maps</h3>
     </template>
diff --git a/src/components/gameMaster/mapEditor/partials/MapSettings.vue b/src/components/gameMaster/mapEditor/partials/MapSettings.vue
index bbc4b47..77a38b1 100644
--- a/src/components/gameMaster/mapEditor/partials/MapSettings.vue
+++ b/src/components/gameMaster/mapEditor/partials/MapSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :modal-width="600" :modal-height="430" :bg-style="'none'">
+  <Modal ref="modalRef" :modal-width="600" :modal-height="430" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
     </template>
diff --git a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
index d3740fb..dcd4cd7 100644
--- a/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
+++ b/src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue
@@ -4,17 +4,46 @@
       <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
-      <button @mousedown.stop @click="handleDelete" class="btn-indigo py-1.5 px-4">
+      <button @mousedown.stop @click="showMapObjectSettings = true" class="btn-indigo py-1.5 px-4">
         <img src="/assets/icons/mapEditor/gear.svg" class="w-4 h-4 invert" alt="Delete" />
       </button>
       <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
       <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
     </div>
   </div>
+
+  <Modal :is-modal-open="showMapObjectSettings" :modal-height="320" bg-style="none">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Map object settings</h3>
+    </template>
+    <template #modalBody>
+      <div class="m-4">
+        <form method="post" @submit.prevent="" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-full">
+              <label for="name">Name</label>
+              <input class="input-field" v-model="mapObjectName" name="name" id="name" />
+            </div>
+            <div class="form-field-half">
+              <label for="originX">Origin X</label>
+              <input class="input-field" v-model="mapObjectOriginX" name="originX" id="originX" type="number" />
+            </div>
+            <div class="form-field-half">
+              <label for="originY">Origin Y</label>
+              <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>
+        </form>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
 import type { Map as MapT, PlacedMapObject } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { ref } from 'vue'
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject
@@ -23,6 +52,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['move', 'rotate', 'delete'])
 
+const showMapObjectSettings = ref(false)
+const mapObjectName = ref('')
+const mapObjectOriginX = ref(0)
+const mapObjectOriginY = ref(0)
+
 const handleMove = () => {
   emit('move', props.placedMapObject.id, props.map)
 }
diff --git a/src/components/gameMaster/mapEditor/partials/TeleportModal.vue b/src/components/gameMaster/mapEditor/partials/TeleportModal.vue
index 32e100a..19af98d 100644
--- a/src/components/gameMaster/mapEditor/partials/TeleportModal.vue
+++ b/src/components/gameMaster/mapEditor/partials/TeleportModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
+  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>