From 9ffde5c560301f6bd05e3995b4276d3f802e9b37 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sun, 19 Dec 2021 17:01:54 +0100
Subject: Chronological log order!

Use a ResizeObserver to keep the log scrolled to the bottom.
---
 public/common/client.js | 26 ++++++++++++++++++--------
 public/common/grid.css  |  1 +
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/public/common/client.js b/public/common/client.js
index dd3c6bf..3af9605 100644
--- a/public/common/client.js
+++ b/public/common/client.js
@@ -239,10 +239,10 @@ function init_client(roles) {
 		console.log("STATE", !!new_game.actions, new_game_over);
 		game = new_game;
 		game_over = new_game_over;
-		on_update_log();
 		on_update_bar();
 		on_update();
 		on_game_over();
+		on_update_log();
 	});
 
 	socket.on('save', (msg) => {
@@ -315,16 +315,26 @@ let create_log_entry = function (text) {
 	return p;
 }
 
+let log_scroller = document.querySelector(".grid_log");
+
 function on_update_log() {
 	let parent = document.getElementById("log");
 	let to_delete = parent.children.length - game.log_start;
-	while (to_delete > 0) {
-		parent.removeChild(parent.firstChild);
-		--to_delete;
-	}
-	for (let entry of game.log) {
-		parent.prepend(create_log_entry(entry));
-	}
+	while (to_delete-- > 0)
+		parent.removeChild(parent.lastChild);
+	for (let entry of game.log)
+		parent.appendChild(create_log_entry(entry));
+	log_scroller.scrollTop = log_scroller.scrollHeight;
+}
+
+try {
+	new ResizeObserver(entries => {
+		log_scroller.scrollTop = log_scroller.scrollHeight;
+	}).observe(log_scroller);
+} catch (err) {
+	window.addEventListener("resize", evt => {
+		log_scroller.scrollTop = log_scroller.scrollHeight;
+	});
 }
 
 function toggle_fullscreen() {
diff --git a/public/common/grid.css b/public/common/grid.css
index 44a2b7d..09a14eb 100644
--- a/public/common/grid.css
+++ b/public/common/grid.css
@@ -119,6 +119,7 @@ html {
 	padding-left: 20px;
 	padding-top: 8px;
 	padding-right: 8px;
+	padding-bottom: 8px;
 	text-indent: -12px;
 	font-size: 12px;
 	line-height: 18px;
-- 
cgit v1.2.3