365 lines
No EOL
17 KiB
HTML
365 lines
No EOL
17 KiB
HTML
<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="../css/iconkit.css?v=1" 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>
|
|
<body class="iconscroll" style="background-image: linear-gradient(rgb(139, 139, 139), rgb(100, 100, 100));" onbeforeunload="sessionStorage.setItem('prevUrl', window.location.href)">
|
|
<div class="center hidden"><br>
|
|
|
|
<div class="popup" id="steal">
|
|
<div class="brownbox bounce center supercenter" style="height: 350px; width: 700px">
|
|
<h1 class="center gold" style="margin-top: 10px">Copy Icon</h1>
|
|
<input type="text" name="gdbrowser" id="playerName" autocomplete="off" placeholder="Username" maxlength="32" style="height: 58px; width: 90%; text-align: center; margin-top: 25px; margin-bottom: 5px;">
|
|
<div id="copyForms"></div>
|
|
<img src="../assets/ok.png" height=55px; class="postButton gdButton center" style="margin-top: 30px" id="fetchUser">
|
|
<img class="gdButton xButton" src="../assets/close.png" width="70px" onclick="$('#steal').hide()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popup" data-nosnippet id="settings">
|
|
<div class="brownbox bounce center supercenter" style="height: 350px; width: 720px">
|
|
<h1 class="center gold" style="margin-top: 10px; margin-bottom: 20px;">Settings</h1>
|
|
<div class="inline"><h2 class="help" help="Removes the clear dome on top of UFOs"><input type="checkbox" class="iconsetting" id="box-ufo"><label for="box-ufo" class="gdcheckbox gdButton"></label>No UFO Dome</h2></div>
|
|
<div class="inline"><h2 class="help" help="Forces a square aspect ratio on generated icons"><input type="checkbox" class="iconsetting" id="box-square"><label for="box-square" class="gdcheckbox gdButton"></label>Square Image</h2></div>
|
|
<br>
|
|
<div class="inline" style="margin-top: 12px"><h2 class="help" help="Adds a third color option for normally non-colorable details"><input type="checkbox" class="iconsetting" id="box-col3"><label for="box-col3" class="gdcheckbox gdButton"></label>Color 3</h2></div>
|
|
<br>
|
|
<p class="white" id="helpText" style="font-size: 24px; margin-bottom: 0;">(Hover over a setting for information)</p>
|
|
<img src="../assets/ok.png" height=55px; class="postButton gdButton center" style="margin-top: 30px" onclick="$('#settings').hide()">
|
|
<img class="gdButton xButton" src="../assets/close.png" width="70px" onclick="$('#settings').hide()">
|
|
</div>
|
|
</div>
|
|
|
|
<img id="iconkitlogo" src="../assets/iconkit.png" height=50px; style="margin: 7px 0;"><br><br>
|
|
<img id="loading" src="../assets/loading.png" class="spin" height=95px; style="margin: auto auto 25px auto">
|
|
<img id="result" src="" download="">
|
|
<hr id="gdfloor">
|
|
<div id="menuButtons" style="height: 65px; margin: 0 0 15 0;">
|
|
<button class="blankButton menuButton" id="customColors" title="Settings" onclick="$('#settings').show()"><img src="../iconkitbuttons/cog.png" width=55px></button>
|
|
<button class="blankButton menuButton" id="downloadIcon" title="Download icon"><a id="downloadLink" download="cube_1.png" href=""><img src="../iconkitbuttons/save.png" width=55px></a></button>
|
|
<button class="blankButton menuButton" id="generateIcon" title="Generate icon"><img src="../iconkitbuttons/generate.png" width=70px></button>
|
|
<button class="blankButton menuButton" id="getUserIcon" title="Get player icon"><img src="../iconkitbuttons/steal.png" width=55px></button>
|
|
<button class="blankButton menuButton" id="randomIcon" title="Random Icon"><img src="../iconkitbuttons/shuffle.png" width=55px></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 style="margin-top: 12px" id="col3"></div>
|
|
</div><br>
|
|
<p style="color: rgb(20, 20, 20); margin-top: 3px">Created by <a target=_blank href="https://gdcolon.com">GD Colon</a> • All sprites/assets belong to <a target=_blank href="http://robtopgames.com">RobTop Games</a> • <a target=_blank href="https://gdbrowser.com/api#icons">API Reference</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" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
|
|
<script type="text/javascript" src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
|
|
<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', 'swing']
|
|
let currentForm = 'cube'
|
|
let formCopy = 'cube'
|
|
let beenThereDoneThat = false
|
|
|
|
let selectedIcon = 1
|
|
let selectedForm = 'cube'
|
|
let selectedCol1 = 0
|
|
let selectedCol2 = 3
|
|
let selectedCol3 = null
|
|
let enableGlow = 0
|
|
|
|
let imagesLoaded = 0
|
|
let totalLoaded = 0
|
|
|
|
if (mobile) $('#logo').attr('width', '80%');
|
|
|
|
let iconSettings = (localStorage.iconkit || "").split(",")
|
|
iconSettings.forEach(x => {
|
|
$(`#box-${x}`).prop('checked', true)
|
|
})
|
|
|
|
if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
|
|
else $("#result").removeClass("squareIcon")
|
|
|
|
function capitalize(str) { return str[0].toUpperCase() + str.substr(1) }
|
|
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min }
|
|
function row3() { if (iconSettings.includes("col3")) $('#col3').show(); else $('#col3').hide() }
|
|
|
|
row3()
|
|
|
|
forms.forEach(form => {
|
|
$("#iconTabs").append(`<button form="${form}" class="blankButton iconTabButton"><img src="../iconkitbuttons/${form}_off.png" width=50px></button>`)
|
|
$("#copyForms").append(`<button form="${form}" class="blankButton copyForm"><img src="../iconkitbuttons/${form}_off.png" width=50px></button>`)
|
|
})
|
|
$("#iconTabs").append(`<button title="Glow" 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)} ${formName == "cube" && p+1 == form.length ? 0 : 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');
|
|
|
|
let sample = JSON.parse(iconArray.find(x => x.startsWith("[")));
|
|
enableGlow = sample[3] * 2;
|
|
[selectedIcon, selectedCol1, selectedCol2] = sample;
|
|
|
|
cubes.push(cubes.shift())
|
|
|
|
$('body').imagesLoaded(function () {
|
|
appendIcon(cubes, "cube")
|
|
$(`[num="${sample[0]}"][form="cube"]`).addClass('iconSelected');
|
|
})
|
|
|
|
filterIcon('color').forEach(function (n, p) {
|
|
for (i=1; i<=3; i++) {
|
|
$(`#col${i}`).append(`<button col=${p} class="blankButton color${i}" title="Color ${p}" id="col${i}-${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>")
|
|
$('#col3').append("<span style='min-width: 10px'></span>")
|
|
|
|
$(`.color1[col="${sample[1]}"]`).addClass('iconSelected');
|
|
$(`.color2[col="${sample[2]}"]`).addClass('iconSelected');
|
|
$('.color3[col="12"]').addClass('iconSelected');
|
|
|
|
$("#generateIcon").trigger('click')
|
|
|
|
$(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'))
|
|
|
|
|
|
$("#randomIcon").click(function() {
|
|
|
|
selectedForm = forms[Math.floor(Math.random() * forms.length)]
|
|
selectedIcon = randInt(0, iconArray.filter(x => x.startsWith(selectedForm)).length)
|
|
selectedCol1 = randInt(0, iconArray.filter(x => x.startsWith("color")).length) - 1
|
|
selectedCol2 = randInt(0, iconArray.filter(x => x.startsWith("color")).length) - 1
|
|
selectedCol3 = null
|
|
enableGlow = randInt(0, 2) == 1 ? 1 : 0 // 1 in 3 chance of glow
|
|
|
|
$('#glow').attr('src', '../iconkitbuttons/streak_off.png')
|
|
|
|
$(`.iconTabButton[form=${selectedForm}]`).trigger('click')
|
|
$(`#${selectedForm}-${selectedIcon}`).trigger('click')
|
|
$(`#col1-${selectedCol1}`).trigger('click')
|
|
$(`#col2-${selectedCol2}`).trigger('click')
|
|
$('#col3-12').trigger('click')
|
|
if (enableGlow == 1) $("#glow").attr('src', $("#glow").attr('src').replace('_off', '_on'))
|
|
else $("#glow").attr('src', $("#glow").attr('src').replace('_on', '_off'))
|
|
$("#generateIcon").trigger('click')
|
|
})
|
|
})
|
|
|
|
$(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', '.copyForm', function () {
|
|
$('.copyForm').each(function(x, y) {$(this).children().first().attr('src', $(this).children().first().attr('src').replace('_on', '_off'))})
|
|
formCopy = $(this).attr('form')
|
|
let src = $(this).children().first().attr('src')
|
|
$(this).children().first().attr('src', src.replace('_off', '_on'))
|
|
})
|
|
|
|
$(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');
|
|
})
|
|
|
|
$(document).on('click', '.color3', function () {
|
|
$(".color3").removeClass("iconSelected");
|
|
$(this).addClass('iconSelected');
|
|
selectedCol3 = $(this).attr('col');
|
|
if (selectedCol3 == 12) selectedCol3 = null
|
|
})
|
|
|
|
$("#generateIcon").click(function () {
|
|
$("#loading").show()
|
|
$("#result").hide()
|
|
let noDome = selectedForm == "ufo" && iconSettings.includes("ufo")
|
|
let square = iconSettings.includes("square")
|
|
let finalURL = `../icon/icon?icon=${selectedIcon}&form=${selectedForm}${noDome ? "&topless=1" : ""}&col1=${selectedCol1}&col2=${selectedCol2}${iconSettings.includes("col3") && selectedCol3 ? `&col3=${selectedCol3}` : ""}${enableGlow > 0 ? "&glow=1" : ""}${square ? "&size=auto" : ""}`
|
|
$("#result").attr('src', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
|
|
$("#downloadLink").attr('href', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
|
|
if (enableGlow == 2) enableGlow = 0
|
|
})
|
|
|
|
$('#result').on('load', function() {
|
|
$("#loading").hide()
|
|
$("#result").show()
|
|
if (enableGlow > 1) $("#gdfloor").css('margin-top', '-3px')
|
|
else $("#gdfloor").css('margin-top', '0px')
|
|
})
|
|
|
|
$("#getUserIcon").click(function() {
|
|
$(`.copyForm[form=${currentForm}]`).trigger('click')
|
|
$('#steal').show();
|
|
$('#playerName').focus()
|
|
})
|
|
|
|
$("#fetchUser").click(function () {
|
|
|
|
let user = $("#playerName").val()
|
|
if (!user || !user.length) return $("#steal").hide()
|
|
|
|
let iconURL = `../icon/${user}?form=${formCopy}`
|
|
$(`.iconTabButton[form=${formCopy}]`).trigger('click')
|
|
$("#steal").hide()
|
|
$("#loading").show()
|
|
$("#result").hide()
|
|
$("#result").attr('src', iconURL).attr('download', `${user}_${formCopy}.png`)
|
|
$("#downloadLink").attr('href', iconURL).attr('download', `${user}_${formCopy}.png`)
|
|
$('#glow').attr('src', '../iconkitbuttons/streak_off.png')
|
|
enableGlow = 0
|
|
|
|
fetch('../api/profile/' + user).then(res => res.json())
|
|
.then(info => {
|
|
$(`#${formCopy}-${info[formCopy == "cube" ? "icon" : formCopy] || 1}`).trigger('click')
|
|
$(`#col1-${info.col1}`).trigger('click')
|
|
$(`#col2-${info.col2}`).trigger('click')
|
|
$(`#col3-12`).trigger('click')
|
|
if (info.glow) $('#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 = "../../../../../"
|
|
}
|
|
|
|
let hoverText = $('#helpText').html()
|
|
$(".help").hover(function() {
|
|
$(this).css('color', 'rgba(200, 255, 255)')
|
|
$('#helpText').html($(this).attr('help'))
|
|
}, function() {
|
|
$(this).css('color', 'white')
|
|
$('#helpText').html(hoverText)
|
|
})
|
|
|
|
$(document).on('change', '.iconsetting', function (e) {
|
|
let checkedSettings = []
|
|
$('.iconsetting:checkbox:checked').each((i, x) => { checkedSettings.push(x.id.split('-')[1]) })
|
|
iconSettings = checkedSettings
|
|
if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
|
|
else $("#result").removeClass("squareIcon")
|
|
localStorage.iconkit = checkedSettings.join(",")
|
|
row3()
|
|
})
|
|
|
|
$(document).keydown(function(k) {
|
|
if (k.keyCode == 13) {
|
|
if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
|
|
else if ($(".popup").is(":visible")) return
|
|
else $("#generateIcon").trigger('click')
|
|
}
|
|
if (k.keyCode == 27) { //esc
|
|
if ($(".popup").is(":visible")) return $('.popup').hide()
|
|
k.preventDefault()
|
|
$('#backButton').trigger('click')
|
|
}
|
|
});
|
|
|
|
$(document).on('click', '.brownbox', function (e) {
|
|
e.stopPropagation();
|
|
})
|
|
|
|
$(document).on('click', '.popup', function () {
|
|
$('.popup').hide()
|
|
})
|
|
|
|
</script> |