chanind / hanzi-writer

Chinese character stroke order animations and practice quizzes
https://hanziwriter.org
MIT License
3.44k stars 534 forks source link

The stroke color changes when writing a stroke during a highlight. #292

Closed GnitLores closed 1 year ago

GnitLores commented 1 year ago

First of all, thanks for this amazing tool! I have run into the issue that when you complete a stroke at the same time a highlight occurs, a visual bug frequently happens. I guess what's happening is that the highlight stays permanently superimposed over the stroke. Right now I am using the hacky solution of just making the stroke and highlight colors the same so that the bug is invisible, but this has the side effect of making the highlight on complete invisible as well. An additional issue is that the "highlightCompleteColor" setting seems to have no effect.

Here is an example with a light blue stroke color and white highlight color. The resulting strokes permanently end up in multiple different shades of blue. hanzi writer bug

chanind commented 1 year ago

That does look pretty messed up! Are there any actions you can take to get the bug to show appear, or does it just happen at random? What device/browser is it? Any tips you can give to help reproduce the bug would help a lot for debugging

chanind commented 1 year ago

I see what you mean about highlightCompleteColor being ignored. I'm surprised nobody has reported this before. It also seems to have slipped through tests too, so I'll try to get that fixed. Sorry about that!

GnitLores commented 1 year ago

Thank you for the quick response. I am using chrome on desktop. In order to show the next stroke to write, I am triggering a highlight for the next stroke a short delay (e.g. 500ms) after both starting the quiz and after a correct stroke using the onCorrectStroke callback. The timing is a bit precise, but if you write at approximately the same time as the highlight happens, the bug occurs very frequently.

It probably doesn't matter, but in the above image I am using the Japanese character set and the following settings: width: 300, height: 300, padding: 0, leniency: 1.5, showCharacter: false, showOutline: true, showHintAfterMisses: 3, strokeHighlightSpeed: 1, strokeColor: "#38BDF8", highlightColor: "#FFFFFF", outlineColor: "#6B7280", drawingColor: "#38BDF8",

chanind commented 1 year ago

I think I see the bug you're running into, it looks like if you trigger multiple highlights at the same time then the animation for the in-progress one cancels and doesn't finish. Ideally these stroke highlights should be able to happen in parallel, but regardless they shouldn't just freeze like is happening now.

The obvious fix is to have the highlight disappear if it gets interrupted rather than just hang out there like it does currently. Longer-term, I'll try to figure out what's going on that's keeping the highlights from being able to happen concurrently. That might require some more refactoring / investigation though, so I'll push the quick fix for now (which is what the behavior should be anyway tbh)

chanind commented 1 year ago

:tada: This issue has been resolved in version 3.4.2 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

GnitLores commented 1 year ago

That's great! I can confirm that things appear to be working as intended now, and it looks a lot better. Thanks for looking into these issues so quickly.