From 794d2452267b80a7de77aa2893aea563f405d339 Mon Sep 17 00:00:00 2001
From: Ano-sys <timo.niemann02@gmail.com>
Date: Sun, 4 May 2025 17:15:08 +0200
Subject: [PATCH] made hud draggable

---
 cotmw/src/assets/hud.css     |  1 +
 cotmw/src/components/HUD.vue | 37 +++++++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/cotmw/src/assets/hud.css b/cotmw/src/assets/hud.css
index c6d7936..20c35f1 100644
--- a/cotmw/src/assets/hud.css
+++ b/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{
diff --git a/cotmw/src/components/HUD.vue b/cotmw/src/components/HUD.vue
index 3b2df2b..2e871bc 100644
--- a/cotmw/src/components/HUD.vue
+++ b/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>