Centered camera & Modal position changes

- Able to give position to modal other then centered.
 - Camera now centered on character when
   - Character joins zone
   - Character teleports on to zone
   - Window resize

src/components/gameMaster/GmTools.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="200" :modal-height="160">
+  <Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0">GM tools</h3>
     </template>
@@ -15,7 +15,33 @@
 import Modal from '@/components/utilities/Modal.vue'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
 import { useGameStore } from '@/stores/game'
+import { onMounted, ref } from 'vue'
 
 const zoneEditorStore = useZoneEditorStore()
 const gameStore = useGameStore()
+const modalWidth = ref(200);
+const modalHeight = ref(160);
+
+let posXY = ref({x: 0, y: 0});
+
+onMounted(() => {
+
+  window.addEventListener('resize', () => {
+    posXY.value = customPositionGmPanel(modalWidth.value);
+  })
+
+})
+
+const customPositionGmPanel = (modalWidth: number) => {
+  const padding = 25
+  const width = window.innerWidth
+
+  const x = width - (modalWidth+4) - 25
+  const y = padding
+
+  return { x, y }
+}
+
+posXY.value = customPositionGmPanel(modalWidth.value)
+
 </script>