made hud draggable

cotmw/src/assets/hud.css

@@ -32,6 +32,7 @@
     line-height: 1.2;
     margin-bottom: 4px;
     font-family: monospace;
+    user-select: none;
 }
 
 .hud-inner-btn{

cotmw/src/components/HUD.vue

@@ -1,9 +1,40 @@
 <script setup>
-  import { ref } from 'vue'
+  import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
   import HUDRow from "@/components/HUDRow.vue";
 
   const collapsed = ref(false)
 
+  const pos = reactive({ x: 20, y: 20 })
+  const dragging = ref(false)
+  const dragOffset = { x: 0, y: 0 }
+
+  function onMouseDown(e){
+    dragging.value = true
+    dragOffset.x = e.clientX - pos.x
+    dragOffset.y = e.clientY - pos.y
+    e.preventDefault()
+  }
+
+  function onMouseMove(e){
+    if(!dragging.value) return
+    pos.x = e.clientX - dragOffset.x
+    pos.y = e.clientY - dragOffset.y
+  }
+
+  function onMouseUp(){
+    dragging.value = false
+  }
+
+  onMounted(() => {
+    window.addEventListener('mousemove', onMouseMove)
+    window.addEventListener('mouseup', onMouseUp)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('mousemove', onMouseMove)
+    window.removeEventListener('mouseup', onMouseUp)
+  })
+
   function toggleHUD() {
     collapsed.value = !collapsed.value
   }
@@ -17,7 +48,7 @@
 
   function button_switch(e){
     log("Pressed Button: " + e.id);
-    let buttonString = e.id == "LocationButton" ? "CameraButton" : "LocationButton";
+    let buttonString = e.id === "LocationButton" ? "CameraButton" : "LocationButton";
 
     let btn = document.getElementById(buttonString);
     btn.classList.remove("btn-success");
@@ -56,7 +87,7 @@
 
 <template>
   <div class="container">
-    <div class="container hud" id="Control">
+    <div class="container hud" id="Control" :style="{ top: pos.y + 'px', left: pos.x + 'px', position: 'absolute', cursor: dragging ? 'grabbing' : 'grab' }" @mousedown="onMouseDown">
 
       <div class="hud-header" @click="toggleHUD">
         <span>{{ HUD_name }}</span>