play.benjamin-kraft.eu/public/index_data/init.js

let projects = [],
	languages = [];

let antiCacheQuery = '?_=' + new Date().getTime();

function preload(){
	loadJSON("index_data/projects.json" + antiCacheQuery, parseProjects);
}

function setup(){
	noCanvas();
	displayProjects();
}

function parseProjects(projectObj){
	for (let l of projectObj['languages']){
		let language = {};
		for (let key in l) language[key] = l[key];
		languages.push(language);
	}
	for (let p of projectObj['projects']) {
		if (!p.visible) continue;
		let project = new Project(p);
		projects.push(project);
	}
}

function displayProjects(){
	for (let p of projects){

		let img = $('<img>');
		img.addClass('project-image');
		p.putImage(img);

		let name = $('<h3></h3>');
		name.addClass('project-name');
		name.text(p.displayName);

		let version = $('<h4></h4>');
		version.addClass('project-version');
		version.text(p.version);

		let info = $('<div></div>');
		info.addClass('project-info');
		info.html(p.info);

		let start = $('<button></button>');
		start.addClass('project-start');
		start.text('Start');
		start.click(() => p.start());

		let download = $('<button></button>');
		download.addClass('project-download');
		download.text('Download');
		download.click(() => p.download());

		let description = $('<div></div>');
		description.addClass('project-description');
		description.append(name, version, info, start, download);

		let dom = $('<div></div>');
		dom.addClass('project');
		dom.append(img, description);

		$('#projects-container').append(dom);
	}
}

class Project{
	
	constructor(p){
		for (let key in p) this[key] = p[key];
		for (let l of languages){
			if (l.id === p['languageId']) this.language = l;
		}
		this.location = "projects/" + this.language.name + "/" + this['name'];
	}
	
	start(){
		window.location = this.location;
	}
	
	download(){
		window.location = this.location + '.zip';
	}
	
	putImage(dom){
		dom.attr("src", 'index_data/thumbnails/' + this['name'] + '.png');
	}
	
}