); } // What the playtest's bots need to check the game can be played: the same state and step, and the keys a player uses. export const playtest: Playtest = { initial, step, actions: [[], ["ArrowUp"], ["ArrowDown"]], observe: (s) => ({ paddle: s.y, ball: [s.bx, s.by] }), progress: (s) => Math.min(1, s.returns / 10), outcome: (s) => (s.returns >= 10 ? "won" : s.misses >= 3 ? "lost" : null), }; // Games render landscape at 60 fps: ten seconds here. registerRoot(() => ); ``` The parts that make it a raea game: - **`step(state, input)` is pure.** It returns a new state from the old one and this frame's keys, and it never changes the old state. raea calls it once a frame, in order, from frame 0. - **`useGameState(initial, step)`** gives the state at the current frame. Draw everything from it. Don't keep game state in `useState` or `useEffect`: nothing persists between frames except what the fold computes. - **It plays itself when nobody is at the keys.** When no key is down, the paddle follows the ball. A render has no keys, so the autopilot is what you see in the video, and a live game is never stuck waiting for a key press. - **``** draws the field in its own units (1600 by 900 here) and scales it to any stage. The score, the banner and the key hint each get a band of their own, so text never lands on the field or on other text. - **`playtest`** tells raea's playtest bots how to play: the keys a player can press, what the player sees, how far along a run is, and when it is won or lost. The bots check that the game can be won and never gets stuck. ## 2. Play it ```sh raea play squash.tsx ``` A window opens and the game runs at the composition's frame rate. Press the up and down arrows to take over the paddle; let go and it plays itself again. ## 3. Render it ```sh raea render squash.tsx --at 0,90,240 -o frames/ # three stills of the autopilot's run raea render squash.tsx -o squash.mp4 # the whole run as a video ``` Because the state is a fold from frame 0, frame 240 renders the same whether you render the whole video or only that frame. ## 4. Play a scripted run without a window Agents and CI play games without a window: ```sh raea play squash.tsx --seconds 1 --offscreen # plays one second headless and prints its timings as JSON ``` ## Sound on game events Cue a sound on the frames something happens with `useGameEvents(initial, step, isEvent)`. It runs the same fold and returns every frame where `isEvent(before, after)` is true: ```tsx import { Audio, Sequence, staticFile, useGameEvents } from "raea"; function Hits() { const frames = useGameEvents(initial, step, (before, after) => after.returns > before.returns); return <>{frames.map((f) =>

)}; } ``` `raea sao "a squash ball hitting a wall" -o hit.wav` makes the sound on your own computer. ## Mistakes to avoid - Changing the state inside `step` (`s.bx += s.vx; return s`). Return a new object. - Calling `Math.random()` while drawing. It changes every frame, so the thing jumps. Call it inside `step`, where it is seeded for that frame and repeats on every render, and keep what it decides in the state. - Gating the autopilot on whether the game is live. A live game with nobody at the keys should still play itself. - Placing sound frames by hand from a play-through. Use `useGameEvents`, so the sounds follow the rules when they change.