commit 1aa39fd1b8743b42ad2a1878b45bb1d5217a46a4 Author: Baipyrus Date: Fri May 27 18:13:33 2022 +0200 initial commit diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..9de7471 --- /dev/null +++ b/css/main.css @@ -0,0 +1,21 @@ +body { + background-color: black; + font-family: 'Lucida Console'; + font-size: large; +} + +#cursor { + position: absolute; + z-index: -1; + background-color: white; + display: inline-block; + opacity: 1; +} + +#textbox { + color: lime; +} + +#input { + color: lightgrey; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a5c6558 --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + + + +

+ +{ + if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey)) + return; + let textbox = document.getElementById("input"); + const index = cursorPosition - startPosition; + if (e.key == ' ' && (textbox.innerHTML[index-1] == ' ' || cursorPosition == startPosition)) + return; + if (index <= textbox.innerHTML.length-1) { + const text = textbox.innerHTML; + const a = text.substring(0, index); + const b = text.substring(index, text.length); + textbox.innerHTML=a+e.key+b; + } else + textbox.innerHTML += e.key; + cursorPosition++; + updateCursor(); +}); + +document.addEventListener("keydown", e=>{ + let textbox = document.getElementById("input"); + const index = cursorPosition - startPosition; + const text = textbox.innerHTML; + switch (e.key) { + case "Backspace": + // Ein Zeichen nach links löschen + if (index == 0) + return; + if (index <= textbox.innerHTML.length-1) { + const a = text.substring(0, index-1); + const b = text.substring(index, text.length); + textbox.innerHTML=a+b; + } else + textbox.innerHTML = text.substring(0,text.length-1); + cursorPosition--; + updateCursor(); + break; + case "ArrowLeft": + // Ein Zeichen nach links + if (cursorPosition > startPosition) { + cursorPosition--; + updateCursor(); + } + break; + case "ArrowRight": + // Ein Zeichen nach reckts + if (index < textbox.innerHTML.length) { + cursorPosition++; + updateCursor(); + } + break; + case "Delete": + // Ein Zeichen nach rechts löschen + if (index == 0 || index >= textbox.innerHTML.length) + return; + const a = text.substring(0, index); + const b = text.substring(index+1, text.length); + textbox.innerHTML=a+b; + break; + case "Enter": + // Befehl absenden / Zeilenumbruch + const parent = document.getElementById("textbox"); + parent.removeChild(textbox); + + // Run command and return output??? + const commandOutput = ""; + + parent.innerHTML += '' + text + '
' + commandOutput + pretext; + textbox.innerHTML = ""; + parent.appendChild(textbox); + cursorPosition = startPosition; + updateCursor(); + break; + case "ArrowUp": + // Einen Befehl zurück in der History + break; + case "ArrowDown": + // Einen Befehl nach vorne in der History + break; + case "Tab": + // Autocomplete + break; + } +}); + +function updateCursor() { + let cursor = document.getElementById("cursor"); + const transform = `translate(${cursorPosition}ch)`; + cursor.style.transform = transform; +} + +function preload() { + let cursor = document.getElementById("cursor"); + let textbox = document.getElementById("textbox"); + textbox.innerHTML = pretext+textbox.innerHTML; + const length = textbox.innerText.length+1; + const transform = `translate(${length}ch)`; + cursor.style.transform = transform; + startPosition = length; + cursorPosition = length; +} + +setInterval(()=>{ + let cursor = document.getElementById("cursor"); + cursor.style.opacity = (cursor.style.opacity=="1")?"0":"1"; +},1000); \ No newline at end of file