Max' jpdb.io Scripts

additional_fonts.user.js

// ==UserScript==
// @name        Additional Kanji Fonts
// @namespace   Violentmonkey Scripts
// @match       https://jpdb.io/review
// @grant       none
// @version     2.0
// @author      hmry
// @description Adds two additional fonts to the Kanji review screen.
// ==/UserScript==

const LEFT_FONT = `'UDDigiKyokasho StdN', 'Noto Sans CJK JP'`;
const MIDDLE_FONT = `'DFKaiSho StdN W5', 'Noto Sans CJK JP'`;


// Kanji -> Keyword
{
    const kanjiElem = document.querySelector('.single-character.plain');
    if (kanjiElem) {
        const kanji = kanjiElem.innerText;
        kanjiElem.insertAdjacentHTML('afterbegin', `<span style="font-family: ${LEFT_FONT}; font-size: 110%; line-height: 0;">${kanji}</span>`);
        kanjiElem.insertAdjacentHTML('afterbegin', `<span style="font-family: ${MIDDLE_FONT}; font-size: 110%; line-height: 0;">${kanji}</span>`);
    }
}

// Keyword -> Kanji
function addNeighbors(kanjiElem) {
    const kanji = decodeURI(new URL(kanjiElem.href).pathname.split('/').slice(-1)[0]);
    kanjiElem.style = "min-width:15.5rem;"
    kanjiElem.insertAdjacentHTML('beforebegin', `<span style="font-family: ${MIDDLE_FONT}; line-height: 15.5rem; font-size: 17.5rem; color: #444;">${kanji}</span>`);
    kanjiElem.insertAdjacentHTML('beforebegin', `<span style="font-family: ${LEFT_FONT}; line-height: 15.5rem; font-size: 17.5rem;">${kanji}</span>`);
}

// If we load a review answer page, we can add elements directly.
{
    const kanjiElem = document.querySelector('.kanji.plain');
    if (kanjiElem)
        addNeighbors(kanjiElem);  
}

// If we load a review question page, we have to wait for the user to press the answer button, and for the page to be updated
{
    const reviewElem = document.querySelector('.review-hidden');
    if (reviewElem) {
        const mo = new MutationObserver((mutations) => {
            for (const mutation of mutations) {
                for (const node of mutation.addedNodes) {
                    if (node.nodeType !== 1)  // HTML Element node
                      continue;

                    const kanjiElem = node.querySelector('.kanji.plain');
                    if (kanjiElem)
                        addNeighbors(kanjiElem);
                }
            }
        });

        mo.observe(reviewElem, {
            attributes: false,
            childList: true,
            subtree: true,
        });
    }
}

blur_translations.user.js

// ==UserScript==
// @name        Blur Sentence Translations Until Hover
// @namespace   Violentmonkey Scripts
// @match       https://jpdb.io/review
// @grant       none
// @version     1.0
// @author      hmry
// @description Blurs translations until you hover or click on them during reviews
// ==/UserScript==

const styleElem = document.createElement('style');
document.head.appendChild(styleElem);
const sheet = styleElem.sheet;

sheet.insertRule(`
.sentence-translation {
    filter: blur(0.3em);
}`, 0);

sheet.insertRule(`
.sentence-translation:hover {
    filter: none;
}`, 0);

sheet.insertRule(`
.sentence-translation.show {
    filter: none;
}`, 0);

for (const elem of document.querySelectorAll('.sentence-translation')) {
    elem.addEventListener('click', ({target}) => target.classList.toggle('show'));
}

review_countdown.user.js

// ==UserScript==
// @name        Review Countdown
// @namespace   Violentmonkey Scripts
// @match       https://jpdb.io/review
// @grant       none
// @version     1.2
// @author      hmry
// @description 5/7/2022, 10:07:03 PM
// ==/UserScript==
let seconds = 6;

const kindTextElem = document.querySelector('.kind');
if (kindTextElem) {
    kindTextElem.insertAdjacentHTML('beforebegin', `
    <div class="countdown" style="font-size: 200%; text-align: center;">${seconds}</div>
    `);

    const countdown = document.querySelector('.countdown');

    const interval = setInterval(() => {
        seconds -= 1;

        if (!countdown.classList.contains('countdown')) {
            // Our element was removed - the user answered?
            clearInterval(interval);
        } else if (seconds <= 0) {
            clearInterval(interval);
            countdown.innerText = `!! ${seconds} !!`;
            countdown.style.color = 'red';
        } else {
            countdown.innerText = `${seconds}`;
        }
    }, 1000)
}