Full game

2025-10-31 16:21:56 -07:00
parent 965253386a
commit eeab08af75
20 changed files with 1125 additions and 560 deletions
--- a/webui/src/app/page.tsx
+++ b/webui/src/app/page.tsx
@@ -63,14 +63,7 @@ export default function Home() {
 				}}
 			>
 				<div>
-					Loading{" "}
-					<a
-						href="https://github.com/rhaiscript/playground"
-						target="_blank"
-					>
-						Rhai Playground
-					</a>
-					...
+					Loading WASM...
 				</div>
 			</div>
 		);
--- a/webui/src/components/Editor.tsx
+++ b/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,
--- a/webui/src/components/Playground.tsx
+++ b/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}>
--- a/webui/src/components/Terminal.tsx
+++ b/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;
+}
--- a/webui/src/lib/runner.ts
+++ b/webui/src/lib/runner.ts
@@ -2,34 +2,40 @@

 let worker: Worker | null = null;

-export async function runScript(
+export function sendDataToScript(data: String) {
+	if (worker) {
+		worker.postMessage({ type: "data", data });
+	}
+}
+
+export async function startScript(
 	script: string,
 	appendOutput: (line: string) => void,
-	appendTerminal?: (line: string) => void
+	appendTerminal: (line: string) => void
 ): Promise<void> {
 	return new Promise((resolve, reject) => {
 		if (worker) {
 			worker.terminate();
 		}

-		worker = new Worker(new URL('./script-runner.worker.ts', import.meta.url));
+		worker = new Worker(new URL("./worker.ts", import.meta.url));

 		worker.onmessage = (event) => {
 			const { type, line, error } = event.data;

-			if (type === 'output') {
+			if (type === "output") {
 				appendOutput(line);
-			} else if (type === 'terminal') {
-				appendTerminal?.(line);
-			} else if (type === 'complete') {
+			} else if (type === "terminal") {
+				appendTerminal(line);
+			} else if (type === "complete") {
 				worker?.terminate();
 				worker = null;
 				resolve();
-			} else if (type === 'error') {
+			} else if (type === "error") {
 				worker?.terminate();
 				worker = null;
 				reject(new Error(error));
-			} else if (type === 'stopped') {
+			} else if (type === "stopped") {
 				worker?.terminate();
 				worker = null;
 				resolve();
@@ -42,12 +48,12 @@ export async function runScript(
 			reject(error);
 		};

-		worker.postMessage({ type: 'run', script });
+		worker.postMessage({ type: "run", script });
 	});
 }

 export function stopScript(): void {
 	if (worker) {
-		worker.postMessage({ type: 'stop' });
+		worker.postMessage({ type: "stop" });
 	}
 }
--- a/webui/src/lib/script-runner.worker.ts
+++ b/webui/src/lib/script-runner.worker.ts
@@ -1,8 +1,8 @@
-import init, { GameState } from "./wasm/script_runner";
+import init, { GameState, GameStateHuman } from "../wasm/runner";

 let wasmReady = false;
 let wasmInitPromise: Promise<void> | null = null;
-let currentGame: GameState | null = null;
+let currentGame: GameStateHuman | null = null;

 async function initWasm(): Promise<void> {
 	if (wasmReady) return;
@@ -20,9 +20,21 @@ async function initWasm(): Promise<void> {
 }

 self.onmessage = async (event) => {
-	const { type, script } = event.data;
+	const { type, ...event_data } = event.data;

-	if (type === "init") {
+	if (type === "data") {
+		if (currentGame !== null) {
+			currentGame.take_input(event_data.data);
+
+			if (currentGame.is_error()) {
+				currentGame = null;
+				self.postMessage({ type: "complete" });
+			} else if (currentGame.is_done()) {
+				currentGame = null;
+				self.postMessage({ type: "complete" });
+			}
+		}
+	} else if (type === "init") {
 		try {
 			await initWasm();
 			self.postMessage({ type: "ready" });
@@ -37,24 +49,33 @@ self.onmessage = async (event) => {
 				self.postMessage({ type: "output", line });
 			};

-			const appendDebug = (line: string) => {
-				self.postMessage({ type: "output", line }); // debug also goes to output
-			};
-
 			const appendTerminal = (line: string) => {
 				self.postMessage({ type: "terminal", line });
 			};

+			currentGame = new GameStateHuman(
+				true,
+				event_data.script,
+				"Agent",
+				appendOutput,
+				appendOutput,
+				appendTerminal
+			);
+
+			currentGame.print_start();
+
+			/*
 			currentGame = new GameState(
-				script,
+				event_data.script,
 				"max",
 				appendOutput,
-				appendDebug,
+				appendOutput,

-				script,
+				// TODO: pick opponent
+				event_data.script,
 				"min",
 				appendOutput,
-				appendDebug,
+				appendOutput,

 				appendTerminal
 			);
@@ -70,6 +91,7 @@ self.onmessage = async (event) => {
 			if (currentGame) {
 				self.postMessage({ type: "complete" });
 			}
+				*/
 		} catch (error) {
 			self.postMessage({ type: "error", error: String(error) });
 		}
--- a/webui/src/utils/wasmLoader.ts
+++ b/webui/src/utils/wasmLoader.ts
@@ -1,84 +1,87 @@
 // WASM loader for Rhai CodeMirror mode
-import init, { RhaiMode, init_codemirror_pass } from '@/wasm/rhai-codemirror/rhai_codemirror.js';
+import init, {
+	RhaiMode,
+	init_codemirror_pass,
+} from "@/wasm/rhai-codemirror/rhai_codemirror.js";

 let wasmInitialized = false;
 let wasmModule: any = null;
 let wasmLoadPromise: Promise<any> | null = null;

 export const loadRhaiWasm = async () => {
-  if (wasmInitialized) {
-    return wasmModule;
-  }
-  if (wasmLoadPromise) {
-    return wasmLoadPromise;
-  }
+	if (wasmInitialized) {
+		return wasmModule;
+	}
+	if (wasmLoadPromise) {
+		return wasmLoadPromise;
+	}

-  wasmLoadPromise = (async () => {
-    try {
-      // Initialize the WASM module
-      wasmModule = await init();
-      wasmInitialized = true;
+	wasmLoadPromise = (async () => {
+		try {
+			// Initialize the WASM module
+			wasmModule = await init();
+			wasmInitialized = true;

-      return wasmModule;
-    } catch (error) {
-      console.error('Failed to load Rhai WASM module:', error);
-      wasmLoadPromise = null; // Reset on error
-      throw error;
-    }
-  })();
+			return wasmModule;
+		} catch (error) {
+			console.error("Failed to load Rhai WASM module:", error);
+			wasmLoadPromise = null; // Reset on error
+			throw error;
+		}
+	})();

-  return wasmLoadPromise;
+	return wasmLoadPromise;
 };

 export const initRhaiMode = (CodeMirror: any) => {
-  if (!wasmInitialized || !wasmModule) {
-    throw new Error('WASM module not loaded. Call loadRhaiWasm() first.');
-  }
+	if (!wasmInitialized || !wasmModule) {
+		throw new Error("WASM module not loaded. Call loadRhaiWasm() first.");
+	}

-  // Initialize CodeMirror Pass for the WASM module
-  init_codemirror_pass(CodeMirror.Pass);
+	// Initialize CodeMirror Pass for the WASM module
+	init_codemirror_pass(CodeMirror.Pass);

-  // Define the Rhai mode using the WASM-based RhaiMode
-  CodeMirror.defineMode("rhai", (config: any) => {
-    return new RhaiMode(config.indentUnit || 4);
-  });
+	// Define the Rhai mode using the WASM-based RhaiMode
+	CodeMirror.defineMode("rhai", (config: any) => {
+		return new RhaiMode(config.indentUnit || 4);
+	});
 };

 // Function to preload all WASM modules used by the application
 export const loadAllWasm = async (): Promise<void> => {
-  try {
-    // Load Rhai CodeMirror WASM
-    await loadRhaiWasm();
+	try {
+		// Load Rhai CodeMirror WASM
+		await loadRhaiWasm();

-    // Load Script Runner WASM by creating and immediately terminating a worker
-    const worker = new Worker(new URL('../lib/script-runner.worker.ts', import.meta.url));
-    await new Promise<void>((resolve, reject) => {
-      const timeout = setTimeout(() => {
-        worker.terminate();
-        reject(new Error('Script runner WASM load timeout'));
-      }, 10000);
+		// Load Script Runner WASM by creating and immediately terminating a worker
+		const worker = new Worker(new URL("../lib/worker.ts", import.meta.url));
+		await new Promise<void>((resolve, reject) => {
+			const timeout = setTimeout(() => {
+				worker.terminate();
+				reject(new Error("Script runner WASM load timeout"));
+			}, 10000);

-      worker.postMessage({ type: 'init' });
-      worker.onmessage = (event) => {
-        if (event.data.type === 'ready') {
-          clearTimeout(timeout);
-          worker.terminate();
-          resolve();
-        }
-      };
+			worker.postMessage({ type: "init" });
+			worker.onmessage = (event) => {
+				if (event.data.type === "ready") {
+					clearTimeout(timeout);
+					worker.terminate();
+					resolve();
+				}
+			};

-      worker.onerror = (error) => {
-        clearTimeout(timeout);
-        worker.terminate();
-        reject(error);
-      };
-    });
+			worker.onerror = (error) => {
+				clearTimeout(timeout);
+				worker.terminate();
+				reject(error);
+			};
+		});

-    console.log('✅ All WASM modules loaded successfully');
-  } catch (error) {
-    console.error('❌ Failed to load WASM modules:', error);
-    throw error;
-  }
+		console.log("✅ All WASM modules loaded successfully");
+	} catch (error) {
+		console.error("❌ Failed to load WASM modules:", error);
+		throw error;
+	}
 };

-export { RhaiMode };
+export { RhaiMode };