feat: battle visual and qol

[edisontim]

PR Type

Enhancement, Bug fix

---

Description

• Exported utility functions checkIfArmyLostAFinishedBattle and checkIfArmyAlive in useArmies.tsx.
• Refactored and enhanced multiple UI components for better layout and readability.
• Added state management and toggle functionality for resource visibility in InventoryResources and RealmListItem.
• Updated battle-related components to improve user experience and functionality.

---

Changes walkthrough 📝

Relevant files

Enhancement

16 files useArmies.tsx Export utility functions for army status checks                    client/src/hooks/helpers/useArmies.tsx Exported checkIfArmyLostAFinishedBattle and checkIfArmyAlive functions. +3/-2      StructureCard.tsx Refactor StructureCard component and adjust styles              client/src/ui/components/hyperstructures/StructureCard.tsx Refactored JSX structure for better readability. Adjusted CSS classes for various elements. +23/-25  Battle.tsx Enhance Battle component layout and imports                            client/src/ui/components/military/Battle.tsx Added BUILDING_IMAGES_PATH import. Adjusted CSS classes for better layout. +16/-13  InventoryResources.tsx Add toggle functionality to InventoryResources component  client/src/ui/components/resources/InventoryResources.tsx Added setShowAll prop to toggle visibility of all resources. Updated JSX to handle the new prop. +8/-2      Army.tsx Pass structure ownership status to CombatLabel                      client/src/ui/components/worldmap/armies/Army.tsx - Passed `structureIsMine` prop to `CombatLabel`. +1/-1      CombatLabel.tsx Update CombatLabel to reflect structure ownership                client/src/ui/components/worldmap/armies/CombatLabel.tsx Added structureIsMine prop to CombatLabel. Updated button text based on structureIsMine prop. +3/-2      HexagonInformationPanel.tsx Adjust HexagonInformationPanel positioning                              client/src/ui/components/worldmap/hexagon/HexagonInformationPanel.tsx - Adjusted CSS classes for better positioning. +1/-1      RealmListItem.tsx Add resource visibility toggle to RealmListItem                    client/src/ui/components/worldmap/realms/RealmListItem.tsx Added state management for showing all resources. Updated JSX to handle resource visibility toggle. +6/-3      Battle.tsx Enhance Battle component layout                                                    client/src/ui/modules/military/battle-view/Battle.tsx - Adjusted CSS classes for better layout. +2/-2      BattleActions.tsx Refactor BattleActions component and add utility functions client/src/ui/modules/military/battle-view/BattleActions.tsx Added isAttackable and isClaimable conditions. Refactored handleBattleStart and handleBattleClaim functions. Added utility functions for checking army status. +28/-10  BattleDetails.tsx Enhance BattleDetails component layout                                      client/src/ui/modules/military/battle-view/BattleDetails.tsx - Adjusted CSS classes for better layout. +3/-3      BattleProgressBar.tsx Update BattleProgressBar logic and layout                                client/src/ui/modules/military/battle-view/BattleProgressBar.tsx Updated battle status logic. Adjusted CSS classes for better layout. +18/-9    BattleView.tsx Enhance BattleView component layout                                            client/src/ui/modules/military/battle-view/BattleView.tsx - Adjusted CSS classes for better layout. +5/-5      EntityAvatar.tsx Enhance EntityAvatar component layout                                        client/src/ui/modules/military/battle-view/EntityAvatar.tsx - Adjusted CSS classes for better layout. +1/-1      LockedResources.tsx Enhance LockedResources component layout                                  client/src/ui/modules/military/battle-view/LockedResources.tsx - Adjusted CSS classes for better layout. +3/-3      Troops.tsx Enhance Troops component layout                                                    client/src/ui/modules/military/battle-view/Troops.tsx - Adjusted CSS classes for better layout. +5/-6

---

💡 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 28, 2024 0:55am

[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 newly exported functions checkIfArmyLostAFinishedBattle and checkIfArmyAlive in useArmies.tsx are exported but it's unclear if their internal logic has been verified against the new contexts they will be used in. It's crucial to ensure these functions perform accurately in all scenarios where they are now accessible.
	Code Clarity: In StructureCard.tsx, the refactoring for simplifying nested conditions and removing redundant code is good. However, it's important to ensure that the logic for displaying components based on showMergeTroopsPopup and other conditions remains correct and that no edge cases are missed.
	UI Consistency: Changes in BattleActions.tsx introduce new conditions for enabling battle actions. These need thorough testing to ensure they behave as expected under various game states.

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Best practice	Improve type safety by adding specific type annotations to function parameters ___ **Consider adding type annotations for the parameters Battle, Army, and army in the function checkIfArmyLostAFinishedBattle to improve type safety and code readability.** [client/src/hooks/helpers/useArmies.tsx [572]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-6d68c14fbe3262def9a16f121115d2006c7c34bf942b3e5d8ed7c076d2b89027R572-R572) ```diff -export const checkIfArmyLostAFinishedBattle = (Battle: any, Army: any, army: any) => { +export const checkIfArmyLostAFinishedBattle = (Battle: BattleType, Army: ArmyType, army: ArmyInfo) => { ``` Suggestion importance[1-10]: 8 Why: Adding specific type annotations improves type safety and code readability, which is a best practice in TypeScript. This suggestion is directly relevant to the new code introduced in the PR.	8
	Enhance type safety by using specific types instead of any ___ **Replace the any type with more specific types for the Battle and Army parameters in the checkIfArmyLostAFinishedBattle function to enhance type safety.** [client/src/ui/components/military/Battle.tsx [267]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-9f3726f9bbcb484108a0b6184660bcd0f0c5ffcdbffaf734ceb72ee17f95ed75R267-R267) ```diff -const checkIfArmyLostAFinishedBattle = (Battle: any, Army: any, army: any) => { +const checkIfArmyLostAFinishedBattle = (Battle: BattleType, Army: ArmyType, army: ArmyInfo) => { ``` Suggestion importance[1-10]: 8 Why: Using specific types instead of `any` enhances type safety, which is a best practice in TypeScript. This suggestion is relevant to the new code introduced in the PR.	8
Possible bug	Correct the concatenation in the className to avoid CSS class conflicts ___ **Ensure that the className attribute concatenates properly with the existing classes, especially when className is dynamically generated. This prevents class name conflicts and ensures CSS properties are applied correctly.** [client/src/ui/modules/military/battle-view/Troops.tsx [41]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-91a2d2f8f54e7a7655eb1a9a90930dd08eee7b9fa3063d3a5847fa77486da641R41-R41) ```diff -className={`bg-gold/10 text-gold font-bold border-2 border-gradient p-2 clip-angled-sm hover:bg-gold/40 duration-300${className}`} +className={`bg-gold/10 text-gold font-bold border-2 border-gradient p-2 clip-angled-sm hover:bg-gold/40 duration-300 ${className}`} ``` Suggestion importance[1-10]: 8 Why: Ensuring proper concatenation in the `className` attribute is crucial to avoid CSS class conflicts and ensure that styles are applied correctly. This is a significant improvement.	8
Maintainability	Simplify conditional rendering in JSX by consolidating repeated condition checks ___ **Replace the repeated checks for showMergeTroopsPopup with a single conditional rendering block to simplify the JSX structure and improve readability.** [client/src/ui/components/hyperstructures/StructureCard.tsx [74-90]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-dc87a3d6de7675f4a22a24979bc532796ebef68a9ac4cc8ed2d64217038fecddR74-R90) ```diff -{!showMergeTroopsPopup && formattedRealmAtPosition && ( - -)} -{!showMergeTroopsPopup && !formattedRealmAtPosition && formattedStructureAtPosition && ( - -)} -{showMergeTroopsPopup && ( +{showMergeTroopsPopup ? ( {ownArmySelected && ( )} +) : ( + <> + {formattedRealmAtPosition ? ( + + ) : ( + + )} + )} ``` Suggestion importance[1-10]: 7 Why: This suggestion improves the maintainability and readability of the JSX code by consolidating repeated condition checks, making the code cleaner and easier to understand.	7
	Simplify conditional text rendering in the CombatLabel component ___ **Refactor the CombatLabel component to use a ternary operator for setting the button text, which simplifies the code and improves readability.** [client/src/ui/components/worldmap/armies/CombatLabel.tsx [22]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-50738d9742ac93ba55c15b614b2ebf05dec6753a2340f95d9062821e01a6cd66R22-R22) ```diff -{structureIsMine ? "Defend" : "Combat"} +{structureIsMine ? "Defend" : "Attack"} ``` Suggestion importance[1-10]: 3 Why: While this suggestion simplifies the conditional text rendering, the improvement is minor and does not significantly impact the overall code quality.	3
Possible issue	Ensure the grid layout is correctly applied to maintain the layout structure ___ **Add a grid-cols-3 class to the div element to ensure that the child components are evenly distributed in a three-column layout, which was omitted in the PR.** [client/src/ui/modules/military/battle-view/Troops.tsx [6]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-91a2d2f8f54e7a7655eb1a9a90930dd08eee7b9fa3063d3a5847fa77486da641R6-R6) ```diff - + ``` Suggestion importance[1-10]: 7 Why: Removing the redundant "flex" class ensures that the grid layout is correctly applied, which is important for maintaining the intended layout structure.	7
Enhancement	Change flex direction to column for better alignment and readability of resource items ___ **Replace the flex-row with flex-col in the className to maintain vertical alignment of elements, which is more suitable for displaying resource lists and improves readability.** [client/src/ui/modules/military/battle-view/LockedResources.tsx [18]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-359d4a5ec2ea695cafb43989d9412232fc58a85aae799cdc84e83e4b128d9f42R18-R18) ```diff - + ``` Suggestion importance[1-10]: 5 Why: Changing the flex direction to column could improve readability, but it depends on the overall design and layout requirements. This is a minor enhancement.	5
	Add a responsive width property to the avatar's class for consistent sizing ___ **Consider adding a width property to the className attribute to ensure the avatar maintains a consistent width across different screen sizes or layout changes.** [client/src/ui/modules/military/battle-view/EntityAvatar.tsx [40]](https://github.com/BibliothecaDAO/eternum/pull/1039/files#diff-502ca5a86df525ba71ab3ea0e5b8c19ade9c3e3a8611c3c07426b22cbdb83f4dR40-R40) ```diff -className="h-44 w-44 clip-angled rounded-full object-cover border-gold/50 border-4 -mt-12 bg-black" +className="h-44 w-44 clip-angled rounded-full object-cover border-gold/50 border-4 -mt-12 bg-black w-[10vw]" ``` Suggestion importance[1-10]: 3 Why: The suggestion adds a responsive width property, but the existing code already has a fixed width of "w-44". This change is minor and may not be necessary.	3