Full game

webui/src/components/Editor.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useEffect, useRef, forwardRef, useImperativeHandle, useState } from "react";
+import {
+	useEffect,
+	useRef,
+	forwardRef,
+	useImperativeHandle,
+	useState,
+} from "react";
 import styles from "@/styles/Editor.module.css";
 import { loadRhaiWasm, initRhaiMode } from "@/utils/wasmLoader";
 
@@ -28,12 +34,12 @@ if (typeof window !== "undefined") {
 
 			await loadRhaiWasm();
 			initRhaiMode(CodeMirror);
-			console.log('✅ WASM-based Rhai mode initialized successfully');
+			console.log("✅ WASM-based Rhai mode initialized successfully");
 
 			isCodeMirrorReady = true;
 		})
-		.catch(error => {
-			console.error('Failed to load CodeMirror:', error);
+		.catch((error) => {
+			console.error("Failed to load CodeMirror:", error);
 		});
 }
 
@@ -45,8 +51,8 @@ interface EditorProps {
 }
 
 export const Editor = forwardRef<any, EditorProps>(function Editor(
-	{ initialValue = "", onChange,  onReady },
-	ref,
+	{ initialValue = "", onChange, onReady },
+	ref
 ) {
 	const textareaRef = useRef<HTMLTextAreaElement>(null);
 	const editorRef = useRef<any>(null);
@@ -56,7 +62,13 @@ export const Editor = forwardRef<any, EditorProps>(function Editor(
 
 	// Initialize editor only once
 	useEffect(() => {
-		if (!isCodeMirrorReady || !CodeMirror || !textareaRef.current || editorRef.current) return;
+		if (
+			!isCodeMirrorReady ||
+			!CodeMirror ||
+			!textareaRef.current ||
+			editorRef.current
+		)
+			return;
 
 		const editor = CodeMirror.fromTextArea(textareaRef.current, {
 			lineNumbers: true,

webui/src/components/Playground.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/Button";
 import { Dropdown } from "@/components/ui/Dropdown";
 import { Editor } from "@/components/Editor";
 import { Terminal, TerminalRef } from "@/components/Terminal";
-import { runScript, stopScript } from "@/lib/runner";
+import { sendDataToScript, startScript, stopScript } from "@/lib/runner";
 import styles from "@/styles/Playground.module.css";
 
 const initialCode = `
@@ -50,17 +50,21 @@ export default function Playground() {
 	const stopDisabled = !isScriptRunning;
 
 	const requestRun = useCallback(async () => {
+		if (resultRef.current) {
+			resultRef.current.value = "";
+		}
+
 		if (runDisabled || !editorRef.current) return;
 
 		setIsScriptRunning(true);
 
 		try {
 			terminalRef.current?.clear();
+			terminalRef.current?.focus();
 
-			await runScript(
+			await startScript(
 				editorRef.current.getValue(),
 				(line: string) => {
-					// Only script prints go to output text area
 					if (resultRef.current) {
 						let v = resultRef.current.value + line + "\n";
 						if (v.length > 10000) {
@@ -72,18 +76,19 @@ export default function Playground() {
 							resultRef.current.clientHeight;
 					}
 				},
+
 				(line: string) => {
-					// Game state and debug info go to terminal
-					terminalRef.current?.write(line + '\r\n');
+					terminalRef.current?.write(line);
 				}
 			);
-
 		} catch (ex) {
 			const errorMsg = `\nEXCEPTION: "${ex}"\n`;
 			if (resultRef.current) {
 				resultRef.current.value += errorMsg;
 			}
-			terminalRef.current?.write('\r\n\x1B[1;31mEXCEPTION:\x1B[0m ' + String(ex) + '\r\n');
+			terminalRef.current?.write(
+				"\r\n\x1B[1;31mEXCEPTION:\x1B[0m " + String(ex) + "\r\n"
+			);
 		}
 
 		setIsScriptRunning(false);
@@ -102,9 +107,6 @@ export default function Playground() {
 							variant="success"
 							iconLeft="play"
 							onClick={() => {
-								if (resultRef.current) {
-									resultRef.current.value = "";
-								}
 								requestRun();
 							}}
 							loading={isScriptRunning}
@@ -113,6 +115,18 @@ export default function Playground() {
 							Run
 						</Button>
 
+						<Button
+							variant="success"
+							iconLeft="play"
+							onClick={() => {
+								requestRun();
+							}}
+							loading={isScriptRunning}
+							disabled={runDisabled}
+						>
+							Bulk Run
+						</Button>
+
 						<Button
 							variant="danger"
 							iconLeft="stop"
@@ -200,7 +214,10 @@ export default function Playground() {
 					<div className={styles.terminalPanel}>
 						<div className={styles.panelHeader}>Terminal</div>
 						<div className={styles.terminalContainer}>
-							<Terminal ref={terminalRef} />
+							<Terminal
+								ref={terminalRef}
+								onData={sendDataToScript}
+							/>
 						</div>
 					</div>
 					<div className={styles.outputPanel}>

webui/src/components/Terminal.tsx

@@ -1,14 +1,26 @@
 "use client";
 
-import { useEffect, useRef, useImperativeHandle, forwardRef } from "react";
-import '@xterm/xterm/css/xterm.css';
+import {
+	useEffect,
+	useRef,
+	useImperativeHandle,
+	forwardRef,
+	RefObject,
+} from "react";
+import "@xterm/xterm/css/xterm.css";
 
-export interface TerminalRef {
+export type TerminalRef = {
 	write: (data: string) => void;
 	clear: () => void;
-}
+	focus: () => void;
+};
 
-export const Terminal = forwardRef<TerminalRef, {}>(function Terminal(_props, ref) {
+export const Terminal = forwardRef<
+	TerminalRef,
+	{
+		onData: (data: String) => void;
+	}
+>(function Terminal(props, ref) {
 	const terminalRef = useRef<HTMLDivElement>(null);
 	const xtermRef = useRef<any>(null);
 
@@ -22,59 +34,34 @@ export const Terminal = forwardRef<TerminalRef, {}>(function Terminal(_props, re
 			if (xtermRef.current) {
 				xtermRef.current.clear();
 			}
-		}
+		},
+		focus: () => {
+			if (xtermRef.current) {
+				xtermRef.current.focus();
+			}
+		},
 	}));
 
 	useEffect(() => {
+		// Set to false when this component is unmounted.
+		//
+		// Here's what this flag prevents:
+		// - <Terminal> component mounts
+		// - `useEffect` runs, `mounted = true`
+		// - `init_term()` function begins work
+		// - before init_term() finishes, the user navigates away and <Terminal> to unmounts
+		// - `useEffect` cleans up, `mounted = false`
+		// - `init_term()` ccompletes, and we attempt to set `xtermRef.current`, causing issues
 		let mounted = true;
 
-		const initTerminal = async () => {
-			if (!terminalRef.current) return;
-
-			try {
-				const { Terminal } = await import('@xterm/xterm');
-
+		init_term(terminalRef, props.onData, () => mounted)
+			.then((term) => {
 				if (!mounted) return;
-
-				const term = new Terminal({
-					//"fontFamily": "Fantasque",
-					"rows": 24,
-					"fontSize": 16,
-					"tabStopWidth": 8,
-					"cursorBlink": true,
-					"theme": {
-						"background": "#1D1F21",
-						"foreground": "#F8F8F8",
-						"cursor": "#F8F8F2",
-						"black": "#282828",
-						"blue": "#0087AF",
-						"brightBlack": "#555555",
-						"brightBlue": "#87DFFF",
-						"brightCyan": "#28D1E7",
-						"brightGreen": "#A8FF60",
-						"brightMagenta": "#985EFF",
-						"brightRed": "#FFAA00",
-						"brightWhite": "#D0D0D0",
-						"brightYellow": "#F1FF52",
-						"cyan": "#87DFEB",
-						"green": "#B4EC85",
-						"magenta": "#BD99FF",
-						"red": "#FF6600",
-						"white": "#F8F8F8",
-						"yellow": "#FFFFB6"
-					}
-				});
-
-				term.open(terminalRef.current);
-				term.write('Terminal ready.\r\n');
-
 				xtermRef.current = term;
-			} catch (error) {
-				console.error('Failed to initialize terminal:', error);
-			}
-		};
-
-		initTerminal();
+			})
+			.catch((err) => {
+				console.error("Failed to initialize terminal:", err);
+			});
 
 		return () => {
 			mounted = false;
@@ -83,7 +70,57 @@ export const Terminal = forwardRef<TerminalRef, {}>(function Terminal(_props, re
 				xtermRef.current = null;
 			}
 		};
-	}, []);
+	}, [props.onData]);
 
 	return <div ref={terminalRef} style={{ height: "100%", width: "100%" }} />;
 });
+
+async function init_term(
+	ref: RefObject<HTMLDivElement>,
+
+	// Called when the terminal receives data
+	onData: (data: String) => void,
+	isMounted: () => boolean
+) {
+	if (!ref.current) return;
+
+	const { Terminal } = await import("@xterm/xterm");
+	if (!isMounted()) return;
+
+	const term = new Terminal({
+		//"fontFamily": "Fantasque",
+		rows: 24,
+		fontSize: 16,
+		tabStopWidth: 8,
+		cursorBlink: false,
+		cursorStyle: "block",
+		cursorInactiveStyle: "none",
+		theme: {
+			background: "#1D1F21",
+			foreground: "#F8F8F8",
+			cursor: "#F8F8F2",
+			black: "#282828",
+			blue: "#0087AF",
+			brightBlack: "#555555",
+			brightBlue: "#87DFFF",
+			brightCyan: "#28D1E7",
+			brightGreen: "#A8FF60",
+			brightMagenta: "#985EFF",
+			brightRed: "#FFAA00",
+			brightWhite: "#D0D0D0",
+			brightYellow: "#F1FF52",
+			cyan: "#87DFEB",
+			green: "#B4EC85",
+			magenta: "#BD99FF",
+			red: "#ff2f00ff",
+			white: "#F8F8F8",
+			yellow: "#FFFFB6",
+		},
+	});
+
+	term.open(ref.current);
+	term.onData(onData);
+
+	console.log("Terminal ready");
+	return term;
+}