@gg-web-engine/core 0.0.1 → 0.0.2

package/src/base/math/quaternion.ts

@@ -1,172 +0,0 @@
-import { Point3, Point4 } from '../models/points';
-import { Pnt3 } from './point3';
-import { Mtrx4 } from './matrix4';
-
-export class Qtrn {
-  /** clone quaternion */
-  static clone(q: Point4): Point4 {
-    return { ...q };
-  }
-
-  /** add quaternion b to quaternion a */
-  static add(a: Point4, b: Point4): Point4 {
-    const w = a.w + b.w;
-    const x = a.x + b.x;
-    const y = a.y + b.y;
-    const z = a.z + b.z;
-    const magnitude = Math.sqrt(w * w + x * x + y * y + z * z);
-    return { w: w / magnitude, x: x / magnitude, y: y / magnitude, z: z / magnitude };
-  }
-
-  static mult(a: Point4, b: Point4): Point4 {
-    return {
-      w: a.w * b.w - a.x * b.x - a.y * b.y - a.z * b.z,
-      x: a.w * b.x + a.x * b.w + a.y * b.z - a.z * b.y,
-      y: a.w * b.y - a.x * b.z + a.y * b.w + a.z * b.x,
-      z: a.w * b.z + a.x * b.y - a.y * b.x + a.z * b.w,
-    };
-  }
-
-  static combineRotations(...quaternions: Point4[]): Point4 {
-    let result = { w: 1, x: 0, y: 0, z: 0 };
-    for (const quat of quaternions) {
-      result = this.mult(result, quat);
-    }
-    return result;
-  }
-
-  /** linear interpolation */
-  static lerp(a: Point4, b: Point4, t: number): Point4 {
-    return {
-      x: a.x + t * (b.x - a.x),
-      y: a.y + t * (b.y - a.y),
-      z: a.z + t * (b.z - a.z),
-      w: a.w + t * (b.w - a.w),
-    };
-  }
-
-  /** spherical interpolation */
-  static slerp(a: Point4, b: Point4, t: number): Point4 {
-    let dot = a.x * b.x + a.y * b.y + a.z * b.z + a.w * b.w;
-    let theta = Math.acos(dot);
-    let sinTheta = Math.sin(theta);
-
-    let x = (a.x * Math.sin((1 - t) * theta)) / sinTheta + (b.x * Math.sin(t * theta)) / sinTheta;
-    let y = (a.y * Math.sin((1 - t) * theta)) / sinTheta + (b.y * Math.sin(t * theta)) / sinTheta;
-    let z = (a.z * Math.sin((1 - t) * theta)) / sinTheta + (b.z * Math.sin(t * theta)) / sinTheta;
-    let w = (a.w * Math.sin((1 - t) * theta)) / sinTheta + (b.w * Math.sin(t * theta)) / sinTheta;
-
-    if (isNaN(x) || isNaN(y) || isNaN(z) || isNaN(w)) {
-      // happens when they are equal
-      return Qtrn.clone(a);
-    }
-    return { x, y, z, w };
-  }
-
-  /** creates quaternion from simple angle around axis. Assumes that axis vector is normalized */
-  static fromAngle(axis: Point3, angle: number) {
-    // http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm
-    const halfAngle = angle / 2,
-      s = Math.sin(halfAngle);
-    return {
-      ...Pnt3.scalarMult(axis, s),
-      w: Math.cos(halfAngle),
-    };
-  }
-
-  /** creates quaternion from 4-dimension rotation matrix */
-  static fromMatrix4(m: number[]): Point4 {
-    // http://www.euclideanspace.com/maths/geometry/rotations/conversions/matrixToQuaternion/index.htm
-    // assumes the upper 3x3 of m is a pure rotation matrix (i.e, unscaled)
-    const m11 = m[0],
-      m12 = m[4],
-      m13 = m[8],
-      m21 = m[1],
-      m22 = m[5],
-      m23 = m[9],
-      m31 = m[2],
-      m32 = m[6],
-      m33 = m[10],
-      trace = m11 + m22 + m33;
-    if (trace > 0) {
-      const s = 0.5 / Math.sqrt(trace + 1.0);
-      return {
-        x: (m32 - m23) * s,
-        y: (m13 - m31) * s,
-        z: (m21 - m12) * s,
-        w: 0.25 / s,
-      };
-    } else if (m11 > m22 && m11 > m33) {
-      const s = 2.0 * Math.sqrt(1.0 + m11 - m22 - m33);
-      return {
-        x: 0.25 * s,
-        y: (m12 + m21) / s,
-        z: (m13 + m31) / s,
-        w: (m32 - m23) / s,
-      };
-    } else if (m22 > m33) {
-      const s = 2.0 * Math.sqrt(1.0 + m22 - m11 - m33);
-      return {
-        x: (m12 + m21) / s,
-        y: 0.25 * s,
-        z: (m23 + m32) / s,
-        w: (m13 - m31) / s,
-      };
-    } else {
-      const s = 2.0 * Math.sqrt(1.0 + m33 - m11 - m22);
-      return {
-        x: (m13 + m31) / s,
-        y: (m23 + m32) / s,
-        z: 0.25 * s,
-        w: (m21 - m12) / s,
-      };
-    }
-  }
-
-  /** creates a quaternion from euler */
-  static fromEuler(e: Point3): Point4 {
-    const roll = e.x;
-    const pitch = e.y;
-    const yaw = e.z;
-
-    const cy = Math.cos(yaw * 0.5);
-    const sy = Math.sin(yaw * 0.5);
-    const cp = Math.cos(pitch * 0.5);
-    const sp = Math.sin(pitch * 0.5);
-    const cr = Math.cos(roll * 0.5);
-    const sr = Math.sin(roll * 0.5);
-
-    const qw = cr * cp * cy + sr * sp * sy;
-    const qx = sr * cp * cy - cr * sp * sy;
-    const qy = cr * sp * cy + sr * cp * sy;
-    const qz = cr * cp * sy - sr * sp * cy;
-
-    return { w: qw, x: qx, y: qy, z: qz };
-  }
-
-  /** converts a quaternion to euler */
-  static toEuler(q: Point4): Point3 {
-    const qw = q.w;
-    const qx = q.x;
-    const qy = q.y;
-    const qz = q.z;
-
-    const sinr_cosp = 2 * (qw * qx + qy * qz);
-    const cosr_cosp = 1 - 2 * (qx * qx + qy * qy);
-    const roll = Math.atan2(sinr_cosp, cosr_cosp);
-
-    const sinp = 2 * (qw * qy - qz * qx);
-    const pitch = Math.abs(sinp) >= 1 ? (Math.sign(sinp) * Math.PI) / 2 : Math.asin(sinp);
-
-    const siny_cosp = 2 * (qw * qz + qx * qy);
-    const cosy_cosp = 1 - 2 * (qy * qy + qz * qz);
-    const yaw = Math.atan2(siny_cosp, cosy_cosp);
-
-    return { x: roll, y: pitch, z: yaw };
-  }
-
-  /** creates a rotation for object, so it will look at some point in space */
-  static lookAt(eye: Point3, target: Point3, up: Point3): Point4 {
-    return this.fromMatrix4(Mtrx4.lookAt(eye, target, up));
-  }
-}

package/src/base/models/axis-directions.ts

@@ -1,3 +0,0 @@
-export type AxisDirection2 = 'x' | 'y' | '-x' | '-y';
-export type AxisDirection3 = AxisDirection2 | 'z' | '-z';
-export type AxisDirection4 = AxisDirection3 | 'w' | '-w';

package/src/base/models/body-options.ts

@@ -1,6 +0,0 @@
-export interface BodyOptions {
-  dynamic: boolean;
-  mass: number;
-  restitution: number;
-  friction: number;
-}

package/src/base/models/geometry-nodes.ts

@@ -1,5 +0,0 @@
-import { Point2, Point3 } from './points';
-
-export type GgBox<T> = { min: T; max: T };
-export type GgBox2d = GgBox<Point2>;
-export type GgBox3d = GgBox<Point3>;

package/src/base/models/points.ts

@@ -1,3 +0,0 @@
-export type Point2 = { x: number; y: number };
-export type Point3 = { x: number; y: number; z: number };
-export type Point4 = { x: number; y: number; z: number; w: number };

package/src/base/ui/gg-console.ui.ts

@@ -1,165 +0,0 @@
-import { GgStatic } from '../gg-static';
-
-export class GgConsoleUI {
-  private static _instance: GgConsoleUI | null;
-  static get instance(): GgConsoleUI {
-    if (!this._instance) {
-      this._instance = new GgConsoleUI();
-    }
-    return this._instance;
-  }
-
-  private constructor() {}
-
-  private output: string = `
-                  ▄████   ▄████     █     █░▓█████  ▄▄▄▄   
-                 ██▒ ▀█▒ ██▒ ▀█▒   ▓█░ █ ░█░▓█   ▀ ▓█████▄ 
-                ▒██░▄▄▄░▒██░▄▄▄░   ▒█░ █ ░█ ▒███   ▒██▒ ▄██
-                ░▓█  ██▓░▓█  ██▓   ░█░ █ ░█ ▒▓█  ▄ ▒██░█▀  
-                ░▒▓███▀▒░▒▓███▀▒   ░░██▒██▓ ░▒████▒░▓█  ▀█▓
-                 ░▒   ▒  ░▒   ▒    ░ ▓░▒ ▒  ░░ ▒░ ░░▒▓███▀▒
-                  ░   ░   ░   ░      ▒ ░ ░   ░ ░  ░▒░▒   ░ 
-                ░ ░   ░ ░ ░   ░      ░   ░     ░    ░    ░ 
-                      ░       ░        ░       ░  ░ ░      
-                                                         ░ 
-             >>> https://github.com/AndyGura/gg-web-engine <<<
-Welcome to GG web engine UI console. 
-Enter command in input below.
-
-List of available commands: commandslist 
-`;
-
-  private commandHistory: string[] = [];
-  private currentCommandIndex = 0; // for repeating command using up/down arrow keys
-
-  elements: {
-    main: HTMLDivElement;
-    input: HTMLInputElement;
-    output: HTMLTextAreaElement;
-  } | null = null;
-
-  public get isUIShown(): boolean {
-    return !!this.elements;
-  }
-
-  public createUI() {
-    if (this.elements) {
-      return;
-    }
-    const main: HTMLDivElement = document.createElement('div');
-    main.innerHTML = `
-  <div id="gg-console-header" style="padding: 10px; cursor: move; z-index: 10; background-color: #054a81; border: 1px solid white; font-size: large;">GG web engine UI console</div>
-  <textarea id="gg-console-output" disabled style="resize: none; flex-grow: 1; background: #555555; border: 1px solid white; color: white; font-family: monospace;" ></textarea>
-  <input id="gg-console-input" style="background: #555555; border: 1px solid white; color: white; font-family: monospace;"/>`;
-    main.style.position = 'absolute';
-    main.style.zIndex = '1000';
-    main.style.backgroundColor = '#222222';
-    main.style.border = '1px solid white';
-    main.style.width = '640px';
-    main.style.height = '480px';
-    main.style.display = 'flex';
-    main.style.flexDirection = 'column';
-    main.style.alignItems = 'stretch';
-    main.style.padding = '3px';
-    main.style.rowGap = '3px';
-    main.style.fontFamily = 'monospace';
-    main.style.color = 'white';
-    document.body.append(main);
-    this.elements = {
-      main,
-      input: document.getElementById('gg-console-input')! as HTMLInputElement,
-      output: document.getElementById('gg-console-output')! as HTMLTextAreaElement,
-    };
-    this.elements.input.onkeydown = event => {
-      if (event?.keyCode === 13) {
-        event.preventDefault();
-        this.onInput().then();
-      } else if (event?.keyCode === 38) {
-        event.preventDefault();
-        this.onUsePreviousCommand();
-      } else if (event?.keyCode === 40) {
-        event.preventDefault();
-        this.onUseNextCommand();
-      }
-    };
-    this.stdout();
-    this.setupDragging();
-    setTimeout(() => this.elements!.input.focus(), 20);
-  }
-
-  public destroyUI() {
-    if (!this.elements) {
-      return;
-    }
-    document.body.removeChild(this.elements.main);
-    this.elements = null;
-  }
-
-  onUsePreviousCommand() {
-    if (this.commandHistory.length === 0) {
-      return;
-    }
-    this.currentCommandIndex--;
-    if (this.currentCommandIndex < 0) {
-      this.currentCommandIndex += this.commandHistory.length;
-    }
-    this.elements!.input.value = this.commandHistory[this.currentCommandIndex % this.commandHistory.length];
-  }
-
-  onUseNextCommand() {
-    if (this.commandHistory.length === 0) {
-      return;
-    }
-    this.currentCommandIndex++;
-    this.elements!.input.value = this.commandHistory[this.currentCommandIndex % this.commandHistory.length];
-  }
-
-  async onInput() {
-    const command = this.elements!.input.value;
-    this.elements!.input.value = '';
-    this.stdout('\n> ' + command);
-    this.stdout('\n' + (await GgStatic.instance.console(command)));
-    this.commandHistory.push(command);
-    this.currentCommandIndex = this.commandHistory.length;
-  }
-
-  private stdout(s: string = ''): void {
-    this.output += s;
-    this.elements!.output.value = this.output;
-    this.elements!.output.scrollTop = this.elements!.output.scrollHeight;
-  }
-
-  setupDragging() {
-    let x = 0,
-      y = 0;
-    const dragMouseDown = (e: MouseEvent) => {
-      e = e || window.event;
-      e.preventDefault();
-      // get the mouse cursor position at startup:
-      x = e.clientX;
-      y = e.clientY;
-      document.onmouseup = closeDragElement;
-      // call a function whenever the cursor moves:
-      document.onmousemove = elementDrag;
-    };
-
-    const elementDrag = (e: MouseEvent) => {
-      e.preventDefault();
-      // calculate the new cursor position:
-      const curX = x - e.clientX;
-      const curY = y - e.clientY;
-      x = e.clientX;
-      y = e.clientY;
-      // set the element's new position:
-      this.elements!.main.style.left = this.elements!.main.offsetLeft - curX + 'px';
-      this.elements!.main.style.top = this.elements!.main.offsetTop - curY + 'px';
-    };
-
-    const closeDragElement = () => {
-      // stop moving when mouse button is released:
-      document.onmouseup = null;
-      document.onmousemove = null;
-    };
-    document.getElementById('gg-console-header')!.onmousedown = dragMouseDown;
-  }
-}

package/src/base/ui/gg-debugger.ui.ts

@@ -1,69 +0,0 @@
-import { GgStatic } from '../gg-static';
-import { createInlineTickController } from '../entities/inline-controller';
-import { fromEvent, Subject, takeUntil } from 'rxjs';
-import Stats from 'stats.js';
-
-export class GgDebuggerUI {
-  private static _instance: GgDebuggerUI | null;
-  static get instance(): GgDebuggerUI {
-    if (!this._instance) {
-      this._instance = new GgDebuggerUI();
-    }
-    return this._instance;
-  }
-
-  private ui: { stats: Stats; customContainer: HTMLDivElement } | null = null;
-
-  private removed$: Subject<void> = new Subject<void>();
-
-  private constructor() {}
-
-  public get isUIShown(): boolean {
-    return !!this.ui;
-  }
-
-  public createUI() {
-    const stats = new Stats();
-    stats.dom.style.left = 'unset';
-    stats.dom.style.right = '0';
-    stats.showPanel(0); // 0: fps, 1: ms, 2: mb
-    document.body.appendChild(stats.dom);
-    createInlineTickController(GgStatic.instance.selectedWorld!, -1)
-      .pipe(takeUntil(this.removed$))
-      .subscribe(() => {
-        stats?.begin();
-      });
-    createInlineTickController(GgStatic.instance.selectedWorld!, 10000)
-      .pipe(takeUntil(this.removed$))
-      .subscribe(() => {
-        stats?.end();
-      });
-    const customContainer: HTMLDivElement = 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"${
-      GgStatic.instance.selectedWorld?.physicsWorld.physicsDebugViewActive ? ' checked' : ''
-    }>
-                                 <label for="physics_debugger_checkbox_id" style="user-select: none;">Show physics bodies in scene</label>`;
-    document.body.appendChild(customContainer);
-    fromEvent(document.getElementById('physics_debugger_checkbox_id')! as HTMLInputElement, 'change')
-      .pipe(takeUntil(this.removed$))
-      .subscribe(e => {
-        GgStatic.instance.console('dr_drawphysics ' + (e.target as HTMLInputElement).checked).then();
-      });
-    this.ui = {
-      stats,
-      customContainer,
-    };
-  }
-
-  public 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();
-  }
-}

package/src/index.ts

@@ -1,53 +0,0 @@
-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/test/base/data-structures/graph.spec.ts

@@ -1,76 +0,0 @@
-import { Graph } from '../../../src/base/data-structures/graph';
-
-describe(`Graph<T>`, () => {
-
-  const testGrid = Array(150).fill(null).map((_, i) => (
-    Array(151).fill(null).map((_, j) => ({ i, j }))
-  ));
-  const testGridGraph = Graph.fromSquareGrid(testGrid);
-  const nodesArray: Graph<{ i: number, j: number }>[][] = Array(150).fill(null).map((_, i) => (
-    Array(151).fill(null).map((_, j) => null!)
-  ));
-  for (const node of testGridGraph.nodes()) {
-    nodesArray[node.data.i][node.data.j] = node;
-  }
-  const middleNode = nodesArray[75][75];
-
-  describe(`walkRead`, () => {
-    it('should return correct amount for depth 0', () => {
-      const result = middleNode.walkRead(0);
-      expect(result.size).toBe(1);
-      expect(result.has(middleNode)).toBe(true);
-    });
-    it('should return correct amount for depth 4', () => {
-      const result = middleNode.walkRead(4);
-      expect(result.size).toBe(41);
-    });
-    it('should return correct amount for depth 5', () => {
-      const result = middleNode.walkRead(5);
-      expect(result.size).toBe(61);
-    });
-    it('should return correct amount for depth 6', () => {
-      const result = middleNode.walkRead(6);
-      expect(result.size).toBe(85);
-    });
-    it('should return correct amount for depth 7', () => {
-      const result = middleNode.walkRead(7);
-      expect(result.size).toBe(113);
-    });
-  });
-  describe(`walkReadPreserveDepth`, () => {
-    it('should return correct amounts for depth 0', () => {
-      const result = middleNode.walkReadPreserveDepth(0);
-      expect(result.length).toBe(1);
-      expect(result[0].size).toBe(1);
-      expect(result[0].has(middleNode)).toBe(true);
-    });
-    it('should return correct amount for depth 4', () => {
-      const result = middleNode.walkReadPreserveDepth(4);
-      expect(result.length).toBe(5);
-      for (let i = 0; i < result.length; i++) {
-        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
-      }
-    });
-    it('should return correct amount for depth 5', () => {
-      const result = middleNode.walkReadPreserveDepth(5);
-      expect(result.length).toBe(6);
-      for (let i = 0; i < result.length; i++) {
-        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
-      }
-    });
-    it('should return correct amount for depth 6', () => {
-      const result = middleNode.walkReadPreserveDepth(6);
-      expect(result.length).toBe(7);
-      for (let i = 0; i < result.length; i++) {
-        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
-      }
-    });
-    it('should return correct amount for depth 7', () => {
-      const result = middleNode.walkReadPreserveDepth(7);
-      expect(result.length).toBe(8);
-      for (let i = 0; i < result.length; i++) {
-        expect(result[i].size).toBe(i > 0 ? i * 4 : 1);
-      }
-    });
-  });
-});