parent
8c42827f4e
commit
a60d23da77
@ -0,0 +1,44 @@
|
||||
#ingame_HUD_EntityDebugger {
|
||||
position: absolute;
|
||||
@include S(right, 30px);
|
||||
@include S(top, 250px);
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #fff;
|
||||
background: rgba(0, 10, 20, 0.7);
|
||||
padding: 10px;
|
||||
&,
|
||||
* {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.flag {
|
||||
display: inline-block;
|
||||
background: #333438;
|
||||
@include S(padding, 2px);
|
||||
@include S(margin-right, 2px);
|
||||
|
||||
u {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.components {
|
||||
@include S(margin-top, 4px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@include S(grid-gap, 3px);
|
||||
.component {
|
||||
@include S(padding, 2px);
|
||||
background: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.data {
|
||||
@include S(width, 150px);
|
||||
@include S(height, 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,68 @@
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv, removeAllChildren } from "../../../core/utils";
|
||||
import { globalConfig } from "../../../core/config";
|
||||
|
||||
export class HUDEntityDebugger extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.element = makeDiv(
|
||||
parent,
|
||||
"ingame_HUD_EntityDebugger",
|
||||
[],
|
||||
`
|
||||
Tile below cursor: <span class="mousePos"></span><br>
|
||||
Chunk below cursor: <span class="chunkPos"></span><br>
|
||||
<div class="entityInfo"></div>
|
||||
`
|
||||
);
|
||||
|
||||
this.mousePosElem = this.element.querySelector(".mousePos");
|
||||
this.chunkPosElem = this.element.querySelector(".chunkPos");
|
||||
this.entityInfoElem = this.element.querySelector(".entityInfo");
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.root.camera.downPreHandler.add(this.onMouseDown, this);
|
||||
}
|
||||
|
||||
update() {
|
||||
const mousePos = this.root.app.mousePosition;
|
||||
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);
|
||||
if (entity) {
|
||||
removeAllChildren(this.entityInfoElem);
|
||||
let html = "Entity";
|
||||
|
||||
const flag = (name, val) =>
|
||||
`<span class='flag' data-value='${val ? "1" : "0"}'><u>${name}</u> ${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'>";
|
||||
|
||||
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 += "</div>";
|
||||
}
|
||||
|
||||
html += "</div>";
|
||||
|
||||
this.entityInfoElem.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
onMouseDown() {}
|
||||
}
|
Loading…
Reference in new issue