X-Git-Url: https://jxself.org/git/?p=mudsync.git;a=blobdiff_plain;f=data%2Fweb-static%2Fjs%2Fmudsync.js;h=c5b7dca82d47cd928e351035814fda29b01327e1;hp=f66a9477ca53597bf601502c17ce72b82b159149;hb=25c34496ce23be265460bc4c95cba6036ff577a2;hpb=2a761f453a55ff6d896e17efc672300dc1b49c8e

diff --git a/data/web-static/js/mudsync.js b/data/web-static/js/mudsync.js
index f66a947..c5b7dca 100644
--- a/data/web-static/js/mudsync.js
+++ b/data/web-static/js/mudsync.js
@@ -18,29 +18,91 @@
 ;;; along with Mudsync.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-function displayMessage(data) {
+function scrollDown() {
+    var stream_metabox = document.getElementById("stream-metabox");o
+    stream_metabox.scrollTop = stream_metabox.scrollHeight;
+}
+
+function withMaybeScroll(thunk) {
+    var stream_metabox = document.getElementById("stream-metabox");
+    var should_scroll = false;
+    // if within a reasonable threshold, we scroll
+    if((stream_metabox.scrollHeight - stream_metabox.offsetHeight)
+       - stream_metabox.scrollTop <= 50) {
+        should_scroll = true;
+    }
+    thunk();
+    if (should_scroll) {
+        stream_metabox.scrollTop = stream_metabox.scrollHeight;
+    }
+}
+
+
+function displayMessage(data, self_sent) {
     var new_entry = document.createElement("div");
-    new_entry.setAttribute("class", "stream-entry");
-    var new_text = document.createTextNode(data);
-    new_entry.appendChild(new_text);
-    document.getElementById("stream").appendChild(new_entry);
+    withMaybeScroll(
+        function () {
+            if (self_sent) {
+                new_entry.setAttribute("class", "stream-entry self-sent");
+                document.getElementById("main-input").value = "";
+            } else {
+                new_entry.setAttribute("class", "stream-entry");
+            }
+            new_entry.innerHTML = data;
+            document.getElementById("stream").appendChild(new_entry);
+        });
+}
+
+function setConnectedText(string, to_class) {
+    var stream_metabox = document.getElementById("connection-status");
+    stream_metabox.textContent = "[" + string + "]";
+    stream_metabox.setAttribute("class", to_class);
 }
 
 function installWebsocket() {
     // TODO: Don't hardcode the websocket path; pull it from the DOM
-    var ws = new WebSocket("ws://127.0.0.1:8888");
+    var address = "ws://".concat(window.location.hostname, ":", window.location.port);
+    var ws = new WebSocket(address);
     ws.onmessage = function(evt) {
-        displayMessage(evt.data);
+        displayMessage(evt.data, false);
     };
     ws.onopen = function() {
+        setConnectedText("connected", "connected");
         console.log("connected");
-        ws.send("Hello, there!");
     };
     ws.onclose = function () {
+        setConnectedText("disconnected", "disconnected");
+        // kludge, we shouldn't be using self_sent like this because it
+        // wipes the input
+        displayMessage(
+            "* You have been disconnected.  Refresh to (hopefully) reconnect.",
+            true);
         console.log("closed websocket");
     };
+    installUIHooks(ws);
+}
+
+function installUIHooks(ws) {
+    var input = document.getElementById("main-input");
+    input.onkeypress = function(e) {
+        if (!e) e = window.event;
+        var keyCode = e.keyCode || e.which;
+        if (keyCode == '13') {
+            var input_val = input.value;
+            withMaybeScroll(
+                function () {
+                    displayMessage("> ".concat(input_val), true);
+                });
+            sendMessageToServer(ws, input_val);
+        }
+    }
+}
+
+function sendMessageToServer(ws, data) {
+    ws.send(data);
 }
 
 window.onload = function () {
     installWebsocket();
+    window.onresize = scrollDown;
 }