Merge pull request #4663 from HabitRPG/common-convert

HabitRPG-Shared Migration

.bowerrc

@@ -1,8 +1,8 @@
 {
-  "directory": "public/bower_components",
+  "directory": "website/public/bower_components",
   "storage" : {
     "packages" : ".bower-cache",
     "registry" : ".bower-registry"
   },
   "tmp" : ".bower-tmp"
-}
+}

.gitignore

@@ -1,13 +1,14 @@
 .DS_Store
-public/gen
+website/public/gen
+website/public/common
 node_modules
 *.swp
 .idea*
 config.json
 npm-debug.log
 lib
-public/bower_components
-build
+website/public/bower_components
+website/build
 newrelic_agent.log
 .bower-tmp
 .bower-registry
@@ -19,5 +20,6 @@ src/*/*.map
 src/*/*/*.map
 test/*.js
 test/*.map
-public/docs
+website/public/docs
 *.sublime-workspace
+coverage.html

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 node_js:
   - '0.10'
-services:
   - mongodb
 before_script:
   - 'npm install -g grunt-cli mocha'

Gruntfile.js

@@ -2,6 +2,57 @@
 var _ = require('lodash');
 module.exports = function(grunt) {
 
+  // Ported from shared
+  // So this sucks. Mobile Safari can't render image files > 1024x1024*3, so we have to break it down to multiple
+  // files in this hack approach. See https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
+  var images = grunt.file.expand('common/img/sprites/spritesmith/**/*.png');
+//  var totalDims = {width:0,height:0};
+//  _.each(images, function(img){
+//    var dims = sizeOf(img);
+//    if(!dims.width || !dims.height) console.log(dims);
+//    totalDims.width += dims.width;
+//    totalDims.height += dims.height;
+//  })
+  var COUNT = 6;//Math.ceil( (totalDims.width * totalDims.height) / (1024*1024*3) );
+  //console.log({totalDims:totalDims,COUNT:COUNT});
+
+  var sprite = {};
+  _.times(COUNT, function(i){
+    var sliced = images.slice(i * (images.length/COUNT), (i+1) * images.length/COUNT)
+    sprite[''+i] = {
+      src: sliced,
+      dest: 'common/dist/sprites/spritesmith'+i+'.png',
+      destCss: 'common/dist/sprites/spritesmith'+i+'.css',
+      engine: 'phantomjssmith',
+      algorithm: 'binary-tree',
+      padding:1,
+      cssTemplate: 'common/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;
+       }
+       }*/
+    }
+  });
+
+
   // Project configuration.
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
@@ -37,7 +88,26 @@ module.exports = function(grunt) {
     },
 
     clean: {
-      build: ['build']
+      build: ['website/build'],
+      sprite: ['common/dist/sprites']
+    },
+
+    sprite: sprite,
+
+    cssmin: {
+      dist: {
+        options: {
+          report: 'gzip'
+        },
+        files:{
+          "common/dist/sprites/habitrpg-shared.css": [
+            "common/dist/sprites/spritesmith*.css",
+            "common/css/backer.css",
+            "common/css/Mounts.css",
+            "common/css/index.css"
+          ]
+        }
+      }
     },
 
     stylus: {
@@ -45,23 +115,34 @@ module.exports = function(grunt) {
         options: {
           compress: false, // AFTER
           'include css': true,
-          paths: ['public']
+          paths: ['website/public']
         },
         files: {
-          'build/app.css': ['public/css/index.styl'],
-          'build/static.css': ['public/css/static.styl']
+          'website/build/app.css': ['website/public/css/index.styl'],
+          'website/build/static.css': ['website/public/css/static.styl']
         }
       }
     },
 
+    browserify: {
+      dist: {
+        src: ["common/index.js"],
+        dest: "common/dist/scripts/habitrpg-shared.js"
+      },
+      options: {
+        transform: ['coffeeify']
+        //debug: true Huge data uri source map (400kb!)
+      }
+    },
+
     copy: {
       build: {
         files: [
-          {expand: true, cwd: 'public/', src: 'favicon.ico', dest: 'build/'},
-          {expand: true, cwd: 'public/', src: 'bower_components/habitrpg-shared/dist/spritesmith*.png', dest: 'build/'},
-          {expand: true, cwd: 'public/', src: 'bower_components/habitrpg-shared/img/sprites/backer-only/*.gif', dest: 'build/'},
-          {expand: true, cwd: 'public/', src: 'bower_components/habitrpg-shared/img/sprites/npc_ian.gif', dest: 'build/'},
-          {expand: true, cwd: 'public/', src: 'bower_components/bootstrap/dist/fonts/*', dest: 'build/'}
+          {expand: true, cwd: 'website/public/', src: 'favicon.ico', dest: 'website/build/'},
+          {expand: true, cwd: '', src: 'common/dist/sprites/spritesmith*.png', dest: 'website/build/'},
+          {expand: true, cwd: '', src: 'common/img/sprites/backer-only/*.gif', dest: 'website/build/'},
+          {expand: true, cwd: '', src: 'common/img/sprites/npc_ian.gif', dest: 'website/build/'},
+          {expand: true, cwd: 'website/public/', src: 'bower_components/bootstrap/dist/fonts/*', dest: 'website/build/'}
         ]
       }
     },
@@ -73,13 +154,15 @@ module.exports = function(grunt) {
           fileNameFormat: '${name}-${hash}.${ext}'
         },
         src: [
-          'build/*.js', 'build/*.css', 'build/favicon.ico',
-          'build/bower_components/habitrpg-shared/dist/*.png',
-          'build/bower_components/habitrpg-shared/img/sprites/backer-only/*.gif',
-          'build/bower_components/habitrpg-shared/img/sprites/npc_ian.gif',
-          'build/bower_components/bootstrap/dist/fonts/*'
+          'website/build/*.js', 
+          'website/build/*.css', 
+          'website/build/favicon.ico',
+          'website/build/common/dist/sprites/*.png',
+          'website/build/common/img/sprites/backer-only/*.gif',
+          'website/build/common/img/sprites/npc_ian.gif',
+          'website/build/bower_components/bootstrap/dist/fonts/*'
         ],
-        dest: 'build/*.css'
+        dest: 'website/build/*.css'
       }
     },
 
@@ -91,7 +174,7 @@ module.exports = function(grunt) {
 
     watch: {
       dev: {
-        files: ['public/**/*.styl'], // 'public/**/*.js' Not needed because not in production
+        files: ['website/public/**/*.styl'], // 'public/**/*.js' Not needed because not in production
         tasks:  [ 'build:dev' ],
         options: {
           nospawn: true
@@ -105,27 +188,32 @@ module.exports = function(grunt) {
         logConcurrentOutput: true
       }
     }
-
   });
 
   //Load build files from public/manifest.json
   grunt.registerTask('loadManifestFiles', 'Load all build files from public/manifest.json', function(){
-    var files = grunt.file.readJSON('./public/manifest.json');
+    var files = grunt.file.readJSON('./website/public/manifest.json');
     var uglify = {};
     var cssmin = {};
 
     _.each(files, function(val, key){
 
-      var js = uglify['build/' + key + '.js'] = [];
+      var js = uglify['website/build/' + key + '.js'] = [];
 
-      _.each(files[key]['js'], function(val){
-        js.push('public/' + val);
+      _.each(files[key].js, function(val){
+        var path = "./";
+        if( val.indexOf('common/') == -1) 
+          path = './website/public/';
+        js.push(path + val);
       });
 
-      var css = cssmin['build/' + key + '.css'] = [];
+      var css = cssmin['website/build/' + key + '.css'] = [];
 
-      _.each(files[key]['css'], function(val){
-        var path = (val == 'app.css' || val == 'static.css') ? 'build/' : 'public/';
+      _.each(files[key].css, function(val){
+        var path = "./";
+        if( val.indexOf('common/') == -1) {
+          path = (val == 'app.css' || val == 'static.css') ?  './website/build/' : './website/public/';
+        } 
         css.push(path + val)
       });
 
@@ -136,16 +224,18 @@ module.exports = function(grunt) {
 
     grunt.config.set('cssmin.build.files', cssmin);
     // Rewrite urls to relative path
-    grunt.config.set('cssmin.build.options', {'target': 'public/css/whatever-css.css'});
+    grunt.config.set('cssmin.build.options', {'target': 'website/public/css/whatever-css.css'});
   });
 
   // Register tasks.
-  grunt.registerTask('build:prod', ['loadManifestFiles', 'clean:build', 'uglify', 'stylus', 'cssmin', 'copy:build', 'hashres']);
-  grunt.registerTask('build:dev', ['stylus']);
+  grunt.registerTask('compile:sprites', ['clean:sprite', 'sprite', 'cssmin']);
+  grunt.registerTask('build:prod', ['loadManifestFiles', 'clean:build', 'browserify', 'uglify', 'stylus', 'cssmin', 'copy:build', 'hashres']);
+  grunt.registerTask('build:dev', ['browserify', 'stylus']);
 
   grunt.registerTask('run:dev', [ 'build:dev', 'concurrent' ]);
 
   // Load tasks
+  grunt.loadNpmTasks('grunt-browserify');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-stylus');
@@ -154,6 +244,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-nodemon');
   grunt.loadNpmTasks('grunt-concurrent');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-spritesmith');
   grunt.loadNpmTasks('grunt-hashres');
   grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('git-changelog');

Procfile

@@ -1 +1 @@
-web: ./node_modules/.bin/grunt build:prod;./node_modules/.bin/grunt nodemon;
+web: ./node_modules/.bin/grunt nodemon;

bower.json

@@ -27,7 +27,6 @@
     "bootstrap": "~3.1.0",
     "bootstrap-growl": "git://github.com/ifightcrime/bootstrap-growl.git#master",
     "bootstrap-tour": "~0.10.1",
-    "habitrpg-shared": "git://github.com/HabitRPG/habitrpg-shared.git#develop",
     "BrowserQuest": "git://github.com/browserquest/BrowserQuest.git",
     "github-buttons": "git://github.com/mdo/github-buttons.git",
     "marked": "~0.2.9",

common/README.md

@@ -0,0 +1,9 @@
+# Common
+
+Shared resources useful for the multiple HabitRPG repositories, that way all the repositories remain in-sync with common characteristics. Includes things like:
+
+ * Assets - sprites, images, etc
+ * CSS - especially, esp. sprite-sheet mapping
+ * Algorithms - level up algorithm, scoring functions, etc
+ * View helper functions that may come in handy for multiple client MVCs
+ * Item definitions - weapons, armor, pets 

common/css/backer.css

@@ -0,0 +1,60 @@
+/* These sprites are oversized until a move to 105 avatar box happens*/
+
+/* Backer */
+.weapon_special_0, .head_special_0 {
+  width: 105px;
+  height: 105px;
+  margin-left: -3px;
+  margin-top: -18px;
+}
+.slim_armor_special_0, .broad_armor_special_0, .shield_special_0 {
+  width: 90px;
+  height: 90px;
+}
+
+/* Critical */
+.weapon_special_critical {
+  background: url("/common/img/sprites/backer-only/weapon_special_critical.gif") no-repeat;
+  width: 90px;
+  height: 90px;
+  margin-left:-12px;
+  margin-top:12px;
+}
+
+/* This is oversized until a move to 105 avatar box happens*/
+.weapon_special_1 {
+  margin-left: -12px;
+}
+.broad_armor_special_1, .slim_armor_special_1, .head_special_1 {
+  width: 90px;
+  height: 90px;
+}
+
+.head_special_0 {
+  background: url("/common/img/sprites/backer-only/BackerOnly-Equip-ShadeHelmet.gif") no-repeat;
+}
+.head_special_1 {
+  background: url("/common/img/sprites/backer-only/ContributorOnly-Equip-CrystalHelmet.gif") no-repeat;
+  margin-top: 3px;
+}
+
+.broad_armor_special_0,.slim_armor_special_0 {
+  background: url("/common/img/sprites/backer-only/BackerOnly-Equip-ShadeArmor.gif") no-repeat;
+}
+.broad_armor_special_1,.slim_armor_special_1 {
+  background: url("/common/img/sprites/backer-only/ContributorOnly-Equip-CrystalArmor.gif") no-repeat;
+}
+
+.shield_special_0 {
+  background: url("/common/img/sprites/backer-only/BackerOnly-Shield-TormentedSkull.gif") no-repeat;
+}
+
+.weapon_special_0 {
+  background: url("/common/img/sprites/backer-only/BackerOnly-Weapon-DarkSoulsBlade.gif") no-repeat;
+}
+
+.Pet-Wolf-Cerberus {
+  width: 105px;
+  height: 72px;
+  background: url("/common/img/sprites/backer-only/BackerOnly-Pet-CerberusPup.gif") no-repeat;
+}

common/css/css.template.mustache

@@ -0,0 +1,16 @@
+{{#items}}
+.{{name}} {
+  background-image: url({{{escaped_image}}});
+  background-position: {{px.offset_x}} {{px.offset_y}};
+  width: {{px.width}};
+  height: {{px.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}};
+}
+{{/custom}}
+{{/items}}

common/css/index.css

@@ -0,0 +1,47 @@
+/*[class*='Pet_'] {
+  margin-left: 1.25em;
+}*/
+
+/* Comment out for holiday events */
+.npc_ian {
+  background: url("/common/img/sprites/npc_ian.gif") no-repeat;
+  width: 78px;
+  height: 135px;
+} 
+
+.Gems {
+  display:inline-block;
+  margin-right:5px;
+  border-style:none;
+  margin-left:0px;
+  margin-top:2px;
+}
+
+.inline-gems {
+  vertical-align: middle;
+  margin-left: 0px;
+  display: inline-block;
+}
+
+/* Both */
+.customize-menu .locked {
+  background-color: #727272;
+}
+
+/* FIXME figure out how to handle customize menu!! */
+/*.customize-menu .f_head_0       {width: 60px; height: 60px; background-position: -1917px -9px;}*/
+
+.achievement {
+  float:left;
+  clear:right;
+  margin-right: 10px;
+}
+
+[class*="Mount_Head_"], [class*="Mount_Body_"]{
+  margin-top:18px; /* Sprite accommodates 105x123 box */
+}
+
+.Pet_Currency_Gem {
+  margin-top: 5px;
+  margin-bottom: 5px
+}