Keybindings as Setting state + webpack/gulp watch

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"],

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",
         },

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 {

src/js/application.js

@@ -145,7 +145,7 @@ export class Application {
             MobileWarningState,
             MainMenuState,
             InGameState,
-            SettingsState,
+            //SettingsState,
             KeybindingsState,
             AboutState,
             ChangelogState,

src/js/core/textual_game_state.js

@@ -73,6 +73,22 @@ export class TextualGameState extends GameState {
         });
     }    
     
+    /**
+    * 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
      * content.

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,7 +298,7 @@ export const allApplicationSettings = [
 
 if (IS_DEBUG) {
     for (let k in globalConfig.debug) {
-        if (k.startsWith('_')) continue;
+        if (k.startsWith("_")) continue;
         const setting = new BoolSetting(`debug_${k}`, enumCategories.debug, (app, value) => {
             globalConfig.debug[k] = value;
         });
@@ -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];

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 {
+export class KeybindingsState extends SettingsState {
-    constructor() {
+    // constructor() {
-        super("KeybindingsState");
+    // super();
-    }
+    // super("KeybindingsState");
+    // this.settingsState = settingsState;
+    // }
 
-    getStateHeaderTitle() {
+    // getStateHeaderTitle() {
-        return T.keybindings.title;
+    //     return T.keybindings.title;
-    }
+    // }
 
     getMainContentHTML() {
         return `
+            <div class="sidebar">
+                ${this.getCategoryButtonsHtml()}
 
+                <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="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>
 
-            <div class="keybindings">
+                ${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() {
+    // getDefaultPreviousState() {
-        return "SettingsState";
+    //     return "SettingsState";
-    }
+    // }
 }

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() {
+    constructor(key = "SettingsState") {
-        super("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");
     }
 }

translations/base-en.yaml

@@ -722,6 +722,7 @@ settings:
         advanced: Advanced
         performance: Performance
         debug: Debug
+        keybindings: Keybindings
 
     versionBadges:
         dev: Development