initial commit

2022-05-27 18:13:33 +02:00 · 2022-05-27 18:13:33 +02:00 · 1aa39fd1b8
commit 1aa39fd1b8
3 changed files with 140 additions and 0 deletions
--- a/css/main.css
+++ 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;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,10 @@
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="css/main.css">
+        <script type="text/javascript" src="js/main.js"></script>
+    </head>
+    <body onload="preload()">
+        <div id="cursor">&nbsp;</div>
+        <div id="textbox"><a id="input"></a></div>
+    </body>
+</htm
--- a/js/main.js
+++ b/js/main.js
@ -0,0 +1,109 @@
+const pretext = "root@baipyr.us:~# ";
+let startPosition = 0;
+let cursorPosition = 0;
+
+document.addEventListener("keypress", e=>{
+    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 += '<a style="color: white;">' + text + '</a><br>' + 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);