provide session id to user so they can reconnect

3 files changed, 11 insertions, 2 deletions

diff --git a/lambda-calcul/haskell/public/minilang.css b/lambda-calcul/haskell/public/minilang.css
index 0bfd397..801350d 100644
--- a/lambda-calcul/haskell/public/minilang.css
+++ b/lambda-calcul/haskell/public/minilang.css
@@ -168,3 +168,9 @@ code {
     padding: 1pt 2pt;
     font-family: Inconsolata, Courier;
 }
+
+div#session {
+    width: 80%;
+    margin: 0em 1em 0em 1em;
+    padding: .2em;
+}
diff --git a/lambda-calcul/haskell/public/repl.html b/lambda-calcul/haskell/public/repl.html
index a6c5e78..4d95361 100644
--- a/lambda-calcul/haskell/public/repl.html
+++ b/lambda-calcul/haskell/public/repl.html
@@ -19,6 +19,7 @@
       </div>
     </div>
     <div id="repl">
+      <div id="session"></div>
       <div class="command">
         <input id="command" class="disconnected" />
         <img class="connect" id="connect" src="images/connect.png" />
diff --git a/lambda-calcul/haskell/public/repl.js b/lambda-calcul/haskell/public/repl.js
index 22068f1..8f5d619 100644
--- a/lambda-calcul/haskell/public/repl.js
+++ b/lambda-calcul/haskell/public/repl.js
@@ -7,7 +7,7 @@ function generateRandomToken() {
 }
 
 function connect() {
-  websocket = (function() {
+  [websocket, token] = (function() {
     const host = window.location.host;
     const params = new URLSearchParams(window.location.search);
     let token = generateRandomToken();
@@ -17,7 +17,7 @@ function connect() {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const ws = new WebSocket(protocol + "//" + host + "/repl/" + token);
     ws.binaryType = "arraybuffer";
-    return ws;
+    return [ws, token];
   })();
 
   websocket.onopen = function(e) {
@@ -25,6 +25,7 @@ function connect() {
     document.getElementById("command").classList.add("connected");
     document.getElementById("connect").src = "images/connected.png";
     document.getElementById("connect").removeEventListener("click", connect);
+    document.getElementById("session").appendChild(document.createTextNode("Session: " + token));
   };
 
   websocket.onclose = function(e) {
@@ -32,6 +33,7 @@ function connect() {
     document.getElementById("command").classList.add("disconnected");
     document.getElementById("connect").src = "images/connect.png";
     document.getElementById("connect").addEventListener("click", connect);
+    document.getElementById("session").children.each((node) => node.remove());
   };
 
   websocket.onmessage = function(e) {