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/sprites/Character.vue

@@ -16,11 +16,12 @@
 </template>
 
 <script lang="ts" setup>
-import { Container, Image, RoundRectangle, Sprite, Text } from 'phavuer'
+import { Container, Image, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
 import { type ExtendedCharacter as CharacterT } from '@/types'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import config from '@/config'
+import { useGameStore } from '@/stores/game'
 
 enum Direction {
   POSITIVE,
@@ -40,9 +41,11 @@ const props = withDefaults(defineProps<Props>(), {
 const isometricDepth = ref(calculateIsometricDepth(props.character.positionX, props.character.positionY, 28, 94, true))
 const currentX = ref(0)
 const currentY = ref(0)
+const gameStore = useGameStore();
 const tween = ref<Phaser.Tweens.Tween | null>(null)
 const isInitialPosition = ref(true)
 
+
 const calculateLocalDepth = (x: number, y: number, width: number, height: number, isCharacter: boolean) => {
   isometricDepth.value = calculateIsometricDepth(x, y, width, height, isCharacter)
 }
@@ -51,6 +54,11 @@ const updatePosition = (x: number, y: number, direction: Direction) => {
   const targetX = tileToWorldX(props.layer, x, y)
   const targetY = tileToWorldY(props.layer, x, y)
 
+  // Used for camera resize calculation to center on Character.
+  if(gameStore.character) {
+    gameStore.character.relativePosition = { x: targetX, y: targetY };
+  }
+
   if (isInitialPosition.value) {
     currentX.value = targetX
     currentY.value = targetY