[HN Gopher] Show HN: A simple Wordle clone in 60 lines, using Hy...
___________________________________________________________________
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!
Author : ajusa
Score : 93 points
Date : 2022-01-26 14:26 UTC (8 hours ago)
(HTM) web link (arhamjain.com)
(TXT) w3m dump (arhamjain.com)
| jFriedensreich wrote:
| 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.
| recursivedoubts wrote:
| what machine/browser are you on?
|
| the hyperscript runtime is defintely... _pedestrian_
| jFriedensreich wrote:
| i tried on ios safari, which is admittedly not a great
| browser
| ajusa wrote:
| Yeah, that must be a Safari thing. I pulled out my Nexus 5
| (circa 2013) and everything feels instant. I don't have any
| working iOS devices lying around to test on unfortunately.
| superlopuh wrote:
| My Firefox on specced out Intel MBP lags noticeably
| tardyp wrote:
| Wordle will become the new todolist
| rkimb wrote:
| Nice work! I spent some time playing with this today and used it
| to build a solver algorithm. It's a brute force 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
| phkahler wrote:
| Doesnt validate input as words,
| stefs wrote:
| it's buggy and accepts bogus words
| recursivedoubts wrote:
| holy smokes, that's some seriously sweet hyperscript
| martini333 wrote:
| Does not check for real words.
| e67f70028a46fba wrote:
| "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."
| ajusa wrote:
| 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.
| _Bruno42 wrote:
| 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
| aldebran wrote:
| 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.
| ajusa wrote:
| 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 :)
| d--b wrote:
| 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.
| pygy_ wrote:
| 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 ?
| [deleted]
| anentropic wrote:
| 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_ wrote:
| Look at the source, it is written with that
| language/framework.
|
| I seems they want to pull a Substack. Color me unimpressed.
| speg wrote:
| He used the framework, not named it.
| pygy_ wrote:
| Oh, my bad... Sorry for the noise.
|
| @dang if you happen to read this, can you hide/flag the
| thread ?
| aloknnikhil wrote:
| 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!
| ajusa wrote:
| 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 :)
| recursivedoubts wrote:
| i see it slowing down on mobile safari as well
|
| will be a great chance to optimize the hyperscript runtime for
| mobile
| olah_1 wrote:
| > 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 :)
| mcintyre1994 wrote:
| 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.
| e12e wrote:
| 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/
| [deleted]
| [deleted]
| jaidhyani wrote:
| 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.
| ajusa wrote:
| 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.
| anonymoushn wrote:
| I don't think it's that simple. For HOUSE, guessing BEERS
| should get you WYWYW
| Aethylia wrote:
| 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.
| xmonkee wrote:
| Haha, I made the exact same mistake in my wordle solver. Well,
| not a mistake since that's what the worlde docs say.
| huhtenberg wrote:
| Not take away from the brevity of the code, but these 60 lines
| translate into 168KB of JavaScript.
| dane-pgp wrote:
| Wait until you find out how big the browser that runs that code
| is!
| antihero wrote:
| Do you download the browser on every request?
|
| Of course 168kB is still nothing but your comparison is
| flawed.
| recursivedoubts wrote:
| hyperscript is ~22k gziped and cached after the first
| request
|
| the size is not an issue
|
| now, the runtime on the other hand...
| teaearlgraycold wrote:
| Don't give web developers any ideas.
| ivanbakel wrote:
| 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.
| irq-1 wrote:
| _hyperscript_web.min.js is 84.1 KiB (86,093 bytes) and when
| zipped it's 22.1 KiB (22,641 bytes)
| ajusa wrote:
| 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.
| dane-pgp wrote:
| 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!
| fouc wrote:
| 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-...
| speg wrote:
| You are correct. Hyperscript.org is a companion library to
| htmx; they are totally different from the JSX Hyperscript.
___________________________________________________________________
(page generated 2022-01-26 23:01 UTC)