like2d 1.0.0

package/dist/gamepad.js

@@ -0,0 +1,216 @@
+import { getButtonName, getButtonIndex } from './gamepad-button-map';
+import { InputStateTracker } from './input-state';
+import { gamepadMapping } from './gamepad-mapping';
+export { getButtonName, getButtonIndex };
+const AXIS_DEADZONE = 0.15;
+function applyDeadzone(value, deadzone = AXIS_DEADZONE) {
+    if (Math.abs(value) < deadzone)
+        return 0;
+    const sign = value < 0 ? -1 : 1;
+    const magnitude = Math.abs(value);
+    return sign * (magnitude - deadzone) / (1 - deadzone);
+}
+function applyRadialDeadzone(x, y, deadzone = AXIS_DEADZONE) {
+    const magnitude = Math.sqrt(x * x + y * y);
+    if (magnitude < deadzone)
+        return { x: 0, y: 0 };
+    const scale = (magnitude - deadzone) / (magnitude * (1 - deadzone));
+    return { x: x * scale, y: y * scale };
+}
+export class Gamepad {
+    constructor() {
+        Object.defineProperty(this, "buttonTrackers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "connectedGamepads", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "buttonMappings", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        this.setupEventListeners();
+    }
+    async init() {
+        await gamepadMapping.loadDatabase();
+    }
+    extractVendorProduct(gamepad) {
+        const id = gamepad.id;
+        const vendorProductMatch = id.match(/Vendor:\s*([0-9a-fA-F]+)\s+Product:\s*([0-9a-fA-F]+)/i);
+        if (vendorProductMatch) {
+            const vendor = parseInt(vendorProductMatch[1], 16);
+            const product = parseInt(vendorProductMatch[2], 16);
+            if (!isNaN(vendor) && !isNaN(product)) {
+                return { vendor, product };
+            }
+        }
+        const hexMatch = id.match(/^([0-9a-fA-F]{4})[\s-]+([0-9a-fA-F]{4})/);
+        if (hexMatch) {
+            const vendor = parseInt(hexMatch[1], 16);
+            const product = parseInt(hexMatch[2], 16);
+            if (!isNaN(vendor) && !isNaN(product)) {
+                return { vendor, product };
+            }
+        }
+        return null;
+    }
+    setupEventListeners() {
+        window.addEventListener('gamepadconnected', (e) => {
+            this.connectedGamepads.set(e.gamepad.index, e.gamepad);
+            this.buttonTrackers.set(e.gamepad.index, new InputStateTracker());
+            const mapping = gamepadMapping.getMapping(e.gamepad);
+            this.buttonMappings.set(e.gamepad.index, mapping);
+            console.log(`[Gamepad] Connected: "${e.gamepad.id}"`);
+            const vp = this.extractVendorProduct(e.gamepad);
+            if (vp) {
+                console.log(`[Gamepad] Vendor: 0x${vp.vendor.toString(16).padStart(4, '0')}, Product: 0x${vp.product.toString(16).padStart(4, '0')}`);
+            }
+            const mappingType = e.gamepad.mapping === 'standard' ? 'browser standard' : (mapping.hasMapping ? 'SDL DB' : 'unmapped');
+            console.log(`[Gamepad] Mapped as: "${mapping.controllerName}" (${mappingType})`);
+        });
+        window.addEventListener('gamepaddisconnected', (e) => {
+            this.connectedGamepads.delete(e.gamepad.index);
+            this.buttonTrackers.delete(e.gamepad.index);
+            this.buttonMappings.delete(e.gamepad.index);
+        });
+        window.addEventListener('blur', () => {
+            for (const tracker of this.buttonTrackers.values()) {
+                tracker.clear();
+            }
+        });
+    }
+    update() {
+        const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];
+        const pressed = [];
+        const released = [];
+        for (let i = 0; i < gamepads.length; i++) {
+            const gamepad = gamepads[i];
+            if (gamepad) {
+                this.connectedGamepads.set(i, gamepad);
+                let tracker = this.buttonTrackers.get(i);
+                if (!tracker) {
+                    tracker = new InputStateTracker();
+                    this.buttonTrackers.set(i, tracker);
+                }
+                // Get or update the button mapping for this gamepad
+                let mapping = this.buttonMappings.get(i);
+                if (!mapping) {
+                    mapping = gamepadMapping.getMapping(gamepad);
+                    this.buttonMappings.set(i, mapping);
+                }
+                const pressedButtons = new Set();
+                for (let j = 0; j < gamepad.buttons.length; j++) {
+                    if (gamepad.buttons[j].pressed) {
+                        // Map the raw button index to standard button index
+                        const standardIndex = mapping.toStandard.get(j);
+                        if (standardIndex !== undefined) {
+                            pressedButtons.add(standardIndex);
+                        }
+                    }
+                }
+                const changes = tracker.update(pressedButtons);
+                for (const buttonIndex of changes.justPressed) {
+                    pressed.push({
+                        gamepadIndex: i,
+                        buttonIndex,
+                        buttonName: getButtonName(buttonIndex),
+                        rawButtonIndex: mapping.fromStandard.get(buttonIndex) ?? buttonIndex,
+                    });
+                }
+                for (const buttonIndex of changes.justReleased) {
+                    released.push({
+                        gamepadIndex: i,
+                        buttonIndex,
+                        buttonName: getButtonName(buttonIndex),
+                        rawButtonIndex: mapping.fromStandard.get(buttonIndex) ?? buttonIndex,
+                    });
+                }
+            }
+        }
+        return { pressed, released };
+    }
+    isConnected(gamepadIndex) {
+        return this.connectedGamepads.has(gamepadIndex);
+    }
+    /**
+     * Check if a button is currently pressed on a specific gamepad
+     * Uses mapped button indices (standard layout)
+     */
+    isButtonDown(gamepadIndex, button) {
+        const buttonIndex = typeof button === 'string' ? getButtonIndex(button) : button;
+        if (buttonIndex === undefined)
+            return false;
+        const tracker = this.buttonTrackers.get(gamepadIndex);
+        return tracker ? tracker.isDown(buttonIndex) : false;
+    }
+    isButtonDownOnAny(button) {
+        const buttonIndex = typeof button === 'string' ? getButtonIndex(button) : button;
+        if (buttonIndex === undefined)
+            return false;
+        for (const tracker of this.buttonTrackers.values()) {
+            if (tracker.isDown(buttonIndex))
+                return true;
+        }
+        return false;
+    }
+    getPressedButtons(gamepadIndex) {
+        const tracker = this.buttonTrackers.get(gamepadIndex);
+        return tracker ? tracker.getCurrentState() : new Set();
+    }
+    getConnectedGamepads() {
+        return Array.from(this.connectedGamepads.keys());
+    }
+    /**
+     * Get the raw Gamepad object for a specific index
+     */
+    getGamepad(gamepadIndex) {
+        return this.connectedGamepads.get(gamepadIndex);
+    }
+    /**
+     * Get the button mapping for a specific gamepad
+     */
+    getButtonMapping(gamepadIndex) {
+        return this.buttonMappings.get(gamepadIndex);
+    }
+    /**
+     * Check if a gamepad has a known mapping from the database
+     */
+    hasMapping(gamepadIndex) {
+        const mapping = this.buttonMappings.get(gamepadIndex);
+        return mapping?.hasMapping ?? false;
+    }
+    /**
+     * Get the controller name for a specific gamepad
+     */
+    getControllerName(gamepadIndex) {
+        const mapping = this.buttonMappings.get(gamepadIndex);
+        return mapping?.controllerName;
+    }
+    getAxis(gamepadIndex, axisIndex) {
+        const gamepad = this.connectedGamepads.get(gamepadIndex);
+        if (!gamepad || axisIndex < 0 || axisIndex >= gamepad.axes.length)
+            return 0;
+        return applyDeadzone(gamepad.axes[axisIndex]);
+    }
+    getLeftStick(gamepadIndex) {
+        const gamepad = this.connectedGamepads.get(gamepadIndex);
+        if (!gamepad || gamepad.axes.length < 2)
+            return { x: 0, y: 0 };
+        return applyRadialDeadzone(gamepad.axes[0], gamepad.axes[1]);
+    }
+    getRightStick(gamepadIndex) {
+        const gamepad = this.connectedGamepads.get(gamepadIndex);
+        if (!gamepad || gamepad.axes.length < 4)
+            return { x: 0, y: 0 };
+        return applyRadialDeadzone(gamepad.axes[2], gamepad.axes[3]);
+    }
+}
+export const gamepad = new Gamepad();

package/dist/graphics.d.ts

@@ -0,0 +1,80 @@
+import type { Vector2 } from './vector2';
+import type { Rect } from './rect';
+type DrawMode = 'fill' | 'line';
+export type Color = [number, number, number, number?] | string;
+export type Quad = Rect;
+export type { Vector2, Rect };
+export type Canvas = {
+    size: Vector2;
+    element: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+};
+export type ShapeProps = {
+    color?: Color;
+    lineWidth?: number;
+    lineCap?: 'butt' | 'round' | 'square';
+    lineJoin?: 'bevel' | 'miter' | 'round';
+    miterLimit?: number;
+};
+export type DrawProps = ShapeProps & {
+    quad?: Quad;
+    r?: number;
+    scale?: number | Vector2;
+    origin?: number | Vector2;
+};
+export type PrintProps = {
+    font?: string;
+    limit?: number;
+    align?: 'left' | 'center' | 'right';
+};
+export declare class ImageHandle {
+    readonly path: string;
+    private element;
+    private loadPromise;
+    private isLoaded;
+    constructor(path: string);
+    isReady(): boolean;
+    ready(): Promise<void>;
+    get size(): Vector2;
+    getElement(): HTMLImageElement | null;
+}
+export declare class Graphics {
+    private ctx;
+    private screenCtx;
+    private canvases;
+    private backgroundColor;
+    private images;
+    private defaultFont;
+    setContext(ctx: CanvasRenderingContext2D | null): void;
+    private applyColor;
+    private setStrokeProps;
+    clear(): void;
+    setBackgroundColor(color: Color): void;
+    rectangle(mode: DrawMode, color: Color, rect: Rect, props?: ShapeProps): void;
+    circle(mode: DrawMode, color: Color, position: Vector2, radii: number | Vector2, props?: ShapeProps & {
+        angle?: number;
+        arc?: [number, number];
+    }): void;
+    line(color: Color, points: Vector2[], props?: ShapeProps): void;
+    print(color: Color, text: string, position: Vector2, props?: PrintProps): void;
+    private wrapText;
+    private getFontHeight;
+    setFont(size: number, font?: string): void;
+    getFont(): string;
+    newImage(path: string): ImageHandle;
+    draw(handle: ImageHandle, position: Vector2, props?: DrawProps): void;
+    push(): void;
+    pop(): void;
+    translate(delta: Vector2): void;
+    rotate(angle: number): void;
+    scale(s: number | Vector2): void;
+    getCanvasSize(): Vector2;
+    newCanvas(size: Vector2): Canvas;
+    setCanvas(canvas?: Canvas | null): void;
+    clip(rect?: Rect): void;
+    polygon(mode: DrawMode, color: Color, points: Vector2[], props?: ShapeProps): void;
+    arc(mode: DrawMode, x: number, y: number, radius: number, angle1: number, angle2: number, props?: ShapeProps): void;
+    points(color: Color, points: Vector2[]): void;
+}
+export declare const graphics: Graphics;
+//# sourceMappingURL=graphics.d.ts.map

package/dist/graphics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphics.d.ts","sourceRoot":"","sources":["../src/graphics.ts"],"names":[],"mappings":"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"}

package/dist/graphics.js

@@ -0,0 +1,388 @@
+export class ImageHandle {
+    constructor(path) {
+        Object.defineProperty(this, "path", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "element", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "loadPromise", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.path = path;
+        this.loadPromise = new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                this.element = img;
+                this.isLoaded = true;
+                resolve();
+            };
+            img.onerror = () => {
+                reject(new Error(`Failed to load image: ${path}`));
+            };
+            img.src = path;
+        });
+    }
+    isReady() {
+        return this.isLoaded;
+    }
+    ready() {
+        return this.loadPromise;
+    }
+    get size() {
+        return [this.element?.width ?? 0, this.element?.height ?? 0];
+    }
+    getElement() {
+        return this.element;
+    }
+}
+function parseColor(color) {
+    if (typeof color === 'string') {
+        return color;
+    }
+    const [r, g, b, a = 1] = color;
+    return `rgba(${r * 255}, ${g * 255}, ${b * 255}, ${a})`;
+}
+export class Graphics {
+    constructor() {
+        Object.defineProperty(this, "ctx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "screenCtx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "canvases", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "backgroundColor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: [0, 0, 0, 1]
+        });
+        Object.defineProperty(this, "images", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "defaultFont", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: '16px sans-serif'
+        });
+    }
+    setContext(ctx) {
+        this.screenCtx = ctx;
+        this.ctx = ctx;
+        if (ctx) {
+            ctx.font = this.defaultFont;
+        }
+    }
+    applyColor(color) {
+        return parseColor(color ?? [1, 1, 1, 1]);
+    }
+    setStrokeProps(props) {
+        if (!this.ctx)
+            return;
+        // Always reset to defaults first, then apply any custom props
+        this.ctx.lineWidth = props?.lineWidth ?? 1;
+        this.ctx.lineCap = props?.lineCap ?? 'butt';
+        this.ctx.lineJoin = props?.lineJoin ?? 'miter';
+        this.ctx.miterLimit = props?.miterLimit ?? 10;
+    }
+    clear() {
+        if (!this.ctx)
+            return;
+        this.ctx.fillStyle = parseColor(this.backgroundColor);
+        this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+    }
+    setBackgroundColor(color) {
+        this.backgroundColor = color;
+        this.clear();
+    }
+    rectangle(mode, color, rect, props) {
+        if (!this.ctx)
+            return;
+        const [x, y, width, height] = rect;
+        const parsedColor = this.applyColor(color);
+        if (mode === 'fill') {
+            this.ctx.fillStyle = parsedColor;
+            this.ctx.fillRect(x, y, width, height);
+        }
+        else {
+            this.setStrokeProps(props);
+            this.ctx.strokeStyle = parsedColor;
+            this.ctx.strokeRect(x, y, width, height);
+        }
+    }
+    circle(mode, color, position, radii, props) {
+        if (!this.ctx)
+            return;
+        const [x, y] = position;
+        const parsedColor = this.applyColor(color);
+        const [rx, ry] = typeof radii === 'number' ? [radii, radii] : radii;
+        const [startAngle, endAngle] = props?.arc ?? [0, Math.PI * 2];
+        const rotation = props?.angle ?? 0;
+        this.ctx.save();
+        this.ctx.translate(x, y);
+        this.ctx.rotate(rotation);
+        this.ctx.scale(rx, ry);
+        this.ctx.beginPath();
+        this.ctx.arc(0, 0, 1, startAngle, endAngle);
+        this.ctx.closePath();
+        this.ctx.restore();
+        if (mode === 'fill') {
+            this.ctx.fillStyle = parsedColor;
+            this.ctx.fill();
+        }
+        else {
+            this.setStrokeProps(props);
+            this.ctx.strokeStyle = parsedColor;
+            this.ctx.stroke();
+        }
+    }
+    line(color, points, props) {
+        if (!this.ctx || points.length < 2)
+            return;
+        const parsedColor = this.applyColor(color);
+        this.setStrokeProps(props);
+        this.ctx.beginPath();
+        const [[x0, y0], ...rest] = points;
+        this.ctx.moveTo(x0, y0);
+        rest.forEach(([x, y]) => this.ctx.lineTo(x, y));
+        this.ctx.strokeStyle = parsedColor;
+        this.ctx.stroke();
+    }
+    print(color, text, position, props) {
+        if (!this.ctx)
+            return;
+        const [x, y] = position;
+        const { font = this.defaultFont, limit, align = 'left' } = props ?? {};
+        this.ctx.fillStyle = parseColor(color);
+        this.ctx.font = font;
+        if (limit !== undefined) {
+            const lines = this.wrapText(text, limit);
+            const lineHeight = this.getFontHeight();
+            lines.forEach((line, index) => {
+                const lineWidth = this.ctx.measureText(line).width;
+                const drawX = align === 'center' ? x + (limit - lineWidth) / 2 :
+                    align === 'right' ? x + limit - lineWidth : x;
+                this.ctx.fillText(line, drawX, y + index * lineHeight);
+            });
+        }
+        else {
+            this.ctx.fillText(text, x, y);
+        }
+    }
+    wrapText(text, maxWidth) {
+        if (!this.ctx)
+            return [text];
+        const words = text.split(' ');
+        const [first, ...rest] = words;
+        const lines = [];
+        let currentLine = first ?? '';
+        rest.forEach((word) => {
+            const width = this.ctx.measureText(currentLine + ' ' + word).width;
+            if (width < maxWidth) {
+                currentLine += ' ' + word;
+            }
+            else {
+                lines.push(currentLine);
+                currentLine = word;
+            }
+        });
+        lines.push(currentLine);
+        return lines;
+    }
+    getFontHeight() {
+        if (!this.ctx)
+            return 16;
+        const match = this.ctx.font.match(/(\d+)px/);
+        return match ? parseInt(match[1]) : 16;
+    }
+    setFont(size, font = 'sans-serif') {
+        if (!this.ctx)
+            return;
+        this.defaultFont = `${size}px ${font}`;
+        this.ctx.font = this.defaultFont;
+    }
+    getFont() {
+        return this.defaultFont;
+    }
+    newImage(path) {
+        let handle = this.images.get(path);
+        if (!handle) {
+            handle = new ImageHandle(path);
+            this.images.set(path, handle);
+        }
+        return handle;
+    }
+    draw(handle, position, props) {
+        if (!this.ctx)
+            return;
+        const imageHandle = this.images.get(handle.path);
+        if (!imageHandle?.isReady())
+            return;
+        const element = imageHandle.getElement();
+        if (!element)
+            return;
+        const [x, y] = position;
+        const { r = 0, scale = 1, origin = 0, quad } = props ?? {};
+        const [sx, sy] = typeof scale === 'number' ? [scale, scale] : scale;
+        const [ox, oy] = typeof origin === 'number' ? [origin, origin] : origin;
+        this.ctx.save();
+        this.ctx.translate(x, y);
+        this.ctx.rotate(r);
+        this.ctx.scale(sx, sy);
+        if (quad) {
+            const [qx, qy, qw, qh] = quad;
+            this.ctx.drawImage(element, qx, qy, qw, qh, -ox, -oy, qw, qh);
+        }
+        else {
+            this.ctx.drawImage(element, -ox, -oy);
+        }
+        this.ctx.restore();
+    }
+    push() {
+        if (!this.ctx)
+            return;
+        this.ctx.save();
+    }
+    pop() {
+        if (!this.ctx)
+            return;
+        this.ctx.restore();
+    }
+    translate(delta) {
+        if (!this.ctx)
+            return;
+        const [x, y] = delta;
+        this.ctx.translate(x, y);
+    }
+    rotate(angle) {
+        if (!this.ctx)
+            return;
+        this.ctx.rotate(angle);
+    }
+    scale(s) {
+        if (!this.ctx)
+            return;
+        if (typeof s === 'number') {
+            this.ctx.scale(s, s);
+        }
+        else {
+            const [sx, sy] = s;
+            this.ctx.scale(sx, sy);
+        }
+    }
+    getCanvasSize() {
+        const width = this.ctx?.canvas.width ?? 800;
+        const height = this.ctx?.canvas.height ?? 600;
+        return [width, height];
+    }
+    newCanvas(size) {
+        const [width, height] = size;
+        const element = document.createElement('canvas');
+        element.width = width;
+        element.height = height;
+        const ctx = element.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to create canvas context');
+        }
+        const canvas = { size, element, ctx };
+        this.canvases.set(canvas, true);
+        return canvas;
+    }
+    setCanvas(canvas) {
+        if (canvas) {
+            this.ctx = canvas.ctx;
+        }
+        else {
+            this.ctx = this.screenCtx;
+        }
+    }
+    clip(rect) {
+        if (!this.ctx)
+            return;
+        if (rect) {
+            const [x, y, w, h] = rect;
+            this.ctx.beginPath();
+            this.ctx.rect(x, y, w, h);
+            this.ctx.clip();
+        }
+        else {
+            this.ctx.beginPath();
+            this.ctx.rect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+            this.ctx.clip();
+        }
+    }
+    polygon(mode, color, points, props) {
+        if (!this.ctx || points.length < 3)
+            return;
+        const parsedColor = this.applyColor(color);
+        this.ctx.beginPath();
+        const [[x0, y0], ...rest] = points;
+        this.ctx.moveTo(x0, y0);
+        rest.forEach(([x, y]) => this.ctx.lineTo(x, y));
+        this.ctx.closePath();
+        if (mode === 'fill') {
+            this.ctx.fillStyle = parsedColor;
+            this.ctx.fill();
+        }
+        else {
+            this.setStrokeProps(props);
+            this.ctx.strokeStyle = parsedColor;
+            this.ctx.stroke();
+        }
+    }
+    arc(mode, x, y, radius, angle1, angle2, props) {
+        if (!this.ctx)
+            return;
+        const color = this.applyColor(props?.color);
+        this.ctx.beginPath();
+        this.ctx.arc(x, y, radius, angle1, angle2);
+        if (mode === 'fill') {
+            this.ctx.fillStyle = color;
+            this.ctx.fill();
+        }
+        else {
+            this.setStrokeProps(props);
+            this.ctx.strokeStyle = color;
+            this.ctx.stroke();
+        }
+    }
+    points(color, points) {
+        if (!this.ctx)
+            return;
+        const parsedColor = this.applyColor(color);
+        this.ctx.fillStyle = parsedColor;
+        points.forEach(([x, y]) => this.ctx.fillRect(x, y, 1, 1));
+    }
+}
+export const graphics = new Graphics();