[Let] [Crypko]祖先辿り

LLxyo — 2018-06-05T17:02:55Z
/*
 * @title [Crypko]祖先辿り
 * @description カードの祖先一覧を表示します。
 * @include https://crypko.ai/#/card/*
 * @license MIT License
 * @javascript_url
 */

void (async (
 w = 512,
 m = w >> 3, // w だけにするとめいっぱい（9世代前まで）読み込む
 D = document,
 $ = q => D.querySelector(q),
 E = (n, a = {}, c = []) => ((n = Object.assign(D.createElement(n), a)), c.forEach(e => n.appendChild(e)), n),
 q = {},
 t = [[(location.hash.match(/card\/(\d+)$/) || [])[1]]],
 g, i, l, d, p, n
) => { if (t[0][0]) {

	$('#ancestors-css') || D.head.appendChild(E('style', { id: 'ancestors-css', textContent: `
#ancestors { width: ${w}px; margin: 0 auto; }
#ancestors>div { width: 100% }
#ancestors>div>div { position: relative; display: inline-block; }
#ancestors>div>div>img { position: absolute; transition-duration: 0.5s; }
#ancestors>div>div>img:hover { z-index: 99; width: 256px; }
` }));

	$('.info-card').before(E('div', { id: 'ancestors' }, [n = E('div')]));

	for (i = 1; i < m ; i++) {

		g = i.toString(2).length;
		l = i - (1 << g - 1);
		d = t[g - 1][l];
		p = [0, 0];

		if (d && !q[d]) await fetch(`https:\u002F\u002Fapi.crypko.ai/crypkos/${d}/detail`)
		 .then(r => r.json()).catch(console.error).then(j => {
			console.log(q[d] = j);
			n.textContent = `読み込み中… #${j.id}`;
		 });

		if (q[d]) {

			p = [q[d].matronId, q[d].sireId];

			// 参考: https://github.com/yuntan/crypkograph/blob/514e71daa5839a4a8f7e2f0c53750843c5d9225a/crypkograph.py#L70
			await crypto.subtle.digest({ name: 'SHA-1' }, 
			 Uint8Array.from([...`${q[d].noise}asdasd3edwasd${q[d].attrs}`]
			  .map(c => c.charCodeAt()))
			).then(h => 
			 (q[d].img = Array.from(new Uint8Array(h))
			 .map(c => c.toString(16).padStart(2, '0')).join(''))
			);

		}

		if (!t[g]) t[g] = [];
		[t[g][l * 2], t[g][l * 2 + 1]] = p;

	}

	console.log(t,q);

	t.filter(b => b.some(d => d)).forEach(b => n.before(n = 
	 E('div', {},
	  b.map((d, i, a) => E('div', { style: `width: ${w / a.length}px; height: ${w / a.length}px;` },
	   (q[d] ? [E('img', {
	    src: `https:\u002F\u002Fimg.crypko.ai/daisy/${q[d].img}_lg.jpg`,
	    width: w / a.length,
	    title: `Iter ${q[d].iteration} · ${q[d].name ? q[d].name : ''}#${q[d].id}`,
	    onclick: e => window.open('https://crypko.ai/#/card/' + e.target.title.split('#').pop(), '_blank')
	   })] : [])
	  ))
	 )
	));

	n.parentNode.lastChild.remove();

} })();
Bookmarklets from LLxyo

[Let] [Crypko]祖先辿り
