@gg-web-engine/core 0.0.1

package/src/base/entities/base-gg-renderer.ts

@@ -0,0 +1,77 @@
+import { ITickListener } from './interfaces/i-tick-listener';
+import { Subject, Subscription } from 'rxjs';
+import { GgEntity } from './gg-entity';
+import { Point2 } from '../models/points';
+import { GgViewportManager } from '../gg-viewport-manager';
+
+export type RendererOptions = {
+  transparent: boolean;
+  background: number;
+  forceRendererSize?: Point2;
+  forceResolution?: number;
+  antialias: boolean;
+};
+
+export abstract class BaseGgRenderer extends GgEntity implements ITickListener {
+  protected _permanentRenderMethods: Map<number, Function>;
+  protected _singularRenderMethods: Map<number, Function>;
+  private initialized = false;
+
+  readonly tick$: Subject<[number, number]>;
+  public readonly tickOrder = 1000;
+  protected tickListener: Subscription | null = null;
+
+  public readonly rendererOptions: RendererOptions;
+
+  protected constructor(canvas?: HTMLCanvasElement, options: Partial<RendererOptions> = {}) {
+    super();
+    this.rendererOptions = {
+      transparent: false,
+      background: 0x000000,
+      antialias: true,
+      ...(options || {}),
+    };
+    this._permanentRenderMethods = new Map<number, Function>();
+    this._singularRenderMethods = new Map<number, Function>();
+    this.tick$ = new Subject<[number, number]>();
+    if (canvas) {
+      setTimeout(() => {
+        GgViewportManager.instance.assignRendererToCanvas(this, canvas).then();
+      }, 0);
+    }
+  }
+
+  public get isActive(): boolean {
+    return !!this.tickListener;
+  }
+
+  public activate(): void {
+    if (this.isActive) {
+      return;
+    }
+    if (!this.initialized) {
+      this.init();
+    }
+    this.tickListener = this.tick$.subscribe(() => {
+      this.render();
+    });
+  }
+
+  public deactivate(): void {
+    if (!this.isActive) {
+      return;
+    }
+    this.tickListener?.unsubscribe();
+    this.tickListener = null;
+  }
+
+  init(): void {
+    this.initialized = true;
+  }
+
+  abstract render(): void;
+
+  abstract resize(newSize: Point2): void;
+
+  abstract dispose(): void;
+}

package/src/base/entities/gg-entity.ts

@@ -0,0 +1,61 @@
+import { GgWorld } from '../gg-world';
+
+export abstract class GgEntity {
+  get world(): GgWorld<any, any> | null {
+    return this._world;
+  }
+
+  protected _world: GgWorld<any, any> | null = null;
+
+  protected _name: string = '';
+
+  public get name(): string {
+    return this._name;
+  }
+
+  public set name(value: string) {
+    this._name = value;
+  }
+
+  protected _children: GgEntity[] = [];
+
+  public addChildren(...entities: GgEntity[]) {
+    this._children.push(...entities);
+    if (this._world) {
+      for (const item of entities) {
+        this._world.addEntity(item);
+      }
+    }
+  }
+
+  public removeChildren(entities: GgEntity[], dispose: boolean = false) {
+    this._children = this._children.filter(c => !entities.includes(c));
+    if (this._world) {
+      for (const item of entities) {
+        this._world.removeEntity(item, dispose);
+      }
+    }
+  }
+
+  public onSpawned(world: GgWorld<any, any>) {
+    this._world = world;
+    for (const c of this._children) {
+      world.addEntity(c);
+    }
+  }
+
+  public onRemoved() {
+    const world = this._world!;
+    this._world = null;
+    for (const c of this._children) {
+      world.removeEntity(c);
+    }
+  }
+
+  // TODO add some flag to entity that it is disposed, and throw a normal error when trying to add such entity to world again
+  public dispose(): void {
+    for (const c of this._children) {
+      c.dispose();
+    }
+  }
+}

package/src/base/entities/gg-positionable-entity.ts

@@ -0,0 +1,64 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { GgEntity } from './gg-entity';
+import { GgWorld } from '../gg-world';
+
+export abstract class GgPositionableEntity<D, R> extends GgEntity {
+  protected readonly _position$: BehaviorSubject<D>;
+  protected readonly _rotation$: BehaviorSubject<R>;
+  protected readonly _scale$: BehaviorSubject<D>;
+
+  abstract getDefaultPosition(): D;
+  abstract getDefaultRotation(): R;
+  abstract getDefaultScale(): D;
+
+  get world(): GgWorld<D, R> | null {
+    return super.world;
+  }
+
+  public get position(): D {
+    return this._position$.getValue();
+  }
+
+  public get position$(): Observable<D> {
+    return this._position$.asObservable();
+  }
+
+  public set position(value: D) {
+    this._position$.next(value);
+  }
+
+  public get rotation(): R {
+    return this._rotation$.getValue();
+  }
+
+  public get rotation$(): Observable<R> {
+    return this._rotation$.asObservable();
+  }
+
+  public set rotation(value: R) {
+    this._rotation$.next(value);
+  }
+
+  public get scale(): D {
+    return this._scale$.getValue();
+  }
+
+  public get scale$(): Observable<D> {
+    return this._scale$.asObservable();
+  }
+
+  public set scale(value: D) {
+    this._scale$.next(value);
+  }
+
+  protected constructor() {
+    super();
+    this._position$ = new BehaviorSubject<D>(this.getDefaultPosition());
+    this._rotation$ = new BehaviorSubject<R>(this.getDefaultRotation());
+    this._scale$ = new BehaviorSubject<D>(this.getDefaultScale());
+  }
+
+  onSpawned(world: GgWorld<D, R>) {
+    super.onSpawned(world);
+  }
+}

package/src/base/entities/inline-controller.ts

@@ -0,0 +1,31 @@
+import { GgWorld } from '../gg-world';
+import { GgEntity } from './gg-entity';
+import { ITickListener } from './interfaces/i-tick-listener';
+import { finalize, Observable, Subject } from 'rxjs';
+
+class InlineTickController extends GgEntity implements ITickListener {
+  public readonly tick$: Subject<[number, number]> = new Subject<[number, number]>();
+
+  constructor(public readonly tickOrder: number) {
+    super();
+  }
+
+  dispose(): void {
+    super.dispose();
+    this.tick$.unsubscribe();
+    this.tick$.complete();
+  }
+}
+
+export function createInlineTickController(
+  world: GgWorld<any, any>,
+  tickOrder: number = 750,
+): Observable<[number, number]> {
+  const controller: InlineTickController = new InlineTickController(tickOrder);
+  world.addEntity(controller);
+  return controller.tick$.pipe(
+    finalize(() => {
+      world.removeEntity(controller);
+    }),
+  );
+}

package/src/base/entities/interfaces/i-tick-listener.ts

@@ -0,0 +1,15 @@
+import { Subject } from 'rxjs';
+import { GgEntity } from '../gg-entity';
+
+export interface ITickListener {
+  // will receive [elapsed time, delta] of each world clock tick
+  tick$: Subject<[number, number]>;
+  // the priority of ticker: the less value, the earlier tick will be run.
+  // 500 is a physics tick order
+  // 750 is a default objects binding tick order
+  // 1000 is a rendering tick order
+  // e.g. 499 will run before physics, 1001 will run after rendering
+  readonly tickOrder: number;
+}
+
+export const isITickListener: (entity: GgEntity) => boolean = entity => (entity as any)?.tick$ instanceof Subject;

package/src/base/gg-static.ts

@@ -0,0 +1,30 @@
+import { GgWorld } from './gg-world';
+
+export class GgStatic {
+  private static _instance: GgStatic;
+  public static get instance(): GgStatic {
+    if (!GgStatic._instance) {
+      GgStatic._instance = new GgStatic();
+    }
+    return GgStatic._instance;
+  }
+  private constructor() {
+    (window as any).gg = this;
+  }
+
+  public readonly worlds: GgWorld<any, any>[] = [];
+  public selectedWorld: GgWorld<any, any> | null = null;
+
+  async console(input: string): Promise<string> {
+    if (!this.selectedWorld) {
+      return 'World not selected';
+    }
+    const commands: string[] = input.split('\n');
+    let output: string[] = [];
+    for (const command of commands) {
+      const parts = command.split(' ');
+      output.push(await this.selectedWorld.runConsoleCommand(parts.splice(0, 1)[0], parts));
+    }
+    return output.join('\n');
+  }
+}

package/src/base/gg-viewport-manager.ts

@@ -0,0 +1,122 @@
+import { BehaviorSubject, filter, first, Subject, takeUntil } from 'rxjs';
+import { GgViewport } from './gg-viewport';
+import { BaseGgRenderer } from './entities/base-gg-renderer';
+
+type CanvasAppDescr = { canvas: HTMLCanvasElement; renderer?: BaseGgRenderer };
+
+export class GgViewportManager {
+  private static _instance: GgViewportManager | null;
+  static get instance(): GgViewportManager {
+    if (!this._instance) {
+      this._instance = new GgViewportManager();
+    }
+    return this._instance;
+  }
+
+  private constructor() {
+    setTimeout(async () => {
+      let retries = 120;
+      let stage: HTMLDivElement | null = null;
+      while (retries > 0) {
+        retries--;
+        stage = document.getElementById('gg-stage') as HTMLDivElement;
+        if (stage) {
+          break;
+        }
+        await new Promise(r => setTimeout(r, 250));
+      }
+      if (!stage) {
+        this.gameStage$.error(new Error('Div with id "gg-stage" not found in 30 seconds'));
+      } else {
+        GgViewport.instance
+          .subscribeOnViewportSize()
+          .pipe(takeUntil(this.destroyed))
+          .subscribe(size => {
+            for (const zIndex of Object.keys(this.canvases)) {
+              const canvasDescr = this.canvases[+zIndex];
+              if (canvasDescr.renderer && !canvasDescr.renderer.rendererOptions.forceRendererSize) {
+                canvasDescr.renderer.resize(size);
+              }
+              canvasDescr.canvas.width = size.x;
+              canvasDescr.canvas.height = size.y;
+            }
+          });
+        this.gameStage$.next(stage);
+      }
+    }, 0);
+  }
+
+  private readonly canvases: { [key: number]: CanvasAppDescr } = {};
+  private gameStage$: BehaviorSubject<HTMLDivElement | null> = new BehaviorSubject<HTMLDivElement | null>(null);
+  protected destroyed: Subject<void> = new Subject();
+
+  private getStageAsync(): Promise<HTMLDivElement> {
+    const current = this.gameStage$.getValue();
+    if (current) {
+      return Promise.resolve(current);
+    }
+    return Promise.race([
+      this.gameStage$
+        .pipe(
+          takeUntil(this.destroyed),
+          filter(x => !!x),
+          first(),
+        )
+        .toPromise(),
+      new Promise((resolve, reject) => {
+        setTimeout(() => {
+          reject('Cannot find div with id "gg-stage" in 30 seconds');
+        }, 30000);
+      }),
+    ]) as Promise<HTMLDivElement>;
+  }
+
+  public async createCanvas(zIndex: number): Promise<HTMLCanvasElement> {
+    zIndex = Math.round(zIndex);
+    if (this.canvases[zIndex]) {
+      throw new Error(`Cannot add canvas on zIndex ${zIndex}. Index is locked by another canvas`);
+    }
+    const stage = await this.getStageAsync();
+    const canvas: HTMLCanvasElement = document.createElement('canvas');
+    await this.registerCanvas(canvas, zIndex);
+    stage.appendChild(canvas);
+    return canvas;
+  }
+
+  public async registerCanvas(canvas: HTMLCanvasElement, zIndex: number): Promise<void> {
+    canvas.style.zIndex = '' + zIndex;
+    canvas.style.position = 'absolute';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.id = 'canvas-' + zIndex;
+    this.canvases[zIndex] = { canvas };
+    const size = GgViewport.instance.getCurrentViewportSize();
+    canvas.width = size.x;
+    canvas.height = size.y;
+  }
+
+  public async assignRendererToCanvas(renderer: BaseGgRenderer, canvas: HTMLCanvasElement): Promise<void> {
+    if (!GgViewport.instance.isActive) {
+      GgViewport.instance.activate();
+    }
+    let zIndex: number | null = null;
+    let maxExistingZIndex = 0;
+    for (const index in this.canvases) {
+      if (this.canvases[index].canvas === canvas) {
+        zIndex = +index;
+        break;
+      }
+      maxExistingZIndex = +index;
+    }
+    if (!zIndex) {
+      zIndex = maxExistingZIndex + 1;
+      await this.registerCanvas(canvas, zIndex);
+    }
+    this.canvases[zIndex].renderer = renderer;
+    if (!renderer.rendererOptions.forceRendererSize) {
+      renderer.resize(GgViewport.instance.getCurrentViewportSize());
+    }
+  }
+
+  // TODO remove canvas logic
+}

package/src/base/gg-viewport.ts

@@ -0,0 +1,159 @@
+import { BehaviorSubject, distinctUntilChanged, fromEvent, merge, Observable, Subject, takeUntil } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Point2 } from './models/points';
+import { GgVisualScene } from './interfaces/gg-visual-scene';
+
+const getCurrentWindowSize = (): Point2 => {
+  return {
+    x: window.innerWidth,
+    y: window.innerHeight,
+  };
+};
+
+const getMousePositionFromEvent = (event: MouseEvent | TouchEvent): Point2 | null => {
+  if (event instanceof MouseEvent) {
+    return { x: event.x, y: event.y };
+  } else if (event instanceof TouchEvent) {
+    if (event.touches.length === 0) {
+      return null;
+    }
+    return { x: event.touches[0].clientX, y: event.touches[0].clientY };
+  }
+  console.warn('Cannot determine mouse position from event', event);
+  return null;
+};
+
+export class GgViewport {
+  private static _instance: GgViewport | null;
+  static get instance(): GgViewport {
+    if (!this._instance) {
+      this._instance = new GgViewport();
+    }
+    return this._instance;
+  }
+
+  private constructor() {}
+
+  protected destroy$: Subject<void> | null = null;
+
+  private scenes: GgVisualScene<any, any>[] = [];
+
+  public get isActive(): boolean {
+    return !!this.destroy$;
+  }
+
+  public activate() {
+    if (this.destroy$) {
+      throw new Error('GgViewport is already active');
+    }
+    this.destroy$ = new Subject();
+    // cursor position
+    merge(fromEvent(window, 'mousemove'), fromEvent(window, 'touchstart'), fromEvent(window, 'touchmove'))
+      .pipe(
+        takeUntil(this.destroy$),
+        map(event => event as MouseEvent | TouchEvent),
+      )
+      .subscribe(event => {
+        const point = getMousePositionFromEvent(event);
+        if (point) {
+          this.mousePosition.next(point);
+        }
+      });
+    // clicks
+    merge(fromEvent(window, 'mousedown'), fromEvent(window, 'touchstart'))
+      .pipe(
+        takeUntil(this.destroy$),
+        map(event => event as MouseEvent | TouchEvent),
+      )
+      .subscribe(event => {
+        const point = getMousePositionFromEvent(event);
+        if (point) {
+          this.mousePosition.next(point);
+        }
+        this.isMouseDown.next(true);
+      });
+    merge(fromEvent(window, 'mouseup'), fromEvent(window, 'click'), fromEvent(window, 'touchend'))
+      .pipe(
+        takeUntil(this.destroy$),
+        map(event => event as MouseEvent | TouchEvent),
+      )
+      .subscribe(event => {
+        const point = getMousePositionFromEvent(event);
+        if (point) {
+          this.mousePosition.next(point);
+        }
+        this.isMouseDown.next(false);
+        if ((event.target as any)['nodeName'] === 'canvas') {
+          this.mouseClicked.next(this.mousePosition.getValue());
+        }
+      });
+    // viewport size
+    merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange'))
+      .pipe(
+        takeUntil(this.destroy$),
+        map(() => getCurrentWindowSize()),
+      )
+      .subscribe(this.viewportSize);
+  }
+
+  public deactivate(): void {
+    if (!this.destroy$) {
+      throw new Error('GgViewport is already inactive');
+    }
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.destroy$ = null;
+  }
+
+  // ================================================== VIEWPORT SIZE ==================================================
+  private viewportSize: BehaviorSubject<Point2> = new BehaviorSubject<Point2>(getCurrentWindowSize());
+
+  getCurrentViewportSize(): Point2 {
+    return this.viewportSize.getValue();
+  }
+
+  subscribeOnViewportSize(): Observable<Point2> {
+    return this.viewportSize.asObservable().pipe(
+      distinctUntilChanged((v1, v2) => {
+        return v1.x === v2.x && v1.y === v2.y;
+      }),
+    );
+  }
+
+  // ================================================== VIEWPORT SIZE ==================================================
+
+  // ================================================== POINTER LOGIC ==================================================
+  private mousePosition: BehaviorSubject<Point2> = new BehaviorSubject<Point2>({ x: 0, y: 0 });
+  private mouseClicked: Subject<Point2> = new Subject<Point2>();
+  private isMouseDown: Subject<boolean> = new Subject<boolean>();
+
+  isMouseEnabled(): boolean {
+    return matchMedia('(hover:hover)').matches && matchMedia('(pointer:fine)').matches;
+  }
+
+  isTouchDevice(): boolean {
+    return (
+      'createTouch' in document ||
+      !!navigator.userAgent.match(/(iPhone|iPod|iPad)/) ||
+      !!navigator.userAgent.match(/Android/)
+    );
+  }
+
+  subscribeOnMouseMove(): Observable<Point2> {
+    return this.mousePosition.asObservable().pipe(
+      distinctUntilChanged((v1, v2) => {
+        return v1.x === v2.x && v1.y === v2.y;
+      }),
+    );
+  }
+
+  subscribeOnIsMouseDown(): Observable<boolean> {
+    return this.isMouseDown.asObservable().pipe(distinctUntilChanged());
+  }
+
+  subscribeOnMouseClick(): Observable<Point2> {
+    return this.mouseClicked.asObservable();
+  }
+
+  // ================================================== POINTER LOGIC ==================================================
+}