Show hint after unlocking level 4

src/css/ingame_hud/dialogs.scss

@@ -121,6 +121,14 @@
             > strong {
                 font-weight: bold;
             }
+
+            .keybinding {
+                position: relative;
+                background: #eee;
+                @include PlainText;
+                height: unset;
+                margin: 1px 0;
+            }
         }
 
         > .buttons {

src/js/changelog.js

@@ -6,13 +6,14 @@ export const CHANGELOG = [
             "BLUEPRINTS! They are unlocked at level 12",
             "Savegame levels are now shown in the main menu. For existing games, save them again to make the level show up.",
             "Allow holding SHIFT to rotate counter clockwise",
-            "Allow changing all keybindings, including CTRL, ALT and SHIFT (by Dimava)",
             "Added confirmation when deleting more than 500 buildings at a time",
             "Added background to toolbar to increase contrast",
-            "Further decrease requirements of first levels",
+            "Further decerase requirements of first levels",
             "Pinned shapes now are saved",
-            "Fix keys being stuck when opening a dialog",
             "Allow placing extractors anywhere again, but they don't work at all if not placed on a resource",
+            "Show dialog explaining some keybindings after completing level 4",
+            "Fix keys being stuck when opening a dialog",
+            "Allow changing all keybindings, including CTRL, ALT and SHIFT (by Dimava)",
             "Fix cycling through keybindings selecting locked buildings as well (by Dimava)",
             "There is now a github action, checking all pull requests with eslint. (by mrHedgehog)",
         ],

src/js/game/hud/parts/pinned_shapes.js

@@ -3,6 +3,8 @@ import { ClickDetector } from "../../../core/click_detector";
 import { formatBigNumber, makeDiv } from "../../../core/utils";
 import { ShapeDefinition } from "../../shape_definition";
 import { BaseHUDPart } from "../base_hud_part";
+import { blueprintShape } from "../../upgrades";
+import { enumHubGoalRewards } from "../../tutorial_goals";
 
 export class HUDPinnedShapes extends BaseHUDPart {
     createElements(parent) {
@@ -46,6 +48,10 @@ export class HUDPinnedShapes extends BaseHUDPart {
         if (key === this.root.hubGoals.currentGoal.definition.getHash()) {
             return true;
         }
+        if (key === blueprintShape) {
+            return true;
+        }
+
         for (let i = 0; i < this.pinnedShapes.length; ++i) {
             if (this.pinnedShapes[i].key === key) {
                 return true;
@@ -70,6 +76,10 @@ export class HUDPinnedShapes extends BaseHUDPart {
 
         this.internalPinShape(currentKey, currentGoal.required, false);
 
+        if (this.root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_blueprints)) {
+            this.internalPinShape(blueprintShape, currentGoal.required, false);
+        }
+
         for (let i = 0; i < this.pinnedShapes.length; ++i) {
             const key = this.pinnedShapes[i].key;
             if (key !== currentKey) {
@@ -150,6 +160,11 @@ export class HUDPinnedShapes extends BaseHUDPart {
             // Can not pin current goal
             return;
         }
+
+        if (key === blueprintShape) {
+            return;
+        }
+
         for (let i = 0; i < this.pinnedShapes.length; ++i) {
             if (this.pinnedShapes[i].key === key) {
                 // Already pinned

src/js/game/hud/parts/unlock_notification.js

@@ -115,6 +115,15 @@ export class HUDUnlockNotification extends BaseHUDPart {
                 );
                 showUpgrades.add(() => this.root.hud.parts.shop.show());
             }
+
+            if (this.root.hubGoals.level === 5) {
+                const { showKeybindings } = this.root.hud.parts.dialogs.showInfo(
+                    T.dialogs.keybindingsIntroduction.title,
+                    T.dialogs.keybindingsIntroduction.desc,
+                    ["showKeybindings:misc", "ok:good:timeout"]
+                );
+                showKeybindings.add(() => this.root.gameState.goToKeybindings());
+            }
         });
     }
 

src/js/states/ingame.js

@@ -154,6 +154,16 @@ export class InGameState extends GameState {
         });
     }
 
+    /**
+     * Goes back to the settings state
+     */
+    goToKeybindings() {
+        this.saveThenGoToState("KeybindingsState", {
+            backToStateId: this.key,
+            backToStatePayload: this.creationPayload,
+        });
+    }
+
     /**
      * Moves to a state outside of the game
      * @param {string} stateId

translations/base-en.yaml

@@ -93,6 +93,7 @@ dialogs:
         deleteGame: I know what I do
         viewUpdate: View Update
         showUpgrades: Show Upgrades
+        showKeybindings: Show Keybindings
 
     importSavegameError:
         title: Import Error
@@ -185,6 +186,15 @@ dialogs:
         desc: >-
             Blueprints have not been unlocked yet! Complete more levels to unlock them.
 
+    keybindingsIntroduction:
+        title: Useful keybindings
+        desc: >-
+            This game has a lot of keybindings which make it easier to build big factories.
+            Here are a few, but be sure to <strong>check out the keybindings</strong>!<br><br>
+            <code class='keybinding'>CTRL</code> + Drag: Select area to copy / delete.<br>
+            <code class='keybinding'>SHIFT</code>: Hold to place multiple of one building.<br>
+            <code class='keybinding'>ALT</code>: Invert orientation of placed belts.<br>
+
 ingame:
     # This is shown in the top left corner and displays useful keybindings in
     # every situation
@@ -581,7 +591,7 @@ keybindings:
 
         placementDisableAutoOrientation: Disable automatic orientation
         placeMultiple: Stay in placement mode
-        placeInverse: Invert automatic orientation
+        placeInverse: Invert automatic belt orientation
 
 about:
     title: About this Game