Refactor debug overlay

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;
+    }
 }

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",
         ],
     },

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");
+        const tickRateElement = makeDiv(this.element, null, ["tickRate"]);
-        this.fpsElement = makeDiv(this.element, null, ["fps"], "FPS: 60");
+        this.trackedTickRate = new TrackedState(str => (tickRateElement.innerText = str));
-        this.tickDurationElement = makeDiv(this.element, null, ["tickDuration"], "Tick dur: 0.5ms");
+
-        this.mousePositionElement = makeDiv(this.element, null, ["mousePosition"], "Pos: 0 0");
+        const tickDurationElement = makeDiv(this.element, null, ["tickDuration"]);
-        this.cameraPositionElement = makeDiv(this.element, null, ["cameraPosition"], "Center: 0 0");
+        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);
+     * Called when the mode changed
-
+     * @param {enumDebugOverlayMode} mode
-        let version = `version ${G_BUILD_VERSION}`;
+     */
-        if (this.full) {
+    onModeChanged(mode) {
-            version += ` @ ${G_APP_ENVIRONMENT} @ ${G_BUILD_COMMIT_HASH}`;
+        this.element.setAttribute("data-mode", mode);
-        }
+        this.versionElement.innerText = `${G_BUILD_VERSION} @ ${G_APP_ENVIRONMENT} @ ${G_BUILD_COMMIT_HASH}`;
-
-        this.versionElement.innerText = version;
     }
 
-    updatePositions() {
+    /**
-        let mousePos = this.root.app.mousePosition || new Vector(0, 0);
+     * Updates the labels
-        mousePos = this.root.camera.screenToWorld(mousePos).toTileSpace();
+     */
-        const cameraPos = this.root.camera.center.toTileSpace();
+    updateLabels() {
-
+        this.trackedTickRate.set("Tickrate: " + this.root.dynamicTickrate.currentTickRate);
-        this.mousePositionElement.innerText = `Pos: ${mousePos.x} ${mousePos.y}`;
+        this.trackedFPS.set(
-        this.cameraPositionElement.innerText = `Center: ${cameraPos.x} ${cameraPos.y}`;
+            "FPS: " +
-    }
-
-    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: " +
                 Math.round(this.root.dynamicTickrate.averageFps) +
                 " (" +
                 round2Digits(1000 / this.root.dynamicTickrate.averageFps) +
-                " ms)";
+                " ms)"
-            this.tickDurationElement.innerText =
+        );
-                "Tick Dur: " + round3Digits(this.root.dynamicTickrate.averageTickDuration) + "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: <code>${mouseTile.x}</code> / <code>${mouseTile.y}</code>`);
+        this.trackedCameraPosition.set(`Center: <code>${cameraTile.x}</code> / <code>${cameraTile.y}</code>`);
+    }
+
+    /**
+     * 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();
+        }
     }
 }