Show HN: A simple Wordle clone in 60 lines, using Hyperscript

Hello HN! I've been playing a lot with https://hyperscript.org/ recently (not to be confused with the other hyperhype hyperscript). I threw together a quick Wordle clone in an evening to see what it would look like using this language. The main functionality that is missing is checking for invalid words. The word dictionary is also very small, so it's very easy.

The goal here wasn't really to create a good version of Wordle, it was to build 80% of Wordle in a different language to see what it looks like. Turns out, it looks pretty good! Stuff like using CSS rule precedence to highlight the squares, CSS selectors to figure out which key to highlight, and using the DOM to keep state are all really natural in Hyperscript. I highly suggest going to the site and viewing the source!

Show HN: A simple Wordle clone in 60 lines, using Hyperscript
arhamjain.com

holy smokes, that's some seriously sweet hyperscript

This is awesome, but there's a slight bug in this implementation: Wordle won't count additional instances of a letter as wrong-position, it'll just flag them as wrong. For example, if the word is TRACE, and I guess TRACT, the first T will be green, but the second T should be black, not yellow. In this implementation, at the moment, TRACT would return GGGGY, but in Wordle it would be GGGGB.

I actually made the same mistake in a Wordle solver I was writing recently - it's easy to miss, since Wordle doesn't make this explicit and you have to infer it yourself.

Wow, first time I see hyperscript. It is so remote from what I am used to, I have no idea how to read the code in details, but what it does is completely self-explanatory.

Oh wow, I never noticed that myself. I'll fix it once I'm at my computer, thanks for pointing it out! The fix will probably be something like

    if letter not in (.bg-warning in first .guess).innerText then add .bg-warning

Haven't tested as I'm on my phone, but seems like a simple enough fix.