async print to console

This commit is contained in:
Baipyrus 2023-01-18 08:02:41 +01:00
parent 16057b4a18
commit cd1de28b66
3 changed files with 102 additions and 59 deletions

View File

@ -18,7 +18,7 @@
██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║ ██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║
╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝
</pre> </pre>
root@baipyr.us:~# <a>root@baipyr.us:~# </a>
<a id="current"></a> <a id="current"></a>
<input type="text" id="input"> <input type="text" id="input">
</div> </div>

View File

@ -16,7 +16,6 @@ function cmd_about() {
function cmd_clear() { function cmd_clear() {
// Clear terminal by reloading page // Clear terminal by reloading page
window.location.reload(); window.location.reload();
return "";
} }
function cmd_history() { function cmd_history() {
@ -77,29 +76,46 @@ function cmd_nick(input) {
name: user.name, name: user.name,
id: user.id id: user.id
}) })
}).then(res => {}); }).then(res => {
return `Applied name '${user.name}'.`; if (res.status === 200) {
user.connected = true;
return res.json();
}
}).then(res => {
if (res === undefined)
return;
if (res)
outputText({output: `Applied name '${user.name}'.`});
else {
outputText({output: `Name '${user.name}' is already taken!.`});
user.name = "";
}
});
return null;
} }
async function cmd_msg(input) { function cmd_msg(input) {
if (input === undefined) if (input === undefined)
return "No message given!"; return "No username given!";
if (!user.connected) if (!user.connected)
return "You are not connected!"; return "You are not connected!";
const res = await fetch('/message', { const username = input[0];
pretext = `Chat (${username})> `;
chatMode = `msg ${username}`;
fetch('/chatInit', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ body: JSON.stringify({
message: input.join(' '), name: username,
id: user.id id: user.id
}) })
}); }).then(res => {});
if (res.status === 200) { }
const { message } = await res.json();
return message; function cmd_exit() {
} else if (chatMode.split(' ')[0] !== "default")
return "Server returned status " + res.status; chatMode = "default";
} }

View File

@ -25,12 +25,12 @@ fetch('/connect').then(res => {
user.id = id; user.id = id;
}); });
const user = { id: "", name: "", history: [], connected: false }; const user = { id: "", name: "", history: [], connected: false };
let chatMode = "default";
let pretext = "root@baipyr.us:~# "; let pretext = "root@baipyr.us:~# ";
// Initiating variables // Initiating variables
const length = pretext.length+1; const length = pretext.length+1;
let startPosition = length;
let cursorPosition = 0; let cursorPosition = 0;
let cursorYOffset = 7; let cursorYOffset = 7;
let history = { index: 0, list: [] }; let history = { index: 0, list: [] };
@ -71,7 +71,7 @@ document.addEventListener("selectionchange", e => {
} }
}); });
document.addEventListener("keydown", async e => { document.addEventListener("keydown", e => {
const text = textCur.textContent; const text = textCur.textContent;
switch (e.key) { switch (e.key) {
case "Backspace": case "Backspace":
@ -113,38 +113,7 @@ document.addEventListener("keydown", async e => {
break; break;
case "Enter": case "Enter":
// Befehl absenden / Zeilenumbruch // Befehl absenden / Zeilenumbruch
tbDiv.removeChild(textIn); outputText({user: text});
tbDiv.removeChild(textCur);
const inputSet = new Set(text.split(''));
if (text !== "" || inputSet.has(" ") && inputSet.size === 1) {
history.list.push(text);
history.index = history.list.length;
}
// Fix current input to page
tbDiv.appendChild(createText(text));
tbDiv.innerHTML += `<br>`;
// Run command and return output
let commandOutput = await runCommand(text);
if (commandOutput !== "") {
// If output is given, display it as text with formatting
tbDiv.append(createText(commandOutput, false))
tbDiv.innerHTML += `<br>`;
// Offset cursor by at least one line, and as many more as there are line breaks
cursorYOffset += commandOutput.split("<br>").length;
}
// Add new pretext to terminal
tbDiv.innerHTML += pretext;
// Add elements on top of div
tbDiv.appendChild(textCur);
tbDiv.appendChild(textIn);
// Reset variables
textCur.textContent = "";
cursorPosition = 0;
cursorYOffset++;
updateCursor();
break; break;
case "ArrowUp": case "ArrowUp":
// Einen Befehl zurück in der History // Einen Befehl zurück in der History
@ -174,6 +143,46 @@ document.addEventListener("keydown", async e => {
} }
}); });
function outputText(params) {
const { user, output } = params;
tbDiv.removeChild(textIn);
tbDiv.removeChild(textCur);
if (user !== undefined) {
const inputSet = new Set(user.split(''));
if (user !== "" || inputSet.has(" ") && inputSet.size === 1) {
history.list.push(user);
history.index = history.list.length;
}
// Fix current input to page
tbDiv.appendChild(createText(user));
tbDiv.innerHTML += `<br>`;
cursorYOffset++;
}
// Run command and return output
let commandOutput = (output === undefined && user !== undefined) ? runCommand(user) : output;
if (commandOutput !== "" && commandOutput !== null) {
// If output is given, display it as text with formatting
tbDiv.append(createText(commandOutput, false))
tbDiv.innerHTML += `<br>`;
// Offset cursor by at least one line, and as many more as there are line breaks
cursorYOffset += commandOutput.split("<br>").length;
}
// Add new pretext to terminal
if (commandOutput !== null)
tbDiv.innerHTML += pretext;
// Add elements on top of div
tbDiv.appendChild(textCur);
tbDiv.appendChild(textIn);
// Reset variables
textCur.textContent = "";
cursorPosition = 0;
updateCursor();
}
// Create an 'a' element with input string as its contents // Create an 'a' element with input string as its contents
function createText(str, safe=true) { function createText(str, safe=true) {
const link = document.createElement("a"); const link = document.createElement("a");
@ -189,11 +198,33 @@ function createText(str, safe=true) {
} }
// Run input as command if possible // Run input as command if possible
async function runCommand(input) { function runCommand(input) {
// Return on no input // Return on no input
if (input === "") if (input === "")
return ""; return "";
const modeSplit = chatMode.split(' ');
switch (modeSplit[0]) {
case "msg":
// Direct message
fetch('/message', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: user.id,
message: input,
name: modeSplit[1]
})
}).then(res => {});
return "";
// case "chat":
// // Global messages
// break;
}
let output = ""; let output = "";
const lowerIn = input.toLowerCase(); const lowerIn = input.toLowerCase();
@ -206,27 +237,23 @@ async function runCommand(input) {
const lowerNm = name.toLowerCase(); const lowerNm = name.toLowerCase();
// If command is called without parameters // If command is called without parameters
if (lowerIn === lowerNm) { if (lowerIn === lowerNm) {
if (window[func].constructor.name === "AsnycFunction") output = window[func]();
output = await window[func]();
else
output = window[func]();
break; break;
// If command is called with parameters // If command is called with parameters
} else if (lowerIn.startsWith(lowerNm + " ")) { } else if (lowerIn.startsWith(lowerNm + " ")) {
// Parameters always follow the command name after first space // Parameters always follow the command name after first space
const params = input.split(" ").filter((e,i)=>i!==0); const params = input.split(" ").filter((e,i)=>i!==0);
if (window[func].constructor.name === "AsnycFunction") output = window[func](params);
output = await window[func](params);
else
output = window[func](params);
break; break;
} }
} }
} }
// Standard output: // Standard output:
if (output === "" && !lowerIn.startsWith("clear")) if (output === "")
output = `${input.split(" ")[0]}: command not found`; output = `${input.split(" ")[0]}: command not found`;
if (output === undefined)
output = "";
// Return command output // Return command output
return output; return output;
@ -235,7 +262,7 @@ async function runCommand(input) {
// Update cursor position based on coordinates // Update cursor position based on coordinates
function updateCursor() { function updateCursor() {
let cursor = document.getElementById("cursor"); let cursor = document.getElementById("cursor");
cursor.style.transform = `translate(${startPosition+cursorPosition-1}ch, ${2.222*cursorYOffset-0.4}ch)`; cursor.style.transform = `translate(${pretext.length+cursorPosition}ch, ${2.222*cursorYOffset-0.4}ch)`;
} }
// Toggle cursor visibility // Toggle cursor visibility