From 1596907546a7947683744477b21f7b0c3122bbc6 Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Mon, 29 Apr 2024 03:32:44 -0400
Subject: [PATCH] expand client

---
 test_client.html | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)
diff --git a/test_client.html b/test_client.html
index 357b04e..96ec552 100644
--- a/test_client.html
+++ b/test_client.html
@@ -8,6 +8,10 @@
           background-color: #111;
           color: #DDD;
       }
+      div {
+          margin-top: 1rem;
+      }
+
     </style>
   </head>
   <body>
@@ -15,14 +19,18 @@
     <div id="status">
       <p><em>Disconnected...</em></p>
     </div>
-    <form id="login" onsubmit="loginSubmit();return false">
-      <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
-      <button id="join-chat" type="submit">Join Chat</button>
-    </form>
-    <form id="chat" onsubmit="chatSubmit();return false">
-      <textarea id="chat-history" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
-      <input id="chat-input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
-    </form>
+    <div>
+      <form id="login" onsubmit="loginSubmit();return false">
+        <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
+        <button id="join-chat" type="submit">Join Chat</button>
+      </form>
+    </div>
+    <div>
+      <form id="chat" onsubmit="chatSubmit();return false">
+        <textarea id="chat-history"  readonly="true" wrap="soft" style="display:block; width:30rem; height:10rem; box-sizing: border-box" cols="30" rows="10"></textarea>
+        <input id="chat-input" style="display:block; width:30rem; box-sizing: border-box" type="text" placeholder="chat">
+      </form>
+    </div>
     <script type="text/javascript">
       websocket = new WebSocket("ws://localhost:3030/websocket");
 
@@ -32,7 +40,7 @@
       };
 
       websocket.onopen = function() {
-          console.log("connection opened");
+          console.log("connection opened",websocket.extensions, websocket.protocol, websocket.readyState);
           document.getElementById("status").innerHTML = '<p><em>Connected!</em></p>';
       }
 
@@ -43,8 +51,10 @@
       }
 
       websocket.onmessage = function(e) {
+          const history = document.getElementById("chat-history")
           console.log("received message: "+e.data);
-          document.getElementById("chat-history").value += e.data+"\r\n";
+          history.value += e.data+"\r";
+          history.scrollTop = history.scrollHeight;
       }
 
       function chatSubmit() {
@@ -52,6 +62,10 @@
               websocket.send(input.value);
               input.value = "";
       };
+
+      websocket.addEventListener("error", (event) => {
+          console.log("WebSocket error: ", event);
+      });
     </script>
   </body>
 </html>
