Add server capability

6 files changed, 202 insertions, 0 deletions

diff --git a/lambda-calcul/haskell/public/images/connect.png b/lambda-calcul/haskell/public/images/connect.png
new file mode 100644
index 0000000..84c95c4
--- /dev/null
+++ b/lambda-calcul/haskell/public/images/connect.png
diff --git a/lambda-calcul/haskell/public/images/connected.png b/lambda-calcul/haskell/public/images/connected.png
new file mode 100644
index 0000000..d85177d
--- /dev/null
+++ b/lambda-calcul/haskell/public/images/connected.png
diff --git a/lambda-calcul/haskell/public/index.html b/lambda-calcul/haskell/public/index.html
new file mode 100644
index 0000000..2672e8d
--- /dev/null
+++ b/lambda-calcul/haskell/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Minilang</title>
+    <link rel="stylesheet" href="minilang.css" >
+    <link rel="icon"
+          type="image/png"
+          href="/pi.png">
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
+  </head>
+  <body>
+    <div class="edit">
+      <textarea id="program"></textarea>
+      <div>
+        <button id="send">Send</button>
+      </div>
+    </div>
+    <div id="repl">
+      <div class="command">
+        <input id="command" class="disconnected" />
+        <img id="connect" src="images/connect.png" />
+      </div>
+      <div id="minilang"></div>
+    </div>
+    <script src="repl.js"></script>
+</body></html>
diff --git a/lambda-calcul/haskell/public/minilang.css b/lambda-calcul/haskell/public/minilang.css
new file mode 100644
index 0000000..2e20838
--- /dev/null
+++ b/lambda-calcul/haskell/public/minilang.css
@@ -0,0 +1,67 @@
+html {
+    font-family: Inconsolata, Courier;
+}
+
+div#minilang {
+    height: 90vh;
+    overflow-y: auto;
+}
+
+div.edit {
+    width: 50vw;
+    height: 90vh;
+    float: left;
+}
+
+textarea#program {
+    width: 100%;
+    height: 90%;
+    padding: 1em;
+    font-family: Inconsolata, Courier;
+    font-size: 12pt;
+    resize: none;
+    white-space: pre;
+    spellcheck: false;
+    autocomplete: off;
+    autocapitalize: none;
+    wrap: off;
+}
+
+div#repl {
+    width: 45vw;
+    float: right;
+}
+
+div.output {
+    width: 90%;
+    white-space: pre-wrap;
+    padding: 0em 1em 0 1em;
+}
+
+div.command {
+    height: 2em;
+}
+
+.command input {
+    display: inline-block;
+    vertical-align: middle;
+    font-family: Inconsolata;
+    font-size: 12pt;
+    border: none;
+    width: 80%;
+    margin: 0em 1em 0em 1em;
+}
+
+.connected {
+    background-color: #aaf;
+}
+
+.disconnected {
+    background-color: #faa;
+}
+
+.command img {
+    display: inline-block;
+    vertical-align: middle;
+    height: 2em;
+}
diff --git a/lambda-calcul/haskell/public/pi.png b/lambda-calcul/haskell/public/pi.png
new file mode 100644
index 0000000..373307d
--- /dev/null
+++ b/lambda-calcul/haskell/public/pi.png
diff --git a/lambda-calcul/haskell/public/repl.js b/lambda-calcul/haskell/public/repl.js
new file mode 100644
index 0000000..12ce03a
--- /dev/null
+++ b/lambda-calcul/haskell/public/repl.js
@@ -0,0 +1,108 @@
+var websocket = undefined;
+
+function connect() {
+    websocket = (function() {
+        const host = window.location.host;
+        const ws = new WebSocket("ws://" + host + "/repl/1235");
+        ws.binaryType = "arraybuffer";
+        return ws;
+    })();
+
+    websocket.onopen = function(e) {
+        document.getElementById("command").classList.remove("disconnected");
+        document.getElementById("command").classList.add("connected");
+        document.getElementById("connect").src = "images/connected.png";
+        document.getElementById("connect").removeEventListener("click", connect);
+    };
+
+    websocket.onclose = function(e) {
+        document.getElementById("command").classList.remove("connected");
+        document.getElementById("command").classList.add("disconnected");
+        document.getElementById("connect").src = "images/connect.png";
+        document.getElementById("connect").addEventListener("click", connect);
+    };
+
+    websocket.onmessage = function(e) {
+        const reader = new FileReader();
+        reader.addEventListener('loadend', readMessageAndAppend(reader));
+
+        if(e.data instanceof ArrayBuffer) {
+            reader.readAsText(new Blob([e.data]));
+        } else {
+            reader.readAsText(e.data);
+        }
+    };
+}
+
+var commandHistory = [];
+
+function appendOutput(text) {
+    const root = document.getElementById("minilang");
+    const sub = document.createElement("div");
+    sub.classList.add("output");
+    sub.appendChild(text);
+    if(root.firstChild) {
+        root.insertBefore(sub, root.firstChild);
+    } else {
+        root.appendChild(sub);
+    }
+};
+
+function formatResult(text) {
+    const result = JSON.parse(text);
+    if (result.tag === "Msg") {
+        return result.contents;
+    }
+    return text;
+}
+
+function readMessageAndAppend(reader) {
+    return () => {
+        appendOutput(document.createTextNode(formatResult(reader.result)));
+    };
+};
+
+function makeCommand(val) {
+    if(val === ":env") {
+        return {tag:"Com",contents:{tag:"DumpEnv"}};
+    } else if(val === ":clear") {
+        return {tag:"Com",contents:{tag:"ClearEnv"}};
+    } else if(val === ":help") {
+        return {tag:"Com",contents:{tag:"Help"}};
+    } else {
+        return {tag:"In",contents:val};
+    }
+};
+
+function sendCommand(e) {
+    const input = document.getElementById("command");
+    if (e.keyCode == 13) {
+        const command = makeCommand(input.value);
+        appendOutput(document.createTextNode("> "+ input.value));
+        commandHistory.push(input.value);
+        websocket.send(JSON.stringify(command));
+        input.value = "";
+        return false;
+    } else if(e.keyCode == 38) {
+        input.value = commandHistory.pop() || "";
+        return false;
+    }
+
+    return true;
+};
+
+function loadText(e) {
+    const text = document.getElementById("program").value;
+    const command = {tag:"Com",
+                     contents:{ tag:"Load",
+                                contents:{ tag:"Data",
+                                           contents:text}}};
+    websocket.send(JSON.stringify(command));
+    return false;
+};
+
+document.getElementById("command").addEventListener("keyup", sendCommand);
+document.getElementById("connect").addEventListener("click", connect);
+document.getElementById("send").addEventListener("click", loadText);
+
+connect();