improved js, added async command handling, fake delayed response

src/assets/css/style.less

@@ -84,7 +84,7 @@ html, body {
 	bottom: 0;
 	width: 100%;
 	min-height: 100%;
-	padding: 1.2em 1.6em 0.5em;
+	padding: 1.2em 1.6em 0.7em;
 	font-size: 0.8em;
 }
 #commandLine {
@@ -92,7 +92,6 @@ html, body {
 }
 #command {
 	position: absolute;
-	margin-top: 1.25em;
 	z-index: -2;
 }
 #cursor {

src/index.php

@@ -13,7 +13,8 @@
 				<div id="scanlines"></div>
 				<div id="scrollback">
 					<div id="history">i love u<br>-fhqwhgadshgnsdhjsdbkhsdabkfabkveybvf<br><br></div>
-					<div id="commandLine">a&gt;<input id="command" name="command" type="text" value="" /><span id="typing"></span></div>
+					<input id="command" name="command" type="text" value="" />
+					<div id="commandLine"><span id="ps1">a&gt;</span><span id="typing"></span></div>
 				</div>
 			</div>
 			<div id="case">

src/scripts/commandparser.js

@@ -0,0 +1,26 @@
+// from http://krasimirtsonev.com/blog/article/Simple-command-line-parser-in-JavaScript
+
+var CommandParser = (function() {
+	var parse = function(str, lookForQuotes) {
+		var args = [];
+		var readingPart = false;
+		var part = '';
+		for(var i=0; i<str.length; i++) {
+			if(str.charAt(i) === ' ' && !readingPart) {
+				args.push(part);
+				part = '';
+			} else {
+				if(str.charAt(i) === '\"' && lookForQuotes) {
+					readingPart = !readingPart;
+				} else {
+					part += str.charAt(i);
+				}
+			}
+		}
+		args.push(part);
+		return args;
+	}
+	return {
+		parse: parse
+	}
+})();

src/scripts/index.js

@@ -1,5 +1,7 @@
 (function () {
-	function escapeHTML(html) {
+	var brightness = 0, commandLine, commandInput, scanlines, commandHistory, typing;
+
+	var escapeHTML = function (html) {
 		var fn = function (tag) {
 			var charsToReplace = {
 				'&': '&',
@@ -8,52 +10,78 @@
 				'"': '"'
 			};
 			return charsToReplace[tag] || tag;
-		}
+		};
 		return html.replace(/[&<>"]/g, fn);
-	}
+	};
 
-	function syncTyping() {
+	var syncTyping = function () {
 		var beforeSelection, selection, afterSelection;
 		beforeSelection = this.value.slice(0, this.selectionStart);
-		selection = this.value.slice(this.selectionStart, this.selectionEnd)
+		selection = this.value.slice(this.selectionStart, this.selectionEnd);
-		afterSelection = this.value.slice(this.selectionEnd)
+		afterSelection = this.value.slice(this.selectionEnd);
-		document.getElementById("typing").innerHTML = beforeSelection + (this.selectionStart == this.selectionEnd ? "<span id='cursor'></span>" : "") + "<span id='selection'>" + selection + "</span>" + afterSelection;
+		typing.innerHTML = beforeSelection + (this.selectionStart === this.selectionEnd ? "<span id='cursor'></span>" : "") + "<span id='selection'>" + selection + "</span>" + afterSelection;
-	}
+	};
 
-	var commandline = document.getElementById("command");
+	var alterBrightness = function (delta) {
-	commandline.value = "";
+		brightness = Math.max(0, Math.min(1, brightness + delta));
-	commandline.oninput = syncTyping;
+		this.scanlines.style.backgroundColor = "hsl(120, 100%, " + (16 * brightness) + "%)";
-	commandline.onkeydown = syncTyping;
+	};
-	commandline.onkeyup = syncTyping;
+
-	commandline.onselect = syncTyping;
+
-	commandline.onfocus = syncTyping;
+	var setInputEnabled = function (enabled) {
-	commandline.focus();
+		console.log(enabled);
+		if (enabled) {
+			commandInput.disabled = false;
+			commandLine.style.display = 'block';
+		} else {
+			commandInput.disabled = true;
+			commandInput.value = '';
+			typing.innerHTML = '';
+			commandLine.style.display = 'none';
+		}
+	};
+
+	var showResponse = function (response) {
+		commandHistory.innerHTML += response + '<br>';
+		setInputEnabled(true);
+	};
+
+	var handleForm = function () {
+		var val = this.command.value;
+		setInputEnabled(false);
+		commandHistory.innerHTML += 'a&gt;' + escapeHTML(val) + '<br>';
+		setTimeout(function() { showResponse('Command not found.'); }, 500);
+		return false;
+	};
+
+	var init = function() {
+		console.log('init');
+		commandLine = document.getElementById("commandLine");
+		commandInput = document.getElementById("command");
+		scanlines = document.getElementById("scanlines");
+		commandHistory = document.getElementById("history");
+		typing = document.getElementById("typing");
+
+		commandInput.value = "";
+		commandInput.oninput = syncTyping;
+		commandInput.onkeydown = syncTyping;
+		commandInput.onkeyup = syncTyping;
+		commandInput.onselect = syncTyping;
+		commandInput.onfocus = syncTyping;
+		commandInput.focus();
 		document.body.onmousedown = function() {
-		commandline.focus();
+			commandInput.focus();
 			return false;
 			// a little heavy handed, but works for now
 		};
-
-	var brightness = 0.0;
-	function alterBrightness(delta) {
-		brightness = Math.max(0, Math.min(1, brightness + delta));
-		document.getElementById("scanlines").style.backgroundColor = "hsl(120, 100%, " + (16 * brightness) + "%)";
-	}
 		document.getElementById("knobup").onmousedown = function() {
 			alterBrightness(1.0/6);
 		};
 		document.getElementById("knobdown").onmousedown = function() {
 			alterBrightness(-1.0/6);
 		};
-
-	function handleForm() {
-		var history = document.getElementById('history');
-		var val = this.command.value;
-		this.command.value = '';
-		document.getElementById("typing").innerHTML = '';
-		history.innerHTML = history.innerHTML + 'a>' + escapeHTML(val) + '<br>Command not found.<br>';
-		return false;
-	}
-
 		document.forms[0].onsubmit = handleForm;
+	};
+
+	document.addEventListener("DOMContentLoaded", init);
 }());