[MyMeta] Add filters to /players page

[dan13ram]

Right now, there is only a list of players.
If we want to make the player explorer more useful, we should allow people to search & filter it.

A player should be able to search the player list, filter it skills & availability at the very least.

The design:

Figma file

[davort]

Early feedback
Solid implementation, however not following Figma in its entirety.
I have also updated the Figma file slightly, so as to make UI clearer: Figma link

I'd appreciate if you could do the following:

1. Add background color to dropdowns, as defined in Figma (#1B0D2A)
2. Use those down-pointed arrows for the dropdowns. I've made them exportable now. -- This is optional. If it's too much work, feel free to leave it as is.
3. Use the same border style for dropdown buttons as is defined in Figma (2px, solid, #5946BC).
4. Make the search field a rectangle, with border-radius: 0 -- This is to differentiate the search field from dropdowns.
5. Make the placeholder text semi-transparent (opacity: 50%)
6. I tried entering a search phrase and hitting "enter", but that didn't seem to work. Can we make it work like that? -- This is important.

Let me know if you have any thoughts, comments, or when you'd like me to take another look.
Thanks in advance!

[peth-yursick]

Just pasting over from Discord:

We should probably add more times between 0 & >10h. Maybe 1h & 5h? But that's probably a separate issue.
Also, we dropped "pioneers, settlers & town planners" meanwhile for the MTG colors, so that would be more important to put on.
What is the difference between "dev" & "engineering"? Would it make more sense to merge along with "technologies" since it doesn't allow picking the subset of technologies anyway?

As for the design itself, wait for @davor 🐙's opinion because I'm not a designer but it might be good to match these, to make the panel transparent like the cards & the buttons without the borders. Could also make the dropdown itself round cornered bottom & semi transparent.

[dan13ram]

@peth-yursick

What is the difference between "dev" & "engineering"? Would it make more sense to merge along with "technologies" since it doesn't allow picking the subset of technologies anyway?

These categories are subcategories of skills in https://my.metagame.wtf/profile/setup/skills
So technologies/dev/engineering are all different.

I totally get that it can be confusing. I can change this to show all skills if that would be better.

But if we want to merge them then we would have to merge these skill categories together in the backend as well as the profile flow too. Let me know what you think is best.

[dan13ram]

@peth-yursick Regarding the ColorAspects, these are the different options available as per the database

ColorAspects = [
  "Colorless",
  "Authenticity",
  "Profanity",
  "Independence",
  "Realism",
  "Truth-Seeking",
  "Creativity",
  "Savagery",
  "Growth Mindset",
  "Ruthlessness",
  "Iconoclasm",
  "Turmoil",
  "Community",
  "Heroism",
  "Contentment",
  "Tribalism",
  "Endurance",
  "Speed",
  "Aggression",
  "Structure",
  "Complacence",
  "Cunning",
  "Altruism",
  "Dedication",
  "Growth",
  "Artifice",
  "Wholeness",
  "Balance",
  "Justice",
  "Wisdom",
  "Ambition",
  "Chaos"
]

We can create a filter based on these. But imo these are not easy to understand.
But this can be done. Let me know :)

[dan13ram]

@davort Thank you so much for your feedback!
I've updated the PR with yours as well as @peth-yursick 's suggestions.
Please take a look and let me know what you think :)
https://the-game-git-feat-filters-metafam.vercel.app/players

[davort]

@dan13ram – you're welcome! Thank you for doing a great job taking care of that first round of feedback. I have another few questions and comments:

1. The first dropdown—number of results to display—isn't in the design mockup. What is the use case where anyone would be interested in fiddling with this? Why not just show the maximum that is technically feasible, and if it doesn't fit onto a single page, that can be fixed with pagination. Also, this looks funny (screenshot)

2. Number of results is formatted differently than in the design mockup. Would be better to implement it as it was suggested in the design mockup, because people scan pages in the so-called "F pattern". Hence, better to have that info aligned to the left of the page.

3. Instead of "number of results", a "Sort by" dropdown might actually be useful. What is the default sort criteria? Happy to hear your thoughts on this one.

4. When the user makes selections in more than one of the filter dropdowns, it might be nice to offer a "RESET ALL FILTERS" button. Let me know what you think about that.

[dan13ram]

Thanks @davort .

1 & 2. I consciously moved away from the design and added the "first dropdown" as well as moved the "number of results" to the top right. This was in order to keep the same design across different pages. Please see below the current screenshot of /quests page

Having shared that, I'm definitely in favor of the figma + some pagination.
Would you be kind enough to share some design mockups for how pagination might look?
3. Its currently sorted by descending order of total xp. Can certainly add an option to do ascending order if thats something we want.
4. Please share a design mockup for this "Reset All Filters" option as well. 🙏

[dan13ram]

Sharing some suggestions from Hammad here:

Also feel like the UX might be better if it was a floating sidebar on desktop and a collapsible section on mobile.
Also would be nice to be able to filter by DAO membership, could replace timezone for that.

[davort]

Thanks for bringing more clarity around 1 & 2 @dan13ram 👍
I appreciate your caring about keeping things consistent. You have goods instinct, and props for that. The problem is at the design level, so thanks for letting me know about this. Not a big issue, but also very easy to fix, and we'll do that (in good time).

3. XP "descending" (default) and "ascending" sounds like a good starting point.
4. I will make some adjustments to the mockup, and then share it with you.

[davort]

Also @dan13ram thanks for passing forward Hammad's suggestions!

If I'm interpreting his thinking correctly, and try to express it as a "job story", it might look something like this

When I scroll through the results, I want to be able to adjust my filter selections on the fly so that I can be more efficient when searching.

or

When I scroll through the results, I want to see what filters are currently active, so that I can mentally connect the input and the output of the search criteria.

This way, we can focus on desired outcomes, instead of solutions—WHY? instead of HOW?—and proceed to find an optimal solution, considering the larger context, which this particular UI is a small part of.

It's very valuable, and I agree with this idea, so let me come back with a proposal that will hopefully be technically feasible, as well as usable!

---

The part about replacing "time zone" with "DAO membership" is something Hammad probably has a better idea about, in terms of how useful it might be. If you're fine with that too, let's make it so. Let me know, please ;)