minimojs 1.0.0-alpha.24 → 1.0.0-alpha.26

package/dist/internal/InputSystem.js

@@ -29,6 +29,16 @@ export class InputSystem {
         this._touchPointers = new Map();
         /** @internal */
         this._primaryTouchId = null;
+        /**
+         * The primary touch after it lifted, kept until the mouse or a new touch
+         * takes over, so the pointer stays where the finger left the screen instead
+         * of jumping to the mouse's last position.
+         *
+         * @internal
+         */
+        this._releasedTouch = null;
+        /** @internal True on the frame the primary touch ended in a `touchcancel`. */
+        this._pointerCancelled = false;
     }
     get pointerX() {
         return this._pointerX;
@@ -52,16 +62,19 @@ export class InputSystem {
             this._mouseY = p.y;
             this._mouseDown = true;
             this._mousePressed = true;
+            this._releasedTouch = null;
             this.syncPrimaryPointer();
         });
         this.canvas.addEventListener("mouseup", () => {
             this._mouseDown = false;
+            this._releasedTouch = null;
             this.syncPrimaryPointer();
         });
         this.canvas.addEventListener("mousemove", (e) => {
             const p = this.getCanvasPoint(e.clientX, e.clientY);
             this._mouseX = p.x;
             this._mouseY = p.y;
+            this._releasedTouch = null;
             this.syncPrimaryPointer();
         });
         this.canvas.addEventListener("touchstart", (e) => {
@@ -76,27 +89,17 @@ export class InputSystem {
                     this._primaryTouchId = touch.identifier;
                 }
             }
+            this._releasedTouch = null;
+            this._pointerCancelled = false;
             this.syncPrimaryPointer();
             e.preventDefault();
         }, { passive: false });
         this.canvas.addEventListener("touchend", (e) => {
-            for (const touch of Array.from(e.changedTouches)) {
-                this._touchPointers.delete(touch.identifier);
-                if (this._primaryTouchId === touch.identifier) {
-                    this._primaryTouchId = null;
-                }
-            }
-            this.syncPrimaryPointer();
+            this.endTouches(e, false);
             e.preventDefault();
         }, { passive: false });
         this.canvas.addEventListener("touchcancel", (e) => {
-            for (const touch of Array.from(e.changedTouches)) {
-                this._touchPointers.delete(touch.identifier);
-                if (this._primaryTouchId === touch.identifier) {
-                    this._primaryTouchId = null;
-                }
-            }
-            this.syncPrimaryPointer();
+            this.endTouches(e, true);
             e.preventDefault();
         }, { passive: false });
         this.canvas.addEventListener("touchmove", (e) => {
@@ -131,6 +134,9 @@ export class InputSystem {
     isPointerPressed() {
         return this._pointerPressed;
     }
+    isPointerCancelled() {
+        return this._pointerCancelled;
+    }
     isPointerDownOverSprite(sprite) {
         if (!sprite)
             return false;
@@ -185,11 +191,38 @@ export class InputSystem {
         for (const pointer of this._touchPointers.values()) {
             pointer.pressed = false;
         }
+        if (this._releasedTouch)
+            this._releasedTouch.pressed = false;
+        this._pointerCancelled = false;
         this.syncPrimaryPointer();
     }
     resetPressedState() {
         this.clearFramePressedState();
     }
+    /**
+     * Removes the touches an event ended. When the primary one lifts, it is kept
+     * as the released touch at the point it lifted, carrying its frame-press flag
+     * so a tap that starts and ends between two frames still reads as pressed.
+     *
+     * @internal
+     */
+    endTouches(e, cancelled) {
+        for (const touch of Array.from(e.changedTouches)) {
+            const pointer = this._touchPointers.get(touch.identifier);
+            this._touchPointers.delete(touch.identifier);
+            if (this._primaryTouchId !== touch.identifier || !pointer)
+                continue;
+            this._primaryTouchId = null;
+            if (!cancelled) {
+                const p = this.getCanvasPoint(touch.clientX, touch.clientY);
+                pointer.x = p.x;
+                pointer.y = p.y;
+            }
+            this._releasedTouch = pointer;
+            this._pointerCancelled = cancelled;
+        }
+        this.syncPrimaryPointer();
+    }
     /** @internal */
     getCanvasPoint(clientX, clientY) {
         const rect = this.canvas.getBoundingClientRect();
@@ -257,9 +290,10 @@ export class InputSystem {
             }
         }
         this._primaryTouchId = null;
-        this._pointerX = this._mouseX;
-        this._pointerY = this._mouseY;
+        const released = this._releasedTouch;
+        this._pointerX = released ? released.x : this._mouseX;
+        this._pointerY = released ? released.y : this._mouseY;
         this._pointerDown = this._mouseDown;
-        this._pointerPressed = this._mousePressed;
+        this._pointerPressed = this._mousePressed || (released?.pressed ?? false);
     }
 }

package/dist/internal/RenderSystem.js

@@ -304,18 +304,21 @@ export class RenderSystem {
         ctx.restore();
     }
     /**
-     * Draws the frozen scene being left and, over its center, a ring whose
-     * outline fills with the share of images loaded. The ring has no fill.
+     * Draws the frozen scene being left, dimmed so it reads as paused, and over
+     * its center a ring whose outline fills with the share of images loaded.
+     * The ring has no fill.
      */
     renderSceneLoading(options) {
         const ctx = options.context;
         const W = options.canvas.width;
         const H = options.canvas.height;
+        const reveal = this.clampProgress(options.reveal);
         this.applyPageBackground(options.pageBackground);
         ctx.clearRect(0, 0, W, H);
         ctx.drawImage(options.snapshot, 0, 0, W, H);
-        if (!options.showIndicator)
+        if (reveal === 0)
             return;
+        this.dimScene(ctx, W, H, reveal);
         const progress = this.clampProgress(options.progress);
         const radius = Math.round(Math.min(44, Math.max(20, Math.min(W, H) * 0.06)));
         const start = -Math.PI / 2;
@@ -327,18 +330,41 @@ export class RenderSystem {
         // A soft halo in the opposite tone keeps the ring legible over busy art.
         ctx.shadowColor = isDarkInk ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)";
         ctx.shadowBlur = 6;
-        ctx.globalAlpha = 0.25;
+        ctx.globalAlpha = 0.25 * reveal;
         ctx.beginPath();
         ctx.arc(W / 2, H / 2, radius, 0, Math.PI * 2);
         ctx.stroke();
         if (progress > 0) {
-            ctx.globalAlpha = 1;
+            ctx.globalAlpha = reveal;
             ctx.beginPath();
             ctx.arc(W / 2, H / 2, radius, start, start + Math.PI * 2 * progress);
             ctx.stroke();
         }
         ctx.restore();
     }
+    /**
+     * Chooses the ring's color against the frozen frame as it looks once fully
+     * dimmed, since that is what the ring is drawn over.
+     */
+    pickSceneLoadingInk(snapshot) {
+        const dimmed = document.createElement("canvas");
+        dimmed.width = snapshot.width;
+        dimmed.height = snapshot.height;
+        const ctx = dimmed.getContext("2d");
+        if (!ctx)
+            return "#ffffff";
+        ctx.drawImage(snapshot, 0, 0);
+        this.dimScene(ctx, dimmed.width, dimmed.height, 1);
+        return this.pickLoadingInk(dimmed);
+    }
+    /** @internal */
+    dimScene(ctx, width, height, reveal) {
+        ctx.save();
+        ctx.globalAlpha = RenderSystem.SCENE_LOADING_DIM * reveal;
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(0, 0, width, height);
+        ctx.restore();
+    }
     /**
      * Chooses white or near-black loading ink from the average brightness at the
      * center of `source`. Falls back to white when the pixels cannot be read,
@@ -991,3 +1017,5 @@ export class RenderSystem {
 RenderSystem.MAX_SURFACE_CACHE_ENTRIES = 256;
 /** @internal Stroke of the boot line and the scene ring, which match. */
 RenderSystem.LOADING_STROKE = 3;
+/** @internal Opacity of the black veil over a scene that is loading the next one. */
+RenderSystem.SCENE_LOADING_DIM = 0.4;

package/dist/minimo-cards.js

@@ -658,7 +658,10 @@ export class CardTable {
             return;
         }
         this._press = null;
-        if (this._drag)
+        // A cancelled touch was interrupted, not released: return the cards, tap nothing.
+        if (game.isPointerCancelled())
+            this.cancelDrag();
+        else if (this._drag)
             this.finishDrag();
         else if (Math.hypot(x - press.x, y - press.y) < this.dragThreshold)
             this.onTap?.(press.card, press.pile);

package/dist/minimo.d.ts

@@ -201,10 +201,10 @@ export interface IScene {
      * `game.onPreload`. Images that are already loaded are skipped, so replaying
      * a scene loads nothing.
      *
-     * When images are pending, the scene being left freezes under a progress
-     * ring until they load, and only then is this scene created. Because of
-     * that, `reset()` and `transitionTo()` may return before this scene exists:
-     * continue in `onCreate()`, not in the code after the call.
+     * When images are pending, the scene being left freezes, dimmed, under a
+     * progress ring until they load, and only then is this scene created.
+     * Because of that, `reset()` and `transitionTo()` may return before this
+     * scene exists: continue in `onCreate()`, not in the code after the call.
      *
      * @example
      * ```ts
@@ -1064,7 +1064,7 @@ export interface CollisionInfo {
  * scenes that each carry many assets of their own — typically a game with many
  * levels, whose player does not reach every level in a session — should give
  * scenes an {@link IScene.onPreload}. Entering such a scene loads its images
- * first, with the scene being left frozen under a progress ring, so `reset()`
+ * first, with the scene being left frozen and dimmed under a progress ring, so `reset()`
  * and `transitionTo()` may return before the new scene's `onCreate()` runs.
  *
  * ---
@@ -2292,7 +2292,7 @@ export declare class Game {
      * can rebuild synchronously.
      *
      * The exception is a scene whose {@link IScene.onPreload} registers images
-     * that are not loaded yet. Then the current scene freezes under a progress
+     * that are not loaded yet. Then the current scene freezes and dims under a progress
      * ring, nothing is cleared until the images load, and `reset()` returns
      * before the scene is rebuilt; its `onCreate()` runs once they have loaded.
      * A `reset()` called while a scene is loading is ignored.
@@ -2325,7 +2325,7 @@ export declare class Game {
      * While the transition is active, gameplay updates are paused.
      *
      * If the target scene's {@link IScene.onPreload} registers images that are
-     * not loaded yet, the current scene first freezes under a progress ring
+     * not loaded yet, the current scene first freezes and dims under a progress ring
      * until they load, and the transition plays after that. `transitionTo()`
      * then returns before the target scene exists; continue in its
      * `onCreate()` or in `onComplete`. If the player declines to retry failed

package/dist/minimo.js

@@ -22,8 +22,10 @@ import { TextSystem } from "./internal/TextSystem.js";
 import { TrailSystem } from "./internal/TrailSystem.js";
 import { TransitionSystem } from "./internal/TransitionSystem.js";
 import { TimerSystem } from "./internal/TimerSystem.js";
-/** How long a scene may load before its progress ring appears, so a fast load shows none. */
+/** How long a scene may load before it dims and its progress ring appears, so a fast load shows neither. */
 const SCENE_LOADING_INDICATOR_DELAY_MS = 250;
+/** How long the dimming and the ring take to fade in once they appear. */
+const SCENE_LOADING_FADE_MS = 200;
 // ---------------------------------------------------------------------------
 // EmojiSprite
 // ---------------------------------------------------------------------------
@@ -1103,7 +1105,7 @@ export class BackgroundLayer {
  * scenes that each carry many assets of their own — typically a game with many
  * levels, whose player does not reach every level in a session — should give
  * scenes an {@link IScene.onPreload}. Entering such a scene loads its images
- * first, with the scene being left frozen under a progress ring, so `reset()`
+ * first, with the scene being left frozen and dimmed under a progress ring, so `reset()`
  * and `transitionTo()` may return before the new scene's `onCreate()` runs.
  *
  * ---
@@ -1814,6 +1816,15 @@ export class Game {
     isPointerPressed() {
         return this._inputSystem.isPointerPressed();
     }
+    /**
+     * True on the frame the primary touch ended in a `touchcancel` rather than
+     * lifting, so a module can drop the gesture instead of reading it as a tap.
+     *
+     * @internal
+     */
+    isPointerCancelled() {
+        return this._inputSystem.isPointerCancelled();
+    }
     /**
      * Returns `true` while any active pointer is held down over the target sprite.
      * Works with both mouse input and multiple simultaneous touches.
@@ -2580,7 +2591,7 @@ export class Game {
      * can rebuild synchronously.
      *
      * The exception is a scene whose {@link IScene.onPreload} registers images
-     * that are not loaded yet. Then the current scene freezes under a progress
+     * that are not loaded yet. Then the current scene freezes and dims under a progress
      * ring, nothing is cleared until the images load, and `reset()` returns
      * before the scene is rebuilt; its `onCreate()` runs once they have loaded.
      * A `reset()` called while a scene is loading is ignored.
@@ -2654,7 +2665,7 @@ export class Game {
      * While the transition is active, gameplay updates are paused.
      *
      * If the target scene's {@link IScene.onPreload} registers images that are
-     * not loaded yet, the current scene first freezes under a progress ring
+     * not loaded yet, the current scene first freezes and dims under a progress ring
      * until they load, and the transition plays after that. `transitionTo()`
      * then returns before the target scene exists; continue in its
      * `onCreate()` or in `onComplete`. If the player declines to retry failed
@@ -2873,7 +2884,8 @@ export class Game {
                 pageBackground: this.pageBackground,
                 snapshot: load.snapshot,
                 progress: load.progress,
-                showIndicator: performance.now() - load.startedAt >= SCENE_LOADING_INDICATOR_DELAY_MS,
+                reveal: (performance.now() - load.startedAt - SCENE_LOADING_INDICATOR_DELAY_MS) /
+                    SCENE_LOADING_FADE_MS,
                 ink: load.ink,
             });
         }
@@ -2915,7 +2927,7 @@ export class Game {
         snapshot.getContext("2d")?.drawImage(this._canvas, 0, 0);
         const load = {
             snapshot,
-            ink: this._renderSystem.pickLoadingInk(snapshot),
+            ink: this._renderSystem.pickSceneLoadingInk(snapshot),
             progress: 0,
             startedAt: performance.now(),
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minimojs",
-  "version": "1.0.0-alpha.24",
+  "version": "1.0.0-alpha.26",
   "description": "MinimoJS v1 — ultra-minimal, flat, deterministic 2D web game engine. Image-first sprites with emoji as a zero-asset alternative, rAF loop, TypeScript-first, LLM-friendly.",
   "type": "module",
   "main": "dist/minimo.js",