Jitai (字体): The font randomizer that fits

WaniKani API And Third-Party Apps
720

Based on your code I fixed the Jitai v3 script as well.

Jitai v3 is here: Jitai (字体): The font randomizer that fits - WaniKani / API And Third-Party Apps - WaniKani Community

Here is my diff:

===================================================================
--- Current Version
+++ New Version
@@ -30,9 +30,8 @@
     const example_sentence = '質問：私立探偵 (P.I.) はどんな靴を履いていますか?<br>答え：・・・スニーカー。（笑）';
     
     let font_default = getDefaultFont();
     let font_randomized = font_default;
+    let hovering = false;
 
     // available fonts
     let font_pool = {
         // Default OSX fonts
@@ -347,32 +346,25 @@
         }
 
         // show font
         if (hover_flipped) {
+            item_element.style.fontFamily = hovering ? font_randomized : font_default;
-            item_element.style.setProperty("--font-family-japanese", font_default);
-            item_element.style.setProperty("--font-family-japanese-hover", font_randomized);
         } else {
+            item_element.style.fontFamily = hovering ? font_default : font_randomized;
-            item_element.style.setProperty("--font-family-japanese", font_randomized);
-            item_element.style.setProperty("--font-family-japanese-hover", font_default);
         }
     }
 
     function registerJitaiEvents() {
         // on mouse hovering, show default font
         //  - normal  : randomized font
         //  - hovering: default font
         let style = document.createElement("style");
+        item_element.style.fontFamily = font_default;
-        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);
+
+        item_element.addEventListener("mouseenter", function() {
+            hovering = true;
+            updateRandomFont(false);
+        });
+
+        item_element.addEventListener("mouseleave", function() {
+            hovering = false;
+            updateRandomFont(false);
+        });
+
         // on answer submission, invert hovering event
         //  - normal  : default font
         //  - hovering: randomized font
         global.addEventListener("didAnswerQuestion", function(event) {

Here is the complete updated script on pastebin: Jitai v3 with fixes Feb 2024 - Pastebin.com

4 Likes