[Userscript] (Yet another) WK dashboard individual SRS totals

:warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely. :warning:

I know there are already several userscripts like this out there (seanblue’s “WaniKani Dashboard SRS and Leech Breakdown” for example), but I wanted to make one where the total text was out of the way and more spaced out so that it is less distracting from the full total.

This is of course not guaranteed to be compatible with other userscripts that affect the SRS stage breakdown boxes.

Revision History

1.0.2 - Include preview server
1.0.1 - Fixed typo in “missing open framework” dialog and a minor code refactoring.
1.0.0 - Initial release.

12 Likes

Neat! I actually have yet another one of these (for personal use), where I just replace the Apprentice and Guru labels with the breakdowns, hehe

1 Like

FYI I updated it to 1.0.1 to clean up the code a little and fix the missing “[Insert script name here]” template in the WKOF required alert.

1 Like

This might be a problem on my end, but I’ve downloaded a few scripts before and they work fine, so I’m not sure. Tampermonkey and all the scripts I have on it seem to be working fine, and I have WKOF, but the stages don’t show up on my dashboard even with refreshes. Is this an already-identified problem?

Thanks for any help, this script seems really useful
(EDIT: for clarification, the only script I have active is Double-Check, and that isn’t even running while in dashboard so there shouldn’t be conflicts)

Does the script show as active when you check the tampermonkey extension when you’re on the dashboard?

If it does… try only enabling this script and WKOF, opening your dev tools console (f12 on windows and clicking on console tab), refreshing, and sending a screenshot of any red highlighted errors in the developer tools console. It’s possible I’m doing something that isn’t support in whatever browser/version you’re using.

1 Like

Thanks for the quick response, again seems like a great script. Did as you said and this popped up:

For reference, I’m operating on a relatively new Mac with google chrome
That second error seems like the issue? it might be something with the API changes, but those happen in august by my memory so I’ll leave the brain work to the smart folks (you)


Another edit, this is the problem area found by the console

Can you check what version of WKOF and my script you are using from the tampermonkey dashboard?

1.0.50 WKOF, 1.2.2 for your script is what it says

Thanks for the quick responses

That error is being thrown from WaniKani Levels By Stage, not this script

And this script is at 1.0.2 so I’m assuming that was either a typo or you’re referring to a different script

1 Like

ah, I fixed the order and removed that one and it works. Sorry for wasting your time lol not sure what the issue was, probably a conflict. Coulda sworn I had that one inactive but oh well

EDIT: moral of the story, I’m very likely an idiot. However, now that it works it works (and looks) great!

1 Like

That script is just dead. The author has been gone for a long time. I created a replacement script

2 Likes

just an afterthought, it might be useful and maybe even easy (not good at programming whatsoever) to call a similar array for the hover menu of radicals, kanji, vocab. From my limited knowledge it seems like you’d just repeat the function three more times, calling different stored items in the database as values? the hover menu thing would be fine too if it could interact with the site’s JS (or whatever language it is)

You’d think I would have noticed that based on the very obvious unsupported label on it, but no. My brain works in weird ways

1 Like

If you are looking for more details have a look at this script

2 Likes

I will be sure to check out both scripts, they seem pretty unique. They seem like they conflict with this one though, so I’ll try both on for size. Thanks for trying to help an obviously dull human being like me

SRS Grid will probably conflict with this one, so it’s either or, but the Levels By SRS script should be fine

Don’t be like that (✿◠‿◠)

1 Like

fair enough, thanks for the advice. I’ll retract my self-deprecation and instead say it was just a moment of selective illiteracy

EDIT: can confirm your script is compatible with this one, and it actually looks quite good.


Obviously it’d look nicer if I had good SRS numbers like you, but I’ll get there someday if my procrastination doesn’t kill me

More edits: ooh, and yours is compatible with the grid too… that’s tempting

Even more edits: and I’ve used guesswork and the little bit of image manipulation I know to make it so that Kanna isn’t hiding the numbers in the burn section:
Screen Shot 2020-07-10 at 7.03.24 PM

2 Likes

Glad we got it figured out!

I’m very likely an idiot.

it might be useful to call a similar array for the hover menu of radicals, kanji, vocab

Yeah the script already has the data to do that so I might as well :+1:

2 Likes

I’ve honestly not seen a script that combines both even though it just seems like copy/pasting call functions plus maybe an interaction with the hover menu (which other scripts do on a regular basis) so it’d be a cool addition

btw, cheers for the barney stinson GIF and thanks for all the help

1 Like

After last WK update completely broke this script, I managed to get this working again by replacing the last section in script with this.

    /**
     * Creates the UI elements
     */
    function updateUI () {
        initCSS();
        createSRSTotalsContainer('apprenticeTotalsContainer', 0, 3, $('.srs-progress__stage--apprentice'));
        createSRSTotalsContainer('guruTotalsContainer', 4, 5, $('.srs-progress__stage--guru'));
        createSRSTotalsContainer('masterTotalsContainer', 6, 6, $('.srs-progress__stage--master'));
        createSRSTotalsContainer('enlightenedTotalsContainer', 7, 7, $('.srs-progress__stage--enlightened'));
        createSRSTotalsContainer('burnTotalsContainer', 8, 8, $('.srs-progress__stage--burned'));

        /**
        * Create the CSS style sheet and append it to the document
        */
        function initCSS() {
            $('head').append(`
                <style>
                    .srsTotal {
                        display: inline-block !important;
                        margin: 0 !important;
                        font-size: 12px !important;
                        font-weight: normal !important;
                        color: white;
                        text-align: center;
                    }

                    .srsTotalDiv {
                        padding: 2px 0 4px 0;
                        height: 20px
                    }

                    .srs-progress__stages {
                        gap: 0;
                    }

                    .srs-progress__stage-title,
                    .srs-progress__subject-types {
                        display: none;
                    }

                    .srs-progress__stage-header {
                        display: flex;
                        justify-content: center;
                    }

                    #apprenticeTotalsContainer span {
                        width: 25%;
                    }

                    #guruTotalsContainer span {
                        width: 50%;
                    }
                </style>
            `);
        }

        /**
        * Creates the individual srs stage total container and adds the text spans
        * @param {String} id - The ID for the SRS stage total text container
        * @param {Number} min - The minimum srs stage number (0 indexed) for this group
        * @param {Number} max - The maximum srs stage number (0 indexed) for this group
        * @param {Object} parent - The jquery DOM element to add the container to
        */
        function createSRSTotalsContainer (id, min, max, parent) {
            // Create the container for this srs group
            const totalsContainer = $(document.createElement("div"));
            totalsContainer.addClass("srsTotalDiv");
            totalsContainer.attr('id', id);
            parent.append(totalsContainer[0]);
            for (let srsStage = min; srsStage <= max; srsStage++) {
                // Create the span for this specific srs stage
                const srsTotalSpan = document.createElement("span");
                srsTotalSpan.className = 'srsTotal';
                srsTotalSpan.innerText = min === max ? "" : wkSRSTotals[srsStage];
                totalsContainer.append(srsTotalSpan);
            }
        }
    }
1 Like