yuuna-engine 0.5.0 → 0.7.0

package/lib/index.cjs

@@ -149,6 +149,12 @@ const createPlaceholderSheet = (size) => {
     }
     return canvas;
 };
+// Used only when a resource declares neither `size` (see settle() below)
+// nor actually loads — there's no image to measure and nothing declared
+// to fall back to, so there's no way to know the intended dimensions at
+// all. An arbitrary, small-but-visible size, purely so the placeholder
+// still draws as *something* instead of a 0x0/NaN canvas.
+const DEFAULT_PLACEHOLDER_SIZE = { width: 64, height: 64 };
 const runEngine = async (props) => {
     const runId = ++latestRunId;
     resetCanvas?.();
@@ -172,9 +178,64 @@ const runEngine = async (props) => {
     if (props.canvas?.backgroundColor !== undefined) {
         canvas.style.backgroundColor = props.canvas.backgroundColor;
     }
+    // The canvas's *logical* resolution — the fixed space every renderable
+    // position, and every mouse/touch coordinate, is expressed in. Captured
+    // here, before pixelRatio (below) scales the actual backing buffer past
+    // it, so both stay anchored to this regardless of what pixelRatio does.
+    const logicalWidth = canvas.width;
+    const logicalHeight = canvas.height;
+    // Scales the backing buffer beyond logicalWidth/logicalHeight so text
+    // and vector shapes (fillText, arc, ...) render crisply on a HiDPI
+    // screen — most phones — instead of the same logical-resolution buffer
+    // just being stretched larger by applyResize below. `true` follows the
+    // display's own devicePixelRatio; a number sets it explicitly; leaving
+    // this unset keeps today's 1x behavior. Sprites are unaffected either
+    // way — imageSmoothingEnabled stays false below regardless — so pixel
+    // art has no reason to turn this on.
+    const pixelRatio = props.canvas?.pixelRatio === true ? window.devicePixelRatio || 1 : props.canvas?.pixelRatio ?? 1;
+    if (pixelRatio !== 1) {
+        // Resizing the backing buffer resets the 2D context's transform (and
+        // everything else about its state), so context.scale below has to
+        // come after this, not before.
+        canvas.width = logicalWidth * pixelRatio;
+        canvas.height = logicalHeight * pixelRatio;
+        canvas.style.width = `${logicalWidth}px`;
+        canvas.style.height = `${logicalHeight}px`;
+        context.scale(pixelRatio, pixelRatio);
+    }
     // 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;
+    // Stops the browser from treating a drag/pinch on the canvas as page
+    // scroll/zoom — backs up the touchstart/touchmove preventDefault calls
+    // below for gestures (e.g. a pinch starting on the canvas) preventDefault
+    // alone doesn't reliably stop.
+    canvas.style.touchAction = "none";
+    // Resizes the *display* size only (CSS width/height) — canvas.width/
+    // height above stays the fixed logical resolution every renderable's
+    // position is already expressed in, so this never needs to touch any
+    // of that math. See RunEngineProps.canvas.resize for the mode semantics.
+    const applyResize = () => {
+        const mode = props.canvas?.resize;
+        if (mode === undefined || mode === "none") {
+            return;
+        }
+        if (mode === "stretch") {
+            canvas.style.width = `${window.innerWidth}px`;
+            canvas.style.height = `${window.innerHeight}px`;
+            return;
+        }
+        const scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
+        canvas.style.width = `${canvas.width * scale}px`;
+        canvas.style.height = `${canvas.height * scale}px`;
+    };
+    applyResize();
+    window.addEventListener("resize", applyResize);
+    const requestFullscreen = () => canvas.requestFullscreen();
+    // exitFullscreen() rejects with a TypeError if nothing is fullscreen —
+    // guarded into a no-op instead, so callers don't need to track that
+    // state themselves just to call this safely.
+    const exitFullscreen = () => window.document.fullscreenElement === null ? Promise.resolve() : window.document.exitFullscreen();
     let state = props.initialState;
     const events = [];
     // Lets a caller report something that happened outside the render loop
@@ -187,24 +248,35 @@ const runEngine = async (props) => {
     const resources = props.resources ?? {};
     const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
         const image = new Image();
-        const settle = (loadedImage) => {
+        // A single, unsliced image (1x1) if unset — only an actual
+        // spritesheet needs this declared.
+        const slices = value.slices ?? { horizontal: 1, vertical: 1 };
+        // sheetSize is the whole loaded sheet's pixel dimensions — value's
+        // declared `size` if set, otherwise whatever the image actually
+        // measures once it's loaded (or DEFAULT_PLACEHOLDER_SIZE if even
+        // that isn't available, i.e. no `size` declared *and* the image
+        // failed to load too).
+        const settle = (loadedImage, sheetSize) => {
             resolve({
                 image: loadedImage,
                 size: {
-                    width: value.size.width / value.slices.horizontal,
-                    height: value.size.height / value.slices.vertical,
+                    width: sheetSize.width / slices.horizontal,
+                    height: sheetSize.height / slices.vertical,
                 },
-                slices: value.slices,
+                slices,
                 animations: value.animations ?? {},
             });
         };
         image.src = value.src;
-        image.onload = () => settle(image);
+        image.onload = () => settle(image, value.size ?? { width: image.naturalWidth, height: image.naturalHeight });
         // Missing/failed-to-load asset (see .gitignore's dist/resources/
         // note) — a placeholder sheet, sized to match what this resource
         // declared, keeps every frame/slice/animation index the example
         // already computes valid instead of drawing nothing or throwing.
-        image.onerror = () => settle(createPlaceholderSheet(value.size));
+        image.onerror = () => {
+            const placeholderSize = value.size ?? DEFAULT_PLACEHOLDER_SIZE;
+            settle(createPlaceholderSheet(placeholderSize), placeholderSize);
+        };
     }));
     const loadAudio = (src) => new Promise((resolve) => {
         const audio = new Audio(src);
@@ -281,9 +353,11 @@ 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.
+    // up a second, orphaned render loop alongside the newer one. The
+    // fullscreen functions are no-ops here since this run never gets far
+    // enough to own the canvas — the newer run's are the ones that matter.
     if (runId !== latestRunId) {
-        return { sendEvent };
+        return { sendEvent, requestFullscreen: () => Promise.resolve(), exitFullscreen: () => Promise.resolve() };
     }
     context.imageSmoothingEnabled = false;
     // An offscreen 1x1 canvas used only to resolve a CSS color string (a
@@ -563,8 +637,20 @@ const runEngine = async (props) => {
     // the same conversion to line up.
     const getCanvasPosition = (ev) => {
         return {
-            x: (ev.offsetX * canvas.width) / canvas.clientWidth,
-            y: (ev.offsetY * canvas.height) / canvas.clientHeight,
+            x: (ev.offsetX * logicalWidth) / canvas.clientWidth,
+            y: (ev.offsetY * logicalHeight) / canvas.clientHeight,
+        };
+    };
+    // Touch's equivalent of getCanvasPosition — a Touch has no offsetX/Y
+    // (that's a MouseEvent-only convenience), so this gets there manually
+    // via getBoundingClientRect instead. clientX/Y and the rect are both
+    // viewport-relative, so their difference stays correct regardless of
+    // page scroll.
+    const getTouchPosition = (touch) => {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            x: ((touch.clientX - rect.left) * logicalWidth) / canvas.clientWidth,
+            y: ((touch.clientY - rect.top) * logicalHeight) / canvas.clientHeight,
         };
     };
     const updateState = (updateFn) => {
@@ -573,8 +659,11 @@ const runEngine = async (props) => {
     const nextStateFns = Array.isArray(props.nextState) ? props.nextState : [props.nextState];
     let lastFrame = Date.now();
     let hoveredId = null;
-    const handleClick = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    // Shared by the mouse "click" listener and the touch handlers below —
+    // firing a CLICK is the same "is whatever's currently hovered
+    // isClickable" check either way; only how `mouse` was determined
+    // differs (a real click event vs. a lifted finger).
+    const fireClick = (mouse) => {
         if (hoveredId === null)
             return;
         const { renderables, camera } = renderState(state);
@@ -583,6 +672,7 @@ const runEngine = async (props) => {
             events.push({ tag: "CLICK", id: hovered.id, mouse, worldMouse: toWorldPosition(mouse, camera) });
         }
     };
+    const handleClick = (ev) => fireClick(getCanvasPosition(ev));
     canvas.addEventListener("click", handleClick);
     const initialState = {
         keyboardState: createRecord(keyboardKeys, () => false),
@@ -612,8 +702,34 @@ const runEngine = async (props) => {
         }
     };
     canvas.addEventListener("keyup", handleKeyUp);
-    const handleMouseMoveHover = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    // mouseButton state (see NextStateProps.mouseButton) — a double-buffer
+    // exactly like keyboardState above, just for the primary mouse button.
+    let previousMouseButtonState = { isPressed: false };
+    const currentMouseButtonState = { isPressed: false };
+    const handleMouseDown = (event) => {
+        // Left/primary button only — matching CLICK, which already only
+        // ever fires for it.
+        if (event.button === 0) {
+            currentMouseButtonState.isPressed = true;
+        }
+    };
+    canvas.addEventListener("mousedown", handleMouseDown);
+    const handleMouseUp = (event) => {
+        if (event.button === 0) {
+            currentMouseButtonState.isPressed = false;
+        }
+    };
+    // On window rather than the canvas — so releasing the button after
+    // having dragged off the canvas while still holding it down still
+    // clears isPressed, instead of leaving it stuck true forever.
+    window.addEventListener("mouseup", handleMouseUp);
+    // Shared by mousemove and the touch handlers below — updates hoveredId
+    // from a canvas position and fires HOVER_IN/HOVER_OUT as whatever's
+    // underneath it changes. Touch has no ambient hover the way a mouse
+    // does (nothing is "hovered" until a finger actually touches down), but
+    // feeding a touch's position through this the same as the mouse's is
+    // what lets an isHoverable renderable react to a tap/drag at all.
+    const updateHover = (mouse) => {
         const { renderables, camera } = renderState(state);
         const worldMouse = toWorldPosition(mouse, camera);
         const hovered = [...renderables]
@@ -630,9 +746,9 @@ const runEngine = async (props) => {
         }
         hoveredId = hovered === undefined ? null : hovered.id ?? null;
     };
+    const handleMouseMoveHover = (ev) => updateHover(getCanvasPosition(ev));
     canvas.addEventListener("mousemove", handleMouseMoveHover);
-    const handleMouseMoveTracking = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    const updateTracking = (mouse) => {
         if (hoveredId === null) {
             return;
         }
@@ -642,13 +758,17 @@ const runEngine = async (props) => {
             events.push({ tag: "MOUSE_MOVE", mouse, worldMouse: toWorldPosition(mouse, camera), id: hovered.id });
         }
     };
+    const handleMouseMoveTracking = (ev) => updateTracking(getCanvasPosition(ev));
     canvas.addEventListener("mousemove", handleMouseMoveTracking);
     // No further mousemove fires once the mouse is off the canvas, so this
     // is also the only chance to report a HOVER_OUT for whatever was
     // hovered when it left — otherwise that hover would just dangle,
     // never explicitly ended.
-    const handleMouseLeave = (ev) => {
-        const mouse = getCanvasPosition(ev);
+    // Shared by mouseleave and the touch handlers below — clears whatever's
+    // hovered (firing HOVER_OUT for it) without a HOVER_IN taking its
+    // place. Returns worldMouse so callers that need it (MOUSE_LEAVE below)
+    // don't have to call renderState() a second time just to get it.
+    const clearHover = (mouse) => {
         const { renderables, camera } = renderState(state);
         const worldMouse = toWorldPosition(mouse, camera);
         if (hoveredId !== null) {
@@ -658,9 +778,79 @@ const runEngine = async (props) => {
             }
         }
         hoveredId = null;
+        return worldMouse;
+    };
+    const handleMouseLeave = (ev) => {
+        const mouse = getCanvasPosition(ev);
+        const worldMouse = clearHover(mouse);
         events.push({ tag: "MOUSE_LEAVE", mouse, worldMouse });
     };
     canvas.addEventListener("mouseleave", handleMouseLeave);
+    // Translates touch into the same HOVER_IN/HOVER_OUT/MOUSE_MOVE/CLICK
+    // events mouse input already produces (via updateHover/updateTracking/
+    // fireClick/clearHover above), so existing game code written against
+    // those events works on a touchscreen with no changes of its own.
+    // Single-touch only — touches[0]/changedTouches[0] — the same "one
+    // active pointer" model mouse input already assumes; a second finger is
+    // ignored rather than tracked as its own pointer.
+    //
+    // preventDefault on start/move keeps a drag/tap on the canvas from also
+    // scrolling, pinch-zooming, or triggering pull-to-refresh — the browser
+    // gestures a touchscreen normally reserves that space for; { passive:
+    // false } is what makes preventDefault actually take effect here.
+    const handleTouchStart = (ev) => {
+        ev.preventDefault();
+        const touch = ev.touches[0];
+        if (touch === undefined)
+            return;
+        currentMouseButtonState.isPressed = true;
+        const mouse = getTouchPosition(touch);
+        updateHover(mouse);
+        updateTracking(mouse);
+    };
+    canvas.addEventListener("touchstart", handleTouchStart, { passive: false });
+    const handleTouchMove = (ev) => {
+        ev.preventDefault();
+        const touch = ev.touches[0];
+        if (touch === undefined)
+            return;
+        const mouse = getTouchPosition(touch);
+        updateHover(mouse);
+        updateTracking(mouse);
+    };
+    canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+    // A lifted finger both releases (mirroring mouseup) and clicks
+    // (mirroring the browser's own click-after-mouseup) — touch has no
+    // separate "up" and "click" events of its own the way mouse does, so
+    // both happen here together, in that order. hover is updated once more
+    // first so a plain tap (touchstart immediately followed by touchend,
+    // with no touchmove between them to have already done this) still
+    // fires CLICK against whatever's actually under it; hover is then
+    // cleared, since nothing's left touching it once the finger lifts.
+    const handleTouchEnd = (ev) => {
+        ev.preventDefault();
+        currentMouseButtonState.isPressed = false;
+        const touch = ev.changedTouches[0];
+        if (touch === undefined)
+            return;
+        const mouse = getTouchPosition(touch);
+        updateHover(mouse);
+        fireClick(mouse);
+        clearHover(mouse);
+    };
+    canvas.addEventListener("touchend", handleTouchEnd, { passive: false });
+    // A cancelled touch (e.g. an incoming call interrupting the page, or
+    // the OS deciding it's a system gesture instead) never fires touchend —
+    // handled the same as lifting the finger, minus the click, since
+    // there's no tap to speak of once the touch itself has been cancelled.
+    const handleTouchCancel = (ev) => {
+        currentMouseButtonState.isPressed = false;
+        const touch = ev.changedTouches[0];
+        if (touch === undefined)
+            return;
+        clearHover(getTouchPosition(touch));
+    };
+    canvas.addEventListener("touchcancel", handleTouchCancel, { passive: false });
     // Tab switches are a document-level concern (visibilitychange), not
     // something that ever reaches the canvas itself the way mouse/keyboard
     // events do.
@@ -668,6 +858,17 @@ const runEngine = async (props) => {
         events.push({ tag: window.document.hidden ? "TAB_BLUR" : "TAB_FOCUS" });
     };
     window.document.addEventListener("visibilitychange", handleVisibilityChange);
+    // Fullscreen is a document-level concern too, and fires for every way
+    // fullscreen can change — the requestFullscreen()/exitFullscreen()
+    // above, but also things neither of those causes directly, like the
+    // user pressing Esc. Re-running applyResize() here (rather than relying
+    // solely on the "resize" listener) covers browsers that don't also fire
+    // a window resize when fullscreen is toggled.
+    const handleFullscreenChange = () => {
+        events.push({ tag: "FULLSCREEN_CHANGE", isFullscreen: window.document.fullscreenElement === canvas });
+        applyResize();
+    };
+    window.document.addEventListener("fullscreenchange", handleFullscreenChange);
     context.imageSmoothingEnabled = false;
     // Scale is a canvas transform around the renderable's anchor, applied
     // before its type-specific drawing runs below — everything drawn under
@@ -781,11 +982,17 @@ const runEngine = async (props) => {
                     isJustReleased: !isPressed && previouslyPressed,
                 };
             });
+            const mouseButton = {
+                isPressed: currentMouseButtonState.isPressed,
+                isJustPressed: currentMouseButtonState.isPressed && !previousMouseButtonState.isPressed,
+                isJustReleased: !currentMouseButtonState.isPressed && previousMouseButtonState.isPressed,
+            };
             for (const nextState of nextStateFns) {
                 const result = nextState({
                     state,
                     event,
                     keyboard,
+                    mouseButton,
                     playSound,
                     playMusic,
                     pauseMusic,
@@ -805,7 +1012,7 @@ const runEngine = async (props) => {
             }
         }
         events.splice(0, events.length);
-        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.clearRect(0, 0, logicalWidth, logicalHeight);
         const { cursor, renderables } = renderState(state);
         canvas.style.cursor = cursor ?? "default";
         for (const renderable of renderables) {
@@ -838,12 +1045,11 @@ const runEngine = async (props) => {
                 continue;
             }
             if (renderable.type === "SPRITE") {
-                const { opacity = 1, flipX = false, modulate, swapColors } = renderable;
+                const { opacity = 1, flipX = false, frame: frameIndex = 0, modulate, swapColors } = renderable;
                 const resource = resourceById[renderable.resourceId];
                 const frame = {
-                    x: renderable.frame % resource.slices.horizontal,
-                    y: Math.floor(renderable.frame / resource.slices.horizontal) %
-                        resource.slices.vertical,
+                    x: frameIndex % resource.slices.horizontal,
+                    y: Math.floor(frameIndex / resource.slices.horizontal) % resource.slices.vertical,
                 };
                 const source = {
                     x: frame.x * resource.size.width,
@@ -863,7 +1069,7 @@ const runEngine = async (props) => {
                 let image = resource.image;
                 let imageSource = source;
                 if (swapColors !== undefined && swapColors.length > 0) {
-                    image = swappedSpriteFrame(renderable.resourceId, renderable.frame, image, imageSource, swapColors);
+                    image = swappedSpriteFrame(renderable.resourceId, frameIndex, image, imageSource, swapColors);
                     imageSource = { x: 0, y: 0, width: source.width, height: source.height };
                 }
                 if (modulate !== undefined) {
@@ -917,6 +1123,7 @@ const runEngine = async (props) => {
         }
         lastFrame = now;
         previousState.keyboardState = { ...currentState.keyboardState };
+        previousMouseButtonState = { ...currentMouseButtonState };
     }, 0);
     resetCanvas = () => {
         clearInterval(intervalId);
@@ -940,16 +1147,70 @@ const runEngine = async (props) => {
         canvas.removeEventListener("click", handleClick);
         canvas.removeEventListener("keydown", handleKeyDown);
         canvas.removeEventListener("keyup", handleKeyUp);
+        canvas.removeEventListener("mousedown", handleMouseDown);
         canvas.removeEventListener("mousemove", handleMouseMoveHover);
         canvas.removeEventListener("mousemove", handleMouseMoveTracking);
         canvas.removeEventListener("mouseleave", handleMouseLeave);
+        canvas.removeEventListener("touchstart", handleTouchStart);
+        canvas.removeEventListener("touchmove", handleTouchMove);
+        canvas.removeEventListener("touchend", handleTouchEnd);
+        canvas.removeEventListener("touchcancel", handleTouchCancel);
+        // On window, not the canvas — see where it's added above for why.
+        window.removeEventListener("mouseup", handleMouseUp);
         // This one's on `document`, not the canvas — same reasoning as above,
         // just doubly true since `document` isn't even scoped to this canvas.
         window.document.removeEventListener("visibilitychange", handleVisibilityChange);
+        window.document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        // Same pile-up risk as the canvas listeners above, but on `window`.
+        window.removeEventListener("resize", applyResize);
     };
-    return { sendEvent };
+    return { sendEvent, requestFullscreen, exitFullscreen };
 };
 
+// One factory per Renderable variant — literally just `{ type: "X",
+// ...props }`, so `sprite({...})` (or `Yuuna.sprite({...})` in the
+// browser bundle/playground) reads the same as writing the object
+// literal by hand, minus needing to get `type` right yourself.
+// Deliberately not a place defaults live: besides SpriteRenderable.frame
+// (optional at the type level, see types.ts — the engine itself defaults
+// it to 0), each factory still requires whatever its Renderable type
+// still requires.
+const rectangle = (props) => ({
+    type: "RECTANGLE",
+    ...props,
+});
+const circle = (props) => ({
+    type: "CIRCLE",
+    ...props,
+});
+const text = (props) => ({
+    type: "TEXT",
+    ...props,
+});
+const sprite = (props) => ({
+    type: "SPRITE",
+    ...props,
+});
+const animatedSprite = (props) => ({
+    type: "ANIMATED_SPRITE",
+    ...props,
+});
+const line = (props) => ({
+    type: "LINE",
+    ...props,
+});
+const group = (props) => ({
+    type: "GROUP",
+    ...props,
+});
+
 exports.STOP = STOP;
+exports.animatedSprite = animatedSprite;
+exports.circle = circle;
+exports.group = group;
+exports.line = line;
+exports.rectangle = rectangle;
 exports.runEngine = runEngine;
+exports.sprite = sprite;
+exports.text = text;
 //# 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,4 +1,5 @@
 import { runEngine } from "./engine/runEngine";
 import { STOP } from "./engine/types";
-export { runEngine, STOP };
+import { animatedSprite, circle, group, line, rectangle, sprite, text } from "./engine/renderables";
+export { runEngine, STOP, rectangle, circle, text, sprite, animatedSprite, line, group };
 export type { NextStateFunction, NextStateProps, Renderable, GameEvent, CustomGameEvent, } from "./engine/types";