inject KeybindingsState into SettingsState

src/css/states/keybindings.scss

@@ -1,4 +1,4 @@
-#state_KeybindingsState {
+#state_SettingsState {
     .content {
         .topEntries {
             display: grid;
@@ -14,7 +14,7 @@
             @include PlainText;
         }
 
-        .category {
+        .keyCategory {
             .entry {
                 display: grid;
                 @include S(margin-top, 2px);

src/js/application.js

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

src/js/profile/application_settings.js

@@ -20,6 +20,7 @@ export const enumCategories = {
     general: "general",
     userInterface: "userInterface",
     advanced: "advanced",
+    keybindings: "keybindings",
 };
 
 export const uiScales = [

src/js/states/keybindings.js

@@ -4,39 +4,56 @@ 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("KeybindingsState");
+    // }
 
-    getStateHeaderTitle() {
-        return T.keybindings.title;
-    }
+    // getStateHeaderTitle() {
+    //     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() {
+        super.onEnter();
+
         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 +190,7 @@ export class KeybindingsState extends TextualGameState {
         });
     }
 
-    getDefaultPreviousState() {
-        return "SettingsState";
-    }
+    // getDefaultPreviousState() {
+    //     return "SettingsState";
+    // }
 }

src/js/states/settings.js

@@ -109,6 +109,8 @@ export class SettingsState extends TextualGameState {
 
         this.htmlElement.querySelector(".category").classList.add("active");
         this.htmlElement.querySelector(".categoryButton").classList.add("active");
+
+        this.setActiveCategory(enumCategories.general);
     }
 
     setActiveCategory(category) {

translations/base-en.yaml

@@ -650,6 +650,7 @@ settings:
         general: General
         userInterface: User Interface
         advanced: Advanced
+        keybindings: Keybindings
 
     versionBadges:
         dev: Development