New Entity Debugger (i hope so) (#665)

src/css/ingame_hud/entity_debugger.scss

@@ -1,43 +1,65 @@
 #ingame_HUD_EntityDebugger {
     position: absolute;
+    background: $ingameHudBg;
+    @include S(padding, 5px);
     @include S(right, 30px);
-    @include S(top, 200px);
 
-    font-size: 14px;
-    line-height: 16px;
-    color: #fff;
-    background: rgba(0, 10, 20, 0.7);
-    padding: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    @include SuperSmallText;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+
+    > label {
+        text-transform: uppercase;
+    }
+
+    .hint {
+        color: #aaa;
+    }
+
     &,
     * {
         pointer-events: all;
     }
 
-    .flag {
-        display: inline-block;
-        background: #333438;
-        @include S(padding, 2px);
-        @include S(margin-right, 2px);
-
-        u {
-            opacity: 0.5;
-        }
+    .propertyTable {
+        @include S(margin-top, 8px);
     }
 
-    .components {
-        @include S(margin-top, 4px);
+    .propertyTable,
+    .entityComponents,
+    .entityComponents .object > div {
         display: grid;
-        grid-template-columns: 1fr 1fr;
-        @include S(grid-gap, 3px);
-        .component {
-            @include S(padding, 2px);
-            background: #333;
-            display: flex;
-            flex-direction: column;
+        grid-template-columns: 1fr auto;
+        @include S(column-gap, 10px);
+    }
 
-            .data {
-                @include S(width, 150px);
-                @include S(height, 130px);
+    .entityComponents {
+        grid-column: 1 / 3;
+        @include S(margin-top, 5px);
+
+        font-family: "Roboto Mono", "Fira Code", monospace;
+        font-size: 90%;
+        @include S(letter-spacing, -0.5px);
+
+        label,
+        span {
+            line-height: 1.5em;
+
+            &:not(span) {
+                opacity: 0.5;
+            }
+        }
+
+        .object {
+            grid-column: 1 / 3;
+            line-height: 1.5em;
+
+            > div {
+                @include S(margin-left, 4px);
             }
         }
     }

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

@@ -1,6 +1,7 @@
 import { BaseHUDPart } from "../base_hud_part";
 import { makeDiv, removeAllChildren } from "../../../core/utils";
 import { globalConfig } from "../../../core/config";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
 
 export class HUDEntityDebugger extends BaseHUDPart {
     createElements(parent) {
@@ -9,9 +10,14 @@ export class HUDEntityDebugger extends BaseHUDPart {
             "ingame_HUD_EntityDebugger",
             [],
             `
-            Tile below cursor: <span class="mousePos"></span><br>
-            Chunk below cursor: <span class="chunkPos"></span><br>
-            <div class="entityInfo"></div>
+            <label>Entity Debugger</label>
+            <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>
         `
         );
 
@@ -19,11 +25,68 @@ export class HUDEntityDebugger extends BaseHUDPart {
         this.mousePosElem = this.element.querySelector(".mousePos");
         /** @type {HTMLElement} */
         this.chunkPosElem = this.element.querySelector(".chunkPos");
-        this.entityInfoElem = this.element.querySelector(".entityInfo");
+        this.componentsElem = this.element.querySelector(".entityComponents");
     }
 
     initialize() {
+        this.root.gameState.inputReciever.keydown.add(key => {
+            if (key.keyCode === 119) {
+                // F8
+                this.toggle();
+            }
+        });
+
         this.root.camera.downPreHandler.add(this.onMouseDown, this);
+
+        this.visible = !G_IS_DEV;
+        this.domAttach = new DynamicDomAttach(this.root, this.element);
+    }
+
+    toggle() {
+        this.visible = !this.visible;
+    }
+
+    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"})`;
+            const colorStyle = `color: hsl(${30 * indent}, 100%, 80%)`;
+
+            let html = `<details class="object" style="${colorStyle}">
+                            <summary>${name} ${typeName}</summary>
+                            <div>`;
+
+            for (const property in val) {
+                const isRoot = val[property] == this.root;
+                const isRecursive = recursion.includes(val[property]);
+
+                let hiddenValue = isRoot ? "<root>" : null;
+                if (isRecursive) {
+                    // Avoid recursion by not "expanding" object more than once
+                    hiddenValue = "<recursion>";
+                }
+
+                html += this.propertyToHTML(
+                    property,
+                    hiddenValue ? hiddenValue : val[property],
+                    indent + 1,
+                    [...recursion] // still expand same value in other "branches"
+                );
+            }
+
+            html += "</div></details>";
+
+            return html;
+        }
+
+        const displayValue = (val + "")
+            .replaceAll("&", "&amp;")
+            .replaceAll("<", "&lt;")
+            .replaceAll(">", "&gt;");
+        return `<label>${name}</label> <span>${displayValue}</span>`;
     }
 
     update() {
@@ -39,35 +102,44 @@ export class HUDEntityDebugger extends BaseHUDPart {
         this.chunkPosElem.innerText = chunk.x + " / " + chunk.y;
 
         const entity = this.root.map.getTileContent(worldTile, this.root.currentLayer);
+
         if (entity) {
-            removeAllChildren(this.entityInfoElem);
-            let html = "Entity";
+            removeAllChildren(this.componentsElem);
+            let html = "";
 
-            const flag = (name, val) =>
-                `<span class='flag' data-value='${val ? "1" : "0"}'><u>${name}</u> ${val}</span>`;
+            const property = (strings, val) => `<label>${strings[0]}</label> <span>${val}</span>`;
 
-            html += "<div class='entityFlags'>";
-            html += flag("registered", entity.registered);
-            html += flag("uid", entity.uid);
-            html += flag("destroyed", entity.destroyed);
-            html += "</div>";
-
-            html += "<div class='components'>";
+            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 += "<div class='component'>";
-                html += "<strong class='name'>" + componentId + "</strong>";
-                html += "<textarea class='data'>" + JSON.stringify(data.serialize(), null, 2) + "</textarea>";
+                html += "<details class='object'>";
+                html += "<summary>" + componentId + "</summary><div>";
 
-                html += "</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>";
             }
 
-            html += "</div>";
-
-            this.entityInfoElem.innerHTML = html;
+            this.componentsElem.innerHTML = html;
         }
+
+        this.domAttach.update(this.visible);
     }
 
-    onMouseDown() {}
+    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();
+    }
 }

src/js/game/key_action_mapper.js

@@ -204,22 +204,20 @@ export function getStringForKeyCode(code) {
         case 115:
             return "F4";
         case 116:
-            return "F4";
-        case 117:
             return "F5";
-        case 118:
+        case 117:
             return "F6";
-        case 119:
+        case 118:
             return "F7";
-        case 120:
+        case 119:
             return "F8";
-        case 121:
+        case 120:
             return "F9";
-        case 122:
+        case 121:
             return "F10";
-        case 123:
+        case 122:
             return "F11";
-        case 124:
+        case 123:
             return "F12";
 
         case 144: