add a shadow of the target in the output box

akshayravikumar / TeXnique

A LaTeX Typesetting Game

https://texnique.xyz

MIT License

243 stars 34 forks source link

add a shadow of the target in the output box #21

Closed christianp closed 5 years ago

christianp commented 5 years ago

It's hard to spot when a tiny error such as spacing means your output isn't the same as the target.

This commit adds a faded rendering of the target in the output box, so you can spot misaligned bits.

fortenforge commented 5 years ago

Cool idea! My initial thoughts after playing with this a little bit:

I think the choice of yellow is a little harsh on the eyes. Maybe red with not 100% opacity?

The fact that the formulas are centered because of display mode really hurts the utility of this. A misalignment of one symbol kinda smears the yellow everywhere:

Here's another example:

I'm not sure quite how to fix this though. It certainly doesn't hurt, so I can merge this PR if we change the color.

christianp commented 5 years ago

I changed the colour and forgot to commit it! Grey with low opacity works OK.

I agree about the centering. This thing is most useful when you're only a little bit off, so maybe it should only be shown when the difference is below a certain threshold?

fortenforge commented 5 years ago

The gray looks a lot better, thanks! It is still a little distracting though. I think we should reduce the opacity a little, and as you say, either only show it when the difference is below a threshold or include a checkbox that toggles in on or off. I think the latter might be easier to make a good experience. I can take a stab at this sometime this weekend.

fortenforge commented 5 years ago

Fixes #12