From a055ee8c89a72124d785298a30695f5a66023d27 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Tue, 1 Jul 2025 22:28:17 -0400 Subject: [PATCH 01/10] Update data.json --- features/total-stats/data.json | 54 ++++++++++++++-------------------- 1 file changed, 22 insertions(+), 32 deletions(-) diff --git a/features/total-stats/data.json b/features/total-stats/data.json index a4fbb550..a227b55f 100644 --- a/features/total-stats/data.json +++ b/features/total-stats/data.json @@ -1,33 +1,23 @@ { - "title": "Total User Stats", - "description": "Next to shared projects on a user's profile, displays the total loves, favorites and views that the user has received across all of their shared projects.", - "credits": [ - { - "username": "RowanMoonBoy", - "url": "https://scratch.mit.edu/users/RowanMoonBoy/" - }, - { - "username": "rgantzos", - "url": "https://scratch.mit.edu/users/rgantzos/" - } - ], - "dynamic": true, - "styles": [ - { - "file": "style.css", - "runOn": "/users/*" - } - ], - "scripts": [ - { - "file": "script.js", - "runOn": "/users/*" - } - ], - "tags": [ - "New" - ], - "type": [ - "Website" - ] -} \ No newline at end of file + "title": "Total Project Stats", + "description": "Displays a box on user profiles showing the total loves, favorites, views, and remixes across all their shared projects.", + "credits": [ + { + "username": "RowanMoonBoy", + "url": "https://scratch.mit.edu/users/RowanMoonBoy/" + }, + { + "username": "MaterArc", + "url": "https://scratch.mit.edu/users/MaterArc/" + } + ], + "type": ["Website"], + "tags": ["New", "Featured"], + "dynamic": true, + "scripts": [ + { + "file": "script.js", + "runOn": "/users/*" + } + ] +} From b69aa3e24f484770ba429bd93612992de005942b Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Tue, 1 Jul 2025 22:28:33 -0400 Subject: [PATCH 02/10] Update script.js --- features/total-stats/script.js | 128 ++++++++++++++++++++------------- 1 file changed, 77 insertions(+), 51 deletions(-) diff --git a/features/total-stats/script.js b/features/total-stats/script.js index d4f3661e..e214fb25 100644 --- a/features/total-stats/script.js +++ b/features/total-stats/script.js @@ -1,51 +1,77 @@ -export default async function ({ feature, console }) { - let div = await ScratchTools.waitForElement("div.box.slider-carousel-container") - if (!document.querySelector("#profile-data")) return; - - let stats = await getStats(Scratch.INIT_DATA.PROFILE.model.username) - - let span = document.createElement("span") - span.textContent = stats.loves.toLocaleString() + " loves • " + stats.favorites.toLocaleString() + " favorites • " + stats.views.toLocaleString() + " views" - span.className = "ste-total-stats" - feature.self.hideOnDisable(span) - div.querySelector(".box-head").insertBefore(span, div.querySelector("a")) - - async function getProjects(user) { - let projects = [] - let offset = 0 - let keepGoing = true - - while (keepGoing) { - let data = await (await fetch(`https://api.scratch.mit.edu/users/${user}/projects?limit=40&offset=${offset.toString()}`)).json() - - projects.push(...data) - - if (data.length === 40) { - offset += 40 - } else { - keepGoing = false - } - } - - return projects - } - - async function getStats(user) { - let projects = await getProjects(user) - let stats = { - loves: 0, - favorites: 0, - remixes: 0, - views: 0, - } - - for (var i in projects) { - stats.loves += projects[i].stats.loves - stats.favorites += projects[i].stats.favorites - stats.remixes += projects[i].stats.remixes - stats.views += projects[i].stats.views - } - - return stats - } -} \ No newline at end of file +export default async function ({ feature }) { + await ScratchTools.waitForElement(".box-head"); + + const username = window.location.pathname.split("/")[2]; + const res = await fetch( + `https://scratchdata.vercel.app/api/user-stats/${username}` + ); + if (!res.ok) return; + + const data = await res.json(); + const format = (n) => n.toLocaleString(); + + const box = document.createElement("div"); + box.className = "ste-box ste-prevent-select"; + + const boxHead = document.createElement("div"); + boxHead.className = "ste-box-head"; + + const heading = document.createElement("h4"); + heading.textContent = "Total Project Stats"; + + boxHead.appendChild(heading); + box.appendChild(boxHead); + + const boxContent = document.createElement("div"); + boxContent.className = "ste-box-content ste-tps-content"; + + const stats = [ + { + src: "https://scratch.mit.edu/svgs/project/love-red.svg", + alt: "Loves", + value: data.totalLoves, + }, + { + src: "https://scratch.mit.edu/svgs/project/fav-yellow.svg", + alt: "Favorites", + value: data.totalFavorites, + }, + { + src: "https://scratch.mit.edu/svgs/project/views-gray.svg", + alt: "Views", + value: data.totalViews, + }, + { + src: "https://raw.githubusercontent.com/scratchfoundation/scratch-www/a9cf52cd7fbec834897587dd9e17d648ba0a38b2/static/svgs/messages/remix.svg", + alt: "Remixes", + value: data.totalRemixes, + }, + ]; + + for (const stat of stats) { + const statDiv = document.createElement("div"); + statDiv.className = "ste-tps-stat"; + + const img = document.createElement("img"); + img.src = stat.src; + img.width = 32; + img.height = 32; + img.alt = stat.alt; + + const valueDiv = document.createElement("div"); + valueDiv.textContent = format(stat.value); + valueDiv.className = "ste-tps-value"; + + statDiv.appendChild(img); + statDiv.appendChild(valueDiv); + boxContent.appendChild(statDiv); + } + + box.appendChild(boxContent); + + const boxHeads = document.querySelectorAll(".box-head"); + if (boxHeads.length >= 5) { + const targetBox = boxHeads[4].parentNode; + targetBox.parentNode.insertBefore(box, targetBox.nextSibling); + } +} From babe5bcb4033a9ed24d303eb08dcd57031ec08d6 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Tue, 1 Jul 2025 22:28:42 -0400 Subject: [PATCH 03/10] Delete features/total-stats/style.css --- features/total-stats/style.css | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 features/total-stats/style.css diff --git a/features/total-stats/style.css b/features/total-stats/style.css deleted file mode 100644 index 4da1b4d7..00000000 --- a/features/total-stats/style.css +++ /dev/null @@ -1,7 +0,0 @@ -.ste-total-stats { - font-weight: 500; - opacity: .6; - margin-left: 1rem; - font-style: italic; - font-size: .9rem; -} \ No newline at end of file From ce75d2326956d2a83125f2b3aed2fff209a2f0b8 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Tue, 1 Jul 2025 22:30:33 -0400 Subject: [PATCH 04/10] Update features.json --- features/features.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/features/features.json b/features/features.json index a344f61e..ed3e4b16 100644 --- a/features/features.json +++ b/features/features.json @@ -1,4 +1,9 @@ [ + { + "version": 2, + "id": "total-stats", + "versionAdded": "v4.2.0" + }, { "version": 2, "id": "copy-paste-lists", @@ -159,11 +164,6 @@ "id": "project-descriptions", "versionAdded": "v3.8.0" }, - { - "version": 2, - "id": "total-stats", - "versionAdded": "v3.8.0" - }, { "version": 2, "id": "project-miniplayer", From a58dad8a53f6a93b34ac6b1b21cfdc83ad87835b Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Wed, 2 Jul 2025 17:26:50 -0400 Subject: [PATCH 05/10] Add styles --- features/total-stats/style.css | 43 ++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 features/total-stats/style.css diff --git a/features/total-stats/style.css b/features/total-stats/style.css new file mode 100644 index 00000000..444a5d4e --- /dev/null +++ b/features/total-stats/style.css @@ -0,0 +1,43 @@ +.ste-box { + background: var(--profile-box-background, #fff); + border-radius: 6px; + box-shadow: 0 0 5px rgb(0 0 0 / 0.1); + margin-top: 12px; + user-select: none; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.ste-box-head { + padding: 12px 16px; + border-bottom: 1px solid var(--profile-box-border, #ddd); +} + +.ste-box-head h4 { + margin: 0; + font-weight: 600; + font-size: 1.25rem; + color: var(--profile-box-title-color, #333); +} + +.ste-box-content { + display: flex; + justify-content: space-evenly; + align-items: center; + padding: 15px 8px; +} + +.ste-tps-stat { + text-align: center; +} + +.ste-tps-stat img { + width: 32px; + height: 32px; +} + +.ste-tps-value { + font-size: 22px; + font-weight: 600; + margin-top: 6px; + color: var(--profile-box-text-color, #222); +} From 9d82a886741b60282713ddb96e479e0b6b857c28 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Wed, 2 Jul 2025 17:27:20 -0400 Subject: [PATCH 06/10] Update data.json --- features/total-stats/data.json | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/features/total-stats/data.json b/features/total-stats/data.json index a227b55f..8fde2478 100644 --- a/features/total-stats/data.json +++ b/features/total-stats/data.json @@ -2,10 +2,6 @@ "title": "Total Project Stats", "description": "Displays a box on user profiles showing the total loves, favorites, views, and remixes across all their shared projects.", "credits": [ - { - "username": "RowanMoonBoy", - "url": "https://scratch.mit.edu/users/RowanMoonBoy/" - }, { "username": "MaterArc", "url": "https://scratch.mit.edu/users/MaterArc/" @@ -14,6 +10,12 @@ "type": ["Website"], "tags": ["New", "Featured"], "dynamic": true, + "styles": [ + { + "file": "style.css", + "runOn": "/users/*" + } + ], "scripts": [ { "file": "script.js", From 11a2715ea0336ffd8f9cfc98af1a20f0e8e1e41d Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Wed, 2 Jul 2025 17:39:08 -0400 Subject: [PATCH 07/10] Fix styling --- features/total-stats/script.js | 67 +++++++++++++++++----------------- 1 file changed, 33 insertions(+), 34 deletions(-) diff --git a/features/total-stats/script.js b/features/total-stats/script.js index e214fb25..bd0417b4 100644 --- a/features/total-stats/script.js +++ b/features/total-stats/script.js @@ -2,72 +2,71 @@ export default async function ({ feature }) { await ScratchTools.waitForElement(".box-head"); const username = window.location.pathname.split("/")[2]; - const res = await fetch( - `https://scratchdata.vercel.app/api/user-stats/${username}` - ); + const res = await fetch(`https://scratchdata.vercel.app/api/user-stats/${username}`); if (!res.ok) return; const data = await res.json(); const format = (n) => n.toLocaleString(); - const box = document.createElement("div"); - box.className = "ste-box ste-prevent-select"; - - const boxHead = document.createElement("div"); - boxHead.className = "ste-box-head"; - - const heading = document.createElement("h4"); - heading.textContent = "Total Project Stats"; - - boxHead.appendChild(heading); - box.appendChild(boxHead); - - const boxContent = document.createElement("div"); - boxContent.className = "ste-box-content ste-tps-content"; - const stats = [ { - src: "https://scratch.mit.edu/svgs/project/love-red.svg", + icon: "https://scratch.mit.edu/svgs/project/love-red.svg", alt: "Loves", value: data.totalLoves, }, { - src: "https://scratch.mit.edu/svgs/project/fav-yellow.svg", + icon: "https://scratch.mit.edu/svgs/project/fav-yellow.svg", alt: "Favorites", value: data.totalFavorites, }, { - src: "https://scratch.mit.edu/svgs/project/views-gray.svg", + icon: "https://scratch.mit.edu/svgs/project/views-gray.svg", alt: "Views", value: data.totalViews, }, { - src: "https://raw.githubusercontent.com/scratchfoundation/scratch-www/a9cf52cd7fbec834897587dd9e17d648ba0a38b2/static/svgs/messages/remix.svg", + icon: "https://raw.githubusercontent.com/scratchfoundation/scratch-www/a9cf52cd7fbec834897587dd9e17d648ba0a38b2/static/svgs/messages/remix.svg", alt: "Remixes", value: data.totalRemixes, }, ]; + const box = document.createElement("div"); + box.className = "box slider-carousel-container prevent-select ste-tps-box"; + box.dataset.stFeature = "total-project-stats"; + + const head = document.createElement("div"); + head.className = "box-head"; + + const title = document.createElement("h4"); + title.textContent = "Total Project Stats"; + head.appendChild(title); + box.appendChild(head); + + const content = document.createElement("div"); + content.className = "box-content slider-carousel horizontal ste-tps-content"; + for (const stat of stats) { const statDiv = document.createElement("div"); statDiv.className = "ste-tps-stat"; - const img = document.createElement("img"); - img.src = stat.src; - img.width = 32; - img.height = 32; - img.alt = stat.alt; + const icon = document.createElement("img"); + icon.src = stat.icon; + icon.width = 32; + icon.height = 32; + icon.alt = stat.alt; + icon.style.display = "block"; - const valueDiv = document.createElement("div"); - valueDiv.textContent = format(stat.value); - valueDiv.className = "ste-tps-value"; + const value = document.createElement("div"); + value.className = "ste-tps-value"; + value.textContent = format(stat.value); - statDiv.appendChild(img); - statDiv.appendChild(valueDiv); - boxContent.appendChild(statDiv); + statDiv.appendChild(icon); + statDiv.appendChild(value); + content.appendChild(statDiv); } - box.appendChild(boxContent); + box.appendChild(content); const boxHeads = document.querySelectorAll(".box-head"); if (boxHeads.length >= 5) { From d651ba15e38cda4d78661528279144825e2cec20 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Wed, 2 Jul 2025 17:39:32 -0400 Subject: [PATCH 08/10] Update style.css --- features/total-stats/style.css | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/features/total-stats/style.css b/features/total-stats/style.css index 444a5d4e..6586ab7d 100644 --- a/features/total-stats/style.css +++ b/features/total-stats/style.css @@ -1,29 +1,9 @@ -.ste-box { - background: var(--profile-box-background, #fff); - border-radius: 6px; - box-shadow: 0 0 5px rgb(0 0 0 / 0.1); - margin-top: 12px; - user-select: none; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -} - -.ste-box-head { - padding: 12px 16px; - border-bottom: 1px solid var(--profile-box-border, #ddd); -} - -.ste-box-head h4 { - margin: 0; - font-weight: 600; - font-size: 1.25rem; - color: var(--profile-box-title-color, #333); -} - -.ste-box-content { +.ste-tps-content { display: flex; justify-content: space-evenly; align-items: center; padding: 15px 8px; + height: 99.5px; } .ste-tps-stat { @@ -31,13 +11,11 @@ } .ste-tps-stat img { - width: 32px; - height: 32px; + display: block; } .ste-tps-value { font-size: 22px; font-weight: 600; margin-top: 6px; - color: var(--profile-box-text-color, #222); } From 881f043a604ab1faca3e09432ab2878a046dc343 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Thu, 3 Jul 2025 09:58:06 -0400 Subject: [PATCH 09/10] Make row horizontal --- features/total-stats/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/features/total-stats/style.css b/features/total-stats/style.css index 6586ab7d..07636ab9 100644 --- a/features/total-stats/style.css +++ b/features/total-stats/style.css @@ -8,6 +8,7 @@ .ste-tps-stat { text-align: center; + display: flex; } .ste-tps-stat img { @@ -15,7 +16,8 @@ } .ste-tps-value { - font-size: 22px; + font-size: 21px; font-weight: 600; - margin-top: 6px; + margin-top: 5px; + margin-left: 10px; } From f546ce1f9dd4c11fb56b178b8b2da317242dada2 Mon Sep 17 00:00:00 2001 From: MaterArc <105017592+MaterArc@users.noreply.github.com> Date: Thu, 3 Jul 2025 09:59:49 -0400 Subject: [PATCH 10/10] Make row more compact --- features/total-stats/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/features/total-stats/style.css b/features/total-stats/style.css index 07636ab9..55338208 100644 --- a/features/total-stats/style.css +++ b/features/total-stats/style.css @@ -2,7 +2,6 @@ display: flex; justify-content: space-evenly; align-items: center; - padding: 15px 8px; height: 99.5px; }