Current version - 1.4.8
When I was somewhat new to WaniKani I found out about Userscripts. However, since I’m a web developer by trade and I hadn’t dabbled in Userscripts before I figured this was the perfect opportunity to get my hands dirty learning, so instead of looking for an immersive dashboard replacement I built my own.
I first thought I wasn’t really actively developing this, but looking at my version history, I actually tinker with this far more than I realised, and I always try to be prompt if anyone lets me know of bugs, so I’ll say I’m active, but not necessarily building to broader requirements. Though if anyone has suggestions please add them and I’ll see what I can do!
Pretty straightforward here, you just need to have a script host plugin (I use Tampermonkey) and WaniKani Open Framework and set it to execute before my script.
I created this userscript purely for my own use, but I'm quite comfortable with what I've created that I felt it worth sharing, however I am well aware of a number of deficiencies with my script that I may or may not deal with in future. I've put this section near the top as a quick reference point, as such the details for some of these are in the Userscript details section.
Known deficiencies list
- Sometimes if your browser has closed unexpectedly or (like me) you have your browser open up with the last open pages, then the navigation lesson/review shortcut values may not match the dashboard values, this is purely due to caching as the shortcut uses base WaniKani (I just modify the HTML) and the custom dashboard uses my code so reloads (almost) every time - also sometimes cached information won’t load before code execution, so just reload
- The next reviews summary hover display will only show the next reviews over the next 24 hours rather than the next week, and it may extend passed the visible screen but you can’t scroll down to see
- Since I am quite the novice when it comes to Japanese, I’ve had to rely on translators and such for many of the titles and sentences in the dashboard, so please bear that in mind if something reads strangely
- I have not catered for accessibility like colour contrasting, screen readers and the like
- The dashboard sizing and styling is based on my 24" HP monitor and my Surface Pro 4 screens so I hazard to guess that on smaller screens it may not look very nice, and I definitely have not catered for mobile at this stage purely because I can’t be bothered messing around with my phone to have it available and I won’t worry about mobile for now until I can actually use it on my mobile
- I know the community feed is missing, but it was never very useful to me, I just use the “Community” link in the Profile menu if I need to go there
There really aren't many issues I've come across yet, but the fix is usually to refresh the browser a few times because of caching or settings not being loaded. I've added an actual wait function for the WKOF settings to load, but if the load takes longer than 10 seconds an error will display needing a page refresh or some other troubleshooting.
Assuming you have completed the prerequisites (if not, go back and do that) then install from GreasyFork. With Tampermonkey it automatically takes you to the installation screen so you just click Install. If you are using any compatible userscripts, please make sure to put this one at the top of the list under WKOF so that the custom dashboard wrapper is available before the other userscripts load. For example in Tampermonkey:
- WaniKani Custom Dashboard
- Other userscript
- Another userscript
After that, just refresh WaniKani! Or go to the website, whichever you need to at this point
Compatibility with other Userscripts and Userstyles
Based on feedback, I've endeavored to make my script somewhat compatible with a number of common dashboard related userscripts listed in section 7 of the My Journey of 368 days (+ The Ultimate Guide for WK) post, and currently one Userstyle as well.
- WaniKani Item Inspector - This should work like it normally does, I just catered for the insert selectors.
- WaniKani Ultimate Timeline - This should work like it normally does, I just catered for the insert selectors.
- WaniKani Lesson Hover Details - This worked out of the box, however with my custom dashboard it will only work on the navigation lesson shortcut button as I already break down the lessons by item type in the summary.
- Level Duration 2.0 - This worked without any changes on my part, hooray!
- Wanikani Heatmap - This should work like it normally does, I just catered for the insert selectors.
- Progress Percentages - This already worked without any changes on my part, but hopefully the selector adjustments I’ve made will prevent this from disappearing in future.
- WaniKani Leaderboard - This should work like it normally does, I just catered for the insert selectors.
- Self Study Quiz - Works out of the box since it doesn’t really impact the dashboard itself
- Leech Training - Not part of the recommended list in the guide, but this was a recommendation that I figured it worth adding
- Dashboard Progress Plus - My custom dashboard already shows some of the information provided in this userscript, however I wouldn’t be able to cater for it anyway because I overhauled the Level Progress section.
- WaniKani Dasboard SRS and Leech Breakdown - I have already broken down the SRS summaries by item type.
Note that something like the Stylus addon is required to install Userstyles.
- WaniKani Breeze Dark - Another user (Erid) actually showed me a snapshot of my Custom Dashboard and this Userstyle together with a small local fix they made, and I greatly enjoy the extra theming to WaniKani overall, so I’ve added a second dropdown list to the Theme settings for compatibility with this Userstyle
Please find the list of changes per version in descending order below as best I can describe:
Intended future updates (in no particular order)
- Additional configurations - update shortcut nav on all pages, ???
- Improve debugging so that individual sections can be debugged rather than the entire dashboard for each option
Version history (was starting to get long)
Version 1.4.8 - 12th April 2021 - Added WKOF settings check and minor bug fixes
- Added an actual WKOF and WK Custom Dashboard settings loaded check with a 10 second failure timeout
- Moved dashboard page loader to separate component
- Fix issue with next review times not working for browsers using 24 hour time
- Code alteration to use arrow functions
Version 1.4.7 - 6th April 2021 - Might level up indicator, header hover translations, and minor bug fixes
- Added a setting that when enabled it will check the current review kanji, and the kanji in the immediate next review time, and if a user has enough kanji ready that passing them all would level them up then the level progress circle will pulse
- Added the ability to set “translate on hover” for headers, covers English, Japanese Hiragana Reading, and both
- Minor bug fixes - Kanji locked background colour and radical tooltip text colour fixes for WaniKani Breeze Dark compatability theme, and added a check for compatibility themes so that an empty style HTML element isn’t added to the page when “None” is selected
Version 1.4.6 - 25th March 2021 - Userstyle theme compatibility support
- Since being shown the WaniKani Breeze Dark theme, I’ve added a framework for making my dashboard compatible with Userstyles that I personally like, so I won’t be covering all of them that people suggest
- Added dynamic function to set the text colour of each item based on whether the background is too dark or too light, mostly to accommodate the ability to change kanji/radical/vocabulary background colours in WaniKani Breeze Dark theme
Version 1.4.5 - 15th March 2021 - Identify difficult items that are up for review that may leave the list
- I know I’m probably the only one using the difficult items section, but I added a setting to allow difficult items that are on the selected SRS Level cap to be subtly identified if they are in the outstanding reviews list, or the next review hour, but NOT in future reviews
Version 1.4.4 - 2nd March 2021 - WaniKani System Banner support
- Finally got a system banner to work with, so refactored dashboard wrapper code to keep the old dashboard wrapper and just replace the existing with my dashboard parts
Version 1.4.3 - 28th Feb 2021 - Bug fix for skip session summary feature
- Noticed and fixed display and functionality issue with skip summary feature on lesson sessions, and adjusted styling attachment
- Added setTimeout to review session skip once finished, though this may cause the page to jump prematurely (though I don’t imagine this to be an issue overall)
Version 1.4.2 - 27th Feb 2021 - Add skip session summary option, debug toggle now in settings
- Added an option that allows you to skip the session summary straight back to the dashboard if you like, please note that for reviews this may not always work because of the different way vanilla WaniKani ends the session compared to lessons
- Skip session summary option also changes Home icon destination to the dashboard as well
- Finally worked out how to make sure settings are available, so now debugging is togglable in settings between data and HTML
Version 1.4.1 - 24th Feb 2021 - Bug fix for next review time display
- I happened to use a different computer to log in, and the browser was using 24hr time instead of the 12hr my main PC uses, so made a minor fix to accommodate browsers using 24hr time, so no 午後 or 午前 is displayed in those cases, and made sure the 時 would show as it was missing before
Version 1.4 - 23rd Feb 2021 - Dark theme update
- Added a theme option to settings - default or dark
- Force move to top since the header banner doesn’t disappear at this stage (I don’t mind it always showing)
Version 1.3.2 - 21st Feb 2021 - Bug fix for custom dashboard wkof dialog styles
- Fixed issue with WKOF settings dialogs getting custom styling when it should be restricted to Custom Dashboard settings dialog
Version 1.3.1 - 21st Feb 2021 - Project restructure and level progress sort update
- Updated Level Progress In-Progress and Passed sections to be sorted by SRS level
- Restructured code base from common files into component structure (see github project) - still requires some cleanup and refactoring but everything works for now
Version 1.3 - 7th Feb 2021 - Translation update
- Added headings for the Level Progress sections
- Added a Translation section to the settings
Version 1.2.1 - 4th Feb 2021 - Bug fix for difficult items setting
- Fixed issue where Difficult Items weren’t disappearing when settings checkbox unchecked
Version 1.2 - 3rd Feb 2021 - Critical Items > Difficult Items + settings update
- Changed “Critical Items” into “Difficult Items” and made it opt in via added settings
- Settings for Difficult Items allow for users to specify the “Safe Level” and “SRS Stage” thresholds
Version 1.1.3 - 24th Jan 2021 - Bug fix for removing hardcoded timezone
- Removed hardcoded timezone locale from Next reviews data generation, should now use the browser default timezone
Version 1.1.2 - 24th Jan 2021 - Styling bug fix for summary button alignment
- Fixed styling issue for summaries where buttons are not aligned, they are now anchored to the bottom of the summaries
Version 1.1.1 - 24th Jan 2021 - Bug fix for summary number thresholds and empty array next review list
- Fixed issue with custom summary H2 styles and code not accommodating numbers above 999
Next review summary now caters up to 9,999 and Enlightened summary caters up to 99,999 (without the commas) with both changing to (~XX千) and (~XXX千) respectively (replace X with number at time of display)
- Fixed issue with the Next review display showing undefined when a user has no reviews (returns empty array)
Code now caters for that empty array and displays “次の復習をなんでもない” (loose translation: There are no next reviews) with 0’s for each item type
- Updated main post to include number limits and explain the new number display
Version 1.1 - 23rd Jan 2021 - Compatibility update
- Added WKOF check
- Refactored dashboard generation code to accommodate other dashboard related userscripts
Includes separating dashboard wrapper from content generation because some userscripts run faster than mine
- Updated main WaniKani Community post to include Changelog and Compatibility list, and put pictures under the GIF and Known deficiencies list both into separate “Hide details” sections to save room
Version 1 - 22nd Jan 2021 - Initial release
- Initial release to WaniKani Community
I've started branching into some non-dashboard functions that I wanted to add but didn't see the need for creating a completely new Userscript to cover them.
At the moment I’ve only added the ability to skip the Lesson and Review session summary pages, because they annoy me and I don’t find them useful. They’re only smallish changes, but I do need to mention:
- For the Lesson summary I’ve replaced the existing button with a “Go to homepage” button that can be clicked on the overlay
- For the Review session I’ve added an event listener to the submit button that checks if you’re at 0 items, then sends you to the homepage, however please note that this may not work 100% of the time due to the vanilla WaniKani implementation of finishing a Review session which uses a similar method so it’s kind of a competition until I can work out whether I can remove the vanilla one
- For both I’ve updated the “Home” icon to go to the homepage instead of the session summary page as well, for completeness
I have some smaller GIFs and reduced the excess of images for people to look at that have been taken of mainly the 1.4.5 version with some new 1.4.7 version items so hopefully it's better viewing!
Open for images
Main dashboardThis is set at the end of a level. ![general-dashboard|690x251](upload://dmXhvkkmuMWHyK9Yueq3E9dXU2w.gif)
This as a snapshot of the start of a level.
Next and future reviews
“Might Level Up” pulse effect
Default theme - Dark theme
Japanese Hiragana Reading
These are the default settings when you first install.
These are the translations if you’re like me and aren’t at a decent fluency level
Difficult Items (optional setting)
For those that might use it here’s adding the Difficult Items.
This is what an individual item would look like if you turn on the Difficult Items identifier setting.
And this as a whole, not too easy to spot, which is the point
Here’s a snapshot of the Dark theme.
In general I’ve completely overhauled the original dashboard to display information I find far more useful than what vanilla WaniKani provides, for example:
- Each kanji/radical/vocabulary item now displays the level it is from on the bottom right, and what its current srs level is on the top right
For those that don’t know the SRS level: 0 is Unlocked, 1-4 is Apprentice, 5-6 is Guru, 7 is Master, 8 is Enlightened, and 9 is Burned
- Each of those items also now has a hover tooltip that displays the kunyomi, onyomi, nanori, and meaning(s) of the item, though it also indicates the both the accepted and unaccepted readings and meanings with colours: green is accepted readings, grey is accepted meanings, maroon is unaccepted readings, and if there are any unaccepted meanings they’ll be black
- Any section may contain a simple thin green ring, this indicates that the section is empty of items at that point in time
- The page will also automatically refresh at the next review hour if the page is open in a browser at that time
- I adjusted the backgrounds to be more palatable for myself instead of blocks of the same bright colours everywhere
GOOD NEWS EVERYONE! Especially those not as well versed in Japanese (like me). There’s now a Translations section in the settings!!
This being said, as of version 1.4.7 you can now enable translations on hover in the settings!
Custom and Compatible theming
I've always been very partial to dark themes, but figured that since I recreated the dashboard then most other themes wouldn't work without tweaking, so I made some of my own. Not only that, but I now have one holistic third party theme I really like, so I figured it worthwhile to accommodate it and leave the foundation for any future ones I may like.
There are two custom themes at this stage:
- Default - uses the default WaniKani colours but provides some alterations to background colours
- Dark - my own version of a dark theme
PLEASE NOTE: If you activate a compatible theme AFTER loading the page, you will either have to open the settings and save, or reload the page to trigger the text colour check again. This is important when a Userstyle script has the ability for the user to set their own colours.
- WaniKani Breeze Dark - (see Compatible userstyles above for link) this is actually a really cool theme covering the rest of WaniKani, so I made some small adjustments to accommodate it
This used to be a boolean toggle available in the installed script, but is now split into two checkbox options in settings. The reason it was split is because with both data and generated HTML debugging IT WILL SPAM YOUR BROWSER CONSOLE!!
Once you check one or both options in the settings and save, it will reload the pages to generate the debug information and display it in the browser console. If you don’t know how to get to that, press F12 and click the “Console” tab.
Sample HTML debug output:
In the sample above, please take notice of how each debug entry starts with “==” followed by the Component and the function name it was called in. This is to help me know where you might be having an issue if you send me debug information. The data debugging will show objects which you’ll need to copy as is or expand and screenshot, however the HTML debugging is a little different. Spamming the console with whole lots of HTML was tedious even for me, so I added the long ones to objects, so to see and copy the detail please expand the object then double click on the text to highlight is for copy as shown in the sample image.
In the future I might look at further improving this so that individual sections of information can be gotten via debug but it’s a little bit too much to bit into right now.
Top summary section
I took the review and lesson buttons, and the next review section from WaniKani and combined them into a singular section, but also added an overall kanji/radical/vocabulary totals summary as well because I was curious as to how many of each I was actually working with. For all of these summary section I took the liberty of having a total, but also breaking that total down into how many kanji, radicals, and vocabulary go into it.
The original lessons and reviews buttons were converted to simple summaries and a separate “start” button was added to each. These “start” buttons are grey when there’s nothing to do, but will have the original colours applied with a pulse effect when there are items to review or learn. This styling also applies to the navigation shortcut lesson/review buttons for when you’ve scrolled down the page.
The overall total summary won’t display an actual total, it is purely for understanding the overall number of kanji, radicals and vocabulary the user is working on.
The next reviews summary is just the immediate next review time and information. However if you hover over it then the next reviews over the next 24 hours are displayed. As noted in the overview, if the page is open it will also refresh at the next review summary time.
If there are more than 9,999 items to review at the next review time then the visual display will change to something like (~10千), it is a rounded number so for example 10,001-10,499 items will display as (~10千) but 10,500-10,999 items will display as (~11千). This is done purely due to space constraints, but from what I understand this threshold is unlikely to be exceeded anyway.
Level progress section
This section is simple enough:
- The top row holds the level progress indicator as a ring instead of a bar, and has the unlocked kanji for the current level that have NOT been passed yet - note: as of v1.4.7 if you enable the setting then the indicator ring will subtly pulse when you have enough kanji in your current and immediate next review time to possibly level up
- The second row holds the unlocked radicals for the current level that have NOT been passed
- The third and fourth rows hold the PASSED kanji and radicals respectively for the current level
- And the fifth row holds the locked kanji for the current level
All the items display like every other section, except the locked kanji since they have no assignment data and subsequently no current SRS level, and they’re sorted based on SRS stage in ascending order.
SRS level summary section
Like the top summary section, I also took the WaniKani SRS level summary section and converted it to Japanese, added the item type breakdown, but also added a button that actually shows the items themselves in that particular SRS level.
This is really not needed, but for consistency sake I added the 10k total items display reduction here that is also in the Next review summary section, but only to the “Enlightened” ( 悟りを開いた) SRS summary section.
I.E. If it has more than 9,999 items it’ll change to (~10千), and again it is a rounded number so 10,001-10,499 items will display as (~10千) but 10,500-10,999 items will display as (~11千).
All the kanji, radical, and vocabulary items display like every other section.
Difficult items section
This was previously "critical items".
This section is opt-in only and does not show by default as of v1.2. The primary purpose of this section is nothing more than self-interest in any items that you might have “difficulty” with. This is not like leeches or anything, it’s nothing more than a list of items based on “Safe Level” and “SRS Stage” thresholds.
I would imagine that this section wouldn’t be very useful to many since there are plenty of other Userscripts out there that give heaps of much better and intuitive information and tracking on leeches and the like (like WaniKani Item Inspector). However I have always thought that if I have items that are 3 levels or more lower than my current one and they’re still in Apprentice that I’m not doing as well as I could be with them, especially if I notice some bouncing back and forth from Apprentice to Guru.
The “calculation” is nothing more than how many levels lower than your current one you want to be the maximum item level, and what the highest SRS stage you think is worth monitoring. Simply put: if your level is 10, and you set the “Safe Level” threshold to 4 and “SRS Stage” to Guru 1, then only items up to and including level 6 that are in SRS stages Apprentice 1 through to Guru 1 will be shown in this list.
These thresholds are all configurable from settings, with defaults being:
- Show Difficult Items section: false
- Safe Level: 3
- SRS Stage: Apprentice 1
Sorting for this section is by item level first, then by SRS stage within that level.
I have also added a setting for this section that basically adds a somewhat subtle pulse identifier to the SRS level indicator on the items that are in the current review list, or the next review list, that could be removed from the Difficult Items list if the review is successfully completed. Items that are beyond the immediate next review hour shown in the summary (NOT the hover) will not be identified.
E.G. If the SRS Stage cap is set to Guru1, only items in Guru1 will be identified if they’re up/next up for review.
I find this to be useful in that I can keep some kind of track of items that could potentially leave this section, but I don’t use it to study ahead though it could be used that way especially with the hover information.