Add "interactive" tutorial for first level

src/js/core/background_resources_loader.js

@@ -10,7 +10,10 @@ import { AtlasDefinition, atlasFiles } from "./atlas_definitions";
 
 const logger = createLogger("background_loader");
 
-const essentialMainMenuSprites = ["logo.png", ...G_ALL_UI_IMAGES.filter(src => src.startsWith("ui/"))];
+const essentialMainMenuSprites = [
+    "logo.png",
+    ...G_ALL_UI_IMAGES.filter(src => src.startsWith("ui/") && src.indexOf(".gif") < 0),
+];
 const essentialMainMenuSounds = [
     SOUNDS.uiClick,
     SOUNDS.uiError,
@@ -21,7 +24,7 @@ const essentialMainMenuSounds = [
 ];
 
 const essentialBareGameAtlases = atlasFiles;
-const essentialBareGameSprites = G_ALL_UI_IMAGES;
+const essentialBareGameSprites = G_ALL_UI_IMAGES.filter(src => src.indexOf(".gif") < 0);
 const essentialBareGameSounds = [MUSIC.theme];
 
 const additionalGameSprites = [];

src/js/game/hud/hud.js

@@ -31,6 +31,7 @@ import { HUDWaypoints } from "./parts/waypoints";
 
 /* dev:start */
 import { TrailerMaker } from "./trailer_maker";
+import { HUDInteractiveTutorial } from "./parts/interactive_tutorial";
 /* dev:end */
 
 export class GameHUD {
@@ -87,6 +88,7 @@ export class GameHUD {
         }
         if (this.root.app.settings.getAllSettings().offerHints) {
             this.parts.tutorialHints = new HUDPartTutorialHints(this.root);
+            this.parts.interactiveTutorial = new HUDInteractiveTutorial(this.root);
         }
 
         const frag = document.createDocumentFragment();

src/js/game/hud/parts/interactive_tutorial.js

@@ -0,0 +1,81 @@
+import { BaseHUDPart } from "../base_hud_part";
+import { makeDiv } from "../../../core/utils";
+import { GameRoot } from "../../root";
+import { MinerComponent } from "../../components/miner";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
+import { TrackedState } from "../../../core/tracked_state";
+import { cachebust } from "../../../core/cachebust";
+import { T } from "../../../translations";
+
+const tutorialsByLevel = [
+    // Level 1
+    [
+        // 1.1. place an extractor
+        {
+            id: "1_1_extractor",
+            condition: /** @param {GameRoot} root */ root => {
+                return root.entityMgr.getAllWithComponent(MinerComponent).length === 0;
+            },
+        },
+        // 1.2. connect to hub
+        {
+            id: "1_2_conveyor",
+            condition: /** @param {GameRoot} root */ root => {
+                return root.hubGoals.getCurrentGoalDelivered() === 0;
+            },
+        },
+        // 1.3 wait for completion
+        {
+            id: "1_3_expand",
+            condition: () => true,
+        },
+    ],
+];
+
+export class HUDInteractiveTutorial extends BaseHUDPart {
+    createElements(parent) {
+        this.element = makeDiv(
+            parent,
+            "ingame_HUD_InteractiveTutorial",
+            ["animEven"],
+            `
+            <strong class="title">Tutorial</strong>
+            `
+        );
+
+        this.elementDescription = makeDiv(this.element, null, ["desc"]);
+        this.elementGif = makeDiv(this.element, null, ["helperGif"]);
+    }
+
+    initialize() {
+        this.domAttach = new DynamicDomAttach(this.root, this.element);
+        this.currentHintId = new TrackedState(this.onHintChanged, this);
+    }
+
+    onHintChanged(hintId) {
+        this.elementDescription.innerHTML = T.ingame.interactiveTutorial.hints[hintId];
+        this.elementGif.style.backgroundImage =
+            "url('" + cachebust("res/ui/interactive_tutorial.noinline/" + hintId + ".gif") + "')";
+        this.element.classList.toggle("animEven");
+        this.element.classList.toggle("animOdd");
+    }
+
+    update() {
+        // Compute current hint
+        const thisLevelHints = tutorialsByLevel[this.root.hubGoals.level - 1];
+        let targetHintId = null;
+
+        if (thisLevelHints) {
+            for (let i = 0; i < thisLevelHints.length; ++i) {
+                const hint = thisLevelHints[i];
+                if (hint.condition(this.root)) {
+                    targetHintId = hint.id;
+                    break;
+                }
+            }
+        }
+
+        this.currentHintId.set(targetHintId);
+        this.domAttach.update(!!targetHintId);
+    }
+}

src/js/game/hud/parts/tutorial_hints.js

@@ -1,4 +1,3 @@
-import { cachebust } from "../../../core/cachebust";
 import { InputReceiver } from "../../../core/input_receiver";
 import { TrackedState } from "../../../core/tracked_state";
 import { makeDiv } from "../../../core/utils";
@@ -6,9 +5,8 @@ import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
 import { BaseHUDPart } from "../base_hud_part";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 import { T } from "../../../translations";
-import { globalConfig } from "../../../core/config";
 
-const tutorialVideos = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11];
+const tutorialVideos = [2, 3, 4, 5, 6, 7, 9, 10, 11];
 
 export class HUDPartTutorialHints extends BaseHUDPart {
     createElements(parent) {

src/js/game/tutorial_goals.js

@@ -35,7 +35,7 @@ export const tutorialGoals = [
     // Circle
     {
         shape: "CuCuCuCu", // belts t1
-        required: 20,
+        required: 40,
         reward: enumHubGoalRewards.reward_cutter_and_trash,
     },