|
|
|
@ -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 = "";
|
|
|
|
|
|
|
|
|
|
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]);
|
|
|
|
|
}
|
|
|
|
|
for (const componentId in entity.components) {
|
|
|
|
|
const data = entity.components[componentId];
|
|
|
|
|
html += "<details class='object'>";
|
|
|
|
|
html += "<summary>" + componentId + "</summary><div>";
|
|
|
|
|
|
|
|
|
|
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 */
|
|
|
|
|