add help panel to the REPL

3 files changed, 100 insertions, 3 deletions

diff --git a/lambda-calcul/haskell/public/minilang.css b/lambda-calcul/haskell/public/minilang.css
index 546eb69..0bfd397 100644
--- a/lambda-calcul/haskell/public/minilang.css
+++ b/lambda-calcul/haskell/public/minilang.css
@@ -63,7 +63,7 @@ div.command {
     background-color: #faa;
 }
 
-.command img {
+img.connect {
     display: inline-block;
     vertical-align: middle;
     height: 2em;
@@ -134,3 +134,37 @@ tr:nth-child(even) {
 .fail {
     background-color: red;
 }
+
+span#helptip {
+    display: inline-block;
+    background-color: orange;
+    width: .9em;
+    height: .9em;
+    font-size: 60%;
+    border-radius: 10pt;
+    padding: .2em;
+    cursor: pointer;
+    vertical-align: top;
+}
+
+div#help {
+    background-color: white;
+    overflow-y: auto;
+    padding: 1em;
+    width: 80vw;
+    height: 70vh;
+    border: 1px solid black;
+    margin: auto;
+    z-index: 10;
+    position: fixed;
+    top: 15vh;
+    left: 10vw;
+    display: none;
+}
+
+code {
+    background-color: #222;
+    color: #ddd;
+    padding: 1pt 2pt;
+    font-family: Inconsolata, Courier;
+}
diff --git a/lambda-calcul/haskell/public/repl.html b/lambda-calcul/haskell/public/repl.html
index ee24236..a6c5e78 100644
--- a/lambda-calcul/haskell/public/repl.html
+++ b/lambda-calcul/haskell/public/repl.html
@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
   </head>
   <body>
-    <h1>λ-Calculus Terminal</h1>
+    <h1>λ-Calculus Terminal <span id="helptip">?</span></h1>
     <div class="edit">
       <textarea id="program"></textarea>
       <div>
@@ -21,10 +21,61 @@
     <div id="repl">
       <div class="command">
         <input id="command" class="disconnected" />
-        <img id="connect" src="images/connect.png" />
+        <img class="connect" id="connect" src="images/connect.png" />
       </div>
       <div id="minilang"></div>
     </div>
+    <div id="help">
+      <h2>Minilang REPL Help</h2>
+      <p>This is a read-eval-print loop (REPL) for the Minilang λ-calculus interpreter.</p>
+      <h3>Connecting to the Interpreter</h3>
+      <p>Click the <img class="connect" src="images/connect.png" alt="Connect Icon" /> icon to connect to the interpreter. Once connected, the input box border will turn green.</p>
+      <h3>Entering Commands</h3>
+      <p>Type your Minilang commands into the input box and press <em>Enter</em> to execute them. The results will be displayed below. Available commands can be found by typing <code>:help</code>, the most important ones being:</p>
+      <dl>
+        <dt><code>:help</code></dt>
+        <dd>Display this help message.</dd>
+        <dt><code>:clear</code></dt>
+        <dd>Clear the REPL output and environment. All definitions will be removed.</dd>
+        <dt><code>:env</code></dt>
+        <dd>Display the current environment with all defined variables and their values.</dd>
+        <dt><code>:lang language</code></dt>
+        <dd>Switch the interpreter to the specified language mode. Supported values are <code>Untyped</code> or <code>Typed</code>.
+        By default the REPL is interpreting the untyped version.</dd>
+      </dl>
+
+      <h3>Disconnecting</h3>
+      <p>To disconnect from the interpreter, click the <img class="connect" src="images/connected.png" alt="Disconnect Icon" /> icon. The input box border will turn red.</p>
+      <h3>Entering Programs</h3>
+      <p>
+        The left hand panel is a "terminal" for entering whole programs. Once you're happy with your program you can click on the <em>Send</em>
+        button, the program will be sent as is to the server and its evaluation result will appear below the command panel.
+      </p>
+      <h4>Syntax</h4>
+      <p>The syntax is based on <a href="https://en.wikipedia.org/wiki/S-expression" target="_blank">s-expressions</a>, e.g. like LISP, Scheme or Clojure. The semi-formal grammar of expressions (or <code>&lt;term&gt;</code>) is given by the following rules:</p>
+      <dl>
+        <dt><code>&lt;symbol&gt;</code></dt>
+        <dd>A symbol is a sequence of letters and some symbols ('-', '_', '*', '#', '%', '&', ':', '@', '/')</dd>
+
+        <dt><code>(&lt;term&gt; &lt;term&gt;+)</code></dt>
+        <dd>An <em>application</em> expression: needs at least 2 terms, and terms are applied from left to right.</dd>
+
+        <dt><code>(lam (&lt;symbol&gt;+) &lt;term&gt;)</code></dt>
+        <dd>An <em>abstraction</em> expression (ie. a function definition): needs at least 1 symbol</dd>
+      </dl>
+      <p>Beside <em>expressions</em> which are evaluated, one can enter <em>definitions</em> which augment the current <em>environment</em> and can be referred to by later expressions or definitions</p>
+      <dl>
+        <dt><code>(def &lt;symbol&gt; &lt;term&gt;)</code></dt>
+        <dd>Binds <code>symbol</code> to <code>term</code> in the current environment</dd>
+      </dl>
+
+      <h3>Troubleshooting</h3>
+      <ul>
+        <li>If you encounter connection issues, ensure that your internet connection is stable.</li>
+        <li>If commands are not executing, try reconnecting to the interpreter.</li>
+      </ul>
+    </div>
+
     <script src="repl.js"></script>
   </body>
 </html>
diff --git a/lambda-calcul/haskell/public/repl.js b/lambda-calcul/haskell/public/repl.js
index 17be218..fd1244a 100644
--- a/lambda-calcul/haskell/public/repl.js
+++ b/lambda-calcul/haskell/public/repl.js
@@ -132,8 +132,20 @@ function loadText(e) {
   return false;
 };
 
+function toggleHelp(e) {
+  const help = document.getElementById("help");
+  if(help.style.display === "block") {
+    help.style.display = "none";
+  } else {
+    help.style.display = "block";
+  }
+}
+
+
 document.getElementById("command").addEventListener("keyup", sendCommand);
 document.getElementById("connect").addEventListener("click", connect);
 document.getElementById("send").addEventListener("click", loadText);
+document.getElementById("helptip").addEventListener("click", toggleHelp);
+document.getElementById("help").addEventListener("click", toggleHelp);
 
 connect();