Add tutorial images for all building variants

src/css/icons.scss

@@ -1,14 +1,20 @@
 $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;
-    }
     [data-icon="building_icons/#{$building}.png"] {
         background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
     }
 }
 
+$buildingsAndVariants: belt, splitter, splitter-compact, splitter-compact-inverse, underground_belt,
+    underground_belt-tier2, miner, miner-chainable, cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer,
+    painter, painter-double, painter-quad, trash, trash-storage;
+@each $building in $buildingsAndVariants {
+    [data-icon="building_tutorials/#{$building}.png"] {
+        background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
+    }
+}
+
 $icons: notification_saved, notification_success, notification_upgrade;
 @each $icon in $icons {
     [data-icon="icons/#{$icon}.png"] {

src/css/ingame_hud/building_placer.scss

@@ -79,16 +79,18 @@
 
 #ingame_HUD_PlacerVariants {
     position: absolute;
-    @include S(left, 10px);
+    @include S(right, 10px);
-    @include S(bottom, 80px);
+    @include S(top, 200px);
-    display: grid;
+    display: flex;
-    grid-auto-flow: row;
-    justify-items: start;
     @include S(grid-gap, 5px);
+    flex-direction: column;
+    align-items: flex-end;
 
     .explanation {
         text-transform: uppercase;
+        grid-row: 1 / 2;
         @include SuperSmallText;
+        text-align: right;
         .keybinding {
             position: relative;
         }
@@ -98,53 +100,60 @@
         }
     }
 
-    .variant {
+    .variants {
-        @include S(border-radius, $globalBorderRadius);
+        display: grid;
-        background: rgba(0, 10, 20, 0.1);
+        @include S(grid-gap, 5px);
-        display: flex;
-        position: relative;
-        align-items: center;
-        @include S(padding, 5px);
-        @include S(grid-gap, 10px);
 
-        &.active {
+        .variant {
-            background-color: rgba(74, 163, 223, 0.6);
+            grid-row: 2 / 3;
-        }
+            @include S(border-radius, $globalBorderRadius);
-
+            background: rgba(0, 10, 20, 0.2);
-        $iconSize: 25px;
+            display: inline-flex;
-
+            vertical-align: top;
-        .iconWrap {
-            grid-column: 1 / 2;
-            grid-row: 1 / 2;
             position: relative;
-            @include S(width, $iconSize);
+            align-items: center;
-            @include S(height, $iconSize);
+            @include S(padding, 3px);
-            background: center center / contain no-repeat;
+            @include S(grid-gap, 10px);
 
-            &[data-tile-w="2"] {
+            &.active {
-                @include S(width, 2 * $iconSize);
+                background-color: rgba(74, 163, 223, 0.6);
             }
-            &[data-tile-w="3"] {
-                @include S(width, 3 * $iconSize);
-            }
-            &[data-tile-w="4"] {
-                @include S(width, 4 * $iconSize);
-            }
-            &[data-tile-h="2"] {
-                @include S(height, 2 * $iconSize);
-            }
-            &[data-tile-h="3"] {
-                @include S(height, 3 * $iconSize);
-            }
-        }
 
-        .label {
+            $iconSize: 25px;
-            display: none;
+
-            grid-column: 2 / 3;
+            .iconWrap {
-            text-transform: uppercase;
+                grid-column: 1 / 2;
-            grid-row: 1 / 2;
+                grid-row: 1 / 2;
-            @include SuperSmallText;
+                position: relative;
-            color: #fff;
+                @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);
+                }
+                &[data-tile-h="3"] {
+                    @include S(height, 3 * $iconSize);
+                }
+                &[data-tile-w="3"] {
+                    @include S(width, 3 * $iconSize);
+                }
+                &[data-tile-w="4"] {
+                    @include S(width, 4 * $iconSize);
+                }
+            }
+
+            .label {
+                display: none;
+                grid-column: 2 / 3;
+                text-transform: uppercase;
+                grid-row: 1 / 2;
+                @include SuperSmallText;
+                color: #fff;
+            }
         }
     }
 }

src/js/core/config.js

@@ -57,8 +57,8 @@ export const globalConfig = {
         rotater: 1 / 1,
         rotaterCCW: 1 / 1,
         painter: 1 / 6,
-        painterDouble: 1 / 7,
+        painterDouble: 1 / 8,
-        painterQuad: 1 / 7,
+        painterQuad: 1 / 8,
         mixer: 1 / 5,
         stacker: 1 / 6,
     },
@@ -83,7 +83,7 @@ export const globalConfig = {
 
     debug: {
         /* dev:start */
-        // fastGameEnter: true,
+        fastGameEnter: true,
         noArtificialDelays: true,
         // disableSavegameWrite: true,
         // showEntityBounds: true,
@@ -93,8 +93,8 @@ export const globalConfig = {
         // disableZoomLimits: true,
         // showChunkBorders: true,
         // rewardsInstant: true,
-        // allBuildingsUnlocked: true,
+        allBuildingsUnlocked: true,
-        // upgradesNoCost: true,
+        upgradesNoCost: true,
         // disableUnlockDialog: true,
         // disableLogicTicks: true,
         // testClipping: true,

src/js/game/camera.js

@@ -99,6 +99,13 @@ export class Camera extends BasicSerializableObject {
         this.internalInitEvents();
         this.clampZoomLevel();
         this.bindKeys();
+        if (G_IS_DEV) {
+            window.addEventListener("keydown", ev => {
+                if (ev.key === "l") {
+                    this.zoomLevel = 3;
+                }
+            });
+        }
     }
 
     // Serialization

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

@@ -258,11 +258,6 @@ export class HUDBuildingPlacer extends BaseHUDPart {
                 })
             );
             metaBuilding.updateVariants(this.fakeEntity, 0, this.currentVariant.get());
-
-            this.buildingInfoElements.tutorialImage.setAttribute(
-                "data-icon",
-                "building_tutorials/" + metaBuilding.getId() + ".png"
-            );
         } else {
             this.fakeEntity = null;
         }
@@ -281,8 +276,10 @@ export class HUDBuildingPlacer extends BaseHUDPart {
             return;
         }
 
-        this.buildingInfoElements.label.innerHTML = T.buildings[metaBuilding.id].name;
+        const variant = this.currentVariant.get();
-        this.buildingInfoElements.descText.innerHTML = T.buildings[metaBuilding.id].description;
+
+        this.buildingInfoElements.label.innerHTML = T.buildings[metaBuilding.id][variant].name;
+        this.buildingInfoElements.descText.innerHTML = T.buildings[metaBuilding.id][variant].description;
 
         const binding = this.root.keyMapper.getBinding(KEYMAPPINGS.buildings[metaBuilding.getId()]);
         this.buildingInfoElements.hotkey.innerHTML = T.ingame.buildingPlacement.hotkeyLabel.replace(
@@ -290,6 +287,14 @@ export class HUDBuildingPlacer extends BaseHUDPart {
             "<code class='keybinding'>" + binding.getKeyCodeString() + "</code>"
         );
 
+        this.buildingInfoElements.tutorialImage.setAttribute(
+            "data-icon",
+            "building_tutorials/" +
+                metaBuilding.getId() +
+                (variant === defaultBuildingVariant ? "" : "-" + variant) +
+                ".png"
+        );
+
         removeAllChildren(this.buildingInfoElements.additionalInfo);
         const additionalInfo = metaBuilding.getAdditionalStatistics(this.root, this.currentVariant.get());
         for (let i = 0; i < additionalInfo.length; ++i) {
@@ -332,10 +337,12 @@ export class HUDBuildingPlacer extends BaseHUDPart {
             )
         );
 
+        const container = makeDiv(this.variantsElement, null, ["variants"]);
+
         for (let i = 0; i < availableVariants.length; ++i) {
             const variant = availableVariants[i];
 
-            const element = makeDiv(this.variantsElement, null, ["variant"]);
+            const element = makeDiv(container, null, ["variant"]);
             element.classList.toggle("active", variant === this.currentVariant.get());
             makeDiv(element, null, ["label"], variant);
 

translations/base-en.yaml

@@ -253,44 +253,86 @@ shopUpgrades:
 # Buildings and their name / description
 buildings:
     belt:
-        name: &belt Conveyor Belt
+        default:
-        description: Transports items, hold and drag to place multiple.
+            name: &belt Conveyor Belt
+            description: Transports items, hold and drag to place multiple.
 
     miner: # Internal name for the Extractor
-        name: &miner Extractor
+        default:
-        description: Place over a shape or color to extract it.
+            name: &miner Extractor
+            description: Place over a shape or color to extract it.
+
+        chainable:
+            name: Extractor (Chain)
+            description: Place over a shape or color to extract it. Can be chained.
 
     underground_belt: # Internal name for the Tunnel
-        name: &underground_belt Tunnel
+        default:
-        description: Allows to tunnel resources under buildings and belts.
+            name: &underground_belt Tunnel
+            description: Allows to tunnel resources under buildings and belts.
+
+        tier2:
+            name: Tunnel Tier II
+            description: Allows to tunnel resources under buildings and belts.
 
     splitter: # Internal name for the Balancer
-        name: &splitter Balancer
+        default:
-        description: Multifunctional - Evenly distributes all inputs onto all outputs.
+            name: &splitter Balancer
+            description: Multifunctional - Evenly distributes all inputs onto all outputs.
+
+        compact:
+            name: Merger (compact)
+            description: Merges two conveyor belts into one.
+
+        compact-inverse:
+            name: Merger (compact)
+            description: Merges two conveyor belts into one.
 
     cutter:
-        name: &cutter Cutter
+        default:
-        description: Cuts shapes from top to bottom and outputs both halfs. <strong>If you use only one part, be sure to destroy the other part or it will stall!</strong>
+            name: &cutter Cutter
+            description: Cuts shapes from top to bottom and outputs both halfs. <strong>If you use only one part, be sure to destroy the other part or it will stall!</strong>
+        quad:
+            name: Cutter (Quad)
+            description: Cuts shapes into four parts. <strong>If you use only one part, be sure to destroy the other part or it will stall!</strong>
 
     rotater:
-        name: &rotater Rotate
+        default:
-        description: Rotates shapes clockwise by 90 degrees.
+            name: &rotater Rotate
+            description: Rotates shapes clockwise by 90 degrees.
+        ccw:
+            name: Rotate (CCW)
+            description: Rotates shapes counter clockwise by 90 degrees.
 
-    stacker: # Internal name for the Combiner
+    stacker:
-        name: &stacker Stacker
+        default:
-        description: Stacks both items. If they can not be merged, the right item is placed above the left item.
+            name: &stacker Stacker
+            description: Stacks both items. If they can not be merged, the right item is placed above the left item.
 
     mixer:
-        name: &mixer Color Mixer
+        default:
-        description: Mixes two colors using additive blending.
+            name: &mixer Color Mixer
+            description: Mixes two colors using additive blending.
 
     painter:
-        name: &painter Painter
+        default:
-        description: Colors the whole shape on the left input with the color from the right input.
+            name: &painter Painter
+            description: Colors the whole shape on the left input with the color from the right input.
+        double:
+            name: Painter (Double)
+            description: Colors the both shapes on the left input with the color from the right input.
+        quad:
+            name: Painter (Quad)
+            description: Allows to color each quadrant of the shape with a different color.
 
-    trash: # Internal name for the destroyer
+    trash:
-        name: &trash Trash
+        default:
-        description: Accepts inputs from all sides and destroys them. Forever.
+            name: &trash Trash
+            description: Accepts inputs from all sides and destroys them. Forever.
+
+        storage:
+            name: Storage
+            description: Stores excess items, up to a given capacity. Can be used as an overflow gate.
 
 storyRewards:
     # Those are the rewards gained from completing the store