2019-10-15 23:42:47 -03:00
|
|
|
<head>
|
|
|
|
|
<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>
|
|
|
|
|
<title>Online Icon Kit</title>
|
|
|
|
|
<link href="../assets/generate.css" type="text/css" rel="stylesheet">
|
|
|
|
|
<meta name="viewport" content="width=1024">
|
|
|
|
|
<meta property="og:description" content="Build and save your very own Geometry Dash icons, right from the internet!">
|
|
|
|
|
<meta property="og:title" content="Geometry Dash Online Icon Kit">
|
|
|
|
|
<meta property="og:type" content="website">
|
|
|
|
|
<meta name="og:image" itemprop="image" content="../iconkitbuttons/iconkit.png">
|
|
|
|
|
<meta name="theme-color" content="#CCFF55">
|
|
|
|
|
<link rel="icon" href="../assets/icon.png">
|
|
|
|
|
</link>
|
|
|
|
|
</head>
|
|
|
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
|
|
|
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
|
|
|
|
|
<script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
|
|
|
|
|
<body class="iconscroll" style="background-image: linear-gradient(rgb(139, 139, 139), rgb(100, 100, 100));">
|
|
|
|
|
<div class="center hidden"><br>
|
|
|
|
|
<img id="iconkitlogo" src="../assets/iconkit.png" height=50px; style="margin-bottom: 7px;"><br><br>
|
|
|
|
|
<img id="loading" src="../assets/loading.png" class="spin" height=95px; style="margin: auto auto 25px auto">
|
|
|
|
|
<img id="result" src="../icon/icon" download="icon.png">
|
|
|
|
|
<hr id="gdfloor">
|
|
|
|
|
<div id="menuButtons" style="height: 65px; margin: 0 0 15 0;">
|
|
|
|
|
<button class="blankButton menuButton" id="downloadIcon" title="Download icon"><a id="downloadLink" download="icon.png" href="../icon/icon"><img src="../iconkitbuttons/download.png" width=50px></a></button>
|
|
|
|
|
<button class="blankButton menuButton" id="generateIcon" title="Generate icon"><img src="../iconkitbuttons/play.png" width=65px></button>
|
|
|
|
|
<button class="blankButton menuButton" id="fetchUser" title="Get account icon"><img src="../iconkitbuttons/player.png" width=50px></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="iconTabs"></div><br>
|
|
|
|
|
<div id="iconKitParent" class="iconKit">
|
|
|
|
|
<div id="iconprogressbar">
|
|
|
|
|
<div id="iconloading"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div><br>
|
|
|
|
|
<div id="colors" class="iconKit">
|
|
|
|
|
<div id="col1"></div>
|
|
|
|
|
<div id="col2"></div>
|
|
|
|
|
</div><br>
|
|
|
|
|
<p style="color: rgb(20, 20, 20); margin-top: 3;">All sprites/assets belong to <a href="http://robtopgames.com">RobTop Games</a>.</p>
|
|
|
|
|
|
|
|
|
|
<div style="position:absolute; top: 2%; left: -1.95%; width: 10%; height: 25%; pointer-events: none">
|
|
|
|
|
<img class="gdButton" style="pointer-events: all" id="backButton" src="../assets/back.png" height="30%" onclick="backButton()">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
|
|
$('#loading').hide();
|
|
|
|
|
$('.hidden').show();
|
|
|
|
|
|
|
|
|
|
let mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
|
|
|
|
|
let forms = ['cube', 'ship', 'ball', 'ufo', 'wave', 'robot', 'spider']
|
|
|
|
|
let currentForm = 'cube'
|
|
|
|
|
|
|
|
|
|
let selectedIcon = 1
|
|
|
|
|
let selectedForm = 'cube'
|
|
|
|
|
let selectedCol1 = 0
|
|
|
|
|
let selectedCol2 = 3
|
|
|
|
|
let enableGlow = 0
|
|
|
|
|
|
|
|
|
|
let imagesLoaded = 0
|
|
|
|
|
let totalLoaded = 0
|
|
|
|
|
|
|
|
|
|
function capitalize(str) {return str[0].toUpperCase() + str.substr(1)}
|
|
|
|
|
|
|
|
|
|
if (mobile) {
|
|
|
|
|
$('#logo').attr('width', '80%');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
forms.forEach(form => {$("#iconTabs").append(`<button form="${form}" class="blankButton iconTabButton"><img src="../iconkitbuttons/${form}_off.png" width=50px></button>`)})
|
|
|
|
|
$("#iconTabs").append(`<button class="blankButton glowToggle" id="glowbtn"><img id="glow" src="../iconkitbuttons/streak_off.png" width=50px></button>`)
|
|
|
|
|
|
|
|
|
|
forms.forEach(form => {$("#iconKitParent").append(`<div id="${form}s"></div>`)})
|
|
|
|
|
|
|
|
|
|
fetch('./api/icons').then(res => {
|
|
|
|
|
return (res.json())})
|
|
|
|
|
.then(iconArray => {
|
|
|
|
|
|
|
|
|
|
function filterIcon(name) { return iconArray.filter(x => x.startsWith(name)).sort(function (a,b) {return a.replace(/[^0-9]/g, "") - b.replace(/[^0-9]/g, "");})}
|
|
|
|
|
|
|
|
|
|
function appendIcon(form, formName) {
|
|
|
|
|
|
|
|
|
|
imagesLoaded = 0; totalLoaded = 0
|
|
|
|
|
$('#' + formName + 's').append('<br>')
|
|
|
|
|
|
|
|
|
|
form.forEach(function (i, p) {
|
|
|
|
|
if (p != 0 && p % 12 == 0) $('#' + formName + 's').append('<br>')
|
|
|
|
|
$('#' + formName + 's').append(`<button num="${p + 1}" form="${formName}" class="blankButton iconButton" id="${formName}-${p + 1}"><img src="../gdicon/${i}" width="50px" title="${capitalize(formName)} ${p + 1}"></button>`)})
|
|
|
|
|
$('#' + formName + 's').imagesLoaded(function() {
|
|
|
|
|
}).progress(function() {
|
|
|
|
|
imagesLoaded += 1;
|
|
|
|
|
totalLoaded = imagesLoaded / $('#' + formName + 's').find('img').length * 100
|
|
|
|
|
$('#iconloading').css('width', `${totalLoaded}%`)
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
|
|
let cubes = filterIcon('cube');
|
|
|
|
|
cubes.push(cubes.shift())
|
|
|
|
|
|
|
|
|
|
$('body').imagesLoaded(function () {
|
|
|
|
|
appendIcon(cubes, "cube")
|
|
|
|
|
$('[num="1"][form="cube"]').addClass('iconSelected');
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
filterIcon('color').forEach(function (i, p) {
|
|
|
|
|
$('#col1').append(`<button col=${p} class="blankButton color1" title="Color ${p}" id="col1-${p}"><img src="../gdicon/color_${p}.png" width=50px></button>`)
|
|
|
|
|
$('#col2').append(`<button col=${p} class="blankButton color2" title="Color ${p}" id="col2-${p}"><img src="../gdicon/color_${p}.png" width=50px></button>`)})
|
|
|
|
|
|
|
|
|
|
$('#col1').append("<span style='min-width: 10px'></span>")
|
|
|
|
|
$('#col2').append("<span style='min-width: 10px'></span>")
|
|
|
|
|
|
|
|
|
|
$('.color1[col="0"]').addClass('iconSelected');
|
|
|
|
|
$('.color2[col="3"]').addClass('iconSelected');
|
|
|
|
|
|
|
|
|
|
$(document).on('click', '.iconTabButton', function () {
|
|
|
|
|
|
|
|
|
|
var form = $(this).attr('form')
|
|
|
|
|
var forms = '#' + form + 's'
|
|
|
|
|
|
|
|
|
|
currentForm = form
|
|
|
|
|
|
|
|
|
|
$('.iconTabButton').each(function(x, y) {
|
|
|
|
|
$(this).children().first().attr('src', $(this).children().first().attr('src').replace('_on', '_off'))})
|
|
|
|
|
|
|
|
|
|
var img = $(this).children().first()
|
|
|
|
|
img.attr('src', img.attr('src').replace('_off', '_on'));
|
|
|
|
|
|
|
|
|
|
$('#iconKitParent').each(function(x, y) {
|
|
|
|
|
$(this).children().not('#iconprogressbar').hide()})
|
|
|
|
|
|
|
|
|
|
if ($(forms).html() == "") appendIcon(filterIcon(form), form)
|
|
|
|
|
$(forms).show()
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$('#iconTabs').find('.iconTabButton').first().children().first().attr('src', $('.iconTabButton').first().children().first().attr('src').replace('_off', '_on'))
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(document).on('click', '.glowToggle', function () {
|
|
|
|
|
|
|
|
|
|
if (enableGlow) {
|
|
|
|
|
$("#glow").attr('src', $("#glow").attr('src').replace('_on', '_off'))
|
|
|
|
|
enableGlow = 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
$("#glow").attr('src', $("#glow").attr('src').replace('_off', '_on'))
|
|
|
|
|
enableGlow = 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(document).on('click', '.iconButton', function () {
|
|
|
|
|
$(".iconButton").removeClass("iconSelected");
|
|
|
|
|
$(this).addClass('iconSelected');
|
|
|
|
|
selectedIcon = $(this).attr('num');
|
|
|
|
|
selectedForm = $(this).attr('form');
|
|
|
|
|
if (selectedIcon == 143) selectedIcon = 0;
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(document).on('click', '.color1', function () {
|
|
|
|
|
$(".color1").removeClass("iconSelected");
|
|
|
|
|
$(this).addClass('iconSelected');
|
|
|
|
|
selectedCol1 = $(this).attr('col');
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(document).on('click', '.color2', function () {
|
|
|
|
|
$(".color2").removeClass("iconSelected");
|
|
|
|
|
$(this).addClass('iconSelected');
|
|
|
|
|
selectedCol2 = $(this).attr('col');
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$("#generateIcon").click(function () {
|
|
|
|
|
$("#loading").show()
|
|
|
|
|
$("#result").hide()
|
|
|
|
|
$("#result").attr('src', `../icon/icon?icon=${selectedIcon}&form=${selectedForm}&col1=${selectedCol1}&col2=${selectedCol2}&glow=${enableGlow}`)
|
|
|
|
|
$("#downloadLink").attr('href', `../icon/icon?icon=${selectedIcon}&form=${selectedForm}&col1=${selectedCol1}&col2=${selectedCol2}&glow=${enableGlow}`)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$('#result').on('load', function() {
|
|
|
|
|
$("#loading").hide()
|
|
|
|
|
$("#result").show()
|
|
|
|
|
if (enableGlow == 1) $("#gdfloor").css('margin-top', '-3px')
|
|
|
|
|
else $("#gdfloor").css('margin-top', '0px')
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$("#fetchUser").click(function () {
|
|
|
|
|
|
|
|
|
|
let user = prompt(`Enter a player's username to get their ${currentForm == "ufo" ? "UFO" : currentForm}!\n(Form will depend on selected tab)\n`)
|
|
|
|
|
if (!user) return;
|
|
|
|
|
|
2019-10-16 22:45:29 -03:00
|
|
|
let iconURL = `../icon/${user}?form=${currentForm}`
|
2019-10-15 23:42:47 -03:00
|
|
|
$("#loading").show()
|
|
|
|
|
$("#result").hide()
|
|
|
|
|
$("#result").attr('src', iconURL)
|
|
|
|
|
$("#downloadLink").attr('href', iconURL)
|
|
|
|
|
$('#glow').attr('src', '../iconkitbuttons/streak_off.png')
|
|
|
|
|
enableGlow = 0
|
|
|
|
|
|
|
|
|
|
fetch(iconURL + '&iconid').then(res => res.json())
|
|
|
|
|
.then(info => {
|
|
|
|
|
$(`#${currentForm}-${info.id}`).trigger('click')
|
|
|
|
|
$(`#col1-${info.col1}`).trigger('click')
|
|
|
|
|
$(`#col2-${info.col2}`).trigger('click')
|
|
|
|
|
if (info.glow == "1")$('#glowbtn').trigger('click')
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
document.getElementById("downloadIcon").onmousedown = function(event) {
|
|
|
|
|
if (event.which == 3) {
|
|
|
|
|
alert("URL copied to clipboard!");
|
|
|
|
|
var temp = $("<input>");
|
|
|
|
|
$("body").append(temp);
|
|
|
|
|
temp.val('https://gdbrowser.com' + $('#result').attr('src').slice(2)).select();
|
|
|
|
|
document.execCommand("copy"); temp.remove();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function backButton() {
|
|
|
|
|
if (window.history.length > 1 && document.referrer.startsWith(window.location.origin)) window.history.back()
|
|
|
|
|
window.location.href = "../../../../../"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$(document).keydown(function(k) {
|
|
|
|
|
if (k.keyCode == 27) { //esc
|
|
|
|
|
k.preventDefault()
|
|
|
|
|
$('#backButton').trigger('click')
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
