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 {
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;
}

BIN
img/bg.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 289 KiB

21
index.html
View file

@ -1,4 +1,5 @@
<!DOCTYPE html>
<head>
<link rel="icon" href="/res/img/favi.svg">
@ -12,16 +13,20 @@
</head>
<body>
<div class="content">
<h1>H-Frictions <a href="https://git.zenoverse.net/onezplpl/frictionless">[Git]</a></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>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>
<section>
<h1>H-Frictions</h1>
<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 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>
<p>The percentages represent an activity score based on amount and age of remixes.</p>
<div class='contributors'></div>
</div>
<div id='area-main'>
</section>
<section id='area-main'>
</div>
</section>
<script src='js/app.js'></script>
</body>

18
js/app.js
View file

@ -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;
@ -28,7 +31,10 @@ async function main() {
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 => `<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();
@ -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 = '';
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)} [${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++;
}
area.innerHTML += h;
}
},500);
}, 500);