/*
* @title [Crypko]祖先辿り
* @description カードの祖先一覧を表示します。
* @include https://crypko.ai/#/card/*
* @license MIT License
* @javascript_url
*/
void (async (
w = 512,
m = w >> 3, // w だけにするとめいっぱい（9世代前まで）読み込む
s = 'https://api.crypko.ai/crypkos/',
D = document,
$ = q => D.querySelector(q),
E = (n, a = {}, c = [], o = Object.assign(D.createElement(n), a)) => (
c.forEach(e => o.appendChild(e)), o
),
// 参考: https://github.com/yuntan/crypkograph/blob/514e71daa5839a4a8f7e2f0c53750843c5d9225a/crypkograph.py#L70
I = async (n, a) => await crypto.subtle.digest({ name: 'SHA-1' },
//Uint8Array.from([...`${n}asdasd3edwasd${a}`], c => c.charCodeAt())
(new TextEncoder).encode(`${n}asdasd3edwasd${a}`)
).then(
h => Array.from(new Uint8Array(h), c => c.toString(16).padStart(2, 0)).join('')
),
u = (location.hash.match(/card\/(\d+)(\/fuse|$)/) || []).slice(1),
q = {}
) => u.forEach(async (d, f, a, t, g, i, l, p, n) => {
if (f) {
l = await fetch(
`${s}${u[0]}/fusableCrypkos?category=all&${(/\?(.+)$/.exec(location.hash) || [])[1] || 'sort=-id'}&ownerAddr=`
+ $('a[href^="#/market"]').href.split('%3A').pop()
).then(r => r.json()).catch(console.error).then(j => j.crypkos.map(async c => Object.assign(c, { img: await I(c.noise, c.attrs) })));
l = Array.isArray(l) ? await Promise.all(l) : [];
i = (/\/(\w+)_lg/.exec(($('div.panel:nth-child(2) img.progressive-image-main') || { src: '' }).src) || [])[1];
d = i ? (l.find(c => i == c.img) || {}).id : 0;
}
if (!d) return;
t = [[d]];
$('#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; }
.ancestors>div:last-child>div>img:hover { width: 512px; }
.ancestors-m { left: 0px; }
.ancestors-s { right: 0px; }
div#main>div.info-card { max-width: 1024px; }
div#main>div>div.panel { overflow-x: hidden; }
` }));
(a[1] ? $(`.panel:nth-child(${f + 1})>div`) : $('.info-card'))
.before(E('div', { className: '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])
q[d] = await fetch(`${s}${d}/detail`)
.then(r => r.json()).catch(console.error)
.then(async j => (
n.textContent = `読み込み中… #${j.id}`,
j.img = await I(j.noise, j.attrs),
j
));
if (q[d]) p = [q[d].matronId, q[d].sireId];
if (!t[g]) t[g] = [];
[t[g][l * 2], t[g][l * 2 + 1]] = p;
}
t.filter(b => b.some(d => d)).forEach(b => n.before(n =
E('div', {},
b.map((d, i, a, l = a.length, v = w / l) => E('div', { style: `width: ${v}px; height: ${v}px;` },
(q[d] ? [E('img', {
src: `https:\u002F\u002Fimg.crypko.ai/daisy/${q[d].img}_lg.jpg`,
width: v,
className: (i < l / 2) ? 'ancestors-m' : 'ancestors-s',
title: `Iter ${q[d].iteration} · ${q[d].name ? q[d].name : ''}#${q[d].id}`,
onclick: e => window.open('/#/card/' + e.target.title.split('#').pop(), '_blank')
})] : [])
))
)
));
n.parentNode.lastChild.remove();
}))();
