Bug fix for character profile, greatly improved javascript

src/components/game/gui/CharacterProfile.vue

@@ -119,111 +119,44 @@
 
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 const gameStore = useGameStore()
 
-let startX = 0
+const width = ref(286)
-let startY = 0
+const height = ref(483)
-let initialX = 0
+const x = ref(window.innerWidth / 2 - 143)
-let initialY = 0
+const y = ref(window.innerHeight / 2 - 241)
-let modalPositionX = 0
-let modalPositionY = 0
-let modalWidth = 286
-let modalHeight = 483
-
-const width = ref(modalWidth)
-const height = ref(modalHeight)
-const x = ref(0)
-const y = ref(0)
 const isDragging = ref(false)
 
 const modalStyle = computed(() => ({
   top: `${y.value}px`,
   left: `${x.value}px`,
   width: `${width.value}px`,
-  height: `${height.value}px`,
+  height: `${height.value}px`
-  maxWidth: '100vw',
-  maxHeight: '100vh'
 }))
 
 function startDrag(event: MouseEvent) {
   isDragging.value = true
-  startX = event.clientX
+  const startX = event.clientX - x.value
-  startY = event.clientY
+  const startY = event.clientY - y.value
-  initialX = x.value
-  initialY = y.value
-  event.preventDefault()
-}
 
   function drag(event: MouseEvent) {
     if (!isDragging.value) return
-  const dx = event.clientX - startX
+    x.value = event.clientX - startX
-  const dy = event.clientY - startY
+    y.value = event.clientY - startY
-  x.value = initialX + dx
-  y.value = initialY + dy
-  adjustPosition()
   }
 
   function stopDrag() {
     isDragging.value = false
+    removeEventListener('mousemove', drag)
+    removeEventListener('mouseup', stopDrag)
   }
 
-function adjustPosition() {
+  addEventListener('mousemove', drag)
-  x.value = Math.min(x.value, window.innerWidth - width.value)
+  addEventListener('mouseup', stopDrag)
-  y.value = Math.min(y.value, window.innerHeight - height.value)
 }
 
-function initializePosition() {
-  width.value = Math.min(modalWidth, window.innerWidth)
-  height.value = Math.min(modalHeight, window.innerHeight)
-  if (modalPositionX !== 0 && modalPositionY !== 0) {
-    x.value = modalPositionX
-    y.value = modalPositionY
-  } else {
-    x.value = (window.innerWidth - width.value) / 2
-    y.value = (window.innerHeight - height.value) / 2
-  }
-}
-
-watch(
-  () => gameStore.uiSettings.isCharacterProfileOpen,
-  (value) => {
-    gameStore.uiSettings.isCharacterProfileOpen = value
-    if (value) {
-      initializePosition()
-    }
-  }
-)
-
-watch(
-  () => modalWidth,
-  (value) => {
-    width.value = Math.min(value, window.innerWidth)
-  }
-)
-
-watch(
-  () => modalHeight,
-  (value) => {
-    height.value = Math.min(value, window.innerHeight)
-  }
-)
-
-watch(
-  () => modalPositionX,
-  (value) => {
-    x.value = value
-  }
-)
-
-watch(
-  () => modalPositionY,
-  (value) => {
-    y.value = value
-  }
-)
-
 function keyPress(event: KeyboardEvent) {
   if (event.altKey && event.key === 'c') {
     gameStore.toggleCharacterProfile()
@@ -232,14 +165,9 @@ function keyPress(event: KeyboardEvent) {
 
 onMounted(() => {
   addEventListener('keydown', keyPress)
-  addEventListener('mousemove', drag)
-  addEventListener('mouseup', stopDrag)
-  initializePosition()
 })
 
 onUnmounted(() => {
   removeEventListener('keydown', keyPress)
-  removeEventListener('mousemove', drag)
-  removeEventListener('mouseup', stopDrag)
 })
 </script>