archive/frictionless-browser
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mid 2024 UI update

Browse source
This commit is contained in:
onezplpl 2024-08-02 03:42:44 -04:00
parent 95b1fe3fe5
commit e31345b503
No known key found for this signature in database
GPG key ID: 7EC026A136F9EEC3
4 changed files with 71 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
css/app.css
View file

@ -1,21 +1,40 @@
:root { :root {
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
--dark-1: rgb(64,64,64); --dark-1: rgb(64, 64, 64);
--dark-2: rgb(128,128,128); --dark-2: rgb(128, 128, 128);
--dark-3: rgb(192,192,192); --dark-3: rgb(192, 192, 192);
--dark-4: rgb(255,255,255); --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-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url(/img/bg.png) !important;
background-size: 50px 50px; background-size: 100vw 100vh, 250px 250px !important;
background-position: 0 0; background-repeat: repeat, repeat !important;
background-attachment: fixed, scroll !important;
} }
body { section {
padding: 0; max-width: 90vw;
margin: 0; width: 800px;
color: var(--dark-1); 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 { h1 {
@ -51,7 +70,7 @@ input {
img { img {
height: 3rem; height: 3rem;
margin: 0.5rem ; margin: 0.5rem;
display: block; display: block;
width: 40vmin; width: 40vmin;
@ -87,5 +106,5 @@ pre {
.contributors { .contributors {
overflow: scroll; overflow: scroll;
height: 100px; height: 180px;
} }

BIN
img/bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 289 KiB

35
index.html
View file

@ -1,27 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<link rel="icon" href="/res/img/favi.svg"> <link rel="icon" href="/res/img/favi.svg">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/app.css" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div class="content"> <section>
<h1>H-Frictions <a href="https://git.zenoverse.net/onezplpl/frictionless">[Git]</a></h1> <h1>H-Frictions</h1>
<p>This is the <b>longest</b> 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...</p> <p>This is the longest remix chain on Scratch with diverse content and without any intentional spam in its design. </p>
<p>Anyone can join, by signing up onto <a href='https://scratch.mit.edu/'>Scratch</a> and remixing the latest project in the list. There are <b>no rules</b>, 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.</p> <p>Anyone can join, by signing up onto <a href='https://scratch.mit.edu/'>Scratch</a> and remixing the latest
project in the list. There is <b>no hierarchy</b>, whenever a remix gets accepted or not is up to the
community
of remixers.</p>
<p>For reference, there is <a href="https://git.zenoverse.net/onezplpl/frictionless">source code</a> and a <a href='https://wiki.zenoverse.net/hf/w/index.php/Main_Page'>wiki.</a></p>
<h2>Made by...</h2> <h2>Made by...</h2>
<p>The percentages represent an activity score based on amount and age of remixes.</p>
<div class='contributors'></div> <div class='contributors'></div>
</div> </section>
<div id='area-main'> <section id='area-main'>
</div> </section>
<script src='js/app.js'></script> <script src='js/app.js'></script>
</body> </body>

24
js/app.js
View file

@ -5,8 +5,8 @@ let users = {};
let fetchData; let fetchData;
async function genTree(treeId) { async function genTree(treeId) {
fetchData = fetchData || await fetch(`https://scratch.mit.edu/projects/${treeId}/remixtree/bare/`) fetchData = fetchData || await fetch(`https://scratch.mit.edu/projects/${treeId}/remixtree/bare/`)
.then(x => x.json()); .then(x => x.json());
entries.push(treeId) entries.push(treeId)
let entry = fetchData[treeId]; let entry = fetchData[treeId];
@ -14,8 +14,11 @@ async function genTree(treeId) {
while (entry) { while (entry) {
entry = entry.parent_id; entry = entry.parent_id;
entries.push(entry); entries.push(entry);
entry = fetchData[entry]; let entryDat = fetchData[entry];
if (entry) users[entry.username] = true; if (!entryDat) continue;
let us = users[entryDat.username];
users[entryDat.username] = (us ? us : 0) + 1 / entries.length;
entry = entryDat;
} }
return entry; return entry;
@ -28,7 +31,10 @@ async function main() {
await genTree(latestData[0].id); // latest project await genTree(latestData[0].id); // latest project
await genTree("654605857"); // tree bug here, unavoidable without jank await genTree("654605857"); // tree bug here, unavoidable without jank
doThings = true; 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 => `<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(); main();
@ -41,15 +47,15 @@ function sanitize(content) {
return decoder.innerHTML; return decoder.innerHTML;
} }
setInterval(function() { setInterval(function () {
if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25) { if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25) {
let h = ''; let h = '';
for (let j = 0; j < 35; j++) { for (let j = 0; j < 35; j++) {
let entry = entries[i]; let entry = entries[i];
if (!entry || !(entry in fetchData)) break; 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)} [${entries.length - i }]</a></div>`; 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++; i++;
} }
area.innerHTML += h; area.innerHTML += h;
} }
},500); }, 500);