Make chat panel float

arianne#417

srcjs/stendhal.css

@@ -320,6 +320,7 @@ div.logcolR {
 	flex: 1;
 	height: auto;
 	overflow: hidden;
+	position: absolute;
 }
 
 #equipmentborder {

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";
+	}
+}

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

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());