From 59d849debce45ead9e190df1564691c5eedbad2d Mon Sep 17 00:00:00 2001
From: Dimava <dimava2@ya.ru>
Date: Thu, 6 Aug 2020 20:36:58 +0300
Subject: [PATCH] inject KeybindingsState into SettingsState

---
 src/css/states/keybindings.scss        |  4 +--
 src/js/application.js                  |  2 +-
 src/js/profile/application_settings.js |  1 +
 src/js/states/keybindings.js           | 49 +++++++++++++++++---------
 src/js/states/settings.js              |  2 ++
 translations/base-en.yaml              |  1 +
 6 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss
index cf211403..308fd791 100644
--- a/src/css/states/keybindings.scss
+++ b/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);
diff --git a/src/js/application.js b/src/js/application.js
index e5e22b60..d304e185 100644
--- 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,
diff --git a/src/js/profile/application_settings.js b/src/js/profile/application_settings.js
index 2167c77c..9007f6b8 100644
--- a/src/js/profile/application_settings.js
+++ b/src/js/profile/application_settings.js
@@ -20,6 +20,7 @@ export const enumCategories = {
     general: "general",
     userInterface: "userInterface",
     advanced: "advanced",
+    keybindings: "keybindings",
 };
 
 export const uiScales = [
diff --git a/src/js/states/keybindings.js b/src/js/states/keybindings.js
index b68626c7..bd551dbb 100644
--- a/src/js/states/keybindings.js
+++ b/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="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() {
+        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";
+    // }
 }
diff --git a/src/js/states/settings.js b/src/js/states/settings.js
index 5e22492a..d660758d 100644
--- a/src/js/states/settings.js
+++ b/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) {
diff --git a/translations/base-en.yaml b/translations/base-en.yaml
index 38196d52..b5d47aac 100644
--- a/translations/base-en.yaml
+++ b/translations/base-en.yaml
@@ -650,6 +650,7 @@ settings:
         general: General
         userInterface: User Interface
         advanced: Advanced
+        keybindings: Keybindings
 
     versionBadges:
         dev: Development