fun c64 cursor

src/components/terminal.tsx

@@ -6,6 +6,12 @@ export const Terminal: FC = async () => (
 
     <div id="command-line">
       <span id="command-prompt">&gt;</span>
+      <textarea
+        id="command-cursor"
+        readonly={true}
+        tabIndex={-1}
+        rows={1}
+      />
       <textarea
         type="text"
         id="command-textbox"

src/css/terminal.css

@@ -5,6 +5,7 @@
     --cli-font-size: 20px;
     --cli-height: 30px;
     --cli-status-width: 8px;
+    --cli-margin-left: 20px;
 }
 
 #command-line {
@@ -23,9 +24,36 @@
     top: 5px;
 }
 
+#command-cursor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10;
+
+    color: var(--c64-light-blue);
+    pointer-events: none;
+    background: transparent;
+    padding: var(--cli-spacing-vertical) var(--cli-spacing-horizontal);
+    resize: none;
+    overflow: hidden;
+    font: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    min-height: var(--cli-height);
+    width: 100%;
+    box-shadow: none;
+    box-sizing: border-box;
+    outline: 0;
+    border: none;
+    margin-left: var(--cli-margin-left);
+}
+
 #command-textbox {
     position: relative;
     z-index: 2;
+    caret-color: transparent;
 
     background: transparent;
     padding: var(--cli-spacing-vertical) var(--cli-element-spacing-horizontal);
@@ -34,14 +62,13 @@
     font: inherit;
     letter-spacing: inherit;
     line-height: inherit;
-
     min-height: var(--cli-height);
     width: 100%;
     box-shadow: none;
     box-sizing: border-box;
     outline: 0;
-    margin: var(--cli-margin);
     border: none;
+    margin: var(--cli-margin);
 }
 
 #command-hint {
@@ -52,26 +79,49 @@
     bottom: 0;
     z-index: 1;
 
-    pointer-events: none;
-    padding: var(--cli-spacing-vertical) var(--cli-spacing-horizontal);
     color: #666;
+    pointer-events: none;
     background: transparent;
+    padding: var(--cli-spacing-vertical) var(--cli-spacing-horizontal);
     resize: none;
     overflow: hidden;
-    height: auto;
     font: inherit;
     letter-spacing: inherit;
     line-height: inherit;
-
     min-height: var(--cli-height);
     width: 100%;
     box-shadow: none;
     box-sizing: border-box;
     outline: 0;
-    margin: var(--cli-margin);
     border: none;
+    margin-left: var(--cli-margin-left);
 }
 
+/* Custom Cursor */
+.custom-cursor {
+    position: absolute;
+    width: 1ch;
+    height: 1em;
+    background: var(--c64-light-blue);
+    pointer-events: none;
+    z-index: 3;
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+
+    0%,
+    50% {
+        opacity: 1;
+    }
+
+    51%,
+    100% {
+        opacity: 0;
+    }
+}
+
+
 /* The scrollback shows your previous inputs and outputs. */
 
 #scrollback {

src/js/cursor.ts

@@ -0,0 +1,40 @@
+////
+// Blinking c64 cursor
+
+import { cmdInput, $ } from "./dom.js"
+
+const cursorDelay = 600 // ms
+const cursor = "Û"
+let cmdCursor: HTMLTextAreaElement
+let interval: any
+
+export function initCursor() {
+    cmdCursor = $("command-cursor") as HTMLTextAreaElement
+    enableCursor()
+
+    cmdInput.addEventListener("keydown", showCursor)
+    cmdInput.addEventListener("keypress", showCursor)
+    cmdInput.addEventListener("input", showCursor)
+}
+
+function enableCursor() {
+    interval = setInterval(setCursor, cursorDelay)
+}
+
+function disableCursor() {
+    clearInterval(interval)
+}
+
+function setCursor() {
+    cmdCursor.value = cmdCursor.value.endsWith(cursor) ? "" : " ".repeat(cmdInput.value.length) + cursor
+}
+
+function showCursor(e: any) {
+    if (e.key === "Enter") {
+        cmdCursor.value = cursor
+    } else {
+        disableCursor()
+        cmdCursor.value = " ".repeat(cmdInput.value.length) + cursor
+        enableCursor()
+    }
+}

src/js/main.ts

@@ -1,4 +1,5 @@
 import { initCompletion } from "./completion.js"
+import { initCursor } from "./cursor.js"
 import { initFocus } from "./focus.js"
 import { initHistory } from "./history.js"
 import { initInput } from "./input.js"
@@ -7,6 +8,7 @@ import { startVramCounter } from "./vram.js"
 import { startConnection } from "./websocket.js"
 
 initCompletion()
+initCursor()
 initFocus()
 initHistory()
 initInput()