search

monkeytypegame / monkeytype

The most customizable typing website with a minimalistic design and a ton of features. Test yourself in various modes, track your progress and improve your speed.
https://monkeytype.com/
GNU General Public License v3.0
15.72k stars 2.39k forks source link

Highlight mode inconcistencies #5557

Closed mitjans closed 4 months ago

mitjans commented 4 months ago

Did you clear cache before opening an issue?

Is there an existing issue for this?

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

Yes

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

Yes

Account name

cmitjans

Account config

No response

Current Behavior

I will use the theme "shadow" to showcase the inconsistencies. When using this theme, correctly typed words should disappear after some seconds. This behavior does not work as expected with different highlight modes.

Here's the current behavior for different highlight modes:

At first sight, it's easy to think that this is a theme error, but it's not. After further investigation, I've noticed that the code treats "highlighted" and "correct" words the same, which IMO is the root of the problem. To further understand this, look at the following video with theme "shadow" and highlight mode "word":

https://github.com/monkeytypegame/monkeytype/assets/7190600/da59a797-40cc-4e87-99b1-eaced9cfe268

Because Monkeytype treats "highlighted" = "correct", we have this kind of problem where the current highlighted word disappears even if we have not finished typing the word.

This problem became clear after the commit cfbac0f15 3 weeks ago. Before this commit, when highlight mode was "next_word"/"next_two_words"/"next_three_words", correctly typed words kept highlighted after typing them. This is consistent with the HTML class associated with those letters ("correct", [but not "highlighted" ⚠️ ]).

After said commit, when words are correctly typed and you are using one of the "next" word highlighting mode, words are not treated as correct anymore (even if they are). In other words, the HTML class "correct" is removed from them.

Notice though that this behavior does not apply with the highlight mode "letter", which is an inconsistency.

Proposed solution

Maybe by creating a new HTML class "highlighted" we can solve this problem. Visually, "highlighted" will behave exactly the same as "correct" HTML class. I'm not 100% sure this will solve all problems because maybe users want to only "highlight" the current (and next) words (and not correctly typed ones).

Expected Behavior

No response

Steps To Reproduce

No response

Environment

No response

Anything else?

No response

Miodec commented 4 months ago

Yeah this looks like an issue with the shadow theme to me. Testing in the default theme and everything looks as intended.

mitjans commented 4 months ago

I spotted this because all of a sudden correct words were not highlighted anymore in any theme after the commit mentioned.

I personally would like the old behavior back, where the correctly written words are kept highlighted EVEN IF I have the "next word" highlight mode on.

Would it be possible to bring this behavior back if we tag this issue as a "theme issue"? 🥺

mitjans commented 4 months ago

Also, why does "letter" highlight mode keep correctly written words highlighted but "word"/"next word"/etc don't? This looks like an issue to me.

Miodec commented 4 months ago

Also, why does "letter" highlight mode keep correctly written words highlighted but "word"/"next word"/etc don't? This looks like an issue to me.

Thats just a deseign choice. Letter is meant to emulate real typing, while all the word highlight modes are emulating the behavior of other typing sites (10FF, TR) after users requested it. (Typeracer eneded up adding a 'letter highlight mode' after monkeytype got popular)

Miodec commented 4 months ago

Ill just add a special case to the dehighlighting code.

mitjans commented 4 months ago

Thats just a deseign choice. Letter is meant to emulate real typing, while all the word highlight modes are emulating the behavior of other typing sites (10FF, TR) after users requested it.

What if we create a new highlight setting "Keep typed words highlighted" (false by default)? This would allow us to bring the old behavior back without breaking the current one.

Miodec commented 4 months ago

Thats just a deseign choice. Letter is meant to emulate real typing, while all the word highlight modes are emulating the behavior of other typing sites (10FF, TR) after users requested it.

What if we create a new highlight setting "Keep typed words highlighted" (false by default)? This would allow us to bring the old behavior back without breaking the current one.

I don't think its necessary to add such specific setting, most people wont use it. I fixed shadow theme for you, should be live now.

mitjans commented 4 months ago

After quickly testing TR and 10FF, it looks like both have a way of differentiating typed words and highlighted words.

10FF:

TR:

Looks like the default in both sites is to have a different style for already typed words. This is only possible in MonkeyType if you use "letter" highlight mode, but then you loose the possibility to have current word and next words highlighted.

image image
mitjans commented 4 months ago

Sorry to insist on this, but it looks like the theme "rainbow trail" has the same problem where the word disappears before being typed. I feel like adding a theme check is not enough because themes will depend on the "correct" HTML class.

https://github.com/monkeytypegame/monkeytype/assets/7190600/dee3e3db-d545-483f-a77a-af87280f5664

I can try to think of a solution that doesn't imply creating a new setting, but I'm not sure I understand the expected behavior on each of the highlighting modes.