A lot of refactoring, and etc #232

Open
Rudxain wants to merge 62 commits from Rudxain/patch-1 into master
Showing only changes of commit 5eabd88abf - Show all commits

View file

@ -1,9 +1,9 @@
<head> <head>
<title>Achievements</title> <title>Achievements</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="/assets/css/browser.css?v=1" type="text/css" rel="stylesheet"> <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> <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/trophies/1.png"> <link rel="icon" href="../assets/trophies/1.png">
<meta id="meta-title" property="og:title" content="Achievements"> <meta id="meta-title" property="og:title" content="Achievements">
<meta id="meta-desc" property="og:description" content="View the list of achievements in Geometry Dash!"> <meta id="meta-desc" property="og:description" content="View the list of achievements in Geometry Dash!">
<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/trophies/1.png"> <meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/trophies/1.png">
@ -16,44 +16,44 @@
<div id="filters" class="popup"> <div id="filters" class="popup">
<div class="brownBox bounce center supercenter" style="width: 110vh; height: 75%; padding-top: 0.3%; padding-bottom: 3.5%"> <div class="brownBox bounce center supercenter" style="width: 110vh; height: 75%; padding-top: 0.3%; padding-bottom: 3.5%">
<img class="gdButton" src="/assets/close.png" width="10%" style="position: absolute; top: -7.5%; left: -5.5vh" onclick="$('#filters').hide()"> <img class="gdButton" src="../assets/close.png" width="10%" style="position: absolute; top: -7.5%; left: -5.5vh" onclick="$('#filters').hide()">
<h2 class="small" style="margin-bottom: 0%">Filters</h2><br> <h2 class="small" style="margin-bottom: 0%">Filters</h2><br>
<div id="rewardLabel"> <div id="rewardLabel">
<img filter="rewardFilter" class="achSelect selectAll" style="margin: 0% 2% 1.9% 0%" class="gdButton inline" src="/assets/select-all.png" height="5%"> <img filter="rewardFilter" class="achSelect selectAll" style="margin: 0% 2% 1.9% 0%" class="gdButton inline" src="../assets/select-all.png" height="5%">
<h1 class="smaller inline" style="margin-bottom: 1.5%">Reward</h1> <h1 class="smaller inline" style="margin-bottom: 1.5%">Reward</h1>
<img filter="rewardFilter" class="achSelect selectNone" style="margin: 0% 0% 1.9% 2%" class="gdButton inline" src="/assets/select-none.png" height="5%"> <img filter="rewardFilter" class="achSelect selectNone" style="margin: 0% 0% 1.9% 2%" class="gdButton inline" src="../assets/select-none.png" height="5%">
</div> </div>
<div id="forms"></div> <div id="forms"></div>
<div id="typeLabel"> <div id="typeLabel">
<img filter="typeFilter" class="achSelect selectAll" style="margin: 0% 2% 1.4% 0%" class="gdButton inline" src="/assets/select-all.png" height="5%"> <img filter="typeFilter" class="achSelect selectAll" style="margin: 0% 2% 1.4% 0%" class="gdButton inline" src="../assets/select-all.png" height="5%">
<h1 class="smaller inline" style="margin-top: 3%; margin-bottom: 1%">Requirement</h1> <h1 class="smaller inline" style="margin-top: 3%; margin-bottom: 1%">Requirement</h1>
<img filter="typeFilter" class="achSelect selectNone" style="margin: 0% 0% 1.4% 2%" class="gdButton inline" src="/assets/select-none.png" height="5%"> <img filter="typeFilter" class="achSelect selectNone" style="margin: 0% 0% 1.4% 2%" class="gdButton inline" src="../assets/select-none.png" height="5%">
</div> </div>
<div id="types"></div> <div id="types"></div>
<div id="gameLabel"> <div id="gameLabel">
<img filter="gameFilter" class="achSelect selectAll" style="margin: 0% 2% 1.8% 0%" class="gdButton inline" src="/assets/select-all.png" height="5%"> <img filter="gameFilter" class="achSelect selectAll" style="margin: 0% 2% 1.8% 0%" class="gdButton inline" src="../assets/select-all.png" height="5%">
<h1 class="smaller inline" style="margin-top: 1%; margin-bottom: 1.3%">Game</h1> <h1 class="smaller inline" style="margin-top: 1%; margin-bottom: 1.3%">Game</h1>
<img filter="gameFilter" class="achSelect selectNone" style="margin: 0% 0% 1.8% 2%" class="gdButton inline" src="/assets/select-none.png" height="5%"> <img filter="gameFilter" class="achSelect selectNone" style="margin: 0% 0% 1.8% 2%" class="gdButton inline" src="../assets/select-none.png" height="5%">
</div> </div>
<div id="games"> <div id="games">
<img class="gdButton achFilter gameFilter" src="/assets/achievements/gd.png" height="12%" style="margin: 0% 1%" title="Geometry Dash" filter="gd"> <img class="gdButton achFilter gameFilter" src="../assets/achievements/gd.png" height="12%" style="margin: 0% 1%" title="Geometry Dash" filter="gd">
<img class="gdButton achFilter gameFilter" src="/assets/achievements/gdm.png" height="12%" style="margin: 0% 1%" title="Geometry Dash Meltdown" filter="meltdown"> <img class="gdButton achFilter gameFilter" src="../assets/achievements/gdm.png" height="12%" style="margin: 0% 1%" title="Geometry Dash Meltdown" filter="meltdown">
<img class="gdButton achFilter gameFilter" src="/assets/achievements/gdw.png" height="12%" style="margin: 0% 1%" title="Geometry Dash World" filter="world"> <img class="gdButton achFilter gameFilter" src="../assets/achievements/gdw.png" height="12%" style="margin: 0% 1%" title="Geometry Dash World" filter="world">
<img class="gdButton achFilter gameFilter" src="/assets/achievements/gds.png" height="12%" style="margin: 0% 1%" title="Geometry Dash Subzero" filter="subzero"> <img class="gdButton achFilter gameFilter" src="../assets/achievements/gds.png" height="12%" style="margin: 0% 1%" title="Geometry Dash Subzero" filter="subzero">
</div> </div>
<img id="submitFilters" class="gdButton" style="margin: 2.5% 0.7%" src="/assets/btn-submit.png" height="10%"> <img id="submitFilters" class="gdButton" style="margin: 2.5% 0.7%" src="../assets/btn-submit.png" height="10%">
</div> </div>
</div> </div>
<div style="position:absolute; bottom: 0%; left: 0%; width: 100%"> <div style="position:absolute; bottom: 0%; left: 0%; width: 100%">
<img class="cornerPiece" src="/assets/corner.png" width=7%;> <img class="cornerPiece" src="../assets/corner.png" width=7%;>
</div> </div>
<div style="position:absolute; bottom: 0%; right: 0%; width: 100%; text-align: right;"> <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)"> <img class="cornerPiece" src="../assets/corner.png" width=7%; style="transform: scaleX(-1)">
</div> </div>
<div id="searchBox" class="supercenter dragscroll" style="width: 128vh"> <div id="searchBox" class="supercenter dragscroll" style="width: 128vh">
@ -67,12 +67,12 @@
</div> </div>
<div style="position:absolute; top: 2%; left: 1.5%; width: 10%; height: 25%; pointer-events: none"> <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()"> <img class="gdButton yesClick" id="backButton" src="../assets/back.png" height="30%" onclick="backButton()">
</div> </div>
<div style="position:absolute; top: 2%; right: 1.5%; width: 9%; text-align: right"> <div style="position:absolute; top: 2%; right: 1.5%; width: 9%; 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: 15%" src="../assets/plus.png" width="60%" onclick="$('#filters').show()">
<img id="check" class="gdButton" style="margin-bottom: 15%" src="/assets/check-off.png" width="60%""> <img id="check" class="gdButton" style="margin-bottom: 15%" src="../assets/check-off.png" width="60%"">
</div> </div>
</div> </div>
@ -92,7 +92,7 @@ let completed = false
let formStr = ["Icon", "Ship", "Ball", "UFO", "Wave", "Robot", "Spider", "Trail", "Death Effect", "Primary Color", "Secondary Color", "Misc"] let formStr = ["Icon", "Ship", "Ball", "UFO", "Wave", "Robot", "Spider", "Trail", "Death Effect", "Primary Color", "Secondary Color", "Misc"]
forms.concat(["trail", "deathEffect", "color1", "color2", "misc"]).forEach((x, y) => { forms.concat(["trail", "deathEffect", "color1", "color2", "misc"]).forEach((x, y) => {
$('#forms').append(`<img class="gdButton achFilter rewardFilter" filter="${x}" title="${formStr[y]}" src="/assets/${y > 8 ? "achievements" : "iconkitbuttons"}/${x}_on.png" height=9.5%" style="margin: 0% 0.75%">`) $('#forms').append(`<img class="gdButton achFilter rewardFilter" filter="${x}" title="${formStr[y]}" src="../assets/${y > 8 ? "achievements" : "iconkitbuttons"}/${x}_on.png" height=9.5%" style="margin: 0% 0.75%">`)
}) })
function append(reset=true) { function append(reset=true) {
@ -126,11 +126,10 @@ function append(reset=true) {
fetch('./api/achievements').then(res => res.json().then(ach => { fetch('./api/achievements').then(res => res.json().then(ach => {
Object.keys(ach.types).forEach(x => { Object.keys(ach.types).forEach(x => {
$('#types').append(`<img class="gdButton achFilter typeFilter" filter="${ach.types[x][1].join(" ")}" src="/assets/achievements/${x}.png" title="${ach.types[x][0]}" height="8.5%" style="margin: 0.6% 0.4%">`) $('#types').append(`<img class="gdButton achFilter typeFilter" filter="${ach.types[x][1].join(" ")}" src="../assets/achievements/${x}.png" title="${ach.types[x][0]}" height="8.5%" style="margin: 0.6% 0.4%">`)
}) })
achievements = ach.achievements {achievements, colors} = ach
colors = ach.colors
append() append()
function label(labelName) { function label(labelName) {
@ -163,9 +162,8 @@ function label(labelName) {
}) })
} }
label("reward") const labels = ['reward', 'type', 'game']
label("type") labels.forEach(label)
label("game")
$(document).on('click', '.selectNone', function() { $(`.${$(this).attr('filter')}:not(.achDeselected)`).trigger('click'); $('#selectNone').hide(); $('#selectAll').show() }) $(document).on('click', '.selectNone', function() { $(`.${$(this).attr('filter')}:not(.achDeselected)`).trigger('click'); $('#selectNone').hide(); $('#selectAll').show() })
$(document).on('click', '.selectAll', function() { $(`.${$(this).attr('filter')}.achDeselected`).trigger('click'); $('#selectNone').show(); $('#selectAll').hide() }) $(document).on('click', '.selectAll', function() { $(`.${$(this).attr('filter')}.achDeselected`).trigger('click'); $('#selectNone').show(); $('#selectAll').hide() })
@ -174,9 +172,9 @@ $('#submitFilters').click(function() {
$('.popup').hide() $('.popup').hide()
if (!$('.rewardFilter:not(.achDeselected)').length) $('#rewardLabel .selectAll').trigger('click') labels.forEach(x => {
if (!$('.typeFilter:not(.achDeselected)').length) $('#typeLabel .selectAll').trigger('click') if (!$(`.${x}Filter:not(.achDeselected)`).length) $(`#${x}Label .selectAll`).trigger('click')
if (!$('.gameFilter:not(.achDeselected)').length) $('#gameLabel .selectAll').trigger('click') })
achievements = ach.achievements achievements = ach.achievements
.filter(x => !disabledFilters.reward.includes(x.rewardType)) .filter(x => !disabledFilters.reward.includes(x.rewardType))
@ -185,12 +183,9 @@ $('#submitFilters').click(function() {
append() append()
}) })
$('#check').click(function() { $('#check').click(() => {
completed = !completed $('#check').attr('src', `../assets/check-o${completed = !completed ? 'n' : 'ff'}.png`)
if (completed) $('#check').attr('src', '/assets/check-on.png')
else $('#check').attr('src', '/assets/check-off.png')
append(false) append(false)
}) })
})) }))
</script> </script>