cli wip

src/css/terminal.css

@@ -13,6 +13,10 @@
     font-size: var(--cli-font-size);
 }
 
+#command-line[data-extended="true"] {
+    border: 1px solid red;
+}
+
 #command-prompt {
     position: absolute;
     top: 10px;
@@ -24,14 +28,13 @@
 
     background: transparent;
     padding: var(--cli-spacing-vertical) var(--cli-element-spacing-horizontal);
-    min-height: 1.2em;
     resize: none;
     overflow: hidden;
     font: inherit;
     letter-spacing: inherit;
     line-height: inherit;
 
-    height: var(--cli-height);
+    min-height: var(--cli-height);
     width: 100%;
     box-shadow: none;
     box-sizing: border-box;
@@ -54,13 +57,12 @@
     background: transparent;
     resize: none;
     overflow: hidden;
-    min-height: 1.2em;
     height: auto;
     font: inherit;
     letter-spacing: inherit;
     line-height: inherit;
 
-    height: var(--cli-height);
+    min-height: var(--cli-height);
     width: 100%;
     box-shadow: none;
     box-sizing: border-box;

src/js/dom.ts

@@ -1,3 +1,7 @@
+////
+// dom helpers and cached elements
+//
+
 // finds an element by ID
 export const $ = (id: string): HTMLElement | null =>
     document.getElementById(id)
@@ -10,4 +14,5 @@ export const $$ = (tag: string, innerHTML = ""): HTMLElement => {
 }
 
 // elements we know will be there... right?
-export const cmdTextbox = document.getElementById("command-textbox")!
+export const cmdLine = document.getElementById("command-line") as HTMLDivElement
+export const cmdTextbox = document.getElementById("command-textbox") as HTMLTextAreaElement

src/js/focus.ts

@@ -1,3 +1,7 @@
+////
+// try to keep the command textbox focused at all times
+//
+
 import { cmdTextbox } from "./dom.js"
 
 export function initFocus() {

src/js/input.ts

@@ -0,0 +1,28 @@
+////
+// this file controls the command textbox
+//
+
+import { cmdTextbox, cmdLine } from "./dom.js"
+
+export function initInput() {
+    cmdTextbox.addEventListener("keydown", inputHandler)
+}
+
+function inputHandler(event: KeyboardEvent) {
+    const target = event.target as HTMLElement
+    if (target?.id !== cmdTextbox.id) return
+
+    console.log(event.key)
+    if (event.key === "Tab") {
+        event.preventDefault()
+    } else if (event.shiftKey && event.key === "Enter") {
+        cmdTextbox.rows += 1
+        cmdLine.dataset.extended = "true"
+        console.log(cmdTextbox.value)
+    } else if (event.key === "Enter") {
+        cmdTextbox.value = ""
+        cmdTextbox.rows = 1
+        cmdLine.dataset.extended = "false"
+        event.preventDefault()
+    }
+}

src/js/main.ts

@@ -1,10 +1,12 @@
 import { initResize } from "./resize.js"
+import { initInput } from "./input.js"
 import { initFocus } from "./focus.js"
 import { startVramCounter } from "./vram.js"
 import { startConnection } from "./websocket.js"
 
 initFocus()
 initResize()
+initInput()
 
 startConnection()
 startVramCounter()

src/js/resize.ts

@@ -1,3 +1,7 @@
+////
+// maintain the two video modes: cinema and tall
+//
+
 const content = document.getElementById("content")!
 
 export function initResize() {

src/js/vram.ts

@@ -1,5 +1,5 @@
-//
+////
-// vram
+// fun vram counter at startup
 //
 
 import { $ } from "./dom.js"

src/js/websocket.ts

@@ -1,3 +1,9 @@
+////
+// the terminal communicates with the shell via websockets
+//
+
+import type { Message } from "../shared/message.js"
+
 let ws: WebSocket | null = null
 
 // open our websocket connection
@@ -13,8 +19,8 @@ export function startConnection() {
 }
 
 // send any message
-export function send(obj: any) {
+export function send(msg: Message) {
-    ws?.readyState === 1 && ws.send(JSON.stringify(obj))
+    ws?.readyState === 1 && ws.send(JSON.stringify(msg))
 }
 
 // close it... plz don't do this, though

src/server.tsx

@@ -30,8 +30,12 @@ app.use("*", async (c, next) => {
     console.log(fn(`${c.res.status} ${c.req.method} ${c.req.url} (${end - start}ms)`))
 })
 
-app.get("/js/:path{.+}", async c => {
+app.on("GET", ["/js/:path{.+}", "/shared/:path{.+}"], async c => {
-    const path = "./src/js/" + c.req.param("path")
+    const path = "./src/" + c.req.path.replace("..", ".")
+
+    // path must end in .js
+    if (!path.endsWith(".js")) return c.text("File not found", 404)
+
     const ts = path.replace(".js", ".ts")
     if (isFile(ts)) {
         return new Response(await transpile(ts), { headers: { "Content-Type": "text/javascript" } })

src/shared/message.ts

@@ -0,0 +1,6 @@
+export type Message = {
+    session: string
+    id: string
+    type: "output"
+    data: any
+}