Final Fantasy XIV Achievement Icon Sprite Sheet and Positions

// This converts XIVDB's achievement icons to an array of base64 URLs.
const config = {
	method: 'GET',
	mode: 'cors'
}

let x = 0;
let y = 0;

let output = {};

let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');

canvas.height = 0;
canvas.width = 0;

fetch("https://api.xivdb.com/achievement?columns=icon,name", config)
	.then(response => response.json())
	.then(achievementIcons => {
		new Promise(function(resolve, reject) { processIcons(achievementIcons, resolve, reject) })
			.then(result => {
				createSpriteSheet(result);
			})
			.catch(e => console.error(e));
	})
	.catch(e => console.error(e));

// http://stackoverflow.com/a/10073788/1317805
function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

function processBlob(blob, resolve, reject) {
  const reader = new window.FileReader();

  reader.readAsDataURL(blob); 

  reader.onloadend = () => {
    resolve(reader.result);
  }
}

function processIcons(achievementIcons, finish, reject) {
	let result = {};
	let processed = 0;
	let killed = false;

	let icons = achievementIcons.forEach(data => {
		const icon = data.icon;

		const url = "https://secure.xivdb.com/img/game/" + pad(Math.floor(icon/1000) * 1000, 6) + "/" + pad(icon, 6) + ".png";

		if (killed)
			return;

		fetch(url, config)
			.then(response => response.blob())
			.then(blob => {
				new Promise(function(resolve) { processBlob(blob, resolve) })
					.then(output => {
						result[icon] = {
							name: data.name,
							src: output
						}

						if (++processed === achievementIcons.length)
							finish(result);
					})
			})
			.catch(e => {
				killed = true;
				reject(e);
			});
	})
}

function createSpriteSheet(icons) {
	const iconKeys = Object.keys(icons);
	const total = iconKeys.length;
	let n = 0;

	new Promise(function(resolve, reject) { addIconToSpriteSheet(icons, iconKeys, n, total, resolve, reject) })
		.then(response => {
			console.info(canvas.toDataURL("image/png"));
			console.info(output);
		})
		.catch(e => {
			console.error(e);
		})
}

function addIconToSpriteSheet(icons, iconKeys, n, total, resolve, reject) {
	const icon = icons[iconKeys[n]];

	let img = document.createElement('img');

	img.onload = (e) => {
		let iconImage = e.path[0];
		const canvasData = x > 0 ? context.getImageData(0, 0, canvas.width, canvas.height) : null;

		if (canvas.height < iconImage.naturalHeight) {
			canvas.height = iconImage.naturalHeight;
		}

		canvas.width += iconImage.naturalWidth;

		if (canvasData)
			context.putImageData(canvasData, 0, 0);

		context.drawImage(img, x, 0, iconImage.naturalWidth, iconImage.naturalHeight);

		output[iconKeys[n]] = {
			name: icon.name,
			x: x,
			y: 0
		}

		x += iconImage.naturalWidth;

		if (++n === total) {
			resolve(true);
			return;
		}

		addIconToSpriteSheet(icons, iconKeys, n, total, resolve, reject);
	}

	img.src = icon.src;
}