rdr2-comparison-tool

A simple website to compare in-game weapons of Read Dead Redemption 2

The goal

I love playing RDR2 but it’s impossible to visually compare where exactly the bar moves on each weapon’s property so I started looking online and found that it’s either I get spoilers about super cool gun at the end of the game or I skim through all kinds of tabled stats that are not sorted in any order and require a lot of time to get acquainted with.

So I decided to create a website that would let one sort, filter, and compare different weapons.

Usage

I used create-react-app to initialize React development environment

• Clone the repo
• Run npm install inside of the root folder
• Run npm start inside of the root folder and head over to localhost:3000

Contributing

You are welcome to create a pull request even if you want to improve something as small as the text style as long as it adheres to RDR2 design scheme :)

Disclaimer

The design of the website follows the design of the game, I do not claim ownership of any of the assets I used (as such items’ data is from Fandom, fonts from GTAFORUMS’ user Peter1501, icons from FontAwesome and other styles from the game itself).

To-Do:

UI, UX, and styles

• Fix the alignment of card stats
• Render the table component with correct URL when user click on the “Compare weapons” button
• Ensure the call-to-action button appears only when 2 or more weapons are selected
• Change the default look of the scrollbar to be more like RDR2 (maybe by using something like this)
• Add tooltips when hovering over weapon stats icons(although the game almost never explained what each icon meant so that might be a part of the UX to figure it out on your own)
• Preserve which items were selected when rendering search results (keep red card outline)
• Preserve which table colums were selected for sorting (keep red font color)
• Display caret-up or -down depending on how items were sorted

Search

• Add search functionality
• Refactor search to account for special characters (e.g. space, apostrophe, dash in weapons’ names)

Filter

• Add filter functionality (by weapon type)
  • Firearms: Pistols, Revolvers, Rifles, Repeaters, and Shotguns
  • Melee
  • Throwable
  • Equipment
• Add keys in boxes [Q] and [E] like in RDR2 UI with filter applied in between

Table Comparison

• Parse params passed in the URL so that the link can be shared by copying and preserve which weapons were compared
• Add sort functionality by:
  • Damage
  • Range
  • Firing Rate
  • Accuracy
  • Cost
• Add top of the category items below the table compontn to showcase which items (among selected) are the best in each category
• Put top of the category between the [Q] and [E] box keys as well

Long-term

• Improve functionality by enabling sorting by multiple attributes
• Let users create their own inventory and then compare items directly with their inventory (also keep their weapons in yellow color like the game does for supreme potions)