const pretext = "root@baipyr.us:~# "; let startPosition = 0; let cursorPosition = 0; let cursorYOffset = 7; const tbDiv = document.getElementById("textbox"); const length = pretext.length+1; startPosition = length; cursorPosition = 0; const textIn = document.getElementById("input"); const textCur = document.getElementById("current"); const cursor = document.getElementById("cursor"); cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`; textIn.oninput = () => { const text = textCur.textContent; if (cursorPosition === text.length) textCur.textContent += textIn.value; else { const left = text.substring(0, cursorPosition); const right = text.substring(cursorPosition, text.length); textCur.textContent = left + textIn.value + right; } cursorPosition += textIn.value.length; textIn.value = ""; updateCursor(); }; textIn.focus(); document.addEventListener("selectionchange", e => { if (e.target !== textIn) { const selection = window.getSelection(); if (selection.type === "Caret") textIn.focus(); } }); document.addEventListener("keydown", e => { const text = textCur.textContent; switch (e.key) { case "Backspace": // Ein Zeichen nach links löschen if (cursorPosition === 0) return; if (cursorPosition <= textCur.textContent.length-1) { const a = text.substring(0, cursorPosition-1); const b = text.substring(cursorPosition, text.length); textCur.textContent=a+b; } else textCur.textContent = text.substring(0,text.length-1); cursorPosition--; updateCursor(); break; case "ArrowLeft": // Ein Zeichen nach links if (cursorPosition > 0) { cursorPosition--; updateCursor(); } break; case "ArrowRight": // Ein Zeichen nach reckts if (cursorPosition < textCur.textContent.length) { cursorPosition++; updateCursor(); } break; case "Delete": // Ein Zeichen nach rechts löschen if (cursorPosition >= textCur.textContent.length) return; if (cursorPosition === 0 && textCur.textContent.length === 0) return; const a = text.substring(0, cursorPosition); const b = text.substring(cursorPosition+1, text.length); textCur.textContent=a+b; break; case "Enter": // Befehl absenden / Zeilenumbruch tbDiv.removeChild(textIn); tbDiv.removeChild(textCur); // Run command and return output??? let commandOutput = runCommand(text); tbDiv.appendChild(createText(text)); tbDiv.innerHTML += `
`; if (commandOutput !== "") { tbDiv.append(createText(commandOutput)) tbDiv.innerHTML += `
`; cursorYOffset++; } tbDiv.innerHTML += pretext; textCur.textContent = ""; tbDiv.appendChild(textCur); tbDiv.appendChild(textIn); cursorPosition = 0; cursorYOffset++; 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 createText(str) { const link = document.createElement("a"); link.style.color = "lightgrey"; link.textContent = str; return link; } function runCommand(input) { let output = ""; for (const func in window) { const splits = func.split("cmd_"); if (splits.length === 2) { const name = splits[1]; if (input.toLowerCase() === name.toLowerCase()) { output = window[func](); break; } else if (input.startsWith(name + " ")) { output = window[func](input.split(" ").filter((e,i)=>i!==0)); break; } } } return output; } function updateCursor() { let cursor = document.getElementById("cursor"); cursor.style.transform = `translate(${startPosition+cursorPosition-1}ch, ${2.222*cursorYOffset-0.4}ch)`; } setInterval(()=>{ cursor.style.opacity = !parseInt(cursor.style.opacity)+0; },1000);