less ew to look at

master
bel 2025-10-14 22:49:40 -06:00
parent 49880c837d
commit bc1f7779d7
1 changed files with 12 additions and 6 deletions

View File

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