Sprites: only create the css which points to the CDN

gulp/gulp-sprites.js

@@ -1,15 +1,8 @@
 import gulp from 'gulp';
-import imagemin from 'gulp-imagemin';
 import spritesmith from 'gulp.spritesmith';
 import clean from 'rimraf';
-import sizeOf from 'image-size';
 import mergeStream from 'merge-stream';
 import { sync } from 'glob';
-import { each } from 'lodash';
-import vinylBuffer from 'vinyl-buffer';
-
-// https://github.com/Ensighten/grunt-spritesmith/issues/67#issuecomment-34786248
-const MAX_SPRITESHEET_SIZE = 1024 * 1024 * 3;
 
 const IMG_DIST_PATH = 'website/client/src/assets/images/sprites/';
 const CSS_DIST_PATH = 'website/client/src/assets/css/sprites/';
@@ -19,49 +12,6 @@ function checkForSpecialTreatment (name) {
   return name.match(regex) || name === 'head_0';
 }
 
-function calculateImgDimensions (img, addPadding) {
-  let dims = sizeOf(img);
-
-  const requiresSpecialTreatment = checkForSpecialTreatment(img);
-  if (requiresSpecialTreatment) {
-    const newWidth = dims.width < 90 ? 90 : dims.width;
-    const newHeight = dims.height < 90 ? 90 : dims.height;
-    dims = {
-      width: newWidth,
-      height: newHeight,
-    };
-  }
-
-  let padding = 0;
-
-  if (addPadding) {
-    padding = dims.width * 8 + dims.height * 8;
-  }
-
-  if (!dims.width || !dims.height) console.error('MISSING DIMENSIONS:', dims); // eslint-disable-line no-console
-
-  const totalPixelSize = dims.width * dims.height + padding;
-
-  return totalPixelSize;
-}
-
-function calculateSpritesheetsSrcIndicies (src) {
-  let totalPixels = 0;
-  const slices = [0];
-
-  each(src, (img, index) => {
-    const imageSize = calculateImgDimensions(img, true);
-    totalPixels += imageSize;
-
-    if (totalPixels > MAX_SPRITESHEET_SIZE) {
-      slices.push(index - 1);
-      totalPixels = imageSize;
-    }
-  });
-
-  return slices;
-}
-
 function cssVarMap (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.
@@ -85,39 +35,33 @@ function cssVarMap (sprite) {
 }
 
 function createSpritesStream (name, src) {
-  const spritesheetSliceIndicies = calculateSpritesheetsSrcIndicies(src);
   const stream = mergeStream();
 
-  each(spritesheetSliceIndicies, (start, index) => {
-    const slicedSrc = src.slice(start, spritesheetSliceIndicies[index + 1]);
-
-    const spriteData = gulp.src(slicedSrc)
+  const spriteData = gulp.src(src)
     .pipe(spritesmith({
-        imgName: `spritesmith-${name}-${index}.png`,
-        cssName: `spritesmith-${name}-${index}.css`,
+      imgName: `spritesmith-${name}.png`,
+      cssName: `spritesmith-${name}.css`,
       algorithm: 'binary-tree',
       padding: 1,
       cssTemplate: 'website/raw_sprites/css/css.template.handlebars',
       cssVarMap,
     }));
 
-    const imgStream = spriteData.img
-      .pipe(vinylBuffer())
-      .pipe(imagemin())
-      .pipe(gulp.dest(IMG_DIST_PATH));
-
   const cssStream = spriteData.css
     .pipe(gulp.dest(CSS_DIST_PATH));
 
-    stream.add(imgStream);
   stream.add(cssStream);
-  });
 
   return stream;
 }
 
 gulp.task('sprites:main', () => {
   const mainSrc = sync('habitica-images/**/*.png');
+
+  console.info({
+    mainSrc
+  });
+
   return createSpritesStream('main', mainSrc);
 });
 

website/client/src/app.vue

@@ -530,6 +530,5 @@ export default {
 <style src="intro.js/minified/introjs.min.css"></style>
 <style src="axios-progress-bar/dist/nprogress.css"></style>
 <style src="@/assets/scss/index.scss" lang="scss"></style>
-<style src="@/assets/css/sprites/spritesmith-largeSprites-0.css"></style>
 <style src="@/assets/scss/sprites.scss" lang="scss"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

website/client/src/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -1,84 +0,0 @@
-.promo_armoire_backgrounds_202010 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -639px;
-  width: 423px;
-  height: 147px;
-}
-.promo_fall_customizations {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -532px 0px;
-  width: 336px;
-  height: 207px;
-}
-.promo_fall_festival_2019 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -449px;
-  width: 360px;
-  height: 189px;
-}
-.promo_fall_festival_2020 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -361px -449px;
-  width: 360px;
-  height: 174px;
-}
-.promo_mystery_202009 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -869px -296px;
-  width: 282px;
-  height: 147px;
-}
-.promo_mystery_202010 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -869px -444px;
-  width: 282px;
-  height: 147px;
-}
-.promo_sandy_sidekicks_bundle {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -869px -148px;
-  width: 420px;
-  height: 147px;
-}
-.promo_skeleton_achievements {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -244px;
-  width: 366px;
-  height: 204px;
-}
-.promo_spooky_sparkles {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -639px;
-  width: 423px;
-  height: 147px;
-}
-.promo_take_this {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1152px -296px;
-  width: 96px;
-  height: 69px;
-}
-.promo_vampire_potions {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -869px 0px;
-  width: 423px;
-  height: 147px;
-}
-.scene_positivity {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px 0px;
-  width: 531px;
-  height: 243px;
-}
-.scene_squall {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -532px -208px;
-  width: 141px;
-  height: 169px;
-}
-.scene_strength {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -869px -592px;
-  width: 192px;
-  height: 129px;
-}

website/client/src/assets/css/sprites/spritesmith-main-1.css

@@ -1,816 +0,0 @@
-.background_halflings_house {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_hall_of_heroes {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_harvest_feast {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_harvest_fields {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_harvest_moon {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_haunted_forest {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_haunted_house {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_haunted_photo {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_heart_shaped_bubbles {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_heather_field {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_herding_sheep_in_autumn {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_holiday_hearth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_holiday_market {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_holiday_wreath {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_hot_air_balloon {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_hot_spring {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_ice_cave {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_ice_palace {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_iceberg {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_icicle_bridge {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_idyllic_cabin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_in_a_classroom {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_in_an_ancient_tomb {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_in_the_armory {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_inside_a_potion_bottle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_inside_an_ornament {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_island_waterfalls {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_jungle_canopy {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_kelp_forest {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_lake_with_floating_lanterns {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_lighthouse_shore {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_lilypad {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_magic_beanstalk {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_magical_candles {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_magical_museum {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_marble_temple {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_market {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_meandering_cave {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_medieval_kitchen {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_meteor_shower {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_midnight_castle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_midnight_clouds {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_midnight_lake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_mist_shrouded_mountain {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_mistiflying_circus {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_monster_makers_workshop {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_mountain_lake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_mountain_pyramid {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_mystical_observatory {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_night_dunes {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_ocean_sunrise {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_old_fashioned_bakery {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_on_tree_branch {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_open_waters {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_orchard {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_pagodas {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_palm_tree_with_fairy_lights {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_park_with_statue {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_pirate_flag {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_pixelists_workshop {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_potion_shop {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_productivity_plaza {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_pumpkin_carriage {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_pumpkin_patch {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_purple {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_pyramids {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_raging_river {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_rainbow_meadow {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_rainbows_end {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_rainforest {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_rainy_barnyard {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_rainy_city {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_red {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_relaxation_river {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_resting_in_the_inn {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_river_of_lava {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_rolling_hills {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_rope_bridge {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_rose_garden {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_rowboat {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_salt_lake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_sandcastle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_school_of_fish {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_scribes_workshop {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_seafarer_ship {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_seaside_cliffs {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_shimmering_ice_prism {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_shimmery_bubbles {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_slimy_swamp {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_snowglobe {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_snowman_army {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_snowy_day_fireplace {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_snowy_farm {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_snowy_pines {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_snowy_sunrise {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_south_pole {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_sparkling_snowflake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_spider_web {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_spiral_staircase {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_splash_in_a_puddle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_spooky_hotel {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_spooky_scarecrow_field {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_spring_rain {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_spring_thaw {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_stable {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_stained_glass {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_starry_skies {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_starry_winter_night {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_stoikalm_volcanoes {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_stone_circle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_stone_tower {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_stormy_rooftops {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_stormy_ship {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_strange_sewers {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_strawberry_patch {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_succulent_garden {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_summer_fireworks {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_sunken_ship {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_sunset_meadow {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -1184px;
-  width: 141px;
-  height: 147px;
-}
-.background_sunset_oasis {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -1332px;
-  width: 141px;
-  height: 147px;
-}
-.background_sunset_savannah {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: 0px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_swarming_darkness {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -142px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_swimming_among_jellyfish {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -284px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_tar_pits {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -426px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_tavern {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -568px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_tea_party {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -710px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_terraced_rice_field {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -852px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_throne_room {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -994px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_thunderstorm {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1136px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_tide_pool {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1278px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_tornado {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1420px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_toymakers_workshop {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1562px -1480px;
-  width: 141px;
-  height: 147px;
-}
-.background_training_grounds {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_treasure_room {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -148px;
-  width: 141px;
-  height: 147px;
-}
-.background_tree_roots {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_treehouse {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -444px;
-  width: 141px;
-  height: 147px;
-}

website/client/src/assets/css/sprites/spritesmith-main-15.css

@@ -1,396 +0,0 @@
-.quest_alligator {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1322px -1112px;
-  width: 201px;
-  height: 213px;
-}
-.quest_amber {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_armadillo {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_atom1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1082px -1332px;
-  width: 250px;
-  height: 150px;
-}
-.quest_atom2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -642px -1534px;
-  width: 207px;
-  height: 138px;
-}
-.quest_atom3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -211px -1534px;
-  width: 216px;
-  height: 180px;
-}
-.quest_axolotl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_badger {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_basilist {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -191px -1721px;
-  width: 189px;
-  height: 141px;
-}
-.quest_beetle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1332px;
-  width: 204px;
-  height: 201px;
-}
-.quest_blackPearl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px 0px;
-  width: 216px;
-  height: 216px;
-}
-.quest_bronze {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_bunny {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1534px;
-  width: 210px;
-  height: 186px;
-}
-.quest_butterfly {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_cheetah {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_cow {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1757px 0px;
-  width: 174px;
-  height: 213px;
-}
-.quest_dilatory {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_dilatoryDistress1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -1085px;
-  width: 210px;
-  height: 210px;
-}
-.quest_dilatoryDistress2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1757px -422px;
-  width: 150px;
-  height: 150px;
-}
-.quest_dilatoryDistress3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_dilatory_derby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_dolphin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_dustbunnies {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_egg {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1757px -214px;
-  width: 165px;
-  height: 207px;
-}
-.quest_evilsanta {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1757px -724px;
-  width: 118px;
-  height: 131px;
-}
-.quest_evilsanta2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_falcon {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_ferret {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_fluorite {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_frog {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -1112px;
-  width: 221px;
-  height: 213px;
-}
-.quest_ghost_stag {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_goldenknight1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_goldenknight2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1333px -1332px;
-  width: 250px;
-  height: 150px;
-}
-.quest_goldenknight3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px 0px;
-  width: 219px;
-  height: 231px;
-}
-.quest_gryphon {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -648px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_guineapig {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -672px;
-  width: 219px;
-  height: 219px;
-}
-.quest_harpy {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_hedgehog {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -205px -1332px;
-  width: 219px;
-  height: 186px;
-}
-.quest_hippo {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_horse {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_kangaroo {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_kraken {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -865px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_lostMasterclasser1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -892px;
-  width: 219px;
-  height: 219px;
-}
-.quest_lostMasterclasser2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -892px;
-  width: 219px;
-  height: 219px;
-}
-.quest_lostMasterclasser3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -892px;
-  width: 219px;
-  height: 219px;
-}
-.quest_mayhemMistiflying1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1757px -573px;
-  width: 150px;
-  height: 150px;
-}
-.quest_mayhemMistiflying2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -892px;
-  width: 219px;
-  height: 219px;
-}
-.quest_mayhemMistiflying3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -892px;
-  width: 219px;
-  height: 219px;
-}
-.quest_monkey {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -892px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moon1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -217px;
-  width: 216px;
-  height: 216px;
-}
-.quest_moon2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moon3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_nudibranch {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -434px;
-  width: 216px;
-  height: 216px;
-}
-.quest_octopus {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -425px -1332px;
-  width: 222px;
-  height: 177px;
-}
-.quest_onyx {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_owl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_peacock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -651px;
-  width: 216px;
-  height: 216px;
-}
-.quest_penguin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1721px;
-  width: 190px;
-  height: 183px;
-}
-.quest_pterodactyl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rat {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_robot {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -868px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -428px -1534px;
-  width: 213px;
-  height: 174px;
-}

website/client/src/assets/scss/sprites.scss

@@ -1,5 +1,3 @@
 @import url("../css/sprites.css");
+@import url("../css/sprites/spritesmith-main.css");
 
-@for $i from 0 through 31 {
-  @import url("../css/sprites/spritesmith-main-#{$i}.css");
-}

website/raw_sprites/css/css.template.handlebars

@@ -1,14 +1,12 @@
 {{#sprites}}
 .{{name}} {
-  background-image: url('~@/assets/images/sprites/{{{escaped_image}}}');
-  background-position: {{px.offset_x}} {{px.offset_y}};
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/{{{name}}}.png');
   width: {{px.width}};
   height: {{px.height}};
 }
 {{#if custom}}
 .customize-option.{{name}} {
-  background-image: url('~@/assets/images/sprites/{{{escaped_image}}}');
-  background-position: {{custom.px.offsetX}} {{custom.px.offsetY}};
+  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/{{{name}}}.png');
   width: {{custom.px.width}};
   height: {{custom.px.height}};
 }