@gg-web-engine/mobile-controls 0.0.0-stage → 0.0.78

package/dist/controls/touch-dpad.d.ts

@@ -0,0 +1,27 @@
+import { TouchControlOptions } from './touch-control';
+import { TouchAxisControl } from './touch-axis-control';
+export type TouchDPadOptions = TouchControlOptions & {
+    /** Whether two neighboring directions can be held at once. `true` by default. */
+    diagonals?: boolean;
+    /** What each arm shows: markup or a DOM node. Arrows by default. */
+    content?: {
+        up?: string | Node;
+        down?: string | Node;
+        left?: string | Node;
+        right?: string | Node;
+    };
+};
+/**
+ * An on-screen directional pad: four arms read as one control, so a thumb slides from one direction
+ * to another without lifting. Each axis of its value is -1, 0 or 1.
+ */
+export declare class TouchDPad extends TouchAxisControl {
+    readonly diagonals: boolean;
+    private readonly arms;
+    constructor(options?: TouchDPadOptions);
+    protected onPointerStart(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerEnd(): void;
+    private update;
+    private apply;
+}

package/dist/controls/touch-dpad.js

@@ -0,0 +1,61 @@
+import { Pnt2 } from '@gg-web-engine/core';
+import { TouchAxisControl } from './touch-axis-control';
+import { MobileControlsIcons } from '../icons';
+const ARMS = ['up', 'down', 'left', 'right'];
+/**
+ * An on-screen directional pad: four arms read as one control, so a thumb slides from one direction
+ * to another without lifting. Each axis of its value is -1, 0 or 1.
+ */
+export class TouchDPad extends TouchAxisControl {
+    constructor(options = {}) {
+        var _a, _b, _c;
+        super('dpad', options);
+        this.diagonals = (_a = options.diagonals) !== null && _a !== void 0 ? _a : true;
+        this.arms = {};
+        for (const arm of ARMS) {
+            const element = document.createElement('div');
+            element.className = `gg-mc-dpad-arm gg-mc-dpad-arm--${arm}`;
+            const content = (_c = (_b = options.content) === null || _b === void 0 ? void 0 : _b[arm]) !== null && _c !== void 0 ? _c : MobileControlsIcons[arm];
+            if (typeof content === 'string') {
+                element.innerHTML = content;
+            }
+            else {
+                element.appendChild(content);
+            }
+            this.arms[arm] = element;
+            this.element.appendChild(element);
+        }
+    }
+    onPointerStart(event) {
+        this.update(event);
+    }
+    onPointerMove(event) {
+        this.update(event);
+    }
+    onPointerEnd() {
+        this.apply(0, 0);
+    }
+    update(event) {
+        const rect = this.element.getBoundingClientRect();
+        const radius = rect.width / 2 || 50;
+        const offset = {
+            x: (event.clientX - (rect.left + rect.width / 2)) / radius,
+            y: (event.clientY - (rect.top + rect.height / 2)) / radius,
+        };
+        if (Pnt2.len(offset) < 0.18) {
+            this.apply(0, 0);
+            return;
+        }
+        // split the circle into 8 sectors (4 without diagonals) and take the one the pointer is in
+        const sectors = this.diagonals ? 8 : 4;
+        const angle = (Math.round(Math.atan2(-offset.y, offset.x) / ((Math.PI * 2) / sectors)) * Math.PI * 2) / sectors;
+        this.apply(Math.round(Math.cos(angle)), Math.round(Math.sin(angle)));
+    }
+    apply(x, y) {
+        this.arms.up.classList.toggle('gg-mc-active', y > 0);
+        this.arms.down.classList.toggle('gg-mc-active', y < 0);
+        this.arms.left.classList.toggle('gg-mc-active', x < 0);
+        this.arms.right.classList.toggle('gg-mc-active', x > 0);
+        this.setValue({ x: x === 0 ? 0 : x, y: y === 0 ? 0 : y });
+    }
+}

package/dist/controls/touch-look-area.d.ts

@@ -0,0 +1,35 @@
+import { Observable } from 'rxjs';
+import { MouseInput, Point2 } from '@gg-web-engine/core';
+import { TouchControl, TouchControlOptions } from './touch-control';
+export type TouchLookAreaOptions = TouchControlOptions & {
+    /** How far, in pixels, a touch may move and still count as a tap. 10 by default. */
+    tapDistance?: number;
+    /** How long, in milliseconds, a touch may last and still count as a tap. 250 by default. */
+    tapDuration?: number;
+};
+/**
+ * An invisible area that reports how a finger drags across it - the touch counterpart of moving the
+ * mouse to look around. Fills the whole overlay unless placed; put it before the other controls, so
+ * they stay on top of it.
+ */
+export declare class TouchLookArea extends TouchControl {
+    private readonly _delta$;
+    private readonly _tap$;
+    private readonly tapDistance;
+    private readonly tapDuration;
+    private last;
+    private start;
+    /** The movement of the dragging finger since its previous report, in pixels. */
+    get delta$(): Observable<Point2>;
+    /** A short touch that did not turn into a drag, with its client position. */
+    get tap$(): Observable<Point2>;
+    constructor(options?: TouchLookAreaOptions);
+    /**
+     * Makes dragging over the area turn a view the way moving the mouse does: every drag is reported
+     * by `mouse` as a movement, multiplied by `sensitivity`.
+     */
+    bindMouse(mouse: MouseInput, sensitivity?: number): this;
+    protected onPointerStart(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerEnd(event: PointerEvent | null): void;
+}

package/dist/controls/touch-look-area.js

@@ -0,0 +1,61 @@
+import { Subject, takeUntil } from 'rxjs';
+import { TouchControl } from './touch-control';
+/**
+ * An invisible area that reports how a finger drags across it - the touch counterpart of moving the
+ * mouse to look around. Fills the whole overlay unless placed; put it before the other controls, so
+ * they stay on top of it.
+ */
+export class TouchLookArea extends TouchControl {
+    /** The movement of the dragging finger since its previous report, in pixels. */
+    get delta$() {
+        return this._delta$.pipe(takeUntil(this.disposed$));
+    }
+    /** A short touch that did not turn into a drag, with its client position. */
+    get tap$() {
+        return this._tap$.pipe(takeUntil(this.disposed$));
+    }
+    constructor(options = {}) {
+        var _a, _b;
+        super('look-area', options);
+        this._delta$ = new Subject();
+        this._tap$ = new Subject();
+        this.last = { x: 0, y: 0 };
+        this.start = null;
+        this.tapDistance = (_a = options.tapDistance) !== null && _a !== void 0 ? _a : 10;
+        this.tapDuration = (_b = options.tapDuration) !== null && _b !== void 0 ? _b : 250;
+        if (!options.placement) {
+            this.element.style.inset = '0';
+        }
+    }
+    /**
+     * Makes dragging over the area turn a view the way moving the mouse does: every drag is reported
+     * by `mouse` as a movement, multiplied by `sensitivity`.
+     */
+    bindMouse(mouse, sensitivity = 1) {
+        this.delta$.subscribe(delta => mouse.emulateMove({ x: delta.x * sensitivity, y: delta.y * sensitivity }));
+        return this;
+    }
+    onPointerStart(event) {
+        this.last = { x: event.clientX, y: event.clientY };
+        this.start = { x: event.clientX, y: event.clientY, time: event.timeStamp, moved: false };
+    }
+    onPointerMove(event) {
+        const delta = { x: event.clientX - this.last.x, y: event.clientY - this.last.y };
+        this.last = { x: event.clientX, y: event.clientY };
+        if (this.start && Math.hypot(event.clientX - this.start.x, event.clientY - this.start.y) > this.tapDistance) {
+            this.start.moved = true;
+        }
+        if (delta.x !== 0 || delta.y !== 0) {
+            this._delta$.next(delta);
+        }
+    }
+    onPointerEnd(event) {
+        const start = this.start;
+        this.start = null;
+        if (event && event.type === 'pointerup' && start && !start.moved) {
+            if (event.timeStamp - start.time <= this.tapDuration) {
+                this._tap$.next({ x: event.clientX, y: event.clientY });
+            }
+        }
+    }
+}

package/dist/controls/touch-stick.d.ts

@@ -0,0 +1,37 @@
+import { TouchControlOptions } from './touch-control';
+import { TouchAxisControl } from './touch-axis-control';
+export type TouchStickOptions = TouchControlOptions & {
+    /**
+     * `'fixed'` (default): the stick stays where it is placed. `'floating'`: the control is a touch
+     * zone (give it a `placement` with a size), and the stick appears under the finger wherever the
+     * zone is touched, so the thumb never has to find it.
+     */
+    mode?: 'fixed' | 'floating';
+    /** Which axes the stick moves along. `'both'` by default. */
+    axes?: 'both' | 'x' | 'y';
+    /** The fraction of the travel around the center that reads as zero. 0.12 by default. */
+    deadzone?: number;
+    /**
+     * How far the knob travels from the center at full deflection, in pixels. By default 36% of the
+     * rendered width of the base.
+     */
+    travel?: number;
+};
+/**
+ * An on-screen analog stick.
+ */
+export declare class TouchStick extends TouchAxisControl {
+    readonly mode: 'fixed' | 'floating';
+    readonly axes: 'both' | 'x' | 'y';
+    readonly deadzone: number;
+    private readonly base;
+    private readonly knob;
+    private readonly travelOption;
+    private center;
+    private travel;
+    constructor(options?: TouchStickOptions);
+    protected onPointerStart(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerEnd(): void;
+    private update;
+}

package/dist/controls/touch-stick.js

@@ -0,0 +1,71 @@
+import { Pnt2 } from '@gg-web-engine/core';
+import { TouchAxisControl } from './touch-axis-control';
+/**
+ * An on-screen analog stick.
+ */
+export class TouchStick extends TouchAxisControl {
+    constructor(options = {}) {
+        var _a;
+        super('stick', options);
+        this.center = Pnt2.O;
+        this.travel = 1;
+        this.mode = options.mode || 'fixed';
+        this.axes = options.axes || 'both';
+        this.deadzone = (_a = options.deadzone) !== null && _a !== void 0 ? _a : 0.12;
+        this.travelOption = options.travel;
+        this.element.classList.add(`gg-mc-stick--${this.mode}`);
+        this.base = document.createElement('div');
+        this.base.className = 'gg-mc-stick-base';
+        this.knob = document.createElement('div');
+        this.knob.className = 'gg-mc-stick-knob';
+        this.base.appendChild(this.knob);
+        this.element.appendChild(this.base);
+    }
+    onPointerStart(event) {
+        var _a;
+        this.element.classList.add('gg-mc-active');
+        if (this.mode === 'floating') {
+            const zone = this.element.getBoundingClientRect();
+            this.base.style.left = `${event.clientX - zone.left}px`;
+            this.base.style.top = `${event.clientY - zone.top}px`;
+            this.center = { x: event.clientX, y: event.clientY };
+        }
+        const rect = this.base.getBoundingClientRect();
+        if (this.mode === 'fixed') {
+            this.center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+        }
+        this.travel = (_a = this.travelOption) !== null && _a !== void 0 ? _a : (rect.width * 0.36 || 50);
+        this.update(event);
+    }
+    onPointerMove(event) {
+        this.update(event);
+    }
+    onPointerEnd() {
+        this.element.classList.remove('gg-mc-active');
+        this.base.style.left = '';
+        this.base.style.top = '';
+        this.knob.style.transform = '';
+        this.setValue(Pnt2.O);
+    }
+    update(event) {
+        let offset = { x: (event.clientX - this.center.x) / this.travel, y: (event.clientY - this.center.y) / this.travel };
+        if (this.axes === 'x') {
+            offset.y = 0;
+        }
+        else if (this.axes === 'y') {
+            offset.x = 0;
+        }
+        const length = Pnt2.len(offset);
+        if (length > 1) {
+            offset = Pnt2.scalarMult(offset, 1 / length);
+        }
+        this.knob.style.transform = `translate(-50%, -50%) translate(${offset.x * this.travel}px, ${offset.y * this.travel}px)`;
+        if (length <= this.deadzone) {
+            this.setValue(Pnt2.O);
+            return;
+        }
+        // rescaled so the value starts from 0 right outside the deadzone instead of jumping to it
+        const scale = (Math.min(1, length) - this.deadzone) / (1 - this.deadzone) / Math.min(1, length);
+        this.setValue({ x: offset.x * scale, y: offset.y === 0 ? 0 : -offset.y * scale });
+    }
+}

package/dist/icons.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The built-in icons, as inline SVG markup drawn with `currentColor`. Pass any of them (or any other
+ * markup, or a DOM node) as a `TouchButton`'s `content`.
+ */
+export declare const MobileControlsIcons: {
+    left: string;
+    right: string;
+    up: string;
+    down: string;
+    accelerate: string;
+    brake: string;
+    handbrake: string;
+    plus: string;
+    minus: string;
+    jump: string;
+    crouch: string;
+    run: string;
+    view: string;
+};

package/dist/icons.js

@@ -0,0 +1,20 @@
+const svg = (body) => `<svg viewBox="0 0 24 24" aria-hidden="true">${body}</svg>`;
+/**
+ * The built-in icons, as inline SVG markup drawn with `currentColor`. Pass any of them (or any other
+ * markup, or a DOM node) as a `TouchButton`'s `content`.
+ */
+export const MobileControlsIcons = {
+    left: svg('<path d="M15 5l-7 7 7 7"/>'),
+    right: svg('<path d="M9 5l7 7-7 7"/>'),
+    up: svg('<path d="M5 15l7-7 7 7"/>'),
+    down: svg('<path d="M5 9l7 7 7-7"/>'),
+    accelerate: svg('<path d="M6 12l6-6 6 6M6 19l6-6 6 6"/>'),
+    brake: svg('<path d="M6 5l6 6 6-6M6 12l6 6 6-6"/>'),
+    handbrake: svg('<circle cx="12" cy="12" r="6"/><path d="M4.5 6a10 10 0 0 0 0 12M19.5 6a10 10 0 0 1 0 12M10.5 15V9h1.75a1.75 1.75 0 0 1 0 3.5H10.5"/>'),
+    plus: svg('<path d="M12 5v14M5 12h14"/>'),
+    minus: svg('<path d="M5 12h14"/>'),
+    jump: svg('<path d="M12 16V4M7 9l5-5 5 5M5 20h14"/>'),
+    crouch: svg('<path d="M12 4v12M7 11l5 5 5-5M5 20h14"/>'),
+    run: svg('<path d="M5 6l6 6-6 6M13 6l6 6-6 6"/>'),
+    view: svg('<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/>'),
+};

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export * from './controls/touch-control';
+export * from './controls/touch-button';
+export * from './controls/touch-axis-control';
+export * from './controls/touch-stick';
+export * from './controls/touch-dpad';
+export * from './controls/touch-look-area';
+export * from './inputs/tilt.input';
+export * from './layouts/car.layout';
+export * from './layouts/character.layout';
+export * from './layouts/character-2d.layout';
+export * from './layouts/free-camera.layout';
+export * from './icons';
+export * from './styles';
+export * from './mobile-controls-layout';
+export * from './mobile-controls.entity';

package/dist/index.js

@@ -0,0 +1,15 @@
+export * from './controls/touch-control';
+export * from './controls/touch-button';
+export * from './controls/touch-axis-control';
+export * from './controls/touch-stick';
+export * from './controls/touch-dpad';
+export * from './controls/touch-look-area';
+export * from './inputs/tilt.input';
+export * from './layouts/car.layout';
+export * from './layouts/character.layout';
+export * from './layouts/character-2d.layout';
+export * from './layouts/free-camera.layout';
+export * from './icons';
+export * from './styles';
+export * from './mobile-controls-layout';
+export * from './mobile-controls.entity';

package/dist/inputs/tilt.input.d.ts

@@ -0,0 +1,40 @@
+import { Observable } from 'rxjs';
+import { IInput } from '@gg-web-engine/core';
+export type TiltInputOptions = {
+    /** The tilt, in degrees, that reads as full deflection. 30 by default. */
+    maxAngle: number;
+    /** The tilt, in degrees, around level that reads as zero. 2 by default. */
+    deadzone: number;
+    /** Flips the sign of the output. `false` by default. */
+    invert: boolean;
+};
+/**
+ * An input reading how the device is tilted sideways, like a steering wheel: `value$` goes from -1
+ * (the left edge of the screen is the lower one) to 1 (the right edge is), whichever way the screen
+ * is currently rotated and whether the device is held upright or lies flat.
+ *
+ * Orientation data is available to pages served over https (or from localhost) only; anywhere else
+ * `permission$` reports `'denied'`.
+ *
+ * Some browsers (iOS Safari) only hand out orientation data after the user allowed it in a prompt
+ * that has to be opened from a user gesture. `start()` takes care of that: when a permission is
+ * needed, it asks on the next tap anywhere on the page and starts reporting once granted.
+ * `permission$` tells how that went, for an app that wants to explain itself first or to fall back
+ * to another control when denied.
+ */
+export declare class TiltInput extends IInput {
+    /** Whether the browser reports device orientation at all. */
+    static isSupported(): boolean;
+    readonly options: TiltInputOptions;
+    private readonly _value$;
+    private readonly _permission$;
+    /** Emits the current value on subscription and then every change. */
+    get value$(): Observable<number>;
+    get value(): number;
+    get permission$(): Observable<'unknown' | 'granted' | 'denied'>;
+    constructor(options?: Partial<TiltInputOptions>);
+    protected startInternal(): void;
+    protected stopInternal(): void;
+    private requestPermission;
+    private handleOrientation;
+}

package/dist/inputs/tilt.input.js

@@ -0,0 +1,106 @@
+import { BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged } from 'rxjs/operators';
+import { IInput } from '@gg-web-engine/core';
+const DEFAULT_OPTIONS = { maxAngle: 30, deadzone: 2, invert: false };
+/**
+ * An input reading how the device is tilted sideways, like a steering wheel: `value$` goes from -1
+ * (the left edge of the screen is the lower one) to 1 (the right edge is), whichever way the screen
+ * is currently rotated and whether the device is held upright or lies flat.
+ *
+ * Orientation data is available to pages served over https (or from localhost) only; anywhere else
+ * `permission$` reports `'denied'`.
+ *
+ * Some browsers (iOS Safari) only hand out orientation data after the user allowed it in a prompt
+ * that has to be opened from a user gesture. `start()` takes care of that: when a permission is
+ * needed, it asks on the next tap anywhere on the page and starts reporting once granted.
+ * `permission$` tells how that went, for an app that wants to explain itself first or to fall back
+ * to another control when denied.
+ */
+export class TiltInput extends IInput {
+    /** Whether the browser reports device orientation at all. */
+    static isSupported() {
+        return typeof window !== 'undefined' && 'DeviceOrientationEvent' in window;
+    }
+    /** Emits the current value on subscription and then every change. */
+    get value$() {
+        return this._value$.pipe(distinctUntilChanged());
+    }
+    get value() {
+        return this._value$.getValue();
+    }
+    get permission$() {
+        return this._permission$.pipe(distinctUntilChanged());
+    }
+    constructor(options = {}) {
+        super();
+        this._value$ = new BehaviorSubject(0);
+        this._permission$ = new BehaviorSubject('unknown');
+        this.options = Object.assign(Object.assign({}, DEFAULT_OPTIONS), options);
+        this.handleOrientation = this.handleOrientation.bind(this);
+        this.requestPermission = this.requestPermission.bind(this);
+    }
+    startInternal() {
+        if (!TiltInput.isSupported()) {
+            this._permission$.next('denied');
+            return;
+        }
+        if (window.isSecureContext === false) {
+            // browsers hand out orientation data to pages served over https (or from localhost) only, and
+            // on other pages stay silent instead of failing
+            console.warn('[TiltInput] device orientation is not available: the page is not served over https');
+            this._permission$.next('denied');
+            return;
+        }
+        const needsPermission = typeof DeviceOrientationEvent.requestPermission === 'function';
+        if (needsPermission && this._permission$.getValue() !== 'granted') {
+            // the prompt only opens from a handler of a finished gesture, not from a touch going down
+            window.addEventListener('touchend', this.requestPermission);
+            window.addEventListener('click', this.requestPermission);
+        }
+        else {
+            this._permission$.next('granted');
+            window.addEventListener('deviceorientation', this.handleOrientation);
+        }
+    }
+    stopInternal() {
+        window.removeEventListener('touchend', this.requestPermission);
+        window.removeEventListener('click', this.requestPermission);
+        window.removeEventListener('deviceorientation', this.handleOrientation);
+        this._value$.next(0);
+    }
+    requestPermission() {
+        window.removeEventListener('touchend', this.requestPermission);
+        window.removeEventListener('click', this.requestPermission);
+        DeviceOrientationEvent
+            .requestPermission()
+            .then((state) => {
+            this._permission$.next(state === 'granted' ? 'granted' : 'denied');
+            if (state === 'granted' && this.running) {
+                window.addEventListener('deviceorientation', this.handleOrientation);
+            }
+        })
+            .catch(() => this._permission$.next('denied'));
+    }
+    handleOrientation(event) {
+        var _a, _b, _c;
+        if (event.beta === null || event.gamma === null) {
+            return;
+        }
+        const beta = (event.beta * Math.PI) / 180;
+        const gamma = (event.gamma * Math.PI) / 180;
+        // the direction of gravity within the plane of the screen, in the device's own (portrait) axes:
+        // x towards its right edge, y towards its top edge
+        const gravityX = Math.cos(beta) * Math.sin(gamma);
+        const gravityY = -Math.sin(beta);
+        // how much of it points towards the right edge of the screen as currently rotated
+        const screenAngle = (((_c = (_b = (_a = screen.orientation) === null || _a === void 0 ? void 0 : _a.angle) !== null && _b !== void 0 ? _b : window.orientation) !== null && _c !== void 0 ? _c : 0) * Math.PI) / 180;
+        const right = gravityX * Math.cos(screenAngle) - gravityY * Math.sin(screenAngle);
+        const degrees = (Math.asin(Math.max(-1, Math.min(1, right))) * 180) / Math.PI;
+        const { maxAngle, deadzone, invert } = this.options;
+        let value = 0;
+        if (Math.abs(degrees) > deadzone) {
+            value = Math.sign(degrees) * Math.min(1, (Math.abs(degrees) - deadzone) / (maxAngle - deadzone));
+        }
+        this._value$.next(invert && value !== 0 ? -value : value);
+    }
+}

package/dist/layouts/car.layout.d.ts

@@ -0,0 +1,31 @@
+import { CarHandlingController, GgCarHandlingController } from '@gg-web-engine/core';
+import { TiltInputOptions } from '../inputs/tilt.input';
+import { LayoutCustomization, MobileControlsLayoutFactory } from '../mobile-controls-layout';
+export type CarLayoutControlId = 'steer-left' | 'steer-right' | 'steer-stick' | 'accelerate' | 'brake' | 'handbrake' | 'gear-up' | 'gear-down';
+/** The controllers `carLayout` builds controls for. */
+export type CarLayoutController = GgCarHandlingController | CarHandlingController;
+export type CarLayoutOptions = LayoutCustomization<CarLayoutController, CarLayoutControlId> & {
+    /**
+     * How the car is steered: `'buttons'` (default) - a left and a right button, `'stick'` - an analog
+     * stick moving sideways, `'tilt'` - by tilting the device like a steering wheel (see `TiltInput`).
+     */
+    steering?: 'buttons' | 'stick' | 'tilt';
+    /** Options of the `TiltInput` behind `steering: 'tilt'`. */
+    tilt?: Partial<TiltInputOptions>;
+    /** Whether there is a handbrake button (`GgCarHandlingController` only). `true` by default. */
+    handbrake?: boolean;
+    /**
+     * Whether there are gear up/down buttons (`GgCarHandlingController` only). `'auto'`
+     * (default) shows them when the driver has to
+     * shift: gear switching is enabled on the controller, and the car has a manual gearbox or the
+     * controller does not pick reverse by itself (`autoReverse`).
+     */
+    gears?: boolean | 'auto';
+};
+/**
+ * The built-in layout for the car controllers: steering on the left, pedals on the right. For a
+ * `GgCarHandlingController` also the handbrake and the gears; a bare
+ * `CarHandlingController` (the steering/throttle half, usable with any vehicle) gets the
+ * steering and the pedals alone.
+ */
+export declare function carLayout(options?: CarLayoutOptions): MobileControlsLayoutFactory<CarLayoutController>;

package/dist/layouts/car.layout.js

@@ -0,0 +1,99 @@
+import { GgCarHandlingController } from '@gg-web-engine/core';
+import { TouchButton } from '../controls/touch-button';
+import { TouchStick } from '../controls/touch-stick';
+import { MobileControlsIcons } from '../icons';
+import { TiltInput } from '../inputs/tilt.input';
+import { LayoutBuilder } from '../mobile-controls-layout';
+/**
+ * The built-in layout for the car controllers: steering on the left, pedals on the right. For a
+ * `GgCarHandlingController` also the handbrake and the gears; a bare
+ * `CarHandlingController` (the steering/throttle half, usable with any vehicle) gets the
+ * steering and the pedals alone.
+ */
+export function carLayout(options = {}) {
+    return (controller, context) => {
+        var _a, _b, _c;
+        if (controller.parent instanceof GgCarHandlingController) {
+            // the half of a `GgCarHandlingController`, whose own layout already covers it
+            return [];
+        }
+        const b = new LayoutBuilder(options);
+        const ggCar = controller instanceof GgCarHandlingController ? controller : null;
+        const direction = (ggCar ? ggCar.carHandlingInput : controller).directionsInput;
+        const steering = options.steering || 'buttons';
+        if (steering === 'buttons') {
+            b.add('steer-left', () => new TouchButton({
+                id: 'steer-left',
+                label: 'Steer left',
+                content: b.icon('steer-left', MobileControlsIcons.left),
+                placement: b.placement('steer-left', { left: 4, bottom: 4, width: 10, height: 10 }),
+            }).bindDirection(direction, { x: -1 }));
+            b.add('steer-right', () => new TouchButton({
+                id: 'steer-right',
+                label: 'Steer right',
+                content: b.icon('steer-right', MobileControlsIcons.right),
+                placement: b.placement('steer-right', { left: 16, bottom: 4, width: 10, height: 10 }),
+            }).bindDirection(direction, { x: 1 }));
+        }
+        else if (steering === 'stick') {
+            b.add('steer-stick', () => new TouchStick({
+                id: 'steer-stick',
+                label: 'Steering',
+                axes: 'x',
+                placement: b.placement('steer-stick', { left: 4, bottom: 3 }),
+            }).bindDirection(direction));
+        }
+        b.add('accelerate', () => new TouchButton({
+            id: 'accelerate',
+            label: 'Accelerate',
+            content: b.icon('accelerate', MobileControlsIcons.accelerate),
+            placement: b.placement('accelerate', { right: 4, bottom: 4, width: 10, height: 10 }),
+        }).bindDirection(direction, { y: 1 }));
+        b.add('brake', () => new TouchButton({
+            id: 'brake',
+            label: 'Brake',
+            content: b.icon('brake', MobileControlsIcons.brake),
+            placement: b.placement('brake', { right: 16, bottom: 4, width: 10, height: 10 }),
+        }).bindDirection(direction, { y: -1 }));
+        if (ggCar && ((_a = options.handbrake) !== null && _a !== void 0 ? _a : true)) {
+            b.add('handbrake', () => new TouchButton({
+                id: 'handbrake',
+                label: 'Handbrake',
+                content: b.icon('handbrake', MobileControlsIcons.handbrake),
+                placement: b.placement('handbrake', { right: 5.5, bottom: 16, width: 7, height: 7 }),
+            }).bindKey(ggCar.keyboard, ggCar.options.handbrakeKey));
+        }
+        let gears = (_b = options.gears) !== null && _b !== void 0 ? _b : 'auto';
+        if (ggCar && gears === 'auto') {
+            const isAutoGearbox = !!((_c = ggCar.car) === null || _c === void 0 ? void 0 : _c.carProperties.transmission.isAuto);
+            gears = ggCar.switchingGearsEnabled && !(isAutoGearbox && ggCar.options.autoReverse);
+        }
+        if (ggCar && gears) {
+            b.add('gear-down', () => new TouchButton({
+                id: 'gear-down',
+                label: 'Gear down',
+                content: b.icon('gear-down', MobileControlsIcons.minus),
+                placement: b.placement('gear-down', { left: 5.5, bottom: 16, width: 7, height: 7 }),
+            }).bindKey(ggCar.keyboard, ggCar.options.gearUpDownKeys[1]));
+            b.add('gear-up', () => new TouchButton({
+                id: 'gear-up',
+                label: 'Gear up',
+                content: b.icon('gear-up', MobileControlsIcons.plus),
+                placement: b.placement('gear-up', { left: 17.5, bottom: 16, width: 7, height: 7 }),
+            }).bindKey(ggCar.keyboard, ggCar.options.gearUpDownKeys[0]));
+        }
+        if (steering === 'tilt') {
+            const tilt = new TiltInput(options.tilt);
+            const subscription = tilt.value$.subscribe(x => direction.setAnalogDirection(tilt, x === 0 ? null : { x }));
+            tilt.start();
+            b.result.push({
+                dispose: () => {
+                    subscription.unsubscribe();
+                    direction.setAnalogDirection(tilt, null);
+                    tilt.stop();
+                },
+            });
+        }
+        return b.finish(controller, context);
+    };
+}