Add a generic type to engine which informs the additional attributes, to help pass context throughout the game

Author: SharpCoder

src/engine.ts

@@ -19,21 +19,21 @@ export type EngineComputedValues = {
     projectionMatrix: number[];
 } & Record<string, any>;
 
-export class Engine {
+export class Engine<T> {
     canvas: HTMLCanvasElement;
     gl: WebGLRenderingContext;
     id: number;
     lastTime: number;
-    scenes: Scene[];
-    activeScene: Scene;
+    scenes: Scene<T>[];
+    activeScene: Scene<T>;
     settings: {
         fov: number;
         zNear: number;
         zFar: number;
         fogColor: [number, number, number, number];
         fogDensity: number;
     };
-    properties: Record<any, any>;
+    properties: Partial<T>;
     readyState: ReadyState;
     onReadyChange?: (ready: ReadyState) => void;
     _debugLogs: string;
@@ -52,6 +52,8 @@ export class Engine {
     mousebutton: number;
     mousex: number;
     mousey: number;
+    mouseClickDuration: number;
+    private mouseClickStart: number;
 
     // These need to be stored somewhere
     private keydownListener: any;
@@ -81,6 +83,8 @@ export class Engine {
         };
 
         this.mousebutton = -1;
+        this.mouseClickStart = -1;
+        this.mouseClickDuration = 0;
         this.mousex = window.innerWidth / 2;
         this.mousey = window.innerHeight / 2;
         this.properties = {};
@@ -261,24 +265,34 @@ export class Engine {
 
     _handleMouseDown(evt: MouseEvent) {
         if (this.activeScene) {
-            this.activeScene.onClick?.call(this.activeScene);
+            this.activeScene.onClick?.call(this.activeScene, this);
         }
 
         if (evt.button === 2) {
             evt.preventDefault();
             evt.stopPropagation();
             this.keymap = {};
         }
+
+        this.mouseClickStart = new Date().getTime();
+        this.mouseClickDuration = 0;
     }
 
-    _handleMouseUp(evt: MouseEvent) {}
+    _handleMouseUp(evt: MouseEvent) {
+        this.mouseClickDuration = new Date().getTime() - this.mouseClickStart;
+        const { activeScene } = this;
+
+        if (activeScene && activeScene.onMouseUp) {
+            activeScene.onMouseUp(this);
+        }
+    }
 
     debug(str: string) {
         this._debugLogs += str;
         this._debugLogs += '\n';
     }
 
-    addScene(scene: Scene) {
+    addScene(scene: Scene<T>) {
         scene.engine = this;
         this.scenes.push(scene);
         if (!this.activeScene) {

src/models.ts

@@ -13,8 +13,8 @@ export type ProgramTemplate = {
         depthFunc: number;
         mode: number;
     };
-    beforeDraw?: (engine: Engine) => void;
-    afterDraw?: (engine: Engine) => void;
+    beforeDraw?: (engine: Engine<unknown>) => void;
+    afterDraw?: (engine: Engine<unknown>) => void;
     sceneDrawArgs?: {
         depthFunc: number;
         mode: number;
@@ -29,20 +29,20 @@ export type ProgramTemplate = {
             components: number;
             normalized: boolean;
             type: number;
-            generateData: (engine: Engine) => BufferSource;
+            generateData: (engine: Engine<unknown>) => BufferSource;
         }
     >;
     constantUniforms?: Record<
         string,
-        (engine: Engine, loc: WebGLUniformLocation) => void
+        (engine: Engine<unknown>, loc: WebGLUniformLocation) => void
     >;
     staticUniforms?: Record<
         string,
-        (engine: Engine, loc: WebGLUniformLocation) => void
+        (engine: Engine<unknown>, loc: WebGLUniformLocation) => void
     >;
     dynamicUniforms?: Record<
         string,
-        (engine: Engine, loc: WebGLUniformLocation, obj: Obj3d) => void
+        (engine: Engine<unknown>, loc: WebGLUniformLocation, obj: Obj3d) => void
     >;
 };
 
@@ -70,8 +70,8 @@ export type Obj3d = {
     _computed?: {
         positionMatrix: number[];
     };
-    update?: (time_t: number, engine: Engine) => void;
-    beforeDraw?: (engine: Engine) => void;
+    update?: (time_t: number, engine: Engine<unknown>) => void;
+    beforeDraw?: (engine: Engine<unknown>) => void;
 } & Record<any, any>;
 
 export type bbox = {

src/scene.ts

@@ -3,17 +3,18 @@ import type { Engine } from './engine';
 import type { Obj3d, ProgramTemplate } from './models';
 
 export type SceneStatus = 'initializing' | 'ready';
-export class Scene {
+export class Scene<T> {
     title: string;
     visible: boolean;
     status: SceneStatus;
     shaders: ProgramTemplate[];
     objects: Obj3d[];
     camera: Camera;
-    engine: Engine;
-    init?: (engine: Engine) => void;
-    update: (time_t: number, engine: Engine) => void;
-    onClick?: () => void;
+    engine: Engine<T>;
+    init?: (engine: Engine<T>) => void;
+    update: (time_t: number, engine: Engine<T>) => void;
+    onClick?: (engine: Engine<T>) => void;
+    onMouseUp?: (engine: Engine<T>) => void;
 
     constructor({
         title,
@@ -22,11 +23,13 @@ export class Scene {
         shaders,
         status,
         onClick,
+        onMouseUp,
     }: {
         title: string;
-        init?: (engine: Engine) => void;
-        update: (time_t: number, engine: Engine) => void;
-        onClick?: () => void;
+        init?: (engine: Engine<T>) => void;
+        update: (time_t: number, engine: Engine<T>) => void;
+        onClick?: (engine: Engine<T>) => void;
+        onMouseUp?: (engine: Engine<T>) => void;
         status?: SceneStatus;
         shaders: ProgramTemplate[];
     }) {
@@ -35,6 +38,7 @@ export class Scene {
         this.objects = [];
         this.update = update;
         this.onClick = onClick;
+        this.onMouseUp = onMouseUp;
         this.shaders = shaders;
         this.init = init;
         this.status = status;