yuuna-engine 0.1.0 → 0.2.0

package/README.md

@@ -22,7 +22,7 @@ npm install yuuna-engine
 Add a canvas with `id="yuuna"` to your page:
 
 ```html
-<canvas id="yuuna" width="960" height="540"></canvas>
+<canvas id="yuuna"></canvas>
 ```
 
 Then describe your game as state + render + nextState:
@@ -35,6 +35,9 @@ type GameState = { cookies: number };
 runEngine<GameState>({
   initialState: { cookies: 0 },
 
+  // Optional — size and color the canvas from code instead of HTML/CSS
+  canvas: { width: 960, height: 540, backgroundColor: "#0d1831" },
+
   render: (state) => ({
     renderables: [
       {
@@ -78,6 +81,10 @@ runEngine<GameState>({
 - **Sprites** — pass a `resources` map of `{ src, size, slices }` to
   `runEngine` to load spritesheets, then reference them by id with a
   `SPRITE` renderable's `resourceId` and `frame`.
+- **Canvas** — pass `canvas: { width, height, backgroundColor }` to
+  `runEngine` to size and color the canvas from code. All three are
+  optional; anything you don't set falls back to the canvas element's
+  existing HTML/CSS.
 
 ## Development
 

package/lib/engine/types.d.ts

@@ -54,12 +54,30 @@ export type SpriteRenderable = {
     frame: number;
     scale?: number;
     opacity?: number;
+    flipX?: boolean;
     id?: string;
     isClickable?: boolean;
     isHoverable?: boolean;
     trackMouseMovement?: boolean;
 };
-export type Renderable = RectangleRenderable | CircleRenderable | SpriteRenderable | TextRenderable;
+export type LineRenderable = {
+    type: "LINE";
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    color: string;
+    width?: number;
+    id?: string;
+    isClickable?: boolean;
+    isHoverable?: boolean;
+    trackMouseMovement?: boolean;
+};
+export type Renderable = RectangleRenderable | CircleRenderable | SpriteRenderable | TextRenderable | LineRenderable;
 export type TimeEvent = {
     tag: "TIME";
     delta: number;
@@ -97,7 +115,7 @@ export type MouseMoveEvent = {
     };
 };
 export type GameEvent = TimeEvent | ClickEvent | HoverInEvent | HoverOutEvent | MouseMoveEvent;
-type NextStateProps<State> = {
+export type NextStateProps<State> = {
     state: State;
     event: GameEvent;
     keyboard: Record<KeyboardKeys, {
@@ -106,13 +124,15 @@ type NextStateProps<State> = {
         isJustReleased: boolean;
     }>;
 };
+export declare const STOP: "Yuuna.STOP";
+export type NextStateFunction<State> = (props: NextStateProps<State>) => State | typeof STOP | undefined;
 export type RunEngineProps<State> = {
     initialState: State;
     render: (state: State) => {
         cursor?: "default" | "pointer";
         renderables: Renderable[];
     };
-    nextState: (props: NextStateProps<State>) => State;
+    nextState: NextStateFunction<State> | NextStateFunction<State>[];
     resources?: Record<string, {
         src: string;
         size: {
@@ -124,6 +144,11 @@ export type RunEngineProps<State> = {
             horizontal: number;
         };
     }>;
+    canvas?: {
+        width?: number;
+        height?: number;
+        backgroundColor?: string;
+    };
 };
 export type RunEngineFunction = <State>(props: RunEngineProps<State>) => Promise<void>;
 export declare const keyboardKeys: readonly ["ControlLeft", "ControlRight", "AltLeft", "AltRight", "CapsLock", "End", "Delete", "Tab", "Space", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Numpad0", "Numpad1", "Numpad2", "Numpad3", "Numpad4", "Numpad5", "Numpad6", "Numpad7", "Numpad8", "Numpad9", "Digit0", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "KeyA", "KeyB", "KeyC", "KeyD", "KeyE", "KeyF", "KeyG", "KeyH", "KeyI", "KeyJ", "KeyK", "KeyL", "KeyM", "KeyN", "KeyO", "KeyP", "KeyQ", "KeyR", "KeyS", "KeyT", "KeyU", "KeyV", "KeyW", "KeyX", "KeyY", "KeyZ"];
@@ -131,5 +156,5 @@ export type KeyboardKeys = (typeof keyboardKeys)[number];
 export type KeyboardState = Record<KeyboardKeys, boolean>;
 export declare var Yuuna: {
     runEngine: RunEngineFunction;
+    STOP: typeof STOP;
 };
-export {};

package/lib/index.cjs

@@ -4,13 +4,6 @@ function exhaust(value) {
     throw new Error(`${value} was expected to be never.`);
 }
 
-const CONSTANTS = {
-    WINDOW: {
-        WIDTH: 960,
-        HEIGHT: 540,
-    },
-};
-
 function unsafe(input) {
     //@ts-ignore
     return input;
@@ -44,6 +37,11 @@ const createRecord = (keys, fn) => {
     return mapped;
 };
 
+// Return this from a NextStateFunction to stop the rest of a nextState
+// list from running for this event, instead of every mechanic after it
+// needing to repeat the same guard (only meaningful when nextState is an
+// array — see RunEngineProps.nextState below).
+const STOP = "Yuuna.STOP";
 const keyboardKeys = [
     "ControlLeft",
     "ControlRight",
@@ -108,7 +106,9 @@ const keyboardKeys = [
 ];
 
 let resetCanvas = null;
+let latestRunId = 0;
 const runEngine = async (props) => {
+    const runId = ++latestRunId;
     resetCanvas?.();
     const canvas = window.document.getElementById("yuuna");
     if (canvas === null) {
@@ -121,6 +121,18 @@ const runEngine = async (props) => {
     if (context === null) {
         throw new Error("Failed to get context from canvas");
     }
+    if (props.canvas?.width !== undefined) {
+        canvas.width = props.canvas.width;
+    }
+    if (props.canvas?.height !== undefined) {
+        canvas.height = props.canvas.height;
+    }
+    if (props.canvas?.backgroundColor !== undefined) {
+        canvas.style.backgroundColor = props.canvas.backgroundColor;
+    }
+    // Make the canvas focusable so keyboard input is scoped to it instead of
+    // leaking to the rest of the page (e.g. arrow keys scrolling the window).
+    canvas.tabIndex = 0;
     let state = props.initialState;
     const resources = props.resources ?? {};
     const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
@@ -137,9 +149,16 @@ const runEngine = async (props) => {
             });
         };
     }));
+    // A newer runEngine() call started while this one was still loading
+    // resources (e.g. a spritesheet) — abandon this run instead of setting
+    // up a second, orphaned render loop alongside the newer one.
+    if (runId !== latestRunId) {
+        return;
+    }
     context.imageSmoothingEnabled = false;
     function getFocusedElement(position, r) {
         const isNonInteractable = r.type === "TEXT" ||
+            r.type === "LINE" ||
             ((r.isHoverable === undefined || !r.isHoverable) &&
                 (r.isClickable === undefined || !r.isClickable));
         if (isNonInteractable) {
@@ -180,14 +199,26 @@ const runEngine = async (props) => {
         }
         exhaust(r);
     }
+    // ev.offsetX/offsetY are in CSS-rendered pixels, which differ from the
+    // canvas's drawing-buffer resolution whenever it's displayed at a
+    // different size (e.g. scaled down to fit its container). Renderable
+    // positions are all in buffer coordinates, so mouse coordinates need
+    // the same conversion to line up.
+    const getCanvasPosition = (ev) => {
+        return {
+            x: (ev.offsetX * canvas.width) / canvas.clientWidth,
+            y: (ev.offsetY * canvas.height) / canvas.clientHeight,
+        };
+    };
     const updateState = (updateFn) => {
         state = updateFn(state);
     };
+    const nextStateFns = Array.isArray(props.nextState) ? props.nextState : [props.nextState];
     let lastFrame = Date.now();
     let hoveredId = null;
     const events = [];
     canvas.addEventListener("click", (ev) => {
-        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const mouse = getCanvasPosition(ev);
         if (hoveredId === null)
             return;
         const { renderables } = props.render(state);
@@ -205,20 +236,25 @@ const runEngine = async (props) => {
     const currentState = {
         keyboardState: { ...initialState.keyboardState },
     };
-    document.addEventListener("keydown", (event) => {
+    canvas.addEventListener("keydown", (event) => {
         const pressedKey = keyboardKeys.find((key) => key === event.code);
         if (pressedKey !== undefined) {
+            // Stop tracked keys (arrows, space, ...) from also scrolling the
+            // page or triggering other browser defaults while the canvas is
+            // focused.
+            event.preventDefault();
             currentState.keyboardState[pressedKey] = true;
         }
     });
-    document.addEventListener("keyup", (event) => {
+    canvas.addEventListener("keyup", (event) => {
         const releasedKey = keyboardKeys.find((key) => key === event.code);
         if (releasedKey !== undefined) {
+            event.preventDefault();
             currentState.keyboardState[releasedKey] = false;
         }
     });
     canvas.addEventListener("mousemove", (ev) => {
-        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const mouse = getCanvasPosition(ev);
         const { renderables } = props.render(state);
         const hovered = [...renderables]
             .reverse()
@@ -235,7 +271,7 @@ const runEngine = async (props) => {
         hoveredId = hovered === undefined ? null : hovered.id ?? null;
     });
     canvas.addEventListener("mousemove", (ev) => {
-        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const mouse = getCanvasPosition(ev);
         if (hoveredId === null) {
             return;
         }
@@ -251,21 +287,30 @@ const runEngine = async (props) => {
         const delta = now - lastFrame;
         events.push({ tag: "TIME", delta: delta });
         for (const event of events) {
-            updateState((state) => props.nextState({
-                state,
-                event,
-                keyboard: iterateRecord(previousState.keyboardState, ({ key, value: previouslyPressed }) => {
-                    const isPressed = currentState.keyboardState[key];
-                    return {
-                        isPressed,
-                        isJustPressed: isPressed && !previouslyPressed,
-                        isJustReleased: !isPressed && previouslyPressed,
-                    };
-                }),
-            }));
+            const keyboard = iterateRecord(previousState.keyboardState, ({ key, value: previouslyPressed }) => {
+                const isPressed = currentState.keyboardState[key];
+                return {
+                    isPressed,
+                    isJustPressed: isPressed && !previouslyPressed,
+                    isJustReleased: !isPressed && previouslyPressed,
+                };
+            });
+            for (const nextState of nextStateFns) {
+                const result = nextState({ state, event, keyboard });
+                // STOP stops the rest of the list from running for this event,
+                // instead of every later mechanic needing to repeat the same
+                // guard. undefined just means this mechanic made no change, so
+                // the rest of the list still runs.
+                if (result === STOP) {
+                    break;
+                }
+                if (result !== undefined) {
+                    updateState(() => result);
+                }
+            }
         }
         events.splice(0, events.length);
-        context.clearRect(0, 0, CONSTANTS.WINDOW.WIDTH, CONSTANTS.WINDOW.HEIGHT);
+        context.clearRect(0, 0, canvas.width, canvas.height);
         const { cursor, renderables } = props.render(state);
         canvas.style.cursor = cursor ?? "default";
         for (const renderable of renderables) {
@@ -291,18 +336,38 @@ const runEngine = async (props) => {
                 continue;
             }
             if (renderable.type === "SPRITE") {
-                const { scale = 1, opacity = 1 } = renderable;
+                const { scale = 1, opacity = 1, flipX = false } = renderable;
                 const resource = resourceById[renderable.resourceId];
                 const frame = {
                     x: renderable.frame % resource.slices.horizontal,
-                    y: Math.floor(renderable.frame / resource.slices.vertical) %
+                    y: Math.floor(renderable.frame / resource.slices.horizontal) %
                         resource.slices.vertical,
                 };
+                const destWidth = resource.size.width * scale;
+                const destHeight = resource.size.height * scale;
                 context.globalAlpha = opacity;
-                context.drawImage(resource.image, frame.x * resource.size.width, frame.y * resource.size.height, resource.size.width, resource.size.height, renderable.position.x, renderable.position.y, resource.size.width * scale, resource.size.height * scale);
+                if (flipX) {
+                    context.save();
+                    context.translate(renderable.position.x + destWidth, renderable.position.y);
+                    context.scale(-1, 1);
+                    context.drawImage(resource.image, frame.x * resource.size.width, frame.y * resource.size.height, resource.size.width, resource.size.height, 0, 0, destWidth, destHeight);
+                    context.restore();
+                }
+                else {
+                    context.drawImage(resource.image, frame.x * resource.size.width, frame.y * resource.size.height, resource.size.width, resource.size.height, renderable.position.x, renderable.position.y, destWidth, destHeight);
+                }
                 context.globalAlpha = 1;
                 continue;
             }
+            if (renderable.type === "LINE") {
+                context.strokeStyle = renderable.color;
+                context.lineWidth = renderable.width ?? 2;
+                context.beginPath();
+                context.moveTo(renderable.from.x, renderable.from.y);
+                context.lineTo(renderable.to.x, renderable.to.y);
+                context.stroke();
+                continue;
+            }
             exhaust(renderable);
         }
         lastFrame = now;
@@ -313,5 +378,6 @@ const runEngine = async (props) => {
     };
 };
 
+exports.STOP = STOP;
 exports.runEngine = runEngine;
 //# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 import { runEngine } from "./engine/runEngine";
-export { runEngine };
+import { STOP } from "./engine/types";
+export { runEngine, STOP };

package/lib/index.js

@@ -2,13 +2,6 @@ function exhaust(value) {
     throw new Error(`${value} was expected to be never.`);
 }
 
-const CONSTANTS = {
-    WINDOW: {
-        WIDTH: 960,
-        HEIGHT: 540,
-    },
-};
-
 function unsafe(input) {
     //@ts-ignore
     return input;
@@ -42,6 +35,11 @@ const createRecord = (keys, fn) => {
     return mapped;
 };
 
+// Return this from a NextStateFunction to stop the rest of a nextState
+// list from running for this event, instead of every mechanic after it
+// needing to repeat the same guard (only meaningful when nextState is an
+// array — see RunEngineProps.nextState below).
+const STOP = "Yuuna.STOP";
 const keyboardKeys = [
     "ControlLeft",
     "ControlRight",
@@ -106,7 +104,9 @@ const keyboardKeys = [
 ];
 
 let resetCanvas = null;
+let latestRunId = 0;
 const runEngine = async (props) => {
+    const runId = ++latestRunId;
     resetCanvas?.();
     const canvas = window.document.getElementById("yuuna");
     if (canvas === null) {
@@ -119,6 +119,18 @@ const runEngine = async (props) => {
     if (context === null) {
         throw new Error("Failed to get context from canvas");
     }
+    if (props.canvas?.width !== undefined) {
+        canvas.width = props.canvas.width;
+    }
+    if (props.canvas?.height !== undefined) {
+        canvas.height = props.canvas.height;
+    }
+    if (props.canvas?.backgroundColor !== undefined) {
+        canvas.style.backgroundColor = props.canvas.backgroundColor;
+    }
+    // Make the canvas focusable so keyboard input is scoped to it instead of
+    // leaking to the rest of the page (e.g. arrow keys scrolling the window).
+    canvas.tabIndex = 0;
     let state = props.initialState;
     const resources = props.resources ?? {};
     const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
@@ -135,9 +147,16 @@ const runEngine = async (props) => {
             });
         };
     }));
+    // A newer runEngine() call started while this one was still loading
+    // resources (e.g. a spritesheet) — abandon this run instead of setting
+    // up a second, orphaned render loop alongside the newer one.
+    if (runId !== latestRunId) {
+        return;
+    }
     context.imageSmoothingEnabled = false;
     function getFocusedElement(position, r) {
         const isNonInteractable = r.type === "TEXT" ||
+            r.type === "LINE" ||
             ((r.isHoverable === undefined || !r.isHoverable) &&
                 (r.isClickable === undefined || !r.isClickable));
         if (isNonInteractable) {
@@ -178,14 +197,26 @@ const runEngine = async (props) => {
         }
         exhaust(r);
     }
+    // ev.offsetX/offsetY are in CSS-rendered pixels, which differ from the
+    // canvas's drawing-buffer resolution whenever it's displayed at a
+    // different size (e.g. scaled down to fit its container). Renderable
+    // positions are all in buffer coordinates, so mouse coordinates need
+    // the same conversion to line up.
+    const getCanvasPosition = (ev) => {
+        return {
+            x: (ev.offsetX * canvas.width) / canvas.clientWidth,
+            y: (ev.offsetY * canvas.height) / canvas.clientHeight,
+        };
+    };
     const updateState = (updateFn) => {
         state = updateFn(state);
     };
+    const nextStateFns = Array.isArray(props.nextState) ? props.nextState : [props.nextState];
     let lastFrame = Date.now();
     let hoveredId = null;
     const events = [];
     canvas.addEventListener("click", (ev) => {
-        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const mouse = getCanvasPosition(ev);
         if (hoveredId === null)
             return;
         const { renderables } = props.render(state);
@@ -203,20 +234,25 @@ const runEngine = async (props) => {
     const currentState = {
         keyboardState: { ...initialState.keyboardState },
     };
-    document.addEventListener("keydown", (event) => {
+    canvas.addEventListener("keydown", (event) => {
         const pressedKey = keyboardKeys.find((key) => key === event.code);
         if (pressedKey !== undefined) {
+            // Stop tracked keys (arrows, space, ...) from also scrolling the
+            // page or triggering other browser defaults while the canvas is
+            // focused.
+            event.preventDefault();
             currentState.keyboardState[pressedKey] = true;
         }
     });
-    document.addEventListener("keyup", (event) => {
+    canvas.addEventListener("keyup", (event) => {
         const releasedKey = keyboardKeys.find((key) => key === event.code);
         if (releasedKey !== undefined) {
+            event.preventDefault();
             currentState.keyboardState[releasedKey] = false;
         }
     });
     canvas.addEventListener("mousemove", (ev) => {
-        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const mouse = getCanvasPosition(ev);
         const { renderables } = props.render(state);
         const hovered = [...renderables]
             .reverse()
@@ -233,7 +269,7 @@ const runEngine = async (props) => {
         hoveredId = hovered === undefined ? null : hovered.id ?? null;
     });
     canvas.addEventListener("mousemove", (ev) => {
-        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const mouse = getCanvasPosition(ev);
         if (hoveredId === null) {
             return;
         }
@@ -249,21 +285,30 @@ const runEngine = async (props) => {
         const delta = now - lastFrame;
         events.push({ tag: "TIME", delta: delta });
         for (const event of events) {
-            updateState((state) => props.nextState({
-                state,
-                event,
-                keyboard: iterateRecord(previousState.keyboardState, ({ key, value: previouslyPressed }) => {
-                    const isPressed = currentState.keyboardState[key];
-                    return {
-                        isPressed,
-                        isJustPressed: isPressed && !previouslyPressed,
-                        isJustReleased: !isPressed && previouslyPressed,
-                    };
-                }),
-            }));
+            const keyboard = iterateRecord(previousState.keyboardState, ({ key, value: previouslyPressed }) => {
+                const isPressed = currentState.keyboardState[key];
+                return {
+                    isPressed,
+                    isJustPressed: isPressed && !previouslyPressed,
+                    isJustReleased: !isPressed && previouslyPressed,
+                };
+            });
+            for (const nextState of nextStateFns) {
+                const result = nextState({ state, event, keyboard });
+                // STOP stops the rest of the list from running for this event,
+                // instead of every later mechanic needing to repeat the same
+                // guard. undefined just means this mechanic made no change, so
+                // the rest of the list still runs.
+                if (result === STOP) {
+                    break;
+                }
+                if (result !== undefined) {
+                    updateState(() => result);
+                }
+            }
         }
         events.splice(0, events.length);
-        context.clearRect(0, 0, CONSTANTS.WINDOW.WIDTH, CONSTANTS.WINDOW.HEIGHT);
+        context.clearRect(0, 0, canvas.width, canvas.height);
         const { cursor, renderables } = props.render(state);
         canvas.style.cursor = cursor ?? "default";
         for (const renderable of renderables) {
@@ -289,18 +334,38 @@ const runEngine = async (props) => {
                 continue;
             }
             if (renderable.type === "SPRITE") {
-                const { scale = 1, opacity = 1 } = renderable;
+                const { scale = 1, opacity = 1, flipX = false } = renderable;
                 const resource = resourceById[renderable.resourceId];
                 const frame = {
                     x: renderable.frame % resource.slices.horizontal,
-                    y: Math.floor(renderable.frame / resource.slices.vertical) %
+                    y: Math.floor(renderable.frame / resource.slices.horizontal) %
                         resource.slices.vertical,
                 };
+                const destWidth = resource.size.width * scale;
+                const destHeight = resource.size.height * scale;
                 context.globalAlpha = opacity;
-                context.drawImage(resource.image, frame.x * resource.size.width, frame.y * resource.size.height, resource.size.width, resource.size.height, renderable.position.x, renderable.position.y, resource.size.width * scale, resource.size.height * scale);
+                if (flipX) {
+                    context.save();
+                    context.translate(renderable.position.x + destWidth, renderable.position.y);
+                    context.scale(-1, 1);
+                    context.drawImage(resource.image, frame.x * resource.size.width, frame.y * resource.size.height, resource.size.width, resource.size.height, 0, 0, destWidth, destHeight);
+                    context.restore();
+                }
+                else {
+                    context.drawImage(resource.image, frame.x * resource.size.width, frame.y * resource.size.height, resource.size.width, resource.size.height, renderable.position.x, renderable.position.y, destWidth, destHeight);
+                }
                 context.globalAlpha = 1;
                 continue;
             }
+            if (renderable.type === "LINE") {
+                context.strokeStyle = renderable.color;
+                context.lineWidth = renderable.width ?? 2;
+                context.beginPath();
+                context.moveTo(renderable.from.x, renderable.from.y);
+                context.lineTo(renderable.to.x, renderable.to.y);
+                context.stroke();
+                continue;
+            }
             exhaust(renderable);
         }
         lastFrame = now;
@@ -311,5 +376,5 @@ const runEngine = async (props) => {
     };
 };
 
-export { runEngine };
+export { STOP, runEngine };
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuuna-engine",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A lightweight, state-machine-based TypeScript game engine for quick prototypes. Runs directly in the browser.",
   "type": "module",
   "main": "./lib/index.cjs",