feat(ui): Shown in the fourth column

kitten-science · May 12, 2024 · bd1892e · bd1892e
1 parent 4d7f059
commit bd1892e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 1 deletion.
diff --git a/packages/kitten-scientists/source/i18n/en.json b/packages/kitten-scientists/source/i18n/en.json
@@ -206,6 +206,7 @@
   "ui.internals.interval.input": "Enter a new interval at which KS should run (in milliseconds):",
   "ui.itemsHide": "Hide options",
   "ui.itemsShow": "Show options",
+  "ui.ksColumn": "Shown in the fourth column",
   "ui.language": "Language",
   "ui.limit": "Limited",
   "ui.max.set": "Maximum for {0}",

diff --git a/packages/kitten-scientists/source/i18n/zh.json b/packages/kitten-scientists/source/i18n/zh.json
@@ -206,6 +206,7 @@
   "ui.internals.interval.input": "输入 KS 运行的新时间间隔 (单位: 毫秒)",
   "ui.itemsHide": "隐藏选项",
   "ui.itemsShow": "显示选项",
+  "ui.ksColumn": "显示在第四栏",
   "ui.language": "语言",
   "ui.limit": "限制",
   "ui.max.set": "设置 {0} 的最大值",

diff --git a/packages/kitten-scientists/source/settings/EngineSettings.ts b/packages/kitten-scientists/source/settings/EngineSettings.ts
@@ -17,6 +17,8 @@ export class EngineSettings extends Setting {
    */
   language: SettingOptions<SupportedLanguage>;
 
+  ksColumn: Setting;
+
   filters: LogFilterSettings;
   resources: ResourcesSettings;
   readonly states: StateSettings;
@@ -27,6 +29,7 @@ export class EngineSettings extends Setting {
     resources = new ResourcesSettings(),
     states = new StateSettings(),
     language = FallbackLanguage,
+    ksColumn = new Setting(false),
   ) {
     super(enabled);
     this.filters = filters;
@@ -38,6 +41,7 @@ export class EngineSettings extends Setting {
       { label: "עִברִית", value: "he" },
       { label: "中文", value: "zh" },
     ]);
+    this.ksColumn = ksColumn;
   }
 
   load(settings: Maybe<Partial<EngineSettings>>, retainMetaBehavior = false) {
@@ -52,6 +56,7 @@ export class EngineSettings extends Setting {
       this.states.load(settings.states);
       this.language.load(settings.language);
     }
+    this.ksColumn.load(settings.ksColumn);
 
     this.filters.load(settings.filters);
     this.resources.load(settings.resources);

diff --git a/packages/kitten-scientists/source/ui/InternalsUi.ts b/packages/kitten-scientists/source/ui/InternalsUi.ts
@@ -6,6 +6,7 @@ import { SettingsSectionUi } from "./SettingsSectionUi.js";
 import { ButtonListItem } from "./components/ButtonListItem.js";
 import { LabelListItem } from "./components/LabelListItem.js";
 import { OptionsListItem } from "./components/OptionsListItem.js";
+import { SettingListItem } from "./components/SettingListItem.js";
 import { SettingsList } from "./components/SettingsList.js";
 import { SettingsPanel } from "./components/SettingsPanel.js";
 import { TextButton } from "./components/TextButton.js";
@@ -41,6 +42,16 @@ export class InternalsUi extends SettingsPanel<EngineSettings> {
                 },
               }),
             ),
+            new SettingListItem(host, host.engine.i18n("ui.ksColumn"), settings.ksColumn, {
+              onCheck: () => {
+                localStorage.setItem("ks.Column", "#ksColumn");
+                this._host.rebuildUi();
+              },
+              onUnCheck: () => {
+                localStorage.setItem("ks.Column", "#rightColumn");
+                this._host.rebuildUi();
+              },
+            }),
             new OptionsListItem(host, host.engine.i18n("ui.language"), settings.language, {
               onCheck: () => {
                 this._host.rebuildUi();

diff --git a/packages/kitten-scientists/source/ui/UserInterface.ts b/packages/kitten-scientists/source/ui/UserInterface.ts
@@ -117,7 +117,11 @@ export class UserInterface extends UiComponent {
     $("#clearLog").prepend(this.showActivity);
 
     // Add Kitten Scientists above the game log.
-    const right = $("#rightColumn");
+    $("#rightColumn").after(
+      '<div id="ksColumn" class="column"><br><br><br><br><br><br><br><br><br><br></div>',
+    );
+    const id = localStorage["ks.Column"] as string | undefined;
+    const right = $(isNil(id) ? "#rightColumn" : id);
     if (right.length === 0) {
       // Try to fall back to options page.
       const optionsPageContent = $("#optionsPage .full-screen-position .page .page-content");
@@ -148,6 +152,17 @@ export class UserInterface extends UiComponent {
 
   private _installCss(): void {
     // Basic layout for our own list-based options menus.
+    this._addRule(
+      `#ksColumn {
+        min-width: 250px;
+        max-width: 440px;
+        vertical-align: top;
+        padding-left: 8px;
+        top: 20px;
+        position: relative;
+        overflow-y: auto;
+      }`,
+    );
     this._addRule(
       `#ks {
         margin-bottom: 10px;