123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <html>
- <head>
- <title>Starmire</title>
- <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link rel="stylesheet" media="screen" href="./css/terminal.css">
- </head>
- <body>
- <div id="output"></div>
- <input type="text" id="input" autocomplete="off" />
- <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 scheme = document.location.protocol === "https:" ? "wss" : "ws";
- var port = document.location.port ? (":" + document.location.port) : "";
- //var socketString = "ws://" + window.location.hostname + ":" + window.location.port;
- var socketString = `${scheme}://${window.location.hostname}${port}`;
- 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];
- document.getElementById("input").setSelectionRange(commandHistory[commandPointer].length, commandHistory[commandPointer].length);
- } 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];
- document.getElementById("input").setSelectionRange(commandHistory[commandPointer].length, commandHistory[commandPointer].length);
- }
- }, false);
- document.getElementById("input").focus();
- </script>
- </body>
- </html>
|