@gg-web-engine/core 0.0.1

package/dist/base/ui/gg-debugger.ui.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GgDebuggerUI = void 0;
+const gg_static_1 = require("../gg-static");
+const inline_controller_1 = require("../entities/inline-controller");
+const rxjs_1 = require("rxjs");
+const stats_js_1 = __importDefault(require("stats.js"));
+class GgDebuggerUI {
+    constructor() {
+        this.ui = null;
+        this.removed$ = new rxjs_1.Subject();
+    }
+    static get instance() {
+        if (!this._instance) {
+            this._instance = new GgDebuggerUI();
+        }
+        return this._instance;
+    }
+    get isUIShown() {
+        return !!this.ui;
+    }
+    createUI() {
+        var _a;
+        const stats = new stats_js_1.default();
+        stats.dom.style.left = 'unset';
+        stats.dom.style.right = '0';
+        stats.showPanel(0); // 0: fps, 1: ms, 2: mb
+        document.body.appendChild(stats.dom);
+        (0, inline_controller_1.createInlineTickController)(gg_static_1.GgStatic.instance.selectedWorld, -1)
+            .pipe((0, rxjs_1.takeUntil)(this.removed$))
+            .subscribe(() => {
+            stats === null || stats === void 0 ? void 0 : stats.begin();
+        });
+        (0, inline_controller_1.createInlineTickController)(gg_static_1.GgStatic.instance.selectedWorld, 10000)
+            .pipe((0, rxjs_1.takeUntil)(this.removed$))
+            .subscribe(() => {
+            stats === null || stats === void 0 ? void 0 : stats.end();
+        });
+        const customContainer = document.createElement('div');
+        customContainer.style.cssText =
+            'position:fixed;top:48px;right:0;opacity:0.9;z-index:9999;background-color:#333;color:white';
+        customContainer.innerHTML = `<input type="checkbox" name="checkbox" id="physics_debugger_checkbox_id" value="1"${((_a = gg_static_1.GgStatic.instance.selectedWorld) === null || _a === void 0 ? void 0 : _a.physicsWorld.physicsDebugViewActive) ? ' checked' : ''}>
+                                 <label for="physics_debugger_checkbox_id" style="user-select: none;">Show physics bodies in scene</label>`;
+        document.body.appendChild(customContainer);
+        (0, rxjs_1.fromEvent)(document.getElementById('physics_debugger_checkbox_id'), 'change')
+            .pipe((0, rxjs_1.takeUntil)(this.removed$))
+            .subscribe(e => {
+            gg_static_1.GgStatic.instance.console('dr_drawphysics ' + e.target.checked).then();
+        });
+        this.ui = {
+            stats,
+            customContainer,
+        };
+    }
+    destroyUI() {
+        if (this.ui) {
+            document.body.removeChild(this.ui.stats.dom);
+            document.body.removeChild(this.ui.customContainer);
+            this.ui.stats.end();
+            this.ui = null;
+        }
+        this.removed$.next();
+    }
+}
+exports.GgDebuggerUI = GgDebuggerUI;

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+export * from './base/clock';
+export * from './base/gg-viewport';
+export * from './base/gg-viewport-manager';
+export * from './base/entities/interfaces/i-tick-listener';
+export * from './base/entities/gg-entity';
+export * from './base/entities/base-gg-renderer';
+export * from './base/entities/inline-controller';
+export * from './base/interfaces/gg-body';
+export * from './base/interfaces/gg-debug-physics-drawer';
+export * from './base/interfaces/gg-object';
+export * from './base/interfaces/gg-physics-world';
+export * from './base/interfaces/gg-trigger';
+export * from './base/interfaces/gg-visual-scene';
+export * from './base/models/axis-directions';
+export * from './base/models/body-options';
+export * from './base/models/geometry-nodes';
+export * from './base/models/points';
+export * from './base/math/box';
+export * from './base/math/point2';
+export * from './base/math/point3';
+export * from './base/math/quaternion';
+export * from './base/math/numbers';
+export * from './base/math/matrix4';
+export * from './base/controllers/common';
+export * from './base/controllers/i-controller';
+export * from './base/controllers/keyboard.controller';
+export * from './base/controllers/mouse.controller';
+export * from './2d/entities/gg-2d-entity';
+export * from './2d/entities/gg-positionable-2d-entity';
+export * from './2d/entities/gg-2d-trigger.entity';
+export * from './2d/models/body-options';
+export * from './2d/models/shapes';
+export * from './2d/interfaces';
+export * from './2d/factories';
+export * from './2d/gg-2d-world';
+export * from './3d/controllers/car-keyboard.controller';
+export * from './3d/controllers/free-camera.controller';
+export * from './3d/entities/controllers/entity-motion.controller';
+export * from './3d/entities/gg-3d-entity';
+export * from './3d/entities/gg-positionable-3d-entity';
+export * from './3d/entities/gg-3d-camera.entity';
+export * from './3d/entities/gg-3d-map-graph.entity';
+export * from './3d/entities/gg-3d-raycast-vehicle.entity';
+export * from './3d/entities/gg-3d-trigger.entity';
+export * from './3d/models/body-options';
+export * from './3d/models/gg-meta';
+export * from './3d/models/shapes';
+export * from './3d/interfaces';
+export * from './3d/factories';
+export * from './3d/gg-3d-world';
+export * from './3d/loader';

package/dist/index.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./base/clock"), exports);
+__exportStar(require("./base/gg-viewport"), exports);
+__exportStar(require("./base/gg-viewport-manager"), exports);
+__exportStar(require("./base/entities/interfaces/i-tick-listener"), exports);
+__exportStar(require("./base/entities/gg-entity"), exports);
+__exportStar(require("./base/entities/base-gg-renderer"), exports);
+__exportStar(require("./base/entities/inline-controller"), exports);
+__exportStar(require("./base/interfaces/gg-body"), exports);
+__exportStar(require("./base/interfaces/gg-debug-physics-drawer"), exports);
+__exportStar(require("./base/interfaces/gg-object"), exports);
+__exportStar(require("./base/interfaces/gg-physics-world"), exports);
+__exportStar(require("./base/interfaces/gg-trigger"), exports);
+__exportStar(require("./base/interfaces/gg-visual-scene"), exports);
+__exportStar(require("./base/models/axis-directions"), exports);
+__exportStar(require("./base/models/body-options"), exports);
+__exportStar(require("./base/models/geometry-nodes"), exports);
+__exportStar(require("./base/models/points"), exports);
+__exportStar(require("./base/math/box"), exports);
+__exportStar(require("./base/math/point2"), exports);
+__exportStar(require("./base/math/point3"), exports);
+__exportStar(require("./base/math/quaternion"), exports);
+__exportStar(require("./base/math/numbers"), exports);
+__exportStar(require("./base/math/matrix4"), exports);
+__exportStar(require("./base/controllers/common"), exports);
+__exportStar(require("./base/controllers/i-controller"), exports);
+__exportStar(require("./base/controllers/keyboard.controller"), exports);
+__exportStar(require("./base/controllers/mouse.controller"), exports);
+__exportStar(require("./2d/entities/gg-2d-entity"), exports);
+__exportStar(require("./2d/entities/gg-positionable-2d-entity"), exports);
+__exportStar(require("./2d/entities/gg-2d-trigger.entity"), exports);
+__exportStar(require("./2d/models/body-options"), exports);
+__exportStar(require("./2d/models/shapes"), exports);
+__exportStar(require("./2d/interfaces"), exports);
+__exportStar(require("./2d/factories"), exports);
+__exportStar(require("./2d/gg-2d-world"), exports);
+__exportStar(require("./3d/controllers/car-keyboard.controller"), exports);
+__exportStar(require("./3d/controllers/free-camera.controller"), exports);
+__exportStar(require("./3d/entities/controllers/entity-motion.controller"), exports);
+__exportStar(require("./3d/entities/gg-3d-entity"), exports);
+__exportStar(require("./3d/entities/gg-positionable-3d-entity"), exports);
+__exportStar(require("./3d/entities/gg-3d-camera.entity"), exports);
+__exportStar(require("./3d/entities/gg-3d-map-graph.entity"), exports);
+__exportStar(require("./3d/entities/gg-3d-raycast-vehicle.entity"), exports);
+__exportStar(require("./3d/entities/gg-3d-trigger.entity"), exports);
+__exportStar(require("./3d/models/body-options"), exports);
+__exportStar(require("./3d/models/gg-meta"), exports);
+__exportStar(require("./3d/models/shapes"), exports);
+__exportStar(require("./3d/interfaces"), exports);
+__exportStar(require("./3d/factories"), exports);
+__exportStar(require("./3d/gg-3d-world"), exports);
+__exportStar(require("./3d/loader"), exports);

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@gg-web-engine/core",
+  "version": "0.0.01",
+  "description": "An attempt to create open source game engine for browser",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "jest",
+    "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write",
+    "prepublish": "tsc",
+    "build": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AndyGura/gg-web-engine.git"
+  },
+  "keywords": [
+    "game-development",
+    "game-engine",
+    "game-engine-framework",
+    "gamedev"
+  ],
+  "author": "AndyGura",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/AndyGura/gg-web-engine/issues"
+  },
+  "homepage": "https://github.com/AndyGura/gg-web-engine#readme",
+  "dependencies": {
+    "rxjs": "~7.5.0",
+    "stats.js": "^0.17.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.0",
+    "@types/stats.js": "^0.17.0",
+    "jest": "^29.5.0",
+    "prettier": "^2.8.6",
+    "ts-jest": "^29.0.5",
+    "typescript": "~4.7.2"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": ".",
+    "testRegex": "\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.ts",
+      "!**/*.module.ts"
+    ],
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/node_modules/",
+      "<rootDir>/dist/",
+      "<rootDir>/test/"
+    ],
+    "coverageDirectory": "./coverage",
+    "testEnvironment": "node"
+  }
+}

package/src/2d/entities/gg-2d-entity.ts

@@ -0,0 +1,86 @@
+import { Subject, Subscription } from 'rxjs';
+import { GgPositionable2dEntity } from './gg-positionable-2d-entity';
+import { ITickListener } from '../../base/entities/interfaces/i-tick-listener';
+import { Point2 } from '../../base/models/points';
+import { IGg2dBody, IGg2dObject } from '../interfaces';
+import { Gg2dWorld } from '../gg-2d-world';
+
+export class Gg2dEntity extends GgPositionable2dEntity implements ITickListener {
+  public readonly tick$: Subject<[number, number]> = new Subject<[number, number]>();
+  public readonly tickOrder = 750;
+  private tickSub: Subscription | null = null;
+
+  set position(value: Point2) {
+    if (this.object2D) {
+      this.object2D.position = value;
+    }
+    if (this.objectBody) {
+      this.objectBody.position = value;
+    }
+    super.position = value;
+  }
+
+  set rotation(value: number) {
+    if (this.object2D) {
+      this.object2D.rotation = value;
+    }
+    if (this.objectBody) {
+      this.objectBody.rotation = value;
+    }
+    super.rotation = value;
+  }
+
+  set scale(value: Point2) {
+    if (this.object2D) {
+      this.object2D.scale = value;
+    }
+    if (this.objectBody) {
+      this.objectBody.scale = value;
+    }
+    super.scale = value;
+  }
+
+  constructor(public readonly object2D: IGg2dObject | null, public readonly objectBody: IGg2dBody | null) {
+    super();
+    if (objectBody && object2D) {
+      this.tickSub = this.tick$.subscribe(() => {
+        // bind physics body transform to object transform
+        const pos = objectBody.position;
+        const rot = objectBody.rotation;
+        object2D.position = pos;
+        object2D.rotation = rot;
+        this._position$.next(pos);
+        this._rotation$.next(rot);
+      });
+    } else if (!objectBody && !object2D) {
+      throw new Error('Cannot create entity without a sprite and a body');
+    }
+    if (objectBody) {
+      objectBody.entity = this;
+    }
+  }
+
+  onSpawned(world: Gg2dWorld) {
+    super.onSpawned(world);
+    this.object2D?.addToWorld(world.visualScene);
+    this.objectBody?.addToWorld(world.physicsWorld);
+  }
+
+  onRemoved() {
+    this.object2D?.removeFromWorld(this.world!.visualScene);
+    this.objectBody?.removeFromWorld(this.world!.physicsWorld);
+    super.onRemoved();
+  }
+
+  dispose(): void {
+    super.dispose();
+    this.tickSub?.unsubscribe();
+    this.tickSub = null;
+    if (this.object2D) {
+      this.object2D.dispose();
+    }
+    if (this.objectBody) {
+      this.objectBody.dispose();
+    }
+  }
+}

package/src/2d/entities/gg-2d-trigger.entity.ts

@@ -0,0 +1,17 @@
+import { IGg2dTrigger } from '../interfaces';
+import { Gg2dEntity } from './gg-2d-entity';
+import { Observable } from 'rxjs';
+import { GgPositionable2dEntity } from './gg-positionable-2d-entity';
+
+export class Gg2dTriggerEntity extends Gg2dEntity {
+  get onEntityEntered(): Observable<GgPositionable2dEntity> {
+    return this.objectBody.onEntityEntered;
+  }
+  get onEntityLeft(): Observable<GgPositionable2dEntity | null> {
+    return this.objectBody.onEntityLeft;
+  }
+
+  constructor(public readonly objectBody: IGg2dTrigger) {
+    super(null, objectBody);
+  }
+}

package/src/2d/entities/gg-positionable-2d-entity.ts

@@ -0,0 +1,16 @@
+import { Point2 } from '../../base/models/points';
+import { GgPositionableEntity } from '../../base/entities/gg-positionable-entity';
+
+export abstract class GgPositionable2dEntity extends GgPositionableEntity<Point2, number> {
+  getDefaultPosition(): Point2 {
+    return { x: 0, y: 0 };
+  }
+
+  getDefaultRotation(): number {
+    return 0;
+  }
+
+  getDefaultScale(): Point2 {
+    return { x: 1, y: 1 };
+  }
+}

package/src/2d/factories.ts

@@ -0,0 +1,20 @@
+import { BodyShape2DDescriptor, Shape2DDescriptor } from './models/shapes';
+import { Point2 } from '../base/models/points';
+import { IGg2dBody, IGg2dObject, IGg2dTrigger } from './interfaces';
+
+export abstract class IGg2dObjectFactory<T extends IGg2dObject = IGg2dObject> {
+  abstract createPrimitive(descriptor: Shape2DDescriptor): T;
+
+  // shortcuts
+  createSquare(dimensions: Point2): T {
+    return this.createPrimitive({ shape: 'SQUARE', dimensions });
+  }
+  createCircle(radius: number): T {
+    return this.createPrimitive({ shape: 'CIRCLE', radius });
+  }
+}
+
+export interface IGg2dBodyFactory<T extends IGg2dBody = IGg2dBody, K extends IGg2dTrigger = IGg2dTrigger> {
+  createRigidBody(descriptor: BodyShape2DDescriptor, transform?: { position?: Point2; rotation?: number }): T;
+  createTrigger(descriptor: Shape2DDescriptor, transform?: { position?: Point2; rotation?: number }): K;
+}

package/src/2d/gg-2d-world.ts

@@ -0,0 +1,32 @@
+import { GgWorld } from '../base/gg-world';
+import { Point2 } from '../base/models/points';
+import { IGg2dPhysicsWorld, IGg2dVisualScene } from './interfaces';
+
+export class Gg2dWorld<
+  V extends IGg2dVisualScene = IGg2dVisualScene,
+  P extends IGg2dPhysicsWorld = IGg2dPhysicsWorld,
+> extends GgWorld<Point2, number, V, P> {
+  constructor(
+    public readonly visualScene: V,
+    public readonly physicsWorld: P,
+    protected readonly consoleEnabled: boolean = false,
+  ) {
+    super(visualScene, physicsWorld, consoleEnabled);
+    if (consoleEnabled) {
+      this.registerConsoleCommand(
+        'ph_gravity',
+        async (...args: string[]) => {
+          if (args.length == 1) {
+            args = ['0', args[0]]; // mean Y axis
+          }
+          if (args.length > 0) {
+            this.physicsWorld.gravity = { x: +args[0], y: +args[1] };
+          }
+          return JSON.stringify(this.physicsWorld.gravity);
+        },
+        'args: [float] or [float float]; change 2D world gravity vector. 1 argument means ' +
+          '{x: 0, y: value}, 2 arguments set the whole vector. Default value is "9.82" or "0 9.82"',
+      );
+    }
+  }
+}

package/src/2d/interfaces.ts

@@ -0,0 +1,31 @@
+import { GgBody } from '../base/interfaces/gg-body';
+import { Point2 } from '../base/models/points';
+import { GgObject } from '../base/interfaces/gg-object';
+import { GgPhysicsWorld } from '../base/interfaces/gg-physics-world';
+import { GgVisualScene } from '../base/interfaces/gg-visual-scene';
+import { BaseGgRenderer } from '../base/entities/base-gg-renderer';
+import { GgTrigger } from '../base/interfaces/gg-trigger';
+import { Observable } from 'rxjs';
+import { GgPositionable2dEntity } from './entities/gg-positionable-2d-entity';
+import { IGg2dBodyFactory, IGg2dObjectFactory } from './factories';
+
+// These interfaces have to be implemented for a particular 2D physics engine
+export interface IGg2dPhysicsWorld extends GgPhysicsWorld<Point2, number> {
+  readonly factory: IGg2dBodyFactory;
+}
+
+export abstract class Gg2dRenderer extends BaseGgRenderer {}
+
+export interface IGg2dBody extends GgBody<Point2, number> {}
+
+export interface IGg2dTrigger extends GgTrigger<Point2, number> {
+  get onEntityEntered(): Observable<GgPositionable2dEntity>;
+  get onEntityLeft(): Observable<GgPositionable2dEntity | null>;
+}
+
+// These interfaces have to be implemented for a particular 2D rendering engine
+export interface IGg2dVisualScene extends GgVisualScene<Point2, number> {
+  readonly factory: IGg2dObjectFactory;
+}
+
+export interface IGg2dObject extends GgObject<Point2, number> {}

package/src/2d/models/body-options.ts

@@ -0,0 +1,3 @@
+import { BodyOptions } from '../../base/models/body-options';
+
+export interface Body2DOptions extends BodyOptions {}

package/src/2d/models/shapes.ts

@@ -0,0 +1,7 @@
+import { Point2 } from '../../base/models/points';
+import { Body2DOptions } from './body-options';
+
+export type Shape2DDescriptor = { shape: 'SQUARE'; dimensions: Point2 } | { shape: 'CIRCLE'; radius: number };
+// TODO add more shapes
+
+export type BodyShape2DDescriptor = { shape: Shape2DDescriptor; body: Partial<Body2DOptions> };

package/src/3d/controllers/car-keyboard.controller.ts

@@ -0,0 +1,128 @@
+import { BehaviorSubject, combineLatest, interval, pipe, Subject, takeUntil, filter } from 'rxjs';
+import { distinctUntilChanged, map, pairwise, startWith, switchMap, take, tap } from 'rxjs/operators';
+import { IController } from '../../base/controllers/i-controller';
+import { KeyboardController } from '../../base/controllers/keyboard.controller';
+import { Gg3dRaycastVehicleEntity } from '../entities/gg-3d-raycast-vehicle.entity';
+import { bindDirectionKeys, DirectionKeymap, DirectionOutput } from '../../base/controllers/common';
+
+// TODO pass as settings
+// TODO smooth y?
+const TICKER_INTERVAL = 16;
+const TICKER_MAX_STEPS = 10;
+
+type CarKeyboardControllerOptions = {
+  keymap: DirectionKeymap;
+  gearUpDownKeys: [string, string];
+};
+
+export class CarKeyboardController implements IController {
+  // emits values -1 - 1; -1 = full turn left; 1 = full turn right
+  private readonly x$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
+  // emits values -1 - 1; -1 = full brake; 1 = full acceleration
+  private readonly y$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
+
+  private lastX: number = 0;
+  private readonly stop$: Subject<void> = new Subject<void>();
+
+  protected readonly car$: BehaviorSubject<Gg3dRaycastVehicleEntity> = new BehaviorSubject<Gg3dRaycastVehicleEntity>(
+    null!,
+  );
+
+  pairTickerPipe = pipe(
+    startWith(0),
+    pairwise<number>(),
+    map(([beforeValue, afterValue]) => [this.lastX, afterValue] as [number, number]),
+    switchMap(([beforeValue, afterValue]: [number, number]) =>
+      interval(TICKER_INTERVAL).pipe(
+        take(TICKER_MAX_STEPS),
+        map(count => ++count),
+        map(
+          count =>
+            beforeValue * ((TICKER_MAX_STEPS - count) / TICKER_MAX_STEPS) + afterValue * (count / TICKER_MAX_STEPS),
+        ),
+        tap(x => {
+          this.lastX = x;
+        }),
+      ),
+    ),
+  );
+
+  public set car(value: Gg3dRaycastVehicleEntity) {
+    this.car$.next(value);
+  }
+
+  public get car(): Gg3dRaycastVehicleEntity {
+    return this.car$.getValue();
+  }
+
+  constructor(
+    private readonly keyboardController: KeyboardController,
+    car: Gg3dRaycastVehicleEntity,
+    private readonly options: CarKeyboardControllerOptions = { keymap: 'arrows', gearUpDownKeys: ['KeyA', 'KeyZ'] },
+  ) {
+    this.car$.next(car);
+  }
+
+  async start(): Promise<void> {
+    let moveDirection: DirectionOutput = {};
+    bindDirectionKeys(this.keyboardController, this.options.keymap)
+      .pipe(takeUntil(this.stop$))
+      .subscribe(d => {
+        moveDirection = d;
+      });
+    this.car$
+      .pipe(
+        takeUntil(this.stop$),
+        switchMap(c => c.tick$),
+        takeUntil(this.stop$),
+        map(() => {
+          const direction = [0, 0];
+          if (moveDirection.leftRight !== undefined) direction[0] = moveDirection.leftRight ? -1 : 1;
+          if (moveDirection.upDown !== undefined) direction[1] = moveDirection.upDown ? 1 : -1;
+          return direction;
+        }),
+      )
+      .subscribe(([x, y]) => {
+        this.x$.next(x);
+        this.y$.next(y);
+      });
+    combineLatest([
+      this.x$.pipe(takeUntil(this.stop$), distinctUntilChanged(), this.pairTickerPipe),
+      this.y$.pipe(takeUntil(this.stop$), distinctUntilChanged()),
+    ]).subscribe(([x, y]) => {
+      this.car$.getValue().setXAxisControlValue(x);
+      this.car$.getValue().setYAxisControlValue(y);
+    });
+    this.keyboardController
+      .bind(this.options.gearUpDownKeys[0])
+      .pipe(
+        takeUntil(this.stop$),
+        filter(x => !!x),
+      )
+      .subscribe(() => {
+        if (
+          this.car$.getValue() &&
+          (!this.car$.getValue().carProperties.transmission.isAuto || this.car$.getValue().gear <= 0)
+        ) {
+          this.car$.getValue().gear++;
+        }
+      });
+    this.keyboardController
+      .bind(this.options.gearUpDownKeys[1])
+      .pipe(
+        takeUntil(this.stop$),
+        filter(x => !!x),
+      )
+      .subscribe(() => {
+        if (this.car$.getValue().carProperties.transmission.isAuto && this.car.gear > 1) {
+          this.car$.getValue().gear = 0;
+        } else {
+          this.car$.getValue().gear--;
+        }
+      });
+  }
+
+  async stop(): Promise<void> {
+    this.stop$.next();
+  }
+}