@gg-web-engine/core 0.0.48 → 0.0.56

package/dist/base/gg-world.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { GgGlobalClock, IRendererEntity, KeyboardInput, TickOrder, } from '../base';
+import { IRendererEntity, KeyboardInput, PausableClock, TickOrder, } from '../base';
 import { lastValueFrom, Subject, take } from 'rxjs';
 import { PerformanceMeterEntity } from '../dev';
 export class GgWorld {
@@ -17,7 +17,7 @@ export class GgWorld {
     constructor(visualScene, physicsWorld) {
         this.visualScene = visualScene;
         this.physicsWorld = physicsWorld;
-        this.worldClock = GgGlobalClock.instance.createChildClock(false);
+        this.worldClock = new PausableClock(false);
         this.keyboardInput = new KeyboardInput();
         this.name = 'w0x' + (GgWorld.default_name_counter++).toString(16);
         this.children = [];
@@ -28,72 +28,18 @@ export class GgWorld {
         this.tickForwardTo$ = new Subject();
         this.tickForwardedTo$ = new Subject();
         this.paused$ = new Subject();
-        GgWorld._documentWorlds.push(this);
+        this.disposed$ = new Subject();
         this.keyboardInput.start();
         if (window.ggstatic) {
-            window.ggstatic.registerConsoleCommand(this, 'ph_timescale', (...args) => __awaiter(this, void 0, void 0, function* () {
-                this.worldClock.timeScale = +args[0];
-                return JSON.stringify(this.worldClock.timeScale);
-            }), 'args: [float]; change time scale of physics engine. Default value is 1.0');
-            window.ggstatic.registerConsoleCommand(this, 'ls_renderers', () => __awaiter(this, void 0, void 0, function* () {
-                return this.children
-                    .filter(e => e instanceof IRendererEntity)
-                    .map(r => r.name)
-                    .join('\n');
-            }), 'no args; print all renderers in selected world');
-            window.ggstatic.registerConsoleCommand(this, 'dr_drawphysics', (...args) => __awaiter(this, void 0, void 0, function* () {
-                const value = ['1', 'true', '+'].includes(args[0]);
-                const rendererName = args[1];
-                let renderer;
-                if (rendererName) {
-                    renderer = this.children.find(x => x instanceof IRendererEntity && x.name === rendererName);
-                }
-                else {
-                    renderer = this.children.find(x => x instanceof IRendererEntity);
-                }
-                if (renderer) {
-                    renderer.physicsDebugViewActive = value;
-                    return '' + value;
-                }
-                return 'false';
-            }), 'args: [0 or 1] or [0 or 1, string]; turn on/off physics debug view. Second argument expects renderer ' +
-                'name, if not provided first renderer will be picked. Look up for renderer names using command "ls_renderers"');
-            window.ggstatic.registerConsoleCommand(this, 'performance_report', (...args) => __awaiter(this, void 0, void 0, function* () {
-                let mode = 'avg';
-                let samples = 20;
-                for (let i = 0; i < 2; i++) {
-                    if (['avg', 'peak'].includes(args[i])) {
-                        mode = args[i];
-                    }
-                    else if (!isNaN(+args[i])) {
-                        samples = +args[i];
-                    }
-                }
-                const meter = new PerformanceMeterEntity(samples, 250);
-                this.addEntity(meter);
-                yield lastValueFrom(this.worldClock.tick$.pipe(take(samples)));
-                const report = mode === 'avg' ? meter.avgReport : meter.peakReport;
-                this.removeEntity(meter);
-                const renderItems = report.entries.map(([name, value]) => `<span style='color:lightgray;'>${name}:</span>` +
-                    new Array(Math.max(0, 26 - name.length)).join('&nbsp;') +
-                    `${value.toFixed(2)} ms` +
-                    (mode === 'avg' ? ` (${((value * 100) / report.totalTime).toFixed(2)}%)` : ''));
-                let totalColor = 'lightgreen';
-                if (report.totalTime > 12) {
-                    totalColor = report.totalTime < 16 ? 'yellow' : 'red';
-                }
-                const title = `${mode === 'avg' ? 'Average' : 'Peak'} Frame time`;
-                renderItems.unshift(title +
-                    ':' +
-                    new Array(Math.max(0, 26 - title.length)).join('&nbsp;') +
-                    `<span style='color:${totalColor};'>${report.totalTime.toFixed(2)} ms</span>`);
-                renderItems.unshift(`Performance report (${samples} samples)`);
-                return renderItems.join('\n');
-            }), 'args: [int, avg|peak]; [avg|peak, int]; [avg|peak]; [int] or []; measure how much time was spent per ' +
-                'entity in world. Arguments are samples amount (20 by default) and "peak" or "avg" choice, both arguments are ' +
-                'optional. "avg" report sorts entities by average time consumed, "peak" records highest value for each entity');
+            this.registerConsoleCommands(window.ggstatic);
+        }
+        else {
+            this.onGgStaticInitialized = this.onGgStaticInitialized.bind(this);
+            window.addEventListener('ggstatic_added', this.onGgStaticInitialized);
         }
         this.worldClock.paused$.subscribe(this.paused$);
+        GgWorld._documentWorlds.push(this);
+        GgWorld.worldCreated$.next(this);
     }
     init() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -145,12 +91,15 @@ export class GgWorld {
         return this.worldClock.elapsedTime;
     }
     createClock(autoStart) {
-        return this.worldClock.createChildClock(autoStart);
+        return new PausableClock(autoStart, this.worldClock);
     }
     dispose() {
         if (window.ggstatic) {
             window.ggstatic.deregisterWorldCommands(this);
         }
+        else {
+            window.removeEventListener('ggstatic_added', this.onGgStaticInitialized);
+        }
         this.worldClock.stop();
         this.keyboardInput.stop();
         this.tickStarted$.complete();
@@ -164,6 +113,9 @@ export class GgWorld {
         this.tickListeners.splice(0, this.tickListeners.length);
         this.physicsWorld.dispose();
         this.visualScene.dispose();
+        GgWorld._documentWorlds.splice(GgWorld._documentWorlds.indexOf(this), 1);
+        this.disposed$.next();
+        this.disposed$.complete();
     }
     addEntity(entity) {
         if (!!entity.world) {
@@ -188,6 +140,91 @@ export class GgWorld {
             entity.dispose();
         }
     }
+    onGgStaticInitialized() {
+        window.removeEventListener('ggstatic_added', this.onGgStaticInitialized);
+        this.registerConsoleCommands(window.ggstatic);
+    }
+    registerConsoleCommands(ggstatic) {
+        ggstatic.registerConsoleCommand(this, 'timescale', (...args) => __awaiter(this, void 0, void 0, function* () {
+            if (!isNaN(+args[0])) {
+                this.worldClock.timeScale = +args[0];
+            }
+            return this.worldClock.timeScale.toString();
+        }), 'args: [ float? ]; Get current time scale of selected world clock or set it.' +
+            ' Default value is 1.0 (no time scale applied)');
+        ggstatic.registerConsoleCommand(this, 'fps_limit', (...args) => __awaiter(this, void 0, void 0, function* () {
+            if (!isNaN(+args[0])) {
+                this.worldClock.tickRateLimit = +args[0];
+            }
+            return this.worldClock.tickRateLimit.toString();
+        }), 'args: [ int? ]; Get current tick rate limit of selected world clock or set it. 0 means no limit applied');
+        ggstatic.registerConsoleCommand(this, 'renderers', () => __awaiter(this, void 0, void 0, function* () {
+            return this.children
+                .filter(e => e instanceof IRendererEntity)
+                .map(r => r.name)
+                .join('\n');
+        }), 'no args; Print all renderers in selected world');
+        ggstatic.registerConsoleCommand(this, 'debug_view', (...args) => __awaiter(this, void 0, void 0, function* () {
+            let value = 'toggle';
+            let rendererName = undefined;
+            for (let arg of args) {
+                if (['1', '0'].includes(arg)) {
+                    value = arg === '1';
+                }
+                else {
+                    rendererName = arg;
+                }
+            }
+            let renderer = this.children.find(x => x instanceof IRendererEntity && (!rendererName || x.name === rendererName));
+            if (renderer) {
+                renderer.physicsDebugViewActive = value === 'toggle' ? !renderer.physicsDebugViewActive : value;
+                return renderer.physicsDebugViewActive ? '1' : '0';
+            }
+            else if (rendererName) {
+                throw new Error(`Renderer with name "${rendererName}" not found`);
+            }
+            else {
+                throw new Error(`No renderer found`);
+            }
+        }), 'args: [ 0|1?, string? ]; Turn on/off physics debug view, skip first argument to toggle value.' +
+            ' Second argument expects renderer name, if not provided first renderer will be picked.' +
+            ' Use "renderers" to get list of renderers in the world');
+        ggstatic.registerConsoleCommand(this, 'performance', (...args) => __awaiter(this, void 0, void 0, function* () {
+            let mode = 'avg';
+            let samples = 20;
+            for (let arg of args) {
+                if (['avg', 'peak'].includes(arg)) {
+                    mode = arg;
+                }
+                else if (!isNaN(+arg)) {
+                    samples = +arg;
+                }
+            }
+            const meter = new PerformanceMeterEntity(samples, 250);
+            this.addEntity(meter);
+            yield lastValueFrom(this.worldClock.tick$.pipe(take(samples)));
+            const report = mode === 'avg' ? meter.avgReport : meter.peakReport;
+            this.removeEntity(meter);
+            const renderItems = report.entries.map(([name, value]) => `<span style='color:lightgray;'>${name}:</span>` +
+                new Array(Math.max(0, 26 - name.length)).join('&nbsp;') +
+                `${value.toFixed(2)} ms` +
+                (mode === 'avg' ? ` (${((value * 100) / report.totalTime).toFixed(2)}%)` : ''));
+            let totalColor = 'lightgreen';
+            if (report.totalTime > 12) {
+                totalColor = report.totalTime < 16 ? 'yellow' : 'red';
+            }
+            const title = `${mode === 'avg' ? 'Average' : 'Peak'} Frame time`;
+            renderItems.unshift(title +
+                ':' +
+                new Array(Math.max(0, 26 - title.length)).join('&nbsp;') +
+                `<span style='color:${totalColor};'>${report.totalTime.toFixed(2)} ms</span>`);
+            renderItems.unshift(`Performance report (${samples} samples)`);
+            return renderItems.join('\n');
+        }), 'args: [ int?, avg|peak? ]; Measure how much time was spent per ' +
+            'entity in world. Arguments are samples amount (20 by default) and "peak" or "avg" choice, both arguments are ' +
+            'optional. "avg" report sorts entities by average time consumed, "peak" records highest value for each entity');
+    }
 }
 GgWorld.default_name_counter = 0;
 GgWorld._documentWorlds = [];
+GgWorld.worldCreated$ = new Subject();

package/dist/base/index.d.ts

@@ -33,4 +33,5 @@ export * from './math/quaternion';
 export * from './math/numbers';
 export * from './math/matrix4';
 export * from './math/splines';
+export * from './pipes/gg-elastic.pipe';
 export * from './gg-world';

package/dist/base/index.js

@@ -33,4 +33,5 @@ export * from './math/quaternion';
 export * from './math/numbers';
 export * from './math/matrix4';
 export * from './math/splines';
+export * from './pipes/gg-elastic.pipe';
 export * from './gg-world';

package/dist/base/inputs/keyboard.input.d.ts

@@ -14,7 +14,7 @@ export declare class KeyboardInput extends IInput {
     /**
      * Which element types should filter key downs when focused
      */
-    externalFocusBlacklist: {
+    static externalFocusBlacklist: {
         new (): HTMLElement;
     }[];
     /**

package/dist/base/inputs/keyboard.input.js

@@ -17,15 +17,6 @@ export class KeyboardInput extends IInput {
          * Flag which disables handling key downs, when document has some "typeable" element focused
          */
         this.skipKeyDownsOnExternalFocus = true;
-        /**
-         * Which element types should filter key downs when focused
-         */
-        this.externalFocusBlacklist = [
-            HTMLInputElement,
-            HTMLTextAreaElement,
-            HTMLSelectElement,
-            HTMLButtonElement,
-        ];
         this.handleKeys = this.handleKeys.bind(this);
         this.resetAllKeys = this.resetAllKeys.bind(this);
         this.onPointerLockChange = this.onPointerLockChange.bind(this);
@@ -127,7 +118,7 @@ export class KeyboardInput extends IInput {
         }
         const pressed = e.type == 'keydown';
         if (pressed && this.skipKeyDownsOnExternalFocus && document.activeElement) {
-            for (const k of this.externalFocusBlacklist) {
+            for (const k of KeyboardInput.externalFocusBlacklist) {
                 if (document.activeElement instanceof k) {
                     return;
                 }
@@ -151,3 +142,12 @@ export class KeyboardInput extends IInput {
         }
     }
 }
+/**
+ * Which element types should filter key downs when focused
+ */
+KeyboardInput.externalFocusBlacklist = [
+    HTMLInputElement,
+    HTMLTextAreaElement,
+    HTMLSelectElement,
+    HTMLButtonElement,
+];

package/dist/base/inputs/mouse.input.d.ts

@@ -59,6 +59,7 @@ export declare class MouseInput extends IInput<[], [unlockPointer?: boolean]> {
     private _wheel$;
     get wheel$(): Observable<number>;
     get isPointerLocked(): boolean;
+    get isPointerLocked$(): Observable<boolean>;
     private readonly options;
     private _delta$;
     private _position$;

package/dist/base/inputs/mouse.input.js

@@ -67,6 +67,9 @@ export class MouseInput extends IInput {
     get isPointerLocked() {
         return !!document.pointerLockElement;
     }
+    get isPointerLocked$() {
+        return fromEvent(document, 'pointerlockchange').pipe(map(() => this.isPointerLocked));
+    }
     get state() {
         return this._state$.getValue();
     }
@@ -153,7 +156,7 @@ export class MouseInput extends IInput {
                 if (this.options.canvas) {
                     this.options.canvas.releasePointerCapture(event.pointerId);
                 }
-                this._element.removeEventListener('pointerup', onPointerUp);
+                window.removeEventListener('pointerup', onPointerUp);
                 this._element.removeEventListener('pointercancel', onPointerUp);
             }
             this._state$.next(pointerLengthsStateMap[Math.min(pointers.length, 2)]);
@@ -166,7 +169,8 @@ export class MouseInput extends IInput {
                     if (this.options.canvas) {
                         this.options.canvas.setPointerCapture(event.pointerId);
                     }
-                    this._element.addEventListener('pointerup', onPointerUp);
+                    // use window instead of this._element to handle case when mouse was released over other element
+                    window.addEventListener('pointerup', onPointerUp);
                     this._element.addEventListener('pointercancel', onPointerUp);
                 }
                 catch (err) {

package/dist/base/pipes/gg-elastic.pipe.d.ts

@@ -0,0 +1,5 @@
+import { Observable, OperatorFunction } from 'rxjs';
+export declare function ggElastic<T>(tick$: Observable<[number, number]>, // [elapsed, delta]
+elasticity: number, // Elasticity parameter
+mix: (a: T, b: T, factor: number) => T, // Mixing function
+equals: (a: T, b: T) => boolean): OperatorFunction<T, T>;

package/dist/base/pipes/gg-elastic.pipe.js

@@ -0,0 +1,44 @@
+import { filter, map, scan, switchMap } from 'rxjs';
+export function ggElastic(tick$, // [elapsed, delta]
+elasticity, // Elasticity parameter
+mix, // Mixing function
+equals) {
+    return (source$) => {
+        return source$.pipe(
+        // Track the target value
+        scan((acc, newValue) => {
+            var _a;
+            return ({
+                targetValue: newValue,
+                currentValue: (_a = acc.currentValue) !== null && _a !== void 0 ? _a : newValue, // Initialize to the first value on startup
+                hasReachedTarget: false, // Reset reach status on new target
+            });
+        }, { targetValue: null, currentValue: null, hasReachedTarget: false }), 
+        // Switch to using tick$ for timing, emitting interpolated values with each tick
+        switchMap(state => tick$.pipe(map(([_, delta]) => {
+            if (state.targetValue === null || state.currentValue === null) {
+                return state.currentValue; // If we have no values, output nothing
+            }
+            // Skip processing if we’ve reached the target and stop emitting
+            if (state.hasReachedTarget) {
+                return undefined; // Stop emitting by returning `undefined`
+            }
+            // Adjust factor based on elasticity and delta time
+            const factor = 1 - Math.exp(-delta / elasticity);
+            // Blend halfway towards the target on each tick
+            const newInterpolatedValue = mix(state.currentValue, state.targetValue, factor);
+            // Update the currentValue to the new interpolated position
+            state.currentValue = newInterpolatedValue;
+            // Check if the interpolated value is "close enough" to the target
+            if (equals(newInterpolatedValue, state.targetValue)) {
+                state.hasReachedTarget = true; // Mark as reached
+                return state.targetValue; // Emit exact target value
+            }
+            return newInterpolatedValue;
+        }))), 
+        // Filter out `undefined` emissions (to stop emitting when settled)
+        map(value => (value !== undefined ? value : null)), 
+        // Remove `null` values (after stopping)
+        filter(value => value !== null));
+    };
+}

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

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { VERSION } from '../version';
 export class GgConsoleUI {
     constructor() {
         this.output = `
@@ -20,11 +21,12 @@ export class GgConsoleUI {
                 ░ ░   ░ ░ ░   ░      ░   ░     ░    ░    ░ 
                       ░       ░        ░       ░  ░ ░      
                                                          ░ 
+                             Version: ${VERSION}
              >>> https://github.com/AndyGura/gg-web-engine <<<
 Welcome to GG web engine UI console. 
 Enter command in input below.
 
-List of available commands: `.replace(/ /g, '&nbsp;') + `<span style="color:yellow">ls_commands</span>`;
+List of available commands: `.replace(/ /g, '&nbsp;') + `<span style='color:yellow'>commands</span>`;
         this.commandHistory = [];
         this.currentCommandIndex = 0; // for repeating command using up/down arrow keys
         this.elements = null;
@@ -98,9 +100,14 @@ List of available commands: `.replace(/ /g, '&nbsp;') + `<span style="color:yell
             if (value.trim() === '') {
                 return;
             }
-            let autocompletion = window.ggstatic.availableCommands.find((c) => c[0].startsWith(value));
-            if (autocompletion && autocompletion[0].length > value.length) {
-                this.elements.input.value = autocompletion[0];
+            let autocompletion = null;
+            for (let [command] of window.ggstatic.availableCommands) {
+                if (command.startsWith(value) && (!autocompletion || autocompletion.length > command.length)) {
+                    autocompletion = command;
+                }
+            }
+            if (autocompletion && autocompletion.length > value.length) {
+                this.elements.input.value = autocompletion;
                 this.elements.input.setSelectionRange(value.length, this.elements.input.value.length);
             }
         };
@@ -135,6 +142,9 @@ List of available commands: `.replace(/ /g, '&nbsp;') + `<span style="color:yell
     onInput() {
         return __awaiter(this, void 0, void 0, function* () {
             const command = this.elements.input.value;
+            if (command.length === 0) {
+                return;
+            }
             this.elements.input.value = '';
             this.stdout('\n> ' + command);
             this.stdout('\n' + (yield window.ggstatic.console(command)));

package/dist/dev/gg-debugger.ui.d.ts

@@ -4,11 +4,11 @@ export declare class GgDebuggerUI {
     private statsRemoved$;
     get showStats(): boolean;
     private currentWorld;
-    setShowStats(selectedWorld: GgWorld<any, any>, value: boolean): void;
+    setShowStats(selectedWorld: GgWorld<any, any> | null, value: boolean): void;
     private debugControlsRemoved$;
     private viewUpdated$;
     get showDebugControls(): boolean;
-    setShowDebugControls(selectedWorld: GgWorld<any, any>, value: boolean): void;
+    setShowDebugControls(selectedWorld: GgWorld<any, any> | null, value: boolean): void;
     private snapshot;
     perfStatsMode: 'AVG' | 'PEAK';
     private performanceStatsSnapshot;

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

@@ -69,7 +69,7 @@ export class GgDebuggerUI {
             }
         }
         this.currentWorld = selectedWorld;
-        if (value) {
+        if (selectedWorld && value) {
             const stats = new Stats();
             this.ui.stats = stats;
             stats.dom.style.left = 'unset';
@@ -139,9 +139,10 @@ export class GgDebuggerUI {
         }
     }
     makeSnapshot() {
+        var _a, _b;
         const renderers = [];
         let performanceMeter = null;
-        for (const e of this.currentWorld.children) {
+        for (const e of ((_a = this.currentWorld) === null || _a === void 0 ? void 0 : _a.children) || []) {
             if (e instanceof IRendererEntity) {
                 renderers.push(e);
             }
@@ -150,7 +151,7 @@ export class GgDebuggerUI {
             }
         }
         return {
-            timeScale: this.currentWorld.worldClock.timeScale,
+            timeScale: ((_b = this.currentWorld) === null || _b === void 0 ? void 0 : _b.worldClock.timeScale) || NaN,
             renderers: renderers.map(r => ({
                 name: r.name,
                 entity: r,
@@ -160,9 +161,10 @@ export class GgDebuggerUI {
         };
     }
     makePerformanceStatsSnapshot() {
+        var _a;
         if (!this.snapshot.performanceStatsEnabled)
             return null;
-        let performanceMeter = this.currentWorld.children.find(e => e instanceof PerformanceMeterEntity);
+        let performanceMeter = (((_a = this.currentWorld) === null || _a === void 0 ? void 0 : _a.children) || []).find(e => e instanceof PerformanceMeterEntity);
         if (performanceMeter) {
             if (this.perfStatsMode === 'AVG') {
                 return performanceMeter.avgReport;
@@ -178,19 +180,19 @@ export class GgDebuggerUI {
         for (const { entity, physicsDebugViewActive } of this.snapshot.renderers) {
             html += `
       <div ${this.css}>
-        <input type='checkbox' name='checkbox' id='physics_debugger_checkbox_id_${entity.name}' value='1'${physicsDebugViewActive ? ' checked' : ''}>
+        <input type='checkbox' name='checkbox' id='physics_debugger_checkbox_id_${entity.name}' onkeydown='event.preventDefault()' 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>`;
         }
         html += `
       <div ${this.css}>
-        <input id='time_scale_slider' type='range' min='0' max='5' step='0.01' style='flex-grow:1' value='${this.snapshot.timeScale}'/>
+        <input id='time_scale_slider' type='range' min='0' max='5' step='0.01' onkeydown='event.preventDefault()' style='flex-grow:1' value='${this.snapshot.timeScale}'/>
         <label for='time_scale_slider' style='user-select: none;'>Time scale</label>
       </div>`;
         html +=
             `
       <div ${this.css}>
-        <input type='checkbox' name='checkbox' id='perf_stats_checkbox_id' value='1'${this.snapshot.performanceStatsEnabled ? ' checked' : ''}>
+        <input type='checkbox' name='checkbox' id='perf_stats_checkbox_id' onkeydown='event.preventDefault()' value='1'${this.snapshot.performanceStatsEnabled ? ' checked' : ''}>
         <label for='perf_stats_checkbox_id' style='user-select: none;'>Entities performance distribution</label>
       </div>
     ` +
@@ -233,12 +235,13 @@ export class GgDebuggerUI {
         fromEvent(document.getElementById('perf_stats_checkbox_id'), 'change')
             .pipe(takeUntil(this.debugControlsRemoved$), takeUntil(this.viewUpdated$))
             .subscribe(e => {
-            const entity = this.currentWorld.children.find(x => x instanceof PerformanceMeterEntity);
+            var _a;
+            const entity = (((_a = this.currentWorld) === null || _a === void 0 ? void 0 : _a.children) || []).find(x => x instanceof PerformanceMeterEntity);
             if (e.target.checked == !entity) {
                 if (entity) {
                     this.currentWorld.removeEntity(entity);
                 }
-                else {
+                else if (this.currentWorld) {
                     this.currentWorld.addEntity(new PerformanceMeterEntity());
                 }
             }
@@ -265,7 +268,7 @@ export class GgDebuggerUI {
             html += `
           <div ${pCss}>
             <label for='stat_progress' ${labelCss}>${total.toFixed(2)}ms</label>
-            <progress id="stat_progress" ${progressCss} max="16" value="${total}"></progress>
+            <progress id='stat_progress' ${progressCss} max='16' value='${total}'></progress>
             <span ${spanCss}>Total frame time</span>
           </div>`;
             for (const [i, [name, value]] of this.performanceStatsSnapshot.entries.entries()) {

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

@@ -7,12 +7,17 @@ export declare class GgStatic {
     get devConsoleEnabled(): boolean;
     consoleKeyPressEventListener: (event: KeyboardEvent) => void;
     set devConsoleEnabled(value: boolean);
+    toggleDevConsole(value: boolean): void;
+    private showStats$;
     get showStats(): boolean;
     set showStats(value: boolean);
+    private showDebugControls$;
     get showDebugControls(): boolean;
     set showDebugControls(value: boolean);
-    private _selectedWorld;
+    private _selectedWorld$;
     get selectedWorld(): GgWorld<any, any> | null;
+    private set selectedWorld(value);
+    private autoAssignSelectedWorld;
     get availableCommands(): [string, {
         handler: (...args: string[]) => Promise<string>;
         doc?: string;