like2d 2.12.0 → 2.13.0

package/dist/scene/index.js

@@ -0,0 +1,204 @@
+/**
+ * Scenes are a modular component of LÏKE based on setting `like.handleEvent`.
+ * The scene system is simple and powerful, once understood.
+ *
+ * For devs using the built-in callback pattern, they're an easy way
+ * to stack functionality on to the current project such as
+ * gamepad mapping or debug overlays.
+ *
+ * For multi-scene games, they codify a common state-management pattern based
+ * on switching between (or nesting) event handler callbacks. It's
+ * a lot better than switch-casing on each handler, or manually setting/clearing
+ * handler functions on each transition.
+ *
+ * Using scenes for your game also replaces the need to pass around global `like`
+ * or `sceneManager` wherever it is used.
+ *
+ * ## Jump in
+ *
+ * Get started: {@link SceneManager}
+ *
+ * Make your own scene: {@link Scene}
+ *
+ * Check out built-in utility scenes:
+ *  - {@link scene/prefab/mapGamepad}
+ *  - {@link scene/prefab/startScreen}
+ *
+ * @module scene
+ */
+import { likeDispatch } from '../engine';
+/**
+ * Scenemanager is the entry point for the LÏKE scene system.
+ * Without it, there are no scene functions; it's entirely modular.
+ *
+ * Usage:
+ * ```typescript
+ * const like = createLike(document.body);
+ * const sceneMan = new SceneManager(like);
+ * sceneMan.push(myScene)
+ * ```
+ * For arbitrary scene management (non stack based),
+ * just use {@link SceneManager.set} which switches out the stack top.
+ *
+ * For stack-based, use {@link SceneManager.push} and {@link SceneManager.pop}.
+ * Note that for stack-based games, it is wise to put the first initialization in as
+ * a callback-based system rather than going straight to scene. This allows
+ * for easy resets / game overs.
+ *
+ * Note that the SceneManager sets {@link LikeHandlers.handleEvent | like.handleEvent}.
+ * To get rid of scene functionality entirely, simply set it back to default.
+ * ```typescript
+ * like.handleEvent = undefined;
+ * ```
+ * Otherwise, the `SceneManager` stays allocated even if the scene stack was cleared.
+ */
+export class SceneManager {
+    constructor(like) {
+        Object.defineProperty(this, "like", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: like
+        });
+        Object.defineProperty(this, "scenes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        like.handleEvent = this.handleEvent.bind(this);
+    }
+    /**
+     * Get the current scene, or a specific index.
+     *
+     * Uses `Array.at` under the hood, so -1 is the
+     * top scene, -2 is the parent scene, etc.
+     *
+     * During instantiation, the stack is not shifted
+     * relative to during event/lifecycle functions.
+     * The only difference is that during load,
+     * scene.get(-1) of course returns no value.
+     */
+    get(pos = -1) {
+        return this.scenes.at(pos)?.instance;
+    }
+    /**
+     * Set the current scene at the top of the scene stack.
+     * If the stack is empty, push it onto the stack.
+     *
+     * The new scene is instantiated after the old one is
+     * quit and removed from the stack.
+     *
+     * Set cannot clear the current scene; for that use {@link pop}.
+     *
+     * @param scene is a Scene (factory pattern).
+     * @param instance is an optional preloaded instance.
+     */
+    set(scene, instance) {
+        const idx = Math.max(0, this.scenes.length - 1);
+        this.deinstance(-1);
+        this.scenes[idx] = { instance, factory: scene };
+        this.scenes[idx].instance = instance ?? this.instantiate(scene);
+    }
+    /**
+     * Push a scene to the scene stack and run it.
+     *
+     * @param scene A function that creates and returns a scene instance, which is just event handlers.
+     *
+     * @param unload
+     *
+     * If a scene calls `scenes.push(nextScene, true)`, it will be unloaded
+     * and re-constructed upon the parent scene calling `scenes.pop()`.
+     * Good for resource-intensive
+     * scenes or ones that rely heavily on their lifecycle. If you do want
+     * the lower scene to know what happened in the upper while unloaded, (i.e. overworld
+     * updating with a battle), consider using scene composition instead, or
+     * using localStorage to track persistent game state.
+     *
+     * If a scene calls `scenes.push(nextScene, false)`, it will stay loaded:
+     * this means when we pop its parent, it will simply continue running, though
+     * `load` will be called. Assets will of course stay loaded in during that time.
+     *
+     * Further, with unload disabled the upper scene now has the ability to reference
+     * the instance that called `scene.push` and call down to it in a generic way
+     * via `scene.get(-2)`
+     *
+     * See {@link Scene} for more detail -- while stacking is good for certain
+     * things, you're likely looking for Scene Composition.
+     *
+     */
+    push(scene, unload) {
+        if (unload) {
+            this.deinstance(-1);
+        }
+        const entry = { instance: undefined, factory: scene };
+        this.scenes.push(entry);
+        entry.instance = this.instantiate(entry.factory);
+    }
+    /**
+     * Pop the current scene off the stack, calling `quit` on it and
+     * dropping the instance reference.
+     *
+     * If the lower scene had called `pushScene` with the second arg (unload)
+     * set to true, it will be re-loaded. Otherwise it will continue where it
+     * left off. Either way its `load` fill fire.
+     *
+     * To clear the stack, just run:
+     * ```ts
+     * while (like.popScene());
+     * ```
+     */
+    pop() {
+        this.deinstance(-1);
+        const oldTop = this.scenes.pop();
+        const top = this.scenes.at(-1);
+        if (top) {
+            if (!top.instance) {
+                top.instance = this.instantiate(top.factory);
+            }
+        }
+        return oldTop?.factory;
+    }
+    /**
+     * Make a scene into an instance and dispatch `load` into it.
+     */
+    instantiate(scene) {
+        const inst = scene(this.like, this);
+        likeDispatch(inst, { type: 'load', args: [], timestamp: this.like.timer.getTime() });
+        return inst;
+    }
+    /**
+     * Unload a parent scene. Only use this if the lower scene requested to be
+     * unloaded, or if you're certain that you want to reload the lower
+     * completely. Otherwise, this can easily lose state or break functions.
+     */
+    deinstance(pos) {
+        const scene = this.scenes.at(pos);
+        if (scene) {
+            if (scene.instance) {
+                likeDispatch(scene.instance, { type: 'quit', args: [], timestamp: this.like.timer.getTime() });
+            }
+            scene.instance = undefined;
+        }
+    }
+    debugDraw() {
+        const g = this.like.gfx;
+        for (const si in this.scenes) {
+            const i = Number(si);
+            g.print('white', `${si}: hasInstance: ${!!this.scenes[i].instance}`, [50, i * 20 + 20]);
+        }
+    }
+    handleEvent(event) {
+        const top = this.scenes.at(-1);
+        if (top) {
+            if (!top.instance) {
+                throw new Error("expected top scene to be loaded");
+            }
+            likeDispatch(top.instance, event);
+        }
+        else {
+            this.like.callOwnHandlers(event);
+        }
+        //if (event.type == 'draw') this.debugDraw();
+    }
+}

package/dist/scene/prefab/fadeTransition.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Need some time to load?
+ *
+ * Or maybe, jump cuts look like garbage. Well, they do.
+ *
+ * Here's your remedy:
+ * ```ts
+ * sceneMan.push(fadeTransition(myNextScene, enableUnload), false);
+ * ```
+ */
+import { Scene } from "..";
+import { ColorNum } from "../../graphics";
+export type FadeProps = Partial<{
+    color: ColorNum;
+    duration: number;
+}>;
+/**
+ *  The fade scene factory.
+ *
+ * @param nextF The next scene (not sceneInstance)
+ * @param unload Set this rather than unload in `sceneMan.push`, which will cause early unload.`
+ * @options color and duration.
+ */
+export declare const fadeTransition: (nextF: Scene, unload: boolean, options?: FadeProps) => Scene;
+//# sourceMappingURL=fadeTransition.d.ts.map

package/dist/scene/prefab/fadeTransition.js

@@ -0,0 +1,55 @@
+/**
+ * Need some time to load?
+ *
+ * Or maybe, jump cuts look like garbage. Well, they do.
+ *
+ * Here's your remedy:
+ * ```ts
+ * sceneMan.push(fadeTransition(myNextScene, enableUnload), false);
+ * ```
+ */
+import { callOwnHandlers, likeDispatch } from "../..";
+/**
+ *  The fade scene factory.
+ *
+ * @param nextF The next scene (not sceneInstance)
+ * @param unload Set this rather than unload in `sceneMan.push`, which will cause early unload.`
+ * @options color and duration.
+ */
+export const fadeTransition = (nextF, unload, options = {}) => (like, scenes) => {
+    const baseColor = options.color ? options.color.slice(0, 3) : [0, 0, 0];
+    const duration = options.duration ?? 1;
+    const prev = scenes.get(-2);
+    const next = scenes.instantiate(nextF); // load next scene early
+    let time = 0;
+    return {
+        // stack: [prev: -3, next: -2, this: -1]
+        load() { time = 0; },
+        update(dt) { time += dt; },
+        handleEvent(ev) {
+            let elapsed = time / duration * 2;
+            if (ev.type == 'draw') {
+                if (elapsed < 1) {
+                    if (prev)
+                        likeDispatch(prev, ev);
+                    like.gfx.clear([...baseColor, elapsed]);
+                }
+                else if (elapsed < 2) {
+                    if (unload) {
+                        // if we're unloading, unload the prev scene now.
+                        scenes.deinstance(-2);
+                        unload = false;
+                    }
+                    if (next) {
+                        likeDispatch(next, ev);
+                    }
+                    like.gfx.clear([...baseColor, 2 - elapsed]);
+                }
+                else {
+                    scenes.set(nextF, next);
+                }
+            }
+            callOwnHandlers(this, ev);
+        }
+    };
+};

package/dist/scene/prefab/mapGamepad.d.ts

@@ -0,0 +1,47 @@
+/**
+ * An automagical gamepad mapper.
+ *
+ * ```ts
+ * like.gamepadconnected = (index) =>
+ *   scenes.push(mapGamepad({ buttons: buttonSetGBA, sticks: 0 }, 0), false)
+ * ```
+ *
+ * Add this to your codebase and activating a gamepad causes a button mapping screen to pop up.
+ * It will request to map any buttons not already covered by the automapping database.
+ *
+ * If you're wondering what `scenes` refers to, check out {@link SceneManager} to
+ * get started.
+ *
+ * Note: many browsers only fire gamepadconnected on first button press, so always writing "P2: press any button" is a fine idea.
+ * @module scene/prefab/mapGamepad
+ */
+import type { Scene } from "../";
+import { type LikeButton } from "../../input";
+/** All the buttons on an NES */
+export declare const buttonSetNES: Set<LikeButton>;
+/** All the buttons on a GBA -- Like an NES but with L+R */
+export declare const buttonSetGBA: Set<LikeButton>;
+/** All the buttons on a SNES */
+export declare const buttonSetSNES: Set<LikeButton>;
+/** All the buttons on a PS1 -- Like a SNES but with L2+R2 */
+export declare const buttonSetPS1: Set<LikeButton>;
+/** All the buttons -- including the stick buttons. */
+export declare const buttonSetAll: Set<LikeButton>;
+/** What gamepad buttons or sticks are we using?
+ *
+ *  Set buttons to one of:
+ *   - {@link buttonSetNES}
+ *   - {@link buttonSetGBA}
+ *   - {@link buttonSetSNES}
+ *   - {@link buttonSetPS1}
+ *   - {@link buttonSetAll}
+ *   - Custom: `new Set<LikeButton>(...)`
+ *
+ */
+export type MapMode = {
+    buttons: Set<LikeButton>;
+    stickCount: number;
+};
+/**  The gamepad mapping scene factory. Call this and pass it into {@link SceneManager.push} */
+export declare const mapGamepad: (mapMode: MapMode, targetPad: number) => Scene;
+//# sourceMappingURL=mapGamepad.d.ts.map

package/dist/scene/prefab/mapGamepad.js

@@ -0,0 +1,189 @@
+/**
+ * An automagical gamepad mapper.
+ *
+ * ```ts
+ * like.gamepadconnected = (index) =>
+ *   scenes.push(mapGamepad({ buttons: buttonSetGBA, sticks: 0 }, 0), false)
+ * ```
+ *
+ * Add this to your codebase and activating a gamepad causes a button mapping screen to pop up.
+ * It will request to map any buttons not already covered by the automapping database.
+ *
+ * If you're wondering what `scenes` refers to, check out {@link SceneManager} to
+ * get started.
+ *
+ * Note: many browsers only fire gamepadconnected on first button press, so always writing "P2: press any button" is a fine idea.
+ * @module scene/prefab/mapGamepad
+ */
+import { callOwnHandlers, likeDispatch } from "../..";
+import { defaultMapping } from "../../input";
+const mapOrder = [
+    "BRight",
+    "BBottom",
+    "Up",
+    "Down",
+    "Left",
+    "Right",
+    "MenuLeft",
+    "MenuRight",
+    // 8: NES buttons
+    "L1",
+    "R1",
+    // 10: GBA buttons
+    "BLeft",
+    "BTop",
+    // 12: SNES buttons
+    "L2",
+    "R2",
+    // 14: PS1 buttons
+    "LeftStick",
+    "RightStick",
+];
+/** All the buttons on an NES */
+export const buttonSetNES = new Set(mapOrder.slice(0, 8));
+/** All the buttons on a GBA -- Like an NES but with L+R */
+export const buttonSetGBA = new Set(mapOrder.slice(0, 10));
+/** All the buttons on a SNES */
+export const buttonSetSNES = new Set(mapOrder.slice(0, 12));
+/** All the buttons on a PS1 -- Like a SNES but with L2+R2 */
+export const buttonSetPS1 = new Set(mapOrder.slice(0, 14));
+/** All the buttons -- including the stick buttons. */
+export const buttonSetAll = new Set(mapOrder);
+const drawCircButt = (pos, size) => (like, color) => like.gfx.circle("fill", color, pos, size);
+const drawDpadPart = (rot) => (like, color) => {
+    like.gfx.withTransform(() => {
+        like.gfx.translate([2.5, 6]);
+        like.gfx.rotate(rot);
+        like.gfx.rectangle("fill", color, [0.5, -0.5, 1.3, 1]);
+    });
+};
+const drawShoulder = (y, width, flip) => (like, color) => {
+    const r = 0.8;
+    const rectPos = [5 - width, y];
+    const circPos = [5 - width - r, y];
+    like.gfx.withTransform(() => {
+        if (flip) {
+            like.gfx.translate([16, 0]);
+            like.gfx.scale([-1, 1]);
+        }
+        like.gfx.circle("fill", color, circPos, r, { arc: [Math.PI, Math.PI * 3 / 2], center: false });
+        like.gfx.rectangle("fill", color, [...rectPos, width, r]);
+    });
+};
+// Buttons assume a centered resolution of 16x9px. Transforms exist for a reason lol.
+//      LLLLL           .             RRRRR
+//     LLLLLLLLL        .          RRRRRRRRR
+//                      .                  
+//       DDD         S  .  S              B
+// -.....DDD.....................................
+//    DDD   DDD         .           B        B
+//       DDD      LS    .    RS
+//       DDD            .              B 
+//                      .   
+const buttonProps = {
+    BLeft: { draw: drawCircButt([12, 6], 0.8) },
+    BRight: { draw: drawCircButt([15, 6], 0.8) },
+    BTop: { draw: drawCircButt([13.5, 4.5], 0.8) },
+    BBottom: { draw: drawCircButt([13.5, 7.5], 0.8) },
+    MenuLeft: { draw: drawCircButt([6, 4], 0.5) },
+    MenuRight: { draw: drawCircButt([10, 4], 0.5) },
+    LeftStick: { draw: drawCircButt([6.5, 7], 1.4) },
+    RightStick: { draw: drawCircButt([9.5, 7], 1.4) },
+    L1: { draw: drawShoulder(2, 3, false) },
+    L2: { draw: drawShoulder(1, 2, false) },
+    R1: { draw: drawShoulder(2, 3, true) },
+    R2: { draw: drawShoulder(1, 2, true) },
+    Right: { draw: drawDpadPart(0) },
+    Up: { draw: drawDpadPart(-Math.PI / 2) },
+    Left: { draw: drawDpadPart(Math.PI) },
+    Down: { draw: drawDpadPart(Math.PI / 2) },
+};
+/**  The gamepad mapping scene factory. Call this and pass it into {@link SceneManager.push} */
+export const mapGamepad = (mapMode, targetPad) => (like, scenes) => {
+    const currentlyUnmapped = [];
+    const mapping = like.gamepad.getMapping(targetPad) ?? defaultMapping(2);
+    const alreadyMapped = new Set();
+    let held;
+    let frameWait = 10;
+    const alreadyMappedValues = new Set(Object.values(mapping.buttons));
+    for (const btn of mapOrder.reverse()) {
+        if (mapMode.buttons.has(btn) && !alreadyMappedValues.has(btn)) {
+            currentlyUnmapped.push(btn);
+        }
+    }
+    return {
+        handleEvent(ev) {
+            if (ev.type == 'draw') {
+                const parent = scenes.get(-2);
+                if (parent) {
+                    likeDispatch(parent, ev);
+                    like.gfx.clear([0, 0, 0, 0.5]);
+                }
+                else {
+                    like.gfx.clear();
+                }
+            }
+            callOwnHandlers(this, ev);
+        },
+        update() {
+            frameWait--;
+        },
+        draw() {
+            const centerText = {
+                font: "1px sans-serif",
+                align: "center",
+                width: 16,
+            };
+            const active = currentlyUnmapped.at(-1);
+            const csize = like.canvas.getSize();
+            like.gfx.scale(csize[0] / 16);
+            like.gfx.translate([0, 1]);
+            like.gfx.print("white", `Map gamepad ${targetPad}`, [8, 0.0], centerText);
+            // draw shadows
+            like.gfx.withTransform(() => {
+                like.gfx.translate([0.1, 0.1]);
+                for (const prop of mapMode.buttons.keys()) {
+                    buttonProps[prop].draw(like, 'black');
+                }
+            });
+            for (const prop of mapMode.buttons.keys()) {
+                const color = held == prop
+                    ? "green"
+                    : active == prop
+                        ? "red"
+                        : mapMode.buttons.has(prop)
+                            ? "white"
+                            : [0, 0, 0, 0];
+                // draw shadows
+                buttonProps[prop].draw(like, color);
+            }
+            like.gfx.print("white", active
+                ? `Press ${like.gamepad.fullButtonName(active)}!`
+                : "Press any button to resume.", [2, 10], { font: "1px sans-serif" });
+        },
+        gamepadpressed(source, _name, num) {
+            if (source !== targetPad || held || frameWait > 0)
+                return;
+            const active = currentlyUnmapped.pop();
+            if (active && !alreadyMapped.has(num)) {
+                alreadyMapped.add(num);
+                mapping.buttons[num] = active;
+                held = active;
+            }
+            else if (!active) {
+                like.gamepad.setMapping(targetPad, mapping);
+                setTimeout(() => scenes.pop(), 100);
+            }
+        },
+        gamepadreleased(source, _name, num) {
+            if (source !== targetPad)
+                return;
+            if (held == mapping.buttons[num]) {
+                held = undefined;
+            }
+        },
+        mousepressed() {
+            scenes.pop();
+        }
+    };
+};

package/dist/scene/prefab/startScreen.d.ts

@@ -0,0 +1,47 @@
+/**
+ * ## Why
+ *
+ *  1. Because the LIKE logo looks awesome.
+ *  2. Autoplay restriction; modern browers don't let you play audio until the page is clicked.
+ *  3. You have to click on the game in order to send inputs, anyway.
+ *  4. It's polite.
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * import { createLike, createStartScreen } from 'like';
+ * import { createGameScene } from './game';
+ *
+ * // init LIKE with scenes
+ * const container = document.getElementById("myGame");
+ * const like = createLike(container);
+ * const sceneMan = new SceneManager(like);
+ *
+ * // these callbacks will be ignored until the scene is clicked
+ * like.update = function () { ... }
+ * like.draw = function () { ... }
+ *
+ * // Set up the start screen
+ * like.start();
+ * sceneMan.push(startScreen())
+ * ```
+ *
+ * Alternatively, copy-paste this code into your own project and modify it freely.
+ *
+ * ## Custom Rendering
+ *
+ * Pass a custom draw function to replace the default logo:
+ *
+ * ```typescript
+ * const startup = startScreen((like) => {
+ *   like.gfx.clear([0, 0, 0, 1]);
+ *   like.gfx.print([1, 1, 1], 'Click to Start', [100, 100]);
+ * });
+ * ```
+ * @module scene/prefab/startScreen
+ */
+import type { Scene } from '..';
+import type { Like } from '../..';
+/** The start screen scene factory. Call this and pass it into {@link scene.SceneManager.push} */
+export declare const startScreen: (onDraw?: (like: Like) => void) => Scene;
+//# sourceMappingURL=startScreen.d.ts.map

package/dist/{prefab-scenes → scene/prefab}/startScreen.js

@@ -1,4 +1,4 @@
-import { Vec2 } from '../math/vector2';
+import { Vec2 } from '../../math/vector2';
 const LOGO = 'data:image/svg+xml;base64,' +
     'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBDcmVhdGVkIHdpdGgg' +
     'SW5rc2NhcGUgKGh0dHA6Ly93d3cuaW5rc2NhcGUub3JnLykgLS0+Cjxzdmcgd2lkdGg9IjI1Nm1t' +
@@ -31,87 +31,28 @@ const LOGO = 'data:image/svg+xml;base64,' +
     'MyAwLjAzNjk4LThlLTMgLTE1LjM3N3oiLz4KICA8ZWxsaXBzZSBjeD0iMTMyLjk5IiBjeT0iMTYu' +
     'MTIyIiByeD0iNi4wMjIxIiByeT0iNi4xMTgyIi8+CiAgPGVsbGlwc2UgY3g9IjE0Ny40OSIgY3k9' +
     'IjE2LjEyMiIgcng9IjYuMDIyMSIgcnk9IjYuMTE4MiIvPgogPC9nPgo8L3N2Zz4K';
-/**
- * ## Why
- *
- *  1. Because the LIKE logo looks awesome.
- *  2. Autoplay restriction, doesn't let you play audio until the page is clicked.
- *  3. You have to click on the game in order to send inputs, anyway.
- *  4. It's polite.
- *
- * ## Usage
- *
- * ```typescript
- * import { createLike, StartScreen } from 'like';
- * import { GameScene } from './game';
- *
- * const container = document.getElementById("myGame");
- * const like = createLike(container);
- *
- * // these callbacks will be ignored until the scene is clicked
- * like.update = function () { ... }
- * like.draw = function () { ... }
- *
- * // Set up the start screen
- * like.pushScene(new StartScreen())
- * like.start();
- * ```
- *
- * Alternatively, copy-paste this code into your own project and modify it freely.
- * Update imports:
- *
- * ```ts
- * import { type Scene } from 'like/scene';
- * import type { ImageHandle } from 'like/graphics';
- * import { Vec2 } from 'like/math';
- * import { Like } from 'like';
- * ```
- *
- * ## Custom Rendering
- *
- * Pass a custom draw function to replace the default logo:
- *
- * ```typescript
- * const startup = new StartupScene(gameScene, (like) => {
- *   like.gfx.clear([0, 0, 0, 1]);
- *   like.gfx.print([1, 1, 1], 'Click to Start', [100, 100]);
- * });
- * ```
- */
-export class StartScreen {
-    constructor(onDraw) {
-        Object.defineProperty(this, "onDraw", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: onDraw
-        });
-        Object.defineProperty(this, "logo", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-    }
-    load(like) {
-        this.logo = like.gfx.newImage(LOGO);
-    }
-    draw(like) {
-        if (this.onDraw) {
-            this.onDraw(like);
+/** The start screen scene factory. Call this and pass it into {@link scene.SceneManager.push} */
+export const startScreen = (onDraw) => (like, scenes) => {
+    const logo = like.gfx.newImage(LOGO);
+    like.mouse.setMode({ lock: false, scrollBlock: false });
+    return {
+        draw() {
+            if (onDraw) {
+                onDraw(like);
+            }
+            else if (logo.isReady()) {
+                like.gfx.clear([0.5, 0, 0.5, 1]);
+                const winSize = like.canvas.getSize();
+                const scale = (winSize[0] * 0.5) / logo.size[0];
+                like.gfx.draw(logo, Vec2.div(winSize, 2), {
+                    scale,
+                    origin: Vec2.div(logo.size, 2),
+                });
+                like.gfx.print([1, 1, 0, 0.5 + 0.5 * Math.sin(like.timer.getTime() * 3)], "▶️ click to start ◀️", Vec2.mul(winSize, [0.5, 0.8]), { align: "center", font: "25px sans" });
+            }
+        },
+        mousepressed() {
+            scenes.pop();
         }
-        else if (this.logo.isReady()) {
-            like.gfx.clear([0.5, 0, 0.5, 1]);
-            const winSize = like.canvas.getSize();
-            const scale = (winSize[0] * 0.5) / this.logo.size[0];
-            like.gfx.draw(this.logo, Vec2.div(winSize, 2), {
-                scale,
-                origin: Vec2.div(this.logo.size, 2),
-            });
-            like.gfx.print([1, 1, 0, 0.5 + 0.5 * Math.sin(like.timer.getTime() * 3)], "▶️ click to start ◀️", Vec2.mul(winSize, [0.5, 0.8]), { align: "center", font: "25px sans" });
-        }
-    }
-    mousepressed(like) {
-        like.popScene();
-    }
-}
+    };
+};