+ +
+
+
+
+ 
+ 
+
+ Copy Icon
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ Settings
+No UFO Dome
Square Image
+
Color 3
+
(Hover over a setting for information)
+
+
+ 
@@ -31,9 +58,9 @@
-
@@ -52,22 +79,36 @@ $('.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
-function capitalize(str) {return str[0].toUpperCase() + str.substr(1)}
-
if (mobile) $('#logo').attr('width', '80%');
-forms.forEach(form => {$("#iconTabs").append(``)})
+let iconSettings = localStorage.iconkit.split(",")
+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 }
+function row3() { if (iconSettings.includes("col3")) $('#col3').show(); else $('#col3').hide() }
+
+row3()
+
+forms.forEach(form => {
+ $("#iconTabs").append(``)
+ $("#copyForms").append(``)
+})
$("#iconTabs").append(``)
forms.forEach(form => {$("#iconKitParent").append(``)})
@@ -101,15 +142,19 @@ fetch('./api/icons').then(res => {
$('[num="1"][form="cube"]').addClass('iconSelected');
})
- filterIcon('color').forEach(function (i, p) {
- $('#col1').append(``)
- $('#col2').append(``)})
+ filterIcon('color').forEach(function (n, p) {
+ for (i=1; i<=3; i++) {
+ $(`#col${i}`).append(``)
+ }
+ })
$('#col1').append("")
$('#col2').append("")
+ $('#col3').append("")
$('.color1[col="0"]').addClass('iconSelected');
$('.color2[col="3"]').addClass('iconSelected');
+ $('.color3[col="12"]').addClass('iconSelected');
$(document).on('click', '.iconTabButton', function () {
@@ -135,6 +180,28 @@ fetch('./api/icons').then(res => {
})
$('#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-15`).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 () {
@@ -151,6 +218,13 @@ fetch('./api/icons').then(res => {
})
+ $(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');
@@ -171,11 +245,21 @@ fetch('./api/icons').then(res => {
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()
- $("#result").attr('src', `../icon/icon?icon=${selectedIcon}&form=${selectedForm}&col1=${selectedCol1}&col2=${selectedCol2}&glow=${enableGlow}`).attr('download', `${selectedForm}_${selectedIcon}.png`)
- $("#downloadLink").attr('href', `../icon/icon?icon=${selectedIcon}&form=${selectedForm}&col1=${selectedCol1}&col2=${selectedCol2}&glow=${enableGlow}`).attr('download', `${selectedForm}_${selectedIcon}.png`)
+ 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 == 1 ? "&glow=1" : ""}${square ? "&size=auto" : ""}`
+ $("#result").attr('src', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
+ $("#downloadLink").attr('href', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
})
$('#result').on('load', function() {
@@ -185,25 +269,34 @@ fetch('./api/icons').then(res => {
else $("#gdfloor").css('margin-top', '0px')
})
- $("#fetchUser").click(function () {
-
- let user = prompt(`Enter a player's username to get their ${currentForm == "ufo" ? "UFO" : currentForm}!\n(Form will depend on selected tab)\n`)
- if (!user) return;
+ $("#getUserIcon").click(function() {
+ $(`.copyForm[form=${currentForm}]`).trigger('click')
+ $('#steal').show();
+ $('#playerName').focus()
+ })
- let iconURL = `../icon/${user}?form=${currentForm}`
+ $("#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}_${currentForm}.png`)
- $("#downloadLink").attr('href', iconURL).attr('download', `${user}_${currentForm}.png`)
+ $("#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 => {
- $(`#${currentForm}-${info.icon}`).trigger('click')
+ $(`#${formCopy}-${info[formCopy == "cube" ? "icon" : formCopy] || 1}`).trigger('click')
$(`#col1-${info.col1}`).trigger('click')
$(`#col2-${info.col2}`).trigger('click')
- if (info.glow)$('#glowbtn').trigger('click')
+ $(`#col3-12`).trigger('click')
+ if (info.glow) $('#glowbtn').trigger('click')
})
})
@@ -222,13 +315,43 @@ function backButton() {
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
+ localStorage.iconkit = checkedSettings.join(",")
+ row3()
+})
+
$(document).keydown(function(k) {
- if (k.keyCode == 27) { //esc
+ if (k.keyCode == 13) {
+ if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
+ 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()
+})
+
function saveUrl() {
sessionStorage.setItem('prevUrl', window.location.href);
}
+
-
All sprites/assets belong to RobTop Games.
- +Created by GD Colon • All sprites/assets belong to RobTop Games • API Reference
@@ -52,22 +79,36 @@ $('.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
-function capitalize(str) {return str[0].toUpperCase() + str.substr(1)}
-
if (mobile) $('#logo').attr('width', '80%');
-forms.forEach(form => {$("#iconTabs").append(``)})
+let iconSettings = localStorage.iconkit.split(",")
+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 }
+function row3() { if (iconSettings.includes("col3")) $('#col3').show(); else $('#col3').hide() }
+
+row3()
+
+forms.forEach(form => {
+ $("#iconTabs").append(``)
+ $("#copyForms").append(``)
+})
$("#iconTabs").append(``)
forms.forEach(form => {$("#iconKitParent").append(``)})
@@ -101,15 +142,19 @@ fetch('./api/icons').then(res => {
$('[num="1"][form="cube"]').addClass('iconSelected');
})
- filterIcon('color').forEach(function (i, p) {
- $('#col1').append(``)
- $('#col2').append(``)})
+ filterIcon('color').forEach(function (n, p) {
+ for (i=1; i<=3; i++) {
+ $(`#col${i}`).append(``)
+ }
+ })
$('#col1').append("")
$('#col2').append("")
+ $('#col3').append("")
$('.color1[col="0"]').addClass('iconSelected');
$('.color2[col="3"]').addClass('iconSelected');
+ $('.color3[col="12"]').addClass('iconSelected');
$(document).on('click', '.iconTabButton', function () {
@@ -135,6 +180,28 @@ fetch('./api/icons').then(res => {
})
$('#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-15`).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 () {
@@ -151,6 +218,13 @@ fetch('./api/icons').then(res => {
})
+ $(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');
@@ -171,11 +245,21 @@ fetch('./api/icons').then(res => {
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()
- $("#result").attr('src', `../icon/icon?icon=${selectedIcon}&form=${selectedForm}&col1=${selectedCol1}&col2=${selectedCol2}&glow=${enableGlow}`).attr('download', `${selectedForm}_${selectedIcon}.png`)
- $("#downloadLink").attr('href', `../icon/icon?icon=${selectedIcon}&form=${selectedForm}&col1=${selectedCol1}&col2=${selectedCol2}&glow=${enableGlow}`).attr('download', `${selectedForm}_${selectedIcon}.png`)
+ 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 == 1 ? "&glow=1" : ""}${square ? "&size=auto" : ""}`
+ $("#result").attr('src', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
+ $("#downloadLink").attr('href', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
})
$('#result').on('load', function() {
@@ -185,25 +269,34 @@ fetch('./api/icons').then(res => {
else $("#gdfloor").css('margin-top', '0px')
})
- $("#fetchUser").click(function () {
-
- let user = prompt(`Enter a player's username to get their ${currentForm == "ufo" ? "UFO" : currentForm}!\n(Form will depend on selected tab)\n`)
- if (!user) return;
+ $("#getUserIcon").click(function() {
+ $(`.copyForm[form=${currentForm}]`).trigger('click')
+ $('#steal').show();
+ $('#playerName').focus()
+ })
- let iconURL = `../icon/${user}?form=${currentForm}`
+ $("#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}_${currentForm}.png`)
- $("#downloadLink").attr('href', iconURL).attr('download', `${user}_${currentForm}.png`)
+ $("#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 => {
- $(`#${currentForm}-${info.icon}`).trigger('click')
+ $(`#${formCopy}-${info[formCopy == "cube" ? "icon" : formCopy] || 1}`).trigger('click')
$(`#col1-${info.col1}`).trigger('click')
$(`#col2-${info.col2}`).trigger('click')
- if (info.glow)$('#glowbtn').trigger('click')
+ $(`#col3-12`).trigger('click')
+ if (info.glow) $('#glowbtn').trigger('click')
})
})
@@ -222,13 +315,43 @@ function backButton() {
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
+ localStorage.iconkit = checkedSettings.join(",")
+ row3()
+})
+
$(document).keydown(function(k) {
- if (k.keyCode == 27) { //esc
+ if (k.keyCode == 13) {
+ if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
+ 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()
+})
+
function saveUrl() {
sessionStorage.setItem('prevUrl', window.location.href);
}