Add small tutorial

src/js/core/background_resources_loader.js

@@ -25,13 +25,8 @@ const essentialBareGameSprites = G_ALL_UI_IMAGES;
 const essentialBareGameSounds = [MUSIC.theme];
 
 const additionalGameSprites = [];
-const additionalGameSounds = [];
-for (const key in SOUNDS) {
-    additionalGameSounds.push(SOUNDS[key]);
-}
-for (const key in MUSIC) {
-    additionalGameSounds.push(MUSIC[key]);
-}
+// @ts-ignore
+const additionalGameSounds = [...Object.values(SOUNDS), ...Object.values(MUSIC)];
 
 export class BackgroundResourcesLoader {
     /**

src/js/core/config.js

@@ -93,8 +93,8 @@ export const globalConfig = {
         // disableZoomLimits: true,
         // showChunkBorders: true,
         // rewardsInstant: true,
-        allBuildingsUnlocked: true,
-        upgradesNoCost: true,
+        // allBuildingsUnlocked: true,
+        // upgradesNoCost: true,
         // disableUnlockDialog: true,
         // disableLogicTicks: true,
         // testClipping: true,

src/js/game/hud/hud.js

@@ -26,6 +26,7 @@ import { HUDEntityDebugger } from "./parts/entity_debugger";
 import { KEYMAPPINGS } from "../key_action_mapper";
 import { HUDWatermark } from "./parts/watermark";
 import { HUDModalDialogs } from "./parts/modal_dialogs";
+import { HUDPartTutorialHints } from "./parts/tutorial_hints";
 
 export class GameHUD {
     /**
@@ -61,6 +62,8 @@ export class GameHUD {
             notifications: new HUDNotifications(this.root),
             settingsMenu: new HUDSettingsMenu(this.root),
 
+            tutorialHints: new HUDPartTutorialHints(this.root),
+
             // betaOverlay: new HUDBetaOverlay(this.root),
             debugInfo: new HUDDebugInfo(this.root),
 

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

@@ -0,0 +1,101 @@
+import { BaseHUDPart } from "../base_hud_part";
+import { makeDiv } from "../../../core/utils";
+import { cachebust } from "../../../core/cachebust";
+import { DynamicDomAttach } from "../dynamic_dom_attach";
+import { InputReceiver } from "../../../core/input_receiver";
+import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
+import { tutorialGoals } from "../../tutorial_goals";
+import { TrackedState } from "../../../core/tracked_state";
+
+const maxTutorialVideo = 2;
+
+export class HUDPartTutorialHints extends BaseHUDPart {
+    createElements(parent) {
+        this.element = makeDiv(
+            parent,
+            "ingame_HUD_TutorialHints",
+            [],
+            `
+        <div class="header">
+            No idea what to do?
+            <button class="styledButton toggleHint">
+                <span class="show">Show hint</span>
+                <span class="hide">Hide hint</span>
+            </button>
+        </div>
+
+        <video autoplay muted loop class="fullscreenBackgroundVideo">
+            <source type="video/webm">
+        </video>
+        `
+        );
+
+        this.videoElement = this.element.querySelector("video");
+    }
+
+    shouldPauseGame() {
+        return this.enlarged;
+    }
+
+    initialize() {
+        this.trackClicks(this.element.querySelector(".toggleHint"), this.toggleHintEnlarged);
+
+        this.videoAttach = new DynamicDomAttach(this.root, this.videoElement, {
+            timeToKeepSeconds: 0.3,
+        });
+
+        this.videoAttach.update(false);
+        this.enlarged = false;
+
+        this.inputReciever = new InputReceiver("tutorial_hints");
+        this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
+        this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
+
+        this.domAttach = new DynamicDomAttach(this.root, this.element);
+
+        this.currentShownLevel = new TrackedState(this.updateVideoUrl, this);
+    }
+
+    updateVideoUrl(level) {
+        console.log("update video url.", level);
+        this.videoElement
+            .querySelector("source")
+            .setAttribute("src", cachebust("res/videos/level_" + level + ".webm"));
+    }
+
+    close() {
+        this.enlarged = false;
+        document.body.classList.remove("ingameDialogOpen");
+        this.element.classList.remove("enlarged", "noBlur");
+        this.root.app.inputMgr.makeSureDetached(this.inputReciever);
+        this.update();
+    }
+
+    show() {
+        document.body.classList.add("ingameDialogOpen");
+        this.element.classList.add("enlarged", "noBlur");
+        this.enlarged = true;
+        this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
+        this.update();
+
+        this.videoElement.currentTime = 0;
+        this.videoElement.play();
+    }
+
+    update() {
+        this.videoAttach.update(this.enlarged);
+
+        this.currentShownLevel.set(this.root.hubGoals.level);
+
+        const tutorialVisible = this.root.hubGoals.level <= maxTutorialVideo;
+        this.domAttach.update(tutorialVisible);
+    }
+
+    toggleHintEnlarged() {
+        if (this.enlarged) {
+            this.close();
+        } else {
+            this.show();
+        }
+    }
+}

src/js/platform/browser/sound.js

@@ -104,7 +104,7 @@ class MusicInstance extends MusicInstanceInterface {
             }),
             new Promise((resolve, reject) => {
                 this.howl = new Howl({
-                    src: cachebust("res/sounds/music/" + this.url),
+                    src: cachebust("res/sounds/music/" + this.url + ".mp3"),
                     autoplay: false,
                     loop: true,
                     html5: true,

src/js/platform/sound.js

@@ -27,8 +27,8 @@ export const SOUNDS = {
 };
 
 export const MUSIC = {
-    theme: "theme.mp3",
-    menu: "menu.mp3",
+    theme: "theme",
+    menu: "menu",
 };
 
 export class SoundInstanceInterface {