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

package/test/mobile-controls.spec.ts

@@ -0,0 +1,204 @@
+import {
+  CarHandlingController,
+  GgCarHandlingController,
+  IEntity,
+  PlayerCharacterController2d,
+  TickOrder,
+} from '@gg-web-engine/core';
+import { MOBILE_CONTROLS_STYLE_ID, MobileControls, TouchButton } from '../src';
+import { pointer, TestWorld, tick } from './helpers';
+
+class CustomController extends IEntity {
+  static readonly entityTypeName: string = 'CustomController';
+  public readonly tickOrder = TickOrder.INPUT_CONTROLLERS;
+}
+
+describe('MobileControls', () => {
+  let world: TestWorld;
+
+  beforeEach(async () => {
+    world = new TestWorld();
+    await world.init();
+  });
+
+  afterEach(() => {
+    world.dispose();
+    document.body.innerHTML = '';
+  });
+
+  const ids = (controls: MobileControls) =>
+    [...controls.element.querySelectorAll('[data-gg-mc]')].map(e => (e as HTMLElement).dataset.ggMc);
+  const control = (controls: MobileControls, id: string) => controls.element.querySelector(`.gg-mc-id-${id}`)!;
+
+  it('stays off the page on a device that is not touch-first, unless enabled outright', () => {
+    const auto = new MobileControls();
+    world.addEntity(auto);
+    expect(auto.shown).toBe(false);
+
+    auto.enabled = true;
+    expect(auto.shown).toBe(true);
+    expect(auto.element.parentElement).toBe(document.body);
+    expect(document.getElementById(MOBILE_CONTROLS_STYLE_ID)).not.toBeNull();
+  });
+
+  it('goes by the pointer media query in auto mode', () => {
+    window.matchMedia = ((query: string) => ({ matches: query === '(pointer: coarse)' })) as any;
+    const controls = new MobileControls();
+    world.addEntity(controls);
+    expect(controls.shown).toBe(true);
+    delete (window as any).matchMedia;
+  });
+
+  it('shows the layout of an active controller and swaps it as controllers change', () => {
+    const car = new GgCarHandlingController(world.keyboardInput, null);
+    world.addEntity(car);
+    const controls = new MobileControls({ enabled: true });
+    world.addEntity(controls);
+    expect(ids(controls)).toEqual(['steer-left', 'steer-right', 'accelerate', 'brake', 'handbrake', 'gear-down', 'gear-up']);
+
+    const player = new PlayerCharacterController2d(world.keyboardInput, null, {} as any);
+    player.active = false;
+    world.addEntity(player);
+    expect(ids(controls)).not.toContain('jump');
+
+    car.active = false;
+    player.active = true;
+    tick(world);
+    expect(ids(controls)).toEqual(['move-left', 'move-right', 'jump', 'run', 'crouch']);
+    expect(controls.activeControllers).toEqual([player]);
+
+    world.removeEntity(player);
+    expect(ids(controls)).toEqual([]);
+  });
+
+  it('drives the car controller from the steering and pedal buttons', () => {
+    const car = new GgCarHandlingController(world.keyboardInput, null, {
+      keymap: 'arrows',
+      maxSteerDeltaPerSecond: 1000,
+      gearUpDownKeys: ['KeyA', 'KeyZ'],
+      autoReverse: true,
+      handbrakeKey: 'Space',
+    });
+    world.addEntity(car);
+    const controls = new MobileControls({ enabled: true });
+    world.addEntity(controls);
+    const outputs: any[] = [];
+    car.carHandlingInput.output$.subscribe(o => outputs.push(o));
+
+    pointer(control(controls, 'steer-left'), 'pointerdown', 0, 0, 1);
+    pointer(control(controls, 'accelerate'), 'pointerdown', 0, 0, 2);
+    tick(world);
+    expect(outputs[outputs.length - 1]).toEqual({ upDown: 1, leftRight: 1 });
+
+    pointer(control(controls, 'steer-left'), 'pointerup', 0, 0, 1);
+    pointer(control(controls, 'accelerate'), 'pointerup', 0, 0, 2);
+    pointer(control(controls, 'brake'), 'pointerdown', 0, 0, 3);
+    tick(world, 16);
+    expect(outputs[outputs.length - 1]).toEqual({ upDown: -1, leftRight: 0 });
+  });
+
+  it('gives a bare CarHandlingController the steering and the pedals alone', () => {
+    world.addEntity(new CarHandlingController(world.keyboardInput));
+    const controls = new MobileControls({ enabled: true });
+    world.addEntity(controls);
+    expect(ids(controls)).toEqual(['steer-left', 'steer-right', 'accelerate', 'brake']);
+  });
+
+  it('releases what is held when the layout goes away', () => {
+    const player = new PlayerCharacterController2d(world.keyboardInput, null, {} as any);
+    world.addEntity(player);
+    const controls = new MobileControls({ enabled: true });
+    world.addEntity(controls);
+    const run: boolean[] = [];
+    world.keyboardInput.bind('ShiftLeft').subscribe(v => run.push(v));
+
+    pointer(control(controls, 'run'), 'pointerdown');
+    pointer(control(controls, 'run'), 'pointerup');
+    pointer(control(controls, 'move-right'), 'pointerdown', 0, 0, 2);
+    expect(run).toEqual([false, true]);
+    expect(player.directionsInput.direction.x).toBe(1);
+
+    controls.visible = false;
+    expect(run).toEqual([false, true, false]);
+    expect(player.directionsInput.direction.x).toBe(0);
+    expect(controls.shown).toBe(false);
+  });
+
+  it('applies layout options: variants, hidden controls, placements, icons and extra controls', () => {
+    world.addEntity(new GgCarHandlingController(world.keyboardInput, null));
+    const controls = new MobileControls({
+      enabled: true,
+      car: {
+        steering: 'stick',
+        gears: true,
+        hide: ['handbrake'],
+        placements: { brake: { left: 30 } },
+        icons: { accelerate: 'GO' },
+        extra: () => [new TouchButton({ id: 'horn', content: 'H' })],
+      },
+    });
+    world.addEntity(controls);
+
+    expect(ids(controls)).toEqual(['steer-stick', 'accelerate', 'brake', 'gear-down', 'gear-up', 'horn']);
+    expect(control(controls, 'accelerate').textContent).toBe('GO');
+    const brake = control(controls, 'brake') as HTMLElement;
+    expect(brake.style.left).toContain('30');
+    expect(brake.style.right).toBe('');
+  });
+
+  it('takes a layout for any controller class, replacing or dropping a built-in one', () => {
+    const custom = new CustomController();
+    world.addEntity(custom);
+    world.addEntity(new GgCarHandlingController(world.keyboardInput, null));
+    const controls = new MobileControls({ enabled: true, car: false });
+    world.addEntity(controls);
+    expect(ids(controls)).toEqual([]);
+
+    const pressed = jest.fn();
+    controls.registerLayout(CustomController, () => [new TouchButton({ id: 'fire' }).onPress(pressed)]);
+    expect(ids(controls)).toEqual(['fire']);
+    pointer(control(controls, 'fire'), 'pointerdown');
+    expect(pressed).toHaveBeenCalledTimes(1);
+
+    controls.registerLayout(CustomController, null);
+    expect(ids(controls)).toEqual([]);
+  });
+
+  it('keeps its own controls on top of every layout, and inside a given container', () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const controls = new MobileControls({ enabled: true, container });
+    const pause = new TouchButton({ id: 'pause' });
+    controls.addControls(pause);
+    world.addEntity(controls);
+    world.addEntity(new PlayerCharacterController2d(world.keyboardInput, null, {} as any));
+
+    expect(controls.element.parentElement).toBe(container);
+    expect(controls.element.classList.contains('gg-mc--contained')).toBe(true);
+    expect(ids(controls).pop()).toBe('pause');
+
+    world.removeEntity(controls);
+    expect(controls.shown).toBe(false);
+    expect(controls.element.querySelector('.gg-mc-id-jump')).toBeNull();
+  });
+
+  it('leaves the screen while the world input is switched off, even with the world paused, and comes back', () => {
+    const car = new GgCarHandlingController(world.keyboardInput, null);
+    world.addEntity(car);
+    const controls = new MobileControls({ enabled: true });
+    world.addEntity(controls);
+    const pause = new TouchButton({ id: 'pause' });
+    controls.addControls(pause);
+    expect(controls.shown).toBe(true);
+
+    // what a ScreenManager does to the world of a covered screen: no tick follows
+    world.pauseWorld();
+    world.inputEnabled = false;
+    expect(controls.shown).toBe(false);
+    expect(ids(controls)).toEqual(['pause']);
+
+    world.inputEnabled = true;
+    expect(controls.shown).toBe(true);
+    expect(ids(controls)).toContain('accelerate');
+  });
+});

package/test/tilt.input.spec.ts

@@ -0,0 +1,95 @@
+import { TiltInput } from '../src';
+
+describe('TiltInput', () => {
+  const orient = (beta: number, gamma: number) => {
+    const event = new Event('deviceorientation');
+    Object.assign(event, { beta, gamma });
+    window.dispatchEvent(event);
+  };
+  const setScreenAngle = (angle: number) =>
+    Object.defineProperty(window.screen, 'orientation', { value: { angle }, configurable: true });
+
+  beforeEach(() => {
+    (window as any).DeviceOrientationEvent = class extends Event {};
+    setScreenAngle(0);
+  });
+
+  afterEach(() => {
+    delete (window as any).DeviceOrientationEvent;
+  });
+
+  it('reads a sideways tilt in portrait, upright or flat, with a deadzone and a limit', () => {
+    const tilt = new TiltInput({ maxAngle: 30, deadzone: 0 });
+    tilt.start();
+    // flat on a table, right edge lowered by 15 degrees
+    orient(0, 15);
+    expect(tilt.value).toBeCloseTo(0.5);
+    // held upright and rolled 15 degrees to the left like a steering wheel
+    orient(75, -89.999);
+    expect(tilt.value).toBeCloseTo(-0.5);
+    orient(45, 0);
+    expect(tilt.value).toBeCloseTo(0);
+    tilt.stop();
+    expect(tilt.value).toBe(0);
+  });
+
+  it('follows the screen rotation', () => {
+    const tilt = new TiltInput({ maxAngle: 30, deadzone: 0 });
+    tilt.start();
+    // rotated counter-clockwise: the device's bottom edge is the right edge of the screen, and
+    // lowering it tips the device's top edge up
+    setScreenAngle(90);
+    orient(15, 0);
+    expect(tilt.value).toBeCloseTo(0.5);
+    setScreenAngle(270);
+    orient(15, 0);
+    expect(tilt.value).toBeCloseTo(-0.5);
+    tilt.stop();
+  });
+
+  it('applies the deadzone and the invert option', () => {
+    const tilt = new TiltInput({ maxAngle: 32, deadzone: 2, invert: true });
+    tilt.start();
+    orient(0, 1.5);
+    expect(tilt.value).toBe(0);
+    orient(0, 17);
+    expect(tilt.value).toBeCloseTo(-0.5);
+    tilt.stop();
+  });
+
+  it('reports denied on a page that is not a secure context', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    Object.defineProperty(window, 'isSecureContext', { value: false, configurable: true });
+    const tilt = new TiltInput({ deadzone: 0 });
+    const states: string[] = [];
+    tilt.permission$.subscribe(s => states.push(s));
+    tilt.start();
+    orient(0, 15);
+    expect(tilt.value).toBe(0);
+    expect(states).toEqual(['unknown', 'denied']);
+    expect(warn).toHaveBeenCalledTimes(1);
+    tilt.stop();
+    delete (window as any).isSecureContext;
+    warn.mockRestore();
+  });
+
+  it('asks for the permission on the next tap where one is needed', async () => {
+    const requestPermission = jest.fn().mockResolvedValue('granted');
+    (window as any).DeviceOrientationEvent.requestPermission = requestPermission;
+    const tilt = new TiltInput({ deadzone: 0 });
+    const states: string[] = [];
+    tilt.permission$.subscribe(s => states.push(s));
+    tilt.start();
+    orient(0, 15);
+    expect(tilt.value).toBe(0);
+
+    window.dispatchEvent(new Event('click'));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(requestPermission).toHaveBeenCalledTimes(1);
+    expect(states).toEqual(['unknown', 'granted']);
+    orient(0, 15);
+    expect(tilt.value).toBeCloseTo(0.5);
+    tilt.stop();
+  });
+});

package/test/touch-axis-controls.spec.ts

@@ -0,0 +1,172 @@
+import { DirectionInput, KeyboardInput, MouseInput, Point2 } from '@gg-web-engine/core';
+import { TouchDPad, TouchLookArea, TouchStick } from '../src';
+import { pointer, setRect } from './helpers';
+
+describe('TouchStick', () => {
+  const fixedStick = (options: any = {}) => {
+    const stick = new TouchStick({ travel: 50, deadzone: 0, ...options });
+    // base centered at (100, 100)
+    setRect(stick.element.firstElementChild!, 50, 50, 100, 100);
+    return stick;
+  };
+
+  it('reports the deflection from its center, y up, capped at 1', () => {
+    const stick = fixedStick();
+    pointer(stick.element, 'pointerdown', 125, 100);
+    expect(stick.value).toEqual({ x: 0.5, y: 0 });
+    pointer(stick.element, 'pointermove', 100, 50);
+    expect(stick.value).toEqual({ x: 0, y: 1 });
+    pointer(stick.element, 'pointermove', 400, 100);
+    expect(stick.value).toEqual({ x: 1, y: 0 });
+    pointer(stick.element, 'pointerup');
+    expect(stick.value).toEqual({ x: 0, y: 0 });
+  });
+
+  it('reads zero inside the deadzone and grows from zero outside of it', () => {
+    const stick = fixedStick({ deadzone: 0.2 });
+    pointer(stick.element, 'pointerdown', 105, 100);
+    expect(stick.value).toEqual({ x: 0, y: 0 });
+    pointer(stick.element, 'pointermove', 130, 100);
+    expect(stick.value.x).toBeCloseTo(0.5);
+    pointer(stick.element, 'pointermove', 150, 100);
+    expect(stick.value.x).toBeCloseTo(1);
+  });
+
+  it('moves along one axis only when restricted', () => {
+    const stick = fixedStick({ axes: 'x' });
+    pointer(stick.element, 'pointerdown', 125, 20);
+    expect(stick.value).toEqual({ x: 0.5, y: 0 });
+  });
+
+  it('centers under the finger in floating mode', () => {
+    const stick = new TouchStick({ mode: 'floating', travel: 50, deadzone: 0 });
+    setRect(stick.element, 0, 0, 400, 300);
+    pointer(stick.element, 'pointerdown', 200, 150);
+    expect(stick.value).toEqual({ x: 0, y: 0 });
+    pointer(stick.element, 'pointermove', 200, 175);
+    expect(stick.value).toEqual({ x: 0, y: -0.5 });
+  });
+
+  it('feeds a bound direction input and withdraws when released', () => {
+    const keyboard = new KeyboardInput();
+    keyboard.start();
+    const input = new DirectionInput(keyboard, 'wasd');
+    input.start();
+    const stick = fixedStick().bindDirection(input);
+
+    pointer(stick.element, 'pointerdown', 125, 75);
+    expect(input.direction).toEqual({ x: 0.5, y: 0.5 });
+    keyboard.emulateKeyDown('KeyD');
+    expect(input.direction).toEqual({ x: 1, y: 0.5 });
+    keyboard.emulateKeyUp('KeyD');
+    stick.dispose();
+    expect(input.direction).toEqual({ x: 0, y: 0 });
+    input.stop();
+    keyboard.stop();
+  });
+
+  it('holds bound keys past the threshold', () => {
+    const keyboard = new KeyboardInput();
+    keyboard.start();
+    const up: boolean[] = [];
+    const left: boolean[] = [];
+    keyboard.bind('KeyW').subscribe(v => up.push(v));
+    keyboard.bind('KeyA').subscribe(v => left.push(v));
+    const stick = fixedStick().bindKeys(keyboard, { up: 'KeyW', left: 'KeyA' });
+
+    pointer(stick.element, 'pointerdown', 100, 60);
+    pointer(stick.element, 'pointermove', 60, 100);
+    pointer(stick.element, 'pointerup');
+
+    expect(up).toEqual([false, true, false]);
+    expect(left).toEqual([false, true, false]);
+    keyboard.stop();
+  });
+
+  it('never turns a bound view backwards on the first frame of a deflection', () => {
+    const frames: FrameRequestCallback[] = [];
+    const raf = jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => frames.push(cb));
+    const now = jest.spyOn(performance, 'now').mockReturnValue(1000);
+    const mouse = new MouseInput();
+    mouse.start();
+    const deltas: Point2[] = [];
+    mouse.delta$.subscribe(d => deltas.push(d));
+    const stick = fixedStick().bindLook(mouse, 1000);
+
+    pointer(stick.element, 'pointerdown', 150, 100);
+    // a frame that began before the stick was touched
+    frames.shift()!(990);
+    frames.shift()!(1006);
+
+    expect(deltas[0].x).toBe(0);
+    expect(deltas[1].x).toBeCloseTo(16);
+    stick.dispose();
+    mouse.stop();
+    raf.mockRestore();
+    now.mockRestore();
+  });
+});
+
+describe('TouchDPad', () => {
+  const dpad = (options: any = {}) => {
+    const control = new TouchDPad(options);
+    setRect(control.element, 0, 0, 100, 100);
+    return control;
+  };
+
+  it('snaps to eight directions and lets a finger slide between them', () => {
+    const control = dpad();
+    pointer(control.element, 'pointerdown', 50, 10);
+    expect(control.value).toEqual({ x: 0, y: 1 });
+    expect(control.element.querySelector('.gg-mc-dpad-arm--up')!.classList.contains('gg-mc-active')).toBe(true);
+    pointer(control.element, 'pointermove', 90, 10);
+    expect(control.value).toEqual({ x: 1, y: 1 });
+    pointer(control.element, 'pointermove', 90, 50);
+    expect(control.value).toEqual({ x: 1, y: 0 });
+    pointer(control.element, 'pointermove', 50, 52);
+    expect(control.value).toEqual({ x: 0, y: 0 });
+    pointer(control.element, 'pointerup');
+    expect(control.element.querySelector('.gg-mc-active')).toBeNull();
+  });
+
+  it('snaps to four directions without diagonals', () => {
+    const control = dpad({ diagonals: false });
+    pointer(control.element, 'pointerdown', 90, 20);
+    expect(Math.abs(control.value.x) + Math.abs(control.value.y)).toBe(1);
+  });
+});
+
+describe('TouchLookArea', () => {
+  it('reports drags through a bound mouse input, scaled', () => {
+    const mouse = new MouseInput();
+    mouse.start();
+    const deltas: Point2[] = [];
+    mouse.delta$.subscribe(d => deltas.push(d));
+    const area = new TouchLookArea().bindMouse(mouse, 2);
+
+    pointer(area.element, 'pointerdown', 10, 10);
+    pointer(area.element, 'pointermove', 15, 7);
+    pointer(area.element, 'pointermove', 15, 17);
+    pointer(area.element, 'pointerup', 15, 17);
+
+    expect(deltas).toEqual([
+      { x: 10, y: -6 },
+      { x: 0, y: 20 },
+    ]);
+    mouse.stop();
+  });
+
+  it('reports a short still touch as a tap, a drag not', () => {
+    const area = new TouchLookArea();
+    const taps: Point2[] = [];
+    area.tap$.subscribe(p => taps.push(p));
+
+    pointer(area.element, 'pointerdown', 10, 10);
+    pointer(area.element, 'pointerup', 11, 10);
+    pointer(area.element, 'pointerdown', 10, 10);
+    pointer(area.element, 'pointermove', 60, 10);
+    pointer(area.element, 'pointerup', 60, 10);
+
+    expect(taps).toEqual([{ x: 11, y: 10 }]);
+  });
+});

package/test/touch-button.spec.ts

@@ -0,0 +1,162 @@
+import { DirectionInput, KeyboardInput } from '@gg-web-engine/core';
+import { TouchButton } from '../src';
+import { pointer } from './helpers';
+
+describe('TouchButton', () => {
+  let keyboard: KeyboardInput;
+
+  beforeEach(() => {
+    keyboard = new KeyboardInput();
+    keyboard.start();
+  });
+
+  afterEach(() => keyboard.stop());
+
+  it('is pressed while a pointer is down on it', () => {
+    const button = new TouchButton();
+    const values: boolean[] = [];
+    button.pressed$.subscribe(v => values.push(v));
+
+    pointer(button.element, 'pointerdown');
+    expect(button.element.classList.contains('gg-mc-active')).toBe(true);
+    pointer(button.element, 'pointerup');
+
+    expect(values).toEqual([false, true, false]);
+    expect(button.element.classList.contains('gg-mc-active')).toBe(false);
+  });
+
+  it('follows only the pointer that pressed it', () => {
+    const button = new TouchButton();
+    pointer(button.element, 'pointerdown', 0, 0, 1);
+    pointer(button.element, 'pointerdown', 0, 0, 2);
+    pointer(button.element, 'pointerup', 0, 0, 2);
+    expect(button.pressed).toBe(true);
+    pointer(button.element, 'pointerup', 0, 0, 1);
+    expect(button.pressed).toBe(false);
+  });
+
+  it('keeps the pointer from the elements below it', () => {
+    const button = new TouchButton();
+    document.body.appendChild(button.element);
+    const seen = jest.fn();
+    window.addEventListener('pointerdown', seen);
+    window.addEventListener('pointermove', seen);
+
+    pointer(button.element, 'pointerdown');
+    pointer(button.element, 'pointermove', 5, 5);
+
+    expect(seen).not.toHaveBeenCalled();
+    window.removeEventListener('pointerdown', seen);
+    window.removeEventListener('pointermove', seen);
+    button.dispose();
+  });
+
+  it('flips on every press in toggle mode, and is released by reset', () => {
+    const button = new TouchButton({ mode: 'toggle' });
+    pointer(button.element, 'pointerdown');
+    pointer(button.element, 'pointerup');
+    expect(button.pressed).toBe(true);
+    pointer(button.element, 'pointerdown');
+    pointer(button.element, 'pointerup');
+    expect(button.pressed).toBe(false);
+
+    pointer(button.element, 'pointerdown');
+    pointer(button.element, 'pointerup');
+    button.reset();
+    expect(button.pressed).toBe(false);
+  });
+
+  it('releases what it holds when hidden', () => {
+    const button = new TouchButton({ mode: 'toggle' });
+    pointer(button.element, 'pointerdown');
+    pointer(button.element, 'pointerup');
+    button.visible = false;
+    expect(button.pressed).toBe(false);
+    expect(button.element.hidden).toBe(true);
+    button.visible = true;
+    expect(button.visible).toBe(true);
+  });
+
+  it('acts as a bound key', () => {
+    const values: boolean[] = [];
+    keyboard.bind('Space').subscribe(v => values.push(v));
+    const button = new TouchButton().bindKey(keyboard, 'Space');
+
+    pointer(button.element, 'pointerdown');
+    pointer(button.element, 'pointerup');
+
+    expect(values).toEqual([false, true, false]);
+  });
+
+  it('releases a bound key when disposed while pressed', () => {
+    const values: boolean[] = [];
+    keyboard.bind('Space').subscribe(v => values.push(v));
+    const button = new TouchButton().bindKey(keyboard, 'Space');
+
+    pointer(button.element, 'pointerdown');
+    button.dispose();
+
+    expect(values).toEqual([false, true, false]);
+  });
+
+  it('pushes a bound direction input while pressed', () => {
+    const input = new DirectionInput(keyboard, 'arrows');
+    input.start();
+    const button = new TouchButton().bindDirection(input, { x: -1 });
+
+    pointer(button.element, 'pointerdown');
+    expect(input.direction).toEqual({ x: -1, y: 0 });
+    pointer(button.element, 'pointerup');
+    expect(input.direction).toEqual({ x: 0, y: 0 });
+    input.stop();
+  });
+
+  it('calls onPress/onRelease, and carries its id and content', () => {
+    const press = jest.fn();
+    const release = jest.fn();
+    const button = new TouchButton({ id: 'fire', content: 'A', label: 'Fire' }).onPress(press).onRelease(release);
+    expect(button.element.classList.contains('gg-mc-id-fire')).toBe(true);
+    expect(button.element.textContent).toBe('A');
+    expect(button.element.getAttribute('aria-label')).toBe('Fire');
+
+    pointer(button.element, 'pointerdown');
+    expect(press).toHaveBeenCalledTimes(1);
+    expect(release).not.toHaveBeenCalled();
+    pointer(button.element, 'pointerup');
+    expect(release).toHaveBeenCalledTimes(1);
+  });
+
+  it('delivers a change made by a subscriber to every binding in order', () => {
+    const button = new TouchButton();
+    const input = new DirectionInput();
+    input.start();
+    // the first binding hides the button as soon as it is pressed
+    button.onPress(() => (button.visible = false));
+    button.bindKey(keyboard, 'KeyF').bindDirection(input, { y: 1 });
+    const keys: boolean[] = [];
+    keyboard.bind('KeyF').subscribe(v => keys.push(v));
+    const values: boolean[] = [];
+    button.pressed$.subscribe(v => values.push(v));
+
+    pointer(button.element, 'pointerdown');
+
+    expect(values).toEqual([false, true, false]);
+    expect(button.pressed).toBe(false);
+    expect(keys).toEqual([false, true, false]);
+    expect(input.direction).toEqual({ x: 0, y: 0 });
+    input.stop();
+  });
+
+  it('releases every binding when disposed by a subscriber', () => {
+    const button = new TouchButton();
+    button.onPress(() => button.dispose());
+    button.bindKey(keyboard, 'KeyF');
+    const keys: boolean[] = [];
+    keyboard.bind('KeyF').subscribe(v => keys.push(v));
+
+    pointer(button.element, 'pointerdown');
+
+    expect(button.disposed).toBe(true);
+    expect(keys).toEqual([false, true, false]);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "./src/",
+    "outDir": "./dist/",
+    "rootDir": "./src/",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
+    "types": ["jest", "node"]
+  },
+  "include": ["src/*.ts", "src/**/*.ts"],
+  "references": [{ "path": "../core" }]
+}