diff --git a/gulp/html.js b/gulp/html.js index 94c25010..a21d66cb 100644 --- a/gulp/html.js +++ b/gulp/html.js @@ -96,12 +96,20 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) { const initScript = document.createElement("script"); initScript.textContent = ` - window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} - gtag('js', new Date()); - gtag('config', 'UA-165342524-1', { anonymize_ip: true }); + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', 'UA-165342524-1', { anonymize_ip: true }); `; document.head.appendChild(initScript); + + const abTestingScript = document.createElement("script"); + abTestingScript.setAttribute( + "src", + "https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7" + ); + abTestingScript.setAttribute("async", ""); + document.head.appendChild(abTestingScript); } // Do not need to preload in app or standalone diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index b191bc31..41ea600f 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -76,7 +76,7 @@ } } - > button { + .buttonContainer button { @include PlainText; color: #fff; border-color: rgba(0, 0, 0, 0.1); @@ -86,7 +86,7 @@ @include S(margin-right, 3px); @include IncreasedClickArea(0px); @include ButtonText; - @include S(min-height, 30px); + @include S(min-height, 40px); transition: all 0.12s ease-in-out; transition-property: opacity, transform; display: inline-flex; diff --git a/src/css/ingame_hud/tutorial_hints.scss b/src/css/ingame_hud/tutorial_hints.scss index 41cffacd..55603c4e 100644 --- a/src/css/ingame_hud/tutorial_hints.scss +++ b/src/css/ingame_hud/tutorial_hints.scss @@ -1,7 +1,12 @@ #ingame_HUD_TutorialHints { position: absolute; @include S(left, 10px); - @include S(bottom, 50px); + @include S(bottom, 10px); + + @include StyleBelowWidth(1430px) { + @include S(bottom, 50px); + } + display: flex; flex-direction: column; background: rgba(50, 60, 70, 0); @@ -50,6 +55,7 @@ button.toggleHint { @include PlainText; + @include IncreasedClickArea(0px); } } diff --git a/src/css/ingame_hud/waypoints.scss b/src/css/ingame_hud/waypoints.scss index 6517bbcf..fee1ec37 100644 --- a/src/css/ingame_hud/waypoints.scss +++ b/src/css/ingame_hud/waypoints.scss @@ -1,7 +1,7 @@ #ingame_HUD_Waypoints_Hint { position: absolute; @include S(right, 10px); - @include S(bottom, 100px); + @include S(bottom, 10px); display: flex; flex-direction: column; diff --git a/src/html/index.html b/src/html/index.html index 243455ea..b1d89377 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -40,9 +40,6 @@ - - - diff --git a/src/js/core/config.js b/src/js/core/config.js index b64ef640..48591055 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -109,6 +109,7 @@ export const globalConfig = { // instantBelts: true, // instantProcessors: true, // instantMiners: true, + // resumeGameOnFastEnter: false, // renderForTrailer: true, /* dev:end */ diff --git a/src/js/game/hud/parts/game_menu.js b/src/js/game/hud/parts/game_menu.js index ef05bdbf..64285624 100644 --- a/src/js/game/hud/parts/game_menu.js +++ b/src/js/game/hud/parts/game_menu.js @@ -5,9 +5,9 @@ import { enumNotificationType } from "./notifications"; import { T } from "../../../translations"; import { KEYMAPPINGS } from "../../key_action_mapper"; import { IS_DEMO } from "../../../core/config"; +import { DynamicDomAttach } from "../dynamic_dom_attach"; export class HUDGameMenu extends BaseHUDPart { - initialize() {} createElements(parent) { this.element = makeDiv(parent, "ingame_HUD_GameMenu"); @@ -22,12 +22,16 @@ export class HUDGameMenu extends BaseHUDPart { T.ingame.notifications.newUpgrade, enumNotificationType.upgrade, ]), + visible: () => + !this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3, }, { id: "stats", label: "Stats", handler: () => this.root.hud.parts.statistics.show(), keybinding: KEYMAPPINGS.ingame.menuOpenStats, + visible: () => + !this.root.app.settings.getAllSettings().offerHints || this.root.hubGoals.level >= 3, }, ]; @@ -36,14 +40,24 @@ export class HUDGameMenu extends BaseHUDPart { * button: HTMLElement, * badgeElement: HTMLElement, * lastRenderAmount: number, + * condition?: function, * notification: [string, enumNotificationType] * }>} */ this.badgesToUpdate = []; - buttons.forEach(({ id, label, handler, keybinding, badge, notification }) => { + /** @type {Array<{ + * button: HTMLElement, + * condition: function, + * domAttach: DynamicDomAttach + * }>} */ + this.visibilityToUpdate = []; + + this.buttonsElement = makeDiv(this.element, null, ["buttonContainer"]); + + buttons.forEach(({ id, label, handler, keybinding, badge, notification, visible }) => { const button = document.createElement("button"); button.setAttribute("data-button-id", id); - this.element.appendChild(button); + this.buttonsElement.appendChild(button); this.trackClicks(button, handler); if (keybinding) { @@ -52,6 +66,14 @@ export class HUDGameMenu extends BaseHUDPart { binding.appendLabelToElement(button); } + if (visible) { + this.visibilityToUpdate.push({ + button, + condition: visible, + domAttach: new DynamicDomAttach(this.root, button), + }); + } + if (badge) { const badgeElement = makeDiv(button, null, ["badge"]); this.badgesToUpdate.push({ @@ -60,6 +82,7 @@ export class HUDGameMenu extends BaseHUDPart { button, badgeElement, notification, + condition: visible, }); } }); @@ -78,27 +101,52 @@ export class HUDGameMenu extends BaseHUDPart { this.musicButton.classList.toggle("muted", this.root.app.settings.getAllSettings().musicMuted); this.sfxButton.classList.toggle("muted", this.root.app.settings.getAllSettings().soundsMuted); - + } + initialize() { this.root.signals.gameSaved.add(this.onGameSaved, this); } update() { let playSound = false; let notifications = new Set(); + + // Update visibility of buttons + for (let i = 0; i < this.visibilityToUpdate.length; ++i) { + const { button, condition, domAttach } = this.visibilityToUpdate[i]; + domAttach.update(condition()); + } + + // Check for notifications and badges for (let i = 0; i < this.badgesToUpdate.length; ++i) { - const { badge, button, badgeElement, lastRenderAmount, notification } = this.badgesToUpdate[i]; + const { + badge, + button, + badgeElement, + lastRenderAmount, + notification, + condition, + } = this.badgesToUpdate[i]; + + if (condition && !condition()) { + // Do not show notifications for invisible buttons + continue; + } + + // Check if the amount shown differs from the one shown last frame const amount = badge(); if (lastRenderAmount !== amount) { if (amount > 0) { badgeElement.innerText = amount; } - // Check if the badge increased + // Check if the badge increased, if so play a notification if (amount > lastRenderAmount) { playSound = true; if (notification) { notifications.add(notification); } } + + // Rerender notifications this.badgesToUpdate[i].lastRenderAmount = amount; button.classList.toggle("hasBadge", amount > 0); } @@ -107,6 +155,7 @@ export class HUDGameMenu extends BaseHUDPart { if (playSound) { this.root.soundProxy.playUi(SOUNDS.badgeNotification); } + notifications.forEach(([notification, type]) => { this.root.hud.signals.notification.dispatch(notification, type); }); @@ -118,13 +167,6 @@ export class HUDGameMenu extends BaseHUDPart { } startSave() { - // if (IS_DEMO) { - // this.root.hud.parts.dialogs.showFeatureRestrictionInfo( - // null, - // T.dialogs.saveNotPossibleInDemo.desc - // ); - // } - this.root.gameState.doSave(); } diff --git a/src/js/game/hud/parts/keybinding_overlay.js b/src/js/game/hud/parts/keybinding_overlay.js index f83a3fda..05455065 100644 --- a/src/js/game/hud/parts/keybinding_overlay.js +++ b/src/js/game/hud/parts/keybinding_overlay.js @@ -31,8 +31,15 @@ export class HUDKeybindingOverlay extends BaseHUDPart { ${getKeycode(KEYMAPPINGS.navigation.mapMoveDown)} ${getKeycode(KEYMAPPINGS.navigation.mapMoveRight)} - - + + + + +
+ + +
+
${getKeycode( KEYMAPPINGS.massSelect.massSelectStart diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 5cc05128..808c05ac 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -199,7 +199,7 @@ export class MainMenuState extends GameState { if (G_IS_DEV && globalConfig.debug.fastGameEnter) { const games = this.app.savegameMgr.getSavegamesMetaData(); - if (games.length > 0) { + if (games.length > 0 && globalConfig.debug.resumeGameOnFastEnter) { this.resumeGame(games[0]); } else { this.onPlayButtonClicked(); diff --git a/translations/base-en.yaml b/translations/base-en.yaml index d38c6ed1..a1d95c03 100644 --- a/translations/base-en.yaml +++ b/translations/base-en.yaml @@ -216,6 +216,7 @@ ingame: toggleHud: Toggle HUD placeBuilding: Place building createMarker: Create Marker + delete: Destroy # Everything related to placing buildings (I.e. as soon as you selected a building # from the toolbar) @@ -565,7 +566,7 @@ settings: offerHints: title: Hints & Tutorials description: >- - Whether to offer hints and tutorials while playing. + Whether to offer hints and tutorials while playing. Also hides certain UI elements onto a given level to make it easier to get into the game. keybindings: title: Keybindings