TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

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

111 pointsby ajusaover 3 years ago
Hello HN! I&#x27;ve been playing a lot with <a href="https:&#x2F;&#x2F;hyperscript.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hyperscript.org&#x2F;</a> 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&#x27;s very easy.<p>The goal here wasn&#x27;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!

19 comments

jaidhyaniover 3 years ago
This is awesome, but there&#x27;s a slight bug in this implementation: Wordle won&#x27;t count additional instances of a letter as wrong-position, it&#x27;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.<p>I actually made the same mistake in a Wordle solver I was writing recently - it&#x27;s easy to miss, since Wordle doesn&#x27;t make this explicit and you have to infer it yourself.
评论 #30086694 未加载
评论 #30088140 未加载
aldebranover 3 years ago
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.<p>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.
评论 #30090660 未加载
评论 #30093578 未加载
huhtenbergover 3 years ago
Not take away from the brevity of the code, but these 60 lines translate into 168KB of JavaScript.
评论 #30087534 未加载
评论 #30088950 未加载
d--bover 3 years 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.
aloknnikhilover 3 years ago
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.<p>But pretty neat implementation otherwise. Awesome work!
评论 #30089776 未加载
评论 #30089355 未加载
martini333over 3 years ago
Does not check for real words.
评论 #30086518 未加载
madhatoover 3 years ago
I made a simple Wordle clone in ~70 lines without using Hyperscript.<p><a href="https:&#x2F;&#x2F;dougmcleod.ca&#x2F;share&#x2F;wordle.html" rel="nofollow">https:&#x2F;&#x2F;dougmcleod.ca&#x2F;share&#x2F;wordle.html</a>
dane-pgpover 3 years ago
This isn&#x27;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!
foucover 3 years ago
I&#x27;m confused. Hyperscript is supposed to be an alternative way to writing JSX, good for skipping the babel&#x2F;transpile step. Such as the React h() function. For example:<p><pre><code> h(&#x27;header&#x27;, { id: &#x27;my-header&#x27;, className: &#x27;header&#x27; }, h(&#x27;div&#x27;, { className: &#x27;logo&#x27; }, h(&#x27;a&#x27;, { href: &#x27;&#x2F;&#x27; }, &#x27;mtsknn.fi&#x27;) ) ) </code></pre> Hyperscript.org doesn&#x27;t seem to be related to this at all?<p><a href="https:&#x2F;&#x2F;mtsknn.fi&#x2F;blog&#x2F;hyperscript-hyperior-alternative-to-jsx&#x2F;" rel="nofollow">https:&#x2F;&#x2F;mtsknn.fi&#x2F;blog&#x2F;hyperscript-hyperior-alternative-to-j...</a> <a href="https:&#x2F;&#x2F;dev.to&#x2F;fromaline&#x2F;hyperscript-the-hidden-language-of-react-3d1f" rel="nofollow">https:&#x2F;&#x2F;dev.to&#x2F;fromaline&#x2F;hyperscript-the-hidden-language-of-...</a>
评论 #30090094 未加载
rkimbover 3 years ago
Nice work! I spent some time playing with this today and used it to build a solver algorithm. It&#x27;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.<p>Though not enforced by the Hyperwordle clone, the script plays the game on &quot;hard&quot; 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!<p>Anyone have a better algo yet? <a href="https:&#x2F;&#x2F;github.com&#x2F;rgkimball&#x2F;wordlebot" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;rgkimball&#x2F;wordlebot</a>
tardypover 3 years ago
Wordle will become the new todolist
e12eover 3 years ago
Nice. Is there a link to the 60 (63) lines of source code? It&#x27;s not obvious on mobile at least?<p>Ed, nevermind:<p>&gt; I highly suggest going to the site and viewing the source!<p>For chrome on Android:<p><pre><code> view-source:https:&#x2F;&#x2F;arhamjain.com&#x2F;hyperwordle&#x2F;</code></pre>
olah_1over 3 years ago
&gt; build 80% of Wordle in a different language<p>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.<p>I will dig into yours and see how it can be adapted to different languages too :)
评论 #30090358 未加载
recursivedoubtsover 3 years ago
holy smokes, that&#x27;s some seriously sweet hyperscript
_Bruno42over 3 years ago
Doesn&#x27;t work for me, getting a JS error when I&#x27;m entering a word:<p>hyperscript.org@0.9.4:1 &#x27;first &lt;:empty&#x2F;&gt; in first .guess&#x27; is null
phkahlerover 3 years ago
Doesnt validate input as words,
jFriedensreichover 3 years ago
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.
评论 #30101214 未加载
评论 #30089274 未加载
stefsover 3 years ago
it&#x27;s buggy and accepts bogus words
pygy_over 3 years ago
Hyperscript already has an established meaning in this space, as a pure JS-based syntax alternative to JSX.<p>See <a href="https:&#x2F;&#x2F;github.com&#x2F;hyperhype&#x2F;hyperscript" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;hyperhype&#x2F;hyperscript</a> and all its descendants, like Mithril, HyperApp or Sinuous.<p>Could you please think of another name ?
评论 #30088838 未加载
评论 #30088795 未加载