diff --git a/res/videos/level_1.webm b/artwork/tutorial_videos/level_1.webm similarity index 100% rename from res/videos/level_1.webm rename to artwork/tutorial_videos/level_1.webm diff --git a/artwork/tutorial_videos/level_10.webm b/artwork/tutorial_videos/level_10.webm new file mode 100644 index 00000000..aa1124a3 --- /dev/null +++ b/artwork/tutorial_videos/level_10.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:db8026c2a132c9d2f016986dc7a66127254c725c068eaae60909ddff6d50a210 +size 2397175 diff --git a/artwork/tutorial_videos/level_11.webm b/artwork/tutorial_videos/level_11.webm new file mode 100644 index 00000000..29a782a7 --- /dev/null +++ b/artwork/tutorial_videos/level_11.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ce02cec04d080b2114822e9241a9baa073a56f38dd0c52e235373fd8ae2f856d +size 1105340 diff --git a/res/videos/level_2.webm b/artwork/tutorial_videos/level_2.webm similarity index 100% rename from res/videos/level_2.webm rename to artwork/tutorial_videos/level_2.webm diff --git a/res/videos/level_3.webm b/artwork/tutorial_videos/level_3.webm similarity index 100% rename from res/videos/level_3.webm rename to artwork/tutorial_videos/level_3.webm diff --git a/res/videos/level_4.webm b/artwork/tutorial_videos/level_4.webm similarity index 100% rename from res/videos/level_4.webm rename to artwork/tutorial_videos/level_4.webm diff --git a/res/videos/level_5.webm b/artwork/tutorial_videos/level_5.webm similarity index 100% rename from res/videos/level_5.webm rename to artwork/tutorial_videos/level_5.webm diff --git a/res/videos/level_6.webm b/artwork/tutorial_videos/level_6.webm similarity index 100% rename from res/videos/level_6.webm rename to artwork/tutorial_videos/level_6.webm diff --git a/res/videos/level_7.webm b/artwork/tutorial_videos/level_7.webm similarity index 100% rename from res/videos/level_7.webm rename to artwork/tutorial_videos/level_7.webm diff --git a/artwork/tutorial_videos/level_9.webm b/artwork/tutorial_videos/level_9.webm new file mode 100644 index 00000000..40e240e2 --- /dev/null +++ b/artwork/tutorial_videos/level_9.webm @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a996fc3605f4ef180a7985f2a74621510489cc88b2b8a97a9dc1bd19566383b7 +size 1727787 diff --git a/res/ui/icons/help.png b/res/ui/icons/help.png new file mode 100644 index 00000000..07ec30d1 Binary files /dev/null and b/res/ui/icons/help.png differ diff --git a/src/css/ingame_hud/tutorial_hints.scss b/src/css/ingame_hud/tutorial_hints.scss index a57ac197..41cffacd 100644 --- a/src/css/ingame_hud/tutorial_hints.scss +++ b/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 { diff --git a/src/js/core/config.js b/src/js/core/config.js index 7a43ffed..69106be0 100644 --- a/src/js/core/config.js +++ b/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, diff --git a/src/js/game/hud/parts/tutorial_hints.js b/src/js/game/hud/parts/tutorial_hints.js index 5cdc8519..3a304479 100644 --- a/src/js/game/hud/parts/tutorial_hints.js +++ b/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 { [], `
- No idea what to do? + ${T.ingame.tutorialHints.title}
@@ -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); } diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 0f4481ce..814afde6 100644 --- a/src/js/states/main_menu.js +++ b/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 diff --git a/translations/base-en.yaml b/translations/base-en.yaml index c3095aa9..21f374b0 100644 --- a/translations/base-en.yaml +++ b/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: