import { Application, Color, Graphics, Keyboard, Scene } from '@codexo/exojs';
import { mountControls } from '@examples/runtime';

const app = new Application({
    canvas: {
        width: 1280,
        height: 720,
        mount: document.body,
        sizingMode: 'fit',
    },
    clearColor: new Color(10, 12, 20),
    loader: {
        basePath: 'assets/',
    },
});

// Two ways to read the keyboard, shown side by side:
//
//   - on-event: `inputs.onStart` / `onStop` fire once on the press / release
//     transition. Great for discrete actions (here: a recentre tap on Escape).
//   - per-frame polling: the binding returned by `inputs.onActive` samples the
//     channel buffer every frame, so reading `binding.active` inside update()
//     gives the live held-state — no callback bookkeeping required.
//
// Both WASD and the arrow keys drive the same square via a single binding per
// direction (each binding watches two channels at once).
class KeyboardScene extends Scene {
    private square!: Graphics;
    private position = { x: 400, y: 300 };
    // The structural shape of an InputBinding's pollable state (the class itself
    // is internal to the engine, but `active` / `value` are its public surface).
    private up!: { readonly active: boolean; readonly value: number };
    private down!: { readonly active: boolean; readonly value: number };
    private left!: { readonly active: boolean; readonly value: number };
    private right!: { readonly active: boolean; readonly value: number };
    private hud!: ReturnType<typeof mountControls>;

    override init(): void {
        const { width, height } = this.app.canvas;

        this.square = new Graphics();
        this.position = { x: width / 2, y: height / 2 };

        // Per-frame polling source: one binding per direction, each listening to
        // both the WASD key and the matching arrow key. We keep the references
        // and read their live state in update() rather than mutating flags.
        this.up = this.inputs.onActive([Keyboard.W, Keyboard.Up], () => {});
        this.down = this.inputs.onActive([Keyboard.S, Keyboard.Down], () => {});
        this.left = this.inputs.onActive([Keyboard.A, Keyboard.Left], () => {});
        this.right = this.inputs.onActive([Keyboard.D, Keyboard.Right], () => {});

        // On-event source: a discrete tap that snaps the square back to centre.
        this.inputs.onStart(Keyboard.Escape, () => {
            this.position.x = width / 2;
            this.position.y = height / 2;
        });

        this.hud = mountControls({
            title: 'Keyboard',
            controls: [
                { keys: ['W', 'A', 'S', 'D'], action: 'move (per-frame polling)' },
                { keys: ['↑', '↓', '←', '→'], action: 'move (same bindings)' },
                { keys: 'Esc', action: 'recentre (on-event)' },
            ],
            status: 'Held: none',
            hint: 'Click the canvas first so it has keyboard focus.',
        });
    }

    override update(delta): void {
        const { width, height } = this.app.canvas;
        const speed = 280 * delta.seconds;
        const moveX = (this.right.active ? 1 : 0) - (this.left.active ? 1 : 0);
        const moveY = (this.down.active ? 1 : 0) - (this.up.active ? 1 : 0);

        this.position.x = Math.max(20, Math.min(width - 20, this.position.x + moveX * speed));
        this.position.y = Math.max(20, Math.min(height - 20, this.position.y + moveY * speed));

        const held = [this.up.active && 'Up', this.down.active && 'Down', this.left.active && 'Left', this.right.active && 'Right'].filter(Boolean);

        this.hud.setStatus(`Held: ${held.length ? held.join(' + ') : 'none'}`);
    }

    override draw(context): void {
        context.backend.clear();
        this.square.clear();
        this.square.fillColor = new Color(120, 200, 255);
        this.square.drawRectangle(this.position.x - 20, this.position.y - 20, 40, 40);
        context.render(this.square);
    }
}

app.start(new KeyboardScene());

import { Application, Color, Graphics, Keyboard, Scene } from '@codexo/exojs';
import { mountControls } from '@examples/runtime';

const app = new Application({
    canvas: {
        width: 1280,
        height: 720,
        mount: document.body,
        sizingMode: 'fit',
    },
    clearColor: new Color(10, 12, 20),
    loader: {
        basePath: 'assets/',
    },
});

// Reverse lookup from a Keyboard channel back to a human-readable key name, so
// the binding is shown as "Space" rather than the raw channel number. The
// Keyboard enum's reverse map (numeric value -> member name) gives this for free.
const KEY_NAMES = Keyboard as unknown as Record<number, string>;

function keyName(channel: number): string {
    return KEY_NAMES[channel] ?? `Key ${channel}`;
}

// A serialisable mapping is exactly what makes a key-binding persist: write the
// plain object to localStorage on every rebind, read it back on load.
const STORAGE_KEY = 'exo-example-key-rebinding';

interface InputProfile {
    jump: number;
}

function loadProfile(): InputProfile {
    try {
        const raw = localStorage.getItem(STORAGE_KEY);

        if (raw) {
            const parsed = JSON.parse(raw) as Partial<InputProfile>;

            if (typeof parsed.jump === 'number') {
                return { jump: parsed.jump };
            }
        }
    } catch {
        // localStorage may be unavailable (sandboxed) — fall through to default.
    }

    return { jump: Keyboard.Space };
}

function saveProfile(profile: InputProfile): void {
    try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(profile));
    } catch {
        // Non-fatal — persistence is best-effort.
    }
}

class KeyRebindingScene extends Scene {
    private graphics!: Graphics;
    private profile: InputProfile = loadProfile();
    private rebindRequested = false;
    private jumpVelocity = 0;
    private heroY = 0;
    private groundY = 0;
    private jumpBinding: { unbind(): void } | undefined;
    private hud!: ReturnType<typeof mountControls>;

    override init(): void {
        const { height } = this.app.canvas;

        this.groundY = height - 240;
        this.heroY = this.groundY;
        this.graphics = new Graphics();

        // Tap J to arm a rebind; the next key pressed becomes the new jump key.
        // We arm on the *release* (onTrigger) so the J keydown itself isn't
        // captured as the new binding in the same frame.
        this.inputs.onTrigger(Keyboard.J, () => {
            this.rebindRequested = true;
            this.refreshHud();
        });

        this.app.input.onKeyDown.add(channel => {
            if (!this.rebindRequested) {
                return;
            }

            this.rebindRequested = false;
            this.profile.jump = channel;
            saveProfile(this.profile);
            this.bindJump();
            this.refreshHud();
        });

        this.bindJump();

        this.hud = mountControls({
            title: 'Key Rebinding',
            controls: [
                { keys: keyName(this.profile.jump), action: 'jump' },
                { keys: 'J', action: 'rebind jump' },
            ],
            status: '',
            hint: '',
        });

        this.refreshHud();
    }

    private bindJump(): void {
        this.jumpBinding?.unbind();
        this.jumpBinding = this.inputs.onStart(this.profile.jump, () => {
            if (this.heroY >= this.groundY - 0.5) {
                this.jumpVelocity = -560;
            }
        });
    }

    private refreshHud(): void {
        this.hud.setControls([
            { keys: keyName(this.profile.jump), action: 'jump' },
            { keys: 'J', action: 'rebind jump' },
        ]);
        this.hud.setStatus(`Jump key: ${keyName(this.profile.jump)} (saved)`);
        this.hud.setHint(this.rebindRequested ? 'Press any key to assign jump…' : 'Binding restored from localStorage on reload.');
    }

    override update(delta): void {
        // Simple gravity so the rebound jump is visible.
        this.jumpVelocity = Math.min(900, this.jumpVelocity + 1800 * delta.seconds);
        this.heroY += this.jumpVelocity * delta.seconds;

        if (this.heroY > this.groundY) {
            this.heroY = this.groundY;
            this.jumpVelocity = 0;
        }
    }

    override draw(context): void {
        const { width } = this.app.canvas;

        context.backend.clear();
        this.graphics.clear();

        // Static ground line, just below where the hero square rests.
        this.graphics.fillColor = new Color(40, 48, 64);
        this.graphics.drawRectangle(0, this.groundY + 40, width, 4);

        // Hero square — heroY is animated by the (rebindable) jump key.
        this.graphics.fillColor = new Color(255, 190, 90);
        this.graphics.drawRectangle(width / 2 - 20, this.heroY, 40, 40);

        context.render(this.graphics);
    }
}

app.start(new KeyRebindingScene());

import { Application, Color, GamepadAxis, GamepadButton, Keyboard, Scene, Sprite, Texture } from '@codexo/exojs';
import { mountControls } from '@examples/runtime';

const app = new Application({
    canvas: {
        width: 1280,
        height: 720,
        mount: document.body,
        sizingMode: 'fit',
    },
    clearColor: new Color(10, 12, 20),
    loader: {
        basePath: 'assets/',
    },
});

// The lesson: bind several *physical* inputs to a few *named actions*, then read
// only the actions in the update loop. Keyboard and gamepad feed the same
// `moveX` / `moveY` / `jump` values, so the gameplay code never branches on the
// device. Whichever device pushes a control harder this frame wins — so you can
// pick up either input mid-motion without a mode switch.
class ActionMappingScene extends Scene {
    private sprite!: Sprite;
    private keys = { left: 0, right: 0, up: 0, down: 0 };
    private stick = { x: 0, y: 0 };
    private jumpImpulse = 0;
    private lastDevice = 'keyboard';
    private actions = { moveX: 0, moveY: 0, jump: false };
    private hud!: ReturnType<typeof mountControls>;

    override async load(loader): Promise<void> {
        await loader.load(Texture, { ship: 'image/ship-a.png' });
    }

    override init(loader): void {
        const { width, height } = this.app.canvas;

        this.sprite = new Sprite(loader.get(Texture, 'ship')).setAnchor(0.5).setPosition(width / 2, height / 2);

        const pad0 = this.app.input.getGamepad(0);

        // --- Move action: keyboard WASD/arrows feed key axes ---
        this.inputs.onActive([Keyboard.A, Keyboard.Left], () => (this.keys.left = 1));
        this.inputs.onStop([Keyboard.A, Keyboard.Left], () => (this.keys.left = 0));
        this.inputs.onActive([Keyboard.D, Keyboard.Right], () => (this.keys.right = 1));
        this.inputs.onStop([Keyboard.D, Keyboard.Right], () => (this.keys.right = 0));
        this.inputs.onActive([Keyboard.W, Keyboard.Up], () => (this.keys.up = 1));
        this.inputs.onStop([Keyboard.W, Keyboard.Up], () => (this.keys.up = 0));
        this.inputs.onActive([Keyboard.S, Keyboard.Down], () => (this.keys.down = 1));
        this.inputs.onStop([Keyboard.S, Keyboard.Down], () => (this.keys.down = 0));

        // --- Move action: gamepad left stick feeds the same axes ---
        pad0.onActive(GamepadAxis.LeftStickX, value => (this.stick.x = value));
        pad0.onStop(GamepadAxis.LeftStickX, () => (this.stick.x = 0));
        pad0.onActive(GamepadAxis.LeftStickY, value => (this.stick.y = value));
        pad0.onStop(GamepadAxis.LeftStickY, () => (this.stick.y = 0));

        // --- Jump action: Space OR the South button, one shared impulse ---
        this.inputs.onStart(Keyboard.Space, () => this.queueJump('keyboard'));
        pad0.onStart(GamepadButton.South, () => this.queueJump('gamepad'));

        this.hud = mountControls({
            title: 'Action Mapping',
            controls: [
                { keys: ['W', 'A', 'S', 'D'], action: 'Move (keyboard)' },
                { keys: 'L-Stick', action: 'Move (gamepad)' },
                { keys: ['Space', 'A'], action: 'Jump (either device)' },
            ],
            status: 'Move 0.00, 0.00 · Jump idle',
            hint: 'Driven by: keyboard',
        });
    }

    private queueJump(device: string): void {
        this.jumpImpulse = -220;
        this.lastDevice = device;
    }

    override update(delta): void {
        const keyX = this.keys.right - this.keys.left;
        const keyY = this.keys.down - this.keys.up;

        // Resolve each named action from whichever device is pushing hardest.
        this.actions.moveX = Math.abs(this.stick.x) > Math.abs(keyX) ? this.stick.x : keyX;
        this.actions.moveY = Math.abs(this.stick.y) > Math.abs(keyY) ? this.stick.y : keyY;
        this.actions.jump = this.jumpImpulse < 0;

        if (this.actions.moveX !== 0 || this.actions.moveY !== 0) {
            this.lastDevice = Math.abs(this.stick.x) > Math.abs(keyX) || Math.abs(this.stick.y) > Math.abs(keyY) ? 'gamepad' : 'keyboard';
        }

        this.sprite.move(this.actions.moveX * 260 * delta.seconds, this.actions.moveY * 260 * delta.seconds);
        this.sprite.move(0, this.jumpImpulse * delta.seconds);
        this.jumpImpulse = Math.min(0, this.jumpImpulse + 800 * delta.seconds);

        this.hud.setStatus(`Move ${this.actions.moveX.toFixed(2)}, ${this.actions.moveY.toFixed(2)} · Jump ${this.actions.jump ? 'active' : 'idle'}`);
        this.hud.setHint(`Driven by: ${this.lastDevice}`);
    }

    override draw(context): void {
        context.backend.clear();
        context.render(this.sprite);
    }
}

app.start(new ActionMappingScene());