implemented new cursor, fixed positioning bug
This commit is contained in:
parent
369152494d
commit
bdd6521b76
21
css/main.css
21
css/main.css
@ -9,7 +9,7 @@ body {
|
|||||||
z-index: -1;
|
z-index: -1;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
opacity: 1;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#input {
|
#input {
|
||||||
@ -32,4 +32,23 @@ body {
|
|||||||
#asciiArt {
|
#asciiArt {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: red;
|
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;}
|
||||||
}
|
}
|
@ -18,7 +18,7 @@
|
|||||||
██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║
|
██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║
|
||||||
╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝
|
╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝
|
||||||
</pre>
|
</pre>
|
||||||
<a id="current"></a>
|
<a id="current"></a><span id="testCursor" data-ty-cursor=" "></span>
|
||||||
<input type="text" id="input">
|
<input type="text" id="input">
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript" src="js/networking.js"></script>
|
<script type="text/javascript" src="js/networking.js"></script>
|
||||||
|
25
js/main.js
25
js/main.js
@ -1,20 +1,19 @@
|
|||||||
// Initiating variables
|
// Initiating variables
|
||||||
const length = pretext.current.length+1;
|
const length = pretext.current.length+1;
|
||||||
let cursorPosition = 0;
|
let cursorPosition = 0;
|
||||||
let cursorYOffset = 7;
|
|
||||||
let history = { index: 0, list: [] };
|
let history = { index: 0, list: [] };
|
||||||
|
|
||||||
// Initiating constants
|
// Initiating constants
|
||||||
const tbDiv = document.getElementById("textbox");
|
const tbDiv = document.getElementById("textbox");
|
||||||
const textIn = document.getElementById("input");
|
const textIn = document.getElementById("input");
|
||||||
const textCur = document.getElementById("current");
|
const textCur = document.getElementById("current");
|
||||||
const cursor = document.getElementById("cursor");
|
const cursor = document.getElementById("testCursor");
|
||||||
// Set initial pretext
|
// Set initial pretext
|
||||||
const pretextElement = document.createElement('a');
|
const pretextElement = document.createElement('a');
|
||||||
pretextElement.innerHTML = pretext.original;
|
pretextElement.innerHTML = pretext.original;
|
||||||
tbDiv.insertBefore(pretextElement, tbDiv.children[1]);
|
tbDiv.insertBefore(pretextElement, tbDiv.children[1]);
|
||||||
// Initial cursor offset
|
// Initial cursor offset
|
||||||
cursor.style.transform = `translate(${length-1}ch,${2.222*7-0.4}ch)`;
|
cursor.style.transform = "translateX(0ch)";
|
||||||
|
|
||||||
// Handle user input
|
// Handle user input
|
||||||
textIn.oninput = () => {
|
textIn.oninput = () => {
|
||||||
@ -80,6 +79,7 @@ document.addEventListener("keydown", e => {
|
|||||||
const a = text.substring(0, cursorPosition);
|
const a = text.substring(0, cursorPosition);
|
||||||
const b = text.substring(cursorPosition+1, text.length);
|
const b = text.substring(cursorPosition+1, text.length);
|
||||||
textCur.textContent = a+b;
|
textCur.textContent = a+b;
|
||||||
|
updateCursor();
|
||||||
break;
|
break;
|
||||||
case "Enter":
|
case "Enter":
|
||||||
// Send out command / line break
|
// Send out command / line break
|
||||||
@ -125,6 +125,7 @@ function outputText(params) {
|
|||||||
|
|
||||||
// Temporarily remove core elements
|
// Temporarily remove core elements
|
||||||
tbDiv.removeChild(textIn);
|
tbDiv.removeChild(textIn);
|
||||||
|
tbDiv.removeChild(cursor);
|
||||||
tbDiv.removeChild(textCur);
|
tbDiv.removeChild(textCur);
|
||||||
|
|
||||||
let inputSet, whitespaceOnly = false;
|
let inputSet, whitespaceOnly = false;
|
||||||
@ -140,7 +141,6 @@ function outputText(params) {
|
|||||||
// Fixate current input to page
|
// Fixate current input to page
|
||||||
tbDiv.appendChild(createText(user));
|
tbDiv.appendChild(createText(user));
|
||||||
tbDiv.innerHTML += `<br>`;
|
tbDiv.innerHTML += `<br>`;
|
||||||
cursorYOffset++;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Replace text on last pretext
|
// Replace text on last pretext
|
||||||
@ -156,8 +156,6 @@ function outputText(params) {
|
|||||||
// If output is given, display it as text with formatting
|
// If output is given, display it as text with formatting
|
||||||
tbDiv.append(createText(commandOutput, false))
|
tbDiv.append(createText(commandOutput, false))
|
||||||
tbDiv.innerHTML += `<br>`;
|
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
|
// Add new pretext to terminal
|
||||||
@ -169,6 +167,7 @@ function outputText(params) {
|
|||||||
|
|
||||||
// Add core elements back on top of div
|
// Add core elements back on top of div
|
||||||
tbDiv.appendChild(textCur);
|
tbDiv.appendChild(textCur);
|
||||||
|
tbDiv.appendChild(cursor);
|
||||||
tbDiv.appendChild(textIn);
|
tbDiv.appendChild(textIn);
|
||||||
|
|
||||||
// Reset variables and position cursor
|
// Reset variables and position cursor
|
||||||
@ -201,11 +200,9 @@ function renameToSelf() {
|
|||||||
|
|
||||||
// Update cursor position based on coordinates
|
// Update cursor position based on coordinates
|
||||||
function updateCursor() {
|
function updateCursor() {
|
||||||
let cursor = document.getElementById("cursor");
|
cursor.style.transform = `translateX(${cursorPosition-textCur.textContent.length}ch)`;
|
||||||
cursor.style.transform = `translate(${pretext.current.length+cursorPosition}ch, ${2.222*cursorYOffset-0.4}ch)`;
|
let data = textCur.textContent[cursorPosition];
|
||||||
}
|
if (cursorPosition >= textCur.textContent.length)
|
||||||
|
data = "\u00A0";
|
||||||
// Toggle cursor visibility
|
cursor.setAttribute("data-ty-cursor", data);
|
||||||
setInterval(()=>{
|
}
|
||||||
cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
|
|
||||||
},1000);
|
|
Loading…
Reference in New Issue
Block a user