Add vim keybindings, man pages

front/src/index.css

@@ -179,6 +179,12 @@ textarea:focus {
   border: 1px solid var(--gold-color);
 }
 
+.man-page-title {
+  display: flex;
+  justify-content: space-between;
+  align-itemts: center;
+}
+
 .modal {
   display: flex;
   flex-direction: column;

front/src/index.js

@@ -7,6 +7,7 @@ import { Root } from "./root";
 import { Demo } from "./routes/demo";
 import { Home } from "./routes/home";
 import { Keys } from "./routes/keys";
+import { ManPages } from "./routes/man_pages";
 import { Password } from "./routes/password";
 import { AuthSuccessful } from "./routes/auth_successful";
 
@@ -35,6 +36,10 @@ const router = createBrowserRouter([
         path: "auth-successful",
         element: <AuthSuccessful />,
       },
+      {
+        path: "man-pages",
+        element: <ManPages />,
+      },
     ],
   },
 ]);

front/src/root.jsx

@@ -42,6 +42,9 @@ export const Root = () => {
                 </a>
               </>
             )}
+            <Link className="link" to="/man-pages">
+              Man Pages
+            </Link>
           </div>
         </div>
         <div className="content">

front/src/routes/home.jsx

@@ -3,15 +3,20 @@ import { Link } from "react-router-dom";
 
 import { useAuthContext } from "../context/auth_context";
 
+const generateSSHConfig = (username) => `
+Host chessh
+  Hostname ${process.env.REACT_APP_SSH_SERVER}
+  Port ${process.env.REACT_APP_SSH_PORT}
+  User "${username}"
+  PubkeyAuthentication yes
+`;
+
 export const Home = () => {
   const { player, signedIn } = useAuthContext();
 
   if (signedIn) {
-    const sshConfig = `Host chessh
-  Hostname ${process.env.REACT_APP_SSH_SERVER}
-  Port ${process.env.REACT_APP_SSH_PORT}
-  User "${player?.username}"
-  PubkeyAuthentication yes`;
+    const sshConfig = generateSSHConfig(player?.username);
+
     return (
       <>
         <h2>Welcome, {player?.username}</h2>
@@ -51,7 +56,7 @@ export const Home = () => {
             <li>Then, connect with:</li>
             <CopyBlock
               theme={dracula}
-              text={"ssh -t chessh"}
+              text={"ssh chessh"}
               language={"shell"}
               showLineNumbers={false}
               codeBlock
@@ -59,19 +64,8 @@ export const Home = () => {
           </div>
           <div>
             <li>
-              Finally, play chess! Ideally, keeping the following contols in
-              mind:
+              Finally, check out the short <a href="/man-pages">man pages</a> .
             </li>
-
-            <ul>
-              <li>Ctrl + b / Escape to return to the main menu.</li>
-              <li>Ctrl + c / Ctrl + d to exit CheSSH at any point.</li>
-              <li>Arrow keys to move around the board.</li>
-              <li>
-                Select a piece with "enter", and move it to a square by pressing
-                "enter" again.
-              </li>
-            </ul>
           </div>
         </ol>
       </>

front/src/routes/man_pages.jsx

@@ -0,0 +1,69 @@
+export const ManPages = () => {
+  return (
+    <div>
+      <div className="man-page-title">
+        <div>CHESSH(1)</div>
+        <div>User Help</div>
+        <div>CHESSH(1)</div>
+      </div>
+      <br />
+      <div>
+        <div>
+          <b>NAME</b>
+        </div>
+        <div>
+          <ul>
+            <li>chessh - multiplayer chess over ssh</li>
+          </ul>
+        </div>
+      </div>
+
+      <div>
+        <div>
+          <b>SYNOPSIS</b>
+        </div>
+        <div>
+          <ul>
+            <li>
+              ssh <b>chessh</b>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div>
+        <div>
+          <b>DESCRIPTION</b>
+        </div>
+        <div>
+          <div>
+            CheSSH uses the SSH protocol to send sequences of ANSI codes &
+            plaintext to render a chess board in your shell, and listen to I/O
+            by abusing the hell out of the{" "}
+            <a href="https://www.erlang.org/doc/man/ssh.html">
+              Erlang SSH Module
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+      <br />
+      <div>
+        <div>
+          <b>INTERACTION</b>
+        </div>
+        <div>
+          <ul>
+            <li>Ctrl + b / Escape to return to the main menu.</li>
+            <li>Ctrl + c / Ctrl + d to exit CheSSH at any point.</li>
+            <li>Arrow keys / vim keybinds to move around the board.</li>
+            <li>
+              Select a piece with "enter", and move it to a square by pressing
+              "enter" again.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};

lib/chessh/ssh/client/client.ex

@@ -157,6 +157,11 @@ defmodule Chessh.SSH.Client do
       <<2>> -> :menu
       # Escape
       "\e" -> :menu
+      # VIM keys, per request
+      "k" -> :up
+      "j" -> :down
+      "h" -> :left
+      "l" -> :right
       # Arrow keys
       "\e[A" -> :up
       "\e[B" -> :down