Add support for different building variants

src/css/icons.scss

@@ -1,23 +1,11 @@
-// $icons: ;
-
-// @each $icon in $icons {
-//     [data-icon="#{$icon}"] {
-//         background-image: uiResource("res/ui/#{$icon}");
-//     }
-// }
-
 $buildings: belt, cutter, miner, mixer, painter, rotater, splitter, stacker, trash, underground_belt;
 
 @each $building in $buildings {
     [data-icon="building_tutorials/#{$building}.png"] {
         background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
     }
-}
-
-$upgrades: belt, miner, painting, processors;
-@each $upgrade in $upgrades {
-    [data-icon="upgrades/#{$upgrade}.png"] {
-        background-image: uiResource("res/ui/upgrades/#{$upgrade}.png") !important;
+    [data-icon="building_icons/#{$building}.png"] {
+        background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
     }
 }
 

src/css/ingame_hud/building_placer.scss

@@ -1,6 +1,6 @@
-#ingame_HUD_building_placer {
+#ingame_HUD_PlacementHints {
     position: fixed;
-    @include S(top, 40px);
+    @include S(top, 60px);
     @include S(right, 10px);
 
     display: grid;
@@ -54,3 +54,60 @@
         display: none !important;
     }
 }
+
+#ingame_HUD_PlacerVariants {
+    position: absolute;
+    @include S(left, 10px);
+    @include S(bottom, 80px);
+    display: grid;
+    grid-auto-flow: row;
+    @include S(grid-gap, 5px);
+
+    .explanation {
+        @include PlainText;
+        .keybinding {
+            position: relative;
+        }
+    }
+
+    .variant {
+        @include S(border-radius, 4px);
+        background: rgba(0, 10, 20, 0.1);
+        display: grid;
+        position: relative;
+        grid-template-columns: auto 1fr;
+        align-items: center;
+        @include S(padding, 5px);
+        @include S(grid-gap, 10px);
+
+        &.active {
+            background-color: rgba(74, 163, 223, 0.6);
+        }
+
+        $iconSize: 25px;
+
+        .iconWrap {
+            grid-column: 1 / 2;
+            grid-row: 1 / 2;
+            position: relative;
+            @include S(width, $iconSize);
+            @include S(height, $iconSize);
+            background: center center / contain no-repeat;
+
+            &[data-tile-w="2"] {
+                @include S(width, 2 * $iconSize);
+            }
+
+            &[data-tile-h="2"] {
+                @include S(height, 2 * $iconSize);
+            }
+        }
+
+        .label {
+            grid-column: 2 / 3;
+            grid-row: 1 / 2;
+            @include PlainText;
+            color: #fff;
+        }
+    }
+}

src/css/ingame_hud/buildings_toolbar.scss

@@ -22,7 +22,7 @@
     .buildings {
         display: grid;
         grid-auto-flow: column;
-        @include S(padding, 0, 5px);
+        @include S(margin-bottom, 2px);
 
         .building {
             color: $accentColorDark;
@@ -33,19 +33,17 @@
             justify-content: center;
             @include S(padding, 5px);
             @include S(padding-bottom, 1px);
-            $buildingIconSize: 32px;
+            @include S(width, 35px);
+            @include S(height, 40px);
+
+            background: center center / 70% no-repeat;
 
             &:not(.unlocked) {
                 @include S(width, 30px);
-                .tooltip {
-                    display: none !important;
-                }
-                .keybinding,
-                .iconWrap {
-                    opacity: 0.01;
-                }
+                opacity: 0.8;
+                background-image: none !important;
+
                 &::before {
-                    opacity: 0.5;
                     content: " ";
                     background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
                         no-repeat;
@@ -58,8 +56,10 @@
                 }
             }
 
+            @include S(border-radius, 4px);
+
             &.selected {
-                background: rgba(74, 163, 223, 0.3) !important;
+                background-color: rgba(74, 163, 223, 0.3) !important;
                 transform: scale(1.05);
                 .keybinding {
                     color: #111;
@@ -69,35 +69,11 @@
             pointer-events: all;
             transition: all 0.05s ease-in-out;
             transition-property: background-color, transform;
+
             &.unlocked:hover {
-                background: rgba($accentColorDark, 0.1);
+                background-color: rgba($accentColorDark, 0.1);
                 cursor: pointer;
             }
-
-            .iconWrap {
-                position: relative;
-                @include S(width, $buildingIconSize);
-                @include S(height, $buildingIconSize);
-                @include S(margin-top, 3px);
-                @include S(margin-bottom, 6px);
-            }
-
-            .label {
-                @include SuperSmallText;
-                display: none;
-                font-weight: bold;
-                text-transform: uppercase;
-            }
-
-            &[data-tilewidth="2"] {
-                .iconWrap {
-                    @include S(width, 2 * $buildingIconSize);
-                }
-            }
-
-            &:last-child {
-                border: none;
-            }
         }
     }
 }

src/css/ingame_hud/mass_selector.scss

@@ -8,8 +8,11 @@
     @include S(padding, 9px);
     @include PlainText;
     color: #fff;
+    display: flex;
+    align-items: center;
 
     .keybinding {
+        @include S(margin, 0, 4px);
         position: relative;
         top: unset;
         left: unset;

src/css/ingame_hud/pinned_shapes.scss

@@ -1,7 +1,7 @@
 #ingame_HUD_PinnedShapes {
     position: absolute;
     @include S(left, 9px);
-    @include S(top, 120px);
+    @include S(top, 150px);
     @include PlainText;
     display: flex;
     flex-direction: column;

src/css/ingame_hud/shop.scss

@@ -101,7 +101,7 @@
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                    @include S(width, 65px);
+                    @include S(width, 75px);
 
                     button.pin {
                         @include S(width, 12px);

src/css/ingame_hud/statistics.scss

@@ -148,11 +148,13 @@
                     grid-column: 3 / 4;
                     grid-row: 1 / 2;
                     @include Heading;
+                    align-self: center;
+                    text-align: right;
                     color: #55595a;
                 }
 
                 canvas.graph {
-                    @include S(width, 300px);
+                    @include S(width, 270px);
                     @include S(height, 40px);
                     @include S(border-radius, 0, 0, 2px, 2px);
                     $color: rgba(0, 10, 20, 0.04);

src/css/main.scss

@@ -39,11 +39,32 @@
 @import "ingame_hud/notifications";
 @import "ingame_hud/settings_menu";
 
-// Z-Index
-$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_PinnedShapes,
-    ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Notifications,
-    ingame_HUD_Shop, ingame_HUD_Statistics, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector,
-    ingame_HUD_UnlockNotification, ingame_HUD_SettingsMenu;
+// prettier-ignore
+$elements: 
+// Base    
+ingame_Canvas,
+ingame_VignetteOverlay,
+
+// Ingame overlays
+ingame_HUD_PlacementHints,
+ingame_HUD_PlacerVariants,
+
+// Regular hud
+ingame_HUD_PinnedShapes,
+ingame_HUD_buildings_toolbar,
+ingame_HUD_GameMenu,
+ingame_HUD_KeybindingOverlay,
+ingame_HUD_MassSelector,
+ingame_HUD_Notifications,
+
+// Overlays
+ingame_HUD_BetaOverlay,
+
+// Dialogs
+ingame_HUD_Shop,
+ingame_HUD_Statistics,
+ingame_HUD_UnlockNotification,
+ingame_HUD_SettingsMenu;
 
 $zindex: 100;
 
@@ -57,7 +78,7 @@ $zindex: 100;
 
 body.uiHidden {
     #ingame_HUD_buildings_toolbar,
-    #ingame_HUD_building_placer,
+    #ingame_HUD_PlacementHints,
     #ingame_HUD_GameMenu,
     #ingame_HUD_MassSelector,
     #ingame_HUD_PinnedShapes,

src/css/states/main_menu.scss

@@ -144,6 +144,15 @@
         width: 100%;
         box-sizing: border-box;
 
+        .browserWarning {
+            @include S(margin-bottom, 10px);
+            background-color: $colorRedBright;
+            @include PlainText;
+            color: #fff;
+            @include S(border-radius, 4px);
+            @include S(padding, 5px);
+        }
+
         .playButton {
             @include SuperHeading;
             @include S(width, 130px);