From faefbb37d42fd81ff5336b855cf5784684d0ab09 Mon Sep 17 00:00:00 2001
From: Sky Johnson <skylearj@gmail.com>
Date: Wed, 18 Dec 2024 10:51:29 -0600
Subject: [PATCH] Made the babblebox a live, reactive component

---
 public/css/dk.css             | 27 ++++++++++++
 public/index.php              | 40 +++++++++++++-----
 src/bootstrap.php             |  2 +-
 src/render.php                |  5 +++
 templates/babblebox.php       | 79 +++++++++++------------------------
 templates/layouts/primary.php |  4 +-
 templates/towns.php           |  3 +-
 7 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/public/css/dk.css b/public/css/dk.css
index ecdee74..b9a434c 100644
--- a/public/css/dk.css
+++ b/public/css/dk.css
@@ -2,6 +2,10 @@
 	--font-size: 12px;
 }
 
+* {
+	box-sizing: border-box;
+}
+
 html {
 	font-size: var(--font-size);
 	font-family: sans-serif;
@@ -200,3 +204,26 @@ div.stat-bar > div {
 	position: absolute;
 	bottom: 0;
 }
+
+#babblebox > .messages {
+	max-height: 200px;
+	overflow-y: auto;
+}
+
+#babblebox > .messages .message {
+	padding: 0.25rem;
+	background-color: #eee;
+
+	&:nth-child(even) {
+		background-color: white;
+	}
+}
+
+#babblebox > form {
+	margin-top: 0 !important;
+
+	& > input[type="text"] {
+		width: 100%;
+		margin-bottom: 0.5rem;
+	}
+}
diff --git a/public/index.php b/public/index.php
index 0ba8140..6fe5905 100644
--- a/public/index.php
+++ b/public/index.php
@@ -4,6 +4,12 @@
 
 require_once '../src/bootstrap.php';
 
+// Do an early return with babblebox data if that's what's being requested
+if ($uri[0] === 'babblebox' && (isset($uri[1]) && $uri[1] === 'messages')) {
+	echo babblebox_messages();
+	exit;
+}
+
 $r = new Router;
 
 $r->get('/', function() {
@@ -39,14 +45,14 @@ $r->get('/character', 'show_character_info');
 $r->get('/character/:id', 'show_character_info');
 $r->get('/showmap', 'showmap');
 $r->form('/babblebox', 'babblebox');
+$r->get('/babblebox/messages', 'babblebox_messages');
 
 // [code, handler, params, middleware]
 $l = $r->lookup($_SERVER['REQUEST_METHOD'], $_SERVER['REQUEST_URI']);
 
 if (is_int($l)) exit("Error: $l");
-if (!empty($l['middleware'])) foreach ($l['middleware'] as $middleware) $middleware();
 $content = $l['handler'](...$l['params'] ?? []);
-if (is_htmx()) {
+if (is_htmx() && $uri[0] !== 'babblebox') {
 	$content .= Render\debug_db_info();
 	if ($GLOBALS['state']['user-state-changed'] ?? false) {
 		$content .= Render\right_nav();
@@ -113,22 +119,36 @@ function showmap()
 }
 
 /**
- * Either render the latest 40 chats to the babblebox, or add a chat to it and redirect. This is used
- * within an iframe.
+ * ...
  */
 function babblebox()
 {
     if ($_SERVER['REQUEST_METHOD'] === 'POST') {
-        $safecontent = make_safe($_POST["babble"]);
-        if (!empty($safecontent)) {
+        $content = trim($_POST["babble"]);
+        if (!empty($content)) {
 			db()->query('INSERT INTO babble (posttime, author, babble) VALUES (CURRENT_TIMESTAMP, ?, ?);',
-				[user()->username, $safecontent]);
+				[user()->username, $content]);
 		}
-        redirect('/babblebox');
+        return babblebox_messages();
     }
+}
 
-	$query = db()->query('SELECT * FROM babble ORDER BY id DESC LIMIT 40;');
-	echo render('babblebox', ['messages' => $query]);
+/**
+ * Is the handler for the HTMX get request for messages.
+ */
+function babblebox_messages(): string
+{
+	if (user() === false) return '';
+
+	$query = db()->query('SELECT * FROM babble ORDER BY id ASC LIMIT 40;');
+	$has_chats = false;
+	$messages = '';
+	while ($row = $query->fetchArray(SQLITE3_ASSOC)) {
+		$has_chats = true;
+		$messages .= '<div class="message">[<b>' . $row['author'] . '</b>] ' . make_safe($row['babble']) . '</div>';
+	}
+	if (!$has_chats) $messages = 'There are no messages. :(';
+	return $messages;
 }
 
 /**
diff --git a/src/bootstrap.php b/src/bootstrap.php
index 88ac6bb..0c52d5a 100644
--- a/src/bootstrap.php
+++ b/src/bootstrap.php
@@ -27,7 +27,7 @@ if (!file_exists('../.installed') && $uri[0] !== 'install') {
 	redirect('/install');
 } elseif (file_exists(('../.installed')) && $uri[0] === 'install') {
 	redirect('/');
-} elseif (file_exists(('../.installed')) && $uri[0] !== 'install') {
+} else {
 	$controlrow = get_control_row();
 
 	if (!$controlrow["gameopen"]) {
diff --git a/src/render.php b/src/render.php
index c967839..09a675d 100644
--- a/src/render.php
+++ b/src/render.php
@@ -38,3 +38,8 @@ function right_nav(): string
 	if (is_htmx()) $template = '<section id="right" hx-swap-oob="true">'.$template."</section>";
 	return $template;
 }
+
+function babblebox(): string
+{
+	return render('babblebox', ['messages' => babblebox_messages()]);
+}
diff --git a/templates/babblebox.php b/templates/babblebox.php
index d584d98..60cf9c9 100644
--- a/templates/babblebox.php
+++ b/templates/babblebox.php
@@ -1,58 +1,29 @@
-<html lang="en">
-<head>
-	<title>Babblebox</title>
-	<style type="text/css">
-		body {
-			background-image: url('/img/background.jpg');
-			color: black;
-			font: 11px verdana;
-			margin: 0px;
-			padding: 0px;
-		}
+<div id="babblebox">
+	<div class="messages" hx-get="/babblebox/messages" hx-trigger="every 5s">
+		<?= $messages ?>
+	</div>
 
-		div {
-			padding: 2px;
-			border: solid 1px black;
-			margin: 2px;
-			text-align: left;
-		}
-
-		a {
-			color: #663300;
-			text-decoration: none;
-			font-weight: bold;
-		}
-
-		a:hover {
-			color: #330000;
-		}
-
-		div.message {
-			background-color: white;
-		}
-
-		div.message:nth-child(even) {
-			background-color: #eeeeee;
-		}
-	</style>
-</head>
-
-<body onload="window.scrollTo(0, 99999)">
-	<?php
-		$has_chats = false;
-		while ($row = $messages->fetchArray(SQLITE3_ASSOC)):
-			$has_chats = true;
-	?>
-			<div class="message">[<b><?= $row['author'] ?></b>] <?= $row['babble'] ?></div>
-	<?php
-		endwhile;
-		if (!$has_chats) echo 'There are no messages. :(';
-	?>
-
-	<form action="/babblebox" method="post" style="margin-top: 1rem;">
-		<input type="text" name="babble" maxlength="255" style="width: 100%;"><br>
+	<form hx-post="/babblebox" hx-target="#babblebox > .messages" style="margin-top: 1rem;">
+		<input type="text" name="babble" maxlength="255"><br>
 		<input type="submit" name="submit" value="Babble">
 		<input type="reset" name="reset" value="Clear">
 	</form>
-</body>
-</html>
+
+	<script>
+		const chatBox = document.querySelector('#babblebox > .messages')
+		let isUserAtBottom = true
+		if (chatBox !== null) {
+			chatBox.scrollTop = chatBox.scrollHeight;
+			const isAtBottom = () => chatBox.scrollHeight - chatBox.scrollTop === chatBox.clientHeight
+
+			const scrollChatToBottom = () => {
+				if (isUserAtBottom) chatBox.scrollTop = chatBox.scrollHeight;
+			}
+
+			const observer = new MutationObserver(scrollChatToBottom)
+			observer.observe(chatBox, { childList: true, subtree: true })
+
+			chatBox.addEventListener('scroll', () => isUserAtBottom = isAtBottom())
+		}
+	</script>
+</div>
diff --git a/templates/layouts/primary.php b/templates/layouts/primary.php
index 4d3855a..6f82d9e 100644
--- a/templates/layouts/primary.php
+++ b/templates/layouts/primary.php
@@ -55,12 +55,12 @@
 
 	<script>
 		document.addEventListener("updateTitle", (event) => {
-			const title = event.detail?.title;
+			const title = event.detail?.title
 			if (title) {
 				console.log('New title:', title);
 				document.title = title;
 			}
-		});
+		})
 	</script>
 </body>
 </html>
diff --git a/templates/towns.php b/templates/towns.php
index 954ce03..4ec1e01 100644
--- a/templates/towns.php
+++ b/templates/towns.php
@@ -18,6 +18,7 @@
 	</div>
 
 	<div class="babblebox">
-		<?= $town['babblebox'] ?>
+		<div class="title">Babblebox</div>
+		<?= Render\babblebox() ?>
 	</div>
 </div>