Add originalRotation to static comp in order to fix bugs with the automatic placement

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

@@ -99,6 +99,11 @@ export class HUDBuildingPlacer extends BaseHUDPart {
                 const angleDeg = Math_degrees(delta.angle());
                 this.currentBaseRotation = (Math.round(angleDeg / 90) * 90 + 360) % 360;
 
+                // Holding alt inverts the placement
+                if (this.root.app.inputMgr.altIsDown) {
+                    this.currentBaseRotation = (180 + this.currentBaseRotation) % 360;
+                }
+
                 // - Using bresenhams algorithmus
 
                 let x0 = oldPos.x;
@@ -172,7 +177,7 @@ export class HUDBuildingPlacer extends BaseHUDPart {
             this.fakeEntity.addComponent(
                 new StaticMapEntityComponent({
                     origin: new Vector(0, 0),
-                    rotationDegrees: 0,
+                    rotation: 0,
                     tileSize: metaBuilding.getDimensions().copy(),
                 })
             );
@@ -190,7 +195,7 @@ export class HUDBuildingPlacer extends BaseHUDPart {
         if (selectedBuilding) {
             this.currentBaseRotation = (this.currentBaseRotation + 90) % 360;
             const staticComp = this.fakeEntity.components.StaticMapEntity;
-            staticComp.rotationDegrees = this.currentBaseRotation;
+            staticComp.rotation = this.currentBaseRotation;
         }
     }
 
@@ -350,7 +355,7 @@ export class HUDBuildingPlacer extends BaseHUDPart {
         // Synchronize rotation and origin
         const staticComp = this.fakeEntity.components.StaticMapEntity;
         staticComp.origin = tile;
-        staticComp.rotationDegrees = rotation;
+        staticComp.rotation = rotation;
         metaBuilding.updateRotationVariant(this.fakeEntity, rotationVariant);
 
         // Check if we could place the buildnig

src/js/game/hud/parts/buildings_toolbar.js

@@ -33,8 +33,8 @@ export class HUDBuildingsToolbar extends BaseHUDPart {
     constructor(root) {
         super(root);
 
-        /** @type {Object.<string, { metaBuilding: MetaBuilding, status: boolean, element: HTMLElement}>} */
-        this.buildingUnlockStates = {};
+        /** @type {Object.<string, { metaBuilding: MetaBuilding, unlocked: boolean, selected: boolean, element: HTMLElement}>} */
+        this.buildingHandles = {};
 
         this.sigBuildingSelected = new Signal();
 
@@ -92,29 +92,50 @@ export class HUDBuildingsToolbar extends BaseHUDPart {
 
             this.trackClicks(itemContainer, () => this.selectBuildingForPlacement(metaBuilding), {});
 
-            this.buildingUnlockStates[metaBuilding.id] = {
+            this.buildingHandles[metaBuilding.id] = {
                 metaBuilding,
                 element: itemContainer,
-                status: false,
+                unlocked: false,
+                selected: false,
             };
         }
+
+        this.root.hud.signals.selectedPlacementBuildingChanged.add(
+            this.onSelectedPlacementBuildingChanged,
+            this
+        );
     }
 
     update() {
         this.trackedIsVisisible.set(!this.root.camera.getIsMapOverlayActive());
 
-        for (const buildingId in this.buildingUnlockStates) {
-            const handle = this.buildingUnlockStates[buildingId];
+        for (const buildingId in this.buildingHandles) {
+            const handle = this.buildingHandles[buildingId];
             const newStatus = handle.metaBuilding.getIsUnlocked(this.root);
-            if (handle.status !== newStatus) {
-                handle.status = newStatus;
+            if (handle.unlocked !== newStatus) {
+                handle.unlocked = newStatus;
                 handle.element.classList.toggle("unlocked", newStatus);
             }
         }
     }
 
     /**
-     *
+     * @param {MetaBuilding} metaBuilding
+     */
+    onSelectedPlacementBuildingChanged(metaBuilding) {
+        for (const buildingId in this.buildingHandles) {
+            const handle = this.buildingHandles[buildingId];
+            const newStatus = handle.metaBuilding === metaBuilding;
+            if (handle.selected !== newStatus) {
+                handle.selected = newStatus;
+                handle.element.classList.toggle("selected", newStatus);
+            }
+        }
+
+        this.element.classList.toggle("buildingSelected", !!metaBuilding);
+    }
+
+    /**
      * @param {MetaBuilding} metaBuilding
      */
     selectBuildingForPlacement(metaBuilding) {
@@ -124,5 +145,6 @@ export class HUDBuildingsToolbar extends BaseHUDPart {
         }
 
         this.sigBuildingSelected.dispatch(metaBuilding);
+        this.onSelectedPlacementBuildingChanged(metaBuilding);
     }
 }

src/js/game/hud/parts/keybinding_overlay.js

@@ -6,6 +6,11 @@ import { TrackedState } from "../../../core/tracked_state";
 export class HUDKeybindingOverlay extends BaseHUDPart {
     initialize() {
         this.shiftDownTracker = new TrackedState(this.onShiftStateChanged, this);
+
+        this.root.hud.signals.selectedPlacementBuildingChanged.add(
+            this.onSelectedBuildingForPlacementChanged,
+            this
+        );
     }
 
     onShiftStateChanged(shiftDown) {
@@ -56,9 +61,14 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
             </div>
 
             <div class="binding placementOnly shift">
-                <code class="keybinding">SHIFT</code>
+                <code class="keybinding">⇧ SHIFT</code>
                 <label>Place Multiple</label>
             </div>
+
+            <div class="binding placementOnly shift">
+                <code class="keybinding">ALT</code>
+                <label>Reverse orientation</label>
+            </div>
         `
         );
     }

src/js/game/hud/parts/mass_selector.js

@@ -0,0 +1,3 @@
+import { BaseHUDPart } from "../base_hud_part";
+
+export class HUDMassSelector extends BaseHUDPart {}