diff --git a/src/css/ingame_hud/entity_debugger.scss b/src/css/ingame_hud/entity_debugger.scss index 6d0b4c52..c8a41db1 100644 --- a/src/css/ingame_hud/entity_debugger.scss +++ b/src/css/ingame_hud/entity_debugger.scss @@ -25,11 +25,13 @@ pointer-events: all; } + .propertyTable { + @include S(margin-top, 8px); + } + .propertyTable, .entityComponents, .entityComponents .object > div { - @include S(margin-top, 5px); - display: grid; grid-template-columns: 1fr auto; @include S(column-gap, 10px); @@ -37,13 +39,15 @@ .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: 140%; + line-height: 1.5em; &:not(span) { opacity: 0.5; @@ -52,7 +56,7 @@ .object { grid-column: 1 / 3; - line-height: 140%; + line-height: 1.5em; > div { @include S(margin-left, 4px); diff --git a/src/js/game/hud/parts/entity_debugger.js b/src/js/game/hud/parts/entity_debugger.js index 6f501d6b..fc701925 100644 --- a/src/js/game/hud/parts/entity_debugger.js +++ b/src/js/game/hud/parts/entity_debugger.js @@ -46,13 +46,12 @@ export class HUDEntityDebugger extends BaseHUDPart { this.visible = !this.visible; } - propertyToHTML(name, val, indent = 0) { + propertyToHTML(name, val, indent = 0, recursion = []) { if (val !== null && typeof val === "object") { - if (indent > 10) { - return ""; - } - // 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%)`; @@ -62,8 +61,20 @@ export class HUDEntityDebugger extends BaseHUDPart { for (const property in val) { const isRoot = val[property] == this.root; + const isRecursive = recursion.includes(val[property]); - html += this.propertyToHTML(property, isRoot ? "" : val[property], indent + 1); + let hiddenValue = isRoot ? "" : null; + if (isRecursive) { + // Avoid recursion by not "expanding" object more than once + hiddenValue = ""; + } + + html += this.propertyToHTML( + property, + hiddenValue ? hiddenValue : val[property], + indent + 1, + [...recursion] // still expand same value in other "branches" + ); } html += ""; @@ -91,6 +102,7 @@ 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.componentsElem); let html = ""; @@ -107,7 +119,8 @@ export class HUDEntityDebugger extends BaseHUDPart { html += "" + componentId + "
"; for (const property in data) { - html += this.propertyToHTML(property, data[property]); + // Put entity into recursion list, so it won't get "expanded" + html += this.propertyToHTML(property, data[property], 0, [entity]); } html += "
"; @@ -119,5 +132,14 @@ export class HUDEntityDebugger extends BaseHUDPart { 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(); + } }