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 >
2022-05-19 22:30:54 -04:00
< link href = "../assets/css/iconkit.css?v=2" 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 >
2022-05-21 12:20:00 -04:00
< body style = "background: linear-gradient(rgb(139, 139, 139), rgb(100, 100, 100)) no-repeat center center fixed;" 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" >
2022-05-19 22:30:54 -04:00
< div id = "stealBox" class = "brownbox bounce center supercenter" style = "height: 350px; width: 700px" >
2021-01-18 21:54:18 -05:00
< 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 >
2022-05-19 22:30:54 -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: 10px;" >
2020-09-22 18:37:21 -04:00
< 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" >
2022-05-19 22:30:54 -04:00
< div class = "brownbox bounce center supercenter" style = "height: 380px; width: 820px" >
2020-09-22 18:37:21 -04:00
< h1 class = "center gold" style = "margin-top: 10px; margin-bottom: 20px;" > Settings< / h1 >
2022-05-19 22:30:54 -04:00
< div id = "settingList" >
< div 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 > < h2 > No UFO Dome< / h2 > < / div >
< div 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 > < h2 > Unsort Colors< / h2 > < / div >
< div class = "help" help = "Allows robots to play spider animations and vice versa" > < input type = "checkbox" class = "iconsetting" id = "box-cursed" > < label for = "box-cursed" class = "gdcheckbox gdButton" > < / label > < h2 > Cursed animations< / h2 > < / div >
< / 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 >
2022-05-19 22:30:54 -04:00
< img id = "iconkitlogo" src = "../assets/iconkit.png" style = "margin: 7px 0px; height: 50px" > < br >
< h2 style = "margin: 5 auto 0 auto; display: none; height: 45px" id = "howto" > < span style = 'color: #aaaaaa' > (hover over an icon for info)< / span > < / h2 >
2020-11-26 16:04:42 -05:00
2022-05-19 22:30:54 -04:00
< div id = "iconbox" >
< canvas id = "result" style = "transform: translateY(-35px)" >
2020-11-26 16:04:42 -05:00
< / 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 >
2022-05-19 22:30:54 -04:00
< button class = "blankButton menuButton" onclick = "icon.psdExport()" title = "Download layered PSD" > < img src = "../assets/iconkitbuttons/psd.png" width = 60px > < / button >
< button class = "blankButton menuButton" id = "copyToClipboard" title = "Copy to clipboard" > < img src = "../assets/iconkitbuttons/copy.png" width = 60px > < / button >
< button class = "blankButton menuButton" onclick = "icon.pngExport()" title = "Download icon" > < img src = "../assets/iconkitbuttons/save.png" width = 60px > < / a > < / button >
2021-01-04 10:21:58 -05:00
< 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 >
2022-05-19 22:30:54 -04:00
< / div >
< div id = "iconTabs" > < / div > < br >
< div id = "iconKitParent" class = "iconKit noDarken" >
< div id = "iconprogressbar" >
< div id = "iconloading" > < / div >
< / div >
< / div > < br >
< 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" >
< button id = "ccU" class = "colorLabel blankButton" onclick = "$('#cpU').trigger('click')" title = "UFO Dome" style = "display: none" > < img src = "../assets/colU.png" style = "background-color: rgb(255, 255, 255)" ; > < / button > < input type = "color" id = "cpU" class = "colorPicker" >
2019-10-15 22:42:47 -04:00
< / div >
2022-05-19 22:30:54 -04:00
< 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 id = "colU" style = "display: none" > < / div >
2020-11-26 16:04:42 -05:00
< / div >
2022-05-19 22:30:54 -04:00
< / div >
2020-11-26 16:04:42 -05:00
2022-05-19 22:30:54 -04:00
< div id = "animationOptions" style = "display: none;" >
< div class = "animationSelector" >
< h2 style = "margin-right: 20px" > Animation: < / h2 >
< select id = "robotAnimation" > < / select >
< / div >
< div class = "animationSelector" >
< h2 style = "margin-right: 20px" > Speed:< / h2 >
< input id = "animationSpeed" style = "width: 250px" type = "range" value = "1" placeholder = "1" min = "0.1" max = "3" step = "0.1" >
< input id = "animationSpeedBox" type = "number" value = "1" >
2020-11-26 16:04:42 -05:00
< / div >
2022-05-19 22:30:54 -04:00
< / div >
2020-11-26 16:04:42 -05:00
2022-05-19 22:30:54 -04:00
< p style = "color: rgb(20, 20, 20); margin-top: 25px; margin-bottom: 25px; line-height: 16px" >
2021-12-03 16:30:58 -05:00
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 >
< br > < br >
2022-05-19 22:30:54 -04:00
< a target = _blank href = "https://github.com/GDColon/GDBrowser/blob/master/iconkit/icon.js" > Source Code< / a > (now 100% local with < a target = "_blank" href = "https://pixijs.com/" > pixi.js< / a > !)
2021-12-03 16:30:58 -05:00
< / p >
2019-10-15 22:42:47 -04:00
2022-05-19 22:30:54 -04:00
< div class = "hideIfSmall" style = "position:absolute; top: 20px; left: 20px; width: 64px; height: 64px; pointer-events: none" >
< img class = "gdButton" style = "pointer-events: all" id = "backButton" src = "../assets/back.png" height = "100%" onclick = "backButton()" >
2019-10-15 22:42:47 -04:00
< / div >
2022-05-19 22:30:54 -04:00
< div class = "hideIfSmall" id = "extraInfo" style = "position:absolute; top: 20px; right: 15px" > < / div >
2019-10-15 22:42:47 -04:00
< / div >
< / body >
2022-05-19 22:30:54 -04:00
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" > < / script >
2019-10-21 08:20:25 -07:00
< script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" > < / script >
2022-05-19 22:30:54 -04:00
< script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.2/browser/pixi.js" > < / script >
< script type = "text/javascript" src = "./libs/ag-psd.js" > < / script >
< script type = "text/javascript" src = "./libs/pixi-ease.js" > < / script >
< script type = "text/javascript" src = "./libs/imagesloaded.js" > < / script >
< script type = "text/javascript" src = "./icon.js" > < / script >
2019-10-15 22:42:47 -04:00
< script type = "text/javascript" >
2022-05-19 22:30:54 -04:00
// hi there hello! this code is really old, so it's shit. i should rewrite it some time omg
2019-10-15 22:42:47 -04:00
$('.hidden').show();
let mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
2022-05-19 22:30:54 -04:00
let currentForm = 'icon'
let glowbtnformCopy = 'icon'
const yOffsets = { ball: -10, ufo: 30, spider: 7, swing: -15 }
2019-10-15 22:42:47 -04:00
let selectedIcon = 1
2022-05-19 22:30:54 -04:00
let selectedForm = 'icon'
2019-10-15 22:42:47 -04:00
let selectedCol1 = 0
let selectedCol2 = 3
2020-11-26 16:04:42 -05:00
let selectedColG = 3
let selectedColW = null
2022-05-19 22:30:54 -04:00
let selectedColU = null
2019-10-15 22:42:47 -04:00
let enableGlow = 0
2022-05-19 22:30:54 -04:00
let shops = ["the Shop", "Scratch's Shop", "the Community Shop"]
2021-01-14 12:02:38 -05:00
let achievements = []
let shopIcons = []
2022-05-19 22:30:54 -04:00
let iconStuff = {}
2021-01-14 12:02:38 -05:00
let unlockMode = false
2022-05-19 22:30:54 -04:00
let currentAnimation = {}
let animationMultiplier = 1
let icon = null
let iconCanvas = document.getElementById('result');
let app = new PIXI.Application({ view: iconCanvas, width: 300, height: 300, backgroundAlpha: 0 });
2021-01-14 12:02:38 -05:00
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)
})
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 colorBG(e, c, hex) {
$(`#cc${e} img`).css('background-color', hex ? `#${c}` : `rgb(${c.r}, ${c.g}, ${c.b})`)
2022-05-19 22:30:54 -04:00
if (!hex) $(`#cp${e}`).val(toHexCode(rgbToDecimal(c.r, c.g, c.b)))
2020-11-26 16:04:42 -05:00
}
function colorSplit() {
2022-05-19 22:30:54 -04:00
if ($("#colG").is(':visible') || $("#colW").is(':visible') || $("#colU").is(':visible')) $('.colorSplit').show()
2020-11-26 16:04:42 -05:00
else $('.colorSplit').hide()
}
2020-09-22 18:37:21 -04:00
2022-05-19 22:30:54 -04:00
function setColor(type, col) {
icon.setColor(type, getCol(col))
updateDetails()
}
2019-10-15 22:42:47 -04:00
2022-05-19 22:30:54 -04:00
function updateDetails() {
checkGlow()
colorSplit()
checkAnimation()
setExtras()
}
2020-11-26 16:04:42 -05:00
2022-05-19 22:30:54 -04:00
// check if glow col tab should be visible
function checkGlow() {
if (icon.isGlowing()) { $('#colG').show(); $('#ccG').show() }
2020-11-26 16:04:42 -05:00
else { $('#colG').hide(); $('#ccG').hide(); }
colorSplit()
2022-05-19 22:30:54 -04:00
checkAnimation()
}
// check if animation selector should be visible
function checkAnimation() {
let animationData = iconData.robotAnimations.animations[selectedForm]
if (animationData & & !$(`#robotAnimation[form="${selectedForm}"]`).is(":visible")) {
appendAnimations(selectedForm, animationData)
}
else if (!animationData) $('#animationOptions').hide()
}
let commonAnimations = ["idle", "run", "walk"]
function animationSort(anim) {
return Object.keys(anim).sort((a, b) => (commonAnimations.includes(b)) - (commonAnimations.includes(a)) || a.localeCompare(b))
}
function appendAnimations(form, animationData) {
let animationNames = animationSort(animationData)
$('#robotAnimation').html(animationNames.map(x => `< option form = "${form}" value = "${x}" > ${x.replace(/_/g, " ")}< / option > `))
$('#robotAnimation').val("idle")
$('#robotAnimation').attr("form", selectedForm)
if (iconSettings.includes("cursed")) Object.keys(iconData.robotAnimations.animations).forEach(altForm => {
if (altForm != form) {
let altNames = animationSort(iconData.robotAnimations.animations[altForm])
$('#robotAnimation').append(altNames.map(x => `< option form = "${altForm}" value = "${x}" > *${x.replace(/_/g, " ")} (${altForm})< / option > `))
}
})
$('#animationOptions').show()
}
function setExtras() {
let extraInfo = {
"Icon ID": `${iconStuff.forms[selectedForm].name} ${+selectedIcon}`,
"Col 1": extraColString(selectedCol1),
"Col 2": extraColString(selectedCol2)
}
if ($('#colG').is(":visible") & & (getCol(selectedColG) != getCol(selectedCol2))) extraInfo["Glow"] = extraColString(selectedColG)
if ($('#colW').is(":visible") & & (getCol(selectedColW) != 0xffffff)) extraInfo["White"] = extraColString(selectedColW)
if ($('#colU').is(":visible") & & (getCol(selectedColU) != 0xffffff)) extraInfo["UFO Dome"] = extraColString(selectedColU)
let foundCredit = iconStuff.iconCredits.find(x => x.form == selectedForm & & x.id == selectedIcon)
if (foundCredit) extraInfo["🎨 Artist"] = foundCredit.name
let extraData = Object.entries(extraInfo).map(x => `< div > < p > ${x[0]}: ${x[1]}< / p > < / div > `)
$('#extraInfo').html(extraData)
}
function extraColString(col) {
let realCol = getCol(col)
let hexCol = toHexCode(realCol)
let foundGDCol = Object.entries(iconStuff.colors).find(x => rgbToDecimal(x[1]) == realCol)
return foundGDCol ? `${foundGDCol[0]} (${hexCol})` : hexCol
}
function getCol(id) {
return parseIconColor(id, iconStuff.colors)
}
2020-11-26 16:04:42 -05:00
2022-05-19 22:30:54 -04:00
function toHexCode(decimal) {
return "#" + decimal.toString(16).padStart(6, "0")
2020-11-26 16:04:42 -05:00
}
2022-05-19 22:30:54 -04:00
let iconData = null
fetch('../api/icons').then(res => res.json()).then(sacredTexts => {
fetch('../api/iconkit').then(res => res.json()).then(iconKitData => {
iconStuff = Object.assign(sacredTexts, iconKitData)
iconData = sacredTexts
2019-10-15 22:42:47 -04:00
2022-05-19 22:30:54 -04:00
let forms = Object.keys(iconStuff.forms)
forms.forEach(form => {
$("#iconTabs").append(`< button form = "${form}" title = "${iconStuff.forms[form].name}" class = "blankButton iconTabButton" > < img src = "../assets/iconkitbuttons/${form}_off.png" style = "width: 50px" > < / button > `)
$("#copyForms").append(`< button form = "${form}" title = "${iconStuff.forms[form].name}" class = "blankButton copyForm" > < img src = "../assets/iconkitbuttons/${form}_off.png" style = "width: 50px" > < / button > `)
})
$("#iconTabs").append(`< button title = "Glow" class = "blankButton glowToggle" id = "glowbtn" > < img id = "glow" src = "../assets/iconkitbuttons/streak_off.png" style = "width: 50px" > < / button > `)
forms.forEach(form => {$("#iconKitParent").append(`< div id = "${form}s" class = "iconContainer" > < / div > `)})
2021-01-14 00:59:13 -05:00
2021-01-18 21:54:18 -05:00
if (iconStuff.noCopy) $('#getUserIcon').remove()
else if (iconStuff.server) {
2021-02-03 13:50:19 -05:00
$('#copyFrom').html(`Copying from the < cy > ${iconStuff.server}< / cy > servers`)
2021-01-18 21:54:18 -05:00
$('#stealBox').css('height', '385px')
}
2022-05-19 22:30:54 -04:00
function generateIcon(cb) {
let noDome = selectedForm == "ufo" & & iconSettings.includes("ufo")
let foundForm = parseIconForm(selectedForm)
loadIconLayers(foundForm, selectedIcon, function(l, sprites) {
let iconArgs = {app, form: foundForm, id: selectedIcon, col1: getCol(selectedCol1), col2: getCol(selectedCol2), glow: enableGlow > 0}
if (selectedCol2 != selectedColG) iconArgs.colG = getCol(selectedColG)
if (selectedColW) iconArgs.colW = getCol(selectedColW)
if (selectedColU) iconArgs.colU = getCol(selectedColU)
if (iconSettings.includes("ufo")) iconArgs.noUFODome = true
if (animationMultiplier != 1) iconArgs.animationSpeed = animationMultiplier
if (currentAnimation.form & & (iconSettings.includes("cursed") || currentAnimation.form == selectedForm)) {
iconArgs.animation = currentAnimation.name
iconArgs.animationForm = currentAnimation.form
}
icon = new Icon(iconArgs)
icon.sprite.position.set(app.renderer.width / 2, (app.renderer.height / 2) + (yOffsets[selectedForm] || 0))
updateDetails()
if (cb) cb()
})
}
function filterIcon(name) { return iconStuff.previewIcons.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) {
2022-05-19 22:30:54 -04:00
let imagesLoaded = 0
let totalLoaded = 0
let formContainer = $('#' + formName + 's')
let hasMini = form[0].endsWith("_0.png")
if (hasMini) form.shift()
2020-09-24 22:07:53 -04:00
form.forEach(function (i, p) {
2022-05-19 22:30:54 -04:00
// if (p != 0 & & p % 12 == 0) formContainer.append('< br > ')
formContainer.append(`< button num = "${p + 1}" form = "${formName}" class = "blankButton iconButton" id = "${formName}-${p + 1}" > < img src = "./premade/${i}" title = "${capitalize(formName)} ${p + 1}" > < / button > `)
})
if (hasMini) formContainer.append(`< button num = "0" form = "${formName}" class = "blankButton iconButton" id = "${formName}-0" > < img src = "./premade/${formName}_0.png" title = "Mini ${formName}" > < / button > `)
formContainer.imagesLoaded(function() {}).progress(function() {
2020-09-24 22:07:53 -04:00
imagesLoaded += 1;
2022-05-19 22:30:54 -04:00
totalLoaded = imagesLoaded / formContainer.find('img').length * 100
2020-09-24 22:07:53 -04:00
$('#iconloading').css('width', `${totalLoaded}%`)
}
)}
2019-10-15 22:42:47 -04:00
2020-11-26 16:04:42 -05:00
function loadColors(devmode) {
2022-05-19 22:30:54 -04:00
let colTypes = [1, 2, "G", "W", "U"]
2020-11-26 16:04:42 -05:00
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 => {
2022-05-19 22:30:54 -04:00
let colRGB = iconStuff.colors[p]
$(`#col${c}`).append(`< button col = ${p} colType = color${c} class = "blankButton color${c} iconColor" title = "Color ${p} (#${toHexCode(rgbToDecimal(colRGB))})" id = "col${c}-${p}" > < div style = "background-color: rgb(${colRGB.r}, ${colRGB.g}, ${colRGB.b})" > < / 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()
2022-05-19 22:30:54 -04:00
let icons = filterIcon('icon');
2020-09-24 22:07:53 -04:00
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
$('body').imagesLoaded(function () {
2022-05-19 22:30:54 -04:00
appendIcon(icons, "icon")
$(`[num="${sample[0]}"][form="icon"]`).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');
2022-05-19 22:30:54 -04:00
$('.colorU[col="12"]').addClass('iconSelected');
2020-11-26 16:04:42 -05:00
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()
2022-05-19 22:30:54 -04:00
generateIcon(() => { icon.glow = false; enableGlow = 0 } ) // disable glow after first generated
2019-10-15 22:42:47 -04:00
2020-09-24 22:07:53 -04:00
$(document).on('click', '.iconTabButton', function () {
2022-05-19 22:30:54 -04:00
let form = $(this).attr('form')
let 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) {
2021-12-03 16:30:58 -05:00
$(this).children().first().attr('src', $(this).children().first().attr('src').replace('_on', '_off'))
})
2019-10-15 22:42:47 -04:00
2022-05-19 22:30:54 -04:00
let img = $(this).children().first()
2020-09-24 22:07:53 -04:00
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() {
2022-05-19 22:30:54 -04:00
let colorCount = Object.keys(iconStuff.colors).length
2020-09-22 18:37:21 -04:00
selectedForm = forms[Math.floor(Math.random() * forms.length)]
2022-05-19 22:30:54 -04:00
selectedIcon = randInt(1, iconStuff.previewIcons.filter(x => x.startsWith(selectedForm)).length)
selectedCol1 = randInt(0, colorCount - 1)
selectedCol2 = randInt(0, colorCount - 1)
2020-11-26 16:04:42 -05:00
selectedColW = null
2022-05-19 22:30:54 -04:00
selectedColU = null
2020-09-22 18:37:21 -04:00
enableGlow = randInt(0, 2) == 1 ? 1 : 0 // 1 in 3 chance of glow
2022-05-19 22:30:54 -04:00
generateIcon()
2020-09-22 18:37:21 -04:00
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')
2022-05-19 22:30:54 -04:00
$('#colU-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'))
})
2019-10-15 22:42:47 -04:00
$(document).on('click', '.glowToggle', function () {
2022-05-19 22:30:54 -04:00
if (enableGlow) {
$("#glow").attr('src', $("#glow").attr('src').replace('_on', '_off'))
enableGlow = 0;
}
2019-10-15 22:42:47 -04:00
2022-05-19 22:30:54 -04:00
else {
$("#glow").attr('src', $("#glow").attr('src').replace('_off', '_on'))
enableGlow = 1;
}
2019-10-15 22:42:47 -04:00
2022-05-19 22:30:54 -04:00
icon.setGlow(enableGlow > 0, false)
updateDetails()
2020-11-26 16:04:42 -05:00
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');
2022-05-19 22:30:54 -04:00
let oldForm = selectedForm
2020-11-26 16:04:42 -05:00
selectedIcon = $(this).attr('num');
selectedForm = $(this).attr('form');
if (iconStuff.whiteIcons.find(x => x[1] == selectedIcon & & x[0] == selectedForm)) { $('#colW').show(); $('#ccW').show() }
2022-05-19 22:30:54 -04:00
else { $('#colW').hide(); $('#ccW').hide(); $(`#colW-12`).trigger('click'); }
if (selectedForm == "ufo") { $('#colU').show(); $('#ccU').show() }
else { $('#colU').hide(); $('#ccU').hide(); $(`#colU-12`).trigger('click'); }
if (selectedForm != oldForm) currentAnimation = {}
2020-11-26 16:04:42 -05:00
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');
2022-05-19 22:30:54 -04:00
colorBG(1, iconStuff.colors[$(this).attr('col')]);
setColor("1", selectedCol1)
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');
2022-05-19 22:30:54 -04:00
colorBG(2, iconStuff.colors[$(this).attr('col')]);
2020-11-26 16:04:42 -05:00
$(`#colG-${$(this).attr('col')}`).trigger('click')
selectedColG = $(this).attr('col');
2022-05-19 22:30:54 -04:00
setColor("2", selectedCol2)
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');
2022-05-19 22:30:54 -04:00
colorBG('G', iconStuff.colors[$(this).attr('col')]);
setColor("g", selectedColG)
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
2022-05-19 22:30:54 -04:00
colorBG('W', iconStuff.colors[$(this).attr('col')]);
setColor("w", selectedColW)
})
$(document).on('click', '.colorU', function () {
$(".colorU").removeClass("iconSelected");
$(this).addClass('iconSelected');
selectedColU = $(this).attr('col');
if (selectedColU == 12) selectedColU = null
colorBG('U', iconStuff.colors[$(this).attr('col')]);
setColor("u", selectedColU)
2020-11-26 16:04:42 -05:00
})
$("#cp1").on('input change', function() {
2022-05-19 22:30:54 -04:00
colorBG(1, $(this).val(), true);
$(".color1").removeClass("iconSelected");
selectedCol1 = $('#cp1').val().slice(1)
setColor("1", selectedCol1)
2020-11-26 16:04:42 -05:00
})
$("#cp2").on('input change', function() {
2022-05-19 22:30:54 -04:00
colorBG(2, $(this).val(), true);
$(".color2").removeClass("iconSelected");
selectedCol2 = $('#cp2').val().slice(1)
setColor("2", selectedCol2)
2020-11-26 16:04:42 -05:00
})
$("#cpG").on('input change', function() {
2022-05-19 22:30:54 -04:00
colorBG('G', $(this).val(), true);
$(".colorG").removeClass("iconSelected");
selectedColG = $('#cpG').val().slice(1)
setColor("g", selectedColG)
2020-11-26 16:04:42 -05:00
})
$("#cpW").on('input change', function() {
2022-05-19 22:30:54 -04:00
colorBG('W', $(this).val(), true);
$(".colorW").removeClass("iconSelected");
selectedColW = $('#cpW').val().slice(1)
setColor("w", selectedColW)
2019-10-15 22:42:47 -04:00
})
2022-05-19 22:30:54 -04:00
$("#cpU").on('input change', function() {
colorBG('U', $(this).val(), true);
$(".colorU").removeClass("iconSelected");
selectedColU = $('#cpU').val().slice(1)
setColor("u", selectedColU)
2019-10-15 22:42:47 -04:00
})
2022-05-19 22:30:54 -04:00
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()
})
2022-05-19 22:30:54 -04:00
$('#copyToClipboard').click(function() {
if ($(this).hasClass('greyedOut')) return
icon.copyToClipboard()
let copyIcon = $(this).find('img')
$(this).addClass('greyedOut')
copyIcon.attr('src', '../assets/iconkitbuttons/copied.png')
setTimeout(() => {
$(this).removeClass('greyedOut')
copyIcon.attr('src', '../assets/iconkitbuttons/copy.png')
}, 420);
})
$('#robotAnimation').on('change', function() {
let prevForm = currentAnimation.form
currentAnimation = { name: $(this).val(), form: $('#robotAnimation').find(":selected").attr('form') }
if (currentAnimation.form != prevForm) {
generateIcon(() => icon.setAnimation(currentAnimation.name, currentAnimation.form))
}
else icon.setAnimation(currentAnimation.name, currentAnimation.form)
})
2020-11-26 16:04:42 -05:00
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
2022-05-19 22:30:54 -04:00
switch ($(this).attr('id').slice(4)) {
case "sort": loadColors(); break;
case "ufo": generateIcon(); break;
case "cursed":
$('#animationOptions').hide();
checkAnimation();
$('#robotAnimation').trigger('change');
break;
}
2020-11-26 16:04:42 -05:00
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) {
2022-05-19 22:30:54 -04:00
fetch('../api/achievements').then(res => { res.json().then(x => {
2021-01-14 12:02:38 -05:00
achievements = x.achievements
2022-05-19 22:30:54 -04:00
shopIcons = iconStuff.shops
2021-01-14 12:02:38 -05:00
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')
2022-05-19 22:30:54 -04:00
$('#howto').html(getUnlockMethod(iconNumber, form) || `< span style = 'color: #aaaaaa' > (no info available)< / span > `)
2021-01-14 12:02:38 -05:00
}
})
$(document).on('mouseleave', '.iconButton, .color1, .color2', function () {
$(this).removeClass('iconHover')
$('#howto').html("< span style = 'color: #aaaaaa' > (hover over an icon for info)< / span > ")
})
2022-05-19 22:30:54 -04:00
})
2020-11-26 16:04:42 -05:00
})
2020-09-22 18:37:21 -04:00
2022-05-19 22:30:54 -04:00
$("#fetchUser").click(async function () {
2020-09-22 18:37:21 -04:00
let user = $("#playerName").val()
if (!user || !user.length) return $("#steal").hide()
$(`.iconTabButton[form=${formCopy}]`).trigger('click')
2021-01-04 10:21:58 -05:00
$('#glow').attr('src', '../assets/iconkitbuttons/streak_off.png')
2022-05-19 22:30:54 -04:00
$("#steal").hide()
2019-10-15 22:42:47 -04:00
enableGlow = 0
2022-05-19 22:30:54 -04:00
let info = await fetch('../api/profile/' + user).then(res => res.json()).catch(e => {})
if (info == "-1") info = {}
$(`#${formCopy}-${Math.min(info[formCopy] || 1, $(`.iconButton[form=${formCopy}]`).length)}`).trigger('click')
$(`#col1-${info.col1 || 0}`).trigger('click')
$(`#col2-${info.col2 || 3}`).trigger('click')
$(`#colG-${info.col2 || 3}`).trigger('click')
$(`#colW-12`).trigger('click')
$(`#colU-12`).trigger('click')
if (info.glow) $('#glowbtn').trigger('click')
2019-10-15 22:42:47 -04:00
})
2022-05-19 22:30:54 -04:00
function getUnlockMethod(iconNumber, form) {
if (form == "swing") return "Coming soon™"
else if (iconNumber == 0 & & form == "icon") return "Legacy mini icon, enable in settings"
else if (iconNumber == 1 || ((form == "icon") & & iconNumber < = 4) || ((form.startsWith('color')) & & iconNumber < = 3)) return "Always unlocked"
let method = iconStuff.hardcodedUnlocks.find(x => x.form == form & & x.id == iconNumber)
let foundAch = achievements.find(x => x.rewardType == form & & x.rewardID == +iconNumber)
let foundMerch = shopIcons.find(x => x.type == form & & x.icon == +iconNumber)
if (method) {
switch (method.type) {
case "treasureRoom": return `Found in a ${method.keys == 5 ? "large" : "small"} chest in the Treasure Room`
case "treasureRoomMilestone": return `Open ${method.chests} chests in the Treasure Room`
case "gauntlet": return `Complete the ${method.gauntlet} gauntlet`
default: return method.unlock
}
2019-10-15 22:42:47 -04:00
}
2022-05-19 22:30:54 -04:00
if (foundAch) return foundAch.description.replace("Demon difficulty", "Demon")
else if (foundMerch) return `Purchase in ${shops[foundMerch.shop]} for < ca > ${foundMerch.price}< / ca > orbs`
2019-10-15 22:42:47 -04:00
}
function backButton() {
if (window.history.length > 1 & & document.referrer.startsWith(window.location.origin)) window.history.back()
window.location.href = "../../../../../"
}
2022-05-19 22:30:54 -04:00
$('#animationSpeed').on('input', function() {
animationMultiplier = Number($(this).val())
$('#animationSpeedBox').val(animationMultiplier)
if (icon.complex) icon.animationSpeed = animationMultiplier
})
$('#animationSpeedBox').change(function() {
animationMultiplier = Number(Math.abs(Number($(this).val()) || 1).toFixed(2))
if (animationMultiplier > 99) animationMultiplier = 99
else if (animationMultiplier < = 0) animationMultiplier = 0.1
$('#animationSpeed').val(animationMultiplier)
$('#animationSpeedBox').val(animationMultiplier)
if (icon.complex) icon.animationSpeed = animationMultiplier
})
2019-10-15 22:42:47 -04:00
$(document).keydown(function(k) {
2022-05-19 22:30:54 -04:00
if (k.keyCode == 13) { // enter
2020-09-22 18:37:21 -04:00
if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
2020-09-23 09:26:41 -04:00
else if ($(".popup").is(":visible")) return
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
2022-05-21 12:20:00 -04:00
< / script >
