diff --git a/src/css/ingame_hud/debug_info.scss b/src/css/ingame_hud/debug_info.scss index f370d04e..24bd856f 100644 --- a/src/css/ingame_hud/debug_info.scss +++ b/src/css/ingame_hud/debug_info.scss @@ -9,4 +9,11 @@ line-height: 15px; flex-direction: column; color: #fff; + + &:not(.debugFull) { + .mousePosition, + .cameraPosition { + display: none; + } + } } diff --git a/src/js/game/hud/parts/debug_info.js b/src/js/game/hud/parts/debug_info.js index 46ec2dcf..79004d8e 100644 --- a/src/js/game/hud/parts/debug_info.js +++ b/src/js/game/hud/parts/debug_info.js @@ -2,6 +2,7 @@ import { BaseHUDPart } from "../base_hud_part"; import { makeDiv, round3Digits, round2Digits } from "../../../core/utils"; import { DynamicDomAttach } from "../dynamic_dom_attach"; import { KEYMAPPINGS } from "../../key_action_mapper"; +import { Vector } from "../../../core/vector"; export class HUDDebugInfo extends BaseHUDPart { createElements(parent) { @@ -9,20 +10,54 @@ export class HUDDebugInfo extends BaseHUDPart { this.tickRateElement = makeDiv(this.element, null, ["tickRate"], "Ticks /s: 120"); this.fpsElement = makeDiv(this.element, null, ["fps"], "FPS: 60"); - this.tickDurationElement = makeDiv(this.element, null, ["tickDuration"], "Update time: 0.5ms"); + this.tickDurationElement = makeDiv(this.element, null, ["tickDuration"], "Tick dur: 0.5ms"); + this.mousePositionElement = makeDiv(this.element, null, ["mousePosition"], "Pos: 0 0"); + this.cameraPositionElement = makeDiv(this.element, null, ["cameraPosition"], "Center: 0 0"); + this.versionElement = makeDiv(this.element, null, ["version"], "version unknown"); } initialize() { this.lastTick = 0; this.visible = false; + this.full = false; this.domAttach = new DynamicDomAttach(this.root, this.element); this.root.keyMapper.getBinding(KEYMAPPINGS.ingame.toggleFPSInfo).add(() => this.toggle()); } + updateFullText() { + this.element.classList.toggle("debugFull", this.full); + + let version = `version ${G_BUILD_VERSION}`; + if (this.full) { + version += ` @ ${G_APP_ENVIRONMENT} @ ${G_BUILD_COMMIT_HASH}`; + } + + this.versionElement.innerText = version; + } + + updatePositions() { + let mousePos = this.root.app.mousePosition || new Vector(0, 0); + mousePos = this.root.camera.screenToWorld(mousePos).toTileSpace(); + const cameraPos = this.root.camera.center.toTileSpace(); + + this.mousePositionElement.innerText = `Pos: ${mousePos.x} ${mousePos.y}`; + this.cameraPositionElement.innerText = `Center: ${cameraPos.x} ${cameraPos.y}`; + } + toggle() { - this.visible = !this.visible; + if (this.visible) { + if (this.full) { + this.visible = false; + this.full = false; + } else { + this.full = true; + } + } else { + this.visible = true; + } + this.updateFullText(); this.domAttach.update(this.visible); } @@ -40,5 +75,7 @@ export class HUDDebugInfo extends BaseHUDPart { this.tickDurationElement.innerText = "Tick Dur: " + round3Digits(this.root.dynamicTickrate.averageTickDuration) + "ms"; } + + this.updatePositions(); } }