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/utilities/Modal.vue

@@ -43,6 +43,14 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  modalPositionX: {
+    type: Number,
+    default: 0
+  },
+  modalPositionY: {
+    type: Number,
+    default: 0
+  },
   modalWidth: {
     type: Number,
     default: 500
@@ -149,8 +157,15 @@ function handleResize() {
 function initializePosition() {
   width.value = Math.min(props.modalWidth, window.innerWidth)
   height.value = Math.min(props.modalHeight, window.innerHeight)
-  x.value = (window.innerWidth - width.value) / 2
-  y.value = (window.innerHeight - height.value) / 2
+  if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
+    console.log(props.modalPositionX)
+    console.log(props.modalPositionY)
+    x.value = props.modalPositionX
+    y.value = props.modalPositionY
+  } else {
+    x.value = (window.innerWidth - width.value) / 2
+    y.value = (window.innerHeight - height.value) / 2
+  }
 }
 
 function toggleFullScreen() {
@@ -192,12 +207,28 @@ watch(
   }
 )
 
+watch(
+  () => props.modalPositionX,
+  (value) => {
+    x.value = value
+  }
+)
+
+watch(
+  () => props.modalPositionY,
+  (value) => {
+    y.value = value
+  }
+)
+
 onMounted(() => {
   window.addEventListener('mousemove', drag)
   window.addEventListener('mouseup', stopDrag)
   window.addEventListener('mousemove', resizeModal)
   window.addEventListener('mouseup', stopResize)
-  window.addEventListener('resize', handleResize)
+  if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
+    window.addEventListener('resize', handleResize)
+  }
   initializePosition()
 })
 
@@ -206,6 +237,8 @@ onUnmounted(() => {
   window.removeEventListener('mouseup', stopDrag)
   window.removeEventListener('mousemove', resizeModal)
   window.removeEventListener('mouseup', stopResize)
-  window.removeEventListener('resize', handleResize)
+  if(props.modalPositionX !== 0 && props.modalPositionY !== 0) {
+    window.removeEventListener('resize', handleResize)
+  }
 })
 </script>