From 3634d833d8978c66f49040d9a659eb83577e88f7 Mon Sep 17 00:00:00 2001
From: Jordan Irwin <antumdeluge@gmail.com>
Date: Mon, 22 Jan 2024 21:36:43 -0800
Subject: [PATCH] Make chat panel float

https://github.com/arianne/stendhal/issues/417
---
 srcjs/stendhal.css                            |  1 +
 srcjs/stendhal/ui/ChatPanel.ts                | 35 +++++++++++++++++++
 srcjs/stendhal/ui/UI.ts                       |  5 +++
 .../ui/factory/DesktopUserInterfaceFactory.ts |  5 ++-
 4 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 srcjs/stendhal/ui/ChatPanel.ts

diff --git a/srcjs/stendhal.css b/srcjs/stendhal.css
index 57c8a44245a..90098d3737d 100644
--- a/srcjs/stendhal.css
+++ b/srcjs/stendhal.css
@@ -320,6 +320,7 @@ div.logcolR {
 	flex: 1;
 	height: auto;
 	overflow: hidden;
+	position: absolute;
 }
 
 #equipmentborder {
diff --git a/srcjs/stendhal/ui/ChatPanel.ts b/srcjs/stendhal/ui/ChatPanel.ts
new file mode 100644
index 00000000000..431a2b33e66
--- /dev/null
+++ b/srcjs/stendhal/ui/ChatPanel.ts
@@ -0,0 +1,35 @@
+/***************************************************************************
+ *                    Copyright © 2024 - Faiumoni e. V.                    *
+ ***************************************************************************
+ *                                                                         *
+ *   This program is free software; you can redistribute it and/or modify  *
+ *   it under the terms of the GNU Affero General Public License as        *
+ *   published by the Free Software Foundation; either version 3 of the    *
+ *   License, or (at your option) any later version.                       *
+ *                                                                         *
+ ***************************************************************************/
+
+import { Panel } from "./toolkit/Panel";
+import { singletons } from "../SingletonRepo";
+
+
+export class ChatPanel extends Panel {
+
+	constructor() {
+		super("bottomPanel");
+		// hide until display is ready
+		this.setVisible(false);
+	}
+
+	/**
+	 * Updates element using viewport attributes.
+	 */
+	public override refresh() {
+		const rect = singletons.getViewPort().getElement().getBoundingClientRect();
+		const halfHeight = Math.abs(rect.height / 2);
+		this.componentElement.style["width"] = rect.width + "px";
+		this.componentElement.style["height"] = halfHeight + "px";
+		this.componentElement.style["left"] = rect.left + "px";
+		this.componentElement.style["top"] = (rect.top + halfHeight) + "px";
+	}
+}
diff --git a/srcjs/stendhal/ui/UI.ts b/srcjs/stendhal/ui/UI.ts
index 6cafe062676..4546c495de4 100644
--- a/srcjs/stendhal/ui/UI.ts
+++ b/srcjs/stendhal/ui/UI.ts
@@ -74,6 +74,10 @@ class UI {
 			return;
 		}
 		this.displayReady = true;
+
+		const chatPanel = this.get(UIComponentEnum.BottomPanel)!;
+		chatPanel.refresh();
+		chatPanel.setVisible(stendhal.config.getBoolean("client.chat.visible"));
 		// initialize on-screen joystick
 		stendhal.ui.gamewindow.updateJoystick();
 		QuickMenu.init();
@@ -87,6 +91,7 @@ class UI {
 			console.debug("display not in \"ready\" state");
 			return;
 		}
+		this.get(UIComponentEnum.BottomPanel)!.refresh();
 		QuickMenu.refresh();
 	}
 }
diff --git a/srcjs/stendhal/ui/factory/DesktopUserInterfaceFactory.ts b/srcjs/stendhal/ui/factory/DesktopUserInterfaceFactory.ts
index 7e9b2304310..dfefb94ed82 100644
--- a/srcjs/stendhal/ui/factory/DesktopUserInterfaceFactory.ts
+++ b/srcjs/stendhal/ui/factory/DesktopUserInterfaceFactory.ts
@@ -9,6 +9,7 @@
  *                                                                         *
  ***************************************************************************/
 
+import { ChatPanel } from "../ChatPanel";
 import { UIComponentEnum } from "../UIComponentEnum";
 import { ui } from "../UI";
 
@@ -66,9 +67,7 @@ export class DesktopUserInterfaceFactory {
 
 		// hide pouch by default
 
-		// emoji button causes spacing between elements so apply theme to container panel
-		const bottomPanel = new Panel("bottomPanel", true);
-		bottomPanel.setVisible(singletons.getConfigManager().getBoolean("client.chat.visible"));
+		const bottomPanel = new ChatPanel();
 		ui.registerComponent(UIComponentEnum.BottomPanel, bottomPanel);
 
 		this.add(bottomPanel, UIComponentEnum.ChatInput, new ChatInputComponent());