[Crypko]祖先辿り Fork

    @@ -9,23 +9,53 @@ 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 = []) => ((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]) { + 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 { 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; } ` })); - $('.info-card').before(E('div', { id: 'ancestors' }, [n = E('div')])); + (a[1] ? $(`.panel:nth-child(${f + 1})>div`) : $('.info-card')) + .before(E('div', { className: 'ancestors' }, [n = E('div')])); for (i = 1; i < m ; i++) {
    @@ -34,42 +64,31 @@ 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 (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]) { + if (q[d]) p = [q[d].matronId, q[d].sireId]; - 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;` }, + 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: w / a.length, + 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('https://crypko.ai/#/card/' + e.target.title.split('#').pop(), '_blank') + onclick: e => window.open('/#/card/' + e.target.title.split('#').pop(), '_blank') })] : []) )) )
    @@ -77,5 +96,5 @@ n.parentNode.lastChild.remove(); - } })(); + }))();
  • /*
     * @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();
    
    }))();
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。