[Crypko]祖先辿り

by pacochi 2018-06-07 [2018/06/07 10:53:57]

カードの祖先一覧を表示します。

@@ -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 (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 (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;
 
 	}
 
-	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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。