From 87bcad92e90499a6b79397394d13076ada549abd Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Wed, 3 Jan 2024 04:38:09 -0500
Subject: [PATCH] Substantially nicer chat box

---
 starkingdoms-client/play/index.html           | 24 +++++
 starkingdoms-client/src/chat.ts               | 44 ++++++++-
 starkingdoms-client/src/css/chat.scss         | 25 ++++-
 starkingdoms-client/src/hub.ts                | 98 +++++++++----------
 starkingdoms-client/src/protocol.ts           | 14 +--
 starkingdoms-client/src/routes/ingame/main.ts |  3 +-
 6 files changed, 148 insertions(+), 60 deletions(-)

diff --git a/starkingdoms-client/play/index.html b/starkingdoms-client/play/index.html
index 664c636f2f165ec29d1bbbe2a62248b659cf7dc1..36582240e96dd60cece73dac6e198f3cb0745ed4 100644
--- a/starkingdoms-client/play/index.html
+++ b/starkingdoms-client/play/index.html
@@ -36,6 +36,30 @@
 
     <div class="popup chat-container" id="chat">
       <h1>Chat</h1>
+      <div class="chat-minimax" id="chat-minimax">
+        <svg
+          width="16"
+          height="2"
+          viewBox="0 0 4.2333332 0.52916663"
+          version="1.1"
+          id="svg1"
+          style="position: absolute; top: 14px; left: 7px"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:svg="http://www.w3.org/2000/svg"
+        >
+          <defs id="defs1" />
+          <g id="layer1" transform="translate(0,-1.8520833)">
+            <rect
+              style="fill: #f9f9f9; stroke-width: 0"
+              id="rect1"
+              width="4.2333331"
+              height="0.52916664"
+              x="0"
+              y="1.8520833"
+            />
+          </g>
+        </svg>
+      </div>
       <div id="chatbox" class="chat-table mono">
         <!-- Filled by script -->
       </div>
diff --git a/starkingdoms-client/src/chat.ts b/starkingdoms-client/src/chat.ts
index 734fb6505661696be79f0f413c1f03c809281159..5cb0d6432edfc6d8d4fead359ac9bde0680a0824 100644
--- a/starkingdoms-client/src/chat.ts
+++ b/starkingdoms-client/src/chat.ts
@@ -1,9 +1,49 @@
 export function addMessage(classname: string, message: string) {
+  let chatbox = document.getElementById("chatbox");
+  let should_scroll =
+    chatbox!.scrollTop == chatbox!.scrollHeight - chatbox!.offsetHeight;
   let p = document.createElement("p");
   p.innerText = message;
   p.classList.add("message");
   p.classList.add(classname);
-  let chatbox = document.getElementById("chatbox");
+  if (chatbox.children.length > 128) {
+    chatbox.children[0]!.remove();
+  }
   chatbox!.appendChild(p);
-  chatbox!.scrollTop = chatbox!.scrollHeight;
+  if (should_scroll) {
+    chatbox!.scrollTop = chatbox!.scrollHeight;
+  }
+}
+
+/* I'm sorry for this code lmao */
+export function chatViewToggle() {
+  let el = document.getElementById("chat-minimax");
+  let chat_modal = document.getElementById("chat");
+  console.log("clickl");
+  let to_hide = [
+    document.getElementById("chatbox"),
+    document.getElementById("chatentry"),
+  ];
+  if (el.hasAttribute("minimised")) {
+    chat_modal.style.width = "";
+    chat_modal.style.paddingRight = "";
+    for (let element of to_hide) {
+      element.style.display = "";
+    }
+  } else {
+    chat_modal.style.width = "unset";
+    chat_modal.style.paddingRight = "4em"; /* magical number. don't touch >:( */
+    for (let element of to_hide) {
+      element.style.display = "none";
+    }
+  }
+
+  /* inject that live svg hell yeah */
+  if (el.hasAttribute("minimised")) {
+    el.removeAttribute("minimised");
+    el.innerHTML = `<svg height=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 0.52916663"width=16 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1></defs><g id=layer1 transform=translate(0,-1.8520833)><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833></rect></g></svg>`;
+  } else {
+    el.setAttribute("minimised", "");
+    el.innerHTML = `<svg height=16 width=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 4.233333"width=16 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1 /><g id=layer1><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833 /><rect height=0.52916664 id=rect1-5 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=-4.2333331 y=1.8520833 transform=rotate(-90) /></g></svg>`;
+  }
 }
diff --git a/starkingdoms-client/src/css/chat.scss b/starkingdoms-client/src/css/chat.scss
index 45983b7ac9cb58595fee0dc7e235f2699d09157c..7e64d8f5914a4bee2f2134e7a2f3480e2e67a175 100644
--- a/starkingdoms-client/src/css/chat.scss
+++ b/starkingdoms-client/src/css/chat.scss
@@ -10,10 +10,17 @@
   height: min-content;
   font-weight: 500;
 }
+.chat-container:hover {
+  opacity: 100%;
+}
+.chat-container > h1 {
+  margin: 2px 0 2px 0;
+}
 .chat-table {
-  height: 23vh;
+  height: 23vh; /* explain this? */
   display: block;
   overflow: auto;
+  margin: 1em 0 1em 0;
 }
 .chat-box {
   appearance: none;
@@ -30,6 +37,22 @@
   outline: none;
   background-color: var(--links-ultratransparent);
 }
+.chat-minimax {
+  cursor: pointer;
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  right: 1em;
+  top: 1em;
+  border: 1px solid var(--links);
+  border-radius: 0.25rem;
+}
+.chat-minimax-icon {
+  position: absolute;
+  /* Correct for 1px border on parent */
+  top: 14px;
+  left: 7px;
+}
 .message {
   padding-top: 0;
   padding-bottom: 0;
diff --git a/starkingdoms-client/src/hub.ts b/starkingdoms-client/src/hub.ts
index 569bc0af047486def50866db9e74bf2760b86f78..147df304aa5f705406ce540d6e25195bcb701380 100644
--- a/starkingdoms-client/src/hub.ts
+++ b/starkingdoms-client/src/hub.ts
@@ -14,7 +14,7 @@ import { appendPacket } from "./packet_ui.ts";
 import { global } from "./routes/ingame/main.ts";
 import { startRender } from "./rendering.ts";
 import { addMessage } from "./chat.ts";
-import {ButtonType} from "./protocol";
+import { ButtonType } from "./protocol";
 
 const logger = createDebug("hub");
 
@@ -107,59 +107,59 @@ export async function hub_connect(
       sendPacket(client, input_packet);
     };
     document.onmousedown = (e) => {
-        if (global.me !== null) {
-            let me_transform = global.parts_map.get(global.me?.part_id).transform;
-            let x = e.clientX - window.innerWidth / 2 + me_transform.x;
-            let y = e.clientY - window.innerHeight / 2 + me_transform.y;
+      if (global.me !== null) {
+        let me_transform = global.parts_map.get(global.me?.part_id).transform;
+        let x = e.clientX - window.innerWidth / 2 + me_transform.x;
+        let y = e.clientY - window.innerHeight / 2 + me_transform.y;
 
-            let button: ButtonType;
-            if (e.button == 0) {
-                button = ButtonType.Left;
-            } else if (e.button == 1) {
-                button = ButtonType.Middle;
-            } else if (e.button == 2) {
-                button = ButtonType.Right;
-            }
-            let packet: Packet = {
-                t: PacketType.PlayerMouseInput,
-                c: {
-                    x: x,
-                    y: y,
-                    button: button!,
-                    released: false,
-                },
-            };
-            sendPacket(client, packet);
-            console.log(packet);
+        let button: ButtonType;
+        if (e.button == 0) {
+          button = ButtonType.Left;
+        } else if (e.button == 1) {
+          button = ButtonType.Middle;
+        } else if (e.button == 2) {
+          button = ButtonType.Right;
         }
-    }
+        let packet: Packet = {
+          t: PacketType.PlayerMouseInput,
+          c: {
+            x: x,
+            y: y,
+            button: button!,
+            released: false,
+          },
+        };
+        sendPacket(client, packet);
+        console.log(packet);
+      }
+    };
     document.onmouseup = (e) => {
-        if (global.me !== null) {
-            let me_transform = global.parts_map.get(global.me?.part_id).transform;
-            let x = e.clientX - window.innerWidth / 2 + me_transform.x;
-            let y = e.clientY - window.innerHeight / 2 + me_transform.y;
+      if (global.me !== null) {
+        let me_transform = global.parts_map.get(global.me?.part_id).transform;
+        let x = e.clientX - window.innerWidth / 2 + me_transform.x;
+        let y = e.clientY - window.innerHeight / 2 + me_transform.y;
 
-            let button: ButtonType;
-            if (e.button == 0) {
-                button = ButtonType.Left;
-            } else if (e.button == 1) {
-                button = ButtonType.Middle;
-            } else if (e.button == 2) {
-                button = ButtonType.Right;
-            }
-            let packet: Packet = {
-                t: PacketType.PlayerMouseInput,
-                c: {
-                    x: x,
-                    y: y,
-                    button: button!,
-                    released: true,
-                },
-            };
-            sendPacket(client, packet);
-            console.log(packet);
+        let button: ButtonType;
+        if (e.button == 0) {
+          button = ButtonType.Left;
+        } else if (e.button == 1) {
+          button = ButtonType.Middle;
+        } else if (e.button == 2) {
+          button = ButtonType.Right;
         }
-    }
+        let packet: Packet = {
+          t: PacketType.PlayerMouseInput,
+          c: {
+            x: x,
+            y: y,
+            button: button!,
+            released: true,
+          },
+        };
+        sendPacket(client, packet);
+        console.log(packet);
+      }
+    };
 
     document.getElementById("chatentry")!.onkeydown = (e) => {
       if (e.key === "Enter") {
diff --git a/starkingdoms-client/src/protocol.ts b/starkingdoms-client/src/protocol.ts
index 46a0439abf95b85c53ae96a2e89ccb8540908100..3b4066d8fb990a6fe2f3e47f2e543b7f4d87745a 100644
--- a/starkingdoms-client/src/protocol.ts
+++ b/starkingdoms-client/src/protocol.ts
@@ -11,9 +11,9 @@ export enum PartType {
   Cargo = "Cargo",
 }
 export enum ButtonType {
-    Left = "Left",
-    Middle = "Middle",
-    Right = "Right",
+  Left = "Left",
+  Middle = "Middle",
+  Right = "Right",
 }
 export interface Planet {
   planet_type: PlanetType;
@@ -45,10 +45,10 @@ export interface PlayerInputPacket {
   right: boolean;
 }
 export interface PlayerMouseInputPacket {
-    x: number,
-    y: number,
-    released: boolean,
-    button: ButtonType,
+  x: number;
+  y: number;
+  released: boolean;
+  button: ButtonType;
 }
 export interface PlayerListPacket {
   players: [number, string][];
diff --git a/starkingdoms-client/src/routes/ingame/main.ts b/starkingdoms-client/src/routes/ingame/main.ts
index 8772f601b4a1a16bf119505fd86fcdd7e651dc65..b2f9dc9c5e988ff61098f5a803f958418079a4a4 100644
--- a/starkingdoms-client/src/routes/ingame/main.ts
+++ b/starkingdoms-client/src/routes/ingame/main.ts
@@ -4,7 +4,7 @@ import "../../css/style.scss";
 import "../../css/themes/catppuccin-mocha.scss";
 import { Part, Planet } from "../../protocol.ts";
 import * as PIXI from "pixi.js";
-import { addMessage } from "../../chat.ts";
+import { addMessage, chatViewToggle } from "../../chat.ts";
 import { loadConfig } from "../../config.ts";
 
 export interface GlobalData {
@@ -67,6 +67,7 @@ async function init() {
 
   document.getElementById("footer-left")!.innerHTML =
     `StarKingdoms Client ${APP_VERSION} (${COMMIT_HASH})`;
+  document.getElementById("chat-minimax")!.onclick = chatViewToggle;
 
   addMessage("server-message", "Connecting to the game server...");