xsalazar / emoji-kitchen

🧑‍🍳 This repository contains the source code for the website https://emojikitchen.dev and allows for quick and easy browsing of the over 100,000 supported emoji mashups as part of Google's Emoji Kitchen.
https://emojikitchen.dev/
1.21k stars 77 forks source link

Parity between the effect of clicking the selected emoji on the left and right side #746

Open relsqui opened 1 week ago

relsqui commented 1 week ago

When I have a combination up and I click the selected right-side emoji (next to the search bar), it randomizes just the right side. So I expected that when I clicked the selected left-side emoji it would randomize just the left side, but it doesn't; it randomizes the left side and also wipes out the right side. Maybe it's just randomizing the left and hitting a combination that wouldn't work on the right? But I would expect it to limit to available combinations, like the right side does.

I don't know if this is a bug or a feature request, because I don't know how it's intended to work, but it was unexpected and confusing.

xsalazar commented 1 week ago

Hey @relsqui! Thanks for taking the time to leave feedback, and I agree it's confusing. This is roughly related to the request in #690

Essentially, the limitation comes from not every visible emoji pair being supported. So if you consider the emoji on the left side the "base" emoji, then the right list will only show the valid combinations for that base. If you select a particular emoji from the right side, it's guaranteed to be valid, so all combinations work.

However, if you want to use the emoji from the right side that you just selected as a new base, then it's not guaranteed that everything on the left side will be a proper combination.

I appreciate your input, and it's a tough problem to solve with the way the site is currently designed in the UI. These open issues make it easier for me to understand what small improvements I can make if multiple people bring them up!

relsqui commented 1 week ago

Totally fair. :) I suspected it was something like that, and I guess really it's the difference between the left and right side that's not visible -- it looks symmetrical, but it's not really.

Also, wanted to say that I went poking through the code to see if I could figure out how to do something similar and found it really approachable even for a React noob. Really nice job on that. :D

xsalazar commented 1 week ago

My initial thinking was since the right side is disabled by default that folks would naturally click the left first, see the right side open up the possibilities and understand the difference. But that was all before I implemented the randomizer, and I suspect most people click the dice by default now 🎲

One way to get at what you're describing would be to dynamically switch the "base" emoji based on if you have two selected and you select one from the "other" side -- but then there would be weird UI state to keep aligned since you'd need properly disable anything that's not a valid pair.

Other sites get around this by only have one list, but then that pushes the user to select the half of equation they want to modify. So either way, users are going to have to make a decision somewhere