Skip to content

[REFACTOR] Decouple UI and rendering logic from GameCard component #6

Description

@MrJacob12

The GameCard.tsx component is becoming a "God Component" by handling everything from CSS
filter logic for different rarities to icon mapping and status badge styling. This makes
the UI code hard to read and maintain.

Tasks:

  • Extract rarity-based styling (borders, backgrounds, animations) into a separate
    utility or a configuration object.
  • Move image filter logic (e.g., invert, sepia) to a dedicated helper function in
    src/lib/utils.ts.
  • Break down GameCard into smaller sub-components (e.g., CardImage, CardStats,
    CardRarityOverlay) if necessary.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

REFACTORImproving code structure without changing application behavior.

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions