Build bar (#2059)

## Description:

Make the unit display bar a proper unit build bar
Add shortcuts for all structures and units
Add ranges for ranged structures and units
Changed the shortcuts to use the key instead of the code for
internationalization purposes


![buildbar](https://github.com/user-attachments/assets/6407dc9c-14b4-40cc-8faa-cdd9e88c9fd2)
<img width="285" height="517" alt="image"
src="https://github.com/user-attachments/assets/91bb01e6-e48c-4255-ace1-306af9cdc25b"
/>

## 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

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

Mr.Box

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
Co-authored-by: icslucas <carolinacarazolli@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/client/UserSettingModal.ts

@@ -13,7 +13,8 @@ export class UserSettingModal extends LitElement {
   private userSettings: UserSettings = new UserSettings();
 
   @state() private settingsMode: "basic" | "keybinds" = "basic";
-  @state() private keybinds: Record<string, string> = {};
+  @state() private keybinds: Record<string, { value: string; key: string }> =
+    {};
 
   @state() private keySequence: string[] = [];
   @state() private showEasterEggSettings = false;
@@ -206,14 +207,15 @@ export class UserSettingModal extends LitElement {
   }
 
   private handleKeybindChange(
-    e: CustomEvent<{ action: string; value: string }>,
+    e: CustomEvent<{ action: string; value: string; key: string }>,
   ) {
-    const { action, value } = e.detail;
-    const prevValue = this.keybinds[action] ?? "";
+    console.log("Keybind change event:", e);
+    const { action, value, key } = e.detail;
+    const prevValue = this.keybinds[action]?.value ?? "";
 
     const values = Object.entries(this.keybinds)
       .filter(([k]) => k !== action)
-      .map(([, v]) => v);
+      .map(([, v]) => v.value);
     if (values.includes(value) && value !== "Null") {
       const popup = document.createElement("div");
       popup.className = "setting-popup";
@@ -228,7 +230,7 @@ export class UserSettingModal extends LitElement {
       }
       return;
     }
-    this.keybinds = { ...this.keybinds, [action]: value };
+    this.keybinds = { ...this.keybinds, [action]: { value: value, key: key } };
     localStorage.setItem("settings.keybinds", JSON.stringify(this.keybinds));
   }
 
@@ -430,7 +432,92 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.toggle_view")}
         description=${translateText("user_setting.toggle_view_desc")}
         defaultKey="Space"
-        .value=${this.keybinds["toggleView"] ?? ""}
+        .value=${this.keybinds["toggleView"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <div class="text-center text-white text-base font-semibold mt-5 mb-2">
+        ${translateText("user_setting.build_controls")}
+      </div>
+
+      <setting-keybind
+        action="buildCity"
+        label=${translateText("user_setting.build_city")}
+        description=${translateText("user_setting.build_city_desc")}
+        defaultKey="Digit1"
+        .value=${this.keybinds["buildCity"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildFactory"
+        label=${translateText("user_setting.build_factory")}
+        description=${translateText("user_setting.build_factory_desc")}
+        defaultKey="Digit2"
+        .value=${this.keybinds["buildFactory"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildPort"
+        label=${translateText("user_setting.build_port")}
+        description=${translateText("user_setting.build_port_desc")}
+        defaultKey="Digit3"
+        .value=${this.keybinds["buildPort"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildDefensePost"
+        label=${translateText("user_setting.build_defense_post")}
+        description=${translateText("user_setting.build_defense_post_desc")}
+        defaultKey="Digit4"
+        .value=${this.keybinds["buildDefensePost"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildMissileSilo"
+        label=${translateText("user_setting.build_missile_silo")}
+        description=${translateText("user_setting.build_missile_silo_desc")}
+        defaultKey="Digit5"
+        .value=${this.keybinds["buildMissileSilo"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildSamLauncher"
+        label=${translateText("user_setting.build_sam_launcher")}
+        description=${translateText("user_setting.build_sam_launcher_desc")}
+        defaultKey="Digit6"
+        .value=${this.keybinds["buildSamLauncher"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildAtomBomb"
+        label=${translateText("user_setting.build_atom_bomb")}
+        description=${translateText("user_setting.build_atom_bomb_desc")}
+        defaultKey="Digit7"
+        .value=${this.keybinds["buildAtomBomb"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildHydrogenBomb"
+        label=${translateText("user_setting.build_hydrogen_bomb")}
+        description=${translateText("user_setting.build_hydrogen_bomb_desc")}
+        defaultKey="Digit8"
+        .value=${this.keybinds["buildHydrogenBomb"]?.key ?? ""}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="buildWarship"
+        label=${translateText("user_setting.build_warship")}
+        description=${translateText("user_setting.build_warship_desc")}
+        defaultKey="Digit9"
+        .value=${this.keybinds["buildWarship"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -442,8 +529,8 @@ export class UserSettingModal extends LitElement {
         action="attackRatioDown"
         label=${translateText("user_setting.attack_ratio_down")}
         description=${translateText("user_setting.attack_ratio_down_desc")}
-        defaultKey="Digit1"
-        .value=${this.keybinds["attackRatioDown"] ?? ""}
+        defaultKey="KeyT"
+        .value=${this.keybinds["attackRatioDown"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -451,8 +538,8 @@ export class UserSettingModal extends LitElement {
         action="attackRatioUp"
         label=${translateText("user_setting.attack_ratio_up")}
         description=${translateText("user_setting.attack_ratio_up_desc")}
-        defaultKey="Digit2"
-        .value=${this.keybinds["attackRatioUp"] ?? ""}
+        defaultKey="KeyY"
+        .value=${this.keybinds["attackRatioUp"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -465,7 +552,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.boat_attack")}
         description=${translateText("user_setting.boat_attack_desc")}
         defaultKey="KeyB"
-        .value=${this.keybinds["boatAttack"] ?? ""}
+        .value=${this.keybinds["boatAttack"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -474,7 +561,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.ground_attack")}
         description=${translateText("user_setting.ground_attack_desc")}
         defaultKey="KeyG"
-        .value=${this.keybinds["groundAttack"] ?? ""}
+        .value=${this.keybinds["groundAttack"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -487,7 +574,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.zoom_out")}
         description=${translateText("user_setting.zoom_out_desc")}
         defaultKey="KeyQ"
-        .value=${this.keybinds["zoomOut"] ?? ""}
+        .value=${this.keybinds["zoomOut"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -496,7 +583,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.zoom_in")}
         description=${translateText("user_setting.zoom_in_desc")}
         defaultKey="KeyE"
-        .value=${this.keybinds["zoomIn"] ?? ""}
+        .value=${this.keybinds["zoomIn"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -509,7 +596,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.center_camera")}
         description=${translateText("user_setting.center_camera_desc")}
         defaultKey="KeyC"
-        .value=${this.keybinds["centerCamera"] ?? ""}
+        .value=${this.keybinds["centerCamera"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -518,7 +605,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.move_up")}
         description=${translateText("user_setting.move_up_desc")}
         defaultKey="KeyW"
-        .value=${this.keybinds["moveUp"] ?? ""}
+        .value=${this.keybinds["moveUp"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -527,7 +614,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.move_left")}
         description=${translateText("user_setting.move_left_desc")}
         defaultKey="KeyA"
-        .value=${this.keybinds["moveLeft"] ?? ""}
+        .value=${this.keybinds["moveLeft"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -536,7 +623,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.move_down")}
         description=${translateText("user_setting.move_down_desc")}
         defaultKey="KeyS"
-        .value=${this.keybinds["moveDown"] ?? ""}
+        .value=${this.keybinds["moveDown"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
@@ -545,7 +632,7 @@ export class UserSettingModal extends LitElement {
         label=${translateText("user_setting.move_right")}
         description=${translateText("user_setting.move_right_desc")}
         defaultKey="KeyD"
-        .value=${this.keybinds["moveRight"] ?? ""}
+        .value=${this.keybinds["moveRight"]?.key ?? ""}
         @change=${this.handleKeybindChange}
       ></setting-keybind>
     `;