From bc1f7779d78884f56702fafb5c16b97af80ec387 Mon Sep 17 00:00:00 2001
From: bel <bel>
Date: Tue, 14 Oct 2025 22:49:40 -0600
Subject: [PATCH] less ew to look at

---
 src/public/index.html | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/public/index.html b/src/public/index.html
index b7b87cd..4d50bb6 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
         <script>  
             window.addEventListener("load", function(evt) {
                 var output = document.getElementById("output");
@@ -11,15 +12,19 @@
                 var ws;
             
                 var print = function(message) {
-                    var d = document.createElement("div");
-                    d.textContent = message;
-                    output.appendChild(d);
-                    output.scroll(0, output.scrollHeight);
+                    var before = output.innerHTML.split("<br>");
+                    before.unshift(`${new Date().toLocaleTimeString()} | ${message}`);
+                    if (before.length > 20) {
+                        before = before.slice(0, 20);
+                    }
+                    var after = before.join("<br>");
+                    output.innerHTML = after;
+                    output.scroll(0, 0);
                 };
             
                 ws = new WebSocket("ws://"+window.location.host+"/ws");
                 ws.onopen = function(evt) {
-                    print("OPEN");
+                    print("READY");
                 }
                 ws.onclose = function(evt) {
                     print("CLOSE");
@@ -69,7 +74,8 @@
     <body>
         <div style="width: 80%; height: 80%; margin: auto; display: flex; flex-direction: row;">
             <form style="flex-grow: 1;">
-                <p><input id="input" type="text" value="" autofocus>
+                <p><input id="input" type="textarea" value="" autofocus style="width: 80%">
+                <p>
                 <button id="send">Send</button>
             </form>
             <div id="output" style="flex-grow: 1; overflow-y: scroll;"></div>
