add help panel to the REPL

1 files changed, 53 insertions, 2 deletions

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>