├── imgs
├── howto.gif
├── jitai.ico
├── logo_small.png
└── logo.svg
├── .markdownlint.json
├── fonts
├── PopRumCute.css
├── Darts.css
├── FCFlower.css
├── HosoFuwa.css
├── ArmedBanana.css
├── NagayamaKai.css
└── SanChouMe.css
├── LICENSE
├── .github
└── workflows
│ └── publishFonts.yml
├── README.md
└── Jitai.user.js
/imgs/howto.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marciska/Jitai/HEAD/imgs/howto.gif
--------------------------------------------------------------------------------
/imgs/jitai.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marciska/Jitai/HEAD/imgs/jitai.ico
--------------------------------------------------------------------------------
/imgs/logo_small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/marciska/Jitai/HEAD/imgs/logo_small.png
--------------------------------------------------------------------------------
/.markdownlint.json:
--------------------------------------------------------------------------------
1 | {
2 | "default": true,
3 | "MD013": false,
4 | "MD033": false,
5 | "MD041": false
6 | }
--------------------------------------------------------------------------------
/fonts/PopRumCute.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'PopRumCute';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('PopRumCute'),
6 | url('https://moji-waku.com/poprumcute/font/poprum.woff') format('woff');
7 | }
--------------------------------------------------------------------------------
/fonts/Darts.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'darts font';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('darts font'),
6 | url('https://raw.githubusercontent.com/davidsansome/tsurukame/master/www/fonts/darts-font.woff') format('woff');
7 | }
--------------------------------------------------------------------------------
/fonts/FCFlower.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'FC-Flower';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('FC-Flower'),
6 | url('https://raw.githubusercontent.com/davidsansome/tsurukame/master/www/fonts/fc-flower.ttf') format('truetype');
7 | }
--------------------------------------------------------------------------------
/fonts/HosoFuwa.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Hosofuwafont';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('Hosofuwafont'),
6 | url('https://raw.githubusercontent.com/davidsansome/tsurukame/master/www/fonts/hoso-fuwa.ttf') format('truetype');
7 | }
--------------------------------------------------------------------------------
/fonts/ArmedBanana.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'ArmedBanana';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('ArmedBanana'),
6 | url('https://raw.githubusercontent.com/davidsansome/tsurukame/master/www/fonts/armed-banana.ttf') format('truetype');
7 | }
--------------------------------------------------------------------------------
/fonts/NagayamaKai.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'nagayama_kai';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('nagayama_kai'),
6 | url('https://raw.githubusercontent.com/davidsansome/tsurukame/master/www/fonts/nagayama-kai.otf') format('truetype');
7 | }
--------------------------------------------------------------------------------
/fonts/SanChouMe.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'santyoume-font';
3 | font-style: normal;
4 | font-weight: normal;
5 | src: local('santyoume-font'),
6 | url('https://raw.githubusercontent.com/davidsansome/tsurukame/master/www/fonts/san-chou-me.ttf') format('truetype');
7 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Samuel R. Messner (@obskyr), 2023 Marco Omainska (@marciska)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/.github/workflows/publishFonts.yml:
--------------------------------------------------------------------------------
1 | # A workflow to host fonts on github pages
2 |
3 | # the name of this workflow
4 | name: Publish Fonts
5 |
6 | # Controls when the workflow will run
7 | on:
8 | # Triggers the workflow on push or pull request events - but only for the "main" branch
9 | push:
10 | branches: [ "main" ]
11 | pull_request:
12 | branches: [ "main" ]
13 | # Allows you to run this workflow manually from the Actions tab
14 | workflow_dispatch:
15 |
16 | # inform github to permit this workflow to write on the repository branches
17 | permissions:
18 | contents: write
19 |
20 | # define the jobs
21 | jobs:
22 |
23 | # this workflow has only 1 job - and that is to publish the fonts (stylesheets)
24 | build-and-deploy:
25 | # ensure that only one workflow runs at a time
26 | concurrency:
27 | group: ${{ github.ref }}
28 | cancel-in-progress: true # cancel all pending ones and prioritize the newest
29 |
30 | # this job will run on ubuntu-latest, but technically we can also use other OS here
31 | runs-on: ubuntu-latest
32 |
33 | # to finish this job, we have to do some steps in successive order
34 | steps:
35 | # Check-out the repository under $GITHUB_WORKSPACE, so the job can access it
36 | - name: 🛎️ Setup Git repo
37 | uses: actions/checkout@v3
38 |
39 | # Deploy to Github Pages
40 | - name: 🚀 Deploy to GH-Pages
41 | uses: JamesIves/github-pages-deploy-action@v4
42 | with:
43 | folder: fonts # which folder shall be published
44 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | The font randomizer that fits
4 |
5 |
6 | **Jitai** (字体) is a userscript for [WaniKani](https://wanikani.com).
7 | It sets the font of the radical/kanji/vocabulary automatically to a random Japanese font.
8 | > [@obskyr](https://community.wanikani.com/t/jitai-字体-the-font-randomizer-that-fits/12617#jitai-logouploadskfps3jv5ojuckdedpacfc4qn4ppng-what-is-jitai-1): One thing that can become a bit of a problem when using WaniKani is that you are only ever exposed to one font. What this means is that if you ever run into a kanji in the wild, even if you know it, you might not recognize it. Especially with handwriting and calligraphy and all that jazz being around, it helps a lot to get in a bit of training on fonts that aren’t Meiryo.
9 |
10 | 
11 |
12 | ## Features
13 |
14 | - Supports fonts installed on your machine[^1]
15 | - **(NEW)** Supports webfonts
16 | - **(NEW)** New settings pannel to disable/enable fonts during review
17 | - Hover over a font to change it back to normal font (useful if you cannot read it sometimes)
18 |
19 | ## Installation
20 |
21 | First make sure you have a userscript manager like **Tampermonkey** installed.
22 | Then click on the link below, and your userscript manager should directly recognize it as a userscript to install:
23 | ${fonts_available[fontkey].display_name} ${fonts_available[fontkey].url !== 'local' ? ' `,
308 | content: {
309 | sampletext: {
310 | type: 'html',
311 | html: `${example_sentence}
`
312 | },
313 | [fontkey]: {
314 | type: 'checkbox',
315 | label: 'Use font in '+script_name,
316 | default: false,
317 | },
318 | [fontkey+'_frequency']: {
319 | type: 'number',
320 | label: 'Frequency',
321 | 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.',
322 | default: 1,
323 | min: 1,
324 | step: 1,
325 | }
326 | }
327 | }]));
328 | const font_unavailable_selector = Object.fromEntries(fontkeys_unavailable.map(fontkey => ['BOX_'+fontkey, {
329 | type: 'html',
330 | html: `${fonts_unavailable[fontkey].download !== '' ? '
`,
331 | }]));
332 |
333 | // prepare configuration dialog
334 | let dialog = new wkof.Settings({
335 | script_id: script_id,
336 | title: script_name+' Settings',
337 | pre_open: settingsPrepare,
338 | on_save: settingsSave,
339 | on_close: settingsClose,
340 | content: {
341 | currentfont: {
342 | type: 'group',
343 | label: `Current Font: ${((font_randomized!==undefined) ? font_randomized.display_name : '?')} `,
344 | content: {
345 | sampletext: {
346 | type: 'html',
347 | html: `${example_sentence}
`
348 | }
349 | }
350 | },
351 | legend: {
352 | type: 'html',
353 | html: `: Recommended Font
Jitai will during review only choose fonts that can fully represent the review item. (Except Safari browser, here it is recommended to choose only fonts that have all characters included.)
`
354 | },
355 | reroll_button: {
356 | type: 'checkbox',
357 | label: 'Show button for re-rolling font',
358 | default: false,
359 | },
360 | divider_available: {
361 | type: 'section',
362 | label: `Filter Fonts (${fontkeys_available.length} available)`
363 | },
364 | ...font_available_selector,
365 | divider_unavailable: {
366 | type: 'section',
367 | label: `Local Fonts not found: ${fontkeys_unavailable.length}`
368 | },
369 | legend_fonts_unavailable: {
370 | type: 'html',
371 | html: `: Font available online, visit download website. Note that not all browsers support local fonts due to font fingerprinting attacks.
`
372 | },
373 | ...font_unavailable_selector
374 | }
375 | });
376 | dialog.open();
377 | }
378 |
379 | // ===================================================================
380 | // Main Script Functionality
381 | // ===================================================================
382 |
383 | function isFontInstalled(font_name) {
384 | // Approach from kirupa.com/html5/detect_whether_font_is_installed.htm - thanks!
385 | // Will return false for the browser's default monospace font, sadly.
386 | var canvas = document.createElement('canvas');
387 | var context = canvas.getContext('2d');
388 | var text = "wim-—l~ツ亻".repeat(100); // Characters with widths that often vary between fonts.
389 |
390 | context.font = "72px monospace";
391 | var defaultWidth = context.measureText(text).width;
392 |
393 | // Microsoft Edge raises an error when a context's font is set to a string
394 | // containing certain special characters... so that needs to be handled.
395 | try {
396 | context.font = "72px " + font_name + ", monospace";
397 | } catch (e) {
398 | return false;
399 | }
400 | var testWidth = context.measureText(text).width;
401 |
402 | return testWidth !== defaultWidth;
403 | }
404 | function checkIfWebfontsLocallyInstalled() {
405 | // NOTE this function should run BEFORE addPreconnectLinks().
406 | // If it is run after, adobe-webfonts are falsely detected as local fonts
407 | for (const fontkey of Object.keys(font_pool)) {
408 | if (font_pool[fontkey].url === 'local') { return; }
409 | if (isFontInstalled(font_pool[fontkey].full_font_name)) {
410 | font_pool[fontkey].url = 'local';
411 | }
412 | }
413 | }
414 |
415 | function isCanvasBlank(canvas) {
416 | return !canvas.getContext('2d', { willReadFrequently: true })
417 | .getImageData(0, 0, canvas.width, canvas.height).data
418 | .some(channel => channel !== 0);
419 | }
420 | function canRepresentGlyphs(fontName, glyphs) {
421 | const canvas = document.createElement('canvas');
422 | canvas.width = 50;
423 | canvas.height = 50;
424 | const ctx = canvas.getContext("2d", { willReadFrequently: true });
425 | ctx.textBaseline = 'top';
426 | ctx.font = "24px " + fontName;
427 |
428 | // write each glyph on the canvas; if canvas is empty then glyph cannot be represented
429 | // BUG on Safari, ctx.fillText() doesn't work with custom fonts (sometimes?!)
430 | for (let i = 0; i < glyphs.length; i++) {
431 | ctx.fillText(glyphs[i], 0, 0);
432 | if (isCanvasBlank(canvas)) { return false; }
433 | ctx.clearRect(0, 0, canvas.width, canvas.height);
434 | }
435 |
436 | return true;
437 | }
438 |
439 | function installWebfont(font_name, url) {
440 | // If webfont already installed on local machine, don't need to reinstall
441 | if (isFontInstalled(font_name)) { return; }
442 |
443 | // install webfont
444 | const link = document.querySelector(`link[href="${url}"]`);
445 | if (link===null) {
446 | console.debug(script_name+': installing webfont '+font_name);
447 | const newlink = document.createElement("link");
448 | newlink.href = url;
449 | newlink.rel = "stylesheet";
450 | document.head.append(newlink);
451 | }
452 | }
453 | function uninstallWebfont(font_name, url) {
454 | const link = document.querySelector(`link[href="${url}"]`);
455 | if (link!==null) {
456 | console.debug(script_name+': uninstalling webfont '+font_name);
457 | link.remove();
458 | }
459 | }
460 | function addPreconnectLinks() {
461 | // add preconnect links to GoogleFonts servers
462 | let googleApiLink = document.querySelector(`link[href="https://fonts.googleapis.com"]`);
463 | if (!googleApiLink) {
464 | googleApiLink = document.createElement("link");
465 | googleApiLink.rel = "preconnect";
466 | googleApiLink.href = "https://fonts.googleapis.com";
467 | document.head.append(googleApiLink);
468 | }
469 | let gstaticLink = document.querySelector(`link[href="https://fonts.gstatic.com"]`);
470 | if (!gstaticLink) {
471 | gstaticLink = document.createElement("link");
472 | gstaticLink.rel = "preconnect";
473 | gstaticLink.href = "https://fonts.gstatic.com";
474 | gstaticLink.crossOrigin = true;
475 | document.head.append(gstaticLink);
476 | }
477 |
478 | // connect to AdobeFonts via their method
479 | let script = document.getElementById("adobe_fonts_script");
480 | if (!script) {
481 | script = document.createElement("script");
482 | script.setAttribute('id','adobe_fonts_script');
483 | script.innerHTML = `
484 | (function(d) {
485 | var config = {
486 | kitId: 'xad5qou',
487 | scriptTimeout: 3000,
488 | async: true
489 | },
490 | h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
491 | })(document);
492 | `;
493 | document.head.appendChild(script);
494 | }
495 | }
496 |
497 | function shuffleArray(array) {
498 | for (let i = array.length - 1; i > 0; i--) {
499 | const j = Math.floor(Math.random() * (i + 1));
500 | [array[i], array[j]] = [array[j], array[i]];
501 | }
502 | }
503 |
504 | function updateRandomFont() {
505 | // choose new random font
506 | const glyphs = item_element.innerText;
507 | if (font_pool_selected.length === 0) {
508 | console.warn(script_name+': empty font pool!')
509 | font_randomized = font_default;
510 | } else {
511 | let i = 0;
512 | do {
513 | i = i + 1;
514 | font_randomized = font_pool_selected[Math.floor(Math.random() * font_pool_selected.length)];
515 | } while (!canRepresentGlyphs(font_randomized.full_font_name, glyphs) && i < 100);
516 | if (i >= 100) {
517 | console.error(script_name+': consistent glyph errors -- falling back to default font');
518 | font_randomized = font_default;
519 | }
520 | }
521 | console.debug(script_name+': updating random font to '+font_randomized.display_name);
522 | style_element.innerHTML = style_element.innerHTML.replace(/(--font-family-japanese:).*;([\s\S]*?--font-family-japanese-hover:).*;/,`$1 ${font_randomized.full_font_name};$2 ${font_default.full_font_name};`);
523 | }
524 |
525 | function setflippedFontState() {
526 | const flipped = hover_flipped ? !modifier_held : modifier_held;
527 | item_element.classList.toggle('flipped', flipped);
528 | }
529 |
530 | function insertStyle() {
531 | // insert CSS
532 | if ((style_element = document.getElementById(`${script_id}-style`)) != null) return;
533 | style_element = document.createElement('style');
534 | style_element.setAttribute('id', `${script_id}-style`);
535 | style_element.innerHTML = `
536 | .font_label {
537 | font-size: 1.2em;
538 | display: flex;
539 | gap: 5px;
540 | align-items: center;
541 | }
542 | .font_label a:link, .font_label a:visited, .font_label a:hover, .font_label a:active, .font_label a i {
543 | text-decoration: none;
544 | }
545 | a i {
546 | font-style: normal;
547 | }
548 | .font_legend {
549 | text-align: center;
550 | margin: 15px !important;
551 | display: flex;
552 | flex-direction: column;
553 | align-items: flex-start;
554 | gap: 5px;
555 | padding-left: 5% !important;
556 | }
557 | p.font_legend {
558 | display: block;
559 | text-align: start;
560 | margin: 15px !important;
561 | padding: 0px !important;
562 | }
563 | .font_example {
564 | margin: 5px 10px 10px 10px !important;
565 | font-size: 1.6em;
566 | line-height: 1.1em;
567 | }
568 | .font_recommended::before {
569 | content: '⭐️';
570 | font-size: 1.4em;
571 | }
572 | .font_bugged::after {
573 | content: '🐛';
574 | font-size: 1.4em;
575 | }
576 | .downloadfont::before {
577 | content: '⬇️';
578 | font-size: 1.4em;
579 | }
580 | .character-header__characters {
581 | --font-family-japanese: ;
582 | --font-family-japanese-hover: ;
583 | font-family: var(--font-family-japanese);
584 | }
585 | .character-header__characters:hover { font-family: var(--font-family-japanese-hover); }
586 | .character-header__characters.flipped { font-family: var(--font-family-japanese-hover); }
587 | .character-header__characters.flipped:hover { font-family: var(--font-family-japanese); }
588 | `;
589 | document.head.appendChild(style_element);
590 | }
591 |
592 | function cacheDefaultElementStyles() {
593 | //if (font_default !== undefined && font_randomized !== undefined) return;
594 | item_element = document.getElementsByClassName("character-header__characters")[0];
595 | if (!item_element) return;
596 |
597 | // set default states
598 | font_default = {display_name:'Default Font', full_font_name:getComputedStyle(item_element).fontFamily};
599 | font_randomized = font_default;
600 | }
601 |
602 | //----------
603 | // Events
604 | //----------
605 |
606 | function onKeyDown(event) { // defines short-hand commands like re-roll font and show default font
607 | if (event.repeat) return;
608 | switch (event.key) {
609 | // on holding ctrl and shift, swap the shown font
610 | case 'Control':
611 | case 'Shift':
612 | if (!event.ctrlKey || !event.shiftKey) return;
613 | console.debug(script_name+': pressed shortcut to show default font');
614 | modifier_held = true;
615 | setflippedFontState();
616 | break;
617 | // on alt+j, update to a new random font
618 | case 'j':
619 | if (!(event.altKey || event.ctrlKey)) return;
620 | console.debug(script_name+': pressed shortcut to re-roll random font');
621 | updateRandomFont();
622 | setflippedFontState();
623 | break;
624 | }
625 | }
626 | function onKeyUp(event) { // if modifier keys are released, set modifier to false
627 | if (event.repeat) return;
628 | switch (event.key) {
629 | case 'Control':
630 | case 'Shift':
631 | modifier_held = false;
632 | setflippedFontState();
633 | break;
634 | }
635 | }
636 | function onLostFocus() {
637 | console.debug(script_name+': user lost focus, disabling modifier');
638 | modifier_held = false;
639 | setflippedFontState();
640 | }
641 | function onDidAnswerQuestion() {
642 | console.debug(script_name+': user answered question, show default font');
643 | if (!pageRegex.test(document.location.pathname)) return;
644 | hover_flipped = true;
645 | setflippedFontState();
646 | }
647 | function onDidUnanswerQuestion() {
648 | console.debug(script_name+': user reverted answer by Double-Checker script, showing random font again');
649 | if (!pageRegex.test(document.location.pathname)) return;
650 | hover_flipped = false;
651 | updateRandomFont();
652 | setflippedFontState();
653 | }
654 | function onWillShowNextQuestion() {
655 | console.debug(script_name+': about to show next question, re-rolling random font');
656 | if (!pageRegex.test(document.location.pathname)) return;
657 | hover_flipped = false;
658 | if (setup_complete) { // TODO: if check maybe not necessary, since event only triggered when setup already done?
659 | updateRandomFont();
660 | setflippedFontState();
661 | }
662 | }
663 |
664 | function registerJitaiEvents() {
665 | // on answer submission, invert hovering event
666 | // - normal : default font
667 | // - hovering: randomized font
668 | window.addEventListener("didAnswerQuestion", onDidAnswerQuestion, listenerOptions); // event is dispatched for the window only
669 |
670 | // on advancing to next item question, randomize font again
671 | window.addEventListener("willShowNextQuestion", onWillShowNextQuestion, listenerOptions); // event is dispatched for the window only
672 |
673 | // on reverting an answer by DoubleCheckScript, reroll random font and fix inverting of hovering
674 | window.addEventListener("didUnanswerQuestion", onDidUnanswerQuestion, listenerOptions); // event is dispatched for the window only
675 |
676 | // add event to show regular font
677 | // add event to reroll randomized font
678 | document.body.addEventListener("keydown", onKeyDown, listenerOptions);
679 | document.body.addEventListener("keyup", onKeyUp, listenerOptions);
680 | // when page loses focus, revert any temporary modifications
681 | document.body.addEventListener("blur", onLostFocus, listenerOptions);
682 | }
683 |
684 | function unregisterJitaiEvents() {
685 | window.removeEventListener("didAnswerQuestion", onDidAnswerQuestion, listenerOptions);
686 | window.removeEventListener("willShowNextQuestion", onWillShowNextQuestion, listenerOptions);
687 | window.removeEventListener("didUnanswerQuestion", onDidUnanswerQuestion, listenerOptions);
688 | document.body.removeEventListener("keydown", onKeyDown, listenerOptions);
689 | document.body.removeEventListener("keyup", onKeyUp, listenerOptions);
690 | document.body.removeEventListener("blur", onLostFocus, listenerOptions);
691 | }
692 |
693 | function installRerollButton() {
694 | if (!reroll_button_enabled) return;
695 | let reroll_button = document.querySelector('#option-reroll-font');
696 | if (reroll_button) return;
697 |
698 | // Install the reroll-font button
699 | console.debug(script_name+': install re-roll button');
700 | let elem = document.querySelector('#additional-content ul'); // putting this in if-else block so that even if button support breaks because of WaniKani change, rest of Jitai will still work
701 | if (elem)
702 | {
703 | document.querySelector('#additional-content ul').style.textAlign = 'center';
704 | // async function get_controller(name) {
705 | // return await Stimulus.getControllerForElementAndIdentifier(document.querySelector(`[data-controller~="${name}"]`),name);
706 | // }
707 | // let additional_content = get_controller('additional-content');
708 | // document.querySelector('#additional-content ul').insertAdjacentHTML('beforeend',
709 | // ``
719 | // );
720 | document.querySelector('#additional-content ul').insertAdjacentHTML('beforeend',
721 | ``
732 | );
733 |
734 | // install click event
735 | document.querySelector('#option-reroll-font').addEventListener('click', updateRandomFont);
736 | }
737 | else
738 | {
739 | console.error(script_name+': Cannot add re-roll font button!');
740 | }
741 |
742 | }
743 | function uninstallRerollButton() { // maybe not needed?
744 | let reroll_button = document.querySelector('#option-reroll-font');
745 | if (reroll_button)
746 | {
747 | console.debug(script_name+': removing re-roll button');
748 | reroll_button.remove();
749 | }
750 | }
751 |
752 |
753 | //===================================================================
754 | // Script Startup
755 | //-------------------------------------------------------------------
756 | function startup() {
757 | console.debug(script_name+': Performing initial setup...');
758 |
759 | // initialization of the Wanikani Open Framework
760 | if (!wkof) {
761 | if (confirm(script_name+' requires Wanikani Open Framework.\nDo you want to be forwarded to the installation instructions?')) {
762 | global.location.href = 'https://community.wanikani.com/t/instructions-installing-wanikani-open-framework/28549';
763 | }
764 | return;
765 | }
766 | if (wkof.version.compare_to(wkof_version_needed) === 'older') {
767 | if (confirm(script_name+' requires Wanikani Open Framework version '+wkof_version_needed+'.\nDo you want to be forwarded to the update page?')) {
768 | global.location.href = 'https://greasyfork.org/en/scripts/38582-wanikani-open-framework';
769 | }
770 | return;
771 | }
772 |
773 | const wkof_modules = 'Settings, Menu';
774 | wkof.include(wkof_modules);
775 | return wkof
776 | .ready(wkof_modules)
777 | .then(checkIfWebfontsLocallyInstalled)
778 | .then(addPreconnectLinks)
779 | .then(settingsLoad)
780 | .then(installSettingsMenu)
781 | .then(() => {
782 | setup_complete = true;
783 | console.info(script_name+': SETUP COMPLETE');
784 | });
785 | }
786 |
787 | function enterReviewsPage() {
788 | console.info(script_name+': entering reviews page -- caching elements and showing random font...');
789 | const wkof_modules = 'Menu';
790 | wkof.include(wkof_modules);
791 | return wkof
792 | .ready(wkof_modules)
793 | .then(cacheDefaultElementStyles)
794 | .then(insertStyle)
795 | .then(installRerollButton)
796 | .then(registerJitaiEvents)
797 | .then(installSettingsMenu)
798 | .then(setflippedFontState)
799 | .then(() => {
800 | if (font_pool_selected.length === 0) {
801 | setTimeout(() => {
802 | alert(script_name+' detected that you have no custom fonts selected. Click the cog on the top left to select some.\n\nIf you had some selected before and now they are suddenly gone... sorry, I\'m quite forgetful sometimes :\'(')
803 | }, 2000);
804 | }
805 | else
806 | {
807 | updateRandomFont();
808 | }
809 | });
810 | }
811 |
812 | function leaveReviewsPage() {
813 | console.info(script_name+': leaving reviews page -- removing jitai events and resetting to default font...');
814 | unregisterJitaiEvents();
815 | uninstallRerollButton();
816 | font_randomized = font_default;
817 | hover_flipped = false;
818 | modifier_held = false;
819 | if (style_element)
820 | {
821 | console.debug(script_name+': removing style element');
822 | document.head.removeChild(style_element);
823 | }
824 | }
825 |
826 | startup().then(() => {
827 | // on_pageload also allows array of pageregex, then onReviewsPage will get told which regex matched -- may be useful
828 | // see: https://community.wanikani.com/t/wanikani-open-framework-developer-thread/22231/606?u=marciska
829 | wkof.on_pageload(
830 | pageRegex,
831 | enterReviewsPage,
832 | leaveReviewsPage
833 | );
834 | });
835 |
836 | })(window);
837 |
--------------------------------------------------------------------------------
Download
24 |
25 | Questions? Visit the [forum][forum].
26 |
27 | ## Note
28 |
29 | Jitai has been originally created by [@obskyr][obskyr], but hasn't been maintained since 2018 and already broke functionality.
30 | This here is a complete rewrite of the original script, taking into account that some browsers do not support using local fonts in an attempt to prevent [Font Fingerprinting](https://browserleaks.com/fonts).
31 |
32 | We greatly accept font contributions and other improvements / bug fixes.
33 | If you like this project, you can visit the [forum][forum].
34 |
35 |
36 | [^1]: Browsers that support this feature are running out. [See more](https://community.wanikani.com/t/jitai-%E5%AD%97%E4%BD%93-the-font-randomizer-that-fits/12617/644).
37 |
38 |
39 | [obskyr]:https://github.com/obskyr
40 | [forum]:https://community.wanikani.com/t/jitai-字体-the-font-randomizer-that-fits/12617
41 |
--------------------------------------------------------------------------------
/imgs/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/Jitai.user.js:
--------------------------------------------------------------------------------
1 | // ==UserScript==
2 | // @name Jitai
3 | // @author @marciska
4 | // @namespace marciska
5 | // @description Displays your WaniKani reviews with randomized fonts (based on original by @obskyr, and community-maintained)
6 | // @version 3.3.6
7 | // @icon https://raw.github.com/marciska/Jitai/master/imgs/jitai.ico
8 | // @match https://www.wanikani.com/*
9 | // @match https://preview.wanikani.com/*
10 | // @license MIT; http://opensource.org/licenses/MIT
11 | // @run-at document-end
12 | // @grant none
13 | // ==/UserScript==
14 |
15 | (function(global) {
16 | 'use strict';
17 |
18 | /* eslint no-multi-spaces: off */
19 | /* global wkof, Stimulus */
20 |
21 | //===================================================================
22 | // Variables
23 | //-------------------------------------------------------------------
24 | const script_id = "jitai";
25 | const script_name = "Jitai";
26 | const wkof_version_needed = '1.2.6';
27 | const listenerOptions = { passive: true };
28 | const pageRegex = /^\/(subjects\/(?:review.*\/?|extra_study)$|recent-mistakes)/;
29 | const example_sentence = '質問：クモの味は何だと思う?