Snek/src/js/assets.js

const ProgressBar=require('progress');

const assetSpecs=[
	{ name: 'fruit',     filename: 'apple32.png',    type: 'image' },
	{ name: 'wall',      filename: 'wall32.png',     type: 'image' },
	{ name: 'snake',     filename: 'snake.json',     type: 'json'  },
	{ name: 'levelList', filename: 'levelList.json', type: 'json'  },
	{ name: 'config',    filename: 'config.json',    type: 'json'  }
];

const cvs=document.createElement('canvas');
cvs.width=400;
cvs.height=50;
cvs.classList.add('progressBar');
cvs.classList.add('hiddenBottom');

const bar=new ProgressBar(assetSpecs.length*2);
bar.addUpdateListener(() => bar.draw(cvs));
bar.draw(cvs);

document.body.appendChild(cvs);
setTimeout(() => cvs.classList.remove('hiddenBottom'), 0);

bar.addReadyListener(() => {
	cvs.classList.add('hiddenBottom');
	setTimeout(() => document.body.removeChild(cvs), 1000);
});

//XXX purposefully slow down asset loading
const sleep=(ms) => new Promise(ok => setTimeout(ok, ms));

const loadAsset=async (asset) => {
	const response=await fetch('assets/'+asset.filename);
	await sleep(1000*Math.random());
	bar.update();
	let result;
	switch(asset.type) {
		case 'json':
			result=await response.json();
			break;

		case 'image':
			result=await createImageBitmap(await response.blob());
			break;
	}
	await sleep(1000*Math.random());
	bar.update();
	return [asset.name, result];
};

let assets=Object.create(null);
let ready=false;
let readyListeners=[];

Promise
	.all(
		assetSpecs.map(a => loadAsset(a))
	).then(arr => {
		arr.forEach(([name, value]) => {
			assets[name]=value;
		});
		ready=true;
		readyListeners.forEach(fn => fn.bind(fn)());
		readyListeners=null;
	});

const onReady=(fn) => {
	if(ready) fn.bind(fn)();
	else readyListeners.push(fn);
};

const get=(name) => {
	let asset=assets[name];
	if(!asset) throw new Error("Unknown asset: "+name);
	return asset;
};

return {
	onReady, get
};