draggable holograms

src/components/HologramPanel.vue

@@ -1,52 +1,40 @@
 <script setup lang="ts">
-//Based on https://www.w3schools.com/howto/howto_js_draggable.asp
-const holos = document.querySelectorAll(".pyr-hologram-panel");
-for (const holo of holos) {
-    makeDraggable(holo as HTMLElement);
-}
-
-function makeDraggable(elem: HTMLElement) {
-  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-
-  (elem.querySelector(".pyr-hologram-header") as HTMLElement).onmousedown = dragMouseDown;
+// Based on https://www.w3schools.com/howto/howto_js_draggable.asp
+let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+let elem: HTMLElement;
 
-  function dragMouseDown(e: MouseEvent) {
-    e.preventDefault();
-    // get the mouse cursor position at startup:
-    pos3 = e.clientX;
-    pos4 = e.clientY;
-    document.onmouseup = closeDragElement;
-    // call a function whenever the cursor moves:
-    document.onmousemove = elementDrag;
-  }
+function clickHeader(event: MouseEvent) {
+    event.preventDefault();
+    elem = (event.target as HTMLElement).parentElement!.parentElement!;
+    pos3 = event.clientX;
+    pos4 = event.clientY;
+    document.onmouseup = release;
+    document.onmousemove = drag;
+}
 
-  function elementDrag(e: MouseEvent) {
+function drag(e: MouseEvent) {
     e.preventDefault();
-    // calculate the new cursor position:
     pos1 = pos3 - e.clientX;
     pos2 = pos4 - e.clientY;
     pos3 = e.clientX;
     pos4 = e.clientY;
-    // set the element's new position:
     elem.style.top = (elem.offsetTop - pos2) + "px";
     elem.style.left = (elem.offsetLeft - pos1) + "px";
-  }
+}
 
-  function closeDragElement() {
-    // stop moving when mouse button is released:
+function release() {
     document.onmouseup = null;
     document.onmousemove = null;
-  }
 }
 </script>
 
 <template>
   <div class="pyr-hologram-panel">
     <div class="pyr-hologram-content">
-        <div class="pyr-hologram-header"></div>
+        <div class="pyr-hologram-header" @mousedown="clickHeader"></div>
         <slot></slot>
     </div>
-    <div class="pyr-hologram-border"></div>
+    <!--<div class="pyr-hologram-border"></div>-->
   </div>
 </template>
 
@@ -58,9 +46,15 @@ function makeDraggable(elem: HTMLElement) {
   overflow: hidden;
   font-size: 13px;
   z-index: 50;
-  border-radius: 10px;
+  /*border-radius: 10px;
   box-shadow: 0 0 5px #a46fe2aa;
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);*/
+  background: linear-gradient(90deg, #01ffff36, #01ffff14);
+  border-radius: 20px;
+  border: 5px solid #0000ff00;
+  border-left: 5px solid #01ffffba;
+  border-right: none;
+  backdrop-filter: blur(2px);
 }
 .pyr-hologram-content {
   position: absolute;
@@ -72,11 +66,11 @@ function makeDraggable(elem: HTMLElement) {
   height: 20px;
   /*border: 2px solid #a46fe2aa;*/
 }
-.pyr-hologram-border {
+/*.pyr-hologram-border {
   border-radius: 10px;
   box-shadow: inset 0 0 30px 3px #a46fe2aa;
   position: relative;
   height: inherit;
   pointer-events: none;
-}
+}*/
 </style>

src/components/Leaderboard.vue

@@ -130,7 +130,7 @@ function setButtonHighlighted(timespan: string|null, highlighted: boolean) {
 }
 
 .nge-leaderboard-timeselect {
-  background-color: #111;
+  /*background-color: #111;*/
   display: grid;
   grid-template-columns: 5% 45% 45% 5%;
 }