Changelog

Word hints 2024-05-03

Sketch and Guess now has word hints!

The solution here is pretty hacky, but it does work, and even covers a few more edge cases than the old Elm code.

The problem is that there isn’t a nice way to display anything inside an input field. HTML inputs allow pattern validation, but the pattern isn’t shown to the user. What’s worse is an invalid input prevents the form being submitted, so I couldn’t use it even if the pattern was visible, as someone might want to just send a chat message as well as guessing the word.

My solution is to wrap the input in another element, and then use ::after to align the hint over the top. If all the hints were small, this would be enough…however Sketch and Guess has some pretty long “words” that people can guess (like “Lord of the Rings” or “Guardians of the Galaxy”). To solve this I check the width of what the user has typed (which requires its own workaround), and when that becomes wider than the input, offset the hint by the difference in characters (another workaround).

A final problem (that the old Elm code didn’t solve) was that people are allowed to move the caret around inside inputs (the scoundrels!). There are definitely ways this fix could improve, but for now what happens is an offset is updated when the input changes, and then that is used as a sort of hacky manual scrollbar to move the hint forwards or backwards with the caret.