implemented new cursor, fixed positioning bug

css/main.css

@@ -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;}
+}

index.html

@@ -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>

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 += `<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 = `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";
+    cursor.setAttribute("data-ty-cursor", data);
 }
-
-// Toggle cursor visibility
-setInterval(()=>{
-    cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
-},1000);