feat: Add button for army selection + style fixes

[edisontim]

PR Type

Enhancement, Bug fix

---

Description

• Refactored BattleManager to include troop updates and damage calculations.
• Updated address name decoding in useRealm hook.
• Added user armies in battle prop to Battle and BattleView components.
• Added army selection dropdown and updated action handlers in BattleActions.
• Added battle status message and simplified health display in BattleProgressBar.
• Clear selection after joining a battle in BattleSideView.
• Adjusted styling for EntityAvatar component.
• Fixed incorrect resource retrieval and added overflow handling in LockedResources.

---

Changes walkthrough 📝

	Relevant files
Enhancement	7 files BattleManager.ts Refactor BattleManager to include troop updates and damage calculations. client/src/dojo/modelManager/BattleManager.ts Added getUpdatedTroops method to update troop counts based on health. Refactored getUpdatedBattle to include damage calculations and update troop counts. Moved attackingDelta and defendingDelta methods to private. +61/-34  Battle.tsx Add user armies in battle prop and update button styling. client/src/ui/modules/military/battle-view/Battle.tsx Added userArmiesInBattle prop to Battle component. Updated button styling and positioning. +4/-1      BattleActions.tsx Add army selection and update action handlers in BattleActions. client/src/ui/modules/military/battle-view/BattleActions.tsx Added army selection dropdown for user armies in battle. Updated action handlers to use selected army. Adjusted button sizes and styles. +83/-21  BattleProgressBar.tsx Add battle status message and simplify health display.      client/src/ui/modules/military/battle-view/BattleProgressBar.tsx Added battle status message based on health percentages. Simplified health display logic. +27/-21  BattleSideView.tsx Clear selection after joining a battle.                                    client/src/ui/modules/military/battle-view/BattleSideView.tsx - Added `clearSelection` call after joining a battle. +3/-0      BattleView.tsx Add user armies in battle prop to BattleView.                        client/src/ui/modules/military/battle-view/BattleView.tsx - Added `userArmiesInBattle` prop to BattleView component. +2/-1      EntityAvatar.tsx Adjust styling for EntityAvatar component.                              client/src/ui/modules/military/battle-view/EntityAvatar.tsx - Adjusted styling for EntityAvatar component. +2/-2
Bug fix	2 files useRealm.tsx Update address name decoding and reorganize imports.          client/src/hooks/helpers/useRealm.tsx Replaced hexToAscii with shortString.decodeShortString for address name decoding. Reorganized imports for better readability. +7/-8      LockedResources.tsx Fix resource retrieval and add overflow handling in LockedResources. client/src/ui/modules/military/battle-view/LockedResources.tsx Fixed incorrect resource retrieval for defenders. Added overflow handling for resource display. +4/-4

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eternum	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 26, 2024 1:09pm

[github-actions[bot]]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review [1-5]	4
🧪 Relevant tests	No
🔒 Security concerns	No
⚡ Key issues to review	Possible Bug: The implementation in BattleManager.ts for updating troops based on health might lead to incorrect troop counts if the health is zero or the calculations are not handled properly. This could result in unexpected behavior during battle simulations.
	Code Duplication: There seems to be a pattern of repeated logic, especially in methods like attackingDelta and defendingDelta in BattleManager.ts. Consider refactoring these to reduce redundancy and improve maintainability.
	Data Handling: In useRealm.tsx, the change from hexToAscii to shortString.decodeShortString needs careful validation to ensure that the address names are decoded correctly without data loss or corruption.

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible bug	Use optional chaining when accessing properties of potentially undefined objects to enhance code safety ___ **Replace the direct access of properties with optional chaining to prevent runtime errors if the properties are undefined.** [client/src/ui/modules/military/battle-view/BattleActions.tsx [73-84]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-a2b38e5f9c040c3591adb945a143c3fe234beb433a77a677a8d069ea47a6a462R73-R84) ```diff -battle?.entity_id! !== 0n && battle?.entity_id === BigInt(selectedArmy!.battle_id) -selectedArmy!.entity_id +battle?.entity_id !== 0n && battle?.entity_id === BigInt(selectedArmy?.battle_id) +selectedArmy?.entity_id ``` Suggestion importance[1-10]: 10 Why: Optional chaining is a robust way to prevent runtime errors when accessing properties of objects that might be undefined, significantly enhancing code safety.	10
	Ensure type consistency by using BigInt for comparisons in getUpdatedBattle ___ **Use BigInt directly when comparing damagesDoneToAttack and damagesDoneToDefence to their respective health values to ensure type consistency and avoid potential bugs.** [client/src/dojo/modelManager/BattleManager.ts [26-32]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-bdcffae87f6ec69e4c6a7ad71f18a884bf300084e529d7a9cbc8fc55642dc5acR26-R32) ```diff -damagesDoneToAttack > battle.attack_army_health.current -damagesDoneToDefence > battle.defence_army_health.current +BigInt(damagesDoneToAttack) > BigInt(battle.attack_army_health.current) +BigInt(damagesDoneToDefence) > BigInt(battle.defence_army_health.current) ``` Suggestion importance[1-10]: 9 Why: Using `BigInt` directly for comparisons ensures type consistency and avoids potential bugs, which is crucial for maintaining the integrity of numerical operations.	9
	Add null checks to prevent errors from accessing properties on an undefined object ___ **Add null checks for selectedArmy before performing operations to ensure the object is not undefined.** [client/src/ui/modules/military/battle-view/BattleActions.tsx [73-136]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-a2b38e5f9c040c3591adb945a143c3fe234beb433a77a677a8d069ea47a6a462R73-R136) ```diff -if (selectedArmy!.entity_id) +if (selectedArmy && selectedArmy.entity_id) ``` Suggestion importance[1-10]: 9 Why: Adding null checks ensures that operations are only performed on defined objects, preventing potential runtime errors and improving code reliability.	9
	Ensure both attackers and defenders have resources before rendering ___ **Correct the conditional rendering logic to ensure that the UI elements are displayed only when both attackers and defenders have resources.** [client/src/ui/modules/military/battle-view/LockedResources.tsx [20]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-359d4a5ec2ea695cafb43989d9412232fc58a85aae799cdc84e83e4b128d9f42R20-R20) ```diff -{attackersResources.length > 0 || defendersResources.length > 0 ? ( +{attackersResources.length > 0 && defendersResources.length > 0 ? ( ``` Suggestion importance[1-10]: 9 Why: Correcting the conditional rendering logic to check that both attackers and defenders have resources before rendering prevents potential UI issues and ensures accurate display of information.	9
	Add a check to ensure the battle object is defined and is an object before accessing its properties ___ **Consider adding a check for battle being undefined before accessing its properties in getUpdatedBattle method to prevent potential runtime errors.** [client/src/dojo/modelManager/BattleManager.ts [14-16]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-bdcffae87f6ec69e4c6a7ad71f18a884bf300084e529d7a9cbc8fc55642dc5acR14-R16) ```diff const battle = this.getBattle(); -if (!battle) return; +if (!battle || typeof battle !== 'object') return; ``` Suggestion importance[1-10]: 8 Why: This suggestion adds an extra layer of safety by ensuring `battle` is an object before accessing its properties, which can prevent potential runtime errors.	8
Possible issue	Improve handling of undefined time to enhance UI robustness ___ **Consider handling the case where time is undefined in the conditional rendering to avoid displaying 'undefined' in the UI. You can provide a default message or handle this case explicitly.** [client/src/ui/modules/military/battle-view/BattleProgressBar.tsx [99]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-f9a547b6a282b885d288bf085e915af12ff12ce991fc19051cff70106c89c9deR99-R99) ```diff -{time ? `${time.toISOString().substring(11, 19)} left` : battleStatus} +{time ? `${time.toISOString().substring(11, 19)} left` : (battleStatus || 'Status unknown')} ``` Suggestion importance[1-10]: 8 Why: This suggestion improves the robustness of the UI by ensuring that an undefined `time` does not result in displaying 'undefined' in the UI, which enhances user experience.	8
Maintainability	Refactor nested ternary operators to a function for clarity ___ **Refactor the nested ternary operators in the battleStatus calculation for better readability and maintainability. Consider using a function to handle the logic.** [client/src/ui/modules/military/battle-view/BattleProgressBar.tsx [71-81]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-f9a547b6a282b885d288bf085e915af12ff12ce991fc19051cff70106c89c9deR71-R81) ```diff -return ownArmySide === "Attack" - ? Number(attackingHealthPercentage) === 100 - ? "You Won" - : Number(attackingHealthPercentage) === 0 - ? "You Lost" - : undefined - : Number(defendingHealthPercentage) === 100 - ? "You Won" - : Number(defendingHealthPercentage) === 0 - ? "You Lost" - : undefined; +return getBattleStatus(ownArmySide, attackingHealthPercentage, defendingHealthPercentage); +function getBattleStatus(side, attackingPercentage, defendingPercentage) { + if (side === "Attack") { + return attackingPercentage === 100 ? "You Won" : attackingPercentage === 0 ? "You Lost" : undefined; + } else { + return defendingPercentage === 100 ? "You Won" : defendingPercentage === 0 ? "You Lost" : undefined; + } +} + ``` Suggestion importance[1-10]: 7 Why: Refactoring the nested ternary operators into a function improves readability and maintainability, making the code easier to understand and modify in the future.	7
Best practice	Add condition to clearSelection call to prevent unintended side effects ___ **Ensure that clearSelection is called conditionally based on a specific state or action to prevent unintended side effects.** [client/src/ui/modules/military/battle-view/BattleSideView.tsx [56]](https://github.com/BibliothecaDAO/eternum/pull/1024/files#diff-397dfa91805db7c39d745fe2ed886f24a2439d06e9eac8c1b24d16f7b7e8705cR56-R56) ```diff -clearSelection(); +if (shouldClearSelection) { + clearSelection(); +} ``` Suggestion importance[1-10]: 6 Why: Adding a condition to the `clearSelection` call helps prevent unintended side effects, ensuring that the function is only called when necessary.	6