BibliothecaDAO / eternum

onchain eternal game
https://alpha-eternum.realms.world
MIT License
37 stars 31 forks source link

style #921

Closed ponderingdemocritus closed 1 month ago

ponderingdemocritus commented 1 month ago

PR Type

enhancement, other


Description


Changes walkthrough ๐Ÿ“

Relevant files
Enhancement
13 files
Entity.tsx
Simplified className for ResourceCost component.                 

client/src/ui/components/entities/Entity.tsx
  • Removed unnecessary class modification for ResourceCost component.
  • +1/-1     
    EntityList.tsx
    Added border styling to EntityList items.                               

    client/src/ui/components/list/EntityList.tsx - Added border styling to list items.
    +1/-1     
    ArmyChip.tsx
    Enhanced ArmyChip component with new styles and StaminaResource.

    client/src/ui/components/military/ArmyChip.tsx
  • Updated class names for styling consistency.
  • Added StaminaResource component.
  • Changed button labels and layout adjustments.
  • +16/-10 
    ArmyManagementCard.tsx
    Updated styling for ArmyManagementCard component.               

    client/src/ui/components/military/ArmyManagementCard.tsx - Adjusted grid gap and added border styling for troops.
    +7/-6     
    TroopChip.tsx
    Enhanced TroopChip component with border styling.               

    client/src/ui/components/military/TroopChip.tsx - Added border styling to troop resource items.
    +3/-3     
    InventoryResources.tsx
    Enhanced InventoryResources component with gap styling.   

    client/src/ui/components/resources/InventoryResources.tsx - Added gap styling to inventory resources.
    +1/-2     
    ResourceCost.tsx
    Enhanced ResourceCost component with new styles.                 

    client/src/ui/elements/ResourceCost.tsx
  • Added background, border, and gap styling to ResourceCost component.
  • +3/-3     
    StaminaResource.tsx
    Enhanced StaminaResource component with updated styles.   

    client/src/ui/elements/StaminaResource.tsx - Updated text color and layout for StaminaResource component.
    +2/-3     
    Onboarding.tsx
    Simplified Onboarding layout styling.                                       

    client/src/ui/layouts/Onboarding.tsx - Removed ornate borders from Onboarding layout.
    +1/-1     
    World.tsx
    Added TopLeftNavigation to World layout.                                 

    client/src/ui/layouts/World.tsx - Added TopLeftContainer and TopLeftNavigation components.
    +7/-0     
    BottomNavigation.tsx
    Removed settings button from BottomNavigation.                     

    client/src/ui/modules/navigation/BottomNavigation.tsx - Removed settings button from BottomNavigation.
    +0/-12   
    TopLeftNavigation.tsx
    Added TopLeftNavigation component.                                             

    client/src/ui/modules/navigation/TopLeftNavigation.tsx
  • Added new TopLeftNavigation component with hint and settings buttons.
  • +36/-0   
    TopMiddleNavigation.tsx
    Enhanced TopMiddleNavigation component with layout adjustments.

    client/src/ui/modules/navigation/TopMiddleNavigation.tsx - Adjusted layout and added primary variant to button.
    +2/-11   
    Other
    1 files
    ArmyList.tsx
    Commented out StaminaResource in ArmyList component.         

    client/src/ui/components/military/ArmyList.tsx - Commented out `StaminaResource` component.
    +1/-1     

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

    vercel[bot] commented 1 month ago

    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 13, 2024 10:10am
    github-actions[bot] commented 1 month ago

    PR Reviewer Guide ๐Ÿ”

    โฑ๏ธ Estimated effort to review [1-5] 4
    ๐Ÿงช Relevant tests No
    ๐Ÿ”’ Security concerns No
    โšก Key issues to review Possible Inconsistency:
    The PR introduces changes to various components, including styling and functionality. However, it's not clear if all changes are consistent across different components and if they adhere to the design system of the application.
    Code Clarity:
    There are several commented-out lines of code, such as the removal of the StaminaResource component in some places while it's being added or modified in others. This could lead to confusion and potential bugs if not properly managed.
    github-actions[bot] commented 1 month ago

    PR Code Suggestions โœจ

    CategorySuggestion                                                                                                                                    Score
    Possible bug
    Add error handling for non-numeric army value conversion to BigInt ___ **The division operation for displaying the army's health points (hp) might throw an error
    if army.value.toString() results in a non-numeric string. Ensure that the value is always
    numeric or handle potential exceptions.** [client/src/ui/components/military/ArmyChip.tsx [25]](https://github.com/BibliothecaDAO/eternum/pull/921/files#diff-9392efc502d8dd91125b44c0f8a38789aa297e674db0538a8893fb6ab9bd7487R25-R25) ```diff -
    hp: {(BigInt(army.value.toString()) / BigInt(1000n)).toString()}
    +
    hp: {isNaN(army.value) ? 'Invalid' : (BigInt(army.value.toString()) / BigInt(1000n)).toString()}
    ```
    Suggestion importance[1-10]: 9 Why: This suggestion addresses a potential bug that could cause runtime errors. Adding error handling for non-numeric values is crucial for robustness, making this a high-impact improvement.
    9
    Best practice
    Replace the use of !important in CSS class with a more specific class name ___ **It's recommended to avoid using the !important flag in CSS classes as it can make
    debugging and maintaining the CSS more difficult. Instead, consider increasing the
    specificity of the CSS selector or using a more specific class name.** [client/src/ui/components/entities/Entity.tsx [103]](https://github.com/BibliothecaDAO/eternum/pull/921/files#diff-e41f7ca60992e606521c1c7a6cda0e416abefc1bc9ec7d0716bc4037a6cb1c43R103-R103) ```diff -className="!text-gold " +className="text-gold-high-priority" ```
    Suggestion importance[1-10]: 8 Why: Avoiding the `!important` flag is a good practice for maintainability and debugging. The suggestion correctly identifies this and proposes a more specific class name, which is a valid improvement.
    8
    Layout adjustment
    Adjust the grid gap to accommodate the new border styling in troop display components ___ **The addition of borders to the troop display components increases the visual separation,
    which might affect the overall layout. Consider adjusting the grid's gap to maintain
    visual balance.** [client/src/ui/components/military/TroopChip.tsx [8-16]](https://github.com/BibliothecaDAO/eternum/pull/921/files#diff-cbece6b978b65197edd5a82b070123d6ae7ad014017f363d3291a958e99803f5R8-R16) ```diff -className="px-2 py-1 bg-white/10 clip-angled-sm flex flex-col justify-between gap-2 border border-gold/10" +className="px-2 py-1 bg-white/10 clip-angled-sm flex flex-col justify-between gap-3 border border-gold/10" ```
    Suggestion importance[1-10]: 7 Why: Adjusting the grid gap to maintain visual balance is a good suggestion for layout consistency. It addresses a minor but noticeable aspect of the UI, making it a useful enhancement.
    7
    Enhancement
    Verify the new border and padding styles with the design specifications ___ **The className property for the troop display div has been changed to include borders and
    padding. Consider verifying with the design team if the visual changes align with the
    intended design, especially the border color and padding adjustments.** [client/src/ui/components/military/ArmyManagementCard.tsx [235]](https://github.com/BibliothecaDAO/eternum/pull/921/files#diff-58b0b7210df6fa085fddcc914d734b935da99558172e2c10c60a2d4398bd13b9R235-R235) ```diff -className="p-3 bg-gold/10 clip-angled-sm hover:bg-gold/30 flex flex-col border-gold/10 border" +className="p-2 bg-gold/10 clip-angled-sm hover:bg-gold/30 flex flex-col border-gray-300 border" ```
    Suggestion importance[1-10]: 5 Why: While the suggestion to verify design changes is valid, it is more of a procedural recommendation rather than a direct code improvement. It is important but not critical.
    5