combat styles

[ponderingdemocritus]

User description

• overall battle styles

---

PR Type

Enhancement

---

Description

• Added new CSS class .clip-squared-top in tailwind.config.js.
• Repositioned TopLeftContainer in World layout.
• Added toggle button and updated styles in Battle.
• Updated button styles and images in BattleActions.
• Simplified CSS classes in BattleDetails.
• Refactored gradient logic and updated styles in BattleProgressBar.
• Updated layout and added EntityAvatar in BattleSideView.
• Added address prop and updated image logic in EntityAvatar.
• Updated layout and styles in LockedResources.
• Added ornate borders to TopScreenView.
• Updated styles in Troops.
• Removed SettingsWindow from LeftNavigationModule.
• Added SettingsWindow to TopLeftNavigation.
• Updated styles in TopMiddleNavigation.
• Added new ornate border styles in index.css.

---

Changes walkthrough 📝

Relevant files

Enhancement

15 files tailwind.config.js Added new clipPath class `.clip-squared-top`.                        client/tailwind.config.js - Added new CSS class `.clip-squared-top` with a specific clipPath. +3/-0      World.tsx Repositioned `TopLeftContainer` in `World` layout.              client/src/ui/layouts/World.tsx Moved TopLeftContainer to a different position in the JSX structure. +5/-4      Battle.tsx Added toggle button and updated styles in `Battle`.            client/src/ui/modules/military/battle-view/Battle.tsx Added a button to toggle battle details. Updated CSS classes for better styling. +10/-10  BattleActions.tsx Updated button styles and images in `BattleActions`.          client/src/ui/modules/military/battle-view/BattleActions.tsx Changed button variants to outline. Updated button images and sizes. +11/-11  BattleDetails.tsx Simplified CSS classes in `BattleDetails`.                              client/src/ui/modules/military/battle-view/BattleDetails.tsx - Simplified CSS classes for `BattleDetails`. +4/-4      BattleProgressBar.tsx Refactored gradient logic and updated styles in `BattleProgressBar`. client/src/ui/modules/military/battle-view/BattleProgressBar.tsx Refactored gradient calculation logic. Updated CSS classes for better styling. +14/-11  BattleSideView.tsx Updated layout and added `EntityAvatar` in `BattleSideView`. client/src/ui/modules/military/battle-view/BattleSideView.tsx Updated layout and added new CSS classes. Included EntityAvatar with address prop. +34/-27  EntityAvatar.tsx Added address prop and updated image logic in `EntityAvatar`. client/src/ui/modules/military/battle-view/EntityAvatar.tsx Added address prop to EntityAvatar. Updated image source logic based on address. +23/-20  LockedResources.tsx Updated layout and styles in `LockedResources`.                    client/src/ui/modules/military/battle-view/LockedResources.tsx - Updated layout and CSS classes for `LockedResources`. +7/-7      TopScreenView.tsx Added ornate borders to `TopScreenView`.                                  client/src/ui/modules/military/battle-view/TopScreenView.tsx - Added ornate borders to `TopScreenView`. +1/-1      Troops.tsx Updated styles in `Troops`.                                                            client/src/ui/modules/military/battle-view/Troops.tsx - Updated CSS classes for `TroopRow` and `TroopCard`. +28/-28  LeftNavigationModule.tsx Removed `SettingsWindow` from `LeftNavigationModule`.        client/src/ui/modules/navigation/LeftNavigationModule.tsx - Removed `SettingsWindow` component. +1/-2      TopLeftNavigation.tsx Added `SettingsWindow` to `TopLeftNavigation`.                      client/src/ui/modules/navigation/TopLeftNavigation.tsx - Added `SettingsWindow` component. +2/-0      TopMiddleNavigation.tsx Updated styles in `TopMiddleNavigation`.                                  client/src/ui/modules/navigation/TopMiddleNavigation.tsx - Updated CSS classes for `TopMiddleNavigation`. +1/-1      index.css Added new ornate border styles.                                                    client/src/index.css - Added new ornate border classes. +38/-1

---

💡 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 25, 2024 3: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 new CSS class .clip-squared-top defined in tailwind.config.js might have an incorrect polygon definition. The coordinates provided seem to form an incomplete polygon which might not render as expected. It's advisable to review and test this specific shape to ensure it meets the intended design requirements.
	Code Duplication: The button toggle for showing battle details has been implemented twice in Battle.tsx. Consider refactoring to avoid duplication and maintain cleaner code.
	Styling Consistency: The changes in BattleActions.tsx introduce different icon sizes and border styles which might affect the visual consistency across the application. Ensure that these changes align with the overall design system.
	Performance Concern: The EntityAvatar.tsx now calculates an avatar index based on the address prop. This operation is performed every time the component renders, which could be optimized by memoizing the result to avoid unnecessary recalculations.

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Improve alt text descriptions for better accessibility ___ **The alt attribute for images should provide meaningful descriptions rather than just "coin". This improves accessibility and SEO.** [client/src/ui/modules/military/battle-view/BattleActions.tsx [151]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-a2b38e5f9c040c3591adb945a143c3fe234beb433a77a677a8d069ea47a6a462R151-R151) ```diff - + ``` Suggestion importance[1-10]: 9 Why: The suggestion enhances accessibility and SEO by providing meaningful alt text, which is crucial for usability and search engine optimization.	9
	Simplify gradient calculation in the useMemo hook ___ **The gradient calculation in the useMemo hook can be simplified by directly using the percentages without recalculating them.** [client/src/ui/modules/military/battle-view/BattleProgressBar.tsx [62-67]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-f9a547b6a282b885d288bf085e915af12ff12ce991fc19051cff70106c89c9deR62-R67) ```diff const gradient = useMemo(() => { - const attackPercentage = parseFloat(attackingHealthPercentage); - const defendPercentage = parseFloat(defendingHealthPercentage); - return `linear-gradient(to right, #582C4D ${attackPercentage}%, #582C4D ${attackPercentage}%, #6B7FD7 ${attackPercentage}%, #6B7FD7 ${ - attackPercentage + defendPercentage + return `linear-gradient(to right, #582C4D ${attackingHealthPercentage}%, #582C4D ${attackingHealthPercentage}%, #6B7FD7 ${attackingHealthPercentage}%, #6B7FD7 ${ + parseFloat(attackingHealthPercentage) + parseFloat(defendingHealthPercentage) }%)`; }, [attackingHealthPercentage, defendingHealthPercentage]); ``` Suggestion importance[1-10]: 6 Why: The suggestion simplifies the gradient calculation, improving code readability and maintainability. However, the improvement is relatively minor.	6
	Add conditional rendering for SettingsWindow to improve UI responsiveness ___ **Consider adding a conditional rendering or a visibility toggle for SettingsWindow to enhance the UI responsiveness and user experience, especially if the settings window should not always be visible.** [client/src/ui/modules/navigation/TopLeftNavigation.tsx [34]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-374b053c82d3cbde6f2a4e4f03a47e270f3c807d7739f9c740f6ba1d5b8b17dbR34-R34) ```diff - +{isSettingsVisible && } ``` Suggestion importance[1-10]: 6 Why: Adding conditional rendering can enhance UI responsiveness and user experience. However, the suggestion assumes the need for conditional rendering without context on whether `SettingsWindow` should always be visible.	6
Syntax	Clean up CSS syntax by removing duplicated semicolons ___ **Remove the duplicated semicolons in the CSS class definitions to clean up the syntax and prevent potential CSS parsing errors.** [client/src/index.css [223-230]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-9ba564eb566d9d518337365ff59440cd64b7217d0ddb75f1c2524003735b99adR223-R230) ```diff .ornate-borders-y { border-top: none; - border-left: 15px solid transparent;; - border-right: 15px solid transparent;; + border-left: 15px solid transparent; + border-right: 15px solid transparent; border-bottom: none; -moz-border-image: url("/border-2.png") 30 30 round; /* Old firefox */ -webkit-border-image: url("/border-2.png") 30 30 round; /* Safari */ -o-border-image: url("/border-2.png") 30 30 round; /* Opera */ border-image: url("/border-2.png") 30 30 round; } ``` Suggestion importance[1-10]: 9 Why: Removing duplicated semicolons in CSS is important for preventing potential parsing errors and maintaining clean syntax. The suggestion accurately identifies and corrects the issue.	9
Possible issue	Correct the polygon points for better shape rendering ___ **The polygon definition for ".clip-squared-top" seems incorrect as it specifies only five points, which might not render as expected. Consider revising the polygon points to ensure it forms a complete shape.** [client/tailwind.config.js [230-231]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-c161da30d9a464d0e8adede24e77041c08ea806f0ea5e7547344f60a2e0099fcR230-R231) ```diff ".clip-squared-top": { - clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 10%)", + clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0)", } ``` Suggestion importance[1-10]: 8 Why: The suggestion correctly identifies a potential rendering issue with the polygon definition and provides a fix to ensure the shape is complete. This is important for visual consistency.	8
Maintainability	Standardize the application of CSS classes across similar components ___ **Ensure consistency in the use of CSS classes for TroopCard components. The class w-1/3 is applied directly in some instances and conditionally in others. Consider refactoring to maintain a consistent approach.** [client/src/ui/modules/military/battle-view/Troops.tsx [16-26]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-91a2d2f8f54e7a7655eb1a9a90930dd08eee7b9fa3063d3a5847fa77486da641R16-R26) ```diff ``` Suggestion importance[1-10]: 8 Why: Ensuring consistency in the use of CSS classes improves code readability and maintainability. The suggestion correctly identifies the inconsistency and proposes a standardized approach.	8
	Remove unnecessary whitespace in the className attribute ___ **The className attribute in the motion.div tag has an extra space at the end which should be removed to maintain clean code standards.** [client/src/ui/modules/military/battle-view/Battle.tsx [59]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-02b2d9dfda96c1b646f0988359539b6a4cc61edaaaeaa8705cffc5d705b4d37dR59-R59) ```diff -className="absolute bottom-0 " +className="absolute bottom-0" ``` Suggestion importance[1-10]: 7 Why: The suggestion improves code cleanliness by removing unnecessary whitespace, which is good for maintainability, though it is a minor issue.	7
	Remove commented-out conditional rendering code for clarity ___ **Consider removing the commented-out conditional rendering code for better code clarity and maintainability. If the feature is no longer needed, it's best to remove it entirely.** [client/src/ui/modules/military/battle-view/Troops.tsx [9-13]](https://github.com/BibliothecaDAO/eternum/pull/1004/files#diff-91a2d2f8f54e7a7655eb1a9a90930dd08eee7b9fa3063d3a5847fa77486da641R9-R13) ```diff -{/* {noArmy ? ( - - No defending Army!. The residents are shaking in terror. - -) : ( */} +{/* Conditional rendering removed for clarity */} ``` Suggestion importance[1-10]: 7 Why: Removing commented-out code can improve code clarity and maintainability, but it is not a critical change. The suggestion correctly identifies the commented-out code and proposes its removal.	7