Keybindings as Setting state + webpack/gulp watch

2025-06-13 13:04:03 +00:00 · 2020-09-07 21:42:32 +02:00 · 2020-09-07 21:42:32 +02:00 · f0cf3a2fda
commit f0cf3a2fda
parent c61dd2f9c2
9 changed files with 225 additions and 30 deletions
--- a/gulp/gulpfile.js
+++ b/gulp/gulpfile.js
@ -163,7 +163,7 @@ function serve({ standalone }) {
    });

    // Watch .scss files, those trigger a css rebuild
-    gulp.watch(["../src/**/*.scss"], gulp.series("css.dev"));
+    gulp.watch(["../src/**/*.scss"], { usePolling: true }, gulp.series("css.dev"));

    // Watch .html files, those trigger a html rebuild
    gulp.watch("../src/**/*.html", gulp.series(standalone ? "html.standalone-dev" : "html.dev"));
@ -172,7 +172,7 @@ function serve({ standalone }) {
    // gulp.watch(["../res_raw/sounds/**/*.mp3", "../res_raw/sounds/**/*.wav"], gulp.series("sounds.dev"));

    // Watch translations
-    gulp.watch("../translations/**/*.yaml", gulp.series("translations.convertToJson"));
+    gulp.watch("../translations/**/*.yaml", { usePolling: true }, gulp.series("translations.convertToJson"));

    gulp.watch(
        ["../res_raw/sounds/sfx/*.mp3", "../res_raw/sounds/sfx/*.wav"],
--- a/gulp/webpack.config.js
+++ b/gulp/webpack.config.js
@ -14,6 +14,9 @@ module.exports = ({ watch = false, standalone = false }) => {
            "bundle.js": [path.resolve(__dirname, "../src/js/main.js")],
        },
        watch,
+        watchOptions: {
+            poll: 1000
+        },
        node: {
            fs: "empty",
        },
--- a/src/css/states/keybindings.scss
+++ b/src/css/states/keybindings.scss
@ -1,5 +1,12 @@
-#state_KeybindingsState {
+#state_SettingsState {
+
+    $colorCategoryButton: #eee;
+    $colorCategoryButtonSelected: #5f748b;
+
    .content {
+        display: flex;
+        overflow-y: scroll;
+
        .topEntries {
            display: grid;
            grid-template-columns: 1fr auto;
@ -50,6 +57,148 @@
                }
            }
        }
+
+        .categoryContainer {
+            width: 100%;
+
+            .category {
+                display: none;
+
+                &.active {
+                    display: block;
+                }
+
+                .setting {
+                    @include S(padding, 10px);
+                    background: #eeeff5;
+                    @include S(border-radius, $globalBorderRadius);
+                    @include S(margin-bottom, 5px);
+
+                    label {
+                        text-transform: uppercase;
+                        @include Text;
+                    }
+
+                    .desc {
+                        @include S(margin-top, 5px);
+                        @include SuperSmallText;
+                        color: #aaadb2;
+                    }
+
+                    > .row {
+                        display: grid;
+                        align-items: center;
+                        grid-template-columns: 1fr auto;
+                    }
+
+                    &.disabled {
+                        // opacity: 0.3;
+                        pointer-events: none;
+                        * {
+                            pointer-events: none !important;
+                            cursor: default !important;
+                        }
+                        position: relative;
+                        .standaloneOnlyHint {
+                            @include PlainText;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            right: 0;
+                            bottom: 0;
+                            pointer-events: all;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            background: rgba(#fff, 0.5);
+                            text-transform: uppercase;
+                            color: $colorRedBright;
+                        }
+                    }
+
+                    .value.enum {
+                        background: #fff;
+                        @include PlainText;
+                        display: flex;
+                        align-items: flex-start;
+                        pointer-events: all;
+                        cursor: pointer;
+                        justify-content: center;
+                        @include S(min-width, 100px);
+                        @include S(border-radius, $globalBorderRadius);
+                        @include S(padding, 4px);
+                        @include S(padding-right, 15px);
+
+                        background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
+                            calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
+
+                        transition: background-color 0.12s ease-in-out;
+                        &:hover {
+                            background-color: #fafafa;
+                        }
+                    }
+                }
+            }
+        }
+
+        .sidebar {
+            display: flex;
+            flex-direction: column;
+            @include S(min-width, 210px);
+            @include S(max-width, 320px);
+            width: 30%;
+            height: 100%;
+            position: sticky;
+            top: 0;
+            @include S(margin-left, 20px);
+            @include S(margin-right, 32px);
+
+            .other {
+                margin-top: auto;
+            }
+
+            button {
+                @include S(margin-top, 4px);
+                width: calc(100% - #{D(20px)});
+                text-align: start;
+
+                &::after {
+                    content: unset;
+                }
+            }
+
+            button.categoryButton,
+            button.about {
+                background-color: $colorCategoryButton;
+                color: #777a7f;
+
+                &.active {
+                    background-color: $colorCategoryButtonSelected;
+                    color: #fff;
+
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+
+                &.pressed {
+                    transform: none !important;
+                }
+            }
+
+            .versionbar {
+                @include S(margin-top, 20px);
+                @include SuperSmallText;
+                display: grid;
+                align-items: center;
+                grid-template-columns: 1fr auto;
+                .buildVersion {
+                    display: flex;
+                    flex-direction: column;
+                    color: #aaadaf;
+                }
+            }
+        }
    }

    @include DarkThemeOverride {
--- a/src/js/application.js
+++ b/src/js/application.js
@ -145,7 +145,7 @@ export class Application {
            MobileWarningState,
            MainMenuState,
            InGameState,
-            SettingsState,
+            //SettingsState,
            KeybindingsState,
            AboutState,
            ChangelogState,
--- a/src/js/core/textual_game_state.js
+++ b/src/js/core/textual_game_state.js
@ -71,7 +71,23 @@ export class TextualGameState extends GameState {
                backToStatePayload: this.backToStatePayload,
            },
        });
-    }
+    }    
+    
+    /**
+    * Goes to a new state, telling him to go back to this state later
+    * @param {string} stateId
+    */
+   switchToState(stateId) {
+       //         debugger;
+       this.moveToState(
+           stateId,
+           {
+               backToStateId: this.backToStateId,
+               backToStatePayload: this.backToStatePayload,
+           },
+           true
+       );
+   }

    /**
     * Removes all click detectors, except the one on the back button. Useful when regenerating
--- a/src/js/profile/application_settings.js
+++ b/src/js/profile/application_settings.js
@ -23,6 +23,7 @@ export const enumCategories = {
    performance: "performance",
    advanced: "advanced",
    debug: "debug",
+    keybindings: "keybindings",
 };

 export const uiScales = [
@ -297,14 +298,14 @@ export const allApplicationSettings = [

 if (IS_DEBUG) {
    for (let k in globalConfig.debug) {
-        if (k.startsWith('_')) continue;
-        const setting = new BoolSetting(`debug_${ k }`, enumCategories.debug, (app, value) => {
+        if (k.startsWith("_")) continue;
+        const setting = new BoolSetting(`debug_${k}`, enumCategories.debug, (app, value) => {
            globalConfig.debug[k] = value;
        });
        setting.validate = () => true;
-        T.settings.labels[`debug_${ k }`] = {
+        T.settings.labels[`debug_${k}`] = {
            title: k.replace(/(?!^)([A-Z])/g, " $1"),
-            description: globalConfig.debug[`_${ k }`],
+            description: globalConfig.debug[`_${k}`],
        };
        allApplicationSettings.push(setting);
    }
@ -391,7 +392,7 @@ export class ApplicationSettings extends ReadWriteProxy {
     * @param {string} key
     */
    getSetting(key) {
-        if (!key.startsWith('debug_')) {
+        if (!key.startsWith("debug_")) {
            assert(this.getAllSettings().hasOwnProperty(key), "Setting not known: " + key);
        }
        return this.getAllSettings()[key];
--- a/src/js/states/keybindings.js
+++ b/src/js/states/keybindings.js
@ -4,39 +4,58 @@ import { T } from "../translations";
 import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
 import { Dialog } from "../core/modal_dialog_elements";
 import { IS_DEMO } from "../core/config";
+import { SettingsState } from "./settings";

-export class KeybindingsState extends TextualGameState {
-    constructor() {
-        super("KeybindingsState");
-    }
+export class KeybindingsState extends SettingsState {
+    // constructor() {
+    // super();
+    // super("KeybindingsState");
+    // this.settingsState = settingsState;
+    // }

-    getStateHeaderTitle() {
-        return T.keybindings.title;
-    }
+    // getStateHeaderTitle() {
+    //     return T.keybindings.title;
+    // }

    getMainContentHTML() {
        return `
+            <div class="sidebar">
+                ${this.getCategoryButtonsHtml()}

-            <div class="topEntries">
-                <span class="hint">${T.keybindings.hint}</span>
-                <button class="styledButton resetBindings">${T.keybindings.resetKeybindings}</button>
-            
+                <div class="other">
+                    <button class="styledButton about">${T.about.title}</button>
+
+                    <div class="versionbar">
+                        <div class="buildVersion">${T.global.loading} ...</div>
+                    </div>
+                </div>
            </div>

-            <div class="keybindings">
+            <div class="categoryContainer">
+
+                <div class="category keybindings" data-category="keybindings">
+                    <div class="topEntries">
+                        <span class="hint">${T.keybindings.hint}</span>
+                        <button class="styledButton resetBindings">${T.keybindings.resetKeybindings}</button>
+                    </div>
+                </div>
+
+                ${this.getSettingsHtml()}

            </div>
        `;
    }

    onEnter() {
+        this.onEnterCommon();
+
        const keybindingsElem = this.htmlElement.querySelector(".keybindings");

        this.trackClicks(this.htmlElement.querySelector(".resetBindings"), this.resetBindings);

        for (const category in KEYMAPPINGS) {
            const categoryDiv = document.createElement("div");
-            categoryDiv.classList.add("category");
+            categoryDiv.classList.add("keyCategory");
            keybindingsElem.appendChild(categoryDiv);

            const labelDiv = document.createElement("strong");
@ -173,7 +192,7 @@ export class KeybindingsState extends TextualGameState {
        });
    }

-    getDefaultPreviousState() {
-        return "SettingsState";
-    }
+    // getDefaultPreviousState() {
+    //     return "SettingsState";
+    // }
 }
--- a/src/js/states/settings.js
+++ b/src/js/states/settings.js
@ -4,8 +4,8 @@ import { allApplicationSettings, enumCategories } from "../profile/application_s
 import { T } from "../translations";

 export class SettingsState extends TextualGameState {
-    constructor() {
-        super("SettingsState");
+    constructor(key = "SettingsState") {
+        super(key);
    }

    getStateHeaderTitle() {
@ -92,7 +92,7 @@ export class SettingsState extends TextualGameState {
            </span>`;
    }

-    onEnter(payload) {
+    onEnterCommon() {
        this.renderBuildText();
        this.trackClicks(this.htmlElement.querySelector(".about"), this.onAboutClicked, {
            preventDefault: false,
@ -109,6 +109,12 @@ export class SettingsState extends TextualGameState {

        this.htmlElement.querySelector(".category").classList.add("active");
        this.htmlElement.querySelector(".categoryButton").classList.add("active");
+
+        this.setActiveCategory(enumCategories.general);
+    }
+
+    onEnter(payload) {
+        this.onEnterCommon();
    }

    setActiveCategory(category) {
@ -164,6 +170,6 @@ export class SettingsState extends TextualGameState {
    }

    onKeybindingsClicked() {
-        this.moveToStateAddGoBack("KeybindingsState");
+        this.switchToState("KeybindingsState");
    }
 }
--- a/translations/base-en.yaml
+++ b/translations/base-en.yaml
@ -722,6 +722,7 @@ settings:
        advanced: Advanced
        performance: Performance
        debug: Debug
+        keybindings: Keybindings

    versionBadges:
        dev: Development