Skip to content

impr: enable dots typed effect for ligature languages (@byseif21)#7458

Merged
Miodec merged 20 commits intomonkeytypegame:masterfrom
byseif21:fix/dots-effect
Feb 28, 2026
Merged

impr: enable dots typed effect for ligature languages (@byseif21)#7458
Miodec merged 20 commits intomonkeytypegame:masterfrom
byseif21:fix/dots-effect

Conversation

@byseif21
Copy link
Copy Markdown
Contributor

@byseif21 byseif21 commented Jan 28, 2026

fix the limitation of dots effect wouldn't work correctly for ligature-based languages cuz connected letters cannot be rendered as individual dots.

before it was not worth the fix for the theme only now after the new typed effect feat #7360 i think this needed.

  • introduces a small helper that breaks ligatures only after a word is finished, allowing the dots effect to render correctly while keeping ligatures intact during typing.

  • runs only when needed (on word completion or when the typed effect is switched to dots) and avoids any continuous checks or performance overhead.

related #6472

@monkeytypegeorge monkeytypegeorge added the frontend User interface or web stuff label Jan 28, 2026
@byseif21 byseif21 marked this pull request as ready for review January 28, 2026 15:20
@github-actions github-actions Bot added the waiting for review Pull requests that require a review before continuing label Jan 28, 2026
@byseif21 byseif21 force-pushed the fix/dots-effect branch 2 times, most recently from ded97b2 to fb8df2e Compare January 28, 2026 16:18
Comment thread frontend/src/ts/test/break-ligatures.ts Outdated
Comment thread frontend/src/ts/test/break-ligatures.ts Outdated
"colorfulMode",
"showAllLines",
"fontSize",
"fontFamily",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now run updateWordWrapperClasses unnecessarily when a user changes fontFamily.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the thing is I think I still need some of the layout updates it triggers when fontFamily changes. I’ll give it some manual testing to see

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we do this?

if (key !== "fontFamily"){
  updateWordWrapperClasses();
}
Ligatures.update(key, wordsEl);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kinda feel like fontFamily should also trigger updateWordWrapperClasses but can’t really prove it visually enough till now, so yeah ok I’ll leave it limited for now

if (shouldReset) {
words.forEach(reset);
}
words.forEach(applyIfNeeded);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check if ok? or heavy and should we do batching instead?

Copy link
Copy Markdown
Contributor

@Leonabcd123 Leonabcd123 Jan 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd do this:

words.forEach((word) => {
  if (shouldReset) reset(word);
  applyIfNeeded(word);
})

(not tested)

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i meant performance wise

Copy link
Copy Markdown
Contributor

@Leonabcd123 Leonabcd123 Jan 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Performance wise we're running on the words twice when shouldReset is true, while we can do it one pass. I don't see why go with this approach rather than doing it in one loop.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you think about batching then? too much or worth it?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd say it's worth it.

Comment thread frontend/src/ts/test/break-ligatures.ts Outdated
Comment thread frontend/src/ts/test/break-ligatures.ts Outdated
inline-flex/forced nowrap caused overflow when dots appeared, e.g very long words in Custom mode
- so small hack for that,  we detect actual multi-line wrapping by comparing per-letter top positions;
lock width only for single-line words to stabilize dot spacing, and needs-wrap for multi-line words to preserve natural wrapping
Copilot AI review requested due to automatic review settings February 11, 2026 16:11
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

@github-actions github-actions Bot removed the waiting for review Pull requests that require a review before continuing label Feb 27, 2026
@Miodec Miodec requested a review from Copilot February 27, 2026 14:07
@github-actions github-actions Bot added the waiting for review Pull requests that require a review before continuing label Feb 27, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

Comment thread frontend/src/ts/test/break-ligatures.ts
Comment thread frontend/src/styles/test.scss Outdated
Comment thread frontend/src/styles/test.scss Outdated
Comment thread frontend/src/styles/test.scss Outdated
@Miodec Miodec added the waiting for update Pull requests or issues that require changes/comments before continuing label Feb 27, 2026
@github-actions github-actions Bot removed the waiting for update Pull requests or issues that require changes/comments before continuing label Feb 27, 2026
@Miodec Miodec merged commit 658390a into monkeytypegame:master Feb 28, 2026
13 checks passed
@byseif21 byseif21 deleted the fix/dots-effect branch March 3, 2026 17:59
IliyaZinoviev pushed a commit to IliyaZinoviev/monkeytype that referenced this pull request Apr 24, 2026
…nkeytypegame#7458)

fix the limitation of dots effect wouldn't work correctly for
ligature-based languages cuz connected letters cannot be rendered as
individual dots.

before it was not worth the fix for the theme only now after the new
typed effect feat monkeytypegame#7360 i think this needed.

* introduces a small helper that breaks ligatures only after a word is
finished, allowing the dots effect to render correctly while keeping
ligatures intact during typing.

* runs only when needed (on word completion or when the typed effect is
switched to dots) and avoids any continuous checks or performance
overhead.

related monkeytypegame#6472
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

frontend User interface or web stuff waiting for review Pull requests that require a review before continuing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants