mid 2024 UI update
This commit is contained in:
onezplpl
parent
95b1fe3fe5
commit
e31345b503
4 changed files with 71 additions and 41 deletions
49
css/app.css
49
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;
|
||||
}
|
||||
BIN
img/bg.png
Normal file
BIN
img/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
37
index.html
37
index.html
|
|
@ -1,27 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<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.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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">
|
||||
</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'>
|
||||
|
||||
</div>
|
||||
<script src='js/app.js'></script>
|
||||
</body>
|
||||
</section>
|
||||
<section id='area-main'>
|
||||
|
||||
</section>
|
||||
<script src='js/app.js'></script>
|
||||
</body>
|
||||
26
js/app.js
26
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 => `<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 = '';
|
||||
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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue