Moderator leaderboard!

8=8

api/icon.js

@@ -78,7 +78,7 @@ module.exports = async (app, req, res) => {
       if (!colors[colW] || isNaN(colors[colW].r)) colW = colors[+colW] ? +colW : null
       if (colW && (!hasExtra || colW == 12)) colW = null
 
-      if (col1 == 15 || col1 == "000000") outline = true;
+      if (col1 == 15 || col1 === "000000") outline = true;
 
       let iconCode = `${req.query.form == "cursed" ? "cursed" : form}${topless ? "top" : ""}-${iconID}-${col1}-${col2}-${colG || "x"}-${colW || "x"}-${outline ? 1 : 0}` 
 

api/leaderboards/accurate.js

@@ -2,31 +2,36 @@ const {GoogleSpreadsheet} = require('google-spreadsheet');
 const sheet = new GoogleSpreadsheet('1ADIJvAkL0XHGBDhO7PP9aQOuK3mPIKB2cVPbshuBBHc'); // accurate leaderboard spreadsheet
 
 let forms = ['cube', 'ship', 'ball', 'ufo', 'wave', 'robot', 'spider']
-let lastIndex = {"stars": 0, "coins": 0, "demons": 0}
+let lastIndex = [{"stars": 0, "coins": 0, "demons": 0}, {"stars": 0, "coins": 0, "demons": 0}]
-let caches = [{"stars": null, "coins": null, "demons": null}, {"stars": null, "coins": null, "demons": null}] // 0 for JSON, 1 for GD
+let caches = [{"stars": null, "coins": null, "demons": null}, {"stars": null, "coins": null, "demons": null}, {"stars": null, "coins": null, "demons": null}] // 0 for JSON, 1 for mods, 2 for GD
 
 module.exports = async (app, req, res, post) => {
 
       if (app.offline || !app.sheetsKey || app.endpoint != "http://boomlings.com/database/") return res.send([])
       let gdMode = post || req.query.hasOwnProperty("gd")
-      let cache = caches[gdMode ? 1 : 0]
+      let modMode = !gdMode && req.query.hasOwnProperty("mod")
+      let cache = caches[gdMode ? 2 : modMode ? 1 : 0]
 
       let type = req.query.type ? req.query.type.toLowerCase() : 'stars'
       if (type == "usercoins") type = "coins"
       if (!["stars", "coins", "demons"].includes(type)) type = "stars"
-      if (lastIndex[type] + 600000 > Date.now() && cache[type]) return res.send(gdMode ? cache[type] : JSON.parse(cache[type]))   // 10 min cache
+      if (lastIndex[modMode ? 1 : 0][type] + 600000 > Date.now() && cache[type]) return res.send(gdMode ? cache[type] : JSON.parse(cache[type]))   // 10 min cache
 
       sheet.useApiKey(app.sheetsKey)
       sheet.loadInfo().then(async () => {
       let tab = sheet.sheetsById[1555821000]
-      await tab.loadCells('A2:C2')
+      await tab.loadCells('A2:F2')
-      let leaderboard = JSON.parse(tab.getCell(1, type == "demons" ? 2 : type == "coins" ? 1 : 0).value)
+
+      let cellIndex = type == "demons" ? 2 : type == "coins" ? 1 : 0
+      if (modMode) cellIndex += 3
+
+      let leaderboard = JSON.parse(tab.getCell(1, cellIndex).value)
 
       let gdFormatting = ""
       leaderboard.forEach(x => gdFormatting += `1:${x.username}:2:${x.playerID}:13:${x.coins}:17:${x.usercoins}:6:${x.rank}:9:${x.icon.icon}:10:${x.icon.col1}:11:${x.icon.col2}:14:${forms.indexOf(x.icon.form)}:15:${x.icon.glow ? 2 : 0}:16:${x.accountID}:3:${x.stars}:8:${x.cp}:46:${x.diamonds}:4:${x.demons}|`)
-      caches[0][type] = JSON.stringify(leaderboard)
+      caches[modMode ? 1 : 0][type] = JSON.stringify(leaderboard)
-      caches[1][type] = gdFormatting
+      caches[2][type] = gdFormatting
-      lastIndex[type] = Date.now()
+      lastIndex[modMode ? 1 : 0][type] = Date.now()
       return res.send(gdMode ? gdFormatting : leaderboard)
 
   })

assets/css/browser.css

@@ -1129,7 +1129,7 @@ input::-webkit-inner-spin-button {
 }
 
 .brightblue {
-    color: #bbffff
+    color: #99ffff
 }
 
 .brightred {

html/api.html

@@ -777,10 +777,10 @@
 				<p>IDs generally correspond to their order of appearance in GD</p>
 				<p>form: The form of the icon (cube/ship/ball/ufo/wave/robot/spider/swing/cursed)</p>
 				<p>icon: The ID of the icon to use</p>
-				<p>col1: The ID of the primary color to use</p>
+				<p>col1: The ID or hex code of the primary color to use</p>
-				<p>col2: The ID of the secondary color to use</p>
+				<p>col2: The ID of hex code the secondary color to use</p>
-				<p>colG: Optional color ID to overwrite the glow for the icon</p>
+				<p>colG: Optional color ID or hex code to overwrite the glow for the icon</p>
-				<p>colW: Optional color ID to overwrite the 'white' layer used by some detailed icons</p>
+				<p>colW: Optional color ID or hex code to overwrite the 'white' layer used by some detailed icons</p>
 				<p>glow: If the icon should have a glow/outline (0 = off, anything else = on)</p>
 				<p>size: The size in pixels that the icon should be (always square), in case you don't want the default. "Auto" also works.</p>
 				<p>topless: Removes the glass 'dome' from generated UFOs (legacy)</p>

html/demon.html

@@ -3,10 +3,10 @@
 	<meta charset="utf-8">
 	<link href="../css/browser.css" type="text/css" rel="stylesheet">
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-135255146-3"></script><script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-135255146-3');</script>
-	<link rel="icon" href="../assets/trophy-gold.png">
+	<link rel="icon" href="../assets/trophy-demon.png">
 	<meta id="meta-title" property="og:title" content="Demon Leaderboard">
 	<meta id="meta-desc" property="og:description" content="View the victors of a very hard Geometry Dash level!">
-	<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/trophy-gold.png">
+	<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/trophy-demon.png">
 </head>
 
 <body class="levelBG darkBG" onbeforeunload="saveUrl()">

html/iconkit.html

@@ -6,7 +6,7 @@
     <meta property="og:description" content="Build and save your very own Geometry Dash icons, right from the internet!">
     <meta property="og:title" content="Geometry Dash Online Icon Kit">
     <meta property="og:type" content="website">
-    <meta name="og:image" itemprop="image" content="../iconkitbuttons/iconkit.png">
+    <meta name="og:image" itemprop="image" content="https://gdbrowser.com/iconkitbuttons/iconkit.png">
     <meta name="theme-color" content="#CCFF55">
     <link rel="icon" href="../assets/icon.png">
     </link>
@@ -146,7 +146,7 @@ forms.forEach(form => {$("#iconKitParent").append(`<div id="${form}s"></div>`)})
 
 function generateIcon() {
 
-    if (enableGlow == 1 || selectedCol1 == 15) { $('#colG').show(); $('#ccG').show() }
+    if (enableGlow == 1 || selectedCol1 == 15 || selectedCol1 == "000000") { $('#colG').show(); $('#ccG').show() }
     else { $('#colG').hide(); $('#ccG').hide(); }
     colorSplit()
 
@@ -184,11 +184,13 @@ fetch('./api/icons').then(res => {
             let colTypes = [1, 2, "G", "W"]
             colTypes.forEach(x => $(`#col${x}`).html(""))
             iconStuff.colorOrder.forEach(function (p, n) {
-            if (iconSettings.includes("sort")) p = n;
+                if (iconSettings.includes("sort")) p = n;
-            colTypes.forEach(c => {
+                colTypes.forEach(c => {
-                $(`#col${c}`).append(`<button col=${p} class="blankButton color${c}" title="Color ${p}" id="col${c}-${p}"><img src="../previewicon/color_${p}.png" width=50px></button>`)
+                    $(`#col${c}`).append(`<button col=${p} class="blankButton color${c}" title="Color ${p}" id="col${c}-${p}"><img src="../previewicon/color_${p}.png" width=50px></button>`)
+                })
             })
-        })}
+            $('#col1').append("<span style='min-width: 10px'></span>")
+        }
 
         loadColors()
         let cubes = filterIcon('cube');
@@ -205,8 +207,6 @@ fetch('./api/icons').then(res => {
             $(`[num="${sample[0]}"][form="cube"]`).addClass('iconSelected');
         })
 
-       $('#col1').append("<span style='min-width: 10px'></span>")
-
         $(`.color1[col="${sample[1]}"]`).addClass('iconSelected');
         $(`.color2[col="${sample[2]}"]`).addClass('iconSelected');
         $(`.colorG[col="${sample[2]}"]`).addClass('iconSelected');

html/leaderboard.html

@@ -46,10 +46,14 @@
 	</div>
 	
 	<div class="leaderboardBox supercenter gs" style="width: 120vh; height: 80%; pointer-events: none">
-		<div id="sortDiv" style="position: relative; right: 10.5%; top: 10.5%; width: 0.1%">
+		<div class="sortDiv" style="position: relative; left: 100%; transform: translateX(4.5vh); top: 12%; width: 0.1%">
-			<img class="gdButton sortButton" style="margin-bottom: 1vh" sort="stars" src="../assets/sort-stars-on.png" height="11%">
+			<img class="gdButton" id="modSort" style="margin-bottom: 1vh" title="Moderators" src="../assets/sort-mod.png" height="11%">
-			<img class="gdButton sortButton" style="margin-bottom: 1vh" sort="coins"  src="../assets/sort-coins.png" height="11%">
+		</div>
-			<img class="gdButton sortButton" style="margin-bottom: 1vh" sort="demons"  src="../assets/sort-demons.png" height="11%">
+		<div class="sortDiv" style="position: relative; right: 10.5%; top: 0%; width: 0.1%">
+			<img class="gdButton sortButton" style="margin-bottom: 1vh" sort="stars" title="Most stars" src="../assets/sort-stars-on.png" height="11%" id="starSort">
+			<img class="gdButton sortButton" style="margin-bottom: 1vh" sort="coins" title="Most coins" src="../assets/sort-coins.png" height="11%">
+			<img class="gdButton sortButton" style="margin-bottom: 1vh" sort="demons" title="Most demons" src="../assets/sort-demons.png" height="11%">
+			<img class="gdButton sortButton" style="margin-bottom: 1vh; display: none" sort="cp" title="Most creator points" src="../assets/sort-cp.png" height="11%" id="cpSort">
 		</div>
 	</div>
 
@@ -64,7 +68,6 @@
 	<div class="supercenter" id="loading" style="height: 10%; top: 47%; display: none;">
 		<img class="spin noSelect" src="../assets/loading.png" height="105%">
 	</div>
-
 </div>
 
 </body>
@@ -77,6 +80,7 @@
 
 let sort = "stars"
 let useTrophies = false
+let modMode = false
 let trophies = [1, 3, 10, 25, 50, 75, 100]
 let colors = ["red", "orange", "yellow", "green", "teal", "blue", "pink"]
 
@@ -106,15 +110,18 @@ function leaderboard(val) {
 	$('#searchBox').html(`<div style="height: 4.5%"></div>`)
 	$('#loading').show()
 
-	fetch(`../api/leaderboard?count=250&${val}&type=${sort}`).then(res => res.json()).then(res => {
+	fetch(`../api/leaderboard?count=250&${val}&type=${sort}${modMode ? "&mod=1" : ""}`).then(res => res.json()).then(res => {
 
 		$('#searchBox').html(`<div style="height: 4.5%"></div>`)
 		$('.ranking').remove()
 
+		if (modMode && sort == "cp") res = res.sort(function(a, b){return b.cp - a.cp});
+
 		if (val == type && res != -1 && res.length) res.forEach((x, y) => {
 
 		$('#searchBox').append(`<div class="searchresult leaderboardSlot">
-			<h2 class="small inline gdButton" style="margin-top: 1.5%"><a href="../u/${x.username}">${x.username}</a></h2>
+			${x.moderator ? `<img title="${x.moderator == 2 ? "Elder " : ""}Moderator" src="../assets/mod${x.moderator == 2 ? "-elder" : ""}.png" style="height: 30%; cursor: help; padding-right: 1.6%; transform: translateY(0.7vh)">` : ""}
+			<h2 class="small inline gdButton" style="margin-top: 1.5%${x.moderator == 2 ? "; color: #FF9977;" : ""}"><a href="../u/${x.username}">${x.username}</a></h2>
 			<h3 class="inline sideSpace${x.stars >= 100000 ? " yellow" : ""}" style="font-size: 4.5vh">${x.stars} <img class="valign" src="../assets/star.png"
 					style="cursor: help; height: 19%; transform: translate(-25%, -10%);" title="Stars"></h3>
 		
@@ -128,10 +135,10 @@ function leaderboard(val) {
 		
 			<div class="center ranking" style="position:absolute; transform:scale(0.82) translate(-20.7vh, -20vh); height: 10%; width: 12.5%;">
 
-				${useTrophies && type == "accurate" ? `<img class="spaced" src="./trophies/${trophies.findIndex(z => x.rank <= z) + 1}.png" height="150%" style="margin-bottom: 0%; transform:scale(1.1)">` : 
+				${useTrophies && type == "accurate" ? `<img class="spaced" src="./trophies/${trophies.findIndex(z => y+1 <= z) + 1}.png" height="150%" style="margin-bottom: 0%; transform:scale(1.1)">` : 
 				`<img class="spaced lazyLoad" data-src="./icon/icon?form=${x.icon.form}&icon=${x.icon.icon}&col1=${x.icon.col1}&col2=${x.icon.col2}&glow=${x.icon.glow}&size=auto" height="150%" style="margin-bottom: 0%; transform:scale(1.1)">`}
 				
-				<h2 class="small" style="margin-top: 2%">${x.rank}</h2>
+				<h2 class="small" style="margin-top: 2%">${y+1}</h2>
 			</div>
 		</div>`)
 		})
@@ -172,7 +179,7 @@ function leaderboard(val) {
 		$('#accurateTabOff').show()
 		$('#creatorTabOff').show()
 		infoText(top250Text)
-		$('#sortDiv').hide()
+		$('.sortDiv').hide()
 	})
 
 	$('#accurateTabOff').click(function() {
@@ -184,7 +191,7 @@ function leaderboard(val) {
 		$('#accurateTabOn').show()
 		$('#creatorTabOff').show()
 		infoText(accurateText)
-		$('#sortDiv').show()
+		$('.sortDiv').show()
 	})
 
 	$('#creatorTabOff').click(function() {
@@ -196,8 +203,16 @@ function leaderboard(val) {
 		$('#accurateTabOff').show()
 		$('#creatorTabOn').show()
 		infoText(creatorText)
-		$('#sortDiv').hide()
+		$('.sortDiv').hide()
 	});
 
+	$('#modSort').click(function() {
+		modMode = !modMode
+		$(this).attr('src', `../assets/sort-mod${modMode ? "-on" : ""}.png`)
+		if (modMode) { $('#cpSort').show() }
+		else { $('#cpSort').hide(); if (sort == "cp") $('#starSort').trigger('click') }
+		leaderboard(type)
+	})
+
 
 </script>

misc/sampleIcons.json

@@ -21,11 +21,13 @@
     [ "Juniper", 98, 40, 12, 1 ],
     [ "Knobbelboy", 37, 10, 14, 0 ],
     [ "Knots", 50, 40, 3, 1 ],
+    [ "KrmaL", 30, 9, 12, 1 ],
     [ "Lemons", 93, 7, 11, 1 ],
     [ "Loafeeee", 102, 8, 22, 1 ],
     [ "Michigun", 22, 15, 12, 1 ],
     [ "MiKhaXx", 11, 1, 15, 0 ],
     [ "mulpan", 90, 2, 12, 1 ],
+    [ "npesta", 30, 2, 12, 0 ],
     [ "Norcda Childa", 53, 37, 12, 1 ],
     [ "Partition", 3, 4, 3, 0 ],
     [ "RedHuseey", 98, 9, 12, 0 ],