Kananji - A Kanji Puzzle Game

WaniKani API And Third-Party Apps
1

Hello World! I’ve been hard at work on a kanji puzzle game website called Kananji for many months now, and I’m excited to finally share it with you today. The website can be accessed from any device with an internet connection at kananji.com

Kananji is a Japanese kanji and vocabulary review tool / puzzle game that can be used as an unofficial companion app for WaniKani. Kananji is free (donations welcome) but requires a WaniKani subscription beyond level 3.

The game has three main sections:

  • A grid of kanji to select from
  • An input for full word kana translations
  • A list of vocabulary to solve

The goal of the game is to solve all of the listed vocabulary words. To solve a word you need to select the kanji used by the word in the correct order and then type the full word in kana.

The catch is that not all kanji are enabled. Only kanji that border an empty cell on the horizontal, vertical, or diagonal axis are enabled, and only enabled kanji can be selected to solve words. In the beginning of the game a single center cell of the kanji grid will be empty and all 8 neighboring kanji will be enabled. As words are solved, additional empty cells will replace kanji that are no longer used by unsolved words.

Kananji Desktop

kananji_desktop
kananji_desktop1065×936 70.7 KB

Kananji Mobile

kananji_mobile
kananji_mobile409×821 42.5 KB

Kananji Mobile on Stats Tab

kananji_mobile_on_stats_tab
kananji_mobile_on_stats_tab408×819 35.1 KB

Tips
  • The tabs on the right-hand side of the page show the same information, but with different levels of detail. You can use the tabs to adjust the difficulty of the game to match your skill level and preferences. You can even look at the answers, assuming you know how to read kana. Play however you like.
  • Clicking on the English meanings for a vocabulary word will open the corresponding WaniKani page.
  • Ctrl + Clicking on a kanji in the grid will open the corresponding WaniKani page.
  • If a level is loaded with all cells enabled, then you won the lottery…the algorithm failed to rearrange kanji to make the game solvable. This happens very rarely, but if it does you can decide whether to play an easy game or click the Reset Level button to generate a new game.
  • If the game has you feeling down because it is difficult, just remember that the game is meant to be a challenge even for WaniKani veterans. Each puzzle you solve is an amazing accomplishment. You are awesome.
  • If you want a quick gameplay demo, then add ?dev to the end of the URL. This will enable special development features such as Auto Solve and Instant Win.
    Kananji - A Kanji Puzzle Game
Acknowledgements

I am not affiliated with WaniKani or Tofugu LLC. I just really like them and decided to give back to the community by developing an unofficial 3rd party WaniKani companion app that displays WaniKani data in an interesting puzzle format.

I have taken special precautions to ensure that WaniKani/Tofugu copyright is not infringed:

  • The app will only ever show data that is exposed by the WaniKani public API (so no mnemonics)
  • The app requires a WaniKani API Key beyond the levels that are free on WaniKani anyway
  • Clicking on vocabulary links back to WaniKani

See the Technical Details section for a summary of the open source technologies that were used to build this app.

Disclaimer

It is up to you to decide how and when to use Kananji so that you do not interfere with, or even harm, your WaniKani progression.

Examples of when you might want to use Kananji:

  • To study ahead when you have a lot of time and WaniKani is too slow for you
  • You are a WaniKani graduate with a ton of burned/deactivated words that you are starting to forget
  • You want to practice translating English to Japanese instead of Japanese to English
Technical Details

This app was created using open source technologies. Mainly React for the User Interface (UI) and Mobx/Mobx-State-Tree for state management. Ant Design, a React UI library, was used to build a good looking and feature-rich UI quickly. WanaKana, a mobile-friendly and lightweight Japanese Hiragana and Katakana IME, was used to build the kana input.

This is a responsive single page Progressive Web Application (PWA). Responsive means that the app is mobile friendly and can respond to screen-size/window-size changes to make the best use of available space. PWA means that the web app complies with the latest web standards for performance, security, accessibility, etc. PWAs cache files for an improved offline experience and can be installed on mobile devices so that they appear to be native mobile apps with an icon on the home screen and a hidden URL bar.

The app does not use a dedicated server or database. The API Key provided by you and the kanji/vocabulary requested from WaniKani are stored in your own web browser (via localStorage). Data is never sent or stored elsewhere. This keeps things simple, but means that you will have to re-enter your API Key if you clear your browser history or click the Reset App button.

Your progress on the current level is saved to localStorage in real time, so you can close the tab at any time and resume later as long as you do not clear your browser history. Progress is not saved between levels, so navigating to a different level and then back again will clear your progress.

What's a Kananji?

Kananji is just a made up word. I picked it because it was short and catchy. It kind of sounds like “kana n’kanji” if you say it quickly. Also, ji means character/letter in Japanese, so Kananji could be interpreted as conundrum of characters since this is a character puzzle game.

Thanks for checking it out! It would be really cool to hear your feedback.

Updates:

3/17/2019

  • Added solved words to the beginning of the completed vocab list instead of the end
  • Set lang=“ja” attribute on the kanji grid to make sure that kanji are rendered with the correct font

2/11/2019

  • Added “Solvable Words” tab that only shows words for which all kanji are enabled

11/26/2018

  • Moved correct/incorrect answer notifications from the bottom-left to the bottom-right of the page

11/25/2018

  • Prevented “Auto focus input” from scrolling the page in Chrome/Firefox
  • Updated Game Preferences so that “Auto focus input” and “Keep kanji in view” default to OFF

11/20/2018

  • The Reset App button in the Settings menu will now:
    • Reset the app (including API key, game progress, etc.)
    • Clear localStorage (app state, cached level data)
    • Force the ServiceWorker to update its cache (after which you still need to close and reopen all Kananji tabs). FYI, a ServiceWorker runs in the background and maintains its own cache of files so that the app can stay semi-functional even when you have a bad internet connection or go offline.

11/19/2018

  • Added auto-conversion of trailing ‘n’ to ‘ん’ to match WaniKani
  • Added on/off switch to increase kanji size
  • Increased selection icon size
  • Hid Desktop only settings for small screen sizes (Tablet/Mobile)

11/18/2018

  • Added on/off switch to auto-focus input
  • Added on/off switch to keep kanji grid visible on screen even when scrolling the page down
  • Changed kana input placeholder text from “translation in kana” to “full word in kana”

Updates not showing up for you?
If you don’t see the updates in your own browser, then it may be because your browser cached an old version of the website. Closing all Kananji browser tabs before reopening them usually fixes the issue.

56 Likes
2

Very interesting! I had to reread the instructions once or twice, but it’s a very cool concept for a puzzle game!

Futzed with level 1 to figure it out, and then checked out level 14 to see a random higher level. And got instantly terrified at how much I blanked on some of those entries! :scream:

I really like that you can choose whichever level you want. A great way to refresh on levels one at a time in a low-stress way.

Only two things came to mind in terms of feedback:

I’m lazy - clicking is hard work! Is there any way that the cursor can default to the input box after I select a new kanji? :sweat_smile:

I also have quite a diminutive screen size, and at level 14, the grid of kanji feels a bit busy when it’s that small.

Capture
Capture1089×406 71.9 KB

I would love a button that zooms in on the grid, to ponder the details of the kanji a bit more clearly. Don’t know if that makes sense. But it does in my head.

A very neat creation! Thank you very much for sharing! :purple_heart:

8 Likes
3

I would try it out right now, but I really have to get stuff done today :sob:
whyyyy

2 Likes
4

Thanks for looking at my app!

I blank on words I’m supposed to know as well, partly because the game quizzes you on English to Japanese translations instead of Japanese to English like WaniKani does. You learn what you practice. Just need to keep studying.

You can try Ctrl/Command + Plus/Minus to have the browser zoom in and out. It might not do exactly what you want, but hopefully it will do something. If you zoom in enough, then the app will switch to mobile mode. Mobile mode has the kanji take up the full width of the page, but moves the words below the kanji.

I’m kind of cautious about auto focusing the input because I’m also trying to support keyboard selection/navigation. I’ll keep the idea in mind though.

Tip, you can use the link below to enable additional buttons at the top of the page. The Auto Solve button is a cool way to see a demo. The game basically plays itself. It’s not a good way to study though :smiley:

4 Likes
5

I would like to second the request for autofocusing the input, or at least having an option/shortcut for it. Also, I got a few things wrong because it didn’t occur to me that I had to select the kanji in the correct order, though in hindsight, it should have probably been obvious.

But with those minor annoyances aside, I did like the game quite a bit. I think it’s a cool idea as well as being more productive to actually play than other kanji games I’ve tried.

4 Likes
6

I am liking this.
It took me a few minutes to get the hang of it. But is was way fun once I did. I will give you more input after I play a while.

2 Likes
7

After one game:

  • Flow-wise, it is a little weird going back and forth between mouse and keyboard.
  • There is much to keep track of, with all the definitions up on the right.
  • Words that I always have trouble with, like あげる, あがる get graded correctly, even though I still don’t really know the words

All in all, well done!

2 Likes
8

That was kinda fun! Thanks.
I might go do some of the other levels as a fun refresher at some point.
Like others mentioned, the clicking part was a little awkward but that said, it was a 9/fun.

6 Likes
9

I tried it just now, it was a lot of fun! I didn’t understand at all what I was supposed to do at first though even after reading the instructions. But maybe that’s just me. And I figured it out by trying the game. Overall it was pretty great! I’m going to try the higher levels later.

1 Like
10

I’ll add an on/off switch for auto-focusing the input.

4 Likes
11

What a pleasant surprise to get so many people trying out my app. Thanks all :smiley:

5 Likes
12

Would be nice if the ones you finished stayed cleared, so you can get a sense of progression when playing from level 1.

4 Likes
13

I’m not using a database. Right now I only save your level progress for the current level locally in your browser. I could save your progress for all levels, but there is no guarantee that the browser will not auto-clear the data if it is running low on space. The data might also get cleared when you clear your browser history.

2 Likes
14

Are you using localStorage? I think you can rely on that not getting randomly cleared (unless the user clears that cache, of course)

Edit: I just played through level 1, that was a great refresher!

3 Likes
15

Yes, it’s localStorage. I’m putting all of these feature requests on a backlog to work on between WaniKani reviews.

2 Likes
16

I agree that automatically focusing on the text input would be nice. The less clicks, the better! I’m sure there would be a way to do it without interfering with keyboard navigation. I thought of a few different ways… maybe it could switch to the text input if a kanji is clicked, but the keyboard would have different commands for selecting kanji and switching to text input? For example, Spacebar could function as a tab between the kanji and kana sections, and Enter could select the kanji when your cursor is in the kanji section.

Another thing is that I instinctively try to do is deselect kanji by clicking on them again, but that just adds another one. I just realized I didn’t check this: does the order of the kanji matter? If not, then toggling would make sense. If order does matter, then things aren’t so straightforward. A keyboard shortcut (like Esc) for clearing the selected kanji would be nice too.

I apologize if my feedback seems overwhelming :sweat_smile:

2 Likes
17

Yes, kanji selection order matters. I avoided selection toggling because words like 申し申し require the same kanji to be selected multiple times. It’s more work, but you can click on the selection circles above the input to delete specific selections or click the trashcan to deselect all. The Escape key to deselect all makes sense as a future polish item. Your keyboard navigation and context switching ideas are clever, but it seems like too much of a time-sync for me at the moment. No worries about the feedback. I’m happy to receive it.

3 Likes
18

I feel like it’s unclear that the game is expecting you to write okurigana (or kana in place of kanji, in some places). I wonder if you need an “and kana” button, so if (for example) I’m going to type 上がる, I need to announce to the game that I’m typing 上 [and kana]. Or something. Maybe that’s a terrible idea. I guess it just bugs me that it’s asking you to write the “translation in kana” for 上, but when you’re talking 上がる, the correct answer for the “translation in kana” is, strictly speaking, あ.

Just came to say this. My arm is actually tired from shifting between keyboard and mouse all the time, and I only finished level 1. Probably doesn’t help that my keyboard is in my lap. :stuck_out_tongue:

2 Likes
19

I’ll change the input’s hint text from “translation in kana” to “full word in kana”. I’m working on the auto focus input feature as well.

3 Likes
20

This is neato.

2 Likes