Baipyrus/TerminalHomepage
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

better/more comments and focus bugfix

Browse Source
This commit is contained in:
Baipyrus 2023-02-08 15:30:06 +01:00
parent b542343fd9
commit 1ee17099e2
3 changed files with 70 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
js/commands.js
View File

@ -4,13 +4,15 @@ function runCommand(input) {
if (input === "")
return "";
// Exit current level
// Get current mode
const modeSplit = chatMode.split(' ');
if (modeSplit[0] !== "default") {
const lowerIn = input.toLowerCase();
// Run exit command in other mode
if (lowerIn.startsWith("exit")) {
cmd_exit();
return "";
// Run clear command in other modes
} else if (lowerIn.startsWith("clear")) {
cmd_clear();
return "";
@ -20,12 +22,16 @@ function runCommand(input) {
// Handle different chat modes
switch (modeSplit[0]) {
case "msg":
// Send direct message, rename previous pretext to own name
directMessage(modeSplit[1].split(','), input);
renameToSelf();
// Return without message
return "";
case "chat":
// Send group message, rename previous pretext to own name
groupMessage(modeSplit[1].split(','), input);
renameToSelf();
// Return without message
return "";
}
@ -44,7 +50,7 @@ function runCommand(input) {
if (lowerIn === lowerNm) {
output = window[func]();
break;
// If command is called with parameters
// If command is called with parameters
} else if (lowerIn.startsWith(lowerNm + " ")) {
// Parameters always follow the command name after first space
const params = input.split(" ").filter((e,i)=>i!==0);
@ -88,24 +94,31 @@ function cmd_about() {
// Reload page
function cmd_reload() {
window.location.reload();
// Return without message
return null;
}
// Clear terminal window
function cmd_clear() {
setTimeout(() => {
// Remove all children except core elements and banner
const tbc = tbDiv.children;
for (let i = tbc.length-3; i > 1; i--)
tbDiv.removeChild(tbc[i]);
// Replace last child with new (current) pretext
const prelink = document.createElement("a");
prelink.innerHTML = pretext.current;
tbDiv.replaceChild(prelink, tbc[1]);
// Reset cursor position
cursorPosition = 0;
cursorYOffset = 7;
updateCursor();
}, 50);
// Return without message
return null;
}
@ -113,12 +126,15 @@ function cmd_clear() {
function cmd_history() {
let output = "";
// Get history
const hl = history.list;
for (let i = 0; i < hl.length; i++) {
// Add line break on every command except last
const lineBreak = (i !== hl.length - 1) ? "<br>" : "";
output += `${i+1} ${hl[i]}${lineBreak}`;
}
// Return output list
return output;
}
@ -159,8 +175,10 @@ function cmd_echo(input) {
function cmd_nick(input) {
if (input === undefined)
return "No nickname was given!";
// Rename user
if (!!window.localStorage.getItem("connected"))
sendNickname(input[0]);
// Connect with given name
else
connect(input[0]);
return null;

55
js/main.js
View File

@ -33,92 +33,97 @@ textIn.oninput = () => {
textIn.value = "";
updateCursor();
};
// Auto focus on start
textIn.focus();
// If no ranged selection was made, focus on input field
document.addEventListener("selectionchange", e => {
if (e.target !== textIn) {
const selection = window.getSelection();
if (selection.type === "Caret")
textIn.focus();
}
});
// Key Listener
document.addEventListener("keydown", e => {
const text = textCur.textContent;
switch (e.key) {
case "Backspace":
// Ein Zeichen nach links löschen
// Delete one character to the left
if (cursorPosition === 0)
return;
// Cursor is in the middle of the input
if (cursorPosition <= textCur.textContent.length-1) {
const a = text.substring(0, cursorPosition-1);
const b = text.substring(cursorPosition, text.length);
textCur.textContent=a+b;
// Cursor is at the end of input
} else
textCur.textContent = text.substring(0,text.length-1);
// Update cursor visuals
cursorPosition--;
updateCursor();
break;
case "ArrowLeft":
// Ein Zeichen nach links
// Go one cursor position to the left
if (cursorPosition > 0) {
cursorPosition--;
updateCursor();
}
break;
case "ArrowRight":
// Ein Zeichen nach reckts
// Go one cursor position to the right
if (cursorPosition < textCur.textContent.length) {
cursorPosition++;
updateCursor();
}
break;
case "Delete":
// Ein Zeichen nach rechts löschen
// Delete one character to the left
if (cursorPosition >= textCur.textContent.length)
return;
if (cursorPosition === 0 && textCur.textContent.length === 0)
// No input given yet
if (textCur.textContent.length === 0)
return;
const a = text.substring(0, cursorPosition);
const b = text.substring(cursorPosition+1, text.length);
textCur.textContent=a+b;
textCur.textContent = a+b;
break;
case "Enter":
// Befehl absenden / Zeilenumbruch
// Send out command / line break
outputText({user: text});
// Refocus
textIn.focus();
break;
case "ArrowUp":
// Einen Befehl zurück in der History
// Go back one command in the history
if (history.index > 0) {
history.index--;
textCur.textContent = history.list[history.index];
cursorPosition = textCur.textContent.length;
}
// Update cursor position
updateCursor();
break;
case "ArrowDown":
// Einen Befehl nach vorne in der History
// Go forward one command in the history
if (history.index < history.list.length-1) {
history.index++;
textCur.textContent = history.list[history.index];
cursorPosition = textCur.textContent.length;
// Reached end of history
} else if (history.index < history.list.length) {
history.index++;
textCur.textContent = "";
cursorPosition = 0;
}
// Update cursor position
updateCursor();
break;
case "Tab":
// Autocomplete
// Auto complete
break;
}
});
// Text output or user input handler
function outputText(params) {
// Unpack parameters
const { user, output, preNext } = params;
// Temporarily remove core elements
tbDiv.removeChild(textIn);
tbDiv.removeChild(textCur);
@ -132,18 +137,19 @@ function outputText(params) {
history.index = history.list.length;
}
// Fix current input to page
// Fixate current input to page
tbDiv.appendChild(createText(user));
tbDiv.innerHTML += `<br>`;
cursorYOffset++;
}
// Replace text on last pretext
if (preNext !== undefined) {
const tbc = tbDiv.children;
tbc[tbc.length - 1].innerHTML = preNext;
}
// Run command and return output
// Run as command if it's user input and display output
const isUserInput = output === undefined && user !== undefined;
let commandOutput = (isUserInput && !whitespaceOnly) ? runCommand(user) : (output ? output : "");
if (commandOutput !== "" && commandOutput !== null) {
@ -153,16 +159,19 @@ function outputText(params) {
// 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) {
const prelink = document.createElement('a');
prelink.innerHTML = pretext.current;
tbDiv.appendChild(prelink);
}
// Add elements on top of div
// Add core elements back on top of div
tbDiv.appendChild(textCur);
tbDiv.appendChild(textIn);
// Reset variables
// Reset variables and position cursor
if (isUserInput) {
textCur.textContent = "";
cursorPosition = 0;

18
js/networking.js
View File

@ -7,6 +7,8 @@ const pretext = {
const userData = { history: [], chatPull: null };
let chatMode = "default", activityNotify;
// If no user data exists, initialize it
if (window.localStorage.getItem("id") === null)
window.localStorage.setItem("id", "");
if (window.localStorage.getItem("name") === null)
@ -14,6 +16,8 @@ if (window.localStorage.getItem("name") === null)
if (window.localStorage.getItem("connected") === null)
window.localStorage.setItem("connected", "");
// Activity request interval
function setNotification() {
return setInterval(()=>{
fetch('/activity', {
@ -29,6 +33,7 @@ function setNotification() {
}, 60000);
}
// If user data is found, check for validity
if (window.localStorage.getItem("id") !== "" && window.localStorage.getItem("name") !== "") {
pretext.original = pretext.current = `${window.localStorage.getItem("name")}@baipyr.us:~# `;
@ -43,13 +48,16 @@ if (window.localStorage.getItem("id") !== "" && window.localStorage.getItem("nam
id: window.localStorage.getItem("id")
})
}).then(res => {
// Return JSON if status is OK
if (res.status === 200)
return res.json();
}).then(res => {
if (res === undefined)
return;
// Regularly send activity
if (res.success)
activityNotify = setNotification();
// Delete user data
else {
window.localStorage.setItem("id", "");
window.localStorage.setItem("name", "");
@ -64,6 +72,7 @@ if (window.localStorage.getItem("id") !== "" && window.localStorage.getItem("nam
// Tell server to disconnect
function disconnect() {
if (!!window.localStorage.getItem("connected")) {
// Send disconnect request
fetch('/disconnect', {
method: 'POST',
headers: {
@ -74,9 +83,11 @@ function disconnect() {
id: window.localStorage.getItem("id")
})
}).then(res => {});
// Delete user data
window.localStorage.setItem("id", "");
window.localStorage.setItem("name", "");
window.localStorage.setItem("connected", "");
// Reset pretext
pretext.original = pretext.current = "root@baipyr.us:~# ";
}
}
@ -93,6 +104,7 @@ function connect(name) {
body: JSON.stringify({ name })
}).then(res => {
if (res.status === 200) {
// Regularly send activity
activityNotify = setNotification();
window.localStorage.setItem("connected", "1");
return res.json();
@ -102,7 +114,7 @@ function connect(name) {
}).then(res => {
if (res === undefined)
return;
// Save provided id
// Save provided id, set pretext, output confirmation
const { id } = res;
window.localStorage.setItem("id", id);
pretext.original = pretext.current = `${name}@baipyr.us:~# `;
@ -127,6 +139,7 @@ function sendNickname(name) {
name
})
}).then(res => {
// Return JSON if status is OK
if (res.status === 200)
return res.json();
}).then(res => {
@ -217,11 +230,13 @@ function requestUsernames() {
'Accept': 'application/json',
}
}).then(res => {
// Return JSON if status is OK
if (res.status === 200)
return res.json();
}).then(res => {
if (res === undefined)
return;
// Output usernames
let output = "";
for (const u of res)
output += `${u.name}#${u.id} `;
@ -240,6 +255,7 @@ function requestPing() {
}).then(res => {
if (res.status !== 200)
return;
// Output measured ping time
const diff = new Date() - startTime;
const output = `Host responded after ${diff}ms.`;
outputText({output})