diff --git a/js/commands.js b/js/commands.js index 7acf81b..8420d38 100644 --- a/js/commands.js +++ b/js/commands.js @@ -1,18 +1,32 @@ function cmd_help() { - return "You need help? Sucks to be you! Hahahahaha"; + // Display 'help' message + return "Commands list:
" + + " -about Information about this website
"+ + " -clear Clear terminal screen
" + + " -exec Execute arbitrary math and logic equations"; +} + +function cmd_about() { + // Display 'about' message + return "This website is based on the general idea and design of a terminal.
" + + "It serves the purpose of a homepage. It exists just for the fun of creating it."; } function cmd_clear() { + // Clear terminal by reloading page window.location.reload(); return ""; } function cmd_exec(input) { + // No input was given if (input === undefined) return "You must enter parameters!"; + // Input contains letters or invalid characters const str = input.join(' '); if (/[',:;a-zA-Z]/.test(str) || str === "") return "Invalid input!"; + // Input is inside of character range with exceptions const chars = str.split('').filter(e => { const code = e.charCodeAt(0); const s = code === 32; @@ -22,7 +36,9 @@ function cmd_exec(input) { const d = code === 124; return !(s || a && b || c || d); }); + // If exceptions remain, invalid input was given if (chars.length > 0) return "Invalid input!"; + // Execute input and return output return (new Function(`return ${str}`))(); } \ No newline at end of file diff --git a/js/main.js b/js/main.js index e7c00a9..98aa1f9 100644 --- a/js/main.js +++ b/js/main.js @@ -1,32 +1,39 @@ const pretext = "root@baipyr.us:~# "; -let startPosition = 0; + +// Initiating variables +const length = pretext.length+1; +let startPosition = length; let cursorPosition = 0; let cursorYOffset = 7; +// Initiating constants 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"); +// Initial cursor offset cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`; +// Handle user input textIn.oninput = () => { const text = textCur.textContent; + // If cursor at end of text if (cursorPosition === text.length) textCur.textContent += textIn.value; else { + // Insert input at cursor position const left = text.substring(0, cursorPosition); const right = text.substring(cursorPosition, text.length); textCur.textContent = left + textIn.value + right; } + // Increment by input length cursorPosition += textIn.value.length; textIn.value = ""; updateCursor(); }; textIn.focus(); +// If no ranged selection was made, focus on input field document.addEventListener("selectionchange", e => { if (e.target !== textIn) { const selection = window.getSelection(); @@ -80,26 +87,32 @@ document.addEventListener("keydown", e => { tbDiv.removeChild(textIn); tbDiv.removeChild(textCur); - // Run command and return output??? - let commandOutput = runCommand(text); - tbDiv.appendChild(createText(text)); tbDiv.innerHTML += `
`; + + // Run command and return output + let commandOutput = runCommand(text); if (commandOutput !== "") { - tbDiv.append(createText(commandOutput)) + // If output is given, display it as text with formatting + tbDiv.append(createText(commandOutput, false)) tbDiv.innerHTML += `
`; - cursorYOffset++; + // Offset cursor by at least one line, and as many more as there are line breaks + cursorYOffset += commandOutput.split("
").length; } + // Add new pretext to terminal tbDiv.innerHTML += pretext; - textCur.textContent = ""; + // Add elements on top of div tbDiv.appendChild(textCur); tbDiv.appendChild(textIn); + // Reset variables + textCur.textContent = ""; cursorPosition = 0; cursorYOffset++; updateCursor(); break; case "ArrowUp": // Einen Befehl zurück in der History + break; case "ArrowDown": // Einen Befehl nach vorne in der History @@ -110,38 +123,56 @@ document.addEventListener("keydown", e => { } }); -function createText(str) { +// Create an 'a' element with input string as its contents +function createText(str, safe=true) { const link = document.createElement("a"); link.style.color = "lightgrey"; - link.textContent = str; + // No "HTML injection" + if (safe) + link.textContent = str; + // "Anything goes" and keep formatting + else { + link.style.whiteSpace = "pre"; + link.innerHTML = str; + } return link; } +// Run input as command if possible function runCommand(input) { let output = ""; + // Go through properties of window for (const func in window) { const splits = func.split("cmd_"); + // If property is prefixed with 'cmd_' (a 'command', so an executable function) if (splits.length === 2) { const name = splits[1]; + // If command is called without parameters if (input.toLowerCase() === name.toLowerCase()) { output = window[func](); break; + // If command is called with parameters } else if (input.startsWith(name + " ")) { - output = window[func](input.split(" ").filter((e,i)=>i!==0)); + // Parameters always follow the command name after first space + const params = input.split(" ").filter((e,i)=>i!==0); + output = window[func](params); break; } } } + // Return command output return output; } +// Update cursor position based on coordinates function updateCursor() { let cursor = document.getElementById("cursor"); cursor.style.transform = `translate(${startPosition+cursorPosition-1}ch, ${2.222*cursorYOffset-0.4}ch)`; } +// Toggle cursor visibility setInterval(()=>{ cursor.style.opacity = !parseInt(cursor.style.opacity)+0; },1000); \ No newline at end of file