[Userscript] WK Extra study mover

: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.

If you like the new extra study feature, but think that the positioning of the ui item isn’t convenient or hides other stuff, this script is for you.

Features

After adding the script, a small cog will appear in the corner of the extra studies panel. Clicking on this will let you set the position and the style of the panel and possibly remove the info questionmarks.

image

The different positions

Top:

Above level progress (the original):

Below level progress (the default):

Above item breakdown:

Below item breakdown (and heatmap):

Above review forecast (I recommend using a reduced or minimal style for this):

Below review forecast:

In the header:

None is pretty self explanatory (The settings button gets put into the user menu this way)

The different styles

Normal (the usual and the default):
image

Text only:

Image only:

Reduced (the text and the image removed):
image

Minimal (only what’s necessary):
image

With and without the info questionmarks


Button orientations

Horizontal
image
Vertical
image

You can also have the “Recent Mistakes” panel removed with the “Good Mojo” option, if you dislike seeing how many mistakes you’ve made recently.

My personal favourite combination

Below review forecast, reduced, vertical orientation:

Installation

Guide on how to install a userscript
Link to the userscript

Feedback

If you want a different position or style, or one of the existing ones is acting up for you, feel free to leave a reply, preferably with an example image, and I’ll see what I can do

For userscript authors wanting to support the script

I’ve added some classes to the extra study element to signal that extra study mover is in operation. These are:

  • es-mover: the script is running
  • es-mover-header/top/above-lp/…: The exact positioning of the box
  • es-mover-normal/reduced/minimal: The current style of the box
Changelog
  • v0.8.0: Adapted to the “recent mistakes” changes, and made it possible to remove that
  • v0.7.0: Adapted the script to the new dashboard changes
  • v0.6.2: Now supports Kumirei’s “Lessons & Reviews in header” script
  • v0.6.1: Added a small gap between items in horizontal mode
  • v0.6.0: Fixed compatibility issues, added button orientation
  • v0.5.0: Added a none option to the position
  • v0.4.2: Bumped CIDDWA dependency
  • v0.4.1: Fixed several smaller bugs
  • v0.4.0: Big compatibility and code changes
  • v0.3.3: Removed the leftover button from the user menu
  • v0.3.2: Solved some minor issues and added dashboard compatibility for header mode
  • v0.3.1: The header option is now a dropdown with all the buttons inside
  • v0.3.0: Now there’s an option to put the buttons in the header
  • v0.2.2: Now supports breezy dark out of the box
  • v0.2.1: Below item breakdown was missing
  • v0.2: You can now select the positioning and the style
  • v0.1: Initial
30 Likes

Thank you for reading my mind! :grin:

2 Likes

Really useful!
Any chance this surplus margin could be fixed? :smiley:

1 Like

I don’t get that, I assume the settings are below level progress reduced. With those I have this:

Maybe your dark mode script is affecting it. Can you check and if I’m right, can you link it for me?

Ah yep - it does indeed seem to be Breeze Dark. As you say, I’m using below lp reduced. Here’s the link to the dark mode script, but I’ve also found that changing the margin on line 48 of your script to 0px fixes it, so don’t worry too much about it. Thanks!

1 Like

Fixed it. It might modify the original look a bit, but 仕方がない. It seems fine for me at least.

1 Like

Love this. Thank you!

2 Likes

Now there’s an option to put the 2 buttons right into the header:

Disclaimer:
There’s a surprising lack of space in the header if you also scroll down. If you have any other userscripts that put in buttons, it might not look so hot.
With this mode the settings button will be moved to the user menu (click profile picture).

Idea by @UInt2048

4 Likes

Amazing!!!

1 Like

I was already using this script & I’m pleasantly surprised to discover you implemented this! Here’s how the WK dashboard looks for me now:

My only concern is that WK could add more categories to Extra Study in the future. You might consider making it a drop-down something like the Levels dropdown (bonus: takes even less space!)

2 Likes

That’s actually a great idea, I don’t have the time to implement this today, but maybe next week sometime. Would solve the settings placement issue too.

1 Like

No worries! It’s not super important right now; I only brought it up since you said you wanted some more coding practice :wink:

1 Like

great!

It really bothered me seeing the recent mistakes count right on my face every time!

using the personal recomendation

3 Likes

You might be interested in this post if you would rather see categories or 42+ instead of the actual number…

Do you also move the Reorder Omega self study button?

1 Like

Not currently, because it just doesn’t fit, but once I implement that drop down, I’ll try to move every button in there to that new location.

2 Likes

Sounds good!

1 Like

@UInt2048 so that was a lie apparently, I had plenty of time tonight:

@Kumirei I’ve taken steps to make sure all the buttons make their way into the dropdown, as long as a userscript inserts buttons in a similar way, you did, it should work out fine

@Sinyaven I made sure to support the audio button userscript as well, in the future if you change the userscript and want to support extra study mover, I’ve added the class “es-mover” to the .extra-study node

5 Likes

Very cool!

2 Likes

Somewhat unexpectedly (a pleasant surprise you might say) the script (and by extension, CIDWWA) works with phone mode:
image

5 Likes