Add option to render info boxes compact

src/css/ingame_hud/building_placer.scss

@@ -75,6 +75,15 @@
     @include StyleBelowWidth(700px) {
         display: none !important;
     }
+
+    &.compact {
+        width: unset !important;
+        grid-template-columns: 1fr;
+        .buildingImage,
+        .description > .text {
+            display: none;
+        }
+    }
 }
 
 #ingame_HUD_PlacerVariants {
@@ -86,6 +95,10 @@
     flex-direction: column;
     align-items: flex-end;
 
+    &.compact {
+        @include S(top, 150px);
+    }
+
     .explanation {
         text-transform: uppercase;
         grid-row: 1 / 2;

src/js/changelog.js

@@ -9,6 +9,7 @@ export const CHANGELOG = [
             "Automatically deselect area when selecting a new building",
             "Raise markers limit from 14 characters to 71 (by Joker-vD)",
             "Optimize performance by caching miner items (by Phlosioneer)",
+            "Added setting to enable compact building infos, which only show ratios and hide the image / description",
             "Apply dark theme to menu as well (by dengr1065)",
             "Fix belt planner not placing the last belt",
             "Fix buildings getting deleted when right clicking while placing a blueprint",

src/js/game/hud/parts/building_placer.js

@@ -38,6 +38,10 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
         this.buildingInfoElements.tutorialImage = makeDiv(this.element, null, ["buildingImage"]);
 
         this.variantsElement = makeDiv(parent, "ingame_HUD_PlacerVariants");
+
+        const compact = this.root.app.settings.getAllSettings().compactBuildingInfo;
+        this.element.classList.toggle("compact", compact);
+        this.variantsElement.classList.toggle("compact", compact);
     }
 
     initialize() {

src/js/profile/application_settings.js

@@ -200,6 +200,7 @@ export const allApplicationSettings = [
     new BoolSetting("alwaysMultiplace", categoryGame, (app, value) => {}),
     new BoolSetting("enableTunnelSmartplace", categoryGame, (app, value) => {}),
     new BoolSetting("vignette", categoryGame, (app, value) => {}),
+    new BoolSetting("compactBuildingInfo", categoryGame, (app, value) => {}),
 ];
 
 export function getApplicationSettingById(id) {
@@ -223,6 +224,7 @@ class SettingsStorage {
         this.offerHints = true;
         this.enableTunnelSmartplace = true;
         this.vignette = true;
+        this.compactBuildingInfo = false;
 
         /**
          * @type {Object.<string, number>}
@@ -412,7 +414,7 @@ export class ApplicationSettings extends ReadWriteProxy {
     }
 
     getCurrentVersion() {
-        return 12;
+        return 13;
     }
 
     /** @param {{settings: SettingsStorage, version: number}} data */
@@ -459,6 +461,11 @@ export class ApplicationSettings extends ReadWriteProxy {
             data.version = 12;
         }
 
+        if (data.version < 13) {
+            data.settings.compactBuildingInfo = false;
+            data.version = 13;
+        }
+
         return ExplainedResult.good();
     }
 }

translations/base-en.yaml

@@ -686,6 +686,11 @@ settings:
             description: >-
                 Enables the vignette which darkens the screen corners and makes text easier to read.
 
+        compactBuildingInfo:
+            title: Compact Building Infos
+            description: >-
+                Shortens info boxes for buildings by only showing their ratios. Otherwise a description and image is shown.
+
 keybindings:
     title: Keybindings
     hint: >-