Show playback

.vscode/launch.json

@@ -4,10 +4,17 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+        {
+            "name": "Debug ChessBots Client",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        },
         {
             "type": "node",
             "request": "launch",
-            "name": "Debug ChessBot Server",
+            "name": "Debug ChessBots Server",
             "runtimeExecutable": "ts-node",
             "program": "${workspaceFolder}/src/server/main.ts",
             "restart": true,

.vscode/settings.json

@@ -4,6 +4,7 @@
     "task.autoDetect": "off",
     "cSpell.words": [
         "blueprintjs",
+        "cbor",
         "Chessbots",
         "Premoves",
         "runtypes",

package.json

@@ -23,7 +23,7 @@
     "dependencies": {
         "chess.js": "^1.0.0-beta.6",
         "eslint-plugin-tsdoc": "^0.2.17",
-        "typescript": "^4.9.3",
+        "typescript": "5.5.4",
         "vite-express": "^0.11.1"
     },
     "devDependencies": {
@@ -39,12 +39,12 @@
         "nodemon": "^3.0.3",
         "prettier": "^3.2.4",
         "ts-node": "^10.9.1",
-        "typedoc": "^0.23.0",
+        "typedoc": "^0.28.0",
         "vite": "^4.5.5",
         "vitest": "^3.0.8"
     },
     "optionalDependencies": {
         "bufferutil": "^4.0.8"
     },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+    "packageManager": "yarn@1.19.0+sha512.40b88ca23f991e8da44f5ef1d6dedeaceea0cd1fbdc526b9cfb2e67a2d6a60cd528f7ef088816febb910707fa792c86c3b47f4dc89970a57e410a5209ec32b79"
 }

src/client/debug/debug.tsx

@@ -36,6 +36,12 @@ export function Debug() {
         fetchIds();
     }, [setRobotIds]);
 
+    const danceConfigLoad = async () => {
+        const response = await get("/do-parallel");
+        if (!response.ok) {
+            console.warn("Failed to load dance config");
+        }
+    };
     // create the select and move buttons
     let body: ReactNode;
     if (robotIds === undefined) {
@@ -49,6 +55,9 @@ export function Debug() {
                     selectedRobotId={selectedRobotId}
                     onRobotIdSelected={setSelectedRobotId}
                 />
+                <div className="debug-section">
+                    <Button icon="play" minimal onClick={danceConfigLoad} />
+                </div>
                 {selectedRobotId === undefined ? null : (
                     <>
                         <div className="debug-section">

src/client/debug/simulator.tsx

@@ -1,5 +1,13 @@
 import { Card, Button, H1, Tooltip, Collapse } from "@blueprintjs/core";
-import { useEffect, useReducer, useRef, useState } from "react";
+import {
+    CSSProperties,
+    forwardRef,
+    type PropsWithChildren,
+    useEffect,
+    useReducer,
+    useRef,
+    useState,
+} from "react";
 import { useNavigate } from "react-router-dom";
 import { get, useSocket } from "../api";
 import {
@@ -22,9 +30,11 @@ import {
 } from "../check-dark-mode";
 
 const tileSize = 60;
-const robotSize = tileSize / 2;
+export const robotSize = tileSize / 2;
 const cellCount = 12;
 
+export type RobotState = { [robotId: string]: SimulatedRobotLocation };
+
 /**
  * Creates a robot simulator for testing robot commands
  *
@@ -34,8 +44,6 @@ const cellCount = 12;
 export function Simulator() {
     const navigate = useNavigate();
 
-    type RobotState = { [robotId: string]: SimulatedRobotLocation };
-
     type Action =
         | { type: "SET_ALL_ROBOTS"; payload: RobotState }
         | {
@@ -150,45 +158,7 @@ export function Simulator() {
                 </Button>
             </div>
             <div style={{ display: "flex", gap: "1rem", width: "95vw" }}>
-                <div
-                    style={{
-                        display: "grid",
-                        gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
-                        gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
-                        position: "relative",
-                    }}
-                >
-                    {new Array(cellCount * cellCount)
-                        .fill(undefined)
-                        .map((_, i) => {
-                            const row = Math.floor(i / cellCount);
-                            const col = i % cellCount;
-                            const isCenterCell =
-                                row >= 2 && row < 10 && col >= 2 && col < 10;
-                            return (
-                                <div
-                                    key={i}
-                                    style={{
-                                        borderWidth: "1px",
-                                        borderStyle: "solid",
-                                        borderColor: simBorderColor(),
-                                        backgroundColor:
-                                            !isCenterCell ? simRingCellColor()
-                                            :   "transparent",
-                                    }}
-                                />
-                            );
-                        })}
-                    {/* TODO: implement onTopOfRobots */}
-                    {Object.entries(robotState).map(([robotId, pos]) => (
-                        <Robot
-                            pos={pos}
-                            robotId={robotId}
-                            key={robotId}
-                            onTopOfRobots={[]}
-                        />
-                    ))}
-                </div>
+                <RobotGrid robotState={robotState} />
                 <div
                     style={{
                         width: "100%",
@@ -239,6 +209,54 @@ const openInEditor = async (frame: StackFrame) => {
     await fetch(`/__open-in-editor?${params.toString()}`);
 };
 
+// TODO: refactor out of debug since we use it in more than just simulator?
+export function RobotGrid({
+    robotState,
+    children,
+}: PropsWithChildren<{ robotState: RobotState }>) {
+    return (
+        <div
+            style={{
+                display: "grid",
+                gridTemplateColumns: `repeat(${cellCount}, ${tileSize}px)`,
+                gridTemplateRows: `repeat(${cellCount}, ${tileSize}px)`,
+                position: "relative",
+            }}
+        >
+            {new Array(cellCount * cellCount).fill(undefined).map((_, i) => {
+                const row = Math.floor(i / cellCount);
+                const col = i % cellCount;
+                const isCenterCell =
+                    row >= 2 && row < 10 && col >= 2 && col < 10;
+                return (
+                    <div
+                        key={i}
+                        style={{
+                            borderWidth: "1px",
+                            borderStyle: "solid",
+                            borderColor: simBorderColor(),
+                            backgroundColor:
+                                !isCenterCell ? simRingCellColor() : (
+                                    "transparent"
+                                ),
+                        }}
+                    />
+                );
+            })}
+            {/* TODO: implement onTopOfRobots */}
+            {Object.entries(robotState).map(([robotId, pos]) => (
+                <Robot
+                    pos={pos}
+                    robotId={robotId}
+                    key={robotId}
+                    onTopOfRobots={[]}
+                />
+            ))}
+            {children}
+        </div>
+    );
+}
+
 /**
  * the message log, used to show the commands sent to the robot
  * @param props - the message and time
@@ -336,25 +354,31 @@ function LogEntry(props: { message: SimulatorUpdateMessage; ts: Date }) {
  * @param props - the robot position and id
  * @returns the robot icon scaled to the board
  */
-function Robot(props: {
-    pos: SimulatedRobotLocation;
-    robotId: string;
-    onTopOfRobots: string[];
-}) {
+export const Robot = forwardRef<
+    HTMLDivElement,
+    {
+        pos: SimulatedRobotLocation;
+        robotId: string;
+        onTopOfRobots: string[];
+        style?: CSSProperties;
+    }
+>(function Robot({ pos, robotId, onTopOfRobots, style }, ref) {
     return (
         <div
+            ref={ref}
             className="robot"
             style={{
                 position: "absolute",
-                left: `${props.pos.position.x * tileSize - 0.25 * tileSize}px`,
-                bottom: `${props.pos.position.y * tileSize - 0.25 * tileSize}px`,
+                left: `${pos.position.x * tileSize - 0.25 * tileSize}px`,
+                bottom: `${pos.position.y * tileSize - 0.25 * tileSize}px`,
+                ...style,
             }}
         >
-            <Tooltip content={`${props.robotId}: ${JSON.stringify(props.pos)}`}>
+            <Tooltip content={`${robotId}: ${JSON.stringify(pos)}`}>
                 <div
-                    className={robotColor(props.onTopOfRobots.length)}
+                    className={robotColor(onTopOfRobots.length)}
                     style={{
-                        transform: `rotate(-${clampHeading(props.pos.headingRadians)}rad)`,
+                        transform: `rotate(-${clampHeading(pos.headingRadians)}rad)`,
                         borderRadius: "50%",
                         display: "flex",
                         justifyContent: "flex-end",
@@ -377,4 +401,4 @@ function Robot(props: {
             </Tooltip>
         </div>
     );
-}
+});