midas
/
starmire


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<html>
<head>
	<title>NodeMUD</title>
	<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
html,body {
	background-color: black;
	color: white;
	margin: 0;
	padding: 0;
}
#output {
	font-family: 'Inconsolata', monospace;
	white-space: pre-wrap;
	padding: 8px;
}
#input {
	font-family: 'Inconsolata', monospace;
	background-color: black;
	color: white;
	border: 0px;
	padding: 8px;
	width: 100%;
}
.fgblack {
	color: black;
}
.fgred {
	color: red;	
}
.fggreen {
	color: green;
}
.fgyellow {
	color: yellow;
}
.fgblue {
	color: blue;
}
.fgmagenta {
	color: magenta;
}
.fgcyan {
	color: cyan;
}
.fgwhite {
	color: white;
}
</style>
</head>
<body>
<div id="output"></div>
<input type="text" id="input" />

<script>
	var localEcho = true;
	var commandHistory = [];
	var commandPointer = 0;
function handleInstructions(instruction) {
		switch(instruction) {
			case "protectinput":
			document.getElementById("input").attributes["type"].value = "password";
			localEcho = false;
			break;
			case "openinput":
			document.getElementById("input").attributes["type"].value = "text";
			localEcho = true;
			break;
		}
	}
  window.WebSocket = window.WebSocket || window.MozWebSocket;
  //var socketString = "ws://" + window.location.hostname + ":" + window.location.port;
  var socketString = "ws://" + window.location.hostname + ":8080";

  var connection = new WebSocket(socketString);

  connection.onopen = function () {
  };

  connection.onerror = function (error) {
  	console.error(error);
  };

  connection.onmessage = function (message) {
	try {
		var json = JSON.parse(message.data);
		if(json.type == "output") {
			var text = document.createElement("div");
			text.innerHTML = json.data.trim();
			document.getElementById("output").appendChild(text);
			window.scrollTo(0,document.body.scrollHeight);
		} else if(json.type == "instruction") {
			handleInstructions(json.data);
		} else {
			console.log(json);
		}
		
	} catch (e) {
		console.error("This doesn't look like a valid JSON ", message.data);
		return;
	}
	// handle incoming message
	};
	connection.onclose = function () {
  	document.getElementById("output").innerHTML += "connection closed by host\n";
  	window.scrollTo(0,document.body.scrollHeight);
  	document.getElementById("input").disabled = true;
  };

document.addEventListener("keydown", function(event) {
	document.getElementById("input").focus();
	if(document.getElementById("input").disabled) {
		return true;
	}
	
	if(event.keyCode == 13) {
		var inputToSend = document.getElementById("input").value;
		if(localEcho) {
			var text = document.createElement("div");
			text.innerHTML = inputToSend.trim();
			document.getElementById("output").appendChild(text);
			commandHistory.push(inputToSend);
			commandPointer = commandHistory.length;
		} else {
			var text = document.createElement("div");
			text.innerHTML = new Array(inputToSend.length + 1).join("*");
			document.getElementById("output").appendChild(text);
		}
		connection.send(inputToSend);
		document.getElementById("input").value = "";
		
	} else if (event.keyCode == 38) {
		commandPointer--;
		commandPointer = Math.max(0, commandPointer);
		document.getElementById("input").value = commandHistory[commandPointer];
	} else if (event.keyCode == 40) {
		commandPointer++;
		if(commandPointer >= commandHistory.length) {
			commandPointer = Math.min(commandPointer, commandHistory.length - 1);
			document.getElementById("input").value = "";
			return;
		}
		commandPointer = Math.min(commandPointer, commandHistory.length - 1);
		document.getElementById("input").value = commandHistory[commandPointer];
	}
}, false);

document.getElementById("input").focus();
</script>
</body>
</html>