added ratio controls (#963)

## Description:
added custom controls for attack ration to user setting
## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

@qqkedsi
![Screenshot from 2025-05-31
01-18-30](https://github.com/user-attachments/assets/2460aab2-51ef-46d9-9d05-53e84dd57b29)

Co-authored-by: evanpelle <evanpelle@gmail.com>

README.md

@@ -97,10 +97,16 @@ npm run start:server-dev
   ```
 
 - **Lint and fix code**:
+
   ```bash
   npm run lint:fix
   ```
 
+- **Testing**
+  ```bash
+  npm test
+  ```
+
 ## 🏗️ Project Structure
 
 - `/src/client` - Frontend game client

resources/lang/en.json

@@ -252,6 +252,11 @@
     "view_options": "View Options",
     "toggle_view": "Toggle View",
     "toggle_view_desc": "Alternate view (terrain/countries)",
+    "attack_ratio_controls": "Attack Ratio Controls",
+    "attack_ratio_up": "Increase Attack Ratio",
+    "attack_ratio_up_desc": "Increase attack ratio by 10%",
+    "attack_ratio_down": "Decrease Attack Ratio",
+    "attack_ratio_down_desc": "Decrease attack ratio by 10%",
     "zoom_controls": "Zoom Controls",
     "zoom_out": "Zoom Out",
     "zoom_out_desc": "Zoom out the map",

src/client/InputHandler.ts

@@ -122,6 +122,8 @@ export class InputHandler {
       moveRight: "KeyD",
       zoomOut: "KeyQ",
       zoomIn: "KeyE",
+      attackRatioDown: "Digit1",
+      attackRatioUp: "Digit2",
       ...JSON.parse(localStorage.getItem("settings.keybinds") ?? "{}"),
     };
     this.canvas.addEventListener("pointerdown", (e) => this.onPointerDown(e));
@@ -218,8 +220,8 @@ export class InputHandler {
           "ArrowRight",
           "Minus",
           "Equal",
-          "Digit1",
-          "Digit2",
+          keybinds.attackRatioDown,
+          keybinds.attackRatioUp,
           keybinds.centerCamera,
           "ControlLeft",
           "ControlRight",
@@ -240,12 +242,12 @@ export class InputHandler {
         this.eventBus.emit(new RefreshGraphicsEvent());
       }
 
-      if (e.code === "Digit1") {
+      if (e.code === keybinds.attackRatioDown) {
         e.preventDefault();
         this.eventBus.emit(new AttackRatioEvent(-10));
       }
 
-      if (e.code === "Digit2") {
+      if (e.code === keybinds.attackRatioUp) {
         e.preventDefault();
         this.eventBus.emit(new AttackRatioEvent(10));
       }

src/client/UserSettingModal.ts

@@ -345,6 +345,28 @@ export class UserSettingModal extends LitElement {
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
+      <div class="text-center text-white text-base font-semibold mt-5 mb-2">
+        ${translateText("user_setting.attack_ratio_controls")}
+      </div>
+
+      <setting-keybind
+        action="attackRatioDown"
+        label=${translateText("user_setting.attack_ratio_down")}
+        description=${translateText("user_setting.attack_ratio_down_desc")}
+        defaultKey="Digit1"
+        .value=${this.keybinds["attackRatioDown"] ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="attackRatioUp"
+        label=${translateText("user_setting.attack_ratio_up")}
+        description=${translateText("user_setting.attack_ratio_up_desc")}
+        defaultKey="Digit2"
+        .value=${this.keybinds["attackRatioUp"] ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
       <div class="text-center text-white text-base font-semibold mt-5 mb-2">
         ${translateText("user_setting.zoom_controls")}
       </div>