Wanikani intrusive stroke order

WKIntrusiveStrokes.js

// ==UserScript==
// @name         Wanikani intrusive stroke order
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Replaces wanikani review prompts with stroke order gifs
// @author       Jacob Albano
// @match        https://www.wanikani.com/review/session
// @grant        none
// ==/UserScript==

(function(){
	"use strict";

	let currentStr = null;
	const oldSet = $.jStorage.set;
	$.jStorage.set = newSet;

	const currentItem = $.jStorage.get('currentItem');
	if (currentItem != null)
		doReplace(currentItem);

	function newSet(key, value, options) {
		const ret = oldSet.apply(this, [key, value, options]);

		if (key === 'currentItem')
			doReplace(value);

		return ret;
	};

	function doReplace(item) {
		replace(item.rad || item.kan || item.voc);
	}

	function replace(str) {
		currentStr = str;
		let setupDone = false;
		let ready = 0;
		let hasError = false;
		const images = [];

		for (const char of str) {
			let filename = char.codePointAt(0).toString(16);
			const url = `https://raw.githubusercontent.com/mistval/kanji_images/master/gifs/${filename}.gif`;
			const img = document.createElement('img');
      img.style.cursor = 'pointer';
			img.onclick = refresh;
			img.onload = report;
			img.onerror = cancel;
			img.src = url;
			images.push(img);
		}

		setupDone = true;
		checkReady();

		function checkReady() {
			if (!setupDone ||
				hasError ||
				ready !== images.length ||
				currentStr !== str
			) return;

			const span = document.querySelector('[lang=ja]');
			span.innerHTML = "";
			for (const img of images)
				span.appendChild(img);

		}

		function report() {
			ready++;
			this.onload = null;
			checkReady();
		}

		function refresh() {
			const oldSrc = this.src;
			this.src = "";
			this.src = oldSrc;
		}

		function cancel() {
			hasError = true;
		}
	}

})();