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>
<title>Achievements</title>
<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>
<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-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">
@ -16,44 +16,44 @@
<div id="filters" class="popup">
<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>
<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>
<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 id="forms"></div>
<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>
<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 id="types"></div>
<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>
<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 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/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/gds.png" height="12%" style="margin: 0% 1%" title="Geometry Dash Subzero" filter="subzero">
<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/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">
</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 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 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 id="searchBox" class="supercenter dragscroll" style="width: 128vh">
@ -67,12 +67,12 @@
</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()">
<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: 9%; text-align: right">
<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 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%"">
</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"]
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) {
@ -126,11 +126,10 @@ function append(reset=true) {
fetch('./api/achievements').then(res => res.json().then(ach => {
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
colors = ach.colors
{achievements, colors} = ach
append()
function label(labelName) {
@ -163,9 +162,8 @@ function label(labelName) {
})
}
label("reward")
label("type")
label("game")
const labels = ['reward', 'type', 'game']
labels.forEach(label)
$(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() })
@ -174,9 +172,9 @@ $('#submitFilters').click(function() {
$('.popup').hide()
if (!$('.rewardFilter:not(.achDeselected)').length) $('#rewardLabel .selectAll').trigger('click')
if (!$('.typeFilter:not(.achDeselected)').length) $('#typeLabel .selectAll').trigger('click')
if (!$('.gameFilter:not(.achDeselected)').length) $('#gameLabel .selectAll').trigger('click')
labels.forEach(x => {
if (!$(`.${x}Filter:not(.achDeselected)`).length) $(`#${x}Label .selectAll`).trigger('click')
})
achievements = ach.achievements
.filter(x => !disabledFilters.reward.includes(x.rewardType))
@ -185,12 +183,9 @@ $('#submitFilters').click(function() {
append()
})
$('#check').click(function() {
completed = !completed
if (completed) $('#check').attr('src', '/assets/check-on.png')
else $('#check').attr('src', '/assets/check-off.png')
$('#check').click(() => {
$('#check').attr('src', `../assets/check-o${completed = !completed ? 'n' : 'ff'}.png`)
append(false)
})
}))
</script>