Select bulk opponent

webui/src/components/Playground.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/Button";
 import { Dropdown } from "@/components/ui/Dropdown";
 import { Slider } from "@/components/ui/Slider";
 import { SidePanel } from "@/components/ui/SidePanel";
+import { AgentSelector } from "@/components/ui/AgentSelector";
 import { Editor } from "@/components/Editor";
 import { Terminal, TerminalRef } from "@/components/Terminal";
 import {
@@ -38,11 +39,39 @@ fn step_max(board) {
 	return random_action(board);
 }`;
 
+const AGENTS = {
+	// special-cased below
+	Self: undefined,
+
+	Random: `fn random_action(board) {
+	let symb = rand_symb();
+	let pos = rand_int(0, 10);
+	let action = Action(symb, pos);
+
+	while !board.can_play(action) {
+		let symb = rand_symb();
+		let pos = rand_int(0, 10);
+		action = Action(symb, pos);
+	}
+
+	return action;
+}
+
+fn step_min(board) {
+	return random_action(board);
+}
+
+fn step_max(board) {
+	return random_action(board);
+}`,
+};
+
 export default function Playground() {
 	const [isScriptRunning, setIsScriptRunning] = useState(false);
 	const [isEditorReady, setIsEditorReady] = useState(false);
 	const [fontSize, setFontSize] = useState(14);
 	const [bulkRounds, setBulkRounds] = useState(1000);
+	const [selectedAgent, setSelectedAgent] = useState("Random");
 	const [isHelpOpen, setIsHelpOpen] = useState(false);
 
 	const editorRef = useRef<any>(null);
@@ -104,7 +133,7 @@ export default function Playground() {
 			resultRef.current.value = "";
 		}
 
-		if (runDisabled || !editorRef.current) return;
+		if (runDisabled) return;
 
 		setIsScriptRunning(true);
 
@@ -112,8 +141,16 @@ export default function Playground() {
 			terminalRef.current?.clear();
 			terminalRef.current?.focus();
 
+			const agentCode = AGENTS[selectedAgent as keyof typeof AGENTS];
+			const blueScript =
+				agentCode || (editorRef.current?.getValue() ?? "");
+			const redScript = editorRef.current?.getValue() ?? "";
+			const opponentName = agentCode ? selectedAgent : "script";
+
 			await startScriptBulk(
-				editorRef.current.getValue(),
+				redScript,
+				blueScript,
+				opponentName,
 				(line: string) => {
 					if (resultRef.current) {
 						let v = resultRef.current.value + line + "\n";
@@ -145,7 +182,7 @@ export default function Playground() {
 		}
 
 		setIsScriptRunning(false);
-	}, [runDisabled, bulkRounds]);
+	}, [runDisabled, bulkRounds, selectedAgent]);
 
 	const stopScriptHandler = useCallback(() => {
 		stopScript();
@@ -210,6 +247,15 @@ export default function Playground() {
 										onChange={setBulkRounds}
 										unit=""
 									/>
+									<div className={styles.configField}>
+										<label>Bulk opponent</label>
+										<AgentSelector
+											agents={Object.keys(AGENTS)}
+											selectedAgent={selectedAgent}
+											onSelect={setSelectedAgent}
+											placeholder="Select an agent..."
+										/>
+									</div>
 								</div>
 							}
 						/>