[Userscript] ConfusionGuesser

WaniKani API And Third-Party Apps
142

Having to come back and update this script reminded me I had made a couple changes a long time ago but forgot to ever share them here so they could maybe be included by default.

  1. The hotkey says it can both show and collapse the guesses but it currently only shows them, pressing the key again does not hide the guesses. Easily fixed by adding the following into the event listener in the init function, right after the declaration of collapsed
if (!collapsed) { hideGuesses(); return; }
  1. The css still contains the old variables that were used for the now unmaintained Breeze Dark userstyle. As both Wanikani and more recently maintained userstyles such as Breeze Dark 2 and Light Theme make use of official variables, the css in this script should be changed to support them:
"#guesses > a.radical          { --ic: var(--color-radical, --radical-color, #00AAFF); }" +
"#guesses > a.kanji            { --ic: var(--color-kanji, --kanji-color, #FF00AA); }" +
"#guesses > a.vocabulary       { --ic: var(--color-vocabulary, --vocabulary-color, #AA00FF); }" +
...
"#confusionGuesserOverlay > div > label { position: absolute; top: 0; right: 25px; background-color: var(--color-wk-panel-content-background, --page-background, white); width: 1.4rem; line-height: 1.4rem; text-align: center; border-radius: 0.3rem; font-weight: bold; cursor: pointer; font-size: large; }" +
...
"#confusionGuesserOverlay.noOverlay > button::before { top: 7px; right: initial; border-right-color: transparent; border-top-color: var(--color-text, --text-color, #a2a2a2); }" +
...
" #confusionGuesserOverlay > button::before { top: 7px; right: initial; border-right-color: transparent; border-top-color: var(--color-text, --text-color, #a2a2a2); }" +
2 Likes
143

Thanks for the suggestions!

  1. The hotkey is working as intended: Its purpose is to expand/collapse the list of guesses, not to show/hide it. The possibility that the entire list is initially hidden was added later, and for convenience, the hotkey also can be used to show the list if it was initially hidden.

  2. I don’t really know why I never got around to changing the CSS variables to the new official ones. This has been on my to-do list for quite some time. Thanks for the code. I initially wanted to use --color-button-modal-primary-background for the expand/collapse button because of the semantic relationship (it’s closer to a button), but this looked worse with Breeze Dark 2, so in the end I went with your suggestion of --color-wk-panel-content-background.

2 Likes
144

Oh I misunderstood the hotkey then, my bad. I think I will change my edit to add an additional hotkey to do what I want here. This is actually what I was doing before making my suggestion, using the key “T”.

As for the CSS, I made an oopsie due to being a novice still. var() can only take 2 arguments, so to get the full fallback behavior they need to be in the form var(--variable-1, var(--variable-2, --variable-3)).

1 Like
145

I had completely forgotten about this behavior of var(). Not that it really matters in this case, because I don’t expect WK to rename/remove these CSS variables anytime soon, so the fallback is never used anyway. Nevertheless, this is fixed now.

1 Like
146

I had trouble getting this plugin to work recently.
I finally got it working again by temporarily turning off uBlock Origin, reloading, then turning it back on. :smiley: