implemented new cursor, fixed positioning bug

This commit is contained in:
Baipyrus 2023-06-13 15:52:14 +02:00
parent 369152494d
commit bdd6521b76
3 changed files with 32 additions and 16 deletions

View File

@ -9,7 +9,7 @@ body {
z-index: -1;
background-color: white;
display: inline-block;
opacity: 1;
opacity: 0;
}
#input {
@ -33,3 +33,22 @@ body {
text-align: center;
color: red;
}
#testCursor {
display: inline-block;
color: black;
}
[data-ty-cursor]:after {
content: attr(data-ty-cursor);
background-color: white;
-webkit-animation: blink 1.25s infinite;
animation: blink 1.25s step-end infinite;
}
@keyframes blink {
0% {opacity: 0;}
49% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}

View File

@ -18,7 +18,7 @@
██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║
╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝
</pre>
<a id="current"></a>
<a id="current"></a><span id="testCursor" data-ty-cursor="&nbsp;"></span>
<input type="text" id="input">
</div>
<script type="text/javascript" src="js/networking.js"></script>

View File

@ -1,20 +1,19 @@
// Initiating variables
const length = pretext.current.length+1;
let cursorPosition = 0;
let cursorYOffset = 7;
let history = { index: 0, list: [] };
// Initiating constants
const tbDiv = document.getElementById("textbox");
const textIn = document.getElementById("input");
const textCur = document.getElementById("current");
const cursor = document.getElementById("cursor");
const cursor = document.getElementById("testCursor");
// Set initial pretext
const pretextElement = document.createElement('a');
pretextElement.innerHTML = pretext.original;
tbDiv.insertBefore(pretextElement, tbDiv.children[1]);
// Initial cursor offset
cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`;
cursor.style.transform = "translateX(0ch)";
// Handle user input
textIn.oninput = () => {
@ -80,6 +79,7 @@ document.addEventListener("keydown", e => {
const a = text.substring(0, cursorPosition);
const b = text.substring(cursorPosition+1, text.length);
textCur.textContent = a+b;
updateCursor();
break;
case "Enter":
// Send out command / line break
@ -125,6 +125,7 @@ function outputText(params) {
// Temporarily remove core elements
tbDiv.removeChild(textIn);
tbDiv.removeChild(cursor);
tbDiv.removeChild(textCur);
let inputSet, whitespaceOnly = false;
@ -140,7 +141,6 @@ function outputText(params) {
// Fixate current input to page
tbDiv.appendChild(createText(user));
tbDiv.innerHTML += `<br>`;
cursorYOffset++;
}
// Replace text on last pretext
@ -156,8 +156,6 @@ function outputText(params) {
// 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
@ -169,6 +167,7 @@ function outputText(params) {
// Add core elements back on top of div
tbDiv.appendChild(textCur);
tbDiv.appendChild(cursor);
tbDiv.appendChild(textIn);
// Reset variables and position cursor
@ -201,11 +200,9 @@ function renameToSelf() {
// Update cursor position based on coordinates
function updateCursor() {
let cursor = document.getElementById("cursor");
cursor.style.transform = `translate(${pretext.current.length+cursorPosition}ch, ${2.222*cursorYOffset-0.4}ch)`;
cursor.style.transform = `translateX(${cursorPosition-textCur.textContent.length}ch)`;
let data = textCur.textContent[cursorPosition];
if (cursorPosition >= textCur.textContent.length)
data = "\u00A0";
cursor.setAttribute("data-ty-cursor", data);
}
// Toggle cursor visibility
setInterval(()=>{
cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
},1000);