erosson / ch2plan

Clicker Heroes 2 skill tree planner
https://ch2.erosson.org
GNU General Public License v3.0
4 stars 3 forks source link

Request: Option to use a different highlight color for selected nodes #33

Closed Amadeus99 closed 6 years ago

Amadeus99 commented 6 years ago

My problem is that I am partially color blind and the green currently used for highlighting selected nodes is hard for me to distinguish even when zoomed in one level. It's easier when zoomed in farther but when I search for nodes to see where I would like to go from my current build, I am zoomed out completely making it hard for me to see where my selected nodes exist. If an option could be added to select a different color, it would be much appreciated even though it is probable that this problem only exists for a small number of people. So, low priority if you decide to implement this.

Thanks.

erosson commented 6 years ago

Added some parameters to the url to allow different colors: ?hueSelected=n and ?hueSearch=n.

For example, green search-results and pink selected-nodes: https://ch2.erosson.org/?hueSelected=240&hueSearch=120#/h/helpfulAdventurer/1&2&3&4&5&6&7&8&9&10&11&12&20&30&31&48&49?q=big%20clicks

Try different numbers for hueSelected; it can be between 0 and 360. Not every color is possible - it's modifying the original color with a hue rotation, https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate .

Does this help? If so, I'll add a preferences screen before closing the issue, so fiddling with the url isn't necessary. (I'll need a prefs screen for other things later, anyway.)

Just curious, do you have the same problem in-game? When possible, I copied colors from there.

Amadeus99 commented 6 years ago

Hue 270 helps a little. Maybe its just the thickness of the outline when zoomed all the way out that is my problem. Not enough difference from non-selected nodes.

Yes, I have problems with the skill tree in-game as well. However, the fact that the game uses white lines connecting selected nodes and dark lines for unconnected nodes helps me spot the nodes I have selected except when zoomed out the farthest 2-3 levels which causes the lines to not show up completely at certain angles. Not sure how feasible it would be for you to do that, though. And I'm not sure how helpful it would be. Probably depends on the thickness of the lines.

I guess for me, a thicker outline around selected nodes would work better, but not sure how that would look all the way zoomed out since close nodes might overlap. (That wouldn't bother me at all, but I can't speak for other people.) Or an option to use colored circles/ovals around selected nodes like you do for searching might work really well. The red ovals around searched nodes are easily seen to me. Since you already have a system to place ovals on the tree, this might be the easiest option for you.

Thanks.

erosson commented 6 years ago

Selected edge colors/styles are a good idea, and not hard to add - thank you for suggesting it! You're not the first to tell me it's hard to tell which nodes are selected, so I'll try very thick edges along the selected path to help visibility for everyone. How is it now?


For my own future reference, to quickly test colorblind visibility without pestering a colorblind person: document.body.style = "filter:grayscale(100%);"

Amadeus99 commented 6 years ago

I just saw the change. It's perfect. Super easy to see my build now. Thanks.

Now I just have to wait for the 0.06 public_test-ptr patch to go live so you will update the tree. =)

erosson commented 6 years ago

Now I just have to wait for the 0.06 public_test-ptr patch to go live so you will update the tree. =)

I'm not patient enough to wait on that: https://ch2.erosson.org/#/g/0.06-(2)-beta-PTR