Add configurable attack ratio keybind increment setting

resources/lang/en.json

@@ -442,9 +442,11 @@
     "build_mirv_desc": "Build a MIRV under your cursor.",
     "attack_ratio_controls": "Attack Ratio Controls",
     "attack_ratio_up": "Increase Attack Ratio",
-    "attack_ratio_up_desc": "Increase attack ratio by 10%",
+    "attack_ratio_up_desc": "Increase attack ratio by {amount}%",
     "attack_ratio_down": "Decrease Attack Ratio",
-    "attack_ratio_down_desc": "Decrease attack ratio by 10%",
+    "attack_ratio_down_desc": "Decrease attack ratio by {amount}%",
+    "attack_ratio_increment_label": "Attack Ratio Keybind Increment",
+    "attack_ratio_increment_desc": "How much the attack ratio keybinds change per press.",
     "attack_keybinds": "Attack Keybinds",
     "boat_attack": "Boat Attack",
     "boat_attack_desc": "Send a boat attack to the tile under your cursor.",

src/client/InputHandler.ts

@@ -369,12 +369,14 @@ export class InputHandler {
 
       if (e.code === this.keybinds.attackRatioDown) {
         e.preventDefault();
-        this.eventBus.emit(new AttackRatioEvent(-10));
+        const increment = this.userSettings.attackRatioIncrement();
+        this.eventBus.emit(new AttackRatioEvent(-increment));
       }
 
       if (e.code === this.keybinds.attackRatioUp) {
         e.preventDefault();
-        this.eventBus.emit(new AttackRatioEvent(10));
+        const increment = this.userSettings.attackRatioIncrement();
+        this.eventBus.emit(new AttackRatioEvent(increment));
       }
 
       if (e.code === this.keybinds.centerCamera) {
@@ -529,7 +531,8 @@ export class InputHandler {
   private onShiftScroll(event: WheelEvent) {
     if (event.shiftKey) {
       const scrollValue = event.deltaY === 0 ? event.deltaX : event.deltaY;
-      const ratio = scrollValue > 0 ? -10 : 10;
+      const increment = this.userSettings.attackRatioIncrement();
+      const ratio = scrollValue > 0 ? -increment : increment;
       this.eventBus.emit(new AttackRatioEvent(ratio));
     }
   }

src/client/UserSettingModal.ts

@@ -5,6 +5,7 @@ import { UserSettings } from "../core/game/UserSettings";
 import "./components/baseComponents/setting/SettingKeybind";
 import { SettingKeybind } from "./components/baseComponents/setting/SettingKeybind";
 import "./components/baseComponents/setting/SettingNumber";
+import "./components/baseComponents/setting/SettingSelect";
 import "./components/baseComponents/setting/SettingSlider";
 import "./components/baseComponents/setting/SettingToggle";
 
@@ -189,6 +190,23 @@ export class UserSettingModal extends LitElement {
     }
   }
 
+  private changeAttackRatioIncrement(
+    e: CustomEvent<{ value: number | string }>,
+  ) {
+    const rawValue = e.detail?.value;
+    const value =
+      typeof rawValue === "number" ? rawValue : parseInt(String(rawValue), 10);
+    if (!Number.isFinite(value)) {
+      console.warn("Select event missing detail.value", e);
+      return;
+    }
+    this.userSettings.setFloat(
+      "settings.attackRatioIncrement",
+      Math.round(value),
+    );
+    this.requestUpdate();
+  }
+
   private toggleTerritoryPatterns(e: CustomEvent<{ checked: boolean }>) {
     const enabled = e.detail?.checked;
     if (typeof enabled !== "boolean") return;
@@ -430,6 +448,15 @@ export class UserSettingModal extends LitElement {
   }
 
   private renderKeybindSettings() {
+    const attackRatioIncrement = this.userSettings.attackRatioIncrement();
+    const attackRatioOptions = [
+      { value: 1, label: "1%" },
+      { value: 2, label: "2%" },
+      { value: 5, label: "5%" },
+      { value: 10, label: "10%" },
+      { value: 20, label: "20%" },
+    ];
+
     return html`
       <div class="text-center text-white text-base font-semibold mt-5 mb-2">
         ${translateText("user_setting.view_options")}
@@ -542,10 +569,20 @@ export class UserSettingModal extends LitElement {
         ${translateText("user_setting.attack_ratio_controls")}
       </div>
 
+      <setting-select
+        label=${translateText("user_setting.attack_ratio_increment_label")}
+        description=${translateText("user_setting.attack_ratio_increment_desc")}
+        .options=${attackRatioOptions}
+        .value=${String(attackRatioIncrement)}
+        @change=${this.changeAttackRatioIncrement}
+      ></setting-select>
+
       <setting-keybind
         action="attackRatioDown"
         label=${translateText("user_setting.attack_ratio_down")}
-        description=${translateText("user_setting.attack_ratio_down_desc")}
+        description=${translateText("user_setting.attack_ratio_down_desc", {
+          amount: attackRatioIncrement,
+        })}
         defaultKey="KeyT"
         .value=${this.keybinds["attackRatioDown"]?.key ?? ""}
         @change=${this.handleKeybindChange}
@@ -554,7 +591,9 @@ export class UserSettingModal extends LitElement {
       <setting-keybind
         action="attackRatioUp"
         label=${translateText("user_setting.attack_ratio_up")}
-        description=${translateText("user_setting.attack_ratio_up_desc")}
+        description=${translateText("user_setting.attack_ratio_up_desc", {
+          amount: attackRatioIncrement,
+        })}
         defaultKey="KeyY"
         .value=${this.keybinds["attackRatioUp"]?.key ?? ""}
         @change=${this.handleKeybindChange}

src/client/components/baseComponents/setting/SettingSelect.ts

@@ -0,0 +1,66 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+type SelectOption = {
+  value: number | string;
+  label: string;
+};
+
+@customElement("setting-select")
+export class SettingSelect extends LitElement {
+  @property() label = "Setting";
+  @property() description = "";
+  @property({ type: Array }) options: SelectOption[] = [];
+  @property({ type: String }) value = "";
+  @property({ type: Boolean }) easter = false;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  private handleChange(e: Event) {
+    const input = e.target as HTMLSelectElement;
+    const selected = this.options.find(
+      (option) => String(option.value) === input.value,
+    );
+    const selectedValue = selected?.value ?? input.value;
+    this.value = String(selectedValue);
+
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: selectedValue },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="setting-item${this.easter ? " easter-egg" : ""}">
+        <div class="setting-label-group">
+          <label class="setting-label" for="setting-select-input"
+            >${this.label}</label
+          >
+          <div class="setting-description">${this.description}</div>
+        </div>
+        <select
+          id="setting-select-input"
+          class="setting-input select"
+          .value=${String(this.value)}
+          @change=${this.handleChange}
+        >
+          ${this.options.map(
+            (option) =>
+              html`<option
+                value=${String(option.value)}
+                ?selected=${String(option.value) === String(this.value)}
+              >
+                ${option.label}
+              </option>`,
+          )}
+        </select>
+      </div>
+    `;
+  }
+}

src/client/graphics/layers/ControlPanel.ts

@@ -45,12 +45,15 @@ export class ControlPanel extends LitElement implements Layer {
     );
     this.uiState.attackRatio = this.attackRatio;
     this.eventBus.on(AttackRatioEvent, (event) => {
-      let newAttackRatio =
-        (parseInt(
-          (document.getElementById("attack-ratio") as HTMLInputElement).value,
-        ) +
-          event.attackRatio) /
-        100;
+      const currentPercent = parseFloat(
+        (document.getElementById("attack-ratio") as HTMLInputElement).value,
+      );
+      const step = Math.abs(event.attackRatio);
+      let newPercent = currentPercent + event.attackRatio;
+      if (currentPercent === 1 && event.attackRatio > 0 && step > 1) {
+        newPercent = step;
+      }
+      let newAttackRatio = newPercent / 100;
 
       if (newAttackRatio < 0.01) {
         newAttackRatio = 0.01;
@@ -60,11 +63,6 @@ export class ControlPanel extends LitElement implements Layer {
         newAttackRatio = 1;
       }
 
-      if (newAttackRatio === 0.11 && this.attackRatio === 0.01) {
-        // If we're changing the ratio from 1%, then set it to 10% instead of 11% to keep a consistency
-        newAttackRatio = 0.1;
-      }
-
       this.attackRatio = newAttackRatio;
       this.onAttackRatioChange(this.attackRatio);
     });

src/client/styles/components/setting.css

@@ -227,6 +227,15 @@
   color: #000000;
 }
 
+.setting-input.select {
+  width: 120px;
+  padding: 6px 8px;
+  border: 1px solid #aaa;
+  border-radius: 6px;
+  background-color: #ffffff;
+  color: #000000;
+}
+
 .switch {
   position: relative;
   display: inline-block;

src/core/game/UserSettings.ts

@@ -200,6 +200,14 @@ export class UserSettings {
     this.setFloat("settings.backgroundMusicVolume", volume);
   }
 
+  attackRatioIncrement(): number {
+    const increment = Math.round(
+      this.getFloat("settings.attackRatioIncrement", 10),
+    );
+    if (!Number.isFinite(increment) || increment <= 0) return 10;
+    return increment;
+  }
+
   soundEffectsVolume(): number {
     return this.getFloat("settings.soundEffectsVolume", 1);
   }