Allow clicking on variants to select them

src/css/ingame_hud/building_placer.scss

@@ -119,6 +119,9 @@
         @include S(grid-gap, 5px);
 
         .variant {
+            pointer-events: all;
+            cursor: pointer;
+
             grid-row: 2 / 3;
             @include S(border-radius, $globalBorderRadius);
             background: rgba($ingameHudBg, 0.3);
@@ -130,6 +133,13 @@
             @include S(padding, 3px);
             @include S(grid-gap, 10px);
 
+            transition: background-color 0.12s ease-in-out;
+
+            &:hover:not(.active) {
+                background: rgba($colorBlueBright, 0.8);
+                opacity: 1;
+            }
+
             &.active {
                 opacity: 1;
                 background-color: rgba($colorBlueBright, 0.8);

src/js/changelog.js

@@ -5,6 +5,7 @@ export const CHANGELOG = [
         entries: [
             "Preparations for the wires update",
             "Update belt placement performance on huge factories (by Phlosioneer)",
+            "Allow clicking on variants to select them",
             "Add setting (on by default) to store the last used rotation per building instead of globally storing it (by Magos)",
             "Added chinese (traditional) translation",
             "Updated translations",

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

@@ -16,6 +16,7 @@ import { defaultBuildingVariant } from "../../meta_building";
 import { THEME } from "../../theme";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 import { HUDBuildingPlacerLogic } from "./building_placer_logic";
+import { ClickDetector } from "../../../core/click_detector";
 
 export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
     /**
@@ -56,6 +57,12 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
         this.currentInterpolatedCornerTile = new Vector();
 
         this.lockIndicatorSprite = Loader.getSprite("sprites/misc/lock_direction_indicator.png");
+
+        /**
+         * Stores the click detectors for the variants so we can clean them up later
+         * @type {Array<ClickDetector>}
+         */
+        this.variantClickDetectors = [];
     }
 
     /**
@@ -98,6 +105,22 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
         }
     }
 
+    cleanup() {
+        super.cleanup();
+        this.cleanupVariantClickDetectors();
+    }
+
+    /**
+     * Cleans up all variant click detectors
+     */
+    cleanupVariantClickDetectors() {
+        for (let i = 0; i < this.variantClickDetectors.length; ++i) {
+            const detector = this.variantClickDetectors[i];
+            detector.cleanup();
+        }
+        this.variantClickDetectors = [];
+    }
+
     /**
      * Rerenders the variants displayed
      */
@@ -107,6 +130,9 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
 
         const metaBuilding = this.currentMetaBuilding.get();
 
+        // First, clear up all click detectors
+        this.cleanupVariantClickDetectors();
+
         if (!metaBuilding) {
             return;
         }
@@ -147,6 +173,12 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
             spriteWrapper.setAttribute("data-tile-h", dimensions.y);
 
             spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
+
+            const detector = new ClickDetector(element, {
+                consumeEvents: true,
+                targetOnly: true,
+            });
+            detector.click.add(() => this.currentVariant.set(variant));
         }
     }