From 07840aabd815702b3ec904ab0db433948c1aedfa Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Wed, 1 Oct 2025 18:56:34 -0700 Subject: [PATCH] frontend message dispatch --- src/js/dispatch.ts | 29 ++++++++++++++++++++++ src/js/scrollback.ts | 8 +++++- src/js/shell.ts | 59 ++------------------------------------------ src/js/stream.ts | 25 +++++++++++++++++++ src/js/websocket.ts | 4 +-- 5 files changed, 65 insertions(+), 60 deletions(-) create mode 100644 src/js/dispatch.ts create mode 100644 src/js/stream.ts diff --git a/src/js/dispatch.ts b/src/js/dispatch.ts new file mode 100644 index 0000000..0b23e33 --- /dev/null +++ b/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) + } +} \ No newline at end of file diff --git a/src/js/scrollback.ts b/src/js/scrollback.ts index ccf1d47..7b584a8 100644 --- a/src/js/scrollback.ts +++ b/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) +} diff --git a/src/js/shell.ts b/src/js/shell.ts index 4672b7c..c06958b 100644 --- a/src/js/shell.ts +++ b/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) { -} - diff --git a/src/js/stream.ts b/src/js/stream.ts new file mode 100644 index 0000000..7d640e5 --- /dev/null +++ b/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) { +} diff --git a/src/js/websocket.ts b/src/js/websocket.ts index 0fe5230..5a57240 100644 --- a/src/js/websocket.ts +++ b/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