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() {
-        this.visible = !this.visible;
+    pickEntity() {
+        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,57 +119,39 @@ export class HUDEntityDebugger extends BaseHUDPart {
         return `<label>${name}</label> <span>${displayValue}</span>`;
     }
 
-    update() {
-        const mousePos = this.root.app.mousePosition;
-        if (!mousePos) {
-            return;
-        }
-        const worldPos = this.root.camera.screenToWorld(mousePos);
-        const worldTile = worldPos.toTileSpace();
+    /**
+     * Rerenders the whole container
+     * @param {Entity} entity
+     */
+    rerenderFull(entity) {
+        removeAllChildren(this.componentsElem);
+        let html = "";
 
-        const chunk = worldTile.divideScalar(globalConfig.mapChunkSize).floor();
-        this.mousePosElem.innerText = worldTile.x + " / " + worldTile.y;
-        this.chunkPosElem.innerText = chunk.x + " / " + chunk.y;
+        const property = (strings, val) => `<label>${strings[0]}</label> <span>${val}</span>`;
 
-        const entity = this.root.map.getTileContent(worldTile, this.root.currentLayer);
+        html += property`registered ${!!entity.registered}`;
+        html += property`uid ${entity.uid}`;
+        html += property`destroyed ${!!entity.destroyed}`;
 
-        if (entity) {
-            removeAllChildren(this.componentsElem);
-            let html = "";
+        for (const componentId in entity.components) {
+            const data = entity.components[componentId];
+            html += "<details class='object'>";
+            html += "<summary>" + componentId + "</summary><div>";
 
-            const property = (strings, val) => `<label>${strings[0]}</label> <span>${val}</span>`;
-
-            html += property`registered ${entity.registered}`;
-            html += property`uid ${entity.uid}`;
-            html += property`destroyed ${entity.destroyed}`;
-
-            for (const componentId in entity.components) {
-                const data = entity.components[componentId];
-                html += "<details class='object'>";
-                html += "<summary>" + componentId + "</summary><div>";
-
-                for (const property in data) {
-                    // Put entity into recursion list, so it won't get "expanded"
-                    html += this.propertyToHTML(property, data[property], 0, [entity]);
-                }
-
-                html += "</div></details>";
+            for (const property in data) {
+                // Put entity into recursion list, so it won't get "expanded"
+                html += this.propertyToHTML(property, data[property], 0, [entity]);
             }
 
-            this.componentsElem.innerHTML = html;
+            html += "</div></details>";
         }
 
-        this.domAttach.update(this.visible);
+        this.componentsElem.innerHTML = html;
     }
 
-    onMouseDown() {
-        // 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();
+    update() {
+        this.domAttach.update(!!this.selectedEntity);
     }
 }
+
+/* dev:end */