Add method to debug changed areas

src/js/game/hud/hud.js

@@ -37,6 +37,7 @@ import { HUDScreenshotExporter } from "./parts/screenshot_exporter";
 import { HUDColorBlindHelper } from "./parts/color_blind_helper";
 import { HUDShapeViewer } from "./parts/shape_viewer";
 import { HUDWiresOverlay } from "./parts/wires_overlay";
+import { HUDChangesDebugger } from "./parts/debug_changes";
 
 export class GameHUD {
     /**
@@ -72,6 +73,9 @@ export class GameHUD {
             screenshotExporter: new HUDScreenshotExporter(this.root),
             shapeViewer: new HUDShapeViewer(this.root),
             wiresOverlay: new HUDWiresOverlay(this.root),
+
+            /** @type {HUDChangesDebugger} */
+            changesDebugger: null,
         };
 
         this.signals = {
@@ -96,6 +100,10 @@ export class GameHUD {
             this.parts.watermark = new HUDWatermark(this.root);
         }
 
+        if (G_IS_DEV && globalConfig.debug.renderChanges) {
+            this.parts.changesDebugger = new HUDChangesDebugger(this.root);
+        }
+
         if (this.root.app.settings.getAllSettings().offerHints) {
             this.parts.tutorialHints = new HUDPartTutorialHints(this.root);
             this.parts.interactiveTutorial = new HUDInteractiveTutorial(this.root);
@@ -223,6 +231,7 @@ export class GameHUD {
             "buildingPlacer",
             "blueprintPlacer",
             "colorBlindHelper",
+            "changesDebugger",
         ];
 
         for (let i = 0; i < partsOrder.length; ++i) {

src/js/game/hud/parts/debug_changes.js

@@ -0,0 +1,78 @@
+import { globalConfig } from "../../../core/config";
+import { DrawParameters } from "../../../core/draw_parameters";
+import { Rectangle } from "../../../core/rectangle";
+import { BaseHUDPart } from "../base_hud_part";
+
+/**
+ * @typedef {{
+ *    label: string,
+ *    area: Rectangle,
+ *    hideAt: number,
+ *    fillColor: string
+ * }} DebugChange
+ */
+
+export class HUDChangesDebugger extends BaseHUDPart {
+    createElements(parent) {}
+
+    initialize() {
+        /** @type {Array<DebugChange>} */
+        this.changes = [];
+    }
+
+    /**
+     * Renders a new change
+     * @param {string} label Text to display
+     * @param {Rectangle} area Affected area world space
+     * @param {string} fillColor Color to display (Hex)
+     * @param {number=} timeToDisplay How long to display the change
+     */
+    renderChange(label, area, fillColor, timeToDisplay = 2) {
+        this.changes.push({
+            label,
+            area: area.clone(),
+            fillColor,
+            hideAt: this.root.time.realtimeNow() + timeToDisplay,
+        });
+    }
+
+    update() {
+        const now = this.root.time.realtimeNow();
+        // Detect outdated changes
+        for (let i = 0; i < this.changes.length; ++i) {
+            const change = this.changes[i];
+            if (change.hideAt <= now) {
+                this.changes.splice(i, 1);
+                i -= 1;
+                continue;
+            }
+        }
+    }
+
+    /**
+     *
+     * @param {DrawParameters} parameters
+     */
+    draw(parameters) {
+        for (let i = 0; i < this.changes.length; ++i) {
+            const change = this.changes[i];
+            parameters.context.fillStyle = change.fillColor;
+            parameters.context.globalAlpha = 0.5;
+            parameters.context.fillRect(
+                change.area.x * globalConfig.tileSize,
+                change.area.y * globalConfig.tileSize,
+                change.area.w * globalConfig.tileSize,
+                change.area.h * globalConfig.tileSize
+            );
+
+            parameters.context.fillStyle = "#222";
+            parameters.context.globalAlpha = 1;
+            parameters.context.font = "bold 8px GameFont";
+            parameters.context.fillText(
+                change.label,
+                change.area.x * globalConfig.tileSize + 2,
+                change.area.y * globalConfig.tileSize + 12
+            );
+        }
+    }
+}