Enhance IC log and add timestamps

3 files changed, 78 insertions, 4 deletions

diff --git a/webAO/client.css b/webAO/client.css
index d5d8e75..ac1aeca 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -247,6 +247,22 @@ img {
 	/* max-width: 50em; */
 	/* min-height: 30em; */
 	text-align: start;
+	line-height: .85em;
+}
+
+#client_log > p {
+	line-height: 1.2em;
+}
+
+#iclog_name {
+	font-weight: bold;
+	padding-right: .35em;
+}
+
+#iclog_time {
+	float: right;
+	padding-right: .5em;
+	color: #dbdbdb;
 }
 
 #client_ooclog {
@@ -308,4 +324,31 @@ img {
 
 .dark {
 	filter: brightness(50%);
+}
+
+.hrtext {
+	overflow: hidden;
+	text-align: center;
+	font-size: small;
+}
+
+.hrtext:before,
+.hrtext:after {
+	background-color: #c6c6c6;
+	content: "";
+	display: inline-block;
+	height: 1px;
+	position: relative;
+	vertical-align: middle;
+	width: 50%;
+}
+
+.hrtext:before {
+	right: 0.5em;
+	margin-left: -50%;
+}
+
+.hrtext:after {
+	left: 0.5em;
+	margin-right: -50%;
 }
\ No newline at end of file
diff --git a/webAO/client.html b/webAO/client.html
index b6b71a3..e9452af 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -50,7 +50,9 @@
 
 <template id="log">
     <meta name="frame-title" lang="en" content="Log">
-    <div id="client_log"></div>
+    <div id="client_log">
+        <div class="hrtext">↓ log starts here ↓</div>
+    </div>
 </template>
 
 <template id="misc" style="display: flex; flex-direction: column;">
diff --git a/webAO/client.js b/webAO/client.js
index a62d307..41a5916 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -27,6 +27,7 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phon
 }
 
 let selectedShout = 0;
+let lastICMessageTime = new Date(0);
 
 class Client {
 	constructor(address) {
@@ -71,6 +72,8 @@ class Client {
 			"CharsCheck": (args) => this.handleCharsCheck(args),
 			"PV":         (args) => this.handlePV(args)
 		}
+
+		this._lastTimeICReceived = new Date(0);
 	}
 
 	/**
@@ -591,7 +594,7 @@ class Viewport {
 	 */
 	say(chatmsg) {
 		this.chatmsg = chatmsg;
-		appendICLog(`${chatmsg.nameplate}: ${chatmsg.content}`);
+		appendICLog(chatmsg.content, chatmsg.nameplate);
 		changeBackground(chatmsg.side);
 		this.textnow = '';
 		this.sfxplayed = 0;
@@ -908,9 +911,35 @@ window.RetryButton = RetryButton;
 /**
  * Appends a message to the in-character chat log.
  * @param {string} toadd the string to be added
+ * @param {string} name the name of the sender
  */
-function appendICLog(toadd) {
-	document.getElementById("client_log").appendChild(document.createTextNode(toadd));
+function appendICLog(toadd, name = "", time = new Date()) {
+	const entry = document.createElement("p");
+	const nameField = document.createElement("span");
+	nameField.id = "iclog_name";
+	nameField.appendChild(document.createTextNode(name));
+	entry.appendChild(nameField);
+	entry.appendChild(document.createTextNode(toadd));
+
+	// Only put a timestamp if the minute has changed.
+	if (lastICMessageTime.getMinutes() !== time.getMinutes()) {
+		const timeStamp = document.createElement("span");
+		timeStamp.id = "iclog_time";
+		timeStamp.innerText = time.toLocaleTimeString(undefined, {
+			hour: "numeric",
+			minute: "2-digit"
+		});
+		entry.appendChild(timeStamp);
+	}
+
+	const clientLog = document.getElementById("client_log");
+	clientLog.appendChild(entry);
+
+	if (clientLog.scrollTop > clientLog.scrollHeight - 600) {
+		clientLog.scrollTop = clientLog.scrollHeight;
+	}
+
+	lastICMessageTime = new Date();
 }
 
 /**