like2d 2.7.4 → 2.9.0

package/dist/core/mouse.js

@@ -1,130 +1,142 @@
-export class Mouse {
-    constructor(transformFn) {
-        Object.defineProperty(this, "x", {
+import { Vec2 } from '../math/vector2';
+const mouseButtons = ["left", "middle", "right"];
+const numToButton = (i) => mouseButtons[i];
+/**
+ * Mouse input handling. Bound to canvas. Emits relative movement when pointer locked.
+ * Buttons: 1 = left, 2 = middle, 3 = right.
+ */
+export class MouseInternal {
+    constructor(canvas, dispatch) {
+        Object.defineProperty(this, "canvas", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 0
+            value: canvas
         });
-        Object.defineProperty(this, "y", {
+        Object.defineProperty(this, "dispatch", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 0
+            value: dispatch
         });
-        Object.defineProperty(this, "buttons", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Set()
-        });
-        Object.defineProperty(this, "onMouseEvent", {
+        Object.defineProperty(this, "pos", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: [0, 0]
         });
-        Object.defineProperty(this, "transformFn", {
+        Object.defineProperty(this, "lastPos", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: [0, 0]
         });
-        // Event handler references for cleanup
-        Object.defineProperty(this, "mousemoveHandler", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "mousedownHandler", {
+        Object.defineProperty(this, "buttons", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: new Set()
         });
-        Object.defineProperty(this, "mouseupHandler", {
+        Object.defineProperty(this, "cursorVisible", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: true
         });
-        Object.defineProperty(this, "blurHandler", {
+        Object.defineProperty(this, "abort", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: new AbortController()
         });
-        this.transformFn = transformFn;
-        // Bind event handlers
-        this.mousemoveHandler = this.handleMouseMove.bind(this);
-        this.mousedownHandler = this.handleMouseDown.bind(this);
-        this.mouseupHandler = this.handleMouseUp.bind(this);
-        this.blurHandler = this.handleBlur.bind(this);
-        // Register event listeners
-        window.addEventListener('mousemove', this.mousemoveHandler);
-        window.addEventListener('mousedown', this.mousedownHandler);
-        window.addEventListener('mouseup', this.mouseupHandler);
-        window.addEventListener('blur', this.blurHandler);
-    }
-    setTransform(transformFn) {
-        this.transformFn = transformFn;
+        this.canvas.addEventListener('like:mousemoved', this.handleMouseMove.bind(this), { signal: this.abort.signal });
+        this.canvas.addEventListener('mousedown', this.handleMouseDown.bind(this), { signal: this.abort.signal });
+        window.addEventListener('mouseup', this.handleMouseUp.bind(this), { signal: this.abort.signal });
+        this.canvas.addEventListener('wheel', this.handleWheel.bind(this), { passive: false, signal: this.abort.signal });
+        this.canvas.addEventListener('mouseleave', () => this.buttons.clear(), { signal: this.abort.signal });
     }
     handleMouseMove(e) {
-        // Store raw CSS coordinates - transformation to game coordinates
-        // should be done by the consumer using engine.transformMousePosition()
-        this.x = e.clientX;
-        this.y = e.clientY;
-        this.onMouseEvent?.(e.clientX, e.clientY, undefined, 'mousemove');
+        if (this.isPointerLocked()) {
+            /** In pointer-lock mode, simulate a real cursor bounded by the canvas. */
+            this.pos = Vec2.clamp(Vec2.add(this.pos, e.detail.delta), [0, 0], e.detail.renderSize);
+            this.dispatch('mousemoved', [this.pos, e.detail.delta]);
+        }
+        else {
+            /** In non-pointer locked mode, calculate deltas ourselves. */
+            this.pos = e.detail.pos;
+            this.dispatch('mousemoved', [this.pos, Vec2.sub(this.pos, this.lastPos)]);
+        }
+        this.lastPos = this.pos;
     }
     handleMouseDown(e) {
-        this.buttons.add(e.button + 1);
-        this.onMouseEvent?.(e.clientX, e.clientY, e.button, 'mousedown');
+        // hack: ignore right clicks because they cause a refocus
+        if (!this.isPointerLocked() && e.button == 2)
+            return;
+        this.buttons.add(numToButton(e.button));
+        this.dispatch('mousepressed', [[e.offsetX, e.offsetY], numToButton(e.button)]);
+        this.canvas?.focus();
     }
     handleMouseUp(e) {
-        this.buttons.delete(e.button + 1);
-        this.onMouseEvent?.(e.clientX, e.clientY, e.button, 'mouseup');
+        this.buttons.delete(numToButton(e.button));
+        this.dispatch('mousereleased', [[e.offsetX, e.offsetY], numToButton(e.button)]);
     }
-    handleBlur() {
-        this.buttons.clear();
+    handleWheel(e) {
+        e.preventDefault();
     }
-    dispose() {
-        window.removeEventListener('mousemove', this.mousemoveHandler);
-        window.removeEventListener('mousedown', this.mousedownHandler);
-        window.removeEventListener('mouseup', this.mouseupHandler);
-        window.removeEventListener('blur', this.blurHandler);
-        this.buttons.clear();
+    _dispose() {
+        this.abort.abort();
     }
+    /** Mouse position, transformed to canvas pixels. */
     getPosition() {
-        if (this.transformFn) {
-            return this.transformFn(this.x, this.y);
-        }
-        return [this.x, this.y];
-    }
-    getX() {
-        return this.x;
-    }
-    getY() {
-        return this.y;
+        return this.pos;
     }
+    /** Check if button is held. Button 1 = left, 2 = middle, 3 = right. */
     isDown(button) {
         return this.buttons.has(button);
     }
+    /** All currently held buttons. */
     getPressedButtons() {
         return new Set(this.buttons);
     }
-    isVisible() {
-        return document.pointerLockElement === null;
+    /** True when pointer is locked to canvas.
+     * {@link lockPointer}
+     */
+    isPointerLocked() {
+        return document.pointerLockElement !== null;
     }
-    setVisible(visible, canvas) {
-        if (!visible && canvas) {
-            canvas.requestPointerLock();
+    /**
+     * Whether to lock (capture) the pointer.
+     *
+     * In locked mode, the cursor cannot escape the canvas.
+     * It also becomes invisible.
+     *
+     * Note that event {@link mousemoved} passes both
+     * `pos` and `delta`.
+     *
+     * Though the emulated cursor in locked mode
+     * (locked mode doesn't natively track absolute position)
+     * may be stuck on canvas edges, the `delta` field always
+     * represents mouse movement.
+    */
+    lockPointer(locked) {
+        if (!this.canvas)
+            return;
+        if (locked && document.pointerLockElement !== this.canvas) {
+            this.canvas.requestPointerLock();
         }
-        else if (visible && canvas && document.pointerLockElement === canvas) {
+        else if (!locked && document.pointerLockElement === this.canvas) {
             document.exitPointerLock();
         }
     }
-    getRelativeMode() {
-        return document.pointerLockElement !== null;
+    /** Show or hide cursor. Unlike pointer lock, cursor can still leave canvas. */
+    showCursor(visible) {
+        this.cursorVisible = visible;
+        if (this.canvas) {
+            this.canvas.style.cursor = visible ? 'auto' : 'none';
+        }
+    }
+    /** Current cursor visibility state. */
+    isCursorVisible() {
+        return this.cursorVisible;
     }
 }

package/dist/core/timer.d.ts

@@ -1,17 +1,14 @@
-export declare class Timer {
+export declare class TimerInternal {
     private currentDelta;
     private totalTime;
     private frameCount;
     private fps;
     private fpsAccumulator;
     private sleepUntil;
-    private sceneStartTime;
-    update(dt: number): void;
-    resetSceneTime(): void;
+    _update(dt: number): void;
     getDelta(): number;
     getFPS(): number;
     getTime(): number;
-    getSceneTime(): number;
     isSleeping(): boolean;
     sleep(duration: number): void;
 }

package/dist/core/timer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timer.d.ts","sourceRoot":"","sources":["../../src/core/timer.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IAChB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,cAAc,CAAK;IAE3B,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAaxB,cAAc,IAAI,IAAI;IAItB,QAAQ,IAAI,MAAM;IAIlB,MAAM,IAAI,MAAM;IAIhB,OAAO,IAAI,MAAM;IAIjB,YAAY,IAAI,MAAM;IAItB,UAAU,IAAI,OAAO;IAUrB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAG9B"}
+{"version":3,"file":"timer.d.ts","sourceRoot":"","sources":["../../src/core/timer.ts"],"names":[],"mappings":"AAAA,qBAAa,aAAa;IACxB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAazB,QAAQ,IAAI,MAAM;IAIlB,MAAM,IAAI,MAAM;IAIhB,OAAO,IAAI,MAAM;IAIjB,UAAU,IAAI,OAAO;IAUrB,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;CAG9B"}

package/dist/core/timer.js

@@ -1,4 +1,4 @@
-export class Timer {
+export class TimerInternal {
     constructor() {
         Object.defineProperty(this, "currentDelta", {
             enumerable: true,
@@ -36,14 +36,8 @@ export class Timer {
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "sceneStartTime", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
     }
-    update(dt) {
+    _update(dt) {
         this.currentDelta = dt;
         this.totalTime += dt;
         this.frameCount++;
@@ -54,9 +48,6 @@ export class Timer {
             this.fpsAccumulator = 0;
         }
     }
-    resetSceneTime() {
-        this.sceneStartTime = this.totalTime;
-    }
     getDelta() {
         return this.currentDelta;
     }
@@ -66,9 +57,6 @@ export class Timer {
     getTime() {
         return this.totalTime;
     }
-    getSceneTime() {
-        return this.totalTime - this.sceneStartTime;
-    }
     isSleeping() {
         if (this.sleepUntil === null)
             return false;

package/dist/engine.d.ts

@@ -1,20 +1,70 @@
-import type { Like2DEvent } from './core/events';
-import type { PartialCanvasMode } from './core/canvas-config';
-import type { Like } from './core/like';
+/**
+ * @module engine
+ * @description Core game engine - lifecycle management and event dispatch.
+ *
+ * You've reached the most evil part of the codebase -- the man
+ * behind the curtain.
+ *
+ * The secret force gluing everything together.
+ *
+ * If you want to use modules independently, look here first.
+ *
+ * ## Memory Management
+ *
+ * Always call `dispose()` when destroying an engine instance:
+ * - Removes all event listeners
+ * - Stops the game loop
+ * - Removes canvas from DOM
+ * - Cleans up canvas manager resources
+ *
+ */
+import type { LikeInternal } from './core/like';
+export type EngineDispatch = Engine["dispatch"];
+/**
+ * Core game engine managing the event loop and subsystems.
+ *
+ * Normally you don't instantiate this directly - use {@link createLike} instead.
+ * The Engine class is exposed for advanced use cases like testing or
+ * custom initialization sequences.
+ *
+ * All subsystems are accessible via the {@link like} property.
+ */
 export declare class Engine {
+    private container;
     private canvas;
-    private ctx;
     private isRunning;
     private lastTime;
-    private container;
-    private canvasManager;
-    private handleEvent;
-    private currentScene;
-    readonly like: Like;
+    private abort;
+    /**
+     * The Like interface providing access to all engine subsystems.
+     * This object is passed to all scene callbacks and game code.
+     */
+    readonly like: LikeInternal;
     constructor(container: HTMLElement);
     private dispatch;
-    setMode(mode: PartialCanvasMode): void;
-    start(handleEvent: (event: Like2DEvent) => void): Promise<void>;
+    /**
+     * Start the game loop.
+     *
+     * @remarks
+     * This method:
+     * 1. Dispatches the initial `load` event
+     * 2. Starts the requestAnimationFrame loop
+     *
+     * The engine runs until dispose() is called.
+     */
+    start(): Promise<void>;
+    /**
+     * Clean up all resources and stop the engine.
+     *
+     * @remarks
+     * This method:
+     * - Stops the game loop
+     * - Removes all event listeners (keyboard, mouse, window, fullscreen)
+     * - Disposes canvas manager (removes resize observer)
+     * - Removes the canvas element from the DOM
+     *
+     * The engine cannot be restarted after disposal - create a new instance.
+     */
     dispose(): void;
 }
 //# sourceMappingURL=engine.d.ts.map

package/dist/engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAa,MAAM,eAAe,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIxC,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,GAAG,CAA2B;IACtC,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,aAAa,CAAgB;IACrC,OAAO,CAAC,WAAW,CAA+C;IAClE,OAAO,CAAC,YAAY,CAAsB;IAE1C,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC;gBAER,SAAS,EAAE,WAAW;IAkElC,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,IAAI,EAAE,iBAAiB,GAAG,IAAI;IAWhC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IA+BrE,OAAO,IAAI,IAAI;CAUhB"}
+{"version":3,"file":"engine.d.ts","sourceRoot":"","sources":["../src/engine.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAUH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAEhD;;;;;;;;GAQG;AACH,qBAAa,MAAM;IAaL,OAAO,CAAC,SAAS;IAZ7B,OAAO,CAAC,MAAM,CAAiB;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAAK;IAErB,OAAO,CAAC,KAAK,CAAyB;IAEtC;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;gBAER,SAAS,EAAE,WAAW;IAmD1C,OAAO,CAAC,QAAQ;IAShB;;;;;;;;;OASG;IACG,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IA4B5B;;;;;;;;;;;OAWG;IACH,OAAO,IAAI,IAAI;CAahB"}

package/dist/engine.js

@@ -1,20 +1,50 @@
-import { Audio } from './core/audio';
-import { Input } from './core/input';
-import { Timer } from './core/timer';
-import { Keyboard } from './core/keyboard';
-import { Mouse } from './core/mouse';
-import { Gamepad } from './core/gamepad';
-import { newState, bindGraphics } from './core/graphics';
-import { CanvasManager } from './core/canvas-manager';
+/**
+ * @module engine
+ * @description Core game engine - lifecycle management and event dispatch.
+ *
+ * You've reached the most evil part of the codebase -- the man
+ * behind the curtain.
+ *
+ * The secret force gluing everything together.
+ *
+ * If you want to use modules independently, look here first.
+ *
+ * ## Memory Management
+ *
+ * Always call `dispose()` when destroying an engine instance:
+ * - Removes all event listeners
+ * - Stops the game loop
+ * - Removes canvas from DOM
+ * - Cleans up canvas manager resources
+ *
+ */
+import { AudioInternal } from './core/audio';
+import { InputInternal } from './core/input';
+import { TimerInternal } from './core/timer';
+import { KeyboardInternal } from './core/keyboard';
+import { MouseInternal } from './core/mouse';
+import { GamepadInternal } from './core/gamepad';
+import { bindGraphics } from './core/graphics';
+import { CanvasInternal } from './core/canvas';
+import { sceneDispatch } from './scene';
+/**
+ * Core game engine managing the event loop and subsystems.
+ *
+ * Normally you don't instantiate this directly - use {@link createLike} instead.
+ * The Engine class is exposed for advanced use cases like testing or
+ * custom initialization sequences.
+ *
+ * All subsystems are accessible via the {@link like} property.
+ */
 export class Engine {
     constructor(container) {
-        Object.defineProperty(this, "canvas", {
+        Object.defineProperty(this, "container", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: container
         });
-        Object.defineProperty(this, "ctx", {
+        Object.defineProperty(this, "canvas", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -32,54 +62,38 @@ export class Engine {
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "canvasManager", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "handleEvent", {
+        Object.defineProperty(this, "abort", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "currentScene", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
+            value: new AbortController()
         });
+        /**
+         * The Like interface providing access to all engine subsystems.
+         * This object is passed to all scene callbacks and game code.
+         */
         Object.defineProperty(this, "like", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        this.canvas = document.createElement('canvas');
-        this.canvas.style.border = '1px solid #ccc';
-        this.canvas.style.display = 'block';
-        const ctx = this.canvas.getContext('2d');
-        if (!ctx)
-            throw new Error('Failed to get 2D context');
-        this.ctx = ctx;
-        this.container = container;
-        this.container.appendChild(this.canvas);
-        this.canvasManager = new CanvasManager(this.canvas, this.container, this.ctx, { pixelResolution: null, fullscreen: false });
-        const gfxState = newState(this.ctx);
-        const gfx = bindGraphics(gfxState);
-        const audio = new Audio();
-        const timer = new Timer();
-        const keyboard = new Keyboard();
-        const mouse = new Mouse((cssX, cssY) => this.canvasManager.transformMousePosition(cssX, cssY));
-        const gamepad = new Gamepad();
-        const input = new Input({ keyboard, mouse, gamepad });
+        this.canvas = new CanvasInternal(this.dispatch.bind(this));
+        const canvas = this.canvas._displayCanvas;
+        canvas.addEventListener("like:updateRenderTarget", (event) => {
+            if (!(event instanceof CustomEvent))
+                return;
+            this.like.gfx = bindGraphics(event.detail.target.getContext('2d'));
+        });
+        this.container.appendChild(canvas);
+        let gfx = bindGraphics(canvas.getContext('2d'));
+        const dispatch = this.dispatch.bind(this);
+        const audio = new AudioInternal();
+        const timer = new TimerInternal();
+        const keyboard = new KeyboardInternal(canvas, dispatch);
+        const mouse = new MouseInternal(canvas, dispatch);
+        const gamepad = new GamepadInternal(dispatch);
+        const input = new InputInternal({ keyboard, mouse, gamepad });
         this.like = {
             audio,
             timer,
@@ -88,61 +102,50 @@ export class Engine {
             mouse,
             gamepad,
             gfx,
-            setMode: (m) => this.setMode(m),
-            getMode: () => this.canvasManager.getMode(),
-            getCanvasSize: () => [this.canvas.width, this.canvas.height],
+            canvas: this.canvas,
+            start: this.start.bind(this),
+            dispose: this.dispose.bind(this),
             setScene: (scene) => {
-                this.currentScene = scene;
-                scene?.load?.(this.like);
+                if (scene) {
+                    this.like.handleEvent = (event) => sceneDispatch(scene, this.like, event);
+                    this.dispatch("load", []);
+                }
+                else {
+                    this.like.handleEvent = undefined;
+                }
             },
-        };
-        keyboard.onKeyEvent = (scancode, keycode, type) => {
-            this.dispatch(type === 'keydown' ? 'keypressed' : 'keyreleased', [scancode, keycode]);
-        };
-        mouse.onMouseEvent = (clientX, clientY, button, type) => {
-            const [x, y] = this.canvasManager.transformMousePosition(clientX, clientY);
-            this.dispatch(type === 'mousedown' ? 'mousepressed' : 'mousereleased', [x, y, (button ?? 0) + 1]);
-        };
-        gamepad.onButtonEvent = (gpIndex, buttonIndex, buttonName, pressed) => {
-            this.dispatch(pressed ? 'gamepadpressed' : 'gamepadreleased', [gpIndex, buttonIndex, buttonName]);
-        };
-        this.canvasManager.onResize = (size, pixelSize, fullscreen) => {
-            this.dispatch('resize', [size, pixelSize, fullscreen]);
-        };
-        document.addEventListener('fullscreenchange', () => {
-            const mode = this.canvasManager.getMode();
-            const isFullscreen = !!document.fullscreenElement;
-            if (mode.fullscreen !== isFullscreen) {
-                this.canvasManager.setMode({ ...mode, fullscreen: isFullscreen });
+            callOwnHandlers: (event) => {
+                if (event.type in this.like)
+                    this.like[event.type](...event.args);
             }
-        });
+        };
+        window.addEventListener('focus', () => this.dispatch('focus', ['tab']));
+        window.addEventListener('blur', () => this.dispatch('blur', ['tab']));
+        canvas.addEventListener('focus', () => this.dispatch('focus', ['canvas']));
+        canvas.addEventListener('focus', () => this.dispatch('focus', ['canvas']));
     }
     dispatch(type, args) {
-        if (!this.handleEvent)
-            return;
-        const event = { type, args, timestamp: performance.now() };
-        if (this.currentScene) {
-            this.currentScene.handleEvent?.(this.like, event);
-            const method = this.currentScene[event.type];
-            method?.call(this.currentScene, this.like, ...args);
+        const event = { type, args, timestamp: this.like.timer.getTime() };
+        if (this.like.handleEvent) {
+            this.like.handleEvent(event);
         }
         else {
-            this.handleEvent(event);
-        }
-    }
-    setMode(mode) {
-        const currentMode = this.canvasManager.getMode();
-        const mergedMode = { ...currentMode, ...mode };
-        if (mode.fullscreen !== undefined && mode.fullscreen !== currentMode.fullscreen) {
-            mergedMode.fullscreen ? this.container.requestFullscreen().catch(console.error) : document.exitFullscreen();
+            this.like.callOwnHandlers(event);
         }
-        this.canvasManager.setMode(mode);
     }
-    async start(handleEvent) {
-        this.handleEvent = handleEvent;
+    /**
+     * Start the game loop.
+     *
+     * @remarks
+     * This method:
+     * 1. Dispatches the initial `load` event
+     * 2. Starts the requestAnimationFrame loop
+     *
+     * The engine runs until dispose() is called.
+     */
+    async start() {
         this.isRunning = true;
         this.lastTime = performance.now();
-        await this.like.gamepad.init();
         const loop = () => {
             if (!this.isRunning)
                 return;
@@ -150,27 +153,41 @@ export class Engine {
             const dt = (now - this.lastTime) / 1000;
             this.lastTime = now;
             if (!this.like.timer.isSleeping()) {
-                this.like.timer.update(dt);
-                const { pressed, released } = this.like.input.update();
+                this.like.timer._update(dt);
+                const { pressed, released } = this.like.input._update();
                 pressed.forEach(action => this.dispatch('actionpressed', [action]));
                 released.forEach(action => this.dispatch('actionreleased', [action]));
                 this.dispatch('update', [dt]);
             }
             this.dispatch('draw', []);
-            this.canvasManager.present();
+            this.canvas._present();
             requestAnimationFrame(loop);
         };
         this.dispatch('load', []);
         requestAnimationFrame(loop);
     }
+    /**
+     * Clean up all resources and stop the engine.
+     *
+     * @remarks
+     * This method:
+     * - Stops the game loop
+     * - Removes all event listeners (keyboard, mouse, window, fullscreen)
+     * - Disposes canvas manager (removes resize observer)
+     * - Removes the canvas element from the DOM
+     *
+     * The engine cannot be restarted after disposal - create a new instance.
+     */
     dispose() {
+        const canvas = this.canvas._displayCanvas;
         this.isRunning = false;
-        this.like.keyboard.dispose();
-        this.like.mouse.dispose();
-        this.like.gamepad.dispose();
-        this.canvasManager.dispose();
-        if (this.canvas.parentNode === this.container) {
-            this.container.removeChild(this.canvas);
+        this.like.keyboard._dispose();
+        this.like.mouse._dispose();
+        this.like.gamepad._dispose();
+        this.canvas._dispose();
+        this.abort.abort();
+        if (canvas.parentNode === this.container) {
+            this.container.removeChild(canvas);
         }
     }
 }