diff --git a/css/app.css b/css/app.css index e0d7dfa..c8f6576 100644 --- a/css/app.css +++ b/css/app.css @@ -1,21 +1,40 @@ :root { - font-family: system-ui, sans-serif; + font-family: system-ui, sans-serif; - --dark-1: rgb(64,64,64); - --dark-2: rgb(128,128,128); + --dark-1: rgb(64, 64, 64); + --dark-2: rgb(128, 128, 128); - --dark-3: rgb(192,192,192); - --dark-4: rgb(255,255,255); + --dark-3: rgb(192, 192, 192); + --dark-4: rgb(255, 255, 255); - background-image: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(255,255,255,0.9)), url('../obama.png'); - background-size: 50px 50px; - background-position: 0 0; + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url(/img/bg.png) !important; + background-size: 100vw 100vh, 250px 250px !important; + background-repeat: repeat, repeat !important; + background-attachment: fixed, scroll !important; } -body { - padding: 0; - margin: 0; - color: var(--dark-1); +section { + max-width: 90vw; + width: 800px; + margin-left: auto; + margin-right: auto; + background: rgb(255, 255, 255); + border: solid rgb(200, 200, 200) 2px; + border-radius: 10px; + padding: 15px; +} + +a { + text-decoration: none; +} + +section#area-main { + width: 90vw; + margin-top: 15px; +} + +sub { + color: rgb(33, 156, 70) } h1 { @@ -51,7 +70,7 @@ input { img { height: 3rem; - margin: 0.5rem ; + margin: 0.5rem; display: block; width: 40vmin; @@ -87,5 +106,5 @@ pre { .contributors { overflow: scroll; - height: 100px; -} + height: 180px; +} \ No newline at end of file diff --git a/img/bg.png b/img/bg.png new file mode 100644 index 0000000..0c9c7c1 Binary files /dev/null and b/img/bg.png differ diff --git a/index.html b/index.html index 85aff4d..f5f5e49 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,32 @@ + - + - + - + - - - + + + -
-

H-Frictions [Git]

-

This is the longest remix chain on Scratch with diverse content. Yes, a dedicated community actually spent years remixing the same chain with random memeposts and stories. And it all started from a simple platformer game...

-

Anyone can join, by signing up onto Scratch and remixing the latest project in the list. There are no rules, whenever a remix gets accepted or not is up to the community of remixers. If a remix wasn't remixed, it either was late, or it was vetoed by the community.

+
+

H-Frictions

+

This is the longest remix chain on Scratch with diverse content and without any intentional spam in its design.

+

Anyone can join, by signing up onto Scratch and remixing the latest + project in the list. There is no hierarchy, whenever a remix gets accepted or not is up to the + community + of remixers.

+

For reference, there is source code and a wiki.

Made by...

+

The percentages represent an activity score based on amount and age of remixes.

-
-
- -
- - + +
+
+ + \ No newline at end of file diff --git a/js/app.js b/js/app.js index d6878ec..354362e 100644 --- a/js/app.js +++ b/js/app.js @@ -5,8 +5,8 @@ let users = {}; let fetchData; async function genTree(treeId) { - fetchData = fetchData || await fetch(`https://scratch.mit.edu/projects/${treeId}/remixtree/bare/`) - .then(x => x.json()); + fetchData = fetchData || await fetch(`https://scratch.mit.edu/projects/${treeId}/remixtree/bare/`) + .then(x => x.json()); entries.push(treeId) let entry = fetchData[treeId]; @@ -14,8 +14,11 @@ async function genTree(treeId) { while (entry) { entry = entry.parent_id; entries.push(entry); - entry = fetchData[entry]; - if (entry) users[entry.username] = true; + 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; @@ -24,11 +27,14 @@ async function genTree(treeId) { let doThings = false; async function main() { - let latestData = await fetch("https://trampoline.turbowarp.org/proxy/studios/34493018/projects").then(x => x.json()); + let latestData = await fetch("https://trampoline.turbowarp.org/proxy/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').textContent = Object.keys(users).join(', '); + document.querySelector('.contributors').innerHTML = Object.keys(users) + .sort((x, y) => users[y] - users[x]) + .map(x => `${x} ${Math.trunc(users[x] / Math.log(entries.length) * 100000) / 1000}%`) + .join(', '); // Doesn't need to be sanitized (hopefully) } main(); @@ -41,15 +47,15 @@ function sanitize(content) { return decoder.innerHTML; } -setInterval(function() { +setInterval(function () { if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25) { - let h = ''; + let h = ''; for (let j = 0; j < 35; j++) { let entry = entries[i]; if (!entry || !(entry in fetchData)) break; - h += `
${sanitize(fetchData[entry].title)} [${entries.length - i }]
`; + h += `
${sanitize(fetchData[entry].title)} #${entries.length - i} by ${fetchData[entry].username}
`; i++; } area.innerHTML += h; } -},500); +}, 500);