GoSubRoutine/.block

## .block
height: 300
scrolling: no
border: no
license: cc-by-4.0

## index.html
<!DOCTYPE html>

<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<script async src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

## sketch.js
/**
 * JSON Proxy Nexon FIFA (v1.0.0)
 * GoToLoop (2020-Jun-17)
 *
 * https://Discourse.Processing.org/t/including-api-key-in-the-header/21936/3
 * https://Bl.ocks.org/GoSubRoutine/f6b689fbb36320ff6d9296a8d273d3c3
 */

"use strict";

const HTTP = 'https' + '://',
      CDN  = 'YaCDN.org/',
      PROX = 'proxy/', SERV = 'serve/',
      SITE = 'static.api.Nexon.co.kr/',
      FOLD = 'fifaonline4/latest/',
      FILE = 'spid.json',
      REMOTE = true, USE_PROXY = true, AS_PROXY = false,
      PROXY = USE_PROXY && HTTP + CDN + (AS_PROXY && PROX || SERV) || '',
      PATH = REMOTE && PROXY + HTTP + SITE + FOLD + FILE || FILE,
      LIST_COLOR = 'Orchid', NAME_COLOR = 'Blue', ID_COLOR = 'Brown',
      MAX_ENTRIES = 10;

let jsonArray;

function preload() {
  jsonArray = loadJSON(PATH, print);
}

function setup() {
  noCanvas(), noLoop();

  const ol = createElement('ol'),
        entries = Array.from({ length: MAX_ENTRIES }, (v, i) => jsonArray[i]);

  ol.style('color', LIST_COLOR).style('font-size: 1.2em');

  for (let { id, name } of entries) {
    name = name.bold().fontcolor(NAME_COLOR);
    id = ` (id: ${ id })`.italics().fontcolor(ID_COLOR);
    createElement('li', name + id).parent(ol);
  }
}
	<!DOCTYPE html>

	<meta charset=utf-8>
	<meta name=viewport content=width=device-width,initial-scale=1>

	<script async src=https://cdn.JsDelivr.net/npm/p5></script>
	<script defer src=sketch.js></script>
	/**
	* JSON Proxy Nexon FIFA (v1.0.0)
	* GoToLoop (2020-Jun-17)
	*
	* https://Discourse.Processing.org/t/including-api-key-in-the-header/21936/3
	* https://Bl.ocks.org/GoSubRoutine/f6b689fbb36320ff6d9296a8d273d3c3
	*/

	"use strict";

	const HTTP = 'https' + '://',
	CDN = 'YaCDN.org/',
	PROX = 'proxy/', SERV = 'serve/',
	SITE = 'static.api.Nexon.co.kr/',
	FOLD = 'fifaonline4/latest/',
	FILE = 'spid.json',
	REMOTE = true, USE_PROXY = true, AS_PROXY = false,
	PROXY = USE_PROXY && HTTP + CDN + (AS_PROXY && PROX \|\| SERV) \|\| '',
	PATH = REMOTE && PROXY + HTTP + SITE + FOLD + FILE \|\| FILE,
	LIST_COLOR = 'Orchid', NAME_COLOR = 'Blue', ID_COLOR = 'Brown',
	MAX_ENTRIES = 10;

	let jsonArray;

	function preload() {
	jsonArray = loadJSON(PATH, print);
	}

	function setup() {
	noCanvas(), noLoop();

	const ol = createElement('ol'),
	entries = Array.from({ length: MAX_ENTRIES }, (v, i) => jsonArray[i]);

	ol.style('color', LIST_COLOR).style('font-size: 1.2em');

	for (let { id, name } of entries) {
	name = name.bold().fontcolor(NAME_COLOR);
	id = ` (id: ${ id })`.italics().fontcolor(ID_COLOR);
	createElement('li', name + id).parent(ol);
	}
	}