2019-10-15 22:42:47 -04: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 >
2021-01-14 18:18:19 -05:00
< link href = "../assets/css/iconkit.css" type = "text/css" rel = "stylesheet" >
2019-10-15 22:42:47 -04:00
< 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" >
2020-12-01 00:07:10 -05:00
< meta name = "og:image" itemprop = "image" content = "https://gdbrowser.com/iconkitbuttons/iconkit.png" >
2019-10-15 22:42:47 -04:00
< meta name = "theme-color" content = "#CCFF55" >
2021-01-21 20:28:04 -05:00
< meta name = "twitter:card" content = "summary" >
2019-10-15 22:42:47 -04:00
< link rel = "icon" href = "../assets/icon.png" >
< / link >
< / head >
2020-09-24 22:07:53 -04:00
< body class = "iconscroll" style = "background-image: linear-gradient(rgb(139, 139, 139), rgb(100, 100, 100));" onbeforeunload = "sessionStorage.setItem('prevUrl', window.location.href)" >
2019-10-15 22:42:47 -04:00
< div class = "center hidden" > < br >
2020-09-22 18:37:21 -04:00
< div class = "popup" id = "steal" >
2021-01-18 21:54:18 -05:00
< div id = "stealBox" class = "brownbox bounce center supercenter" style = "height: 340px; width: 700px" >
< h1 class = "center gold" style = "margin-top: 10px" > Copy Icon< / h1 >
< p id = "copyFrom" class = "white" style = "font-size: 24px; margin: 10px auto 5px auto" > < / p >
2020-09-22 18:37:21 -04:00
< 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 >
2020-10-21 21:09:43 -04:00
< div class = "popup" data-nosnippet id = "settings" >
2020-09-22 18:37:21 -04:00
< 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 >
2020-11-26 16:04:42 -05:00
< div class = "inline" style = "margin-top: 12px" > < h2 class = "help" help = "Sorts the colors by internal ID instead of their in-game order" > < input type = "checkbox" class = "iconsetting" id = "box-sort" > < label for = "box-sort" class = "gdcheckbox gdButton" > < / label > Unsort Colors< / h2 > < / div >
2020-09-22 18:37:21 -04:00
< 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 >
2020-11-26 16:04:42 -05:00
< img id = "iconkitlogo" src = "../assets/iconkit.png" height = 50px; style = "margin: 7px 0;" > < br >
2021-01-14 12:02:38 -05:00
< h2 style = "margin: 5 auto 0 auto; display: none" id = "howto" > < span style = 'color: #aaaaaa' > (hover over an icon for info)< / span > < / h2 >
2020-11-26 16:04:42 -05:00
< div id = "iconbox" style = "min-height: 145px; display: inline-flex" >
< img id = "loading" src = "../assets/loading.png" class = "spin" height = 85px; style = "display: flex; align-self: center" >
< img id = "result" src = "" download = "" style = "display: flex; align-self: flex-end;" >
< / div >
2019-10-15 22:42:47 -04:00
< hr id = "gdfloor" >
2020-11-26 16:04:42 -05:00
< div id = "menuButtons" style = "height: 65px; margin: 0 0 8 0;" >
2021-01-04 10:21:58 -05:00
< button class = "blankButton menuButton" id = "customColors" title = "Settings" onclick = "$('#settings').show()" > < img src = "../assets/iconkitbuttons/cog.png" width = 60px > < / button >
< button class = "blankButton menuButton" id = "downloadIcon" title = "Download icon" > < a id = "downloadLink" download = "cube_1.png" href = "" > < img src = "../assets/iconkitbuttons/save.png" width = 60px > < / a > < / button >
< button class = "blankButton menuButton" id = "getUserIcon" title = "Get player icon" > < img src = "../assets/iconkitbuttons/steal.png" width = 60px > < / button >
< button class = "blankButton menuButton" id = "randomIcon" title = "Random Icon" > < img src = "../assets/iconkitbuttons/shuffle.png" width = 60px > < / button >
2021-01-14 12:02:38 -05:00
< button class = "blankButton menuButton" id = "unlockIcon" title = "Unlock details" > < img id = "lock" src = "../assets/iconkitbuttons/unlock.png" width = 60px > < / button >
2019-10-15 22:42:47 -04:00
< / div >
< div id = "iconTabs" > < / div > < br >
2021-01-14 12:02:38 -05:00
< div id = "iconKitParent" class = "iconKit noDarken" >
2019-10-15 22:42:47 -04:00
< div id = "iconprogressbar" >
< div id = "iconloading" > < / div >
< / div >
< / div > < br >
2020-11-26 16:04:42 -05:00
< div id = "done" style = "display: none; width: 1100px; text-align: left; margin: 0 auto; position: relative; right: 42px" >
< img src = "../assets/btn-done.png" class = "gdButton" style = "height: 50px; margin: 5 0 16 80" >
< / div >
< div style = "width: 1200px; margin: 0 auto; position: relative; right: 42px" >
< div style = "padding-top: 15px; width: 75px; vertical-align: top;" class = "colTypes inline" >
< button id = "cc1" class = "colorLabel blankButton" onclick = "$('#cp1').trigger('click')" title = "Primary Color" > < img src = "../assets/col1.png" > < / button > < input type = "color" id = "cp1" class = "colorPicker" >
< button id = "cc2" class = "colorLabel blankButton" onclick = "$('#cp2').trigger('click')" title = "Secondary Color" > < img src = "../assets/col2.png" > < / button > < input type = "color" id = "cp2" class = "colorPicker" >
< div class = "colorSplit" style = "height: 12.5px" > < / div >
< button id = "ccG" class = "colorLabel blankButton" onclick = "$('#cpG').trigger('click')" title = "Glow Color" > < img src = "../assets/colG.png" > < / button > < input type = "color" id = "cpG" class = "colorPicker" >
< button id = "ccW" class = "colorLabel blankButton" onclick = "$('#cpW').trigger('click')" title = "White Highlights" style = "display: none" > < img src = "../assets/colW.png" style = "background-color: rgb(255, 255, 255)" ; > < / button > < input type = "color" id = "cpW" class = "colorPicker" >
< / div >
< div id = "colors" class = "inline iconKit" >
< div id = "col1" > < / div >
< div id = "col2" > < / div >
< div class = "colorSplit" style = "height: 12.5px" > < / div >
< div id = "colG" > < / div >
< div id = "colW" style = "display: none" > < / div >
< / div >
< / div >
< br >
< p style = "color: rgb(20, 20, 20); margin-top: 4px" > Created by < a target = _blank href = "https://twitter.com/TheRealGDColon" > 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 >
2019-10-15 22:42:47 -04:00
< 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 >
2019-10-21 08:20:25 -07:00
< 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 >
2019-10-15 22:42:47 -04:00
< script type = "text/javascript" >
$('#loading').hide();
$('.hidden').show();
let mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
2019-12-12 16:09:41 -05:00
let forms = ['cube', 'ship', 'ball', 'ufo', 'wave', 'robot', 'spider', 'swing']
2020-11-26 16:04:42 -05:00
let picking = [0, 0, 0, 0]
2019-10-15 22:42:47 -04:00
let currentForm = 'cube'
2020-09-22 18:37:21 -04:00
let formCopy = 'cube'
2019-10-15 22:42:47 -04:00
let selectedIcon = 1
let selectedForm = 'cube'
let selectedCol1 = 0
let selectedCol2 = 3
2020-11-26 16:04:42 -05:00
let selectedColG = 3
let selectedColW = null
2019-10-15 22:42:47 -04:00
let enableGlow = 0
let imagesLoaded = 0
let totalLoaded = 0
2021-01-14 12:02:38 -05:00
let shops = ["", "Scratch's ", "community "]
let achievements = []
let shopIcons = []
let unlockMode = false
2019-12-12 17:06:09 -05:00
if (mobile) $('#logo').attr('width', '80%');
2019-10-15 22:42:47 -04:00
2020-09-23 09:26:41 -04:00
let iconSettings = (localStorage.iconkit || "").split(",")
2020-09-22 18:37:21 -04:00
iconSettings.forEach(x => {
$(`#box-${x}`).prop('checked', true)
})
2020-09-27 22:22:47 -04:00
if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
else $("#result").removeClass("squareIcon")
2020-09-22 18:37:21 -04:00
function capitalize(str) { return str[0].toUpperCase() + str.substr(1) }
function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min }
2020-11-26 16:04:42 -05:00
function rgbToHex(r, g, b) { return "#" + ((1 < < 24 ) + ( r < < 16 ) + ( g < < 8 ) + b ) . toString ( 16 ) . slice ( 1 ) }
function colorBG(e, c, hex) {
$(`#cc${e} img`).css('background-color', hex ? `#${c}` : `rgb(${c.r}, ${c.g}, ${c.b})`)
if (!hex) $(`#cp${e}`).val(rgbToHex(c.r, c.g, c.b))
}
function undone(num) { picking[num] = 0; if (!picking.some(x => x)) $('#done').hide() }
function colorSplit() {
if ($("#colG").is(':visible') || $("#colW").is(':visible')) $('.colorSplit').show()
else $('.colorSplit').hide()
}
2020-09-22 18:37:21 -04:00
forms.forEach(form => {
2021-01-04 10:21:58 -05:00
$("#iconTabs").append(`< button form = "${form}" class = "blankButton iconTabButton" > < img src = "../assets/iconkitbuttons/${form}_off.png" width = 50px > < / button > `)
$("#copyForms").append(`< button form = "${form}" class = "blankButton copyForm" > < img src = "../assets/iconkitbuttons/${form}_off.png" width = 50px > < / button > `)
2020-09-22 18:37:21 -04:00
})
2021-01-04 10:21:58 -05:00
$("#iconTabs").append(`< button title = "Glow" class = "blankButton glowToggle" id = "glowbtn" > < img id = "glow" src = "../assets/iconkitbuttons/streak_off.png" width = 50px > < / button > `)
2019-10-15 22:42:47 -04:00
forms.forEach(form => {$("#iconKitParent").append(`< div id = "${form}s" > < / div > `)})
2020-11-26 16:04:42 -05:00
function generateIcon() {
2020-12-01 00:07:10 -05:00
if (enableGlow == 1 || selectedCol1 == 15 || selectedCol1 == "000000") { $('#colG').show(); $('#ccG').show() }
2020-11-26 16:04:42 -05:00
else { $('#colG').hide(); $('#ccG').hide(); }
colorSplit()
$("#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}${selectedColG != selectedCol2 ? `& colG=${selectedColG}` : ""}${selectedColW ? `& colW=${selectedColW}` : ""}${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
}
2019-10-15 22:42:47 -04:00
fetch('./api/icons').then(res => {
return (res.json())})
2020-11-26 16:04:42 -05:00
.then(iconStuff => {
2019-10-15 22:42:47 -04:00
2021-01-14 00:59:13 -05:00
let miniIcon = iconStuff.icons.filter(x => x.startsWith("cube")).length
2021-01-18 21:54:18 -05:00
if (iconStuff.noCopy) $('#getUserIcon').remove()
else if (iconStuff.server) {
$('#copyFrom').html(`Copying from the < span style = "color: yellow" > ${iconStuff.server}< / span > servers`)
$('#stealBox').css('height', '385px')
}
2020-11-26 16:04:42 -05:00
function filterIcon(name) { return iconStuff.icons.filter(x => x.startsWith(name)).sort(function (a,b) {return a.replace(/[^0-9]/g, "") - b.replace(/[^0-9]/g, "");})}
2019-10-15 22:42:47 -04:00
function appendIcon(form, formName) {
2020-09-24 22:07:53 -04:00
imagesLoaded = 0; totalLoaded = 0
$('#' + formName + 's').append('< br > ')
form.forEach(function (i, p) {
if (p != 0 & & p % 12 == 0) $('#' + formName + 's').append('< br > ')
2021-01-04 10:21:58 -05:00
$('#' + formName + 's').append(`< button num = "${p + 1}" form = "${formName}" class = "blankButton iconButton" id = "${formName}-${p + 1}" > < img src = "../assets/previewicons/${i}" width = "50px" title = "${capitalize(formName)} ${formName == " cube " & & p + 1 = = form . length ? 0 : p + 1 } " > < / button > `)})
2020-09-24 22:07:53 -04:00
$('#' + formName + 's').imagesLoaded(function() {}).progress(function() {
imagesLoaded += 1;
totalLoaded = imagesLoaded / $('#' + formName + 's').find('img').length * 100
$('#iconloading').css('width', `${totalLoaded}%`)
}
)}
2019-10-15 22:42:47 -04:00
2020-11-26 16:04:42 -05:00
function loadColors(devmode) {
let colTypes = [1, 2, "G", "W"]
colTypes.forEach(x => $(`#col${x}`).html(""))
iconStuff.colorOrder.forEach(function (p, n) {
2020-12-01 00:07:10 -05:00
if (iconSettings.includes("sort")) p = n;
colTypes.forEach(c => {
2021-01-14 12:02:38 -05:00
$(`#col${c}`).append(`< button col = ${p} colType = color${c} class = "blankButton color${c}" title = "Color ${p}" id = "col${c}-${p}" > < img src = "../assets/previewicons/color_${p}.png" width = 50px > < / button > `)
2020-12-01 00:07:10 -05:00
})
2020-11-26 16:04:42 -05:00
})
2020-12-01 00:07:10 -05:00
$('#col1').append("< span style = 'min-width: 10px' > < / span > ")
}
2020-11-26 16:04:42 -05:00
loadColors()
2020-09-24 22:07:53 -04:00
let cubes = filterIcon('cube');
2020-11-26 16:04:42 -05:00
let sample = JSON.parse(iconStuff.sample);
2020-09-24 22:07:53 -04:00
enableGlow = sample[3] * 2;
[selectedIcon, selectedCol1, selectedCol2] = sample;
2020-11-26 16:04:42 -05:00
selectedColG = selectedCol2
2019-10-15 22:42:47 -04:00
cubes.push(cubes.shift())
$('body').imagesLoaded(function () {
appendIcon(cubes, "cube")
2020-09-24 22:07:53 -04:00
$(`[num="${sample[0]}"][form="cube"]`).addClass('iconSelected');
2019-10-15 22:42:47 -04:00
})
2020-09-24 22:07:53 -04:00
$(`.color1[col="${sample[1]}"]`).addClass('iconSelected');
$(`.color2[col="${sample[2]}"]`).addClass('iconSelected');
2020-11-26 16:04:42 -05:00
$(`.colorG[col="${sample[2]}"]`).addClass('iconSelected');
$('.colorW[col="12"]').addClass('iconSelected');
colorBG(1, iconStuff.colors[sample[1]])
colorBG(2, iconStuff.colors[sample[2]])
colorBG('G', iconStuff.colors[sample[2]])
2019-10-15 22:42:47 -04:00
2020-11-26 16:04:42 -05:00
$('.colorLabel img').show()
generateIcon()
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$(document).on('click', '.iconTabButton', function () {
var form = $(this).attr('form')
var forms = '#' + form + 's'
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
currentForm = form
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$('.iconTabButton').each(function(x, y) {
$(this).children().first().attr('src', $(this).children().first().attr('src').replace('_on', '_off'))})
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
var img = $(this).children().first()
img.attr('src', img.attr('src').replace('_off', '_on'));
2019-10-15 22:42:47 -04:00
2021-01-14 12:02:38 -05:00
$('#iconKitParent').each(function(x, y) { $(this).children().not('#iconprogressbar').hide() })
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
if ($(forms).html() == "") appendIcon(filterIcon(form), form)
$(forms).show()
2019-10-15 22:42:47 -04:00
})
$('#iconTabs').find('.iconTabButton').first().children().first().attr('src', $('.iconTabButton').first().children().first().attr('src').replace('_off', '_on'))
2020-09-22 18:37:21 -04:00
$("#randomIcon").click(function() {
selectedForm = forms[Math.floor(Math.random() * forms.length)]
2020-11-26 16:04:42 -05:00
selectedIcon = randInt(0, iconStuff.icons.filter(x => x.startsWith(selectedForm)).length)
selectedCol1 = randInt(0, iconStuff.icons.filter(x => x.startsWith("color")).length) - 1
selectedCol2 = randInt(0, iconStuff.icons.filter(x => x.startsWith("color")).length) - 1
selectedColW = null
2020-09-22 18:37:21 -04:00
enableGlow = randInt(0, 2) == 1 ? 1 : 0 // 1 in 3 chance of glow
2021-01-04 10:21:58 -05:00
$('#glow').attr('src', '../assets/iconkitbuttons/streak_off.png')
2020-09-22 18:37:21 -04:00
$(`.iconTabButton[form=${selectedForm}]`).trigger('click')
$(`#${selectedForm}-${selectedIcon}`).trigger('click')
$(`#col1-${selectedCol1}`).trigger('click')
$(`#col2-${selectedCol2}`).trigger('click')
2020-11-26 16:04:42 -05:00
$(`#colG-${selectedCol2}`).trigger('click')
$('#colW-12').trigger('click')
2020-09-22 18:37:21 -04:00
if (enableGlow == 1) $("#glow").attr('src', $("#glow").attr('src').replace('_off', '_on'))
else $("#glow").attr('src', $("#glow").attr('src').replace('_on', '_off'))
2020-11-26 16:04:42 -05:00
generateIcon()
2020-09-22 18:37:21 -04:00
})
2019-10-15 22:42:47 -04:00
$(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;
}
2020-11-26 16:04:42 -05:00
generateIcon()
2019-10-15 22:42:47 -04:00
})
2020-09-22 18:37:21 -04:00
$(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'))
})
2019-10-15 22:42:47 -04:00
$(document).on('click', '.iconButton', function () {
2020-11-26 16:04:42 -05:00
$(".iconButton").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedIcon = $(this).attr('num');
selectedForm = $(this).attr('form');
2021-01-14 00:59:13 -05:00
if (selectedIcon == miniIcon) selectedIcon = 0;
2020-11-26 16:04:42 -05:00
if (iconStuff.whiteIcons.find(x => x[1] == selectedIcon & & x[0] == selectedForm)) { $('#colW').show(); $('#ccW').show() }
else { $('#colW').hide(); $('#ccW').hide(); $(`#colW-12`).trigger('click') }
colorSplit()
generateIcon()
2019-10-15 22:42:47 -04:00
})
$(document).on('click', '.color1', function () {
2020-11-26 16:04:42 -05:00
$(".color1").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedCol1 = $(this).attr('col');
colorBG(1, iconStuff.colors[$(this).attr('col')]); undone(0)
generateIcon()
2019-10-15 22:42:47 -04:00
})
$(document).on('click', '.color2', function () {
2020-11-26 16:04:42 -05:00
$(".color2").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedCol2 = $(this).attr('col');
colorBG(2, iconStuff.colors[$(this).attr('col')]); undone(1)
$(`#colG-${$(this).attr('col')}`).trigger('click')
selectedColG = $(this).attr('col');
generateIcon()
2019-10-15 22:42:47 -04:00
})
2020-11-26 16:04:42 -05:00
$(document).on('click', '.colorG', function () {
$(".colorG").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedColG = $(this).attr('col');
colorBG('G', iconStuff.colors[$(this).attr('col')]); undone(2)
generateIcon()
2020-09-22 18:37:21 -04:00
})
2020-11-26 16:04:42 -05:00
$(document).on('click', '.colorW', function () {
$(".colorW").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedColW = $(this).attr('col');
if (selectedColW == 12) selectedColW = null
colorBG('W', iconStuff.colors[$(this).attr('col')]); undone(3)
generateIcon()
})
$("#cp1").on('input change', function() {
picking[0] = true; colorBG(1, $(this).val(), true);
$(".color1").removeClass("iconSelected"); $("#done").show()
})
$("#cp2").on('input change', function() {
picking[1] = true; colorBG(2, $(this).val(), true);
2020-11-26 22:45:11 -05:00
$(".color2").removeClass("iconSelected"); $("#done").show()
2020-11-26 16:04:42 -05:00
})
$("#cpG").on('input change', function() {
picking[2] = true; colorBG('G', $(this).val(), true);
2020-11-26 22:45:11 -05:00
$(".colorG").removeClass("iconSelected"); $("#done").show()
2020-11-26 16:04:42 -05:00
})
$("#cpW").on('input change', function() {
picking[3] = true; colorBG('W', $(this).val(), true);
2020-11-26 22:45:11 -05:00
$(".colorW").removeClass("iconSelected"); $("#done").show()
2020-11-26 16:04:42 -05:00
})
2020-11-26 22:45:11 -05:00
$("#done img").click(function() {
2020-11-26 16:04:42 -05:00
$("#done").hide()
if (picking[0]) selectedCol1 = $('#cp1').val().slice(1)
if (picking[1]) selectedCol2 = $('#cp2').val().slice(1)
if (picking[2]) selectedColG = $('#cpG').val().slice(1)
if (picking[3]) selectedColW = $('#cpW').val().slice(1)
picking = [0, 0, 0, 0]
generateIcon()
2019-10-15 22:42:47 -04:00
})
$('#result').on('load', function() {
2020-11-26 16:04:42 -05:00
$('#iconbox').css('min-height', `${(currentForm == "ship" || currentForm == "wave") ? 110 : 145}px`)
2019-10-15 22:42:47 -04:00
$("#loading").hide()
$("#result").show()
2020-09-24 22:07:53 -04:00
if (enableGlow > 1) $("#gdfloor").css('margin-top', '-3px')
2019-10-15 22:42:47 -04:00
else $("#gdfloor").css('margin-top', '0px')
})
2020-09-22 18:37:21 -04:00
$("#getUserIcon").click(function() {
$(`.copyForm[form=${currentForm}]`).trigger('click')
$('#steal').show();
2020-11-26 16:04:42 -05:00
$('#playerName').focus()
$('#playerName').select()
})
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 ($(this).attr('id') == "box-sort") loadColors()
if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
else $("#result").removeClass("squareIcon")
localStorage.iconkit = checkedSettings.join(",")
2020-09-22 18:37:21 -04:00
})
2021-01-14 12:02:38 -05:00
$('#unlockIcon').click(function() {
if (!achievements.length) {
fetch('./api/achievements').then(res => { res.json().then(x => {
achievements = x.achievements
shopIcons = x.shopIcons
unlockMode = true
$('#lock').attr('src', $('#lock').attr('src').replace('.png', '_on.png'));
$('#howto').show();
})})
}
else {
unlockMode = !unlockMode
if (unlockMode) { $('#lock').attr('src', $('#lock').attr('src').replace('.png', '_on.png')); $('#howto').show() }
else { $('#lock').attr('src', $('#lock').attr('src').replace('_on.png', '.png')); $('#howto').hide() }
}
})
$(document).on('mouseover', '.iconButton, .color1, .color2', function () {
if (unlockMode & & achievements.length) {
$(this).addClass('iconHover')
let form = $(this).attr('form') || $(this).attr('colType')
let iconNumber = $(this).attr('num') || $(this).attr('col')
2021-01-14 18:18:19 -05:00
if (form == "swing") return $('#howto').html("Coming soon™")
else if (iconNumber == 1 || ((form == "cube") & & iconNumber < = 4) || ((form.startsWith('color')) & & iconNumber < = 3)) return $('#howto').html("Always unlocked")
2021-01-14 12:02:38 -05:00
else if (iconNumber == miniIcon & & form == "cube") return $('#howto').html("Legacy mini icon, enable in GD settings")
else if (iconNumber == 13 & & form == "cube") return $('#howto').html("Click lock on icon kit")
let foundAch = achievements.find(x => x.rewardType == form & & x.rewardID == +iconNumber)
let foundMerch = shopIcons.find(x => x.type == form & & x.icon == +iconNumber)
if (foundAch) $('#howto').html(foundAch.description.replace("Demon difficulty", "Demon"))
else if (foundMerch) $('#howto').html(`Purchase in ${shops[foundMerch.shop]}shop for < span style = "color: aqua" > ${foundMerch.price}< / span > orbs`)
else $('#howto').html("< span style = 'color: #aaaaaa' > (no info available)< / span > ")
}
})
$(document).on('mouseleave', '.iconButton, .color1, .color2', function () {
$(this).removeClass('iconHover')
$('#howto').html("< span style = 'color: #aaaaaa' > (hover over an icon for info)< / span > ")
})
2020-11-26 16:04:42 -05:00
})
2020-09-22 18:37:21 -04:00
2019-10-15 22:42:47 -04:00
$("#fetchUser").click(function () {
2020-09-22 18:37:21 -04:00
let user = $("#playerName").val()
if (!user || !user.length) return $("#steal").hide()
let iconURL = `../icon/${user}?form=${formCopy}`
$(`.iconTabButton[form=${formCopy}]`).trigger('click')
$("#steal").hide()
2019-10-15 22:42:47 -04:00
$("#loading").show()
$("#result").hide()
2020-09-22 18:37:21 -04:00
$("#result").attr('src', iconURL).attr('download', `${user}_${formCopy}.png`)
$("#downloadLink").attr('href', iconURL).attr('download', `${user}_${formCopy}.png`)
2021-01-04 10:21:58 -05:00
$('#glow').attr('src', '../assets/iconkitbuttons/streak_off.png')
2019-10-15 22:42:47 -04:00
enableGlow = 0
2019-10-19 00:27:17 -04:00
fetch('../api/profile/' + user).then(res => res.json())
2019-10-15 22:42:47 -04:00
.then(info => {
2021-01-18 21:54:18 -05:00
if (info == "-1") return
2020-09-22 18:37:21 -04:00
$(`#${formCopy}-${info[formCopy == "cube" ? "icon" : formCopy] || 1}`).trigger('click')
2019-10-15 22:42:47 -04:00
$(`#col1-${info.col1}`).trigger('click')
$(`#col2-${info.col2}`).trigger('click')
2020-11-26 16:04:42 -05:00
$(`#colG-${info.col2}`).trigger('click')
$(`#colW-12`).trigger('click')
2020-09-22 18:37:21 -04:00
if (info.glow) $('#glowbtn').trigger('click')
2019-10-15 22:42:47 -04:00
})
})
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) {
2020-09-22 18:37:21 -04:00
if (k.keyCode == 13) {
if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
2020-09-23 09:26:41 -04:00
else if ($(".popup").is(":visible")) return
2020-11-26 16:04:42 -05:00
else generateIcon()
2020-09-22 18:37:21 -04:00
}
if (k.keyCode == 27) { //esc
if ($(".popup").is(":visible")) return $('.popup').hide()
2019-10-15 22:42:47 -04:00
k.preventDefault()
$('#backButton').trigger('click')
}
});
2019-10-23 02:54:19 +03:00
2020-09-22 18:37:21 -04:00
$(document).on('click', '.brownbox', function (e) {
e.stopPropagation();
})
$(document).on('click', '.popup', function () {
$('.popup').hide()
})
2019-10-15 22:42:47 -04:00
< / script >
