Merge remote-tracking branch 'PeterHatch/single-pass-spritesmith' into develop

Conflicts:
	dist/customizer.css
	dist/habitrpg-shared.css
	dist/spritesmith.css
	dist/spritesmith.png

Gruntfile.js

@@ -11,45 +11,32 @@ module.exports = function(grunt) {
 
     /**
      * Converts our individual image files in img/spritesmith into a unified spritesheet.
-     * Note - we do two passes. One for `.customize-options.WHATEVER` for /#/options/profile/avatar, which converts
-     * skins, hair, beards, etc. into 60x60 re-positioned buttons. Then we do another pass for everything (which
-     * is 90x90 in the case of avatar sprites). This seems wrong to me, but it seems to works. FIXME
      */
     sprite:{
-      customizer: {
-        src: 'img/sprites/spritesmith/**/*.png',
-        destImg: 'dist/spritesmith.png',
-        destCSS: 'dist/customizer.css',
-        algorithm: 'binary-tree',
-        padding:1,
-        cssTemplate: 'css/css.template.mustache',
-        cssVarMap: function (sprite) {
-          // `sprite` has `name`, `image` (full path), `x`, `y`
-          //   `width`, `height`, `total_width`, `total_height`
-          // EXAMPLE: Prefix all sprite names with 'sprite-'
-          if (sprite.name.match(/hair|skin|beard|mustach|shirt|flower/) || sprite.name=='head_0') {
-            sprite.name = 'customize-option.' + sprite.name;
-            sprite.x = sprite.x + 25;
-            sprite.y = sprite.y + 15;
-            sprite.width = 60;
-            sprite.height = 60;
-          }
-          if (~sprite.name.indexOf('shirt'))
-            sprite.y = sprite.y+15; // even more for shirts
-        }
-        /*,cssOpts: {
-          cssClass: function (item) {
-            return '.' + item.name;
-          }
-        }*/
-      },
       main: {
         src: 'img/sprites/spritesmith/**/*.png',
         destImg: 'dist/spritesmith.png',
         destCSS: 'dist/spritesmith.css',
         algorithm: 'binary-tree',
         padding:1,
-        cssTemplate: 'css/css.template.mustache'
+        cssTemplate: 'css/css.template.mustache',
+        cssVarMap: function (sprite) {
+          // For hair, skins, beards, etc. we want to output a '.customize-options.WHATEVER' class, which works as a
+          // 60x60 image pointing at the proper part of the 90x90 sprite.
+          // We set up the custom info here, and the template makes use of it.
+          if (sprite.name.match(/hair|skin|beard|mustach|shirt|flower/) || sprite.name=='head_0') {
+            sprite.custom = {
+              px: {
+                offset_x: "-" + (sprite.x + 25) + "px",
+                offset_y: "-" + (sprite.y + 15) + "px",
+                width: "" + 60 + "px",
+                height: "" + 60 + "px"
+              }
+            }
+          }
+          if (~sprite.name.indexOf('shirt'))
+            sprite.custom.px.offset_y = "-" + (sprite.y + 30) + "px"; // even more for shirts
+        }
         /*,cssOpts: {
           cssClass: function (item) {
             return '.' + item.name; //'.sprite-' + item.name;
@@ -65,7 +52,6 @@ module.exports = function(grunt) {
         },
         files:{
           "dist/habitrpg-shared.css": [
-            "dist/customizer.css",
             "dist/spritesmith.css",
             "css/backer.css",
             "css/Mounts.css",

css/css.template.mustache

@@ -6,4 +6,13 @@
   height: {{px.height}};
   background-size: {{px.total_width}} {{px.total_height}};
 }
+{{#custom}}
+.customize-option.{{name}} {
+  background-image: url({{{escaped_image}}});
+  background-position: {{custom.px.offset_x}} {{custom.px.offset_y}};
+  width: {{custom.px.width}};
+  height: {{custom.px.height}};
+  background-size: {{px.total_width}} {{px.total_height}};
+}
+{{/custom}}
 {{/items}}