Improve entity debugger

src/css/ingame_hud/entity_debugger.scss

@@ -53,13 +53,27 @@
                 opacity: 0.5;
             }
         }
+        &,
+        * {
+            @include SuperSmallText;
+            @include S(font-size, 7px, $important: true);
+            @include S(line-height, 12px, $important: true);
+        }
 
         .object {
             grid-column: 1 / 3;
             line-height: 1.5em;
 
+            > summary {
+                transition: opacity 0.1s ease-in-out;
+                cursor: pointer;
+                &:hover {
+                    opacity: 0.8;
+                }
+            }
             > div {
                 @include S(margin-left, 4px);
+                cursor: pointer;
             }
         }
     }

src/js/game/hud/parts/entity_debugger.js

@@ -1,8 +1,13 @@
-import { BaseHUDPart } from "../base_hud_part";
+/* dev:start */
 import { makeDiv, removeAllChildren } from "../../../core/utils";
-import { globalConfig } from "../../../core/config";
+import { Vector } from "../../../core/vector";
+import { Entity } from "../../entity";
+import { BaseHUDPart } from "../base_hud_part";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 
+/**
+ * Allows to inspect entities by pressing F8 while hovering them
+ */
 export class HUDEntityDebugger extends BaseHUDPart {
     createElements(parent) {
         this.element = makeDiv(
@@ -14,17 +19,10 @@ export class HUDEntityDebugger extends BaseHUDPart {
             <span class="hint">Use F8 to toggle this overlay</span>
 
             <div class="propertyTable">
-                <div>Tile below cursor</div> <span class="mousePos"></span>
-                <div>Chunk below cursor</div> <span class="chunkPos"></span>
                 <div class="entityComponents"></div>
             </div>
         `
         );
-
-        /** @type {HTMLElement} */
-        this.mousePosElem = this.element.querySelector(".mousePos");
-        /** @type {HTMLElement} */
-        this.chunkPosElem = this.element.querySelector(".chunkPos");
         this.componentsElem = this.element.querySelector(".entityComponents");
     }
 
@@ -32,27 +30,59 @@ export class HUDEntityDebugger extends BaseHUDPart {
         this.root.gameState.inputReciever.keydown.add(key => {
             if (key.keyCode === 119) {
                 // F8
-                this.toggle();
+                this.pickEntity();
             }
         });
 
-        this.root.camera.downPreHandler.add(this.onMouseDown, this);
+        /**
+         * The currently selected entity
+         * @type {Entity}
+         */
+        this.selectedEntity = null;
+
+        this.lastUpdate = 0;
 
-        this.visible = !G_IS_DEV;
         this.domAttach = new DynamicDomAttach(this.root, this.element);
     }
 
-    toggle() {
+    pickEntity() {
-        this.visible = !this.visible;
+        const mousePos = this.root.app.mousePosition;
+        if (!mousePos) {
+            return;
+        }
+        const worldPos = this.root.camera.screenToWorld(mousePos);
+        const worldTile = worldPos.toTileSpace();
+        const entity = this.root.map.getTileContent(worldTile, this.root.currentLayer);
+
+        this.selectedEntity = entity;
+        if (entity) {
+            this.rerenderFull(entity);
+        }
     }
 
+    /**
+     *
+     * @param {string} name
+     * @param {any} val
+     * @param {number} indent
+     * @param {Array} recursion
+     */
     propertyToHTML(name, val, indent = 0, recursion = []) {
         if (val !== null && typeof val === "object") {
             // Array is displayed like object, with indexes
             recursion.push(val);
 
             // Get type class name (like Array, Object, Vector...)
-            const typeName = `(${val.constructor ? val.constructor.name : "unknown"})`;
+            let typeName = `(${val.constructor ? val.constructor.name : "unknown"})`;
+
+            if (Array.isArray(val)) {
+                typeName = `(Array[${val.length}])`;
+            }
+
+            if (val instanceof Vector) {
+                typeName = `(Vector[${val.x}, ${val.y}])`;
+            }
+
             const colorStyle = `color: hsl(${30 * indent}, 100%, 80%)`;
 
             let html = `<details class="object" style="${colorStyle}">
@@ -89,29 +119,19 @@ export class HUDEntityDebugger extends BaseHUDPart {
         return `<label>${name}</label> <span>${displayValue}</span>`;
     }
 
-    update() {
+    /**
-        const mousePos = this.root.app.mousePosition;
+     * Rerenders the whole container
-        if (!mousePos) {
+     * @param {Entity} entity
-            return;
+     */
-        }
+    rerenderFull(entity) {
-        const worldPos = this.root.camera.screenToWorld(mousePos);
-        const worldTile = worldPos.toTileSpace();
-
-        const chunk = worldTile.divideScalar(globalConfig.mapChunkSize).floor();
-        this.mousePosElem.innerText = worldTile.x + " / " + worldTile.y;
-        this.chunkPosElem.innerText = chunk.x + " / " + chunk.y;
-
-        const entity = this.root.map.getTileContent(worldTile, this.root.currentLayer);
-
-        if (entity) {
         removeAllChildren(this.componentsElem);
         let html = "";
 
         const property = (strings, val) => `<label>${strings[0]}</label> <span>${val}</span>`;
 
-            html += property`registered ${entity.registered}`;
+        html += property`registered ${!!entity.registered}`;
         html += property`uid ${entity.uid}`;
-            html += property`destroyed ${entity.destroyed}`;
+        html += property`destroyed ${!!entity.destroyed}`;
 
         for (const componentId in entity.components) {
             const data = entity.components[componentId];
@@ -129,17 +149,9 @@ export class HUDEntityDebugger extends BaseHUDPart {
         this.componentsElem.innerHTML = html;
     }
 
-        this.domAttach.update(this.visible);
+    update() {
+        this.domAttach.update(!!this.selectedEntity);
+    }
 }
 
-    onMouseDown() {
+/* dev:end */
-        // On click, update current entity
-
-        const mousePos = this.root.app.mousePosition;
-        if (!mousePos) {
-            return;
-        }
-        const worldPos = this.root.camera.screenToWorld(mousePos);
-        const worldTile = worldPos.toTileSpace();
-    }
-}