GDBrowser/html/filters.html
2022-05-29 13:18:14 -04:00

413 lines
19 KiB
HTML

<head>
<title>Level Search</title>
<meta charset="utf-8">
<link href="../assets/css/browser.css?v=1" 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/coin.png">
<meta id="meta-title" property="og:title" content="Level Search">
<meta id="meta-desc" property="og:description" content="Search for Geometry Dash levels, and filter by length, difficulty, song + more!">
<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/coin.png">
<meta name="twitter:card" content="summary">
</head>
<body class="levelBG" onbeforeunload="saveFilters(); saveUrl()">
<div id="everything">
<div id="filters" class="popup">
<div id="filterStuff" class="brownBox bounce center supercenter" style="width: 101vh; height: 50%; 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 style="margin-bottom: 4%">Advanced Options</h1><br>
<div><h1><input type="checkbox" id="box-featured" url="&featured"><label for="box-featured" class="gdcheckbox gdButton"></label>Featured</h1></div>
<div><h1><input type="checkbox" id="box-epic" url="&epic"><label for="box-epic" class="gdcheckbox gdButton"></label>Epic</h1></div>
<div style="margin-bottom: 6%"><h1><input type="checkbox" id="box-nostar" url="&noStar"><label for="box-nostar" class="gdcheckbox gdButton"></label>No Star</h1></div>
<div><h1><input type="checkbox" id="box-original" url="&original"><label for="box-original" class="gdcheckbox gdButton"></label>Original</h1></div>
<div><h1><input type="checkbox" id="box-2player" url="&twoPlayer"><label for="box-2player" class="gdcheckbox gdButton"></label>2-Player</h1></div>
<div style="margin-bottom: 5%"><h1><input type="checkbox" id="box-coins" url="&coins"><label for="box-coins" class="gdcheckbox gdButton"></label>Coins</h1></div>
<h1 class="smallerer lessSpaced">Song</h1>
<img id="normalSong" class="gdButton inline gray" style="margin-right: 0.5%" src="../assets/song-normal.png" height="8%">
<img id="customSong" class="gdButton inline" style="margin-left: 0.5%" src="../assets/song-custom.png" height="8%">
<br>
<input id="songID" type="number" placeholder="Custom Song ID" style="height: 15%; width: 70%; text-align: center; margin-top: 2%">
<div id="songSelect" style="width: 100%; display: none; margin-top: 3%; text-align: center">
<img style="width: 4%" id="songDown" class="gdButton inline valign songChange" jump="-1" src="../assets/whitearrow-left.png">
<h1 class="inline valign smallerer center" id="songName" style="min-width: 60%"></h1>
<img style="width: 4%" id="songUp" class="gdButton inline valign songChange" jump="1" id="nextSong" src="../assets/whitearrow-right.png">
</div>
</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="$('#customlist').hide()">
<h1>Custom List</h1><br>
<p id="listInfo" style="margin-top: 1%; margin-bottom: 1.5%">Paste a <cy>comma-separated</cy> list of <ca>Level IDs</ca> 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>
<div style="position:absolute; bottom: 0%; right: 0%; width: 100%; text-align: right;">
<img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleX(-1); pointer-events: none">
</div>
<div class="transparentBox center" style="width: 115vh; height: 9%; margin: 1.5% auto 1% auto; padding-bottom: 0.2%">
<div>
<input type="text" id="levelName" placeholder="Enter a level, user, or ID" maxlength=20>
<img search="0" src="../assets/search.png" id="searchBtn" width="20%" class="valign gdButton levelSearch" style="margin-left: 1%; margin-bottom: 2.2%">
<img id="userSearch" src="../assets/search-user.png" width="9.6%" class="valign gdButton" style="margin-left: 1%; margin-bottom: 2.2%">
</div>
</div>
<div class="center">
<h1 class="smaller">Quick Search</h1>
</div>
<div class="transparentBox center" style="width: 115vh; height: 35%; margin: 0.5% auto 1% auto; padding-top: 1.1%">
<img src="../assets/btn-top.png" height="27%" class="valign gdButton spaced levelSearch" search="mostdownloaded">
<span style="margin-right: 3%"></span>
<img src="../assets/btn-liked.png" height="27%" class="valign gdButton spaced levelSearch" search="mostliked">
<br>
<img src="../assets/btn-trending.png" height="27%" class="valign gdButton spaced levelSearch" search="trending">
<img src="../assets/btn-recent.png" height="27%" class="valign gdButton spaced levelSearch" search="recent" style="margin-left: 2%; margin-right: 2%">
<img src="../assets/btn-magic.png" height="27%" class="valign gdButton spaced levelSearch" search="magic">
<br>
<img src="../assets/btn-awarded.png" height="27%" class="valign gdButton levelSearch" search="awarded">
<img src="../assets/btn-featured.png" height="27%" class="valign gdButton levelSearch" search="featured" style="margin: 0% 2%">
<img src="../assets/btn-followed.png" height="27%" id="followedSearch" class="valign gdButton levelSearch" search="followed">
</div>
<div class="center">
<h1 class="smaller">Filters</h1>
</div>
<div id="difficulties" class="transparentBox center" style="width: 115vh; height: 12%; margin: 0.5% auto 1% auto; padding-top: 1%; padding-bottom: 1%;">
<div class="diffDiv gdButton" diff="-1"><img src="../assets/difficulties/unrated.png"><h3 class="mini">N/A</h3></div>
<div class="diffDiv gdButton" diff=1><img src="../assets/difficulties/easy.png"><h3 class="mini">Easy</h3></div>
<div class="diffDiv gdButton" diff=2><img src="../assets/difficulties/normal.png"><h3 class="mini">Normal</h3></div>
<div class="diffDiv gdButton" diff=3><img src="../assets/difficulties/hard.png"><h3 class="mini">Hard</h3></div>
<div class="diffDiv gdButton" diff=4><img src="../assets/difficulties/harder.png"><h3 class="mini">Harder</h3></div>
<div class="diffDiv gdButton" diff=5><img src="../assets/difficulties/insane.png"><h3 class="mini">Insane</h3></div>
<div class="diffDiv gdButton" id="demonBtn" diff=-2><img src="../assets/difficulties/demon.png" style="width: 85%"><h3 class="mini">Demon</h3></div>
<!-- <div class="diffDiv gdButton" style="filter: brightness(100%)" id="demonBtn" diff=-2><img class="darkDiff" src="../assets/difficulties/demon.png" style="width: 85%"><h3 class="darkDiff mini">Demon</h3> -->
<!-- <img src="../assets/exclamation.png" style="position: absolute; width: 19%; left: 86%; bottom: 68%"></div> -->
<div class="diffDiv gdButton" diff=-3><img src="../assets/difficulties/auto.png"><h3 class="mini">Auto</h3></div>
</div>
<div id="demons" class="transparentBox" style="display: none; width: 115vh; height: 12%; margin: 0.5% auto 1% auto; padding-top: 0.6%; padding-bottom: 1.4%;">
<div class="diffDiv gdButton demonDiff" diff=1 style="margin-left: 3.5%"><img src="../assets/difficulties/demon-easy.png" style="width: 90%"><h3 class="mini center">Easy</h3></div>
<div class="diffDiv gdButton demonDiff" diff=2><img src="../assets/difficulties/demon-medium.png" style="width: 90%"><h3 class="mini center smallTextWoo">Medium</h3></div>
<div class="diffDiv gdButton demonDiff" diff=3><img src="../assets/difficulties/demon-hard.png" style="width: 90%"><h3 class="mini center">Hard</h3></div>
<div class="diffDiv gdButton demonDiff" diff=4><img src="../assets/difficulties/demon-insane.png" style="width: 95%"><h3 class="mini center smallTextWoo">Insane</h3></div>
<div class="diffDiv gdButton demonDiff" diff=5><img src="../assets/difficulties/demon-extreme.png" style="width: 100%"><h3 class="mini center smallTextWoo">Extreme</h3></div>
<div class="diffDiv gdButton goBack" diff=-2 style="margin-left: 2.3%; filter: none"><img src="../assets/difficulties/demon.png" style="width: 90%"><h3 class="mini">Demon</h3></div>
<a id="demonList" style="display: none" href="./search/*?type=demonlist"><div class="gdButton diffDiv" style="filter: none"><img src="../assets/trophy2.png" style="width: 95%"><h3 class="yellow mini center">List</h3></div></a>
</div>
<div class="transparentBox center" style="width: 115vh; height: 6%; margin: 0.5% auto 1% auto; padding-top: 1%; padding-bottom: 0.5%;">
<!-- <div class="lengthDiv" style="pointer-events: none" len=0><h1 class="gdButton smaller" style="pointer-events: none"><img src="../assets/time.png" height="90%" style="pointer-events: none"></h1></div> -->
<div class="lengthDiv" len=0><h1 class="gdButton smaller">Tiny</h1></div>
<div class="lengthDiv" len=1><h1 class="gdButton smaller">Short</h1></div>
<div class="lengthDiv" len=2><h1 class="gdButton smaller">Medium</h1></div>
<div class="lengthDiv" len=3><h1 class="gdButton smaller">Long</h1></div>
<div class="lengthDiv" len=4><h1 class="gdButton smaller">XL</h1></div>
<div class="lengthDiv" id="starCheck"><img src="../assets/star.png" class="gdButton" height="90%"></div>
</div>
<div style="position:absolute; top: 2%; left: 1.5%; width: 10%; height: 25%; pointer-events: none">
<img class="gdButton yesClick" id="backButton" src="../assets/back.png" height="30%" onclick="backButton()">
</div>
<div style="position:absolute; top: 2%; right: 1.5%; width: 10%; text-align: right">
<img class="gdButton" style="margin-bottom: 12%" src="../assets/close.png" width="60%" onclick="clearFilters()">
<img class="gdButton" style="margin-bottom: 12%" id="showFilters" src="../assets/plus.png" width="60%" onclick="$('#filters').show()">
<img class="gdButton" src="../assets/listbutton.png" width="60%" onclick="$('#customlist').show()">
</div>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="../global.js?v=1"></script>
<script>
let filters = []
let demons = []
let demonMode = false
let customSong = true
let officialSong = 1
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
})
$('.levelSearch').click(function() {
let url = "./search/" + (encodeURIComponent($('#levelName').val()) || "*") + "?type=" + $(this).attr('search')
if ($(this).attr('search') == "featured") return window.location.href = url
// === DIFFICULTY === //
let difficulties = []
$('.diffDiv').each(function() {if ($(this).hasClass('selectedFilter')) difficulties.push($(this).attr('diff'))})
demonFilter = demonMode && difficulties[0] > 0
if (!difficulties.length) url += ""
else if (!demonFilter) url += "&diff=" + undupe(difficulties).join(",")
else url += "&diff=-2&demonFilter=" + difficulties[0]
// === LENGTH === //
let lengths = []
$('.lengthDiv').each(function() {if ($(this).hasClass('selectedFilter') && $(this).attr('len')) lengths.push($(this).attr('len'))})
if (lengths.length) url += "&length=" + lengths.join(",")
if ($('#starCheck').hasClass('selectedFilter')) url += "&starred"
// === CHECKBOXES === //
$("input:checked").each(function () {
url += $(this).attr('url')})
// === SONG === //
let selectedOfficial = customSong ? null : officialSong
let selectedCustom = customSong && $('#songID').val() ? $('#songID').val().slice(0, 16) : null
let selectedSong = selectedCustom || selectedOfficial
if (selectedSong) {
url += "&songID=" + selectedSong
if (customSong) url += "&customSong"
}
// === FINISHING UP === //
if (url.endsWith('?type=0')) url = url.slice(0, -7)
window.location.href = url.replace(/\?type=0&/, "?")
})
function getDiffFilters() {
return $('.diffDiv.selectedFilter').map(function() { return $(this).attr('diff') }).toArray()
}
function showDemonDiffs() {
$('#difficulties').hide();
$('#demons').show();
demonMode = true;
}
function hideDemonDiffs() {
$('#difficulties').show();
$('#demons').hide();
demonMode = false;
}
$('.diffDiv').click(function() {
if ($(this).hasClass('goBack')) {
$('#demonBtn').removeClass('selectedFilter')
$('.demonDiff').removeClass('selectedFilter')
savedFilters.demonDiff = false
savedFilters.diff = []
return hideDemonDiffs()
}
$(this).toggleClass('selectedFilter')
filters = getDiffFilters()
let minusCheck = filters.filter(x => x < 0)
if (minusCheck.length || $(this).hasClass('demonDiff')) {
filters = minusCheck
$('.diffDiv').removeClass('selectedFilter')
$(this).addClass('selectedFilter')
}
savedFilters.diff = getDiffFilters()
savedFilters.demonDiff = demonMode
if ($(this).attr('diff') == -2) showDemonDiffs()
})
$('.lengthDiv').click(function() {
$(this).toggleClass('selectedFilter')
savedFilters.len = $('.lengthDiv.selectedFilter').map(function() { return $(this).attr('len') }).toArray()
savedFilters.starred = $('#starCheck').hasClass('selectedFilter')
if (!savedFilters.starred) delete savedFilters.starred
})
$(document).keydown(function(k) {
let searchFocus = $(':focus-visible').length == 1 && $(':focus-visible').first().attr('id') == "levelName"
if ((!$(':focus-visible').length || searchFocus) && k.which == 13) { // enter
if (!$('#customlist').is(':hidden')) k.preventDefault();
else if ($('#filters').is(':hidden')) $('#searchBtn').trigger('click')
}
});
$('#pageSize').on('input blur', function (event) {
var x = +$(this).val(); var max = 250; 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)
if (levels.length > 1 && levels.length <= 100) {
$('#listInfo').html(`A list of <cy>${levels.length}</cy> levels will be created.`)
$('#listLink').attr('href', `../search/${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)
}
})
$(document).on('change', 'input[url]', function () {
savedFilters.checked = $('input[url]:checked').map(function() { return $(this).attr('id').slice(4) }).toArray()
checkExtraFilters()
})
$('#normalSong').click(function() {
customSong = false
savedFilters.defaultSong = true
savedFilters.song = officialSong
$('#customSong').addClass('gray')
$('#normalSong').removeClass('gray')
$('#songSelect').show()
$('#songID').hide()
checkExtraFilters()
})
$('#customSong').click(function() {
customSong = true
delete savedFilters.defaultSong
savedFilters.song = Number($('#songID').val().slice(0, 16)) || 0
$('#normalSong').addClass('gray')
$('#customSong').removeClass('gray')
$('#songID').show()
$('#songSelect').hide()
checkExtraFilters()
})
$('#songID').on('input change blur', function() {
savedFilters.song = Number($(this).val().slice(0, 16))
checkExtraFilters()
})
function saveFilters() {
localStorage.filters = JSON.stringify(savedFilters)
}
function clearFilters() {
$('.selectedFilter').removeClass('selectedFilter')
$('input[url]').prop('checked', false)
$('#songID').val("")
$('#levelName').val("")
$('#customSong').click()
hideDemonDiffs()
officialSong = 1
savedFilters = { diff: [], len: [], checked: [] }
delete localStorage.saveFilters
checkExtraFilters()
}
function checkExtraFilters() {
let hasExtra = savedFilters.checked.length || savedFilters.defaultSong || savedFilters.song > 0
$('#showFilters').attr('src', `../assets/plus${hasExtra ? "_blue" : ""}.png`)
}
let savedFilters = JSON.parse(localStorage.filters || "{}")
$('input[url]').prop('checked', false)
if (!savedFilters.diff) savedFilters.diff = []
else if (savedFilters.demonDiff) { showDemonDiffs(); $(`.demonDiff[diff=${savedFilters.diff}]`).trigger('click') }
else if (savedFilters.diff[0] == -2) { $('.diffDiv[diff=-2]').first().addClass('selectedFilter'); showDemonDiffs() }
else (savedFilters.diff.forEach(x => $(`.diffDiv:not(.demonDiff)[diff=${x || "-"}]`).addClass('selectedFilter')))
if (!savedFilters.len) savedFilters.len = []
else (savedFilters.len.forEach(x => $(`.lengthDiv[len=${x}]`).addClass('selectedFilter')))
if (savedFilters.starred) $('#starCheck').addClass('selectedFilter')
if (!savedFilters.checked) savedFilters.checked = []
else (savedFilters.checked.forEach(x => $(`input[id=box-${x}]`).prop('checked', true)))
let hadDefaultSong = savedFilters.defaultSong
if (savedFilters.defaultSong) {
officialSong = +savedFilters.song || 1
$('#normalSong').trigger('click')
}
else if (+savedFilters.song && +savedFilters.song > 0) $('#songID').val(savedFilters.song)
checkExtraFilters()
Fetch(`../api/music`).then(music => {
$('#songName').html("1: " + music[1][0])
$(document).on('click', '.songChange', function () {
officialSong += Number($(this).attr('jump'))
if (officialSong < 1) officialSong = 1
$('#songName').html(`${officialSong}: ${music[officialSong] ? music[officialSong][0] : officialSong == 69 ? "Nice" : "Unknown"}`)
savedFilters.song = officialSong
savedFilters.defaultSong = true
checkExtraFilters()
})
if (hadDefaultSong) {
checkExtraFilters()
$('.songChange').trigger('click')
}
$(document).keydown(function(k) {
if (customSong) return;
if (k.which == 37) $('#songDown').trigger('click') // left
if (k.which == 39) $('#songUp').trigger('click') // right
});
if (onePointNine) {
$('#userSearch').hide()
$('#followedSearch').addClass('menuDisabled')
$('#levelName').css('width', '76%')
}
if (gdps) Fetch(`../api/gdps?current=1`).then(res => { if (res.demonList) $('#demonList').show() })
else $('#demonList').show()
})
</script>