From 356d84cce777708010ed914ab64f55dfc4309db1 Mon Sep 17 00:00:00 2001
From: core <core@coredoes.dev>
Date: Wed, 3 Jan 2024 22:06:19 -0500
Subject: [PATCH] draggable popups

---
 .../src/components/Chatbox.svelte             |   7 +-
 .../src/components/ui/Popup.svelte            | 120 ++++++++++++++++++
 starkingdoms-client/src/css/popup.scss        |  31 -----
 starkingdoms-client/src/css/style.scss        |   1 -
 starkingdoms-client/src/pages/Home.svelte     |   6 +-
 starkingdoms-client/src/pages/Play.svelte     |  17 ++-
 6 files changed, 137 insertions(+), 45 deletions(-)
 create mode 100644 starkingdoms-client/src/components/ui/Popup.svelte
 delete mode 100644 starkingdoms-client/src/css/popup.scss

diff --git a/starkingdoms-client/src/components/Chatbox.svelte b/starkingdoms-client/src/components/Chatbox.svelte
index f5d6c2b7c68c8da7bd30cec3b9464648146d4cf9..d4e2f285b83afdcec74cba094dc042ba869a2c10 100644
--- a/starkingdoms-client/src/components/Chatbox.svelte
+++ b/starkingdoms-client/src/components/Chatbox.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Popup from "./ui/Popup.svelte";
+
   export function addMessage(classname: string, message: string) {
     let chatbox = document.getElementById("chatbox")!;
     let should_scroll =
@@ -51,8 +53,7 @@
   }
 </script>
 
-<div class="popup chat-container" id="chat">
-  <h1>Chat</h1>
+<Popup draggable title="Chat" class="chat-container" id="chat">
   <div class="chat-minimax" id="chat-minimax">
     <svg
       width="16"
@@ -84,4 +85,4 @@
     id="chatentry"
     required
     autocomplete="off" />
-</div>
+</Popup>
diff --git a/starkingdoms-client/src/components/ui/Popup.svelte b/starkingdoms-client/src/components/ui/Popup.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..b36b5a0847717147615cdc192f05c900484cd264
--- /dev/null
+++ b/starkingdoms-client/src/components/ui/Popup.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let clazz = "";
+  export { clazz as class };
+
+  export let style = "";
+  export let centered = false;
+  export let id;
+  export let title;
+  export let notitle = false;
+  export let draggable = false;
+
+  let header;
+  let popup;
+
+  let pos1 = 0;
+  let pos2 = 0;
+  let pos3 = 0;
+  let pos4 = 0;
+
+  onMount(() => {
+    console.log("popup mounted");
+    if (draggable) {
+      console.log("importing old window positions");
+
+      let top = window.localStorage.getItem(`pop-${id}top`);
+      let left = window.localStorage.getItem(`pop-${id}left`);
+
+      popup.style.top = top;
+      popup.style.left = left;
+      console.log("imported, top = " + top + " left = " + left);
+    }
+  });
+
+  function dragMouseDown(e) {
+    if (!draggable) {
+      return;
+    }
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e.preventDefault();
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    popup.style.top = popup.offsetTop - pos2 + "px";
+    popup.style.left = popup.offsetLeft - pos1 + "px";
+
+    window.localStorage.setItem(`pop-${id}top`, popup.style.top);
+    window.localStorage.setItem(`pop-${id}left`, popup.style.left);
+
+    console.log(
+      "dragged, top = " +
+        (popup.offsetTop - pos2) +
+        "px" +
+        " left = " +
+        (popup.offsetLeft - pos1) +
+        "px",
+    );
+  }
+
+  function closeDragElement() {
+    document.onmouseup = null;
+    document.onmousemove = null;
+
+    window.localStorage.setItem(`pop-${id}top`, popup.style.top);
+    window.localStorage.setItem(`pop-${id}left`, popup.style.left);
+  }
+</script>
+
+<div
+  bind:this={popup}
+  class="popup {clazz}"
+  class:centered
+  {style}
+  {id}
+  on:mousedown|preventDefault={dragMouseDown}>
+  {#if !notitle}
+    <div bind:this={header} on:mousedown|preventDefault={dragMouseDown}>
+      <h1>{title}</h1>
+    </div>
+  {/if}
+  <slot />
+</div>
+
+<style lang="scss">
+  .popup {
+    padding: 1em;
+
+    background-color: var(--bg-secondary-1);
+
+    height: min-content;
+
+    border-radius: 5px;
+    z-index: 100000;
+  }
+
+  .popup :global(h1) {
+    margin: 0;
+  }
+  .popup :global(h2) {
+    margin: 0 0 0.5em;
+    color: var(--sub-headline);
+  }
+
+  .centered {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+</style>
diff --git a/starkingdoms-client/src/css/popup.scss b/starkingdoms-client/src/css/popup.scss
deleted file mode 100644
index 849c781e610252d9943f3e99fecf5ef2b6a8245c..0000000000000000000000000000000000000000
--- a/starkingdoms-client/src/css/popup.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.popup {
-  padding: 1em;
-
-  background-color: var(--bg-secondary-1);
-
-  height: min-content;
-
-  border-radius: 5px;
-  z-index: 100000;
-}
-.popup-max-width-300 {
-  max-width: 300px;
-}
-.popup-wmin {
-  width: min-content;
-}
-.popup-center {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}
-.popup > h1 {
-  margin: 0;
-}
-.popup > h2 {
-  margin: 0 0 0.5em;
-  color: var(--sub-headline);
-}
diff --git a/starkingdoms-client/src/css/style.scss b/starkingdoms-client/src/css/style.scss
index 62bf7695488aa666bb2ed6789c3b648a94fcabd6..224c5be5dfa632c0b9f0977b286020bbb9d2888c 100644
--- a/starkingdoms-client/src/css/style.scss
+++ b/starkingdoms-client/src/css/style.scss
@@ -1,6 +1,5 @@
 @import "globals.scss";
 @import "grid.scss";
-@import "popup.scss";
 @import "footer.scss";
 @import "form.scss";
 @import "json.scss";
diff --git a/starkingdoms-client/src/pages/Home.svelte b/starkingdoms-client/src/pages/Home.svelte
index e1f393f3ec54f8b647a68e785a73237171df8a33..f523de7978ab0368a48007867139ab0694f0e9c5 100644
--- a/starkingdoms-client/src/pages/Home.svelte
+++ b/starkingdoms-client/src/pages/Home.svelte
@@ -6,6 +6,7 @@
   import { parseJwt } from "../jwt.ts";
   import HeartIcon from "../icons/HeartIcon.svelte";
   import WarningIcon from "../icons/WarningIcon.svelte";
+  import Popup from "../components/ui/Popup.svelte";
 
   let config = DEFAULT_CONFIG;
   // Top-level await. Sets the default config, and overwrites it when the new config is avail. Thanks reactivity!
@@ -52,8 +53,7 @@
   }
 </script>
 
-<div class="popup popup-center popup-max-width-300" id="server_selector">
-  <h1>StarKingdoms</h1>
+<Popup title="StarKingdoms" centered style="max-width: 300px;" id="title-popup">
   <h2>Join Game</h2>
 
   <form id="join-fm" class="form" on:submit|preventDefault={playGame}>
@@ -102,7 +102,7 @@
       {/if}
     </span>
   </form>
-</div>
+</Popup>
 
 <span class="footer-left">
   StarKingdoms Client {APP_VERSION} ({COMMIT_HASH})
diff --git a/starkingdoms-client/src/pages/Play.svelte b/starkingdoms-client/src/pages/Play.svelte
index 09532a3a53096af8a0b638262cd9238d2bef3866..423b2c434d89607bdc3ef98649fbee6f9dd41443 100644
--- a/starkingdoms-client/src/pages/Play.svelte
+++ b/starkingdoms-client/src/pages/Play.svelte
@@ -8,6 +8,7 @@
   import { DEFAULT_CONFIG, loadConfig } from "../config.ts";
   import Chatbox from "../components/Chatbox.svelte";
   import { onMount } from "svelte";
+  import Popup from "../components/ui/Popup.svelte";
 
   let config = DEFAULT_CONFIG;
 
@@ -68,10 +69,12 @@
 
 <div class="game" id="gamewindow"></div>
 
-<div
-  class="popup popup-wmin log-hidden log-container popup-max-width-300"
-  id="packet_log">
-  <h1>Packet Log</h1>
+<Popup
+  draggable
+  title="Packet Log"
+  style="max-width: 300px; width: min-content;"
+  class="log-hidden log-container"
+  id="packet-log">
   <table class="log">
     <thead>
       <tr class="log-wfull">
@@ -87,12 +90,12 @@
   <h1>Packet Explorer</h1>
   <p id="explorer_selected" class="mono">Selected: --</p>
   <table class="mono json" id="explorer_json"></table>
-</div>
+</Popup>
 
 <Chatbox bind:this={chatbox} />
 
 <div class="hud" id="hud">
-  <div class="popup" id="hud-content-wrapper">
+  <Popup notitle title="" id="hud-content-wrapper">
     <table>
       <thead>
         <tr>
@@ -117,7 +120,7 @@
         </tr>
       </tbody>
     </table>
-  </div>
+  </Popup>
 </div>
 
 <span class="footer-left">