Add setting to show chunk borders

src/js/changelog.js

@@ -18,6 +18,7 @@ export const CHANGELOG = [
             "Updated and added new translations (Thanks to all contributors!)",
             "Added setting to be able to delete buildings while placing (inspired by hexy)",
             "Mark pinned shapes in statistics dialog and show them first (inspired by davidburhans)",
+            "Added setting to show chunk borders",
             "Quad painters have been reworked! They now are integrated with the wires, and only paint the shape when the value is 1 (inspired by dengr1605)",
             "There are now compact 1x1 splitters available to be unlocked!",
             "Allow editing waypoints (by isaisstillalive)",

src/js/game/core.js

@@ -9,7 +9,8 @@ import { DrawParameters } from "../core/draw_parameters";
 import { gMetaBuildingRegistry } from "../core/global_registries";
 import { createLogger } from "../core/logging";
 import { Rectangle } from "../core/rectangle";
-import { randomInt, round2Digits, round3Digits } from "../core/utils";
+import { ORIGINAL_SPRITE_SCALE } from "../core/sprites";
+import { lerp, randomInt, round2Digits } from "../core/utils";
 import { Vector } from "../core/vector";
 import { Savegame } from "../savegame/savegame";
 import { SavegameSerializer } from "../savegame/savegame_serializer";
@@ -30,7 +31,6 @@ import { GameRoot } from "./root";
 import { ShapeDefinitionManager } from "./shape_definition_manager";
 import { SoundProxy } from "./sound_proxy";
 import { GameTime } from "./time/game_time";
-import { ORIGINAL_SPRITE_SCALE } from "../core/sprites";
 
 const logger = createLogger("ingame/core");
 
@@ -61,6 +61,12 @@ export class GameCore {
 
         // Cached
         this.boundInternalTick = this.updateLogic.bind(this);
+
+        /**
+         * Opacity of the overview alpha
+         * @TODO Doesn't belong here
+         */
+        this.overlayAlpha = 0;
     }
 
     /**
@@ -385,10 +391,10 @@ export class GameCore {
         // Main rendering order
         // -----
 
-        if (this.root.camera.getIsMapOverlayActive()) {
-            // Map overview
-            root.map.drawOverlay(params);
-        } else {
+        const desiredOverlayAlpha = this.root.camera.getIsMapOverlayActive() ? 1 : 0;
+        this.overlayAlpha = lerp(this.overlayAlpha, desiredOverlayAlpha, 0.25);
+
+        if (this.overlayAlpha < 0.99) {
             // Background (grid, resources, etc)
             root.map.drawBackground(params);
 
@@ -410,6 +416,13 @@ export class GameCore {
             }
         }
 
+        if (this.overlayAlpha > 0.01) {
+            // Map overview
+            context.globalAlpha = this.overlayAlpha;
+            root.map.drawOverlay(params);
+            context.globalAlpha = 1;
+        }
+
         if (G_IS_DEV) {
             root.map.drawStaticEntityDebugOverlays(params);
         }

src/js/game/hud/parts/wires_overlay.js

@@ -63,10 +63,6 @@ export class HUDWiresOverlay extends BaseHUDPart {
             return;
         }
 
-        if (this.root.camera.getIsMapOverlayActive()) {
-            return;
-        }
-
         if (!this.cachedPatternBackground) {
             this.cachedPatternBackground = parameters.context.createPattern(this.tilePatternCanvas, "repeat");
         }

src/js/game/map_chunk_view.js

@@ -133,6 +133,12 @@ export class MapChunkView extends MapChunk {
                 : THEME.map.chunkOverview.empty;
         context.fillRect(0, 0, w, h);
 
+        if (this.root.app.settings.getAllSettings().displayChunkBorders) {
+            context.fillStyle = THEME.map.chunkBorders;
+            context.fillRect(0, 0, w, 1);
+            context.fillRect(0, 1, 1, h);
+        }
+
         for (let x = 0; x < globalConfig.mapChunkSize; ++x) {
             const lowerArray = this.lowerLayer[x];
             const upperArray = this.contents[x];

src/js/game/map_view.js

@@ -196,6 +196,7 @@ export class MapView extends BaseMap {
             );
         }
 
+        // Render tile grid
         if (!this.root.app.settings.getAllSettings().disableTileGrid) {
             const dpi = this.backgroundCacheDPI;
             parameters.context.scale(1 / dpi, 1 / dpi);

src/js/game/systems/map_resources.js

@@ -103,5 +103,11 @@ export class MapResourcesSystem extends GameSystem {
                 }
             }
         }
+
+        if (this.root.app.settings.getAllSettings().displayChunkBorders) {
+            context.fillStyle = THEME.map.chunkBorders;
+            context.fillRect(0, 0, w, 1);
+            context.fillRect(0, 1, 1, h);
+        }
     }
 }

src/js/game/themes/dark.json

@@ -9,6 +9,8 @@
         "selectionOutline": "rgba(74, 163, 223, 0.5)",
         "selectionBackground": "rgba(74, 163, 223, 0.2)",
 
+        "chunkBorders": "rgba(127, 190, 255, 0.04)",
+
         "directionLock": {
             "regular": {
                 "color": "rgb(74, 237, 134)",

src/js/game/themes/light.json

@@ -9,6 +9,8 @@
         "selectionOutline": "rgba(74, 163, 223, 0.5)",
         "selectionBackground": "rgba(74, 163, 223, 0.2)",
 
+        "chunkBorders": "rgba(0, 30, 50, 0.03)",
+
         "directionLock": {
             "regular": {
                 "color": "rgb(74, 237, 134)",

src/js/profile/application_settings.js

@@ -261,6 +261,7 @@ export const allApplicationSettings = [
     new BoolSetting("compactBuildingInfo", enumCategories.userInterface, (app, value) => {}),
     new BoolSetting("disableCutDeleteWarnings", enumCategories.advanced, (app, value) => {}),
     new BoolSetting("rotationByBuilding", enumCategories.advanced, (app, value) => {}),
+    new BoolSetting("displayChunkBorders", enumCategories.advanced, (app, value) => {}),
 
     new EnumSetting("refreshRate", {
         options: refreshRateOptions,
@@ -303,6 +304,7 @@ class SettingsStorage {
         this.disableCutDeleteWarnings = false;
         this.rotationByBuilding = true;
         this.clearCursorOnDeleteWhilePlacing = true;
+        this.displayChunkBorders = false;
 
         this.enableColorBlindHelper = false;
 
@@ -509,7 +511,7 @@ export class ApplicationSettings extends ReadWriteProxy {
     }
 
     getCurrentVersion() {
-        return 22;
+        return 23;
     }
 
     /** @param {{settings: SettingsStorage, version: number}} data */
@@ -607,6 +609,11 @@ export class ApplicationSettings extends ReadWriteProxy {
             data.version = 22;
         }
 
+        if (data.version < 23) {
+            data.settings.displayChunkBorders = false;
+            data.version = 23;
+        }
+
         return ExplainedResult.good();
     }
 }

translations/base-en.yaml

@@ -571,7 +571,7 @@ buildings:
 
     lever:
         default:
-            name: &lever Button
+            name: &lever Switch
             description: Can be toggled to emit 1 / 0
 
     logic_gate:
@@ -870,6 +870,11 @@ settings:
             description: >-
                 Uses low quality textures to save performance. This will make the game look very ugly!
 
+        displayChunkBorders:
+            title: Display Chunk Borders
+            description: >-
+                The game is divided into chunks of 16x16 tiles, if this setting is enabled the borders of each chunk are displayed.
+
 keybindings:
     title: Keybindings
     hint: >-