I just published an update to wkof that adds a {z-index: 1} to the parent of the wkof Menu to eliminate the problem with too many scripts in the menu.
3 Likes
I believe Userscripts update once daily by default settings, if the script isn’t edited. Not specifically sure of updating conditions, or how to detect new versions.
rfindley fixed that bug, very quickly 
TamperMonkey, Brave, Windows, btw.
Thank you so much! I didn’t even know about that new feature 
it works now
1 Like
Thank you, this is super helpful!!
1 Like
About to say about fonts sometimes not rendered; but then I notice the dev branch on GitHub.
Nonetheless, I would say the easiest to ensure that the Kanji is rendered, is by putting a comma-joined list of fonts. The second or third in list might be another chosen font, rather than the default font.
It would be nice if “click to change font” can be implemented.
Another request is ease of removing the current font. Also, filtering through the list of selectable fonts.
Anyway, my quick fix (from dev branch) is here; though I haven’t yet implement some kind of filter.
Yep, I have been working on this. Currently on hold because I have to prioritise my dissertation and defence, but planning on resuming that when there’s more time.
Precisely, the following bugs I noticed and am working on a fix:
- (Firefox) fonts I self-hosted on my website don’t load because of CORS-issues. Currently experimenting a bit if I can make the fonts a “resource” within Tampermonkey, because userscripts are trusted without raising CORS.
- (Safari) Kanji not rendering (hard). Before a font is chosen, Jitai will first check if the font can render the Kanji. If the font hasn’t finished loading yet, Safari silently just uses the standard OS font. Issue is, Safari will only load a font if it is actually used on the website right now, and will delete it when it doesn’t see it being used anymore.
- (Firefox, Safari) Kanji not rendering (soft). Sometimes network issues prevent the font from being fully loaded. Then you either notice the font “plopping in”, or they just use the standard OS font.
To solve 2. and 3. I have started rewriting the script to adopt Google’s WebFontLoader. The nice thing about it is that you can programmatically check the status of each font, and create events. It also allows fonts to be easily side-loaded from AdobeFonts etc., so it scales very nicely. But takes some time to change key parts of the script.
4 Likes
I remember there being even crazier font out there that worked well with this awhile back. I really like however how easy this has become to load up the fonts.
Great job thank you!
Sometimes just the first character of the word changes into the random font. Is there any way to fix this?
edit: I’m on chrome and using the latest release (v3.1)
nvm it somehow fixed itself after restarting the pc
For some reason I can’t get this script to work for me. I tried downloading both the original script and the updated one in this thread. I’ve downloaded most of the recommended fonts. I’ve tried using both Firefox and Chrome. My userscript manager is Tampermonkey. I’m on Windows 11.
Seems like the script doesn’t run at all, because I can’t see the cog icon on my review screen anywhere. I’ve verified that I have the script enabled in Tampermonkey.
Any ideas on how I could get this script working?
FIXED! Install WaniKani Open Framework
2 Likes
Which fonts are those? They look so fun!
1 Like
Most likely
(yes I only noticed I accidentally hit 味方 instead of 見方 partway through)
Other ones I love
1 Like
I had that problem too. I don’t remember how I resolved it, but the one I have installed rn works fine if you wanna just copy-paste it
https://privatebin.net/?fb63f656ce814d2d#AVrGApMXhBLwpPZSq2YAQxeKbXBC69GpbcFhk5Aoop4k
Btw it deletes itself in 24 hours cause idk it feels wrong to upload a link to someone else’s work otherwise
Also I modified the sample text for font nerd convenience but it’s easy to change back + there are a bunch of extra fonts but not downloading them doesn’t seem to cause issues
I also have a drive of all the fonts I have installed just in case tho (altho some of them I haven’t gotten to work I think)
Thank you. I tried your version and it unfortunately did not work either.
Tampermonkey says that Jitai is running and enabled, but the fonts don’t change and the settings button does not appear.
I figured it out. 
I hadn’t installed WaniKani Open Framework. Installing it made Jitai work as well.
1 Like
That’s good cause I forgot to use WaniKani for like a week and also would never have known that answer
@ obskyr I love your script, but every now and then it seems to stop working and it always takes me a good few days to realise that the fonts have reverted back to just being the Wanikani defaults. When I go back into the Jitai settings, all the font selection boxes are unchecked. If I re-check them, it continues to work fine until the next time it doesn’t.
This seems to be a recurring issue for me. Is there any way to fix this?
Thanks
Maybe I should addressing this to @ marciska?
Looks like the WK font update broke the script? I didn’t get a chance to reinstall earlier, so it might be that simple of a fix. Just want to make note of it
6 Likes
Yes unforunately it looks like the new update might have broken this!! Such a bummer, this is without a doubt my favorite script and is super useful. Commenting to give more visibility hopefully someone smarter than me can make a fix
3 Likes
I’m not the owner of the script, so I can’t make any changes. However, I found a quick fix for this.
-
Open up the TamperMonkey Dashboard
a. Click on the Tampermonkey extension
b. Click on Dashboard
-
Click Edit on Jitai
a. Find the edit button on the far right (under the actions header) for Jitai
-
Find
function updateRandomFont(update)which should be on line 334 (see the picture for reference)
-
Replace the whole function (lines 334-356) with the following:
function applyRandomizedFont() {
item_element.style.fontFamily = font_randomized;
}
function revertToDefaultFont() {
item_element.style.fontFamily = font_default;
}
item_element.addEventListener('mouseenter', revertToDefaultFont);
item_element.addEventListener('mouseleave', applyRandomizedFont);
function updateRandomFont(update) {
// choose new random font
if (update) {
const glyphs = item_element.innerText;
if (font_pool_selected.length == 0) {
console.log(script_name+': empty font pool!')
font_randomized = font_default;
} else {
do {
font_randomized = font_pool_selected[Math.floor(Math.random() * font_pool_selected.length)];
} while (!canRepresentGlyphs(font_randomized, glyphs));
}
}
// show font
if (hover_flipped) {
revertToDefaultFont();
} else {
applyRandomizedFont();
}
}
- Save the script and it should work now (ctrl + s)
If you just want to copy and paste the whole updated script
// ==UserScript==
// @name Jitai
// @author @marciska
// @namespace marciska
// @description Displays your WaniKani reviews with randomized fonts (based on original by @obskyr)
// @version 3.1.1
// @icon https://raw.github.com/marciska/Jitai/master/imgs/jitai.ico
// @match https://*.wanikani.com/subjects/review*
// @match https://*.wanikani.com/subjects/extra_study*
// @license MIT; http://opensource.org/licenses/MIT
// @run-at document-end
// @grant none
// ==/UserScript==
(function(global) {
'use strict';
/* eslint no-multi-spaces: off */
/* global wkof */
//===================================================================
// Variables
//-------------------------------------------------------------------
const script_id = "jitai";
const script_name = "Jitai";
const item_element = document.getElementsByClassName("character-header__characters")[0];
// ----- Fonts -----
const example_sentence = '質問：私立探偵 (P.I.) はどんな靴を履いていますか?<br>答え：・・・スニーカー。（笑）';
let font_default = getDefaultFont();
let font_randomized = font_default;
// available fonts
let font_pool = {
"Hiragino-Kaku-Gothic-Pro" : {full_font_name: "Hiragino Kaku Gothic Pro, ヒラギノ角ゴ Pro W3", display_name: "Hiragino Kaku Gothic Pro", url: 'local', recommended: false},
"Hiragino-Maru-Gothic-Pro" : {full_font_name: "Hiragino Maru Gothic Pro, ヒラギノ丸ゴ Pro W3", display_name: "Hiragino Maru Gothic Pro", url: 'local', recommended: false},
"Hiragino-Mincho-Pro" : {full_font_name: "Hiragino Mincho Pro, ヒラギノ明朝 Pro W3", display_name: "Hiragino Mincho Pro", url: 'local', recommended: false},
// Default Windows fonts
"Meiryo" : {full_font_name: "Meiryo, メイリオ", display_name: "Meiryo", url: 'local', recommended: false},
"MS-PGothic" : {full_font_name: "MS PGothic, ＭＳ Ｐゴシック, MS Gothic, ＭＳ ゴック", display_name: "MS Gothic", url: 'local', recommended: false},
"MS-PMincho" : {full_font_name: "MS PMincho, ＭＳ Ｐ明朝, MS Mincho, ＭＳ 明朝", display_name: "MS Mincho", url: 'local', recommended: false},
"Yu-Gothic" : {full_font_name: "Yu Gothic, YuGothic", display_name: "Yu Gothic", url: 'local', recommended: false},
"Yu-Mincho" : {full_font_name: "Yu Mincho, YuMincho", display_name: "Yu Mincho", url: 'local', recommended: false},
// GoogleFonts
"Zen-Kurenaido" : {full_font_name: "Zen Kurenaido", display_name: "Zen Kurenaido", url: 'https://fonts.googleapis.com/css?family=Zen+Kurenaido&subset=japanese', recommended: false},
"Kaisei-Opti" : {full_font_name: "Kaisei Opti", display_name: "Kaisei Opti", url: 'https://fonts.googleapis.com/css?family=Kaisei+Opti&subset=japanese', recommended: false},
"Reggae-One" : {full_font_name: "Reggae One", display_name: "Reggae One", url: 'https://fonts.googleapis.com/css?family=Reggae+One&subset=japanese', recommended: false},
"New-Tegomin" : {full_font_name: "New Tegomin", display_name: "New Tegomin", url: 'https://fonts.googleapis.com/css?family=New+Tegomin&subset=japanese', recommended: false},
"Yuji-Boku" : {full_font_name: "Yuji Boku", display_name: "Yuji Boku", url: 'https://fonts.googleapis.com/css?family=Yuji+Boku&subset=japanese', recommended: false},
"Yuji-Mai" : {full_font_name: "Yuji Mai", display_name: "Yuji Mai", url: 'https://fonts.googleapis.com/css?family=Yuji+Mai&subset=japanese', recommended: false},
"Yuji-Syuku" : {full_font_name: "Yuji Syuku", display_name: "Yuji Syuku", url: 'https://fonts.googleapis.com/css?family=Yuji+Syuku&subset=japanese', recommended: false},
"DotGothic16" : {full_font_name: "DotGothic16", display_name: "DotGothic16", url: 'https://fonts.googleapis.com/css?family=DotGothic16&subset=japanese', recommended: true},
"Hachi-Maru-Pop" : {full_font_name: "Hachi Maru Pop", display_name: "Hachi Maru Pop", url: 'https://fonts.googleapis.com/css?family=Hachi+Maru+Pop&subset=japanese', recommended: true},
"Yomogi" : {full_font_name: "Yomogi", display_name: "Yomogi", url: 'https://fonts.googleapis.com/css?family=Yomogi&subset=japanese', recommended: false},
"Potta-One" : {full_font_name: "Potta One", display_name: "Potta One", url: 'https://fonts.googleapis.com/css?family=Potta+One&subset=japanese', recommended: false},
"Dela-Gothic-One" : {full_font_name: "Dela Gothic One", display_name: "Dela Gothic One", url: 'https://fonts.googleapis.com/css?family=Dela+Gothic+One&subset=japanese', recommended: true},
"RocknRoll-One" : {full_font_name: "RocknRoll One", display_name: "RocknRoll One", url: 'https://fonts.googleapis.com/css?family=RocknRoll+One&subset=japanese', recommended: false},
"Stick" : {full_font_name: "Stick", display_name: "Stick", url: 'https://fonts.googleapis.com/css?family=Stick&subset=japanese', recommended: true},
"Yusei-Magic" : {full_font_name: "Yusei Magic", display_name: "Yusei Magic", url: 'https://fonts.googleapis.com/css?family=Yusei+Magic&subset=japanese', recommended: false},
"Kaisei-Decol" : {full_font_name: "Kaisei Decol", display_name: "Kaisei Decol", url: 'https://fonts.googleapis.com/css?family=Kaisei+Decol&subset=japanese', recommended: false},
"Kaisei-Tokumin" : {full_font_name: "Kaisei Tokumin", display_name: "Kaisei Tokumin", url: 'https://fonts.googleapis.com/css?family=Kaisei+Tokumin&subset=japanese', recommended: false},
// Other popular fonts
"ArmedBanana" : {full_font_name: "ArmedBanana", display_name: "Armed Banana", url: 'https://marciska.github.io/Jitai/ArmedBanana.css', recommended: true},
"ArmedLemon" : {full_font_name: "ArmedLemon", display_name: "Armed Lemon", url: 'local', recommended: false},
"AoyagiReisyosimo-AoyagiKouzan" : {full_font_name: "aoyagireisyosimo2, AoyagiKouzanFont2OTF", display_name: "Aoyagi Kouzan", url: 'local', recommended: false},
"Aquafont" : {full_font_name: "aquafont", display_name: "Aquafont", url: 'local', recommended: false},
"Shin-Maru-Go-Pro" : {full_font_name: "A-OTF Shin Maru Go Pro", display_name: "Shin Maru Go Pro", url: 'local', recommended: false},
"Chifont" : {full_font_name: "'chifont+', chifont", display_name: "Chifont", url: 'local', recommended: false},
"Cinecaption" : {full_font_name: "cinecaption", display_name: "Cinecaption", url: 'local', recommended: false},
"Darts" : {full_font_name: "darts font", display_name: "Darts", url: 'https://marciska.github.io/Jitai/Darts.css', recommended: false},
"EPSON-行書体Ｍ" : {full_font_name: "EPSON 行書体Ｍ", display_name: "EPSON 行書体Ｍ", url: 'local', recommended: false},
"EPSON-正楷書体Ｍ" : {full_font_name: "EPSON 正楷書体Ｍ", display_name: "EPSON 正楷書体Ｍ", url: 'local', recommended: false},
"EPSON-教科書体Ｍ" : {full_font_name: "EPSON 教科書体Ｍ", display_name: "EPSON 教科書体Ｍ", url: 'local', recommended: false},
"EPSON-太明朝体Ｂ" : {full_font_name: "EPSON 太明朝体Ｂ", display_name: "EPSON 太明朝体Ｂ", url: 'local', recommended: false},
"EPSON-太行書体Ｂ" : {full_font_name: "EPSON 太行書体Ｂ", display_name: "EPSON 太行書体Ｂ", url: 'local', recommended: false},
"EPSON-丸ゴシック体Ｍ" : {full_font_name: "EPSON 丸ゴシック体Ｍ", display_name: "EPSON 丸ゴシック体Ｍ", url: 'local', recommended: false},
"FC-Flower" : {full_font_name: "FC-Flower", display_name: "FC-Flower", url: 'https://marciska.github.io/Jitai/FCFlower.css', recommended: false},
"HakusyuKaisyoExtraBold_kk" : {full_font_name: "HakusyuKaisyoExtraBold_kk", display_name: "Hakusyu Kaisyo (Extra Bold)", url: 'local', recommended: false},
"Hosofuwafont" : {full_font_name: "Hosofuwafont", display_name: "Hoso Fuwa", url: 'https://marciska.github.io/Jitai/HosoFuwa.css', recommended: false},
"Nagayama-Kai" : {full_font_name: "nagayama_kai", display_name: "Nagayama Kai", url: 'https://marciska.github.io/Jitai/NagayamaKai.css', recommended: false},
"Pop-Rum-Cute" : {full_font_name: "PopRumCute", display_name: "Pop Rum Cute", url: 'https://marciska.github.io/Jitai/PopRumCute.css', recommended: false},
"San-Chou-Me" : {full_font_name: "santyoume-font", display_name: "San Chou Me", url: 'https://marciska.github.io/Jitai/SanChouMe.css', recommended: false},
// Other popular fonts
"KouzanBrushFontGyousyo" : {full_font_name: "KouzanBrushFontGyousyo", display_name: "KBFG", url: 'local', recommended: true},
"saruji" : {full_font_name: "saruji", display_name: "Saruji", url: 'local', recommended: true},
"ZinHenaKokuryu-RCF" : {full_font_name: "ZinHenaKokuryu-RCF", display_name: "ZinHenaKokuryu-RCF", url: 'local', recommended: true},
"ZinHenaKokuryu-RDF" : {full_font_name: "ZinHenaKokuryu-RDF", display_name: "ZinHenaKokuryu-RDF", url: 'local', recommended: true},
// Other popular fonts
"KouzanBrushFontGyousyo" : {full_font_name: "KouzanBrushFontGyousyo", display_name: "KBFG", url: 'local', recommended: true},
"saruji" : {full_font_name: "さるじ", display_name: "Saruji", url: 'local', recommended: true},
"ZinHenaKokuryu-RCF" : {full_font_name: "ジンへな黒竜", display_name: "ZinHenaKokuryu RCF", url: 'local', recommended: true},
"ZinHenaKokuryu-RDF" : {full_font_name: "ZinHenaKokuryu-RDF", display_name: "ZinHenaKokuryu-RDF", url: 'local', recommended: true},
};
// fonts that are selected by user to be shown
let font_pool_selected = [];
// bool indicating if hovering effect is flipped
let hover_flipped = false;
//===================================================================
// Settings related stuff
//-------------------------------------------------------------------
function installSettingsMenu() {
wkof.Menu.insert_script_link({
name: script_id,
submenu: 'Settings',
title: script_name,
on_click: settingsOpen
});
}
function settingsPrepare(dialog) {
dialog.dialog({width:720});
}
async function settingsSave(settings) {
await wkof.Settings.save(script_id); //.then(settingsApply).then(settingsClose);
settingsApply(settings);
settingsClose(settings);
}
async function settingsLoad() {
wkof.Settings.load(script_id).then(settingsApply);
}
function settingsClose(settings) {
// Remove all urls to fonts we don't use
for (const [fontkey, value] of Object.entries(font_pool)) {
if (!(fontkey in settings)) { continue; }
if (!settings[fontkey]) { // check if font is disabled
// if it is a webfont, uninstall webfont
if (value.url !== 'local') {
uninstallWebfont(value.full_font_name, value.url);
}
}
}
}
function settingsApply(settings) {
// clear cache of selected fonts
font_pool_selected = [];
// now refill the pool of selected fonts
for (const [fontkey, value] of Object.entries(font_pool)) {
if (!(fontkey in settings)) { continue; }
if (settings[fontkey]) { // check if font is enabled
// if it is a webfont, install webfont
if (value.url !== 'local') {
installWebfont(value.full_font_name, value.url);
// recheck if font is installed on machine
// if (!isFontInstalled(value.full_font_name)) { continue; }
} else { // check if local font is installed on machine
if (!isFontInstalled(value.full_font_name)) { continue; }
}
// put fonts in selected fonts
let frequency = settings[fontkey+'_frequency'];
if (frequency === undefined) { frequency = 1; } // if script started first time, the value might be undefined
frequency = Math.ceil(frequency);
for (let i = 0; i < frequency; i++) {
font_pool_selected.push(value.full_font_name);
}
}
}
// randomly shuffle font pool
shuffleArray(font_pool_selected);
updateRandomFont(true);
}
function settingsOpen() {
// install webfonts, and remove non-accesible local fonts for selection
for (const [fontkey, value] of Object.entries(font_pool)) {
if (value.url !== 'local') { // install webfonts
installWebfont(value.full_font_name, value.url);
} else if (!isFontInstalled(value.full_font_name)) { // remove local fonts that are not installed for selection
delete font_pool[fontkey];
}
}
// order fonts alphabetically
const fontkeys = Object.keys(font_pool).sort((a, b) =>
font_pool[a].display_name.localeCompare(font_pool[b].display_name, undefined, {sensitivity: 'base'})
);
// prepare selection option for every font
const font_selector = Object.fromEntries(fontkeys.map(fontkey => ['BOX_'+fontkey, {
type: 'group',
label: `<span class="font_label${font_pool[fontkey].recommended ? ' font_recommended' : ''}">${font_pool[fontkey].display_name}</span>`,
content: {
sampletext: {
type: 'html',
html: `<p class="font_example" style="font-family:'${font_pool[fontkey].full_font_name}'">${example_sentence}</p>`
},
[fontkey]: {
type: 'checkbox',
label: 'Use font in '+script_name,
default: false,
},
[fontkey+'_frequency']: {
type: 'number',
label: 'Frequency',
hover_tip: 'The higher the value, the more often you see this font during review. It is affected by how many fonts you have enabled.',
default: 1,
min: 1,
step: 1,
}
}
}]));
// prepare configuration dialog
let dialog = new wkof.Settings({
script_id: script_id,
title: script_name+' Settings',
pre_open: settingsPrepare,
on_save: settingsSave,
on_close: settingsClose,
content: {
currentfont: {
type: 'group',
label: `<span class="font_label">Current Font: ${font_randomized}</span>`,
content: {
sampletext: {
type: 'html',
html: `<p class="font_example" style="font-family:'${font_randomized}'">${example_sentence}</p>`
}
}
},
legend: {
type: 'html',
html: `<div class="font_legend"><span class="font_recommended">: Recommended Font</span></div>`
},
divider: {
type: 'section',
label: `Filter Fonts (${fontkeys.length} available)`
},
...font_selector
}
});
dialog.open();
}
//===================================================================
// Main Script Functionality
//-------------------------------------------------------------------
function getDefaultFont() {
return getComputedStyle(item_element).fontFamily;
}
function isFontInstalled(font_name) {
// Approach from kirupa.com/html5/detect_whether_font_is_installed.htm - thanks!
// Will return false for the browser's default monospace font, sadly.
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var text = "wim-—l~ツ亻".repeat(100); // Characters with widths that often vary between fonts.
context.font = "72px monospace";
var defaultWidth = context.measureText(text).width;
// Microsoft Edge raises an error when a context's font is set to a string
// containing certain special characters... so that needs to be handled.
try {
context.font = "72px " + font_name + ", monospace";
} catch (e) {
return false;
}
var testWidth = context.measureText(text).width;
return testWidth != defaultWidth;
}
function isCanvasBlank(canvas) {
return !canvas.getContext('2d')
.getImageData(0, 0, canvas.width, canvas.height).data
.some(channel => channel !== 0);
}
function canRepresentGlyphs(fontName, glyphs) {
var canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
var context = canvas.getContext("2d");
context.textBaseline = 'top';
context.font = "24px " + fontName;
var result = true;
for (var i = 0; i < glyphs.length; i++) {
context.fillText(glyphs[i], 0, 0);
if (isCanvasBlank(canvas)) {
result = false;
break;
}
context.clearRect(0, 0, canvas.width, canvas.height);
}
return result;
}
function installWebfont(font_name, url) {
// If webfont already installed on local machine, don't need to reinstall
if (isFontInstalled(font_name)) { return; }
// install webfont
const link = document.querySelector(`link[href="${url}"]`);
if (!link) {
const newlink = document.createElement("link");
newlink.href = url;
newlink.rel = "stylesheet";
document.head.append(newlink);
}
}
function uninstallWebfont(font_name, url) {
const link = document.querySelector(`link[href="${url}"]`);
if (!link) {
link.remove();
}
}
function addPreconnectLinks() {
// add preconnect links to GoogleFonts servers
let googleApiLink = document.querySelector(`link[href="https://fonts.googleapis.com"]`);
if (!googleApiLink) {
googleApiLink = document.createElement("link");
googleApiLink.rel = "preconnect";
googleApiLink.href = "https://fonts.googleapis.com";
document.head.append(googleApiLink);
}
let gstaticLink = document.querySelector(`link[href="https://fonts.gstatic.com"]`);
if (!gstaticLink) {
gstaticLink = document.createElement("link");
gstaticLink.rel = "preconnect";
gstaticLink.href = "https://fonts.gstatic.com";
gstaticLink.crossOrigin = true;
document.head.append(gstaticLink);
}
}
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function applyRandomizedFont() {
item_element.style.fontFamily = font_randomized;
}
function revertToDefaultFont() {
item_element.style.fontFamily = font_default;
}
item_element.addEventListener('mouseenter', revertToDefaultFont);
item_element.addEventListener('mouseleave', applyRandomizedFont);
function updateRandomFont(update) {
// choose new random font
if (update) {
const glyphs = item_element.innerText;
if (font_pool_selected.length == 0) {
console.log(script_name+': empty font pool!')
font_randomized = font_default;
} else {
do {
font_randomized = font_pool_selected[Math.floor(Math.random() * font_pool_selected.length)];
} while (!canRepresentGlyphs(font_randomized, glyphs));
}
}
// show font
if (hover_flipped) {
revertToDefaultFont();
} else {
applyRandomizedFont();
}
}
function registerJitaiEvents() {
// on mouse hovering, show default font
// - normal : randomized font
// - hovering: default font
let style = document.createElement("style");
style.appendChild(document.createTextNode(".character-header__characters:hover { font-family: var(--font-family-japanese-hover); }"));
item_element.style.setProperty("--font-family-japanese-hover", font_default);
document.head.appendChild(style);
// on answer submission, invert hovering event
// - normal : default font
// - hovering: randomized font
global.addEventListener("didAnswerQuestion", function(event) {
hover_flipped = true;
updateRandomFont(false);
});
// on advancing to next item question, randomize font again
global.addEventListener("willShowNextQuestion", function(event)
{
hover_flipped = false;
updateRandomFont(true);
});
// on reverting an answer by DoubleCheckScript, reroll random font and fix inverting of hovering
global.addEventListener("didUnanswerQuestion", function(event)
{
hover_flipped = false;
updateRandomFont(true);
});
// add event to reroll randomized font
global.addEventListener("keydown", function(event)
{
if (event.ctrlKey && event.key === 'j') {
updateRandomFont(true);
}
});
}
//===================================================================
// Script Startup
//-------------------------------------------------------------------
function startup() {
// initialization of the Wanikani Open Framework
if (!wkof) {
if (confirm(script_name+' requires Wanikani Open Framework.\nDo you want to be forwarded to the installation instructions?')) {
global.location.href = 'https://community.wanikani.com/t/instructions-installing-wanikani-open-framework/28549';
}
return;
} else {
const wkof_modules = 'Settings,Menu';
wkof.include(wkof_modules);
wkof
.ready(wkof_modules)
.then(addPreconnectLinks)
.then(registerJitaiEvents)
.then(settingsLoad)
.then(installSettingsMenu);
}
// insert CSS
document.head.insertAdjacentHTML('beforeend',
`<style>
.font_label {
font-size: 1.2em;
display: flex;
align-items: center;
}
.font_legend {
text-align: center;
margin: 15px !important;
}
.font_example {
margin: 5px 10px 10px 10px !important;
font-size: 1.6em;
line-height: 1.1em;
}
.font_recommended::before {
content: '⭐️';
font-size: 1.4em;
}
</style>`
);
}
startup();
})(window);
12 Likes