diff --git a/css/main.css b/css/main.css
index 3ac9219..a306bba 100644
--- a/css/main.css
+++ b/css/main.css
@@ -9,7 +9,7 @@ body {
z-index: -1;
background-color: white;
display: inline-block;
- opacity: 1;
+ opacity: 0;
}
#input {
@@ -32,4 +32,23 @@ body {
#asciiArt {
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;}
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 910b170..4089637 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
██████╔╝██║ ██║██║██║ ██║ ██║ ██║██╗╚██████╔╝███████║
╚═════╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═════╝ ╚══════╝
-
+
diff --git a/js/main.js b/js/main.js
index a2a4d53..1815644 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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 += `
`;
- 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 += `
`;
- // 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
@@ -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)`;
-}
-
-// Toggle cursor visibility
-setInterval(()=>{
- cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
-},1000);
\ No newline at end of file
+ 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);
+}
\ No newline at end of file