Show HN: A simple Wordle clone in 60 lines, using Hyperscript (opens in new tab)

(arhamjain.com)

111 pointsajusa4y ago49 comments

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)

111 pointsajusa4y ago49 comments

49 comments

41 comments · 19 top-level

huhtenberg4y ago· 5 in thread

Not take away from the brevity of the code, but these 60 lines translate into 168KB of JavaScript.

dane-pgp4y ago

Wait until you find out how big the browser that runs that code is!

ivanbakel4y ago

This is a blithe statement - the browser isn't downloaded whenever a user navigates to the page. 1/6th of a MB for a page this simple is pretty substantial.

antihero4y ago

Do you download the browser on every request?

Of course 168kB is still nothing but your comparison is flawed.

2 more replies

irq-14y ago

_hyperscript_web.min.js is 84.1 KiB (86,093 bytes) and when zipped it's 22.1 KiB (22,641 bytes)

ajusaOP4y ago

Looks like they doubled the size by accident, in the network debugger the first is a 302 that resolves to the actual file. It shows 84kb twice because of that.

jaidhyani4y ago· 4 in thread

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.

ajusaOP4y ago

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.

anonymoushn4y ago

I don't think it's that simple. For HOUSE, guessing BEERS should get you WYWYW

Aethylia4y ago

I have been trying to figure this out myself. The algorithm I'm using is to colour yellow only if the count of that letter before that occurance in the guess, is less than the count of that letter in the target word.

1 more reply

xmonkee4y ago

Haha, I made the exact same mistake in my wordle solver. Well, not a mistake since that's what the worlde docs say.

jFriedensreich4y ago· 3 in thread

every key press takes 4 seconds to update the ui, if this is supposed to be a showcase for hyperscript, its not doing too well.

jFriedensreich4y ago

if it helps for reproducing: i pressed keys too fast wich was interpreted as a double tap in safari and triggered a zoom in. After zooming back to normal, the lag was even worse.

recursivedoubts4y ago

what machine/browser are you on?

the hyperscript runtime is defintely... pedestrian

jFriedensreich4y ago

i tried on ios safari, which is admittedly not a great browser

1 more reply

aldebran4y ago· 2 in thread

I found a bug. When there is a repeated character in the guess but not in the word, you’re given an incorrect color key.

E.g. Word was GROUP I guessed SPOON Output was green O at location 3 and yellow at 4. Happened for a couple more guesses making me think there is another O eventually to realize there are no more spots and it’s a bug.

ajusaOP4y ago

Sorry for that (and thanks to all the folks that pointed out the word matching code was wrong). I've pushed an updated version, it's 63 lines now.

Turns out, HN finds and reports bugs much faster than family and friends :)

joeframbach4y ago

wordle-play.com fails the test. wordlegame.org passes. Implementations disagree, but I agree with how you are defining it should work.

aloknnikhil4y ago· 2 in thread

On Safari on iOS, at least, typing fast will accidentally zoom into that part of the page instead of registering it as a character press.

But pretty neat implementation otherwise. Awesome work!

ajusaOP4y ago

Yep, I have the wrong meta tag I believe:

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

That should fix it, I'll push a new version after fixing the word matching issue others have pointed out. I underestimated Wordle's complexity :)

recursivedoubts4y ago

i see it slowing down on mobile safari as well

will be a great chance to optimize the hyperscript runtime for mobile

martini3334y ago· 2 in thread

Does not check for real words.

e67f70028a46fba4y ago

“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.”

ajusaOP4y ago

Yup, exactly. I've considered adding a bloom filter check for words but I've accomplished what I wanted to try out. Maybe if I'm ever interested in the future!

It'd be very easy to check against just a list of words, but that'd require more storage and be slower than a bloom filter.

pygy_4y ago· 2 in thread

Hyperscript already has an established meaning in this space, as a pure JS-based syntax alternative to JSX.

See https://github.com/hyperhype/hyperscript and all its descendants, like Mithril, HyperApp or Sinuous.

Could you please think of another name ?

anentropic4y ago

It seems to be this one:

https://github.com/bigskysoftware/_hyperscript

https://hyperscript.org/

but not sure it's anything to do with the OP though

pygy_4y ago

Look at the source, it is written with that language/framework.

I seems they want to pull a Substack. Color me unimpressed.

1 more reply

fouc4y ago· 1 in thread

I'm confused. Hyperscript is supposed to be an alternative way to writing JSX, good for skipping the babel/transpile step. Such as the React h() function. For example:

    h('header', { id: 'my-header', className: 'header' },
      h('div', { className: 'logo' },
        h('a', { href: '/' }, 'mtsknn.fi')
      )
    )

Hyperscript.org doesn't seem to be related to this at all?

https://mtsknn.fi/blog/hyperscript-hyperior-alternative-to-j... https://dev.to/fromaline/hyperscript-the-hidden-language-of-...

speg4y ago

You are correct. Hyperscript.org is a companion library to htmx; they are totally different from the JSX Hyperscript.

olah_14y ago· 1 in thread

> build 80% of Wordle in a different language

I have been trying to do the same thing! I was looking for projects on github that I could adapt to a new language. Sadly, most of them require a server. It seemed to me that this game could pretty easily just run on the client alone.

I will dig into yours and see how it can be adapted to different languages too :)

mcintyre19944y ago

I think wordle does just run indefinitely on the client. It has a word list in its JS which has the list of winning words in order, so you can see the upcoming ones. And the current word is somewhere in localstorage as well. Obviously not much fun if you poke around there too much, but my guess is it just checks the current date and indexes the words array and sets all the state from there.

d--b4y ago

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.

madhato4y ago

I made a simple Wordle clone in ~70 lines without using Hyperscript.

https://dougmcleod.ca/share/wordle.html

dane-pgp4y ago

This isn't just a beautiful demonstration of Hyperscript, it could also be a great introduction to what it can be like when writing for the web platform, or to coding in general. Well done!

rkimb4y ago

Nice work! I spent some time playing with this today and used it to build a solver algorithm. It's a greedy search through the possible combinations that prioritizes words based on letter frequency and uses the hints provided to whittle down the search space.

Though not enforced by the Hyperwordle clone, the script plays the game on "hard" mode by default where all letter hints must be included in subsequent guesses. Ironically, this constraint made the algorithm more efficient, easy mode tends to take longer and fail more frequently!

Anyone have a better algo yet? https://github.com/rgkimball/wordlebot

tardyp4y ago

Wordle will become the new todolist

e12e4y ago

Nice. Is there a link to the 60 (63) lines of source code? It's not obvious on mobile at least?

Ed, nevermind:

> I highly suggest going to the site and viewing the source!

For chrome on Android:

  view-source:https://arhamjain.com/hyperwordle/

recursivedoubts4y ago

holy smokes, that's some seriously sweet hyperscript

_Bruno424y ago

Doesn't work for me, getting a JS error when I'm entering a word:

hyperscript.org@0.9.4:1 'first <:empty/> in first .guess' is null

phkahler4y ago

Doesnt validate input as words,

stefs4y ago

it's buggy and accepts bogus words

j / k navigate · click thread line to collapse

49 comments

41 comments · 19 top-level

huhtenberg4y ago· 5 in thread

Not take away from the brevity of the code, but these 60 lines translate into 168KB of JavaScript.

dane-pgp4y ago

Wait until you find out how big the browser that runs that code is!

ivanbakel4y ago

This is a blithe statement - the browser isn't downloaded whenever a user navigates to the page. 1/6th of a MB for a page this simple is pretty substantial.

antihero4y ago

Do you download the browser on every request?

Of course 168kB is still nothing but your comparison is flawed.

2 more replies

irq-14y ago

_hyperscript_web.min.js is 84.1 KiB (86,093 bytes) and when zipped it's 22.1 KiB (22,641 bytes)

ajusaOP4y ago

Looks like they doubled the size by accident, in the network debugger the first is a 302 that resolves to the actual file. It shows 84kb twice because of that.

jaidhyani4y ago· 4 in thread

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.

ajusaOP4y ago

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.

anonymoushn4y ago

I don't think it's that simple. For HOUSE, guessing BEERS should get you WYWYW

Aethylia4y ago

1 more reply

xmonkee4y ago

Haha, I made the exact same mistake in my wordle solver. Well, not a mistake since that's what the worlde docs say.

jFriedensreich4y ago· 3 in thread

every key press takes 4 seconds to update the ui, if this is supposed to be a showcase for hyperscript, its not doing too well.

jFriedensreich4y ago

if it helps for reproducing: i pressed keys too fast wich was interpreted as a double tap in safari and triggered a zoom in. After zooming back to normal, the lag was even worse.

recursivedoubts4y ago

what machine/browser are you on?

the hyperscript runtime is defintely... pedestrian

jFriedensreich4y ago

i tried on ios safari, which is admittedly not a great browser

1 more reply

aldebran4y ago· 2 in thread

I found a bug. When there is a repeated character in the guess but not in the word, you’re given an incorrect color key.

ajusaOP4y ago

Sorry for that (and thanks to all the folks that pointed out the word matching code was wrong). I've pushed an updated version, it's 63 lines now.

Turns out, HN finds and reports bugs much faster than family and friends :)

joeframbach4y ago

wordle-play.com fails the test. wordlegame.org passes. Implementations disagree, but I agree with how you are defining it should work.

aloknnikhil4y ago· 2 in thread

On Safari on iOS, at least, typing fast will accidentally zoom into that part of the page instead of registering it as a character press.

But pretty neat implementation otherwise. Awesome work!

ajusaOP4y ago

Yep, I have the wrong meta tag I believe:

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

That should fix it, I'll push a new version after fixing the word matching issue others have pointed out. I underestimated Wordle's complexity :)

recursivedoubts4y ago

i see it slowing down on mobile safari as well

will be a great chance to optimize the hyperscript runtime for mobile

martini3334y ago· 2 in thread

Does not check for real words.

e67f70028a46fba4y ago

“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.”

ajusaOP4y ago

Yup, exactly. I've considered adding a bloom filter check for words but I've accomplished what I wanted to try out. Maybe if I'm ever interested in the future!

It'd be very easy to check against just a list of words, but that'd require more storage and be slower than a bloom filter.

pygy_4y ago· 2 in thread

Hyperscript already has an established meaning in this space, as a pure JS-based syntax alternative to JSX.

See https://github.com/hyperhype/hyperscript and all its descendants, like Mithril, HyperApp or Sinuous.

Could you please think of another name ?

anentropic4y ago

It seems to be this one:

https://github.com/bigskysoftware/_hyperscript

https://hyperscript.org/

but not sure it's anything to do with the OP though

pygy_4y ago

Look at the source, it is written with that language/framework.

I seems they want to pull a Substack. Color me unimpressed.

1 more reply

fouc4y ago· 1 in thread

I'm confused. Hyperscript is supposed to be an alternative way to writing JSX, good for skipping the babel/transpile step. Such as the React h() function. For example:

    h('header', { id: 'my-header', className: 'header' },
      h('div', { className: 'logo' },
        h('a', { href: '/' }, 'mtsknn.fi')
      )
    )

Hyperscript.org doesn't seem to be related to this at all?

https://mtsknn.fi/blog/hyperscript-hyperior-alternative-to-j... https://dev.to/fromaline/hyperscript-the-hidden-language-of-...

speg4y ago

You are correct. Hyperscript.org is a companion library to htmx; they are totally different from the JSX Hyperscript.

olah_14y ago· 1 in thread

> build 80% of Wordle in a different language

I will dig into yours and see how it can be adapted to different languages too :)

mcintyre19944y ago

d--b4y ago

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.

madhato4y ago

I made a simple Wordle clone in ~70 lines without using Hyperscript.

https://dougmcleod.ca/share/wordle.html

dane-pgp4y ago

This isn't just a beautiful demonstration of Hyperscript, it could also be a great introduction to what it can be like when writing for the web platform, or to coding in general. Well done!

rkimb4y ago

Anyone have a better algo yet? https://github.com/rgkimball/wordlebot

tardyp4y ago

Wordle will become the new todolist

e12e4y ago

Nice. Is there a link to the 60 (63) lines of source code? It's not obvious on mobile at least?

Ed, nevermind:

> I highly suggest going to the site and viewing the source!

For chrome on Android:

  view-source:https://arhamjain.com/hyperwordle/

recursivedoubts4y ago

holy smokes, that's some seriously sweet hyperscript

_Bruno424y ago

Doesn't work for me, getting a JS error when I'm entering a word:

hyperscript.org@0.9.4:1 'first <:empty/> in first .guess' is null

phkahler4y ago

Doesnt validate input as words,

stefs4y ago

it's buggy and accepts bogus words

j / k navigate · click thread line to collapse