6 files changed, 137 insertions(+), 45 deletions(-)

M starkingdoms-client/src/components/Chatbox.svelte
A starkingdoms-client/src/components/ui/Popup.svelte
D starkingdoms-client/src/css/popup.scss
M starkingdoms-client/src/css/style.scss
M starkingdoms-client/src/pages/Home.svelte
M starkingdoms-client/src/pages/Play.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>

@@ 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>

@@ 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);
-}

@@ 1,6 1,5 @@
 @import "globals.scss";
 @import "grid.scss";
-@import "popup.scss";
 @import "footer.scss";
 @import "form.scss";
 @import "json.scss";

@@ 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})

@@ 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">