Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
dengr1065 2020-09-19 08:57:29 +03:00 committed by GitHub
parent 2c2fa6e831
commit 7650931f1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 151 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/css/ingame_hud/entity_debugger.scss
View File

@ -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);
}
}
}

118
src/js/game/hud/parts/entity_debugger.js
View File

@ -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();
}
}

16
src/js/game/key_action_mapper.js
View File

@ -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: