@gg-web-engine/core 0.0.37 → 0.0.39

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

@@ -1,6 +1,22 @@
-import { createInlineTickController } from '../base';
-import { fromEvent, Subject, takeUntil } from 'rxjs';
+import { createInlineTickController, IRendererEntity } from '../base';
+import { animationFrameScheduler, fromEvent, of, Subject, takeUntil } from 'rxjs';
 import Stats from 'stats.js';
+import { repeat } from 'rxjs/operators';
+const snapshotEqual = (a, b) => {
+    if (a.timeScale !== b.timeScale)
+        return false;
+    if (a.renderers.length !== b.renderers.length)
+        return false;
+    for (let i = 0; i < a.renderers.length; i++) {
+        if (a.renderers[i].name !== b.renderers[i].name)
+            return false;
+        if (a.renderers[i].entity !== b.renderers[i].entity)
+            return false;
+        if (a.renderers[i].physicsDebugViewActive !== b.renderers[i].physicsDebugViewActive)
+            return false;
+    }
+    return true;
+};
 export class GgDebuggerUI {
     constructor() {
         this.ui = {
@@ -10,6 +26,11 @@ export class GgDebuggerUI {
         this.statsRemoved$ = new Subject();
         this.currentWorld = null;
         this.debugControlsRemoved$ = new Subject();
+        this.viewUpdated$ = new Subject();
+        this.snapshot = {
+            timeScale: 1,
+            renderers: [],
+        };
     }
     get showStats() {
         return !!this.ui.stats;
@@ -64,48 +85,78 @@ export class GgDebuggerUI {
         this.currentWorld = selectedWorld;
         if (value) {
             const debugControlsContainer = document.createElement('div');
+            document.body.appendChild(debugControlsContainer);
             this.ui.debugControlsContainer = debugControlsContainer;
-            const debugLabelCss = "style='display:flex;align-items:center;margin:0.25rem;'";
             debugControlsContainer.style.cssText =
                 'position:fixed;top:48px;right:0;opacity:0.9;z-index:9999;background-color:#333;color:white;display:flex;flex-direction:column';
-            debugControlsContainer.innerHTML = `
+            this.snapshot = this.makeSnapshot();
+            this.renderControls(debugControlsContainer);
+            of(undefined, animationFrameScheduler)
+                .pipe(repeat(), takeUntil(this.debugControlsRemoved$))
+                .subscribe(() => {
+                const newSnapshot = this.makeSnapshot();
+                if (!snapshotEqual(this.snapshot, newSnapshot)) {
+                    this.snapshot = newSnapshot;
+                    this.renderControls(debugControlsContainer);
+                }
+            });
+        }
+        else {
+            this.debugControlsRemoved$.next();
+            document.body.removeChild(this.ui.debugControlsContainer);
+            this.ui.debugControlsContainer = null;
+        }
+    }
+    makeSnapshot() {
+        return {
+            timeScale: this.currentWorld.worldClock.timeScale,
+            renderers: this.currentWorld.children
+                .filter(x => x instanceof IRendererEntity)
+                .map(r => ({
+                name: r.name,
+                entity: r,
+                physicsDebugViewActive: r.physicsDebugViewActive,
+            })),
+        };
+    }
+    renderControls(debugControlsContainer) {
+        const debugLabelCss = "style='display:flex;align-items:center;margin:0.25rem;'";
+        let html = '';
+        for (const { entity, physicsDebugViewActive } of this.snapshot.renderers) {
+            html += `
       <div ${debugLabelCss}>
-        <input type='checkbox' name='checkbox' id='physics_debugger_checkbox_id' value='1'${this.currentWorld.physicsWorld.physicsDebugViewActive ? ' checked' : ''}>
-        <label for='physics_debugger_checkbox_id' style='user-select: none;'>Show physics bodies in scene</label>
+        <input type='checkbox' name='checkbox' id='physics_debugger_checkbox_id_${entity.name}' value='1'${physicsDebugViewActive ? ' checked' : ''}>
+        <label for='physics_debugger_checkbox_id_${entity.name}' style='user-select: none;'>Physics debugger${this.snapshot.renderers.length > 1 ? ' (' + entity.name + ')' : ''}</label>
       </div>`;
-            // <div ${debugLabelCss}>
-            //   <input id="time_scale_slider" type="range" min="0" max="10" step="0.1" style="flex-grow:1" value="${
-            //      this.currentWorld.physicsWorld.timeScale
-            //   }"/>
-            //   <label for="time_scale_slider" style="user-select: none;">Time scale</label>
-            // </div>`;
-            document.body.appendChild(debugControlsContainer);
-            fromEvent(document.getElementById('physics_debugger_checkbox_id'), 'change')
-                .pipe(takeUntil(this.debugControlsRemoved$))
+        }
+        html += `
+      <div ${debugLabelCss}>
+        <input id='time_scale_slider' type='range' min='0' max='5' step='0.01' style='flex-grow:1' value='${this.snapshot.timeScale}'/>
+        <label for='time_scale_slider' style='user-select: none;'>Time scale</label>
+      </div>`;
+        debugControlsContainer.innerHTML = html;
+        this.viewUpdated$.next();
+        for (const { entity } of this.snapshot.renderers) {
+            fromEvent(document.getElementById('physics_debugger_checkbox_id_' + entity.name), 'change')
+                .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
                 .subscribe(e => {
                 try {
-                    this.currentWorld.physicsDebugViewActive = e.target.checked;
+                    entity.physicsDebugViewActive = e.target.checked;
                 }
                 catch (err) {
                     console.error(err);
                 }
-                e.target.checked = this.currentWorld.physicsDebugViewActive;
             });
-            // fromEvent(document.getElementById('time_scale_slider')! as HTMLInputElement, 'change')
-            //   .pipe(takeUntil(this.debugControlsRemoved$))
-            //   .subscribe(e => {
-            //     try {
-            //        this.currentWorld.physicsWorld.timeScale = +(e.target as HTMLInputElement).value;
-            //     } catch (err) {
-            //       console.error(err);
-            //     }
-            //     (e.target as HTMLInputElement).value = '' + ( this.currentWorld.physicsWorld.timeScale || 1);
-            //   });
-        }
-        else {
-            this.debugControlsRemoved$.next();
-            document.body.removeChild(this.ui.debugControlsContainer);
-            this.ui.debugControlsContainer = null;
         }
+        fromEvent(document.getElementById('time_scale_slider'), 'change')
+            .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
+            .subscribe(e => {
+            try {
+                this.currentWorld.worldClock.timeScale = +e.target.value;
+            }
+            catch (err) {
+                console.error(err);
+            }
+        });
     }
 }

package/dist/dev/gg-static.d.ts

@@ -1,6 +1,5 @@
 import { GgWorld } from '../base';
 export declare class GgStatic {
-    private static _instance;
     static get instance(): GgStatic;
     private readonly debuggerUI;
     private readonly consoleUI;

package/dist/dev/gg-static.js

@@ -51,10 +51,10 @@ export class GgStatic {
         }), 'args: [string]; select world by name');
     }
     static get instance() {
-        if (!GgStatic._instance) {
-            GgStatic._instance = new GgStatic();
+        if (!window.ggstatic) {
+            window.ggstatic = new GgStatic();
         }
-        return GgStatic._instance;
+        return window.ggstatic;
     }
     get devConsoleEnabled() {
         return this._devConsoleEnabled;
@@ -138,4 +138,3 @@ export class GgStatic {
         });
     }
 }
-window.ggstatic = GgStatic.instance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gg-web-engine/core",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "description": "An attempt to create open source game engine for browser",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,11 +27,11 @@
   },
   "homepage": "https://github.com/AndyGura/gg-web-engine#readme",
   "dependencies": {
-    "rxjs": "7.8.0",
+    "rxjs": "7.8.1",
     "stats.js": "0.17.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.0",
+    "@types/jest": "^29.5.12",
     "@types/stats.js": "^0.17.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",

package/dist/base/interfaces/i-debug-physics-drawer.d.ts

@@ -1,8 +0,0 @@
-import { IDisplayObjectComponent } from '../components/rendering/i-display-object.component';
-import { Point3 } from '../models/points';
-import { VisualTypeDocRepo } from '../gg-world';
-export interface IDebugPhysicsDrawer<D, R, TypeDoc extends VisualTypeDocRepo<D, R> = VisualTypeDocRepo<D, R>> extends IDisplayObjectComponent<D, R, TypeDoc> {
-    drawContactPoint(point: D, normal: D, color?: Point3): void;
-    drawLine(from: D, to: D, color?: Point3): void;
-    update(): void;
-}

package/dist/base/interfaces/i-debug-physics-drawer.js

@@ -1 +0,0 @@
-export {};