[Crypko]祖先辿り

    @@ -10,11 +10,22 @@ 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.href.match(/\d+$/) || [0])[0]]], - g, i, l, d, p -) => { + 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++) { @@ -24,7 +35,10 @@ p = [0, 0]; if (d && !q[d]) await fetch(`https:\u002F\u002Fapi.crypko.ai/crypkos/${d}/detail`) - .then(r => r.json()).catch(e => console.error(e)).then(j => console.log(q[d] = j)); + .then(r => r.json()).catch(console.error).then(j => { + console.log(q[d] = j); + n.textContent = `読み込み中… #${j.id}`; + }); if (q[d]) { @@ -48,27 +62,20 @@ console.log(t,q); - D.head.appendChild(E('style', { 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; } -` })); - - D.querySelector('#header-template').after(E('div', { id: 'ancestors' }, [p = E('div', {})])); - - t.filter(b => b.some(d => d)).forEach(b => p.before(p = + 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: `${q[d].name ? q[d].name : ''}#${q[d].id}`, - onclick: e => window.open('https://crypko.ai/#/card/' + e.target.title.split('#').pop(), '_blank') + 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(); + +} })();
  • /*
     * @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();
    
    } })();
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2018/06/07 10:53:57 - 2018-06-07
  2. 2018/06/06 00:09:13 - 2018-06-06
  3. 2018/06/05 00:28:13 - 2018-06-05
  4. 2018/06/05 00:27:11 - 2018-06-05