frictionless-browser/js/app.js

let area = document.querySelector('#area-main');
let entries = [];
let users = {};

let fetchData;

async function genTree(treeId) {
	fetchData = fetchData || await fetch(`https://scratch.mit.edu/projects/${treeId}/remixtree/bare/`)
		.then(x => x.json());

	entries.push(treeId)
	let entry = fetchData[treeId];

	while (entry) {
		entry = entry.parent_id;
		entries.push(entry);
		let entryDat = fetchData[entry];
		if (!entryDat) continue;
		let us = users[entryDat.username];
		users[entryDat.username] = (us ? us : 0) + 1 / entries.length;
		entry = entryDat;
	}

	return entry;
}

let doThings = false;

async function main() {
	let latestData = await fetch("https://corsproxy.io/?https://api.scratch.mit.edu/studios/34493018/projects").then(x => x.json());
	await genTree(latestData[0].id); // latest project
	await genTree("654605857"); // tree bug here, unavoidable without jank
	doThings = true;
	document.querySelector('.contributors').innerHTML = Object.keys(users)
		.sort((x, y) => users[y] - users[x])
		.map(x => `<a href='https://scratch.mit.edu/users/${x}'>${x}</a> <sub>${Math.trunc(users[x] / Math.log(entries.length) * 100000) / 1000}%</sub>`)
		.join(', '); // Doesn't need to be sanitized (hopefully)
}

main();

let i = 0;

function sanitize(content) {
	const decoder = document.createElement('div');
	decoder.textContent = content;
	return decoder.innerHTML;
}

setInterval(function () {
	if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25) {
		let h = '';
		for (let j = 0; j < 35; j++) {
			let entry = entries[i];
			if (!entry || !(entry in fetchData)) break;
			h += `<div class='proj'><a href="https://scratch.mit.edu/projects/${entry}"><img src='https://uploads.scratch.mit.edu/get_image/project/${entry}_1920x1080.png'>${sanitize(fetchData[entry].title)}</a> <sub>#${entries.length - i} by ${fetchData[entry].username}</sub></div>`;
			i++;
		}
		area.innerHTML += h;
	}
}, 500);