195 lines
No EOL
9.7 KiB
HTML
195 lines
No EOL
9.7 KiB
HTML
<head>
|
|
<title>Achievements</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/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">
|
|
<meta name="twitter:card" content="summary">
|
|
</head>
|
|
|
|
<body class="levelBG" onbeforeunload="saveUrl()">
|
|
|
|
<div id="everything" style="overflow: auto;">
|
|
|
|
<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()">
|
|
<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%">
|
|
<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%">
|
|
</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%">
|
|
<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%">
|
|
</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%">
|
|
<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%">
|
|
</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">
|
|
</div>
|
|
<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%;>
|
|
</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)">
|
|
</div>
|
|
|
|
<div id="searchBox" class="supercenter dragscroll" style="width: 128vh">
|
|
<div style="height: 4.5%"></div>
|
|
</div>
|
|
|
|
<div class="epicbox supercenter gs" style="width: 126vh; height: 80%; pointer-events: none"></div>
|
|
|
|
<div class="center" style="position:absolute; top: 8%; left: 0%; right: 0%">
|
|
<h1 class="pre" id="header">Achievements</h1>
|
|
</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: 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%"">
|
|
</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 type="text/javascript" src="../dragscroll.js"></script>
|
|
<script>
|
|
|
|
let disabledFilters = {reward: [], type: [], game: []}
|
|
let forms = ["icon", "ship", "ball", "ufo", "wave", "robot", "spider"]
|
|
let gameColors = {gd: "255,200,0", meltdown: "255, 100, 0", world: "100,220,0", subzero: "0,255,255"}
|
|
let achievements = []
|
|
let colors = {}
|
|
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%">`)
|
|
})
|
|
|
|
function append(reset=true) {
|
|
$('#searchBox').html(`<div style="height: 4.5%"></div>`)
|
|
achievements.forEach(x => {
|
|
|
|
let iconImg = `"`;
|
|
if (forms.includes(x.rewardType)) iconImg = `../iconkit/premade/${x.rewardType}_${x.rewardID}.png" width="90%" title="${x.rewardType}_${x.rewardID < 10 ? "0" : ""}${x.rewardID}"`
|
|
else if (x.rewardType.startsWith("color")) {
|
|
let col = colors[x.rewardID]
|
|
let colType = x.rewardType.slice(5)
|
|
iconImg = `../assets/col${colType}.png" class="colorCircle" width="80%" title="${colType == 1 ? "Primary" : "Secondary"} Color ${x.rewardID}" style="background-color: rgb(${col.r}, ${col.g}, ${col.b})"`
|
|
}
|
|
else if (x.rewardType == "deathEffect") iconImg = `../assets/deatheffects/${x.rewardID}.png" width="85%" title="Death Effect ${x.rewardID}"`
|
|
else if (x.rewardType == "trail") iconImg = `../assets/trails/${x.rewardID}.png" width="85%" title="Trail ${x.rewardID}"`
|
|
else if (x.rewardType == "misc") iconImg = `../assets/coin.png" width="85%"`
|
|
console.log(iconImg)
|
|
|
|
$('#searchBox').append(`<div class="flex searchresult leaderboardSlot" style="align-items: center; height: 18%; width: 92%; padding-left: 3%; padding-top: 0%; overflow: hidden">
|
|
<div class="flex" style="width: 8%; margin-right: 2%"><img src="${iconImg}></div>
|
|
<div>
|
|
<h2 title="${x.trueID}" class="smallerer" style="font-size: 4.5vh; margin-top: 2vh; color: rgb(${gameColors[x.game]})">${x.name}</h2>
|
|
<p style="margin-top: 2vh; color:${completed ? "yellow" : "white"}">${completed ? x.achievedDescription : x.description}</p>
|
|
</div>
|
|
</div>`)
|
|
})
|
|
$('#searchBox').append('<div style="height: 4.5%"></div>')
|
|
if (reset) $('#searchBox').scrollTop(0)
|
|
}
|
|
|
|
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%">`)
|
|
})
|
|
|
|
achievements = ach.achievements
|
|
colors = ach.colors
|
|
append()
|
|
|
|
function label(labelName) {
|
|
let labelFilter = `.${labelName}Filter`
|
|
let labelID = `#${labelName}Label h1`
|
|
let labelButtons = `#${labelName}Label img`
|
|
$(labelFilter).hover(function() {
|
|
$(labelButtons).addClass('hidey')
|
|
$(labelID).attr('text', $(labelID)
|
|
.text()).text($(this).attr('title')).addClass("labelHover")
|
|
}, function() {
|
|
$(labelButtons).removeClass('hidey')
|
|
$(labelID).text($(labelID).attr('text')).removeClass("labelHover")
|
|
})
|
|
|
|
$(labelFilter).click(function() {
|
|
let filters = $(this).attr('filter').split(" ")
|
|
if (!$(this).hasClass('achDeselected')) {
|
|
$(this).addClass('achDeselected')
|
|
filters.forEach(x => disabledFilters[labelName].push(x))
|
|
if (labelName == "reward") $(this).attr('src', $(this).attr('src').replace("_on", "_off"))
|
|
}
|
|
else {
|
|
$(this).removeClass('achDeselected')
|
|
filters.forEach(x => disabledFilters[labelName] = disabledFilters[labelName].filter(y => y != x))
|
|
if (labelName == "reward") $(this).attr('src', $(this).attr('src').replace("_off", "_on"))
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
label("reward")
|
|
label("type")
|
|
label("game")
|
|
|
|
$(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() })
|
|
|
|
$('#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')
|
|
|
|
achievements = ach.achievements
|
|
.filter(x => !disabledFilters.reward.includes(x.rewardType))
|
|
.filter(x => !disabledFilters.type.some(y => x.id.startsWith(y)))
|
|
.filter(x => !disabledFilters.game.includes(x.game))
|
|
append()
|
|
})
|
|
|
|
$('#check').click(function() {
|
|
completed = !completed
|
|
if (completed) $('#check').attr('src', '../assets/check-on.png')
|
|
else $('#check').attr('src', '../assets/check-off.png')
|
|
append(false)
|
|
})
|
|
}))
|
|
|
|
</script> |