make initiative tracker window that is moveable

assets/web/index.html

@@ -9,6 +9,7 @@
             var mapOffsetX = 0.0;
             var mapOffsetY = 0.0;
             var draggedToken = { token: null, offX: 0, offY: 0 };
+            var draggedDiv = { div: null, offX: 0, offY: 0 };
 
             function init() {
                 let view = document.getElementById('game-view'); 
@@ -40,6 +41,8 @@
                 document.body.onclick = (e) => {
                     document.getElementById('msg-context-menu').style.display = 'none';
                 }
+                document.body.onmousemove = onMoveableDivDrag;
+                document.body.onmouseup = onMoveableDivMouseUp;
                 // TODO: Remove when done dev-ing
                 tavern.onmessage({ text: 'test', id: 1, source: 'rusty', character: 'bart' });
             }
@@ -150,7 +153,7 @@
             }
             function onGameMouseMove(event) {
                 if(event.buttons == 2) {
-                    // middle click
+                    // right click
                     let map = document.getElementById('map');
                     let mult = event.ctrlKey ? 2.0 : 1.0;
                     mapOffsetX += event.movementX * mult;
@@ -203,7 +206,7 @@
                         holder.appendChild(row);
                     }
                 }
-                document.getElementById('dice-roll-title').innerText = action.display_name ?? action.display;
+                document.getElementById('dice-roll-title').innerText = action.display_name ?? action.name;
                 document.getElementById('dice-roll-popup').style.display = 'flex';
             }
             function rollPopup() {
@@ -239,6 +242,30 @@
                 console.log(rolls);
                 tavern.action_result(holder.action.name, 'Louise', [], rolls);
             }
+            function onMoveableDivMouseDown(e, id) {
+                if(e.buttons == 1) {
+                    let div = document.getElementById(id);
+                    let rect = div.getBoundingClientRect();
+                    draggedDiv.div = div;
+                    draggedDiv.offX = e.clientX - rect.x;
+                    draggedDiv.offY = e.clientY - rect.y;
+
+                }
+            }
+            function onMoveableDivDrag(e) {
+                if(draggedDiv.div) {
+                    draggedDiv.div.style.right = '';
+                    draggedDiv.div.style.top = `${e.clientY - draggedDiv.offY}px`;
+                    draggedDiv.div.style.left = `${e.clientX - draggedDiv.offX}px`;
+                }
+            }
+            function onMoveableDivMouseUp(e, id) {
+                draggedDiv.div = null;
+            }
+            function showHideDiv(id) {
+                let div = document.getElementById(id);
+                div.style.display = div.style.display == 'none' ? 'flex' : 'none';
+            }
         </script>
         <style>
             html, body {
@@ -342,10 +369,10 @@
                 </div>
             </div>
             <div id="game-view" style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;" >
-                <div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 1;" >
+                <div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 5;" >
                     floating<br>stuff
                 </div>
-                <div id="dice-roll-popup" style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 2; top: 0px; left: 0px">
+                <div id="dice-roll-popup" style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">
                     <div style="display:flex; width: 50%; justify-content: center; flex-direction: column;">
                         <div style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
                             <h3 id="dice-roll-title" style="align-self: center;">
@@ -361,6 +388,10 @@
                         </div>
                     </div>
                 </div>
+                <div style="position: absolute; top: 10px; right: 10px; color: black; z-index: 5; display: flex; flex-direction: row;">
+                    <button style="background-color: #ffffd6;"><b>s</b></button>
+                    <button style="background-color: #ffffd6;" onclick="showHideDiv('initiative-tracker')"><b>i</b></button>
+                </div>
                 <div id="map" style="position:absolute; transform-origin: top left;">
                     <img src="https://rustystriker.dev/molly.jpg" height="200%" >
                 </div>
@@ -371,5 +402,25 @@
                 <li>Delete (TODO)</li>
 			</ul>
         </div>
+        <div id="initiative-tracker" style="position: absolute; background-color: #ffffd6; color:black; display: none; flex-direction: column; top: 40px; right: 8px">
+            <div style="background-color: black; color:#ffffd6; margin-top: 0px; margin-bottom: 8px; padding: 0 4px; min-width: 150px; user-select: none; display: flex;"
+                onmousedown="onMoveableDivMouseDown(event, 'initiative-tracker')">
+                <h3 style="flex-grow: 1;">Initiative</h3>
+                <!-- it looks bad, for now just click the 'open initiative tracker' button again -->
+                <button onclick="document.getElementById('initiative-tracker').style.display = 'none';" 
+                    style="height: fit-content; align-self: center; background-color: transparent; color:#ffffd6; font-size: 20px; border: 0;">
+                    X
+                </button>
+            </div>
+            <div>
+                aaaa
+            </div>
+            <div>
+                bbbb
+            </div>
+            <div>
+                cccc
+            </div>
+        </div>
     </body>
 </html>