517 lines
No EOL
24 KiB
HTML
517 lines
No EOL
24 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="../assets/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="https://gdbrowser.com/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="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>
|
|
<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>
|
|
<h2 style="margin: 5 auto 0 auto; display: none" id="howto"><span style='color: #aaaaaa'>(hover over an icon for info)</span></h2>
|
|
|
|
<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>
|
|
|
|
<hr id="gdfloor">
|
|
<div id="menuButtons" style="height: 65px; margin: 0 0 8 0;">
|
|
<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>
|
|
<button class="blankButton menuButton" id="unlockIcon" title="Unlock details"><img id="lock" src="../assets/iconkitbuttons/unlock.png" width=60px></button>
|
|
</div>
|
|
<div id="iconTabs"></div><br>
|
|
<div id="iconKitParent" class="iconKit noDarken">
|
|
<div id="iconprogressbar">
|
|
<div id="iconloading"></div>
|
|
</div>
|
|
</div><br>
|
|
|
|
<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>
|
|
|
|
<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 picking = [0, 0, 0, 0]
|
|
let currentForm = 'cube'
|
|
let formCopy = 'cube'
|
|
|
|
let selectedIcon = 1
|
|
let selectedForm = 'cube'
|
|
let selectedCol1 = 0
|
|
let selectedCol2 = 3
|
|
let selectedColG = 3
|
|
let selectedColW = null
|
|
let enableGlow = 0
|
|
|
|
let imagesLoaded = 0
|
|
let totalLoaded = 0
|
|
|
|
let shops = ["", "Scratch's ", "community "]
|
|
let achievements = []
|
|
let shopIcons = []
|
|
let unlockMode = false
|
|
|
|
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 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()
|
|
}
|
|
|
|
forms.forEach(form => {
|
|
$("#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>`)
|
|
})
|
|
$("#iconTabs").append(`<button title="Glow" class="blankButton glowToggle" id="glowbtn"><img id="glow" src="../assets/iconkitbuttons/streak_off.png" width=50px></button>`)
|
|
|
|
forms.forEach(form => {$("#iconKitParent").append(`<div id="${form}s"></div>`)})
|
|
|
|
function generateIcon() {
|
|
|
|
if (enableGlow == 1 || selectedCol1 == 15 || selectedCol1 == "000000") { $('#colG').show(); $('#ccG').show() }
|
|
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
|
|
}
|
|
|
|
fetch('./api/icons').then(res => {
|
|
return (res.json())})
|
|
.then(iconStuff => {
|
|
|
|
let miniIcon = iconStuff.icons.filter(x => x.startsWith("cube")).length
|
|
|
|
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, "");})}
|
|
|
|
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="../assets/previewicons/${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}%`)
|
|
}
|
|
)}
|
|
|
|
function loadColors(devmode) {
|
|
let colTypes = [1, 2, "G", "W"]
|
|
colTypes.forEach(x => $(`#col${x}`).html(""))
|
|
iconStuff.colorOrder.forEach(function (p, n) {
|
|
if (iconSettings.includes("sort")) p = n;
|
|
colTypes.forEach(c => {
|
|
$(`#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>`)
|
|
})
|
|
})
|
|
$('#col1').append("<span style='min-width: 10px'></span>")
|
|
}
|
|
|
|
loadColors()
|
|
let cubes = filterIcon('cube');
|
|
|
|
let sample = JSON.parse(iconStuff.sample);
|
|
enableGlow = sample[3] * 2;
|
|
[selectedIcon, selectedCol1, selectedCol2] = sample;
|
|
selectedColG = selectedCol2
|
|
|
|
cubes.push(cubes.shift())
|
|
|
|
$('body').imagesLoaded(function () {
|
|
appendIcon(cubes, "cube")
|
|
$(`[num="${sample[0]}"][form="cube"]`).addClass('iconSelected');
|
|
})
|
|
|
|
$(`.color1[col="${sample[1]}"]`).addClass('iconSelected');
|
|
$(`.color2[col="${sample[2]}"]`).addClass('iconSelected');
|
|
$(`.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]])
|
|
|
|
$('.colorLabel img').show()
|
|
|
|
generateIcon()
|
|
|
|
$(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, 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
|
|
enableGlow = randInt(0, 2) == 1 ? 1 : 0 // 1 in 3 chance of glow
|
|
|
|
$('#glow').attr('src', '../assets/iconkitbuttons/streak_off.png')
|
|
|
|
$(`.iconTabButton[form=${selectedForm}]`).trigger('click')
|
|
$(`#${selectedForm}-${selectedIcon}`).trigger('click')
|
|
$(`#col1-${selectedCol1}`).trigger('click')
|
|
$(`#col2-${selectedCol2}`).trigger('click')
|
|
$(`#colG-${selectedCol2}`).trigger('click')
|
|
$('#colW-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()
|
|
})
|
|
|
|
$(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;
|
|
}
|
|
|
|
generateIcon()
|
|
|
|
})
|
|
|
|
$(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 == miniIcon) selectedIcon = 0;
|
|
|
|
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()
|
|
})
|
|
|
|
$(document).on('click', '.color1', function () {
|
|
$(".color1").removeClass("iconSelected");
|
|
$(this).addClass('iconSelected');
|
|
selectedCol1 = $(this).attr('col');
|
|
colorBG(1, iconStuff.colors[$(this).attr('col')]); undone(0)
|
|
generateIcon()
|
|
})
|
|
|
|
$(document).on('click', '.color2', function () {
|
|
$(".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()
|
|
})
|
|
|
|
$(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()
|
|
})
|
|
|
|
$(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);
|
|
$(".color2").removeClass("iconSelected"); $("#done").show()
|
|
})
|
|
|
|
$("#cpG").on('input change', function() {
|
|
picking[2] = true; colorBG('G', $(this).val(), true);
|
|
$(".colorG").removeClass("iconSelected"); $("#done").show()
|
|
})
|
|
|
|
$("#cpW").on('input change', function() {
|
|
picking[3] = true; colorBG('W', $(this).val(), true);
|
|
$(".colorW").removeClass("iconSelected"); $("#done").show()
|
|
})
|
|
|
|
$("#done img").click(function() {
|
|
$("#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()
|
|
})
|
|
|
|
$('#result').on('load', function() {
|
|
$('#iconbox').css('min-height', `${(currentForm == "ship" || currentForm == "wave") ? 110 : 145}px`)
|
|
$("#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()
|
|
$('#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(",")
|
|
})
|
|
|
|
$('#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')
|
|
|
|
if (iconNumber == 1 || ((form == "cube") && iconNumber <= 4) || ((form.startsWith('color')) && iconNumber <= 3)) return $('#howto').html("Always unlocked")
|
|
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>")
|
|
})
|
|
})
|
|
|
|
$("#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', '../assets/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')
|
|
$(`#colG-${info.col2}`).trigger('click')
|
|
$(`#colW-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 = "../../../../../"
|
|
}
|
|
|
|
$(document).keydown(function(k) {
|
|
if (k.keyCode == 13) {
|
|
if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
|
|
else if ($(".popup").is(":visible")) return
|
|
else generateIcon()
|
|
}
|
|
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> |