canvasengine 2.0.0-beta.5 → 2.0.0-beta.50

package/src/components/types/Spritesheet.ts

@@ -208,124 +208,6 @@ export interface TexturesOptions extends TextureOptions, TransformOptions {
 }
 
 export interface SpritesheetOptions extends TransformOptions, TextureOptions {
-    /** 
-    * Object containing all animations. 
-    * The key to the object is the name of the animation. The value is a two-dimensional array
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *         animations: [
-    *              [ { time: 0, frameX: 0, frameY: 0 } ]
-    *         ]
-    *      }
-    * }
-    * ```
-    * 
-    * The first array represents an animation group. You can put several of them together to create an animation cluster. For example, several explosions with the same spritesheet
-    * The second array represents the animation itself which will animate over time. The object indicates, over a period of time (in frame), which part of the spritesheet will be taken (`frameX`, `frameY`)
-    * 
-    * Here are the properties:
-    * 
-    * * `time`: Time in frame
-    * * `frameX`: Retrieve a frame from the spritesheet on the X-axis
-    * * `frameY`: Retrieve a frame from the spritesheet on the Y-axis
-    * * `opacity`
-    * * `pivot`
-    * * `anchor`
-    * * `rotation`
-    * * `angle`
-    * * `scale`
-    * * `skew`
-    * * `x`
-    * * `y`
-    * * `visible`
-    * * `sound`: The sound that will be played during the frame
-    * 
-    * ---
-    * **Extract Animation of Spritesheet**
-    * 
-    * Sometimes the animation is part of the image
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *          rectWidth: 64,
-    *          rectHeight: 64,
-    *          framesWidth: 10,
-    *          framesHeight: 2,
-    *          offset: {x: 0, y: 230},
-    *          sound: 'my-sound-id', // You can put a sound just for the animation
-    *          animations: [
-    *               [ { time: 0, frameX: 0, frameY: 0 } ]
-    *          ]
-    *      }
-    * }
-    * ```
-    * 
-    * Above, we can specify which part we want to recover
-    * 
-    * 1. We go to the position {0, 230} of the image (`offset`)
-    * 2. We recover cells of 64px (`rectWidth` and `rectHeight`)
-    * 3. And we get 20 cells (10 on the width, 2 on the height) (`frameX` and `frameY`)
-    * 
-    * --- 
-    * 
-    * **Advanced**
-    * 
-    * You can create an animation that will be linked to a data. For example, different animation according to a direction of the character.
-    * 
-    * Full example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: direction => [[ {time: 0, frameX: 3, frameY: direction == Direction.Up ? 0 : 1 } ]]
-    *          }
-    *      })
-    * })
-    * export class Chest  { }
-    * ```
-    * 
-    * > It is important to know that `Animation.Stand` animation is called if it exists. it only works in the case of an event that doesn't move. The direction is then sent
-    * 
-    * As you can see, the property contains a function that returns the array for the animation. Here, it is the direction but the parameters depend on the call of the animation. Example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction, RpgSprite, ISpriteCharacter } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: str => [[ {time: 0, frameX: 3, frameY: str == 'hello' ? 0 : 1 } ]]
-    *          }
-    *      }
-    * })
-    * export class Chest implements ISpriteCharacter { 
-    *      onCharacterStand(sprite: RpgSprite) {
-    *         sprite.animation.play(Animation.Stand, ['hello'])
-    *      }
-    * }
-    * ```
-    * 
-    * @prop { { [animName: string]: { animations: Array<Array<FrameOptions>> | Function, ...other } } } [textures]
-    * @memberof Spritesheet
-    * */
     textures?: {
         [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>
     }

package/src/directives/Controls.ts

@@ -0,0 +1,254 @@
+import { Directive, registerDirective } from "../engine/directive";
+import { Element, isElementFrozen } from "../engine/reactive";
+import { ControlsBase, Controls } from "./ControlsBase";
+import { KeyboardControls } from "./KeyboardControls";
+import { GamepadControls, GamepadConfig } from "./GamepadControls";
+import { JoystickControls, JoystickConfig } from "./JoystickControls";
+import { Signal, isSignal } from "@signe/reactive";
+import { Subscription } from "rxjs";
+
+/**
+ * Controls directive that coordinates keyboard, gamepad, and joystick input systems
+ * 
+ * This directive automatically activates keyboard, gamepad, and joystick controls when available.
+ * The gamepad is automatically enabled if joypad.js is detected in the environment.
+ * 
+ * All systems share the same control configuration and can work simultaneously.
+ * 
+ * @example
+ * ```html
+ * <Sprite 
+ *   image="path/to/image.png" 
+ *   controls={controlsConfig}
+ *   x={x}
+ *   y={y}
+ * />
+ * ```
+ */
+export class ControlsDirective extends Directive {
+    private keyboardControls: KeyboardControls | null = null;
+    private gamepadControls: GamepadControls | null = null;
+    private joystickControls: JoystickControls | null = null;
+    private freezeSubscription: Subscription | null = null;
+    private element: Element | null = null;
+
+    /**
+     * Initialize the controls directive
+     * Sets up keyboard, gamepad, and joystick controls if available
+     */
+    onInit(element: Element<any>) {
+        this.element = element;
+        const value = element.props.controls?.value ?? element.props.controls;
+        if (!value) return;
+
+        // Initialize keyboard controls (always available)
+        this.keyboardControls = new KeyboardControls();
+        this.keyboardControls.setInputs(value as Controls);
+        this.keyboardControls.start();
+
+        // Initialize gamepad controls if gamepad config is present
+        // GamepadControls will handle joypad.js availability internally
+        const gamepadConfig = (value as Controls & { gamepad?: GamepadConfig }).gamepad;
+        if (gamepadConfig !== undefined && gamepadConfig.enabled !== false) {
+            this.gamepadControls = new GamepadControls();
+            this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+            this.gamepadControls.start();
+        }
+
+        // Initialize joystick controls if joystick config is present
+        const joystickConfig = (value as Controls & { joystick?: JoystickConfig }).joystick;
+        if (joystickConfig !== undefined && joystickConfig.enabled !== false) {
+            this.joystickControls = new JoystickControls();
+            this.joystickControls.setInputs(value as Controls & { joystick?: JoystickConfig });
+            this.joystickControls.start();
+        }
+
+        // Check initial freeze state
+        if (isElementFrozen(element)) {
+            this.stopInputs();
+        }
+
+        // Subscribe to freeze prop if it's a signal
+        const freezeProp = element.propObservables?.freeze ?? element.props?.freeze;
+        if (isSignal(freezeProp)) {
+            this.freezeSubscription = ((freezeProp as Signal<boolean>).observable as any).subscribe((isFrozen) => {
+                if (isFrozen) {
+                    this.stopInputs();
+                } else {
+                    this.listenInputs();
+                }
+            });
+        }
+    }
+
+    /**
+     * Mount hook (no specific action needed)
+     */
+    onMount(element: Element<any>) { }
+
+    /**
+     * Update controls configuration
+     * Updates both keyboard and gamepad controls
+     */
+    onUpdate(props: any, element: Element<any>) {
+        const value = props.controls?.value ?? props.controls;
+        if (value) {
+            if (this.keyboardControls) {
+                this.keyboardControls.setInputs(value as Controls);
+            }
+
+            if (this.gamepadControls) {
+                this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+            }
+        }
+
+        // Handle freeze prop update
+        if (props.freeze !== undefined && this.element) {
+            if (isElementFrozen(this.element)) {
+                this.stopInputs();
+            } else {
+                this.listenInputs();
+            }
+        }
+    }
+
+    /**
+     * Cleanup and destroy all control systems
+     */
+    onDestroy(element: Element<any>) {
+        if (this.freezeSubscription) {
+            this.freezeSubscription.unsubscribe();
+            this.freezeSubscription = null;
+        }
+
+        if (this.keyboardControls) {
+            this.keyboardControls.destroy();
+            this.keyboardControls = null;
+        }
+
+        if (this.gamepadControls) {
+            this.gamepadControls.destroy();
+            this.gamepadControls = null;
+        }
+
+        if (this.joystickControls) {
+            this.joystickControls.destroy();
+            this.joystickControls = null;
+        }
+
+        this.element = null;
+    }
+
+    /**
+     * Get a control by input name
+     * Delegates to keyboard controls (primary system)
+     * 
+     * @param inputName - Name of the input/key
+     * @returns BoundKey if found, undefined otherwise
+     */
+    getControl(inputName: string) {
+        return this.keyboardControls?.getControl(inputName);
+    }
+
+    /**
+     * Get all bound controls
+     * Delegates to keyboard controls (primary system)
+     * 
+     * @returns Object mapping input names to BoundKey objects
+     */
+    getControls() {
+        return this.keyboardControls?.getControls() || {};
+    }
+
+    /**
+     * Apply a control action programmatically
+     * Applies to both keyboard and gamepad if available
+     * 
+     * @param controlName - Name of the control
+     * @param isDown - Whether the control is pressed (true) or released (false)
+     * @param payload - Optional payload to pass to keyDown/keyUp callbacks (e.g., { power: 0.8 })
+     * @returns Promise that resolves when the action is complete
+     */
+    async applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void> {
+        if (this.keyboardControls) {
+            await this.keyboardControls.applyControl(controlName, isDown);
+        }
+        if (this.gamepadControls) {
+            await this.gamepadControls.applyControl(controlName, isDown, payload);
+        }
+        if (this.joystickControls) {
+            await this.joystickControls.applyControl(controlName, isDown, payload);
+        }
+    }
+
+    /**
+     * Stop listening to inputs
+     * Stops keyboard, gamepad, and joystick input processing
+     */
+    stopInputs() {
+        if (this.keyboardControls) {
+            this.keyboardControls.stopInputs();
+        }
+        if (this.gamepadControls) {
+            this.gamepadControls.stopInputs();
+        }
+        if (this.joystickControls) {
+            this.joystickControls.stopInputs();
+        }
+    }
+
+    /**
+     * Resume listening to inputs
+     * Resumes keyboard, gamepad, and joystick input processing
+     */
+    listenInputs() {
+        if (this.keyboardControls) {
+            this.keyboardControls.listenInputs();
+        }
+        if (this.gamepadControls) {
+            this.gamepadControls.listenInputs();
+        }
+        if (this.joystickControls) {
+            this.joystickControls.listenInputs();
+        }
+    }
+
+    /**
+     * Get the current controls configuration
+     * Returns keyboard controls options (both systems share the same config)
+     * 
+     * @returns The controls options object
+     */
+    get options(): Controls {
+        return this.keyboardControls?.options || {};
+    }
+
+    /**
+     * Get the keyboard controls instance
+     * 
+     * @returns KeyboardControls instance or null
+     */
+    get keyboard(): KeyboardControls | null {
+        return this.keyboardControls;
+    }
+
+    /**
+     * Get the gamepad controls instance
+     * 
+     * @returns GamepadControls instance or null
+     */
+    get gamepad(): GamepadControls | null {
+        return this.gamepadControls;
+    }
+
+    /**
+     * Get the joystick controls instance
+     * 
+     * @returns JoystickControls instance or null
+     */
+    get joystick(): JoystickControls | null {
+        return this.joystickControls;
+    }
+}
+
+registerDirective('controls', ControlsDirective);

package/src/directives/ControlsBase.ts

@@ -0,0 +1,267 @@
+import { fps2ms } from "../engine/utils";
+
+export interface ControlOptions {
+    repeat?: boolean;
+    bind: string | string[];
+    keyUp?: Function;
+    keyDown?: Function;
+    throttle?: number;
+    delay?: number | {
+        duration: number;
+        otherControls?: (string)[];
+    };
+}
+
+export interface Controls {
+    [controlName: string]: ControlOptions;
+}
+
+export type BoundKey = { actionName: string, options: ControlOptions, parameters?: any };
+
+/**
+ * Abstract base class for control systems (keyboard, gamepad, etc.)
+ * 
+ * This class provides common functionality shared across all control implementations:
+ * - Input binding and management
+ * - Control configuration
+ * - Input state management
+ * - Common methods for querying and triggering controls
+ * 
+ * @example
+ * ```ts
+ * class MyControls extends ControlsBase {
+ *   protected setupListeners() {
+ *     // Setup specific input listeners
+ *   }
+ *   
+ *   protected cleanup() {
+ *     // Cleanup specific resources
+ *   }
+ *   
+ *   protected preStep() {
+ *     // Process inputs each frame
+ *   }
+ * }
+ * ```
+ */
+export abstract class ControlsBase {
+    protected boundKeys: {
+        [keyName: string]: BoundKey
+    } = {}
+    protected stop: boolean = false
+    protected _controlsOptions: Controls = {}
+    protected interval: any
+    protected serverFps: number = 60
+
+    /**
+     * Setup input listeners specific to this control implementation
+     * Must be implemented by subclasses
+     */
+    protected abstract setupListeners(): void;
+
+    /**
+     * Cleanup resources specific to this control implementation
+     * Must be implemented by subclasses
+     */
+    protected abstract cleanup(): void;
+
+    /**
+     * Process inputs each step/frame
+     * Must be implemented by subclasses
+     */
+    protected abstract preStep(): void;
+
+    /**
+     * Start the control processing loop
+     * Initializes listeners and starts the interval
+     */
+    start() {
+        this.setupListeners();
+        this.interval = setInterval(() => {
+            this.preStep()
+        }, fps2ms(this.serverFps ?? 60))
+    }
+
+    /**
+     * Stop the control processing and cleanup resources
+     */
+    destroy() {
+        if (this.interval) {
+            clearInterval(this.interval)
+        }
+        this.cleanup();
+    }
+
+    /**
+     * Bind a key/input to a control action
+     * 
+     * @param keys - Single key or array of keys to bind
+     * @param actionName - Name of the control action
+     * @param options - Control options (repeat, keyDown, keyUp, etc.)
+     * @param parameters - Optional parameters to pass to the control callbacks
+     */
+    protected bindKey(keys: string | string[], actionName: string, options: ControlOptions, parameters?: object) {
+        if (!Array.isArray(keys)) keys = [keys]
+        const keyOptions = Object.assign({
+            repeat: false
+        }, options);
+        keys.forEach(keyName => {
+            this.boundKeys[keyName] = { actionName, options: keyOptions, parameters }
+        })
+    }
+
+    /**
+     * Apply an input action for a bound key
+     * Can be overridden by subclasses for custom behavior
+     * 
+     * @param keyName - Name of the key/input to process
+     */
+    protected applyInput(keyName: string) {
+        const boundKey = this.boundKeys[keyName];
+        if (!boundKey) return;
+
+        const { repeat, keyDown } = boundKey.options;
+        // Default implementation - subclasses may override for state tracking
+        if (keyDown) {
+            let parameters = boundKey.parameters;
+            if (typeof parameters === "function") {
+                parameters = parameters();
+            }
+            keyDown(boundKey);
+        }
+    }
+
+    /**
+     * Get a control by input name
+     * 
+     * @param inputName - Name of the input/key
+     * @returns BoundKey if found, undefined otherwise
+     * @example
+     * ```ts
+     * const control = controls.getControl('up');
+     * if (control) {
+     *   console.log(control.actionName); // 'up'
+     * }
+     * ```
+     */
+    getControl(inputName: string): BoundKey | undefined {
+        return this.boundKeys[inputName]
+    }
+
+    /**
+     * Get all bound controls
+     * 
+     * @returns Object mapping input names to BoundKey objects
+     * @example
+     * ```ts
+     * const allControls = controls.getControls();
+     * console.log(Object.keys(allControls)); // ['up', 'down', 'left', 'right', ...]
+     * ```
+     */
+    getControls(): { [key: string]: BoundKey } {
+        return this.boundKeys
+    }
+
+    /**
+     * Apply a control action programmatically
+     * 
+     * Must be implemented by subclasses to provide input-specific behavior
+     * 
+     * @param controlName - Name or identifier of the control
+     * @param isDown - Whether the control is pressed down (true) or released (false)
+     * @returns Promise that resolves when the control action is complete
+     * @example
+     * ```ts
+     * // Press a control
+     * await controls.applyControl('action', true);
+     * 
+     * // Release a control
+     * await controls.applyControl('action', false);
+     * 
+     * // Press and release (default)
+     * await controls.applyControl('action');
+     * ```
+     */
+    abstract applyControl(controlName: string | number, isDown?: boolean): Promise<void>;
+
+    /**
+     * Stop listening to inputs
+     * Input events will be ignored until listenInputs() is called
+     * 
+     * @example
+     * ```ts
+     * controls.stopInputs();
+     * // ... later
+     * controls.listenInputs();
+     * ```
+     */
+    stopInputs() {
+        this.stop = true
+    }
+
+    /**
+     * Resume listening to inputs after stopInputs() was called
+     * 
+     * @example
+     * ```ts
+     * controls.stopInputs();
+     * // ... later
+     * controls.listenInputs();
+     * ```
+     */
+    listenInputs() {
+        this.stop = false
+    }
+
+    /**
+     * Configure controls with input mappings
+     * 
+     * This method sets up the binding between input keys/buttons and control actions.
+     * It clears existing bindings and creates new ones based on the provided configuration.
+     * 
+     * @param inputs - Control configuration object
+     * @example
+     * ```ts
+     * controls.setInputs({
+     *   up: {
+     *     repeat: true,
+     *     bind: 'up',
+     *     keyDown() {
+     *       console.log('Up pressed');
+     *     }
+     *   },
+     *   action: {
+     *     bind: ['space', 'enter'],
+     *     keyDown() {
+     *       console.log('Action triggered');
+     *     }
+     *   }
+     * });
+     * ```
+     */
+    setInputs(inputs: Controls) {
+        if (!inputs) return
+        this.boundKeys = {}
+        for (let control in inputs) {
+            const option = inputs[control]
+            const { bind } = option
+            let inputsKey: any = bind
+            if (!Array.isArray(inputsKey)) {
+                inputsKey = [bind]
+            }
+            for (let input of inputsKey) {
+                this.bindKey(input, control, option)
+            }
+        }
+        this._controlsOptions = inputs
+    }
+
+    /**
+     * Get the current controls configuration
+     * 
+     * @returns The controls options object
+     */
+    get options(): Controls {
+        return this._controlsOptions
+    }
+}