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