added new live cc download counter

ItziSpyder · Aug 30, 2024 · 4c2d95e · 4c2d95e
1 parent 0fc122a
commit 4c2d95e
Show file tree

Hide file tree

Showing 4 changed files with 257 additions and 0 deletions.
diff --git a/cc.html b/cc.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ClickCrystals Live</title>
+    <link rel="shortcut icon" href="./clickcrystals/assets/clickcrystals.png" type="image/x-icon">
+    <link rel="stylesheet" href="./cclive/css/cc.css">
+</head>
+<body>
+    <div class="content">
+        <h1>ClickCrystals has</h1>
+        <br>
+        <h1 id="download-text">fetching...</h1>
+        <h1>downloads</h1>
+        <br>
+        <span id="since-last-fetch">fetching...</span><span> since last fetch,</span>
+        <span id="since-last-refresh">fetching...</span><span> since last refresh</span>        
+        <p id="time-until-next-fetch">fetching...</p>
+
+        <div class="sources">
+            <div class="source" id="curseforge">
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFtbQ7j3iG7l_vAxyE8Nzz2GhHRncbG_v-Iw&s">
+                <h3>CurseForge </h3><h3 id="sub-download-text">fetching...</h3>              
+            </div>
+            <div class="source" id="modrinth">
+                <img src="https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/publication/logo/a49f8e1b-3835-4ea1-a85b-118c6425ebc3/thumb_Modrinth_Dark_Logo.png">
+                <h3>Modrinth </h3><h3 id="sub-download-text">fetching...</h3>              
+            </div>
+            <div class="source" id="github">
+                <img src="https://cdn.pixabay.com/photo/2022/01/30/13/33/github-6980894_960_720.png">
+                <h3>GitHub </h3><h3 id="sub-download-text">fetching...</h3>              
+            </div>
+            <div class="source" id="planetmc">
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtCmwTVR8PT2N-sQIvWpXKLvnIu6_gKt_KNw&s">
+                <h3>PlanetMC </h3><h3 id="sub-download-text">fetching...</h3>              
+            </div>
+        </div>
+    </div>
+</body>
+<script src="./cclive/js/downloads.js"></script>
+<script src="./cclive/js/cc.js"></script>
+</html>
diff --git a/cclive/css/cc.css b/cclive/css/cc.css
@@ -0,0 +1,71 @@
+body {
+    margin: 0;
+    padding: 0;
+
+    --highlight-color: rgb(212, 64, 64);
+
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.content {
+    width: fit-content;
+    margin: auto;
+    margin-top: 50px;
+    padding: 30px;
+
+    background-color: rgb(235, 235, 235);
+    border-radius: 20px;
+}
+.content span {
+    font-weight: bold;
+}
+.content #since-last-fetch {
+    color: var(--highlight-color);
+}
+.content #since-last-refresh {
+    color: var(--highlight-color);
+}
+.content h1 {
+    display: inline;
+}
+.content #download-text {
+    text-align: center;
+    color: var(--highlight-color);
+    font-size: 50px;
+}
+.content #time-until-next-fetch {
+    font-style: italic;
+}
+
+.sources .source {
+    border-radius: 10px;
+    padding: 10px;
+    margin-top: 10px;
+}
+.sources .source img {
+    width: 50px;
+    border-radius: 10px;
+}
+.sources .source * {
+    display: inline;
+    vertical-align: middle;
+}
+.sources .source #sub-download-text {
+    color: var(--highlight-color);
+}
+.sources .source#curseforge {
+    border: orange 1px solid;
+    background: linear-gradient(90deg, orange, white);
+}
+.sources .source#modrinth {
+    border: greenyellow 1px solid;
+    background: linear-gradient(90deg, greenyellow, white);
+}
+.sources .source#github {
+    border: gray 1px solid;
+    background: linear-gradient(90deg, gray, white);
+}
+.sources .source#planetmc {
+    border: darkcyan 1px solid;
+    background: linear-gradient(90deg, darkcyan, white);
+}
diff --git a/cclive/js/cc.js b/cclive/js/cc.js
@@ -0,0 +1,66 @@
+
+const downloadText = document.querySelector('h1#download-text');
+const countdownText = document.querySelector('#time-until-next-fetch');
+const lastFetchText = document.querySelector('#since-last-fetch');
+const lastRefreshText = document.querySelector('#since-last-refresh');
+
+const curseforgeDlt = document.querySelector('#curseforge #sub-download-text');
+const modrinthDlt = document.querySelector('#modrinth #sub-download-text');
+const githubDlt = document.querySelector('#github #sub-download-text');
+
+var timeUtilNextFetch = 15;
+var lastFetch = 0;
+var sinceLastFetch = 0;
+var sinceLastRefresh = 0;
+setInterval(tickAPIFetch, 1000);
+fetchAPI();
+
+function update() {
+    const dls = getDownloads();
+    var total = dls.total;
+    downloadText.innerText = formatNumber(total);
+
+    sinceLastFetch = total - lastFetch;
+    lastFetch = total;
+    sinceLastRefresh += sinceLastFetch < 100 ? sinceLastFetch : 0;
+
+    lastFetchText.innerText = formatNumber(sinceLastFetch);
+    lastRefreshText.innerText = formatNumber(sinceLastRefresh);
+
+    curseforgeDlt.innerText = formatNumber(dls.curseforge);
+    modrinthDlt.innerText = formatNumber(dls.modrinth);
+    githubDlt.innerText = formatNumber(dls.github);
+}
+
+function tickAPIFetch() {
+    if (timeUtilNextFetch-- > 0) {
+        countdownText.innerText = 'Fetching again in ' + timeUtilNextFetch + ' seconds';
+        return;
+    }
+    countdownText.innerText = 'Now fetching...'; 
+    fetchAPI();
+}
+
+function fetchAPI() {
+    timeUtilNextFetch = 15;
+    getCurseForge(update);
+    getModrinth(update);
+    getGitHub(update);
+}
+
+function formatNumber(num) {
+    var str = "" + num;
+    var len = str.length;
+    if (len <= 3) {
+        return str;
+    }
+
+    var result = '';
+    for (var i = len - 1; i >= 0; i--) {
+        result = str[i] + result;
+        if ((len - i) % 3 == 0 && i > 0)
+            result = ',' + result;
+    }
+    return result;
+}
+
diff --git a/cclive/js/downloads.js b/cclive/js/downloads.js
@@ -0,0 +1,77 @@
+
+const CURSEFORGE = 'https://api.curse.tools/v1/cf/mods/946253';
+const MODRINTH = 'https://api.modrinth.com/v2/project/clickcrystals';
+const GITHUB = 'https://api.github.com/repos/clickcrystals-development/ClickCrystals/releases';
+const PLANETMC = 'https://www.planetminecraft.com/mod/clickcrystal';
+
+const headers = {
+    method: 'GET'
+}
+
+var dlsCurseForge = 0;
+var dlsModrinth = 0;
+var dlsGitHub = 0;
+var dlsPlanetMC = 0;
+
+function getDownloads() {
+    return {
+        total: dlsCurseForge + dlsModrinth + dlsGitHub + dlsPlanetMC,
+        curseforge: dlsCurseForge,
+        modrinth: dlsModrinth,
+        github: dlsGitHub,
+        planetmc: dlsPlanetMC
+    }
+}
+
+async function getCurseForge(done) {
+    fetch(CURSEFORGE, headers)
+    .then(res => res.json())
+    .then(res => {
+        dlsCurseForge = res.data.downloadCount;
+        console.log(dlsCurseForge);
+        done();
+    })
+}
+
+async function getModrinth(done) {
+    fetch(MODRINTH, headers)
+    .then(res => res.json())
+    .then(res => {
+        dlsModrinth = res.downloads;
+        console.log(dlsModrinth);
+        done();
+    })
+}
+
+async function getGitHub(done) {
+    fetch(GITHUB, headers)
+    .then(res => res.json())
+    .then(res => {
+        var count = 0;
+        for (var i = 0; i < res.length; i++) {
+            var release = res[i];
+            for (var j = 0; j < release.assets.length; j++) {
+                var asset = release.assets[j];
+                count += asset.download_count;
+            }
+        }
+        dlsGitHub = count;
+        console.log(count);
+        done();
+    })
+}
+
+async function getPlanetMC(done) {
+    fetch(PLANETMC, headers)
+    .then(res => res.text())
+    .then(res => {
+        console.log(res);
+        done();
+    })
+}
+
+
+
+
+
+