Improve UX for first levels

2020-06-01 20:18:50 +02:00 · 2020-06-01 20:18:50 +02:00 · 91351d2f79
parent 5cd4dba54a
commit 91351d2f79
10 changed files with 90 additions and 28 deletions
--- 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
--- 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;
--- 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);
        }
    }

--- 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;
--- a/src/html/index.html
+++ b/src/html/index.html
@ -40,9 +40,6 @@
        <meta http-equiv="Expires" content="0" />
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
        <link rel="canonical" href="https://shapez.io" />
-
-        <!-- a/b testing -->
-        <script src="https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"></script>
    </head>

    <body oncontextmenu="return false" style="background: #393747;"></body>
--- 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 */
--- 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();
    }

--- 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 {
                <code class="keybinding">${getKeycode(KEYMAPPINGS.navigation.mapMoveDown)}</code>
                <code class="keybinding">${getKeycode(KEYMAPPINGS.navigation.mapMoveRight)}</code>
                <label>${T.ingame.keybindingsOverlay.moveMap}</label>
-            </div>               
-            
+                </div>               
+                
+                
+                
+            <div class="binding noPlacementOnly">
+                <code class="keybinding rightMouse"></code>
+                <label>${T.ingame.keybindingsOverlay.delete}</label>
+            </div>
+
            <div class="binding noPlacementOnly">
                <code class="keybinding builtinKey">${getKeycode(
                    KEYMAPPINGS.massSelect.massSelectStart
--- 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();
--- 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