frontend message dispatch

src/js/dispatch.ts

@@ -0,0 +1,29 @@
+import type { Message } from "@/shared/types";
+import { cacheCommands } from "./commands";
+import { handleOutput } from "./scrollback"
+import { handleStreamStart, handleStreamAppend, handleStreamReplace, handleStreamEnd } from "./stream";
+import { handleGameStart } from "./game";
+
+// message received from server
+export async function dispatchMessage(msg: Message) {
+  switch (msg.type) {
+    case "output":
+      handleOutput(msg); break
+    case "commands":
+      cacheCommands(msg.data as string[]); break
+    case "error":
+      console.error(msg.data); break
+    case "stream:start":
+      handleStreamStart(msg); break
+    case "stream:end":
+      handleStreamEnd(msg); break
+    case "stream:append":
+      handleStreamAppend(msg); break
+    case "stream:replace":
+      handleStreamReplace(msg); break
+    case "game:start":
+      await handleGameStart(msg); break
+    default:
+      console.error("unknown message type", msg)
+  }
+}

src/js/scrollback.ts

@@ -2,7 +2,7 @@
 // The scrollback shows your history of interacting with the shell.
 // input, output, etc
 
-import type { CommandOutput } from "../shared/types.js"
+import type { Message, CommandOutput, CommandResult } from "../shared/types.js"
 import { scrollback, cmdInput, $$ } from "./dom.js"
 import { randomId } from "../shared/utils.js"
 
@@ -142,3 +142,9 @@ function handleInputClick(e: MouseEvent) {
         cmdInput.value = target.textContent
     }
 }
+
+export function handleOutput(msg: Message) {
+    const result = msg.data as CommandResult
+    setStatus(msg.id!, result.status)
+    addOutput(msg.id!, result.output)
+}

src/js/shell.ts

@@ -1,13 +1,11 @@
 ////
 // The shell runs on the server and processes input, returning output.
 
-import type { Message, CommandResult, CommandOutput } from "../shared/types.js"
-import { addInput, setStatus, addOutput, appendOutput, replaceOutput } from "./scrollback.js"
+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, cacheCommands } from "./commands.js"
-import { handleGameStart } from "./game.js"
+import { browserCommands } from "./commands.js"
 
 export function runCommand(input: string) {
     if (!input.trim()) return
@@ -34,56 +32,3 @@ export function runCommand(input: string) {
     }
 }
 
-// message received from server
-export async function handleMessage(msg: Message) {
-    switch (msg.type) {
-        case "output":
-            handleOutput(msg); break
-        case "commands":
-            cacheCommands(msg.data as string[]); break
-        case "error":
-            console.error(msg.data); break
-        case "stream:start":
-            handleStreamStart(msg); break
-        case "stream:end":
-            handleStreamEnd(msg); break
-        case "stream:append":
-            handleStreamAppend(msg); break
-        case "stream:replace":
-            handleStreamReplace(msg); break
-        case "game:start":
-            await handleGameStart(msg); break
-        default:
-            console.error("unknown message type", msg)
-    }
-}
-
-function handleOutput(msg: Message) {
-    const result = msg.data as CommandResult
-    setStatus(msg.id!, result.status)
-    addOutput(msg.id!, result.output)
-}
-
-function handleStreamStart(msg: Message) {
-    const id = msg.id!
-
-    const status = document.querySelector(`[data-id="${id}"].input .status`)
-    if (!status) return
-
-    addOutput(id, msg.data as CommandOutput)
-
-    status.classList.remove("yellow")
-    status.classList.add("purple")
-}
-
-function handleStreamAppend(msg: Message) {
-    appendOutput(msg.id!, msg.data as CommandOutput)
-}
-
-function handleStreamReplace(msg: Message) {
-    replaceOutput(msg.id!, msg.data as CommandOutput)
-}
-
-function handleStreamEnd(_msg: Message) {
-}
-

src/js/stream.ts

@@ -0,0 +1,25 @@
+import type { Message, CommandOutput } from "@/shared/types"
+import { addOutput, appendOutput, replaceOutput } from "./scrollback"
+
+export function handleStreamStart(msg: Message) {
+  const id = msg.id!
+
+  const status = document.querySelector(`[data-id="${id}"].input .status`)
+  if (!status) return
+
+  addOutput(id, msg.data as CommandOutput)
+
+  status.classList.remove("yellow")
+  status.classList.add("purple")
+}
+
+export function handleStreamAppend(msg: Message) {
+  appendOutput(msg.id!, msg.data as CommandOutput)
+}
+
+export function handleStreamReplace(msg: Message) {
+  replaceOutput(msg.id!, msg.data as CommandOutput)
+}
+
+export function handleStreamEnd(_msg: Message) {
+}

src/js/websocket.ts

@@ -3,7 +3,7 @@
 
 import type { Message } from "../shared/types.js"
 import { sessionId } from "./session.js"
-import { handleMessage } from "./shell.js"
+import { dispatchMessage } from "./dispatch.js"
 import { addErrorMessage } from "./scrollback.js"
 
 const MAX_RETRIES = 5
@@ -45,7 +45,7 @@ export function send(msg: Message) {
 async function receive(e: MessageEvent) {
     const data = JSON.parse(e.data) as Message
     console.log("<- receive", data)
-    await handleMessage(data)
+    await dispatchMessage(data)
 }
 
 // close it... plz don't do this, though