serg2-mirrors/GDBrowser
1
0
Fork 0
Code Issues 8 Pull requests 10 Projects Releases Packages Wiki Activity Actions

Search filters are now saved

Browse source 
god the code in filters.html is so bad jesus christ
This commit is contained in:
GDColon 2021-11-16 19:47:14 -05:00
parent f4b3717dd9
commit 4e4dea7d6a
5 changed files with 124 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/iconkitbuttons/psd.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/plus_blue.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

6
html/demon.html
View file

@ -126,9 +126,9 @@ fetch(`${server.demonList}api/v2/demons/listed?after=${demonID-1}&before=${demon
<img class="inline spaced" src="../assets/trophies/${trophies.findIndex(z => y+1 <= z) + 1}.png" height="120%" style="margin-bottom: 0%; transform:scale(1.1)">
</div>
<div style="${!x.video ? "display: none; " : ""}position:absolute; width: 12.5%; height: 15%; right: 0%">
<div style="${!x.video ? "display: none; " : ""}position:absolute; width: 12.5%; height: 15%; right: 0%; transform: translateY(-8.5vh)">
<a target="_blank" href="${x.video}">
<img class="gdButton inline spaced" src="../assets/${videoIcon}.png" height="80%" style="transform: translateY(-8.5vh)">
<img class="gdButton inline spaced" src="../assets/${videoIcon}.png" height="80%">
</a>
</div>
@ -136,6 +136,8 @@ fetch(`${server.demonList}api/v2/demons/listed?after=${demonID-1}&before=${demon
})
$('#searchBox').append('<div style="height: 4.5%"></div>')
$('#loading').hide();
}).catch(e => $('#loading').hide())
}).catch(e => $('#loading').hide())

125
html/filters.html
View file

@ -10,7 +10,7 @@
<meta name="twitter:card" content="summary">
</head>
<body class="levelBG" onbeforeunload="saveUrl()">
<body class="levelBG" onbeforeunload="saveFilters(); saveUrl()">
<div id="everything">
@ -28,7 +28,7 @@
<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%" maxlength="22">
<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>
@ -137,7 +137,8 @@
</div>
<div style="position:absolute; top: 2%; right: 1.5%; width: 10%; text-align: right">
<img class="gdButton" style="margin-bottom: 15%" src="../assets/plus.png" width="60%" onclick="$('#filters').show()">
<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>
@ -149,7 +150,6 @@
<script>
let filters = []
let minusCheck = []
let demons = []
let demonMode = false
let customSong = true
@ -176,7 +176,7 @@ $('.levelSearch').click(function() {
demonFilter = demonMode && difficulties[0] > 0
if (!difficulties.length) url += ""
else if (!demonFilter) url += "&diff=" + difficulties.join(",")
else if (!demonFilter) url += "&diff=" + undupe(difficulties).join(",")
else url += "&diff=-2&demonFilter=" + difficulties[0]
// === LENGTH === //
@ -192,7 +192,7 @@ $('.levelSearch').click(function() {
// === SONG === //
let selectedOfficial = customSong ? null : officialSong
let selectedCustom = customSong && $('#songID').val() ? $('#songID').val() : null
let selectedCustom = customSong && $('#songID').val() ? $('#songID').val().slice(0, 16) : null
let selectedSong = selectedCustom || selectedOfficial
if (selectedSong) {
@ -207,39 +207,56 @@ $('.levelSearch').click(function() {
})
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')) {
demonMode = false;
$('#difficulties').show();
$('#demonBtn').removeClass('selectedFilter')
$('.demonDiff').removeClass('selectedFilter')
return $('#demons').hide();
savedFilters.demonDiff = false
savedFilters.diff = []
return hideDemonDiffs()
}
minusCheck = []
filters = []
$(this).toggleClass('selectedFilter')
$('.diffDiv').each(function() {
if ($(this).hasClass('selectedFilter')) filters.push($(this).attr('diff'))})
filters = getDiffFilters()
minusCheck = filters.filter(x => x < 0)
let minusCheck = filters.filter(x => x < 0)
if (minusCheck.length || $(this).hasClass('demonDiff')) {
filters = minusCheck
$('.diffDiv').removeClass('selectedFilter')
$(this).addClass('selectedFilter')
}
if ($(this).attr('diff') == -2) {
$('#difficulties').hide();
$('#demons').show();
demonMode = true;
}
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) {
@ -280,22 +297,84 @@ $('#listLevels, #listName').on('input blur', function (event) {
})
$(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("")
$('#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])
@ -304,8 +383,16 @@ Fetch(`../api/music`).then(music => {
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

18
html/leaderboard.html
View file

@ -72,6 +72,11 @@
<img class="gdButton" src="../assets/smallinfo.png" width="32%" onclick="$('#infoDiv').show()">
</div>
<div style="position:absolute; top: 12%; right: 1.5%; width: 21%; text-align: right;">
<a id="discord" target="_blank" title="Official leaderboard Discord!" href="https://discord.gg/leaderboard"><img class="gdButton" src="../assets/discord.png" width="20%"></a>
<a id="altDiscord" target="_blank" title="Accurate leaderboard Discord!" style="display: none; filter: hue-rotate(300deg)" href="https://discord.gg/Uz7pd4"><img class="gdButton" src="../assets/discord.png" width="20%"></a>
</div>
<div class="supercenter" id="loading" style="height: 10%; top: 47%; display: none;">
<img class="spin noSelect" src="../assets/loading.png" height="105%">
</div>
@ -103,15 +108,20 @@ let weeklyText =
`The <cg>Weekly</cg> leaderboard displays the players who have gained the most <cy>stars</cy> in the <cb>past week</cb>. It was officially <co>removed</co> in update 2.0, but lives on in some GDPS'es.`
let accurateText =
`The <cg>Accurate Leaderboard</cg> is a highly accurate, hacker-proof leaderboard with <cy>proper stats and positioning</cy> (unlike the regular one). It is managed by <cb>XShadowWizardX, Pepper360, Octeract</cb>, and many many other helpers. Be sure to check out their <a target="_blank" href="https://docs.google.com/spreadsheets/d/10lbPnDYJXhbtlA0ls0cGjjX_osFSG559IDrTbhgPHvc"><ca class="underline">interactive leaderboard spreadsheet</ca></a> or join their <a target="_blank" href="https://discord.gg/Uz7pd4d"><ca class="underline">Discord server<ca></a>.`
`The <cg>Accurate Leaderboard</cg> is an <cy>externally managed</cy> leaderboard which aims to provide <ca>detailed</ca> and hacker-proof stats on top players. It also once provided a way to view an <cg>accurate</cg> list of players with the most <cy>stars</cy> when the official leaderboards were <ca>frozen</ca>. It is managed by <cb>XShadowWizardX, Pepper360, Octeract</cb>, and many many other helpers.`
let creatorText =
`The <cg>Creators Leaderboard</cg> is sorted by <cg>creator points</cg>, rather than stars. A player's <cg>creator points</cg> (CP) is calculated by counting their number of <cy>star rated</cy> levels, plus an extra point for every level that has been <cb>featured</cb>, plus an additional point for <co>epic rated</co> levels.`
if (showWeek) $('#weeklyStats').attr('src', '../assets/sort-week-on.png')
function infoText(text) { $('#infoText').html(text) }
infoText(accurateText)
function infoText(text, altDiscord) {
$('#infoText').html(text)
if (altDiscord) { $('#discord').hide(); $('#altDiscord').show() }
else { $('#discord').show(); $('#altDiscord').hide() }
}
infoText(top250Text)
function leaderboard(val) {
@ -225,7 +235,7 @@ $('#accurateTabOff').click(function() {
$('#topTabOff').show()
$('#accurateTabOn').show()
$('#creatorTabOff').show()
infoText(accurateText)
infoText(accurateText, true)
$('.sortDiv').show()
})