diff --git a/css/app.css b/css/app.css index 77df323..cab1ddb 100644 --- a/css/app.css +++ b/css/app.css @@ -39,7 +39,8 @@ section#area-main { } sub { - color: rgb(33, 156, 70) + color: rgb(33, 156, 70); + display: block; } h1 { @@ -105,6 +106,10 @@ pre { flex-wrap: wrap; } +#area-main.nogrid { + display: block; +} + .proj { text-align: center; max-width: 240px; @@ -123,3 +128,26 @@ pre { .eras a { margin-right: 10px; } + +.buttons { + display: flex; +} + +.user { + width: 60px; + height: 60px; + border-radius: 60px; +} + +.commenter { + display: flex; +} + +pre { + max-width: 500px; + white-space: pre-wrap; +} + +.commenter > div { + margin-bottom: 30px; +} \ No newline at end of file diff --git a/index.html b/index.html index 1c932f8..71187cc 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,17 @@

Scratch Feed

-

Users to follow

- @@ -19,6 +27,5 @@ User2
- diff --git a/js/app.js b/js/app.js index 5572956..e2d7ac2 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,5 @@ +// All URLs listed here are from a custom NGINX config. + let area = document.querySelector('#area-main'); let entries = []; let users = {}; @@ -5,6 +7,7 @@ let fetchData; let sum = 0; let doThings = false; let i = 0; +let studios = {}; async function genTree(treeId) { let entry = treeId; @@ -27,10 +30,20 @@ async function genTree(treeId) { return entry; } -async function main() { - +//todo: rewrite +async function main(type) { let users = document.querySelector('#users').value.split('\n'); + for (let user of users) { + let typed = user[0]; + user = user.slice(1); + + if (typed == '#') { + studios[typed] = await (fetch(`https://hf.zenoverse.net/studio/${user}`) + .then(x => x.json())); + } + } + let url = new URL(window.location); url.search = '?users=' + users.join('&users='); history.pushState(null, '', url); @@ -38,11 +51,28 @@ async function main() { entries = []; for (let user of users) { - let extraFetch = await fetch(`https://hf.zenoverse.net/user/${user}`, { + let typed = user[0]; + user = user.slice(1); + + let extraFetch = []; + + if (typed == '#' && type == '#user') { + extraFetch = await (fetch(`https://hf.zenoverse.net/studio_project/${user}`) + .then(x => x.json())); + extraFetch.forEach(x => { + x.studio = studios[typed].title; + x.studioID = typed + }); + } else if (typed == '#' && type == '#comment') { + extraFetch = await (fetch(`https://hf.zenoverse.net/studio_comment/${user}`) + .then(x => x.json())); + extraFetch.forEach(x => x.studio = studios[typed].title); + } else if (typed == '@' && type == '#user') { + extraFetch = await (fetch(`https://hf.zenoverse.net/user/${user}`) + .then(x => x.json())); + extraFetch.forEach(x => x.username = user); + } - }); - extraFetch = await extraFetch.json(); - extraFetch.forEach(x => x.username = user); entries = [...entries, ...extraFetch]; } entries = entries.sort((a, b) => b.id - a.id); @@ -62,8 +92,9 @@ async function main() { setInterval(function () { - if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25) - scroller(); + if (!doThings || (window.innerHeight + window.scrollY) < document.body.scrollHeight - 25) return; + if (type == '#user') scroller(); + if (type == '#comment') commenter(); }, 500); } @@ -73,12 +104,46 @@ function sanitize(content) { return decoder.innerHTML; } +function commenter() { + let h = ''; + area.className = 'nogrid'; + for (let j = 0; j < 10; j++) { + let entry = entries[i]; + if (!entry) continue; + // ugly tbf + h += `
+ +
+
${entry.author.username}
+In ${entry.studio} +
${entry.content}
+${entry.datetime_created} +
+
+` + i++; + } + area.innerHTML += h; +} + function scroller() { let h = ''; for (let j = 0; j < 35; j++) { let entry = entries[i]; if (!entry) continue; - h += `
${entry.title} by ${entry.username}
`; + // ugly tbf + h += `
+ + +${entry.title} + + +by ${entry.username} + + +${entry.studio ? ' in ' + entry.studio : ''} + +
`; i++; } area.innerHTML += h; @@ -86,11 +151,19 @@ function scroller() { let sub = document.querySelector('#users'); -let params = new URLSearchParams(window.location.search).getAll('users'); +let srch = new URLSearchParams(window.location.search) + +let params = srch.getAll('users'); let val = params.join('\n') || sub.value; sub.textContent = sub.value = val; -main(); -document.querySelector('#submit').onclick = main; \ No newline at end of file +main(window.location.hash || '#user'); +document.querySelector('#submit').onclick = () => main(window.location.hash || '#user'); + +document.querySelectorAll('.buttons button').forEach(x => x.onclick = function() { + window.setInterval(function() { + window.location.reload(); + },100); +}) \ No newline at end of file