fix js imports

src/css/main.css

@@ -73,6 +73,7 @@
 
 a {
   color: var(--cyan);
+  display: inline-block;
 }
 
 a:visited {

src/js/commands.ts

@@ -1,18 +1,21 @@
 ////
 // temporary hack for browser commands
 
-import { scrollback, content } from "./dom.js"
-import { resize } from "./resize.js"
-import { autoScroll } from "./scrollback.js"
-import { sessionId } from "./session.js"
-import { send } from "./websocket.js"
+import type { CommandOutput } from "../shared/types"
+import { scrollback, content } from "./dom"
+import { resize } from "./resize"
+import { autoScroll } from "./scrollback"
+import { sessionId } from "./session"
+import { send } from "./websocket"
 
 export const commands: string[] = []
 
-export const browserCommands: Record<string, (...args: string[]) => void> = {
+export const browserCommands: Record<string, (...args: string[]) => void | Promise<void> | CommandOutput> = {
   "browser-session": () => sessionId,
   clear: () => scrollback.innerHTML = "",
-  commands: () => commands.join(" "),
+  commands: () => {
+    return { html: "<div>" + commands.map(cmd => `<a href="#help ${cmd}">${cmd}</a>`).join("") + "</div>" }
+  },
   fullscreen: () => document.body.requestFullscreen(),
   mode: (mode?: string) => {
     if (!mode) {
@@ -33,4 +36,5 @@ export function cacheCommands(cmds: string[]) {
   commands.push(...cmds)
   commands.push(...Object.keys(browserCommands))
   commands.sort()
+  console.log("CMDS", commands)
 }

src/js/completion.ts

@@ -1,8 +1,8 @@
 //// 
 // tab completion
 
-import { cmdInput } from "./dom.js"
-import { commands } from "./commands.js"
+import { cmdInput } from "./dom"
+import { commands } from "./commands"
 
 export function initCompletion() {
   cmdInput.addEventListener("keydown", handleCompletion)

src/js/cursor.ts

@@ -1,7 +1,7 @@
 ////
 // Blinking c64 cursor
 
-import { cmdInput, $ } from "./dom.js"
+import { cmdInput, $ } from "./dom"
 
 const cursor = "Û"
 let cmdCursor: HTMLTextAreaElement

src/js/drop.ts

@@ -1,3 +1,7 @@
+//// 
+// Hack... works with the `upload` command.
+// Dragging a file to the terminal fills in the <input type="file"/> on screen.
+
 export function initDrop() {
   ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
     document.body.addEventListener(eventName, preventDefaults, false);

src/js/editor.ts

@@ -1,6 +1,6 @@
-import { scrollback } from "./dom.js"
-import { send } from "./websocket.js"
-import { focusInput } from "./focus.js"
+import { scrollback } from "./dom"
+import { send } from "./websocket"
+import { focusInput } from "./focus"
 
 const INDENT_SIZE = 2
 

src/js/focus.ts

@@ -1,7 +1,7 @@
 ////
 // We try to keep the command textbox focused at all times.
 
-import { cmdInput } from "./dom.js"
+import { cmdInput } from "./dom"
 
 export function initFocus() {
     window.addEventListener("click", focusHandler)

src/js/form.ts

@@ -1,10 +1,10 @@
 ////
 // All forms are submitted via ajax.
 
-import type { CommandResult, CommandOutput } from "../shared/types.js"
-import { sessionId } from "./session.js"
-import { setStatus, replaceOutput } from "./scrollback.js"
-import { focusInput } from "./focus.js"
+import type { CommandResult, CommandOutput } from "../shared/types"
+import { sessionId } from "./session"
+import { setStatus, replaceOutput } from "./scrollback"
+import { focusInput } from "./focus"
 
 export function initForm() {
   document.addEventListener("submit", submitHandler)

src/js/game.ts

@@ -1,10 +1,10 @@
-import type { Message } from "../shared/types.js"
-import { GameContext, type InputState } from "../shared/game.js"
-import { focusInput } from "./focus.js"
-import { $$ } from "./dom.js"
-import { randomId } from "../shared/utils.js"
-import { setStatus, addOutput, insert } from "./scrollback.js"
-import { browserCommands } from "./commands.js"
+import type { Message } from "../shared/types"
+import { GameContext, type InputState } from "../shared/game"
+import { focusInput } from "./focus"
+import { $$ } from "./dom"
+import { randomId } from "../shared/utils"
+import { setStatus, addOutput, insert } from "./scrollback"
+import { browserCommands } from "./commands"
 
 const FPS = 30
 const HEIGHT = 540

src/js/history.ts

@@ -1,7 +1,7 @@
 ////
 // Command input history storage and navigation.
 
-import { cmdInput, cmdLine } from "./dom.js"
+import { cmdInput, cmdLine } from "./dom"
 
 const history: string[] = ["one", "two", "three"]
 let idx = -1

src/js/hyperlink.ts

@@ -1,11 +1,11 @@
-import { runCommand } from "./shell.js"
-import { focusInput } from "./focus.js"
+import { runCommand } from "./shell"
+import { focusInput } from "./focus"
 
 export function initHyperlink() {
   window.addEventListener("click", handleClick)
 }
 
-function handleClick(e: MouseEvent) {
+async function handleClick(e: MouseEvent) {
   const target = e.target
 
   if (!(target instanceof HTMLElement)) return
@@ -18,7 +18,7 @@ function handleClick(e: MouseEvent) {
 
   if (href.startsWith("#")) {
     e.preventDefault()
-    runCommand(href.slice(1))
+    await runCommand(href.slice(1))
     focusInput()
   }
 }

src/js/input.ts

@@ -1,17 +1,16 @@
 ////
 // Terminal input is handled by a <textarea> and friends.
 
-import { cmdInput, cmdLine } from "./dom.js"
-import { runCommand } from "./shell.js"
-import { resetHistory } from "./history.js"
-import { countChar } from "../shared/utils.js"
+import { cmdInput, cmdLine } from "./dom"
+import { runCommand } from "./shell"
+import { resetHistory } from "./history"
 
 export function initInput() {
     cmdInput.addEventListener("keydown", inputHandler)
     cmdInput.addEventListener("paste", pasteHandler)
 }
 
-function inputHandler(event: KeyboardEvent) {
+async function inputHandler(event: KeyboardEvent) {
     const target = event.target as HTMLElement
     if (target?.id !== cmdInput.id) return
 
@@ -25,7 +24,7 @@ function inputHandler(event: KeyboardEvent) {
         cmdLine.dataset.extended = "true"
     } else if (event.key === "Enter") {
         event.preventDefault()
-        runCommand(cmdInput.value)
+        await runCommand(cmdInput.value)
         clearInput()
     }
 

src/js/main.ts

@@ -1,17 +1,17 @@
-import { initCompletion } from "./completion.js"
-import { initCursor } from "./cursor.js"
-import { initDrop } from "./drop.js"
-import { initEditor } from "./editor.js"
-import { initFocus } from "./focus.js"
-import { initForm } from "./form.js"
-import { initGamepad } from "./gamepad.js"
-import { initHistory } from "./history.js"
-import { initHyperlink } from "./hyperlink.js"
-import { initInput } from "./input.js"
-import { initResize } from "./resize.js"
-import { initScrollback } from "./scrollback.js"
-import { startVramCounter } from "./vram.js"
-import { startConnection } from "./websocket.js"
+import { initCompletion } from "./completion"
+import { initCursor } from "./cursor"
+import { initDrop } from "./drop"
+import { initEditor } from "./editor"
+import { initFocus } from "./focus"
+import { initForm } from "./form"
+import { initGamepad } from "./gamepad"
+import { initHistory } from "./history"
+import { initHyperlink } from "./hyperlink"
+import { initInput } from "./input"
+import { initResize } from "./resize"
+import { initScrollback } from "./scrollback"
+import { startVramCounter } from "./vram"
+import { startConnection } from "./websocket"
 
 initCompletion()
 initCursor()

src/js/scrollback.ts

@@ -2,9 +2,9 @@
 // The scrollback shows your history of interacting with the shell.
 // input, output, etc
 
-import type { Message, CommandOutput, CommandResult } from "../shared/types.js"
-import { scrollback, cmdInput, $$ } from "./dom.js"
-import { randomId } from "../shared/utils.js"
+import type { Message, CommandOutput, CommandResult } from "../shared/types"
+import { scrollback, cmdInput, $$ } from "./dom"
+import { randomId } from "../shared/utils"
 
 type InputStatus = "waiting" | "streaming" | "ok" | "error"
 

src/js/session.ts

@@ -2,6 +2,6 @@
 // Each browser tab is a shell session. This means you can run multiple sessions
 // in the same browser.
 
-import { randomId } from "../shared/utils.js"
+import { randomId } from "../shared/utils"
 
 export const sessionId = randomId()

src/js/shell.ts

@@ -1,17 +1,17 @@
 ////
 // The shell runs on the server and processes input, returning output.
 
-import { addInput, setStatus, addOutput } from "./scrollback.js"
-import { send } from "./websocket.js"
-import { randomId } from "../shared/utils.js"
-import { addToHistory } from "./history.js"
-import { browserCommands } from "./commands.js"
+import { addInput, setStatus, addOutput } from "./scrollback"
+import { send } from "./websocket"
+import { randomId } from "../shared/utils"
+import { addToHistory } from "./history"
+import { browserCommands } from "./commands"
 
-export function runCommand(input: string) {
+export async function runCommand(input: string) {
     if (!input.trim()) return
 
     if (input.includes(";")) {
-        input.split(";").forEach(cmd => runCommand(cmd.trim()))
+        input.split(";").forEach(async cmd => await runCommand(cmd.trim()))
         return
     }
 
@@ -23,9 +23,8 @@ export function runCommand(input: string) {
     const [cmd = "", ...args] = input.split(" ")
 
     if (browserCommands[cmd]) {
-        const result = browserCommands[cmd](...args)
-        if (typeof result === "string")
-            addOutput(id, result)
+        const result = await browserCommands[cmd](...args)
+        if (result) addOutput(id, result)
         setStatus(id, "ok")
     } else {
         send({ id, type: "input", data: input })

src/js/vram.ts

@@ -1,7 +1,7 @@
 ////
 // Fun vram counter at startup.
 
-import { $ } from "./dom.js"
+import { $ } from "./dom"
 
 const vramCounter = $("vram-size")!
 

src/js/websocket.ts

@@ -1,10 +1,10 @@
 ////
 // The terminal communicates with the shell via websockets.
 
-import type { Message } from "../shared/types.js"
-import { sessionId } from "./session.js"
-import { dispatchMessage } from "./dispatch.js"
-import { addErrorMessage } from "./scrollback.js"
+import type { Message } from "../shared/types"
+import { sessionId } from "./session"
+import { dispatchMessage } from "./dispatch"
+import { addErrorMessage } from "./scrollback"
 
 const MAX_RETRIES = 5
 let retries = 0