From 22cba96f6e93421b9c252408611cd19fe5c57af6 Mon Sep 17 00:00:00 2001 From: tobspr Date: Mon, 6 Jul 2020 14:40:31 +0200 Subject: [PATCH] Refactor debug overlay --- src/css/ingame_hud/debug_info.scss | 19 +++- src/js/changelog.js | 3 +- src/js/game/hud/parts/debug_info.js | 146 +++++++++++++++++----------- 3 files changed, 110 insertions(+), 58 deletions(-) diff --git a/src/css/ingame_hud/debug_info.scss b/src/css/ingame_hud/debug_info.scss index de69a4f9..3a077d53 100644 --- a/src/css/ingame_hud/debug_info.scss +++ b/src/css/ingame_hud/debug_info.scss @@ -5,10 +5,12 @@ text-align: right; font-size: 15px; - display: flex; + display: grid; line-height: 15px; - flex-direction: column; color: #fff; + grid-gap: 2px; + text-shadow: 1px 1px 3px rgba(#000, 0.4); + font-weight: bold; &:not([data-mode="detailed"]) { .mousePosition, @@ -16,4 +18,17 @@ display: none; } } + + code { + background: #333; + min-width: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 14px; + line-height: 15px; + padding: 1px; + font-family: "GameFont"; + border-radius: 3px; + } } diff --git a/src/js/changelog.js b/src/js/changelog.js index 98388839..3e3e1a7d 100644 --- a/src/js/changelog.js +++ b/src/js/changelog.js @@ -9,11 +9,12 @@ export const CHANGELOG = [ "Allow binding TAB (by swtw7466)", "Added keybinding to close menus (by isaisstillalive / Sandwichs-del)", "Fix rare crash regarding the buildings toolbar (by isaisstillalive)", - "Fixed some phrases (By EnderDoom77)", + "Fixed some phrases (by EnderDoom77)", "Zoom towards mouse cursor (by Dimava)", "Updated the soundtrack again, it is now 20 minutes in total!", "Updated and added new translations (Thanks to all contributors!)", "Show confirmation when cutting area which is too expensive to get pasted again (by isaisstillalive)", + "Show mouse and camera tile on debug overlay (F4) (by dengr)", "Fix tunnels entrances connecting to exits sometimes when they shouldn't", ], }, diff --git a/src/js/game/hud/parts/debug_info.js b/src/js/game/hud/parts/debug_info.js index bfa09b1e..cdd00540 100644 --- a/src/js/game/hud/parts/debug_info.js +++ b/src/js/game/hud/parts/debug_info.js @@ -3,84 +3,120 @@ import { makeDiv, round3Digits, round2Digits } from "../../../core/utils"; import { DynamicDomAttach } from "../dynamic_dom_attach"; import { KEYMAPPINGS } from "../../key_action_mapper"; import { Vector } from "../../../core/vector"; +import { TrackedState } from "../../../core/tracked_state"; /** @enum {string} */ -export const enumDebugOverlayMode = { disabled: "disabled", regular: "regular", detailed: "detailed" }; +const enumDebugOverlayMode = { disabled: "disabled", regular: "regular", detailed: "detailed" }; + +/** + * Specifies which mode follows after which mode + * @enum {enumDebugOverlayMode} + */ +const enumDebugOverlayModeNext = { + [enumDebugOverlayMode.disabled]: enumDebugOverlayMode.regular, + [enumDebugOverlayMode.regular]: enumDebugOverlayMode.detailed, + [enumDebugOverlayMode.detailed]: enumDebugOverlayMode.disabled, +}; + +const UPDATE_INTERVAL_SECONDS = 0.25; export class HUDDebugInfo extends BaseHUDPart { createElements(parent) { this.element = makeDiv(parent, "ingame_HUD_DebugInfo", []); - 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"], "Tick dur: 0.5ms"); - this.mousePositionElement = makeDiv(this.element, null, ["mousePosition"], "Pos: 0 0"); - this.cameraPositionElement = makeDiv(this.element, null, ["cameraPosition"], "Center: 0 0"); + const tickRateElement = makeDiv(this.element, null, ["tickRate"]); + this.trackedTickRate = new TrackedState(str => (tickRateElement.innerText = str)); + + const tickDurationElement = makeDiv(this.element, null, ["tickDuration"]); + this.trackedTickDuration = new TrackedState(str => (tickDurationElement.innerText = str)); + + const fpsElement = makeDiv(this.element, null, ["fps"]); + this.trackedFPS = new TrackedState(str => (fpsElement.innerText = str)); + + const mousePositionElement = makeDiv(this.element, null, ["mousePosition"]); + this.trackedMousePosition = new TrackedState(str => (mousePositionElement.innerHTML = str)); + + const cameraPositionElement = makeDiv(this.element, null, ["cameraPosition"]); + this.trackedCameraPosition = new TrackedState(str => (cameraPositionElement.innerHTML = str)); + this.versionElement = makeDiv(this.element, null, ["version"], "version unknown"); } initialize() { this.lastTick = 0; - this.mode = enumDebugOverlayMode.disabled; + this.trackedMode = new TrackedState(this.onModeChanged, this); this.domAttach = new DynamicDomAttach(this.root, this.element); - this.root.keyMapper.getBinding(KEYMAPPINGS.ingame.toggleFPSInfo).add(() => this.toggle()); + this.root.keyMapper.getBinding(KEYMAPPINGS.ingame.toggleFPSInfo).add(() => this.cycleModes()); + + // Set initial mode + this.trackedMode.set(enumDebugOverlayMode.disabled); } - updateFullText() { - this.element.setAttribute("data-mode", this.mode); - - let version = `version ${G_BUILD_VERSION}`; - if (this.full) { - version += ` @ ${G_APP_ENVIRONMENT} @ ${G_BUILD_COMMIT_HASH}`; - } - - this.versionElement.innerText = version; + /** + * Called when the mode changed + * @param {enumDebugOverlayMode} mode + */ + onModeChanged(mode) { + this.element.setAttribute("data-mode", mode); + this.versionElement.innerText = `${G_BUILD_VERSION} @ ${G_APP_ENVIRONMENT} @ ${G_BUILD_COMMIT_HASH}`; } - 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() { - switch (this.mode) { - case enumDebugOverlayMode.detailed: - this.mode = enumDebugOverlayMode.disabled; - break; - case enumDebugOverlayMode.regular: - this.mode = enumDebugOverlayMode.detailed; - break; - default: - this.mode = enumDebugOverlayMode.regular; - break; - } - this.updateFullText(); - this.domAttach.update(this.mode !== enumDebugOverlayMode.disabled); - } - - update() { - const now = this.root.time.realtimeNow(); - if (!this.visible) return; - - if (now - this.lastTick > 0.25) { - this.lastTick = now; - this.tickRateElement.innerText = "Tickrate: " + this.root.dynamicTickrate.currentTickRate; - this.fpsElement.innerText = - "FPS: " + + /** + * Updates the labels + */ + updateLabels() { + this.trackedTickRate.set("Tickrate: " + this.root.dynamicTickrate.currentTickRate); + this.trackedFPS.set( + "FPS: " + Math.round(this.root.dynamicTickrate.averageFps) + " (" + round2Digits(1000 / this.root.dynamicTickrate.averageFps) + - " ms)"; - this.tickDurationElement.innerText = - "Tick Dur: " + round3Digits(this.root.dynamicTickrate.averageTickDuration) + "ms"; + " ms)" + ); + this.trackedTickDuration.set( + "Tick: " + round3Digits(this.root.dynamicTickrate.averageTickDuration) + "ms" + ); + } + + /** + * Updates the detailed information + */ + updateDetailedInformation() { + const mousePos = this.root.app.mousePosition || new Vector(0, 0); + const mouseTile = this.root.camera.screenToWorld(mousePos).toTileSpace(); + const cameraTile = this.root.camera.center.toTileSpace(); + + this.trackedMousePosition.set(`Pos: ${mouseTile.x} / ${mouseTile.y}`); + this.trackedCameraPosition.set(`Center: ${cameraTile.x} / ${cameraTile.y}`); + } + + /** + * Cycles through the different modes + */ + cycleModes() { + this.trackedMode.set(enumDebugOverlayModeNext[this.trackedMode.get()]); + } + + update() { + const visible = this.trackedMode.get() !== enumDebugOverlayMode.disabled; + this.domAttach.update(visible); + + if (!visible) { + return; } - this.updatePositions(); + // Periodically update the text + const now = this.root.time.realtimeNow(); + if (now - this.lastTick > UPDATE_INTERVAL_SECONDS) { + this.lastTick = now; + this.updateLabels(); + } + + // Also update detailed information if required + if (this.trackedMode.get() === enumDebugOverlayMode.detailed) { + this.updateDetailedInformation(); + } } }