Creating a Korean Version of Wordle

My Korean Version of Wordle (한글dle) is available to play at: https://hanguldle.vercel.app/

I'm not sure when Wordle blew up, but chances are you've seen these arrangements of black, green, and yellow boxes around somewhere before. This basically shows your result for the daily Wordle puzzle to anyone who's interested. If you don't understand what this means, do try out today's Wordle and press the share button. You'll understand what this means immediately after.

⬛️⬛️⬛️⬛️⬛️
🟨⬛️⬛️🟨⬛️
🟨🟨🟩⬛️🟨
🟩🟩🟩⬛️🟩
🟩🟩🟩⬛️🟩
🟩🟩🟩🟩🟩

This method of showing how well you've performed in the daily Wordle has taken the world by storm, in my opinion, due to these key reasons - only people who play Wordle will get what this means (exclusivity), it's a compact way of showing how well you've done without spoiling the daily puzzle, and it's shareable on every social media platform you can think of.

So while I was taking my online Korean class, my teacher offhandedly asked how long it would take to create a Korean version of Wordle. She lamented that the only version out there was not good due to how the way an answer may be interpreted differently by different people due to how Korean letters are formed. For example, an answer of "ㅎ ㅏ ㄱ ㄱ ㅣ" could be interpreted as 학기 (correct) or 하끼 (wrong).

The system for Wordle seemed easy enough to replicate, so I told her that one day spent programming while concentrated would be enough. And of course, I couldn't say something like that without substantiating it, so I decided to build it. And I was right, I managed to build a pretty good prototype in just a day.

The Core Issue: Disassembling and Assembling Korean Characters

Unlike the Latin alphabet, Korean characters are formed by putting together different symbols. At the same time, it's very easy to pick up since each part has a fixed sound linked to it. It's so easy that many YouTube tutorials claim to be able to teach you everything in just 15 minutes, which is probably more possible than you think.

Let's take a look at a few examples.

ㅁ(m) + ㅏ(a) = 마(ma)
ㅁ(m) + ㅏ(a) + ㄴ(n) = 만(man)
ㅁ(m) + ㅏ(a)+ ㄹ(r) + ㅣ(i) + ㅇ(-) + ㅗ(o) = 마리오 (Mario)

In the first example, the resultant letter has two components to it "m" and "a". While in the second example, the resultant letter has 3 components in it. And in the final example, we have 3 characters resulting from 6 components.

To make Wordle work with Korean, there needs to be a way of disassembling and assembling these characters in a logical fashion. Thankfully, a quick search brought me to an npm package called hangul-js which could do just that. With this problem solved, I could now be assured that a Korean Wordle with actual Korean words is possible to make.

Coming up with a Korean-specific Wordle System

image.png

To be honest, my implemented Korean Wordle system is very similar to the original Wordle's system. The only difference is that the user gets to see the assembled characters instead of a bunch of random letter components scattered everywhere. In this example, the word 살인 is made out of these six components: ㅅ ㅏ ㄹ ㅇ ㅣ ㄴ. The small green box represents that the letter component is in the correct place, while the small orange box represents that the letter component is present in the final word but is in the wrong place.

image.png

And eventually, your aim is to reach this state, which means you've guessed the word successfully. The answer to today's puzzle is "항공", which means "airline" in Korean.

With this system, you get to see the actual word compound and you don't have to make any guesses as to how the word should be assembled like in the other Korean Wordle version.

Getting the Word Lists

I told my teacher that the hardest part of making Wordle would be coming up with the word lists, and I still stand by it. Although, thanks to an online dictionary with a really useful advanced search tool, I managed to scrape about 15k words that could be entered into the system and 5k words that would come up as potential daily puzzles every day.

I used Puppeteer to do the scraping for the word list.

Implementing, Deployment, and Everything Else

I used a stack that I was very familiar with, namely React + Next.JS + TailwindCSS, with deployment handled by Vercel. Thanks to my familiarity with the tools, everything came together pretty smoothly and I managed to get out a pretty good-looking prototype in just over a day.

https://files.peakd.com/file/peakd-hive/kephler/23vsqueYye2J9zSt9QMuCyw5rquCEh4v9Mq4D833uRPKw9KcsRbNp9vn2GNozoXnBpKhw.pnghttps://files.peakd.com/file/peakd-hive/kephler/23wgoGrpoQ6iFEnKiKjsrVp4YLQVGCjdL3oy8jBii1ELpyvaDLSiUoGEhC1NxNLJGCUgC.png

My teacher very kindly helped me fix my broken Korean while writing these game instructions and also gave me lots of helpful feedback along the way. It's really when I create things that people use that I feel the fulfillment in software engineering.

Conclusion

Being somewhat bored of work, I found this challenge from my teacher to be really fun. Her encouraging words also helped to nudge me along and make me realize yet again that software engineering still seems like a superpower to many people.

Hope you enjoyed my little write-up on my development journey of 한글dle. If you're interested in how the game plays, you can always try it out at https://hanguldle.vercel.app/.

0.47672839 BEE
0 comments