Add Controls so that we can support other controls than Keyboard.

package.json

@@ -16,7 +16,8 @@
   "devDependencies": {
     "@types/jest": "^29.5.6",
     "@types/mocha": "^10.0.3",
-    "@types/react": "^18.2.21",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
     "bun": "^1.0.7",
     "bun-types": "latest",
     "jest": "^29.7.0",

src/camera/Camera.ts

@@ -1,5 +1,5 @@
-import { IMatrix, vector } from "gl/transform/IMatrix";
 import Matrix from "gl/transform/Matrix";
+import { IMatrix, Vector } from "gl/transform/IMatrix";
 import { ProjectionMatrix } from "gl/transform/ProjectionMatrix";
 import { TiltMatrix } from "gl/transform/TiltMatrix";
 import { TurnMatrix } from "gl/transform/TurnMatrix";
@@ -27,14 +27,14 @@ export class Camera extends AuxiliaryHolder<ICamera> implements ICamera {
   readonly turnMatrix = new TurnMatrix(() => this.updateInformer.informUpdate(MatrixUniform.CAM_TURN));
   private _curvature = 0.05;
   private _distance = .5;
-  private _bgColor: vector = [0, 0, 0];
+  private _bgColor: Vector = [0, 0, 0];
   private _blur = 1;
   private _viewportWidth = 0;
   private _viewportHeight = 0;
   private readonly updateInformer;
   private readonly updateInformerFloat;
   private readonly updateInformerVector;
-  private readonly engine: IGraphicsEngine;
+  private readonly engine;
 
   constructor({ engine, motor }: Props) {
     super();
@@ -64,6 +64,10 @@ export class Camera extends AuxiliaryHolder<ICamera> implements ICamera {
     [MatrixUniform.CAM_TILT]: this.tiltMatrix,
   };
 
+  private readonly cameraVectors: Record<VectorUniform, Vector> = {
+    [VectorUniform.BG_COLOR]: this._bgColor,
+  }
+
   resizeViewport(width: number, height: number) {
     if (this._viewportWidth !== width || this._viewportHeight !== height) {
       this._viewportWidth = width;
@@ -116,11 +120,8 @@ export class Camera extends AuxiliaryHolder<ICamera> implements ICamera {
     }
   }
 
-  private getCameraVector(uniform: VectorUniform): vector {
-    switch (uniform) {
-      case VectorUniform.BG_COLOR:
-        return this._bgColor;
-    }
+  private getCameraVector(uniform: VectorUniform): Vector {
+    return this.cameraVectors[uniform];
   }
 
   moveCam(x: number, y: number, z: number) {

src/controls/IControls.ts

@@ -0,0 +1,17 @@
+export interface ControlsListener {
+  onQuickAction?(): void;
+  onQuickTiltReset?(): void;
+}
+
+export interface IControls {
+  get forward(): boolean;
+  get backward(): boolean;
+  get left(): boolean;
+  get right(): boolean;
+  get up(): boolean;
+  get down(): boolean;
+  get turnLeft(): boolean;
+  get turnRight(): boolean;
+  get action(): boolean;
+  addListener(listener: ControlsListener): () => void;
+}

src/controls/Keyboard.ts

@@ -17,7 +17,6 @@ export class Keyboard extends AuxiliaryHolder<IKeyboard> implements IKeyboard {
   private readonly keyUpListener = new Set<KeyListener>();
   private readonly quickTapListener = new Set<KeyListener>();
 
-  private isActive: boolean = false;
   private timeProvider: ITimeProvider;
 
   constructor({ motor }: Props) {
@@ -48,24 +47,14 @@ export class Keyboard extends AuxiliaryHolder<IKeyboard> implements IKeyboard {
 
   activate(): void {
     super.activate();
-    this.setActive(true);
+    document.addEventListener('keydown', this.keyDown);
+    document.addEventListener('keyup', this.keyUp);
   }
 
   deactivate(): void {
     super.deactivate();
-    this.setActive(false);
-  }
-
-  private setActive(value: boolean) {
-    if (this.isActive !== value) {
-      this.isActive = value;
-      document.removeEventListener('keydown', this.keyDown);
-      document.removeEventListener('keyup', this.keyUp);
-      if (this.isActive) {
-        document.addEventListener('keydown', this.keyDown);
-        document.addEventListener('keyup', this.keyUp);
-      }
-    }
+    document.removeEventListener('keydown', this.keyDown);
+    document.removeEventListener('keyup', this.keyUp);
   }
 
   addListener(listener: KeyListener): () => void {

src/controls/KeyboardControls.ts

@@ -0,0 +1,67 @@
+import { ControlsListener, IControls } from "./IControls";
+import { IKeyboard } from "./IKeyboard";
+
+export class KeyboardControls implements IControls {
+  constructor(private keyboard: IKeyboard) {
+  }
+
+  addListener(listener: ControlsListener): () => void {
+    return this.keyboard.addListener({
+      onQuickTap(keyCode) {
+        switch (keyCode) {
+          case 'Space':
+            listener.onQuickAction?.();
+            break;
+          case 'ShiftRight':
+            listener.onQuickTiltReset?.();
+            break;
+        }
+      },
+    });
+  }
+
+  get forward(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.KeyW || (keys.ArrowUp && !keys.ShiftRight));
+  }
+
+  get backward(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.KeyS || (keys.ArrowDown && !keys.ShiftRight));
+  }
+
+  get left(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.KeyA || (keys.ArrowLeft && !keys.ShiftRight));
+  }
+
+  get right(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.KeyD || (keys.ArrowRight && !keys.ShiftRight));
+  }
+
+  get turnLeft(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.KeyQ || (keys.ArrowLeft && keys.ShiftRight));
+  }
+
+  get turnRight(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.KeyE || (keys.ArrowRight && keys.ShiftRight));
+  }
+
+  get up(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.ArrowUp && keys.ShiftRight);
+  }
+
+  get down(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.ArrowDown && keys.ShiftRight);
+  }
+
+  get action(): boolean {
+    const { keys } = this.keyboard;
+    return !!(keys.Space);
+  }
+}

src/demo/DemoWorld.ts

@@ -1,5 +1,4 @@
 import { Keyboard } from "controls/Keyboard";
-import { ResizeAux } from "graphics/aux/ResizeAux";
 import { IGraphicsEngine } from "graphics/IGraphicsEngine";
 import { IMotor } from "motor/IMotor";
 import { Camera } from "camera/Camera";
@@ -25,6 +24,7 @@ import { StaticSprites } from "world/sprite/aux/StaticSprites";
 import { SpriteUpdater } from "world/sprite/update/SpriteUpdater";
 import { SpriteType } from "world/sprite/Sprite";
 import { ICamera } from "camera/ICamera";
+import { KeyboardControls } from "controls/KeyboardControls";
 
 const DOBUKI = 0, LOGO = 1, GROUND = 2, VIDEO = 3, WIREFRAME = 4, GRASS = 5, BRICK = 6;
 const LOGO_SIZE = 512;
@@ -42,9 +42,9 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
 
     //  Add a sprite accumulator.
     //  * Sprite accumulators are used to collect sprite definitions, so that the engine can display them.
-    const spritesAccumulator = new SpritesAccumulator();
-    spritesAccumulator.addAuxiliary(new SpriteUpdater({ engine, motor }));
-    spritesAccumulator.addAuxiliary(new MaxSpriteCountAuxiliary({ engine }));
+    const spritesAccumulator = new SpritesAccumulator().addAuxiliary(
+      new SpriteUpdater({ engine, motor }),
+      new MaxSpriteCountAuxiliary({ engine }));
     this.addAuxiliary(spritesAccumulator);
 
     //  Add medias
@@ -174,7 +174,7 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
         {
           imageId: DOBUKI,
           spriteType: SpriteType.SPRITE,
-          transform: Matrix.create().translate(0, 0, 0),
+          transform: Matrix.create().translate(0, 0, -1),
         },
       ],
       //  Side walls with happy face logo
@@ -218,7 +218,6 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
     ));
 
     const camera = new Camera({ engine, motor });
-    camera.addAuxiliary(new ResizeAux({ engine }));
     this.addAuxiliary(camera);
     this.camera = camera;
 
@@ -243,7 +242,7 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
         },
         { //  ceiling
           imageId: WIREFRAME,
-          transform: Matrix.create().translate(cell.pos[0] * cell.pos[3], 1, cell.pos[2] * cell.pos[3]).rotateX(Math.PI / 2).scale(1)
+          transform: Matrix.create().translate(cell.pos[0] * cell.pos[3], 2, cell.pos[2] * cell.pos[3]).rotateX(Math.PI / 2).scale(1)
         },
       ]
     }));
@@ -267,20 +266,21 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
     //  * CamMoveAuxiliary is a more free-form way to move.
     //  * JumpAuxiliary lets you jump
     const keyboard = new Keyboard({ motor });
+    const controls = new KeyboardControls(keyboard);
     keyboard.addAuxiliary(
       new ToggleAuxiliary({
         auxiliariesMapping: [
           {
             key: "Tab", aux: Auxiliaries.from(
-              new CamStepAuxiliary({ keyboard, camera }, { step: 2, turnStep: Math.PI / 2, tiltStep: Math.PI / 4 }),
-              new CamTiltResetAuxiliary({ keyboard, camera }, { key: "ShiftRight" }),
+              new CamStepAuxiliary({ controls, camera }, { step: 2, turnStep: Math.PI / 2, tiltStep: Math.PI / 4 }),
+              new CamTiltResetAuxiliary({ controls, camera }),
             )
           },
           {
             key: "Tab", aux: Auxiliaries.from(
-              new CamMoveAuxiliary({ keyboard, camera }),
-              new JumpAuxiliary({ keyboard, camera }),
-              new CamTiltResetAuxiliary({ keyboard, camera }, { key: "ShiftRight" }),
+              new CamMoveAuxiliary({ controls, camera }),
+              new JumpAuxiliary({ controls, camera }),
+              new CamTiltResetAuxiliary({ controls, camera }),
             )
           },
         ],
@@ -295,13 +295,11 @@ export class DemoWorld extends AuxiliaryHolder<IWorld> implements IWorld {
     //  * is evaluated, and some are created as needed.
     camera.posMatrix.addAuxiliary(
       new CellChangeAuxiliary({
-        visitCell: new CellTracker(this, {
-          cellLimit: 5000,
-          range: [25, 3, 25],
-          cellSize: CELLSIZE,
-        })
-      }, {
         cellSize: CELLSIZE,
-      }));
+      }).addAuxiliary(new CellTracker(this, {
+        cellLimit: 5000,
+        range: [25, 3, 25],
+        cellSize: CELLSIZE,
+      })));
   }
 }

src/gl/transform/IMatrix.ts

@@ -4,4 +4,4 @@ export interface IMatrix {
   getMatrix(): Float32Array;
 }
 
-export type vector = [number, number, number] & vec3;
+export type Vector = [number, number, number] & vec3;

src/gl/transform/Matrix.ts

@@ -1,5 +1,5 @@
 import { mat4, quat, vec3 } from 'gl-matrix';
-import { IMatrix, vector } from './IMatrix';
+import { IMatrix, Vector } from './IMatrix';
 import { Angle } from 'gl/utils/angleUtils';
 import { Position } from 'world/grid/Position';
 
@@ -9,7 +9,7 @@ class Matrix implements IMatrix {
   private m4 = Float32Array.from(mat4.create());
   static readonly HIDDEN = Matrix.create().scale(0, 0, 0);
   static readonly IDENTITY = Matrix.create();
-  private static tempVec: vector = [0, 0, 0];
+  private static tempVec: Vector = [0, 0, 0];
 
   constructor() {
     this.identity();
@@ -58,7 +58,7 @@ class Matrix implements IMatrix {
     return this.move(v);
   }
 
-  move(vector: vector): Matrix {
+  move(vector: Vector): Matrix {
     mat4.translate(this.m4, this.m4, vector);
     return this;
   }
@@ -119,7 +119,7 @@ class Matrix implements IMatrix {
   }
 
   private static tempQuat = quat.create();
-  getMoveVector(x: number, y: number, z: number, turnMatrix?: IMatrix): vector {
+  getMoveVector(x: number, y: number, z: number, turnMatrix?: IMatrix): Vector {
     const v = Matrix.tempVec;
     v[0] = x;
     v[1] = y;

src/gl/transform/aux/CellChangeAuxiliary.ts

@@ -3,24 +3,21 @@ import { PositionMatrix } from "../PositionMatrix";
 import { Cell, cellTag } from "world/grid/CellPos";
 import { VisitCell } from "../../../world/grid/VisitCell";
 import { UpdatePayload } from "updates/Refresh";
-
-interface Props {
-  visitCell: VisitCell;
-}
+import { AuxiliaryHolder } from "world/aux/AuxiliaryHolder";
 
 interface Config {
   cellSize?: number;
 }
 
-export class CellChangeAuxiliary implements Auxiliary<PositionMatrix> {
+export class CellChangeAuxiliary extends AuxiliaryHolder implements Auxiliary<PositionMatrix> {
   private matrix?: PositionMatrix;
   private cellSize: number;
   private cell: Cell;
-  private visitCellObj: VisitCell;
+  visitCell?: VisitCell;
 
-  constructor({ visitCell }: Props, config?: Config) {
+  constructor(config?: Config) {
+    super();
     this.cellSize = config?.cellSize ?? 1;
-    this.visitCellObj = visitCell;
     this.cell = { pos: [0, 0, 0, this.cellSize], tag: "" };
   }
 
@@ -36,7 +33,7 @@ export class CellChangeAuxiliary implements Auxiliary<PositionMatrix> {
   }
 
   activate(): void {
-    this.visitCellObj.visitCell(this.cell);
+    this.visitCell?.visitCell(this.cell);
   }
 
   refresh(updatePayload: UpdatePayload): void {
@@ -49,7 +46,7 @@ export class CellChangeAuxiliary implements Auxiliary<PositionMatrix> {
       this.cell.pos[1] = y;
       this.cell.pos[2] = z;
       this.cell.tag = cellTag(...this.cell.pos);
-      this.visitCellObj.visitCell(this.cell, updatePayload);
+      this.visitCell?.visitCell(this.cell, updatePayload);
     }
   }
 }