joshua/fhqwhgads
1
0
Fork 0
mirror of https://github.com/seigler/fhqwhgads synced 2025-07-26 22:46:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved js, added async command handling, fake delayed response

Browse source
This commit is contained in:
Joshua Seigler 2014-12-24 11:19:43 -05:00
parent 8b0507ba84
commit 3a95096031
4 changed files with 96 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/assets/css/style.less
View file

@ -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 {

3
src/index.php
View file

@ -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">

26
src/scripts/commandparser.js Normal file
View file

@ -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
}
})();

106
src/scripts/index.js
View file

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