Move videos to static fileserver to avoid unnecessary load

artwork/tutorial_videos/level_10.webm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:db8026c2a132c9d2f016986dc7a66127254c725c068eaae60909ddff6d50a210
+size 2397175

artwork/tutorial_videos/level_11.webm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce02cec04d080b2114822e9241a9baa073a56f38dd0c52e235373fd8ae2f856d
+size 1105340

artwork/tutorial_videos/level_9.webm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a996fc3605f4ef180a7985f2a74621510489cc88b2b8a97a9dc1bd19566383b7
+size 1727787

src/css/ingame_hud/tutorial_hints.scss

@@ -17,17 +17,42 @@
         transition-property: opacity, width;
         @include S(width, 0px);
         opacity: 0;
+        z-index: 10;
+        position: relative;
     }
 
     .header {
-        @include PlainText;
         color: #333438;
         display: grid;
         align-items: center;
         @include S(grid-gap, 2px);
         grid-template-columns: 1fr;
         @include S(margin-bottom, 3px);
+        z-index: 11;
+        position: relative;
+
+        > span {
+            @include DarkThemeInvert;
+
+            display: flex;
+            @include SuperSmallText;
+            justify-content: flex-start;
+            align-items: center;
+            &::before {
+                @include S(margin-right, 4px);
+                content: " ";
+                @include S(width, 12px);
+                @include S(height, 12px);
+                display: inline-block;
+                background: uiResource("icons/help.png") center center / 95% no-repeat;
+            }
+        }
+
+        button.toggleHint {
+            @include PlainText;
+        }
     }
+
     button.toggleHint {
         .hide {
             display: none;
@@ -40,9 +65,27 @@
         bottom: 50%;
         transform: translate(-50%, 50%);
 
+        &::before {
+            pointer-events: all;
+            content: " ";
+            position: fixed;
+            top: -1000px;
+            left: -1000px;
+            right: -1000px;
+            bottom: -1000px;
+            z-index: 0;
+
+            background: rgba(50, 60, 70, 0.3);
+        }
+
         .header {
             grid-template-columns: 1fr auto;
-            color: #fff;
+            > span {
+                display: none;
+            }
+            button.toggleHint {
+                grid-column: 2 / 3;
+            }
         }
 
         video {

src/js/core/config.js

@@ -94,7 +94,7 @@ export const globalConfig = {
         // showChunkBorders: true,
         // rewardsInstant: true,
         // allBuildingsUnlocked: true,
-        // upgradesNoCost: true,
+        upgradesNoCost: true,
         // disableUnlockDialog: true,
         // disableLogicTicks: true,
         // testClipping: true,

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

@@ -5,8 +5,9 @@ import { makeDiv } from "../../../core/utils";
 import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
 import { BaseHUDPart } from "../base_hud_part";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
+import { T } from "../../../translations";
 
-const maxTutorialVideo = 7;
+const tutorialVideos = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11];
 
 export class HUDPartTutorialHints extends BaseHUDPart {
     createElements(parent) {
@@ -16,10 +17,10 @@ export class HUDPartTutorialHints extends BaseHUDPart {
             [],
             `
         <div class="header">
-            No idea what to do?
+            <span>${T.ingame.tutorialHints.title}</span>
             <button class="styledButton toggleHint">
-                <span class="show">Show hint</span>
-                <span class="hide">Hide hint</span>
+                <span class="show">${T.ingame.tutorialHints.showHint}</span>
+                <span class="hide">${T.ingame.tutorialHints.hideHint}</span>
             </button>
         </div>
 
@@ -56,10 +57,16 @@ export class HUDPartTutorialHints extends BaseHUDPart {
     }
 
     updateVideoUrl(level) {
-        console.log("update video url.", level);
-        this.videoElement
-            .querySelector("source")
-            .setAttribute("src", cachebust("res/videos/level_" + level + ".webm"));
+        if (tutorialVideos.indexOf(level) < 0) {
+            this.videoElement.querySelector("source").setAttribute("src", "");
+            this.videoElement.pause();
+        } else {
+            this.videoElement
+                .querySelector("source")
+                .setAttribute("src", "https://static.shapez.io/tutorial_videos/level_" + level + ".webm");
+            this.videoElement.currentTime = 0;
+            this.videoElement.load();
+        }
     }
 
     close() {
@@ -89,7 +96,7 @@ export class HUDPartTutorialHints extends BaseHUDPart {
 
         this.currentShownLevel.set(this.root.hubGoals.level);
 
-        const tutorialVisible = this.root.hubGoals.level <= maxTutorialVideo;
+        const tutorialVisible = tutorialVideos.indexOf(this.root.hubGoals.level) >= 0;
         this.domAttach.update(tutorialVisible);
     }
 

src/js/states/main_menu.js

@@ -187,12 +187,12 @@ export class MainMenuState extends GameState {
         this.trackClicks(qs(".mainContainer .importButton"), this.requestImportSavegame);
 
         if (G_IS_DEV && globalConfig.debug.fastGameEnter) {
-            const games = this.app.savegameMgr.getSavegamesMetaData();
-            if (games.length > 0) {
-                this.resumeGame(games[0]);
-            } else {
-                this.onPlayButtonClicked();
-            }
+            // // const games = this.app.savegameMgr.getSavegamesMetaData();
+            // if (games.length > 0) {
+            //     this.resumeGame(games[0]);
+            // } else {
+            this.onPlayButtonClicked();
+            // }
         }
 
         // Initialize video

translations/base-en.yaml

@@ -251,6 +251,12 @@ ingame:
             settings: Settings
             menu: Return to menu
 
+    # Bottom left tutorial hints
+    tutorialHints:
+        title: No idea what to do?
+        showHint: Show hint
+        hideHint: Close
+
 # All shop upgrades
 shopUpgrades:
     belt: