better/more comments

js/commands.js

@@ -1,18 +1,32 @@
 function cmd_help() {
-    return "You need help? Sucks to be you! Hahahahaha";
+    // Display 'help' message
+    return "Commands list:<br>" +
+        "   -about    Information about this website<br>"+
+        "   -clear    Clear terminal screen<br>" +
+        "   -exec     Execute arbitrary math and logic equations";
+}
+
+function cmd_about() {
+    // Display 'about' message
+    return "This website is based on the general idea and design of a terminal.<br>" +
+        "It serves the purpose of a homepage. It exists just for the fun of creating it.";
 }
 
 function cmd_clear() {
+    // Clear terminal by reloading page
     window.location.reload();
     return "";
 }
 
 function cmd_exec(input) {
+    // No input was given
     if (input === undefined)
         return "You must enter parameters!";
+    // Input contains letters or invalid characters
     const str = input.join(' ');
     if (/[',:;a-zA-Z]/.test(str) || str === "")
         return "Invalid input!";
+    // Input is inside of character range with exceptions
     const chars = str.split('').filter(e => {
         const code = e.charCodeAt(0);
         const s = code ===  32;
@@ -22,7 +36,9 @@ function cmd_exec(input) {
         const d = code === 124;
         return !(s || a && b || c || d);
     });
+    // If exceptions remain, invalid input was given
     if (chars.length > 0)
         return "Invalid input!";
+    // Execute input and return output
     return (new Function(`return ${str}`))();
 }

js/main.js

@@ -1,32 +1,39 @@
 const pretext = "root@baipyr.us:~# ";
-let startPosition = 0;
+
+// Initiating variables
+const length = pretext.length+1;
+let startPosition = length;
 let cursorPosition = 0;
 let cursorYOffset = 7;
 
+// Initiating constants
 const tbDiv = document.getElementById("textbox");
-const length = pretext.length+1;
-startPosition = length;
-cursorPosition = 0;
 const textIn = document.getElementById("input");
 const textCur = document.getElementById("current");
 const cursor = document.getElementById("cursor");
+// Initial cursor offset
 cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`;
 
+// Handle user input
 textIn.oninput = () => {
     const text = textCur.textContent;
+    // If cursor at end of text
     if (cursorPosition === text.length)
         textCur.textContent += textIn.value;
     else {
+        // Insert input at cursor position
         const left = text.substring(0, cursorPosition);
         const right = text.substring(cursorPosition, text.length);
         textCur.textContent = left + textIn.value + right;
     }
+    // Increment by input length
     cursorPosition += textIn.value.length;
     textIn.value = "";
     updateCursor();
 };
 textIn.focus();
 
+// If no ranged selection was made, focus on input field
 document.addEventListener("selectionchange", e => {
     if (e.target !== textIn) {
         const selection = window.getSelection();
@@ -80,26 +87,32 @@ document.addEventListener("keydown", e => {
             tbDiv.removeChild(textIn);
             tbDiv.removeChild(textCur);
 
-            // Run command and return output???
-            let commandOutput = runCommand(text);
-
             tbDiv.appendChild(createText(text));
             tbDiv.innerHTML += `<br>`;
+
+            // Run command and return output
+            let commandOutput = runCommand(text);
             if (commandOutput !== "") {
-                tbDiv.append(createText(commandOutput))
+                // If output is given, display it as text with formatting
+                tbDiv.append(createText(commandOutput, false))
                 tbDiv.innerHTML += `<br>`;
-                cursorYOffset++;
+                // Offset cursor by at least one line, and as many more as there are line breaks
+                cursorYOffset += commandOutput.split("<br>").length;
             }
+            // Add new pretext to terminal
             tbDiv.innerHTML += pretext;
-            textCur.textContent = "";
+            // Add elements on top of div
             tbDiv.appendChild(textCur);
             tbDiv.appendChild(textIn);
+            // Reset variables
+            textCur.textContent = "";
             cursorPosition = 0;
             cursorYOffset++;
             updateCursor();
             break;
         case "ArrowUp":
             // Einen Befehl zurück in der History
+
             break;
         case "ArrowDown":
             // Einen Befehl nach vorne in der History
@@ -110,38 +123,56 @@ document.addEventListener("keydown", e => {
     }
 });
 
-function createText(str) {
+// Create an 'a' element with input string as its contents
+function createText(str, safe=true) {
     const link = document.createElement("a");
     link.style.color = "lightgrey";
-    link.textContent = str;
+    // No "HTML injection"
+    if (safe)
+        link.textContent = str;
+    // "Anything goes" and keep formatting
+    else {
+        link.style.whiteSpace = "pre";
+        link.innerHTML = str;
+    }
     return link;
 }
 
+// Run input as command if possible
 function runCommand(input) {
     let output = "";
 
+    // Go through properties of window
     for (const func in window) {
         const splits = func.split("cmd_");
+        // If property is prefixed with 'cmd_' (a 'command', so an executable function)
         if (splits.length === 2) {
             const name = splits[1];
+            // If command is called without parameters
             if (input.toLowerCase() === name.toLowerCase()) {
                 output = window[func]();
                 break;
+            // If command is called with parameters
             } else if (input.startsWith(name + " ")) {
-                output = window[func](input.split(" ").filter((e,i)=>i!==0));
+                // Parameters always follow the command name after first space
+                const params = input.split(" ").filter((e,i)=>i!==0);
+                output = window[func](params);
                 break;
             }
         }
     }
 
+    // Return command output
     return output;
 }
 
+// Update cursor position based on coordinates
 function updateCursor() {
     let cursor = document.getElementById("cursor");
     cursor.style.transform = `translate(${startPosition+cursorPosition-1}ch, ${2.222*cursorYOffset-0.4}ch)`;
 }
 
+// Toggle cursor visibility
 setInterval(()=>{
     cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
 },1000);