Foo

server/public/client.js

@@ -40,7 +40,7 @@ class MUDClient {
         this.digest = "SHA-256";
 
         /** @type {string} Salt string to use for client-side password hashing */
-        this.salt = "No salt, no shorts, no service";
+        this.salt = "no_salt_no shorts_no_service";
 
         /** @type {string} Number of times the hashing should be done */
         this.rounds = 1000;
@@ -182,7 +182,7 @@ class MUDClient {
         // The quit command has its own message type
         if (inputText === ":quit") {
             this.send(MessageType.QUIT);
-            this.writeToOutput("> " + inputText, { verbatim: true, class: "input" });
+            this.echo(inputText);
             return;
         }
 
@@ -199,7 +199,7 @@ class MUDClient {
         if (help) {
             console.log("here");
             help[1] ? this.send(MshType.HELP, help[1].trim()) : this.send(MshType.HELP);
-            this.writeToOutput("> " + inputText, { verbatim: true, class: "input" });
+            this.echo(inputText);
             return;
         }
 
@@ -213,7 +213,7 @@ class MUDClient {
         if (colon) {
             const args = typeof colon[2] === "string" ? parseArgs(colon[2]) : [];
             this.send(MessageType.COLON, colon[1], args);
-            this.writeToOutput("> " + inputText, { verbatim: true, class: "input colon" });
+            this.echo(inputText);
             return;
         }
 
@@ -235,7 +235,11 @@ class MUDClient {
 
         // The server wants a password, let's hash it before sending it.
         if (this.promptOptions.password) {
-            inputText = await this.hashPassword(inputText);
+            const pwHash = await this.hashPassword(inputText);
+            this.send(MessageType.REPLY, pwHash);
+            this.shouldReply = false;
+            this.promptOptions = {};
+            return;
         }
 
         //
@@ -251,7 +255,7 @@ class MUDClient {
         //
         // We add our own command to the output stream so the
         // player can see what they typed.
-        this.writeToOutput("> " + inputText, { verbatim: true, class: "input" });
+        this.echo(inputText);
         return;
     }
 
@@ -411,6 +415,10 @@ class MUDClient {
         return;
     }
 
+    echo(text) {
+        this.writeToOutput(text, { verbatim: true, echo: true });
+    }
+
     /**
      * Add output to the text.
      * @param {string} text
@@ -430,6 +438,12 @@ class MUDClient {
                 element.innerHTML = crackdown(line);
             }
 
+            for (const cls of ["calamity", "error", "debug", "prompt", "echo"]) {
+                if (options[cls]) {
+                    element.classList.add(cls);
+                }
+            }
+
             this.output.appendChild(element);
             this.output.scrollTop = this.output.scrollHeight;
         }

server/public/crackdown.js

@@ -11,7 +11,7 @@
 // | .__/ \__,_|_|  |___/\___|_|
 // |_|
 
-const capture = "([a-zA-Z0-9:()-](?:.*[a-zA-Z0-9:()-])?)";
+const capture = "([a-z0-9:()-](?:.*[a-zA-Z:().!-])?)";
 const skipSpace = "\\s*";
 
 const htmlEscapeRegex = /[&<>"'`]/g; // used to escape html characters
@@ -26,7 +26,7 @@ const opcodes = [
     ["(^|\\n)==", "($|\\n)", "$1<h2>$2</h2>$3"],
     ["---", "---", "<span class='strike'>$1</span>"],
     ["___", "___", "<span class='underline'>$1</span>"],
-    ["(?:[.]{3})", "(?:[.]{3})", "<span class='undercurl'>$1</span>"],
+    ["(?:[,]{3})", "(?:[,]{3})", "<span class='undercurl'>$1</span>"],
     ["(?:[(]{2})", "(?:[)]{2})", "<span class='faint'>$1</span>"],
     ["_", "_", "<span class='italic'>$1</span>"],
     ["\\*", "\\*", "<span class='bold'>$1</span>"],
@@ -35,8 +35,10 @@ const opcodes = [
 /** @type{Array.Array.<Regexp,string>} */
 const regexes = [];
 
+//
+// Pre-compile all regexes
 for (const [left, right, replacement] of opcodes) {
-    regexes.push([new RegExp(left + skipSpace + capture + skipSpace + right, "g"), replacement]);
+    regexes.push([new RegExp(left + skipSpace + capture + skipSpace + right, "gi"), replacement]);
 }
 
 /** @param {string} text */

server/public/index.html

@@ -7,6 +7,7 @@
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link rel="stylesheet" href="style.css" />
+        <link rel="manifest" href="manifest.json" />
     </head>
     <body>
         <div id="container">

server/public/style.css

@@ -101,12 +101,22 @@ h2 {
     color: #ffaa00;
 }
 
+/*
+*/
 .error {
     color: #ff4444;
 }
 
-.input {
-    color: #666;
+.calamity {
+    color: #f00;
+    text-decoration: wavy underline rgb(100 0% 00 / 40%);
+}
+
+.echo {
+    color: #888;
+}
+.echo::before {
+    content: "> ";
 }
 
 .debug {
@@ -114,7 +124,7 @@ h2 {
 }
 
 .prompt {
-    color: #00ccff;
+    color: #aaa;
 }
 
 .bold {
@@ -139,12 +149,5 @@ h2 {
 
 .faint {
     opacity: 0.42;
-}
-
-.fBlue {
-    color: blue;
-}
-
-.bRed {
-    background-color: red;
+    color: #44f;
 }