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 { [], `