yuuna-engine 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lucina de Oliveira (lucy-dot-exe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,96 @@
+<p align="center">
+  <img src="dist/resources/yuuna.png" alt="Yuuna" width="120" height="120" />
+</p>
+
+# Yuuna
+
+A lightweight, state-machine-based TypeScript game engine built for quick
+prototypes — drop it into a page and it's running, no editor or build step
+required. You describe your game as a `state`, a `render(state)` function,
+and a `nextState({ state, event, keyboard })` function — Yuuna owns the
+render loop, input handling, and canvas drawing. It's scratch paper for game
+ideas, not a replacement for Godot or Unity.
+
+## Install
+
+```sh
+npm install yuuna-engine
+```
+
+## Quick start
+
+Add a canvas with `id="yuuna"` to your page:
+
+```html
+<canvas id="yuuna" width="960" height="540"></canvas>
+```
+
+Then describe your game as state + render + nextState:
+
+```ts
+import { runEngine } from "yuuna-engine";
+
+type GameState = { cookies: number };
+
+runEngine<GameState>({
+  initialState: { cookies: 0 },
+
+  render: (state) => ({
+    renderables: [
+      {
+        type: "TEXT",
+        text: `${state.cookies} cookies`,
+        color: "black",
+        position: { x: 100, y: 50 },
+      },
+      {
+        type: "CIRCLE",
+        id: "cookie",
+        isClickable: true,
+        color: "brown",
+        position: { x: 50, y: 50 },
+        radius: 25,
+      },
+    ],
+  }),
+
+  nextState: ({ state, event }) => {
+    if (event.tag === "CLICK" && event.id === "cookie") {
+      return { cookies: state.cookies + 1 };
+    }
+
+    return state;
+  },
+});
+```
+
+## Concepts
+
+- **Renderables** — declarative shapes drawn each frame: `RECTANGLE`,
+  `CIRCLE`, `TEXT`, and `SPRITE`. Give one an `id` plus `isClickable` /
+  `isHoverable` / `trackMouseMovement` to make it interactive.
+- **Events** — your `nextState` function receives one `GameEvent` per call:
+  `TIME` (frame tick with `delta`), `CLICK`, `HOVER_IN`, `HOVER_OUT`, or
+  `MOUSE_MOVE`.
+- **Keyboard** — `nextState` also receives a `keyboard` map keyed by
+  `KeyCode`-style keys (e.g. `"KeyW"`, `"ArrowLeft"`, `"Space"`), each with
+  `isPressed` / `isJustPressed` / `isJustReleased`.
+- **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`.
+
+## Development
+
+```sh
+yarn install
+yarn build   # builds lib/ (npm package) and dist/bundle.js (landing page)
+yarn watch   # rebuild on change
+```
+
+`dist/index.html` is the landing page — it loads `dist/bundle.js` in the
+browser via a global `Yuuna` object and embeds a live Monaco editor so
+visitors can edit and run a game directly on the page.
+
+## License
+
+MIT © [lucy-dot-exe](https://github.com/lucy-dot-exe)

package/lib/engine/runEngine.d.ts

@@ -0,0 +1,2 @@
+import { RunEngineFunction } from "./types";
+export declare const runEngine: RunEngineFunction;

package/lib/engine/types.d.ts

@@ -0,0 +1,135 @@
+export type RectangleRenderable = {
+    type: "RECTANGLE";
+    position: {
+        x: number;
+        y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+    color: string;
+    id?: string;
+    isClickable?: boolean;
+    isHoverable?: boolean;
+    trackMouseMovement?: boolean;
+};
+export type CircleRenderable = {
+    type: "CIRCLE";
+    position: {
+        x: number;
+        y: number;
+    };
+    radius: number;
+    color: string;
+    id?: string;
+    isClickable?: boolean;
+    isHoverable?: boolean;
+    trackMouseMovement?: boolean;
+};
+export type TextRenderable = {
+    type: "TEXT";
+    text: string;
+    color: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    align?: {
+        x: "left" | "center" | "right";
+        y: "bottom" | "middle" | "top";
+    };
+    id?: string;
+    isClickable?: boolean;
+    isHoverable?: boolean;
+    trackMouseMovement?: boolean;
+};
+export type SpriteRenderable = {
+    type: "SPRITE";
+    position: {
+        x: number;
+        y: number;
+    };
+    resourceId: string;
+    frame: number;
+    scale?: number;
+    opacity?: number;
+    id?: string;
+    isClickable?: boolean;
+    isHoverable?: boolean;
+    trackMouseMovement?: boolean;
+};
+export type Renderable = RectangleRenderable | CircleRenderable | SpriteRenderable | TextRenderable;
+export type TimeEvent = {
+    tag: "TIME";
+    delta: number;
+};
+export type ClickEvent = {
+    tag: "CLICK";
+    id?: string;
+    mouse: {
+        x: number;
+        y: number;
+    };
+};
+export type HoverInEvent = {
+    tag: "HOVER_IN";
+    id?: string;
+    mouse: {
+        x: number;
+        y: number;
+    };
+};
+export type HoverOutEvent = {
+    tag: "HOVER_OUT";
+    id?: string;
+    mouse: {
+        x: number;
+        y: number;
+    };
+};
+export type MouseMoveEvent = {
+    tag: "MOUSE_MOVE";
+    id?: string;
+    mouse: {
+        x: number;
+        y: number;
+    };
+};
+export type GameEvent = TimeEvent | ClickEvent | HoverInEvent | HoverOutEvent | MouseMoveEvent;
+type NextStateProps<State> = {
+    state: State;
+    event: GameEvent;
+    keyboard: Record<KeyboardKeys, {
+        isPressed: boolean;
+        isJustPressed: boolean;
+        isJustReleased: boolean;
+    }>;
+};
+export type RunEngineProps<State> = {
+    initialState: State;
+    render: (state: State) => {
+        cursor?: "default" | "pointer";
+        renderables: Renderable[];
+    };
+    nextState: (props: NextStateProps<State>) => State;
+    resources?: Record<string, {
+        src: string;
+        size: {
+            width: number;
+            height: number;
+        };
+        slices: {
+            vertical: number;
+            horizontal: number;
+        };
+    }>;
+};
+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"];
+export type KeyboardKeys = (typeof keyboardKeys)[number];
+export type KeyboardState = Record<KeyboardKeys, boolean>;
+export declare var Yuuna: {
+    runEngine: RunEngineFunction;
+};
+export {};

package/lib/index.cjs

@@ -0,0 +1,317 @@
+'use strict';
+
+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;
+}
+
+function getKeys(object) {
+    return unsafe(Object.keys(object));
+}
+
+async function iterateRecordAsync(record, fn) {
+    const mapped = unsafe({});
+    const $mappings = getKeys(record).map(async (key) => {
+        mapped[key] = await fn({ key, value: record[key] });
+    });
+    await Promise.all($mappings);
+    return mapped;
+}
+function iterateRecord(record, fn) {
+    const mapped = unsafe({});
+    getKeys(record).forEach((key) => {
+        mapped[key] = fn({ key, value: record[key] });
+    });
+    return mapped;
+}
+
+const createRecord = (keys, fn) => {
+    const mapped = unsafe({});
+    keys.forEach((key) => {
+        mapped[key] = fn(key);
+    });
+    return mapped;
+};
+
+const keyboardKeys = [
+    "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",
+];
+
+let resetCanvas = null;
+const runEngine = async (props) => {
+    resetCanvas?.();
+    const canvas = window.document.getElementById("yuuna");
+    if (canvas === null) {
+        throw new Error('No HTML element found with id "yuuna"');
+    }
+    if (!(canvas instanceof HTMLCanvasElement)) {
+        throw new Error('No Canvas element found with id "yuuna"');
+    }
+    const context = canvas.getContext("2d");
+    if (context === null) {
+        throw new Error("Failed to get context from canvas");
+    }
+    let state = props.initialState;
+    const resources = props.resources ?? {};
+    const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
+        const image = new Image();
+        image.src = value.src;
+        image.onload = function () {
+            resolve({
+                image,
+                size: {
+                    width: value.size.width / value.slices.horizontal,
+                    height: value.size.height / value.slices.vertical,
+                },
+                slices: value.slices,
+            });
+        };
+    }));
+    context.imageSmoothingEnabled = false;
+    function getFocusedElement(position, r) {
+        const isNonInteractable = r.type === "TEXT" ||
+            ((r.isHoverable === undefined || !r.isHoverable) &&
+                (r.isClickable === undefined || !r.isClickable));
+        if (isNonInteractable) {
+            return false;
+        }
+        if (r.type === "CIRCLE") {
+            const delta = {
+                x: Math.abs(position.x - r.position.x),
+                y: Math.abs(position.y - r.position.y),
+            };
+            const distance = Math.sqrt(delta.x * delta.x + delta.y * delta.y);
+            const isHovered = distance < r.radius;
+            return isHovered;
+        }
+        if (r.type === "RECTANGLE") {
+            const topLeft = { x: r.position.x, y: r.position.y };
+            const bottomRight = {
+                x: r.position.x + r.size.width,
+                y: r.position.y + r.size.height,
+            };
+            const isInsideX = position.x > topLeft.x && position.x < bottomRight.x;
+            const isInsideY = position.y > topLeft.y && position.y < bottomRight.y;
+            const isHovered = isInsideX && isInsideY;
+            return isHovered;
+        }
+        if (r.type === "SPRITE") {
+            const topLeft = { x: r.position.x, y: r.position.y };
+            const resource = resourceById[r.resourceId];
+            const { scale = 1 } = r;
+            const bottomRight = {
+                x: r.position.x + resource.size.width * scale,
+                y: r.position.y + resource.size.height * scale,
+            };
+            const isInsideX = position.x > topLeft.x && position.x < bottomRight.x;
+            const isInsideY = position.y > topLeft.y && position.y < bottomRight.y;
+            const isHovered = isInsideX && isInsideY;
+            return isHovered;
+        }
+        exhaust(r);
+    }
+    const updateState = (updateFn) => {
+        state = updateFn(state);
+    };
+    let lastFrame = Date.now();
+    let hoveredId = null;
+    const events = [];
+    canvas.addEventListener("click", (ev) => {
+        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        if (hoveredId === null)
+            return;
+        const { renderables } = props.render(state);
+        const hovered = renderables.find((e) => e.id === hoveredId);
+        if (hovered !== undefined && hovered.isClickable) {
+            events.push({ tag: "CLICK", id: hovered.id, mouse });
+        }
+    });
+    const initialState = {
+        keyboardState: createRecord(keyboardKeys, () => false),
+    };
+    let previousState = {
+        keyboardState: { ...initialState.keyboardState },
+    };
+    const currentState = {
+        keyboardState: { ...initialState.keyboardState },
+    };
+    document.addEventListener("keydown", (event) => {
+        const pressedKey = keyboardKeys.find((key) => key === event.code);
+        if (pressedKey !== undefined) {
+            currentState.keyboardState[pressedKey] = true;
+        }
+    });
+    document.addEventListener("keyup", (event) => {
+        const releasedKey = keyboardKeys.find((key) => key === event.code);
+        if (releasedKey !== undefined) {
+            currentState.keyboardState[releasedKey] = false;
+        }
+    });
+    canvas.addEventListener("mousemove", (ev) => {
+        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const { renderables } = props.render(state);
+        const hovered = [...renderables]
+            .reverse()
+            .find((r) => getFocusedElement(mouse, r));
+        if (hovered !== undefined && hovered.isHoverable) {
+            events.push({ tag: "HOVER_IN", id: hovered.id, mouse });
+        }
+        if (hoveredId !== null) {
+            const lastHovered = renderables.find((r) => r.id === hoveredId);
+            if (lastHovered !== undefined && lastHovered.id !== hovered?.id) {
+                events.push({ tag: "HOVER_OUT", id: lastHovered.id, mouse });
+            }
+        }
+        hoveredId = hovered === undefined ? null : hovered.id ?? null;
+    });
+    canvas.addEventListener("mousemove", (ev) => {
+        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        if (hoveredId === null) {
+            return;
+        }
+        const { renderables } = props.render(state);
+        const hovered = renderables.find((r) => r.id === hoveredId);
+        if (hovered !== undefined && hovered.trackMouseMovement) {
+            events.push({ tag: "MOUSE_MOVE", mouse, id: hovered.id });
+        }
+    });
+    context.imageSmoothingEnabled = false;
+    const intervalId = setInterval(() => {
+        const now = Date.now();
+        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,
+                    };
+                }),
+            }));
+        }
+        events.splice(0, events.length);
+        context.clearRect(0, 0, CONSTANTS.WINDOW.WIDTH, CONSTANTS.WINDOW.HEIGHT);
+        const { cursor, renderables } = props.render(state);
+        canvas.style.cursor = cursor ?? "default";
+        for (const renderable of renderables) {
+            if (renderable.type === "RECTANGLE") {
+                context.fillStyle = renderable.color;
+                context.fillRect(renderable.position.x, renderable.position.y, renderable.size.width, renderable.size.height);
+                continue;
+            }
+            if (renderable.type === "CIRCLE") {
+                context.fillStyle = renderable.color;
+                context.beginPath();
+                context.arc(renderable.position.x, renderable.position.y, renderable.radius, 0, 2 * Math.PI);
+                context.fill();
+                continue;
+            }
+            if (renderable.type === "TEXT") {
+                const { color, position: { x, y }, text, align, } = renderable;
+                context.fillStyle = color;
+                context.font = "30px Arial";
+                context.textAlign = align?.x ?? "left";
+                context.textBaseline = align?.y ?? "top";
+                context.fillText(text, x, y);
+                continue;
+            }
+            if (renderable.type === "SPRITE") {
+                const { scale = 1, opacity = 1 } = renderable;
+                const resource = resourceById[renderable.resourceId];
+                const frame = {
+                    x: renderable.frame % resource.slices.horizontal,
+                    y: Math.floor(renderable.frame / resource.slices.vertical) %
+                        resource.slices.vertical,
+                };
+                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);
+                context.globalAlpha = 1;
+                continue;
+            }
+            exhaust(renderable);
+        }
+        lastFrame = now;
+        previousState.keyboardState = { ...currentState.keyboardState };
+    }, 0);
+    resetCanvas = () => {
+        clearInterval(intervalId);
+    };
+};
+
+exports.runEngine = runEngine;
+//# sourceMappingURL=index.cjs.map

package/lib/index.cjs.map

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

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,315 @@
+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;
+}
+
+function getKeys(object) {
+    return unsafe(Object.keys(object));
+}
+
+async function iterateRecordAsync(record, fn) {
+    const mapped = unsafe({});
+    const $mappings = getKeys(record).map(async (key) => {
+        mapped[key] = await fn({ key, value: record[key] });
+    });
+    await Promise.all($mappings);
+    return mapped;
+}
+function iterateRecord(record, fn) {
+    const mapped = unsafe({});
+    getKeys(record).forEach((key) => {
+        mapped[key] = fn({ key, value: record[key] });
+    });
+    return mapped;
+}
+
+const createRecord = (keys, fn) => {
+    const mapped = unsafe({});
+    keys.forEach((key) => {
+        mapped[key] = fn(key);
+    });
+    return mapped;
+};
+
+const keyboardKeys = [
+    "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",
+];
+
+let resetCanvas = null;
+const runEngine = async (props) => {
+    resetCanvas?.();
+    const canvas = window.document.getElementById("yuuna");
+    if (canvas === null) {
+        throw new Error('No HTML element found with id "yuuna"');
+    }
+    if (!(canvas instanceof HTMLCanvasElement)) {
+        throw new Error('No Canvas element found with id "yuuna"');
+    }
+    const context = canvas.getContext("2d");
+    if (context === null) {
+        throw new Error("Failed to get context from canvas");
+    }
+    let state = props.initialState;
+    const resources = props.resources ?? {};
+    const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
+        const image = new Image();
+        image.src = value.src;
+        image.onload = function () {
+            resolve({
+                image,
+                size: {
+                    width: value.size.width / value.slices.horizontal,
+                    height: value.size.height / value.slices.vertical,
+                },
+                slices: value.slices,
+            });
+        };
+    }));
+    context.imageSmoothingEnabled = false;
+    function getFocusedElement(position, r) {
+        const isNonInteractable = r.type === "TEXT" ||
+            ((r.isHoverable === undefined || !r.isHoverable) &&
+                (r.isClickable === undefined || !r.isClickable));
+        if (isNonInteractable) {
+            return false;
+        }
+        if (r.type === "CIRCLE") {
+            const delta = {
+                x: Math.abs(position.x - r.position.x),
+                y: Math.abs(position.y - r.position.y),
+            };
+            const distance = Math.sqrt(delta.x * delta.x + delta.y * delta.y);
+            const isHovered = distance < r.radius;
+            return isHovered;
+        }
+        if (r.type === "RECTANGLE") {
+            const topLeft = { x: r.position.x, y: r.position.y };
+            const bottomRight = {
+                x: r.position.x + r.size.width,
+                y: r.position.y + r.size.height,
+            };
+            const isInsideX = position.x > topLeft.x && position.x < bottomRight.x;
+            const isInsideY = position.y > topLeft.y && position.y < bottomRight.y;
+            const isHovered = isInsideX && isInsideY;
+            return isHovered;
+        }
+        if (r.type === "SPRITE") {
+            const topLeft = { x: r.position.x, y: r.position.y };
+            const resource = resourceById[r.resourceId];
+            const { scale = 1 } = r;
+            const bottomRight = {
+                x: r.position.x + resource.size.width * scale,
+                y: r.position.y + resource.size.height * scale,
+            };
+            const isInsideX = position.x > topLeft.x && position.x < bottomRight.x;
+            const isInsideY = position.y > topLeft.y && position.y < bottomRight.y;
+            const isHovered = isInsideX && isInsideY;
+            return isHovered;
+        }
+        exhaust(r);
+    }
+    const updateState = (updateFn) => {
+        state = updateFn(state);
+    };
+    let lastFrame = Date.now();
+    let hoveredId = null;
+    const events = [];
+    canvas.addEventListener("click", (ev) => {
+        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        if (hoveredId === null)
+            return;
+        const { renderables } = props.render(state);
+        const hovered = renderables.find((e) => e.id === hoveredId);
+        if (hovered !== undefined && hovered.isClickable) {
+            events.push({ tag: "CLICK", id: hovered.id, mouse });
+        }
+    });
+    const initialState = {
+        keyboardState: createRecord(keyboardKeys, () => false),
+    };
+    let previousState = {
+        keyboardState: { ...initialState.keyboardState },
+    };
+    const currentState = {
+        keyboardState: { ...initialState.keyboardState },
+    };
+    document.addEventListener("keydown", (event) => {
+        const pressedKey = keyboardKeys.find((key) => key === event.code);
+        if (pressedKey !== undefined) {
+            currentState.keyboardState[pressedKey] = true;
+        }
+    });
+    document.addEventListener("keyup", (event) => {
+        const releasedKey = keyboardKeys.find((key) => key === event.code);
+        if (releasedKey !== undefined) {
+            currentState.keyboardState[releasedKey] = false;
+        }
+    });
+    canvas.addEventListener("mousemove", (ev) => {
+        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        const { renderables } = props.render(state);
+        const hovered = [...renderables]
+            .reverse()
+            .find((r) => getFocusedElement(mouse, r));
+        if (hovered !== undefined && hovered.isHoverable) {
+            events.push({ tag: "HOVER_IN", id: hovered.id, mouse });
+        }
+        if (hoveredId !== null) {
+            const lastHovered = renderables.find((r) => r.id === hoveredId);
+            if (lastHovered !== undefined && lastHovered.id !== hovered?.id) {
+                events.push({ tag: "HOVER_OUT", id: lastHovered.id, mouse });
+            }
+        }
+        hoveredId = hovered === undefined ? null : hovered.id ?? null;
+    });
+    canvas.addEventListener("mousemove", (ev) => {
+        const mouse = { x: ev.offsetX, y: ev.offsetY };
+        if (hoveredId === null) {
+            return;
+        }
+        const { renderables } = props.render(state);
+        const hovered = renderables.find((r) => r.id === hoveredId);
+        if (hovered !== undefined && hovered.trackMouseMovement) {
+            events.push({ tag: "MOUSE_MOVE", mouse, id: hovered.id });
+        }
+    });
+    context.imageSmoothingEnabled = false;
+    const intervalId = setInterval(() => {
+        const now = Date.now();
+        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,
+                    };
+                }),
+            }));
+        }
+        events.splice(0, events.length);
+        context.clearRect(0, 0, CONSTANTS.WINDOW.WIDTH, CONSTANTS.WINDOW.HEIGHT);
+        const { cursor, renderables } = props.render(state);
+        canvas.style.cursor = cursor ?? "default";
+        for (const renderable of renderables) {
+            if (renderable.type === "RECTANGLE") {
+                context.fillStyle = renderable.color;
+                context.fillRect(renderable.position.x, renderable.position.y, renderable.size.width, renderable.size.height);
+                continue;
+            }
+            if (renderable.type === "CIRCLE") {
+                context.fillStyle = renderable.color;
+                context.beginPath();
+                context.arc(renderable.position.x, renderable.position.y, renderable.radius, 0, 2 * Math.PI);
+                context.fill();
+                continue;
+            }
+            if (renderable.type === "TEXT") {
+                const { color, position: { x, y }, text, align, } = renderable;
+                context.fillStyle = color;
+                context.font = "30px Arial";
+                context.textAlign = align?.x ?? "left";
+                context.textBaseline = align?.y ?? "top";
+                context.fillText(text, x, y);
+                continue;
+            }
+            if (renderable.type === "SPRITE") {
+                const { scale = 1, opacity = 1 } = renderable;
+                const resource = resourceById[renderable.resourceId];
+                const frame = {
+                    x: renderable.frame % resource.slices.horizontal,
+                    y: Math.floor(renderable.frame / resource.slices.vertical) %
+                        resource.slices.vertical,
+                };
+                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);
+                context.globalAlpha = 1;
+                continue;
+            }
+            exhaust(renderable);
+        }
+        lastFrame = now;
+        previousState.keyboardState = { ...currentState.keyboardState };
+    }, 0);
+    resetCanvas = () => {
+        clearInterval(intervalId);
+    };
+};
+
+export { runEngine };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

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

package/lib/utils/Position.d.ts

@@ -0,0 +1,4 @@
+export type Position = {
+    x: number;
+    y: number;
+};

package/lib/utils/byId.d.ts

@@ -0,0 +1,3 @@
+export declare function byId<T extends {
+    id: string;
+}>(id: string): (value: T) => boolean;

package/lib/utils/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const CONSTANTS: {
+    WINDOW: {
+        WIDTH: number;
+        HEIGHT: number;
+    };
+};

package/lib/utils/createRecord.d.ts

@@ -0,0 +1 @@
+export declare const createRecord: <Key extends string, T>(keys: readonly Key[], fn: (key: Key) => T) => Record<Key, T>;

package/lib/utils/exhaust.d.ts

@@ -0,0 +1 @@
+export declare function exhaust(value: never): never;

package/lib/utils/getKeys.d.ts

@@ -0,0 +1 @@
+export declare function getKeys<Keys extends string>(object: Record<Keys, any>): Keys[];

package/lib/utils/iterateRecord.d.ts

@@ -0,0 +1,8 @@
+export declare function iterateRecordAsync<Key extends string, T, Item>(record: Record<Key, T>, fn: (item: {
+    key: Key;
+    value: T;
+}) => Item | Promise<Item>): Promise<Record<Key, Item>>;
+export declare function iterateRecord<Key extends string, T, Item>(record: Record<Key, T>, fn: (item: {
+    key: Key;
+    value: T;
+}) => Item): Record<Key, Item>;

package/lib/utils/not.d.ts

@@ -0,0 +1 @@
+declare function not<T>(fn: (value: T) => boolean): (value: T) => boolean;

package/lib/utils/unsafe.d.ts

@@ -0,0 +1 @@
+export declare function unsafe<Input, Output>(input: Input): Output;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "yuuna-engine",
+  "version": "0.1.0",
+  "description": "A lightweight, state-machine-based TypeScript game engine for quick prototypes. Runs directly in the browser.",
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "game-engine",
+    "canvas",
+    "typescript",
+    "state-machine",
+    "2d",
+    "prototyping",
+    "browser"
+  ],
+  "author": "lucy-dot-exe <lucinadotexe@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lucy-dot-exe/yuuna.git"
+  },
+  "homepage": "https://github.com/lucy-dot-exe/yuuna#readme",
+  "bugs": {
+    "url": "https://github.com/lucy-dot-exe/yuuna/issues"
+  },
+  "scripts": {
+    "build": "node scripts/generate-playground-assets.mjs && rollup -c",
+    "watch": "node scripts/generate-playground-assets.mjs && rollup -c -w",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.0",
+    "rollup": "^4.17.2",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5"
+  }
+}