formatted output
[mudsync.git] / data / web-static / js / mudsync.js
index f2edef9331316fc7527652a52e39a4b086911787..631fa89e0f1c6e7ec672f16ca5bd218f61d5aeff 100644 (file)
@@ -1,23 +1,78 @@
-function displayMessage(data) {
-    console.log("received message");
-    console.log(data);
+/*
+;;; Mudsync --- Live hackable MUD
+;;; Copyright © 2017 Christopher Allan Webber <cwebber@dustycloud.org>
+;;;
+;;; This file is part of Mudsync.
+;;;
+;;; Mudsync is free software; you can redistribute it and/or modify it
+;;; under the terms of the GNU General Public License as published by
+;;; the Free Software Foundation; either version 3 of the License, or
+;;; (at your option) any later version.
+;;;
+;;; Mudsync is distributed in the hope that it will be useful, but
+;;; WITHOUT ANY WARRANTY; without even the implied warranty of
+;;; MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+;;; General Public License for more details.
+;;;
+;;; You should have received a copy of the GNU General Public License
+;;; along with Mudsync.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+function displayMessage(data, self_sent) {
+    var new_entry = document.createElement("div");
+    var stream_metabox = document.getElementById("stream-metabox");
+    var should_scroll = false;
+    if(stream_metabox.scrollTop === (stream_metabox.scrollHeight
+                                     - stream_metabox.offsetHeight)) {
+        should_scroll = true;
+    }
+    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);
+    if (should_scroll) {
+        stream_metabox.scrollTop = stream_metabox.scrollHeight;
+    }
 }
 
 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() {
         console.log("connected");
-        ws.send("Hello, there!");
     };
     ws.onclose = function () {
         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;
+            displayMessage("> ".concat(input_val), true);
+            sendMessageToServer(ws, input_val);
+        }
+    }
 }
 
+function sendMessageToServer(ws, data) {
+    ws.send(data);
+}
+
+
 window.onload = function () {
     installWebsocket();
 }