add debug settings to settings menu (does not work)

src/js/profile/application_settings.js

@@ -2,6 +2,7 @@
 import { Application } from "../application";
 /* typehints:end */
 
+import { globalConfig } from "../core/config";
 import { ReadWriteProxy } from "../core/read_write_proxy";
 import { BoolSetting, EnumSetting, BaseSetting } from "./setting_types";
 import { createLogger } from "../core/logging";
@@ -15,6 +16,7 @@ const logger = createLogger("application_settings");
 
 const categoryGame = "game";
 const categoryApp = "app";
+const categoryDebug = "debug";
 
 export const uiScales = [
     {
@@ -200,6 +202,12 @@ export const allApplicationSettings = [
     new BoolSetting("offerHints", categoryGame, (app, value) => {}),
 ];
 
+/** @type {Array<BaseSetting>} */
+export const allDebugSettings = [];
+for (const k in globalConfig.debug) {
+    allDebugSettings.push(new BoolSetting(k, categoryDebug, (app, value) => globalConfig.debug[k] = value));
+}
+
 export function getApplicationSettingById(id) {
     return allApplicationSettings.find(setting => setting.id === id);
 }

src/js/profile/setting_types.js

@@ -187,18 +187,19 @@ export class BoolSetting extends BaseSetting {
     }
 
     getHtml() {
+        const label = T.settings.labels[this.id] || {title : this.id};
         return `
         <div class="setting cardbox ${this.enabled ? "enabled" : "disabled"}">
             ${this.enabled ? "" : standaloneOnlySettingHtml}
                 
             <div class="row">
-                <label>${T.settings.labels[this.id].title}</label>
+                <label>${label.title}</label>
                 <div class="value checkbox checked" data-setting="${this.id}">
                 <span class="knob"></span>
                 </div>
             </div>
             <div class="desc">
-                ${T.settings.labels[this.id].description}
+                ${label.description}
             </div>
         </div>`;
     }

src/js/states/settings.js

@@ -1,6 +1,7 @@
+import { globalConfig } from "../core/config";
 import { TextualGameState } from "../core/textual_game_state";
 import { formatSecondsToTimeAgo } from "../core/utils";
-import { allApplicationSettings } from "../profile/application_settings";
+import { allApplicationSettings, allDebugSettings } from "../profile/application_settings";
 import { T } from "../translations";
 
 export class SettingsState extends TextualGameState {
@@ -54,6 +55,22 @@ export class SettingsState extends TextualGameState {
 
             html += setting.getHtml();
         }
+        if (globalConfig.debug.showDebugSettings) {
+            for (let i = 0; i < allDebugSettings.length; ++i) {
+                const setting = allDebugSettings[i];
+
+                if (setting.categoryId !== lastCategory) {
+                    lastCategory = setting.categoryId;
+                    if (i !== 0) {
+                        html += "</div>";
+                    }
+                    html += `<strong class="categoryLabel">${T.settings.categories[lastCategory]}</strong>`;
+                    html += "<div class='settingsContainer'>";
+                }
+
+                html += setting.getHtml();
+            }
+        }
         if (lastCategory) {
             html += "</div>";
         }