Added interface for custom lists!

assets/css/browser.css

@@ -218,7 +218,7 @@ textarea {
 
 textarea::-webkit-scrollbar {
     height: 8%;
-    width: 2.2%;
+    width: 1.5vh;
     background: #6d3c24;
 }
   
@@ -257,6 +257,11 @@ textarea::placeholder {
     font-size: 3vh;
 }
 
+#listLevels::placeholder {
+    color: rgba(211, 211, 211, 0.5);
+    font-size: 2.5vh;
+}
+
 input:focus, textarea:focus {
     outline: none;
 }
@@ -1077,6 +1082,10 @@ input::-webkit-inner-spin-button {
     outline-offset: -0.4vh;
 }
 
+.red {
+    color: #ff0000 !important;
+}
+
 .yellow {
     color: #ffde00;
 }

html/filters.html

@@ -28,6 +28,27 @@
 		</div>
 	</div>
 
+	<div id="customlist" class="popup">
+		<div class="brownBox bounce center supercenter" style="width: 100vh; height: 56%; padding-top: 0.3%; padding-bottom: 3.5%; padding-left: 1%">
+			<img class="gdButton" src="../assets/close.png" width="9%" style="position: absolute; top: -8.5%; left: -5.5vh" onclick="$('#filters').hide()">
+			<h1>Custom List</h1><br>
+			<p id="listInfo" style="margin-top: 1%; margin-bottom: 1.5%">Paste a <span style="color: yellow">comma-seperated</span> list of <span style="color: cyan">Level IDs</span> to create a custom list!</p>
+			<textarea id="listLevels" placeholder="18025697, 23189196, 27786218, 27728679, 25706351" style="margin-bottom: 2%; font-size: 2.5vh"></textarea>
+
+			<div class="inline" style="width: 60%">
+				<h1 class="smaller lessSpaced">List Name</h1>
+				<input id="listName" type="text" placeholder="Custom List" style="font-size: 4vh; height: 13%; width: 90%; text-align: center;" maxlength="32">
+			</div>
+			<div class="inline" style="width: 39%; margin-bottom: 3%">
+				<h1 class="smaller lessSpaced">Page Size</h1>
+				<input id="pageSize" type="number" value="10" style="font-size: 4vh; height: 13%; width: 45%; text-align: center;">
+			</div>
+
+			<a id="listLink"><img src="../assets/btn-submit.png" type="submit" height=12.5%; class="disabled gdButton" style="margin-left: 1%" id="createList"></a>
+
+		</div>
+	</div>
+
 	<div style="position:absolute; bottom: 0%; left: 0%; width: 100%">
 		<img class="cornerPiece" src="../assets/corner.png" width=7%;>
 	</div>
@@ -100,7 +121,8 @@
 	</div>
 
 	<div style="position:absolute; top: 2%; right: 1.5%; width: 10%; text-align: right">
-		<img class="gdButton" src="../assets/plus.png" width="60%" onclick="$('#filters').show()">
+		<img class="gdButton" style="margin-bottom: 15%" src="../assets/plus.png" width="60%" onclick="$('#filters').show()">
+		<img class="gdButton" src="../assets/listbutton.png" width="60%" onclick="$('#customlist').show()">
 	</div>
 
 </div>
@@ -115,6 +137,11 @@ let minusCheck = []
 let demons = []
 let demonMode = false;
 
+function undupe(array) {
+  if (!Array.isArray(array)) return array
+  else return array.filter((x, y) => array.indexOf(x) == y)
+}
+
 $('#userSearch').click(function() {
 	let query = encodeURIComponent($('#levelName').val()).replace(/%2F/gi, "")
 	if (query) window.location.href = "./u/" + query
@@ -194,9 +221,40 @@ $('.lengthDiv').click(function() {
 })
 
 $(document).keydown(function(k) {
-	if (k.which == 13 && $('#filters').is(':hidden')) $('#searchBtn').trigger('click') //enter
+	if (k.which == 13) {
+		if (!$('#customlist').is(':hidden')) k.preventDefault();
+		else if ($('#filters').is(':hidden')) $('#searchBtn').trigger('click') //enter	
+	} 
 });
 
+$('#pageSize').on('input blur', function (event) {
+	var x = +$(this).val(); var max = 100; var min = 1
+	if (event.type == "input") { if (x > max || x < min) $(this).addClass('red'); else $(this).removeClass('red')}
+	else {
+		$(this).val(Math.max(Math.min(Math.floor(x), max), min));
+		$(this).removeClass('red')
+	}
+	$('#listLevels').trigger('input')
+})
 
+let listMsg = $('#listInfo').html()
+$('#listLevels, #listName').on('input blur', function (event) {
+	let levels = $('#listLevels').val().replace(/\n| /g, ",").split(",").map(x => x.replace(/[^0-9]/g, "")).filter(x => +x > 0 && +x < 100000000000)
+	levels = undupe(levels)
 
-</script>
+	if (levels.length > 1 && levels.length <= 100) {
+		$('#listInfo').html(`A list of <span style='color: yellow'>${levels.length}</span> levels will be created.`)
+		$('#listLink').attr('href', `./${levels.join(",")}?list&count=${+$('#pageSize').val()}${$('#listName').val().length ? `&header=${encodeURIComponent($('#listName').val())}` : ""}`)
+		$('#createList').removeClass('disabled')
+	}
+
+	else {
+		$('#createList').addClass('disabled')
+		if (levels.length > 100) $('#listInfo').html('Custom lists have a max of 100 levels!')
+		else if (levels.length == 1) $('#listInfo').html("Please enter more than one level!")
+		else $('#listInfo').html(listMsg)
+	}
+
+})
+
+</script>

html/search.html

@@ -122,6 +122,7 @@ let userMode = url.searchParams.get('user')
 let type = url.searchParams.get('type')
 let list = url.searchParams.get('list')
 let count = url.searchParams.get('count')
+let header = url.searchParams.get('header')
 let loading = false;
 let gauntlets = ["Fire", "Ice", "Poison", "Shadow", "Lava", "Bonus", "Chaos", "Demon", "Time", "Crystal", "Magic", "Spike", "Monster", "Doom", "Death"]
 
@@ -151,19 +152,10 @@ function Append(firstLoad) {
 
 	fetch(searchFilters.replace("[PAGE]", page)).then(res => res.json()).then(res => {
 
-	if (res == '-1' || (res.length < 9 && type != "recent")) $('#pageUp').hide()
-	else $('#pageUp').show()
-
-	if (res == '-1' || res.length == 0) { $('#loading').hide(); return loading = false }
-
 	if (firstLoad) {
 		pages = res[0].pages
 		results = res[0].results
-		if (res.length < 9 && res.length > 0) {
+		if (pages > 999 || pages < 1) {
-			pages = 1
-			results = res.length
-		}
-		else if (pages > 999 || pages < 1) {
 			pages = null
 			if (!superSearch) $('#shuffle').addClass('grayscale')
 			else $('#shuffle').css('filter', 'hue-rotate(100deg)')
@@ -172,6 +164,11 @@ function Append(firstLoad) {
 		$('#pagenum').text(`Page 1${pages ? ` of ${pages}` : ""}`)
 	}
 
+	if (res == '-1' || (pages && page >= pages) || (!pages && res.length < 9 && type != "recent")) $('#pageUp').hide()
+	else $('#pageUp').show()
+
+	if (res == '-1' || res.length == 0) { $('#loading').hide(); return loading = false }
+
 	res.forEach((x, y) => {
 		let hasAuthor = (x.accountID != "0")
 		if (y == 0 && (type == 5 || typeof userMode == 'string')) {
@@ -219,19 +216,27 @@ $('#pageUp').click(function() {page += 1; if (!loading) Append()})
 $('#pageDown').click(function() {page -= 1; if (!loading) Append()})
 $('#pageJump').click(function() {if (loading) return; page = parseInt(($('#pageSelect').val() || 1) - 1); Append()})
 
-if (type == 1 || type == 'mostdownloaded') $('#header').text("Most Downloaded")
+if (header) {
-if (type == 2 || type == 'mostliked') $('#header').text("Most Liked")
+	header = header.slice(0, 32) || "Level Search"
-if (type == 3 || type == 'trending') $('#header').text("Trending Levels")
+	$('#header').text(header)
-if (type == 4 || type == 'recent') $('#header').text("Recent Levels")
+	document.title = header
-if (type == 6 || type == 'featured') $('#header').text("Featured")
+}
-if (type == 7 || type == 'magic') $('#header').text("Magic Levels")
+
-if (type == 11 || type == 'awarded' || type == 'starred') $('#header').text("Awarded Levels")
+else {
-if (type == 16 || type == 'halloffame' || type == 'hof') $('#header').text("Hall of Fame")
+	if (type == 1 || type == 'mostdownloaded') $('#header').text("Most Downloaded")
-if (path != "*" && (type == 10 || list != null)) $('#header').text("List of Levels")
+	if (type == 2 || type == 'mostliked') $('#header').text("Most Liked")
-if (type == 'followed') $('#header').text("Followed Creators")
+	if (type == 3 || type == 'trending') $('#header').text("Trending Levels")
-document.title = $('#header').text() || "Level Search"
+	if (type == 4 || type == 'recent') $('#header').text("Recent Levels")
-$('#meta-title').attr('content', $('#header').text() || "Level Search")
+	if (type == 6 || type == 'featured') $('#header').text("Featured")
-if ($('#header').text()) $('#meta-desc').attr('content',  `View Geometry Dash's ${$('#header').text()}${$('#header').text() == "Hall of Fame" ? "" : "list"}!`)
+	if (type == 7 || type == 'magic') $('#header').text("Magic Levels")
+	if (type == 11 || type == 'awarded' || type == 'starred') $('#header').text("Awarded Levels")
+	if (type == 16 || type == 'halloffame' || type == 'hof') $('#header').text("Hall of Fame")
+	if (path != "*" && (type == 10 || list != null)) $('#header').text("Custom List")
+	if (type == 'followed') $('#header').text("Followed Creators")
+	document.title = $('#header').text() || "Level Search"
+	$('#meta-title').attr('content', $('#header').text() || "Level Search")
+	if ($('#header').text()) $('#meta-desc').attr('content',  `View Geometry Dash's ${$('#header').text()}${$('#header').text() == "Hall of Fame" ? "" : "list"}!`)
+}
 
 if (type == 'saved') {
 	$('#header').text("Saved Levels")
@@ -288,10 +293,11 @@ $('#shuffle').click(function() {
 	}
 	else if (pages) {
 		let random = {}
+		let pageCount = +count || 10
 		randomResult = Math.floor(Math.random() * (results)) + 1
-		randomPage = Math.ceil(randomResult / 10)
+		randomPage = Math.ceil(randomResult / pageCount)
-		randomIndex = randomResult % 10
+		randomIndex = randomResult % pageCount
-		if (randomIndex == 0) randomIndex = 10
+		if (randomIndex == 0) randomIndex = pageCount
 		$('#searchBox').html('<div style="height: 4.5%"></div>')
 		$('#loading').show()
 		fetch(searchFilters.replace('[PAGE]', randomPage-1)).then(res => res.json()).then(res => {