Icon kit overhaul!

- Icons are now automatically generated upon selection
- Added support for custom glow
- Rearranged colors to match how they appear in GD
- Added custom colors
- Some other stuff idk

README.md

@@ -83,8 +83,6 @@ objects.json - IDs for portals, orbs, triggers, and misc stuff
 
 **Not for level analysis**
 
-colors.json - The colors for generating icons
-
 credits.json - Credits! (shown on the homepage)
 
 level.json - An array of the official GD tracks, and also difficulty face stuff for level searching

api/icon.js

@@ -2,10 +2,12 @@ const request = require('request')
 const Jimp = require('jimp');
 const fs = require('fs');
 const icons = require('../icons/gameSheet.json');
-const colors = require('../misc/colors.json');
+const colors = require('../icons/colors.json');
 const forms = require('../icons/forms.json')
 const offsets = require('../icons/offsets.json');
 
+let hexRegex = /^[A-Fa-f0-9]{6}$/
+function hexConvert(hex) { hex = hex.replace('#', ''); return {r: '0x' + hex[0] + hex[1] | 0, g: '0x' + hex[2] + hex[3] | 0, b: '0x' + hex[4] + hex[5] | 0}; }
 function recolor(img, col) {
   return img.scan(0, 0, img.bitmap.width, img.bitmap.height, function (x, y, idx) {
     if (img.bitmap.data.slice(idx, idx+3).every(function(val) {return val >= 20 && val <= 255})) { // If it's not "black, i.e. we want to recolor it"
@@ -33,6 +35,8 @@ module.exports = async (app, req, res) => {
       let iconID = req.query.icon || account[ind] || 1;
       let col1 = req.query.col1 || account[10] || 0;
       let col2 = req.query.col2 || account[11] || 3;
+      let colG = req.query.colG || req.query.colg
+      let colW = req.query.colW || req.query.colw || req.query.col3
       let outline = req.query.glow || account[28] || "0";
 
       let topless = form == "bird" && req.query.topless
@@ -42,10 +46,8 @@ module.exports = async (app, req, res) => {
 
       if (iconID && iconID.toString().length == 1) iconID = "0" + iconID;
 
-      if (col1 == 15) outline = true;
-      function genImageName(...args) {
-        return genFileName(form, iconID, ...args);
-      }
+      function genImageName(...args) { return genFileName(form, iconID, ...args) }
+
       let icon, glow, extra;
       function setBaseIcons() {
         icon = genImageName(isSpecial && '01');
@@ -63,13 +65,22 @@ module.exports = async (app, req, res) => {
       let ex = fromIcons(extra)
       let hasExtra = fs.existsSync(ex)
 
-      if (!colors[col1]) col1 = 0
-      if (!colors[col2]) col2 = 3
+      let cols = [col1, col2, colG, colW]
+      cols.forEach(col => {
+        if (!col) return
+        col = col.toString()
+        if (col.match(hexRegex)) colors[col.toLowerCase()] = hexConvert(col)
+      })
 
-      let col3 = req.query.col3
-      if (col3 && (!hasExtra || !colors[col3] || col3 == "12")) col3 = null
+      if (!colors[col1] || isNaN(colors[col1].r)) col1 = colors[+col1] ? +col1 : 0
+      if (!colors[col2] || isNaN(colors[col2].r)) col2 = colors[+col2] ? +col2 : 3
+      if (!colors[colG] || isNaN(colors[colG].r)) colG = colors[+colG] ? +colG : null
+      if (!colors[colW] || isNaN(colors[colW].r)) colW = colors[+colW] ? +colW : null
+      if (colW && (!hasExtra || colW == 12)) colW = null
 
-      let iconCode = `${req.query.form == "cursed" ? "cursed" : form}${topless ? "top" : ""}-${iconID}-${col1}-${col2}-${col3 || "x"}-${outline ? 1 : 0}` 
+      if (col1 == 15 || col1 == "000000") outline = true;
+
+      let iconCode = `${req.query.form == "cursed" ? "cursed" : form}${topless ? "top" : ""}-${iconID}-${col1}-${col2}-${colG || "x"}-${colW || "x"}-${outline ? 1 : 0}` 
 
       if (!sizeParam && cache[iconCode]) return res.end(cache[iconCode].value)
 
@@ -114,7 +125,7 @@ module.exports = async (app, req, res) => {
           offset2 = extrabit.spriteOffset.map(minusOrigOffset);
           size2 = extrabit.spriteSize;
           extra = new Jimp(eb);
-          if (col3) await Jimp.read(eb).then(e => { extra = recolor(e, col3) })
+          if (colW) await Jimp.read(eb).then(e => { extra = recolor(e, colW) })
           useExtra = true
         }
 
@@ -300,8 +311,8 @@ module.exports = async (app, req, res) => {
                 , canvas = Canvas.createCanvas(finalSize[0] + 10, finalSize[1] + 10)
                 , ctx = canvas.getContext('2d');
 
-              if (col2 == 15) col2 = col1;
-              if (col1 == 15 && col2 == 15) col2 = 12;
+              if (!colG) colG = (col2 == 15 || col2 == "000000" ? col1 : col2)
+              if (colG == 15 || colG == "000000") colG = 12
 
               const img = new Image()
               img.onload = () => {
@@ -311,7 +322,7 @@ module.exports = async (app, req, res) => {
                 for (; i < dArr.length; i += 2) ctx.drawImage(img, x + dArr[i] * s, y + dArr[i + 1] * s);
 
                 ctx.globalCompositeOperation = "source-in";
-                ctx.fillStyle = `rgba(${colors[col2].r}, ${colors[col2].g}, ${colors[col2].b}, 1})`;
+                ctx.fillStyle = `rgba(${colors[colG].r}, ${colors[colG].g}, ${colors[colG].b}, 1})`;
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
                 ctx.globalCompositeOperation = "source-over";
                 ctx.imageSmoothingEnabled = false;

api/mappack.js

@@ -8,7 +8,7 @@ module.exports = async (app, req, res) => {
   if (app.offline) return res.send("-1")
   else if (app.config.cacheMapPacks && cache.data != null && cache.indexed + 20000000 > Date.now()) return res.send(cache.data)   // 6 hour cache
 
-  request.post(app.endpoint + 'getGJMapPacks21.php', req.gdParams({ count: 100 }), function (err, resp, body) {
+  request.post(app.endpoint + 'getGJMapPacks21.php', req.gdParams({ count: 200 }), function (err, resp, body) {
 
     if (err || !body || body == '-1' || body.startsWith("<!")) return res.send("-1")
 

api/profile.js

@@ -29,9 +29,9 @@ module.exports = async (app, req, res, api, getLevels) => {
       let account = app.parseResponse(body)
       
       if (!foundID && app.config.cacheAccountIDs) app.accountCache[username.toLowerCase()] = [account[16], account[2]]
-
+      
       let userData = {
-          username: account[1],
+          username: account[1] || "[MISSINGNO.]",
           playerID: account[2],
           accountID: account[16],
           rank: +account[30],
@@ -57,7 +57,7 @@ module.exports = async (app, req, res, api, getLevels) => {
           spider: +account[43],
           col1: +account[10],
           col2: +account[11],
-          deathEffect: +account[48],
+          deathEffect: +account[48] || 1,
           glow: account[28] == "1",
       }
   

assets/css/boomlings.css

@@ -1,7 +1,5 @@
-@font-face {
-	font-family: Kaine;
-	src: url(../assets/Kaine.ttf)
-}
+@font-face { font-family: Pusab; src: url('./../assets/Pusab.ttf') }
+@font-face { font-family: Kaine; src: url('./../assets/boomlings/Kaine.ttf') }
 
 body {
 	margin: 0;

assets/css/iconkit.css

@@ -284,7 +284,7 @@ input:focus, select:focus, textarea:focus, button:focus {
   border-radius: 8px;
 }
 
-.iconKit button {
+.iconKit button, .colTypes button {
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   border: 5px solid transparent;
@@ -299,6 +299,35 @@ input:focus, select:focus, textarea:focus, button:focus {
   transition: transform .1s ease-in-out;
 }
 
+.colorPicker {
+  width: 0.01px !important;
+  height: 0.01px !important;
+  padding: 0 0 0 0 !important;
+  visibility: hidden;
+  position: absolute;
+}
+
+.colorLabel {
+  transition-duration: 0.05s;
+  transition-timing-function: ease-in-out;
+}
+
+.colorLabel:hover {
+  transform: scale(1.08)
+}
+
+.colorLabel img {
+  display: none;
+  width: 45px;
+  border: 2.5px solid black;
+  border-radius: 420px;
+  transition-duration: 0.25s;
+}
+
+.customMode {
+  border: 2.5px solid white;
+}
+
 .copyForm {
   margin: 18 10 0 10 !important;
 }

html/api.html

@@ -779,7 +779,8 @@
 				<p>icon: The ID of the icon to use</p>
 				<p>col1: The ID of the primary color to use</p>
 				<p>col2: The ID of the secondary color to use</p>
-				<p>col3: Optional color ID to overwrite the 'white' layer used by some detailed icons</p>
+				<p>colG: Optional color ID to overwrite the glow for the icon</p>
+				<p>colW: Optional color ID to overwrite the 'white' layer used by some detailed icons</p>
 				<p>glow: If the icon should have a glow/outline (0 = off, anything else = on)</p>
 				<p>size: The size in pixels that the icon should be (always square), in case you don't want the default. "Auto" also works.</p>
 				<p>topless: Removes the glass 'dome' from generated UFOs (legacy)</p>
@@ -811,7 +812,7 @@
 	</main>
 
 	<footer>
-		<p>API made by <a href="https://twitter.com/TheRealGDColon">GD Colon</a>. Webpage design by <a href="https://twitter.com/gducrash">GD Ucrash</a><br><br>
+		<p>API made by <a href="https://twitter.com/TheRealGDColon">GD Colon</a>. Webpage design by <a href="http://gducrash.tk">GD Ucrash</a><br><br>
 		Good job man, this looks really nice -Colon</p>
 	</footer>
 </body>
@@ -849,4 +850,4 @@
 			document.getElementById('menu-btn').classList.toggle('active');
 		}
 	}
-</script>
+</script>

html/boomlings.html

@@ -7,7 +7,7 @@
 	<link rel="icon" href="../assets/boomlings/red.png">
 	<meta id="meta-title" property="og:title" content="Boomlings Leaderboard">
 	<meta id="meta-desc" property="og:description" content='"Never ask me for anything ever again." - Masahiro Sakurai (probably)'>
-	<meta id="meta-image" name="og:image" itemprop="image" content="../assets/boomlings/red.png">
+	<meta id="meta-image" name="og:image" itemprop="image" content="https://gdbrowser.com/assets/boomlings/red.png">
 </head>
 
 <body class="levelBG" onbeforeunload="saveUrl()">

html/iconkit.html

@@ -30,24 +30,26 @@
             <div class="inline"><h2 class="help" help="Removes the clear dome on top of UFOs"><input type="checkbox" class="iconsetting" id="box-ufo"><label for="box-ufo" class="gdcheckbox gdButton"></label>No UFO Dome</h2></div>
             <div class="inline"><h2 class="help" help="Forces a square aspect ratio on generated icons"><input type="checkbox" class="iconsetting" id="box-square"><label for="box-square" class="gdcheckbox gdButton"></label>Square Image</h2></div>
             <br>
-            <div class="inline" style="margin-top: 12px"><h2 class="help" help="Adds a third color option for normally non-colorable details"><input type="checkbox" class="iconsetting" id="box-col3"><label for="box-col3" class="gdcheckbox gdButton"></label>Color 3</h2></div>
-            <br>
+            <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><br>
-    <img id="loading" src="../assets/loading.png" class="spin" height=95px; style="margin: auto auto 25px auto">
-    <img id="result" src="" download="">
+    <img id="iconkitlogo" src="../assets/iconkit.png" height=50px; style="margin: 7px 0;"><br>
+
+    <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 15 0;">
-        <button class="blankButton menuButton" id="customColors" title="Settings" onclick="$('#settings').show()"><img src="../iconkitbuttons/cog.png" width=55px></button>
-        <button class="blankButton menuButton" id="downloadIcon" title="Download icon"><a id="downloadLink" download="cube_1.png" href=""><img src="../iconkitbuttons/save.png" width=55px></a></button>
-        <button class="blankButton menuButton" id="generateIcon" title="Generate icon"><img src="../iconkitbuttons/generate.png" width=70px></button>
-        <button class="blankButton menuButton" id="getUserIcon" title="Get player icon"><img src="../iconkitbuttons/steal.png" width=55px></button>
-        <button class="blankButton menuButton" id="randomIcon" title="Random Icon"><img src="../iconkitbuttons/shuffle.png" width=55px></button>
+    <div id="menuButtons" style="height: 65px; margin: 0 0 8 0;">
+        <button class="blankButton menuButton" id="customColors" title="Settings" onclick="$('#settings').show()"><img src="../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="../iconkitbuttons/save.png" width=60px></a></button>
+        <button class="blankButton menuButton" id="getUserIcon" title="Get player icon"><img src="../iconkitbuttons/steal.png" width=60px></button>
+        <button class="blankButton menuButton" id="randomIcon" title="Random Icon"><img src="../iconkitbuttons/shuffle.png" width=60px></button>
         </div>
         <div id="iconTabs"></div><br>
         <div id="iconKitParent" class="iconKit">
@@ -55,12 +57,30 @@
                 <div id="iconloading"></div>
             </div>
         </div><br>
-        <div id="colors" class="iconKit">
-            <div id="col1"></div>
-            <div id="col2"></div>
-            <div style="margin-top: 12px" id="col3"></div>
-    </div><br>
-    <p style="color: rgb(20, 20, 20); margin-top: 3px">Created by <a target=_blank href="https://gdcolon.com">GD Colon</a> • All sprites/assets belong to <a target=_blank href="http://robtopgames.com">RobTop Games</a> • <a target=_blank href="https://gdbrowser.com/api#icons">API Reference</a></p>
+
+        <div 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()">
@@ -78,15 +98,16 @@ $('.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 beenThereDoneThat = false
 
 let selectedIcon = 1
 let selectedForm = 'cube'
 let selectedCol1 = 0
 let selectedCol2 = 3
-let selectedCol3 = null
+let selectedColG = 3
+let selectedColW = null
 let enableGlow = 0
 
 let imagesLoaded = 0
@@ -104,9 +125,16 @@ else $("#result").removeClass("squareIcon")
 
 function capitalize(str) { return str[0].toUpperCase() + str.substr(1) }
 function randInt(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min }
-function row3() { if (iconSettings.includes("col3")) $('#col3').show(); else $('#col3').hide() }
-
-row3()
+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="../iconkitbuttons/${form}_off.png" width=50px></button>`)
@@ -116,11 +144,27 @@ $("#iconTabs").append(`<button title="Glow" class="blankButton glowToggle" id="g
 
 forms.forEach(form => {$("#iconKitParent").append(`<div id="${form}s"></div>`)})
 
+function generateIcon() {
+
+    if (enableGlow == 1 || selectedCol1 == 15) { $('#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(iconArray => {
+    .then(iconStuff => {
 
-        function filterIcon(name) { return iconArray.filter(x => x.startsWith(name)).sort(function (a,b) {return a.replace(/[^0-9]/g, "") - b.replace(/[^0-9]/g, "");})}
+        function 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
@@ -128,7 +172,7 @@ fetch('./api/icons').then(res => {
 
             form.forEach(function (i, p) {
             if (p != 0 && p % 12 == 0) $('#' + formName + 's').append('<br>')
-            $('#' + formName + 's').append(`<button num="${p + 1}" form="${formName}" class="blankButton iconButton" id="${formName}-${p + 1}"><img src="../gdicon/${i}" width="50px" title="${capitalize(formName)} ${formName == "cube" && p+1 == form.length ? 0 : p + 1}"></button>`)})
+            $('#' + formName + 's').append(`<button num="${p + 1}" form="${formName}" class="blankButton iconButton" id="${formName}-${p + 1}"><img src="../previewicon/${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
@@ -136,11 +180,23 @@ fetch('./api/icons').then(res => {
             }
         )}
 
+        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} class="blankButton color${c}" title="Color ${p}" id="col${c}-${p}"><img src="../previewicon/color_${p}.png" width=50px></button>`)
+            })
+        })}
+
+        loadColors()
         let cubes = filterIcon('cube');
         
-        let sample = JSON.parse(iconArray.find(x => x.startsWith("[")));
+        let sample = JSON.parse(iconStuff.sample);
         enableGlow = sample[3] * 2;
         [selectedIcon, selectedCol1, selectedCol2] = sample;
+        selectedColG = selectedCol2
 
         cubes.push(cubes.shift())
 
@@ -149,21 +205,20 @@ fetch('./api/icons').then(res => {
             $(`[num="${sample[0]}"][form="cube"]`).addClass('iconSelected');
         })
 
-        filterIcon('color').forEach(function (n, p) {
-            for (i=1; i<=3; i++) {
-                $(`#col${i}`).append(`<button col=${p} class="blankButton color${i}" title="Color ${p}" id="col${i}-${p}"><img src="../gdicon/color_${p}.png" width=50px></button>`)
-            }
-        })
-
        $('#col1').append("<span style='min-width: 10px'></span>")
-       $('#col2').append("<span style='min-width: 10px'></span>")
-       $('#col3').append("<span style='min-width: 10px'></span>")
 
         $(`.color1[col="${sample[1]}"]`).addClass('iconSelected');
         $(`.color2[col="${sample[2]}"]`).addClass('iconSelected');
-        $('.color3[col="12"]').addClass('iconSelected');
+        $(`.colorG[col="${sample[2]}"]`).addClass('iconSelected');
+        $('.colorW[col="12"]').addClass('iconSelected');
 
-        $("#generateIcon").trigger('click')
+        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')
@@ -187,14 +242,13 @@ 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
+            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', '../iconkitbuttons/streak_off.png')
@@ -203,12 +257,12 @@ fetch('./api/icons').then(res => {
             $(`#${selectedForm}-${selectedIcon}`).trigger('click')
             $(`#col1-${selectedCol1}`).trigger('click')
             $(`#col2-${selectedCol2}`).trigger('click')
-            $('#col3-12').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").trigger('click')
+            generateIcon()
         })
-    })
 
     $(document).on('click', '.glowToggle', function () {
 
@@ -222,6 +276,8 @@ fetch('./api/icons').then(res => {
         enableGlow = 1;
     }
 
+    generateIcon()
+
     })
 
     $(document).on('click', '.copyForm', function () {
@@ -232,44 +288,86 @@ fetch('./api/icons').then(res => {
     })
 
     $(document).on('click', '.iconButton', function () {
-    $(".iconButton").removeClass("iconSelected");
-    $(this).addClass('iconSelected');
-    selectedIcon = $(this).attr('num');
-    selectedForm = $(this).attr('form');
-    if (selectedIcon == 143) selectedIcon = 0;
+        $(".iconButton").removeClass("iconSelected");
+        $(this).addClass('iconSelected');
+        selectedIcon = $(this).attr('num');
+        selectedForm = $(this).attr('form');
+        if (selectedIcon == 143) 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');
+        $(".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');
+        $(".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', '.color3', function () {
-    $(".color3").removeClass("iconSelected");
-    $(this).addClass('iconSelected');
-    selectedCol3 = $(this).attr('col');
-    if (selectedCol3 == 12) selectedCol3 = null
+    $(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()
     })
 
-    $("#generateIcon").click(function () {
-        $("#loading").show()
-        $("#result").hide()
-        let noDome = selectedForm == "ufo" && iconSettings.includes("ufo")
-        let square = iconSettings.includes("square")
-        let finalURL = `../icon/icon?icon=${selectedIcon}&form=${selectedForm}${noDome ? "&topless=1" : ""}&col1=${selectedCol1}&col2=${selectedCol2}${iconSettings.includes("col3") && selectedCol3 ? `&col3=${selectedCol3}` : ""}${enableGlow > 0 ? "&glow=1" : ""}${square ? "&size=auto" : ""}`
-        $("#result").attr('src', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
-        $("#downloadLink").attr('href', finalURL).attr('download', `${selectedForm}_${selectedIcon}.png`)
-        if (enableGlow == 2) enableGlow = 0
+    $(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);
+        $(".color1").removeClass("iconSelected"); $("#done").show()
+    })
+
+    $("#cpG").on('input change', function() {
+        picking[2] = true; colorBG('G', $(this).val(), true);
+        $(".color1").removeClass("iconSelected"); $("#done").show()
+    })
+
+    $("#cpW").on('input change', function() {
+        picking[3] = true; colorBG('W', $(this).val(), true);
+        $(".color1").removeClass("iconSelected"); $("#done").show()
+    })
+
+    $("#done").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')
@@ -279,9 +377,30 @@ fetch('./api/icons').then(res => {
     $("#getUserIcon").click(function() {
         $(`.copyForm[form=${currentForm}]`).trigger('click')
         $('#steal').show();
-        $('#playerName').focus()
+        $('#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(",")
+    })
+})
+
     $("#fetchUser").click(function () {
 
         let user = $("#playerName").val()
@@ -302,7 +421,8 @@ fetch('./api/icons').then(res => {
             $(`#${formCopy}-${info[formCopy == "cube" ? "icon" : formCopy] || 1}`).trigger('click')
             $(`#col1-${info.col1}`).trigger('click')
             $(`#col2-${info.col2}`).trigger('click')
-            $(`#col3-12`).trigger('click')
+            $(`#colG-${info.col2}`).trigger('click')
+            $(`#colW-12`).trigger('click')
             if (info.glow) $('#glowbtn').trigger('click')
         })
 })
@@ -322,30 +442,11 @@ 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
-    if (iconSettings.includes("square")) $("#result").addClass("squareIcon")
-    else $("#result").removeClass("squareIcon")
-    localStorage.iconkit = checkedSettings.join(",")
-    row3()
-})
-
 $(document).keydown(function(k) {
     if (k.keyCode == 13) {
         if ($("#steal").is(":visible")) $("#fetchUser").trigger('click')
         else if ($(".popup").is(":visible")) return
-        else $("#generateIcon").trigger('click')
+        else generateIcon()
     }
     if (k.keyCode == 27) { //esc
         if ($(".popup").is(":visible")) return $('.popup').hide()

icons/colors.json

@@ -0,0 +1,46 @@
+{ 
+
+  "0" : {"r": 125, "g": 255, "b": 0}, 
+	"1" : {"r": 0, "g": 255, "b": 0}, 
+	"2" : {"r": 0, "g": 255, "b": 125}, 
+	"3" : {"r": 0, "g": 255, "b": 255}, 
+	"4" : {"r": 0, "g": 125, "b": 255}, 
+	"5" : {"r": 0, "g": 0, "b": 255}, 
+	"6" : {"r": 125, "g": 0, "b": 255}, 
+	"7" : {"r": 255, "g": 0, "b": 255}, 
+	"8" : {"r": 255, "g": 0, "b": 125}, 
+	"9" : {"r": 255, "g": 0, "b": 0}, 
+	"10" : {"r": 255, "g": 125, "b": 0}, 
+	"11" : {"r": 255, "g": 255, "b": 0}, 
+	"12" : {"r": 255, "g": 255, "b": 255}, 
+	"13" : {"r": 185, "g": 0, "b": 255}, 
+	"14" : {"r": 255, "g": 185, "b": 0}, 
+	"15" : {"r": 0, "g": 0, "b": 0}, 
+	"16" : {"r": 0, "g": 200, "b": 255}, 
+	"17" : {"r": 175, "g": 175, "b": 175}, 
+	"18" : {"r": 90, "g": 90, "b": 90}, 
+	"19" : {"r": 255, "g": 125, "b": 125}, 
+	"20" : {"r": 0, "g": 175, "b": 75}, 
+	"21" : {"r": 0, "g": 125, "b": 125}, 
+	"22" : {"r": 0, "g": 75, "b": 175}, 
+	"23" : {"r": 75, "g": 0, "b": 175}, 
+	"24" : {"r": 125, "g": 0, "b": 125}, 
+	"25" : {"r": 175, "g": 0, "b": 75}, 
+	"26" : {"r": 175, "g": 75, "b": 0}, 
+	"27" : {"r": 125, "g": 125, "b": 0}, 
+	"28" : {"r": 75, "g": 175, "b": 0}, 
+	"29" : {"r": 255, "g": 75, "b": 0}, 
+	"30" : {"r": 150, "g": 50, "b": 0}, 
+	"31" : {"r": 150, "g": 100, "b": 0}, 
+	"32" : {"r": 100, "g": 150, "b": 0}, 
+	"33" : {"r": 0, "g": 150, "b": 100}, 
+	"34" : {"r": 0, "g": 100, "b": 150}, 
+	"35" : {"r": 100, "g": 0, "b": 150}, 
+	"36" : {"r": 150, "g": 0, "b": 100}, 
+	"37" : {"r": 150, "g": 0, "b": 0}, 
+	"38" : {"r": 0, "g": 150, "b": 0}, 
+	"39" : {"r": 0, "g": 0, "b": 150}, 
+	"40" : {"r": 125, "g": 255, "b": 175}, 
+	"41" : {"r": 125, "g": 125, "b": 255}
+
+}