191 lines
No EOL
9.7 KiB
HTML
191 lines
No EOL
9.7 KiB
HTML
<head>
|
|
<title>Level Analysis</title>
|
|
<meta charset="utf-8">
|
|
<meta property="og:type" content="website">
|
|
<meta id="meta-title" property="og:title" content="Level Analysis">
|
|
<meta id="meta-desc" property="og:description" content="Analyze a Geometry Dash level and view it's objects, portals, color channels, code, and more!">
|
|
<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/cp.png">
|
|
<link href="../css/level.css" 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/cp.png">
|
|
</head>
|
|
|
|
<body class="levelBG" style="overflow-y:auto;">
|
|
|
|
<div id="everything" class="center">
|
|
|
|
<div class="supercenter" id="loadingDiv" style="height:50%">
|
|
<h1 style="transform:scale(1.2)">Analyzing level...</h1>
|
|
<img class="spin noSelect" src="../assets/loading.png" height="25%" style="margin-top: 7%">
|
|
</div>
|
|
|
|
<div id="analysisDiv" style="margin-top: 2%; display:none">
|
|
<h2 id="levelName"></h2>
|
|
<h3 id="objectCount"></h3>
|
|
<h1 class="topMargin">Portal order</h1>
|
|
<div class="transparentBox analysis" id="portals" style="height: 23%"></div>
|
|
<div>
|
|
<div class="portalSetting"><h3><input checked type="checkbox" class="portalToggle" id="box1" portal="form"> <label for="box1" class="gdcheckbox gdButton portalButton"></label>Form Portals</h3></div>
|
|
<div class="portalSetting"><h3><input checked type="checkbox" class="portalToggle" id="box2" portal="size"> <label for="box2" class="gdcheckbox gdButton portalButton"></label>Size Portals</h3></div>
|
|
<div class="portalSetting"><h3><input checked type="checkbox" class="portalToggle" id="box3" portal="speed"><label for="box3" class="gdcheckbox gdButton portalButton"></label>Speed Portals</h3></div>
|
|
<br><div style="height: 1.5%"></div>
|
|
<div class="portalSetting"><h3><input checked type="checkbox" class="portalToggle" id="box4" portal="mirror"><label for="box4" class="gdcheckbox gdButton portalButton"></label>Mirror Portals</h3></div>
|
|
<div class="portalSetting"><h3><input checked type="checkbox" class="portalToggle" id="box5" portal="dual"> <label for="box5" class="gdcheckbox gdButton portalButton"></label>Dual Portals</h3></div>
|
|
<div class="portalSetting"><h3><input checked type="checkbox" class="portalToggle" id="box6" portal="dupe"> <label for="box6" class="gdcheckbox gdButton portalButton"></label>Duplicates</h3></div>
|
|
|
|
</div>
|
|
|
|
<h1 class="topMargin2" id="triggerText">Triggers</h1>
|
|
<div class="transparentBox analysis" id="triggers"></div>
|
|
|
|
<h1 class="topMargin2" id="orbText">Jump Rings</h1>
|
|
<div class="transparentBox analysis" id="orbs"></div>
|
|
|
|
<h1 class="topMargin2">Block Types</h1>
|
|
<div class="transparentBox analysis" id="blocks"></div>
|
|
|
|
<h1 class="topMargin2">Misc Objects</h1>
|
|
<div class="transparentBox analysis" id="misc" style="height: 25%"></div>
|
|
|
|
<h1 class="topMargin2">Color Channels</h1>
|
|
<div class="transparentBox analysis" id="colorDiv"></div>
|
|
|
|
<h1 class="topMargin2">Level Data</h1>
|
|
<div class="transparentBox levelCode" id="levelCode">
|
|
<p class="menuLink" id="revealCode">Reveal level data</p>
|
|
<p id="codeLength"></p>
|
|
</div>
|
|
|
|
<div style="height: 7%"></div>
|
|
|
|
</div>
|
|
|
|
<div style="position:absolute; top: 2%; left: -1.95%; width: 10%; height: 25%; pointer-events: none">
|
|
<img class="gdButton yesClick" id="backButton" src="../assets/back.png" height="30%" onclick="backButton()">
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script async type="text/javascript" src="../assets/sizecheck.js"></script>
|
|
<script>
|
|
|
|
let disabledPortals = []
|
|
let formPortals = ['cube', 'ship', 'ball', 'ufo', 'wave', 'robot', 'spider']
|
|
let speedPortals = ['-1x', '1x', '2x', '3x', '4x']
|
|
let sizePortals = ['mini', 'big']
|
|
let dualPortals = ['dual', 'single']
|
|
let mirrorPortals = ['mirrorOn', 'mirrorOff']
|
|
|
|
fetch(`../api${window.location.pathname}`).then(res => res.json()).then(res => {
|
|
if (!res.level) return window.location.href = window.location.href.replace("analyze", "search")
|
|
$('#levelName').text(res.level.name)
|
|
$('#objectCount').text(res.objects + " objects")
|
|
document.title = "Analysis of " + res.level.name
|
|
|
|
$('#meta-title').attr('content', "Analysis of " + res.level.name)
|
|
$('#meta-desc').attr('content', `${res.portals.split(",").length}x portals, ${res.orbs.total || 0}x orbs, ${res.triggers.total || 0}x triggers, ${res.misc.glow || 0}x glow...`)
|
|
|
|
let triggerList = Object.keys(res.triggers)
|
|
let orbList = Object.keys(res.orbs)
|
|
let miscList = Object.keys(res.misc)
|
|
let blockList = Object.keys(res.blocks)
|
|
let colorList = Object.keys(res.colors)
|
|
|
|
let portals = res.portals.split(", ").map(x => x.split(" "))
|
|
|
|
function appendPortals() {
|
|
$('#portals').html("")
|
|
if (res.settings.gamemode && res.settings.gamemode != "cube" && !disabledPortals.includes('form')) $('#portals').append(`<div class="inline portalDiv"><img class="portalImage" src='../objects/portal-${res.settings.gamemode}.png'><h3>Start</h3></div><img class="divider portalImage" src="../assets/divider.png" style="margin: 1.3% 0.8%">`)
|
|
if (res.settings.speed && res.settings.speed != "1x" && !disabledPortals.includes('speed')) $('#portals').append(`<div class="inline portalDiv"><img class="portalImage speedPortal" src='../objects/portal-${res.settings.speed}.png'><h3>Start</h3></div><img class="divider portalImage" src="../assets/divider.png" style="margin: 1.3% 0.8%">`)
|
|
|
|
|
|
//$('#portals').append(`<img class="portalImage" src="../objects/portal-${res.settings.gamemode}.png" style="margin: 1.3% 0.8%"><img class="divider portalImage" src="../assets/divider.png" style="margin: 1.3% 0.8%">`)
|
|
//$('#portals').append(`<img class="portalImage speedPortal" src="../objects/portal-${res.settings.speed}.png" style="margin: 2% 0.8%"><img class="divider portalImage" src="../assets/divider.png" style="margin: 1.3% 0.8%">`)
|
|
|
|
//$('#portals').append(`<div class="inline portalDiv"><img class="portalImage speedPortal" src='../objects/portal-${res.settings.speed}.png'><h3>0%</h3></div><img class="divider portalImage" src="../assets/divider.png" style="margin: 1.3% 0.8%">`)
|
|
|
|
//
|
|
|
|
let dividerCount = $('.divider').length - 1
|
|
|
|
$('.divider').each(function(y) {
|
|
if (y != dividerCount) $(this).remove()
|
|
})
|
|
|
|
portals.forEach(x => {
|
|
if (!x || x[0] == "") return;
|
|
$('#portals').append(`<div class="inline portalDiv"><img class="portalImage ${x[0].match(/[0-9]x/) ? "speedPortal" : ""}" src='../objects/portal-${x[0]}.png'><h3>${x[1]}</h3></div>`)
|
|
}
|
|
|
|
)}
|
|
|
|
appendPortals()
|
|
|
|
triggerList.forEach(x => {
|
|
if (x == "total") $('#triggerText').text(`Triggers (${res.triggers[x]})`)
|
|
else $('#triggers').append(`<div class="inline triggerDiv"><img height="50%" src='../objects/trigger-${x}.png'><h3 style="padding-top: 7%">x${res.triggers[x]}</h3></div>`)
|
|
})
|
|
|
|
orbList.forEach(x => {
|
|
if (x == "total") $('#orbText').text(`Jump Rings (${res.orbs[x]})`)
|
|
else $('#orbs').append(`<div class="inline orbDiv"><img height="50%" src='../objects/orb-${x}.png'><h3 style="padding-top: 7%">x${res.orbs[x]}</h3></div>`)
|
|
})
|
|
|
|
blockList.forEach(x => {
|
|
$('#blocks').append(`<div class="inline blockDiv"><img height="45%" src='../blocks/${x}.png'><h3 style="padding-top: 15%">x${res.blocks[x]}</h3></div>`)
|
|
})
|
|
|
|
miscList.forEach(x => {
|
|
if (x == "objects") return;
|
|
else $('#misc').append(`<div class="inline miscDiv"><img height="40%" src='../objects/obj-${x.slice(0, -1)}.png'><h3 style="padding-top: 15%">x${res.misc[x][0]}<br>${res.misc[x][1]}</h3></div>`)
|
|
})
|
|
|
|
colorList.forEach((x, y) => {
|
|
let c = res.colors[x]
|
|
$('#colorDiv').append(`${y % 8 == 0 ? "<brr>" : ""}<div class="inline aColor"><div style="background-color: rgba(${c.r}, ${c.g}, ${c.b}, ${c.opacity}); border: 0.4vh solid rgb(${c.r}, ${c.g}, ${c.b})">
|
|
${c.copiedChannel ? `<h3 class='copiedColor'>C:${c.copiedChannel}</h3>` : c.pColor ? `<h3 class='copiedColor'>P${c.pColor}</h3>` : c.blending ? "<h3 class='blendingDot'>•</h3>" : ""}
|
|
${c.opacity != "1" ? `<h3 class='copiedColor'>${c.opacity}%</h3>` : ""}
|
|
</div><h3 style="padding-top: 7%">${c.channel > 0 ? "Col " + c.channel : c.channel}</h3></div>`)
|
|
})
|
|
|
|
if (colorList.length == 0) $('#colorDiv').append('<h3 style="margin-top: 7vh">Level is too old to get color info!</h3>')
|
|
|
|
$(".portalToggle").click(function() {
|
|
if ($(this).prop('checked')) disabledPortals = disabledPortals.filter(x => x != $(this).attr('portal'))
|
|
else disabledPortals.push($(this).attr('portal'))
|
|
|
|
portals = res.portals.split(", ").map(x => x.split(" "))
|
|
if (disabledPortals.includes('form')) portals = portals.filter(x => !formPortals.includes(x[0]))
|
|
if (disabledPortals.includes('speed')) portals = portals.filter(x => !speedPortals.includes(x[0]))
|
|
if (disabledPortals.includes('size')) portals = portals.filter(x => !sizePortals.includes(x[0]))
|
|
if (disabledPortals.includes('dual')) portals = portals.filter(x => !dualPortals.includes(x[0]))
|
|
if (disabledPortals.includes('mirror')) portals = portals.filter(x => !mirrorPortals.includes(x[0]))
|
|
|
|
if (disabledPortals.includes('dupe')) {
|
|
portals.reverse().forEach((x, y) => {if (portals[y+1] && portals[y+1][0] == x[0]) portals[y][0] = null;})
|
|
portals = portals.reverse().filter(x => x[0] != null)
|
|
}
|
|
|
|
appendPortals()
|
|
})
|
|
|
|
$('#codeLength').html(`(${res.dataLength} characters)`)
|
|
|
|
$('#revealCode').click(function() {
|
|
$('#levelCode').html('<p>Loading...</p>')
|
|
|
|
window.setTimeout(function () { //small delay so "loading" message appears
|
|
$('#levelCode').html(`<p class="codeFont">${res.data}</p>`)}, 50);
|
|
$('#levelCode').focus().select()
|
|
})
|
|
|
|
$('#loadingDiv').hide()
|
|
$('#analysisDiv').show()
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script> |