let data;

function preload() {
	data = loadJSON('https://alca.tv/static/codepen/pens/GvZdJY/magformers.js');
}

function makeName(key, count) {
	let name = key.split('_')
		.reduce((p, n) => `${p} ${n[0].toUpperCase() + n.slice(1)}`, '');
	if(count > 1) {
		name += (name[name.length - 1] === 's' ? 'e' : '') + 's';
	}
	return name;
}

function setup() {
	noCanvas();
	
	// Select the implicit tbody inside of the table
	let table = select('tbody');
	
	// Loop over the models
	data.models.forEach(model => {
		
		// Set up our elements
		let tr = createElement('tr').parent(table);
		let tdName = createElement('td', model.name).parent(tr);
		let tdPieces = createElement('td').parent(tr);
		let tdSets = createElement('td').parent(tr);
		
		// Loop over the model's key
		Object.keys(model).forEach(key => {
			// Avoid the 'name' key, this causes trouble
			if(key === 'name') {
				return;
			}
			
			// Get the count for this key
			let count = model[key];
			// Check the the key is not 0
			if(!count) {
				return;
			}
			// Make a readable version of the key
			let piece = makeName(key, count);
			// Add the data to the second column
			createDiv(`${piece}: ${count}`).parent(tdPieces);
		});
		
		// Loop over the sets for each model
		data.sets.forEach(set => {
			// Check if the set can be used to create the model, automatically
			// return true if the key is 'name'
			let canUse = Object.keys(set)
					.every(key => key === 'name' || model[key] <= set[key]);
			if(canUse) {
				// Add the set to the third column
				createDiv(set.name).parent(tdSets);
			}
		});
		
	});
}