Merge branch 'release' into develop

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "4.147.3",
+  "version": "4.148.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.147.3",
+  "version": "4.148.0",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.10.3",

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

@@ -1,10 +1,10 @@
-.promo_armoire_backgrounds_202006 {
+.promo_armoire_backgrounds_202007 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: -340px -524px;
   width: 423px;
   height: 147px;
 }
-.promo_mystery_202006 {
+.promo_mystery_202007 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: -424px -735px;
   width: 282px;

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

@@ -575,6 +575,12 @@
   height: 147px;
 }
 .background_beach {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1420px -740px;
+  width: 141px;
+  height: 147px;
+}
+.background_beach_cabana {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -592px;
   width: 141px;
@@ -582,635 +588,629 @@
 }
 .background_beehive {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1420px -740px;
+  background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
 .background_bell_tower {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1420px -888px;
+  background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_beside_well {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1420px -1036px;
+  background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
 .background_birch_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1420px -1184px;
+  background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
 .background_birthday_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px 0px;
+  background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_blacksmithy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1332px;
+  background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_blizzard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1332px;
+  background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_blossoming_desert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -1332px;
+  background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_blue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -1332px;
+  background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -1332px;
+  background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_bug_covered_log {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -1332px;
+  background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_buried_treasure {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -1332px;
+  background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_butterfly_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -1332px;
+  background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_champions_colosseum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -1332px;
+  background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_cherry_trees {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1420px -1332px;
+  background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
 .background_chessboard_land {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px 0px;
+  background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
 .background_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -148px;
+  background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
 .background_coral_reef {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -296px;
+  background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
 .background_cornfields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -444px;
+  background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_barn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -592px;
+  background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_bedroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -740px;
+  background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_library {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -888px;
+  background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_creepy_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -1036px;
+  background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
 .background_crosscountry_ski_trail {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -1184px;
+  background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_crystal_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1562px -1332px;
+  background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
 .background_dark_deep {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1480px;
+  background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
 .background_deep_mine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1480px;
+  background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
 .background_deep_sea {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1480px;
+  background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
 .background_desert_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1332px;
+  background-position: -1278px -444px;
   width: 141px;
   height: 147px;
 }
 .background_desert_with_snow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -444px;
+  background-position: -1278px -296px;
   width: 141px;
   height: 147px;
 }
 .background_dilatory_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -296px;
+  background-position: -1278px -148px;
   width: 141px;
   height: 147px;
 }
 .background_dilatory_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -148px;
+  background-position: -1278px 0px;
   width: 141px;
   height: 147px;
 }
 .background_dilatory_ruins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px 0px;
+  background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_distant_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -1036px;
+  background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_dojo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -1036px;
+  background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_drifting_raft {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -1036px;
+  background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_driving_a_coach {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -1036px;
+  background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_driving_a_sleigh {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -1036px;
+  background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_duck_pond {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -1036px;
+  background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_dungeon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1036px;
+  background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_dusty_canyons {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1036px;
+  background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_elegant_balcony {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1036px;
+  background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
 .background_elegant_ballroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -888px;
+  background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
 .background_fairy_ring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -740px;
+  background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
 .background_fantastical_shoe_store {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -592px;
+  background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
 .background_farmers_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -444px;
+  background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
 .background_farmhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -296px;
+  background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
 .background_fiber_arts_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -148px;
+  background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
 .background_field_with_colored_eggs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px 0px;
+  background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
 .background_floating_islands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -888px;
+  background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
 .background_floral_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -888px;
+  background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
 .background_flower_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -888px;
+  background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
 .customize-option.background_flower_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -735px -903px;
+  background-position: -593px -903px;
   width: 60px;
   height: 60px;
 }
 .background_flying_in_a_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -888px;
+  background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_a_field_of_wildflowers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -888px;
+  background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
 .customize-option.background_flying_over_a_field_of_wildflowers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -451px -903px;
+  background-position: -309px -903px;
   width: 60px;
   height: 60px;
 }
 .background_flying_over_an_ancient_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -888px;
+  background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_icy_steppes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -888px;
+  background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_rocky_canyon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -888px;
+  background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_snowy_mountains {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -740px;
+  background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_tropical_islands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -592px;
+  background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
 .background_foggy_moor {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -444px;
+  background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
 .background_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -296px;
+  background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
 .background_frigid_peak {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -148px;
+  background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
 .background_frosty_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px 0px;
+  background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
 .background_frozen_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -740px;
+  background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
 .background_garden_shed {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -740px;
+  background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
 .background_gazebo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -740px;
+  background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
 .background_giant_birdhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -740px;
+  background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
 .background_giant_book {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -740px;
+  background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
 .background_giant_dandelions {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -740px;
+  background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
 .background_giant_florals {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -740px;
+  background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
 .background_giant_seashell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -592px;
+  background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
 .background_giant_wave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -444px;
+  background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
 .background_glowing_mushroom_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -296px;
+  background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
 .background_gorgeous_greenhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -148px;
+  background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
 .background_grand_staircase {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px 0px;
+  background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
 .background_graveyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -592px;
+  background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
 .background_green {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -592px;
+  background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
 .background_guardian_statues {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -592px;
+  background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
 .background_gumdrop_land {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -592px;
+  background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
 .background_habit_city_rooftops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -592px;
+  background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
 .background_habit_city_streets {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -592px;
+  background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
 .background_halflings_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -444px;
+  background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
 .background_hall_of_heroes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -296px;
+  background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
 .background_harvest_feast {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -148px;
+  background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
 .background_harvest_fields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px 0px;
+  background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
 .background_harvest_moon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -444px;
+  background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
 .background_haunted_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -444px;
+  background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
 .background_heather_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -444px;
+  background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
 .background_holiday_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -444px;
+  background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
 .background_holiday_wreath {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -444px;
+  background-position: -568px -296px;
   width: 141px;
   height: 147px;
 }
 .background_hot_air_balloon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -296px;
+  background-position: -568px -148px;
   width: 141px;
   height: 147px;
 }
 .background_ice_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -148px;
+  background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
 .background_iceberg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px 0px;
+  background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
 .background_idyllic_cabin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -296px;
+  background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
 .background_in_a_classroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -296px;
+  background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
 .background_in_an_ancient_tomb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -296px;
+  background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
 .background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -296px;
+  background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
 .background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -148px;
+  background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
 .background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px 0px;
+  background-position: -284px -148px;
   width: 141px;
   height: 147px;
 }
 .background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -148px;
+  background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
 .background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -148px;
+  background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
 .background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -148px;
+  background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
 .background_magical_candles {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px 0px;
   width: 141px;

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

@@ -1,30 +1,48 @@
+.banner_flair_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1757px -856px;
+  width: 69px;
+  height: 18px;
+}
+.phobia_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: 0px -1510px;
+  width: 201px;
+  height: 195px;
+}
+.quest_alligator {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1540px -1079px;
+  width: 201px;
+  height: 213px;
+}
 .quest_amber {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -220px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_armadillo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -660px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_atom1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1333px -1332px;
+  background-position: -657px -1332px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -642px -1534px;
+  background-position: -1159px -1332px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -211px -1534px;
+  background-position: -413px -1510px;
   width: 216px;
   height: 180px;
 }
@@ -42,13 +60,13 @@
 }
 .quest_basilist {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -191px -1721px;
+  background-position: -844px -1510px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1332px;
+  background-position: -1102px -1112px;
   width: 204px;
   height: 201px;
 }
@@ -60,7 +78,7 @@
 }
 .quest_bunny {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1534px;
+  background-position: -202px -1510px;
   width: 210px;
   height: 186px;
 }
@@ -78,109 +96,109 @@
 }
 .quest_cow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px 0px;
+  background-position: -1757px 0px;
   width: 174px;
   height: 213px;
 }
 .quest_dilatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -672px;
+  background-position: -880px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatoryDistress1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -1082px;
+  background-position: -1540px -868px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -573px;
+  background-position: -1757px -573px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -672px;
+  background-position: -440px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -440px;
+  background-position: -880px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_dolphin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -672px;
+  background-position: -660px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px 0px;
+  background-position: -220px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -214px;
+  background-position: -1757px -214px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -724px;
+  background-position: -1757px -724px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -660px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -892px;
+  background-position: -1320px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -892px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_fluorite {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -892px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_frog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px 0px;
+  background-position: -880px -1112px;
   width: 221px;
   height: 213px;
 }
 .quest_ghost_stag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -892px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -892px;
+  background-position: -880px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1082px -1332px;
+  background-position: -908px -1332px;
   width: 250px;
   height: 150px;
 }
@@ -192,205 +210,187 @@
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -648px -1332px;
+  background-position: -440px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px 0px;
+  background-position: -1320px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -880px;
+  background-position: -1320px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -205px -1332px;
+  background-position: -1307px -1112px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1112px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -1112px;
+  background-position: -220px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -1112px;
+  background-position: -440px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -865px -1332px;
+  background-position: -223px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -1112px;
+  background-position: -1320px -880px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -1112px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1112px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -422px;
+  background-position: -1757px -422px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -440px;
+  background-position: 0px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px 0px;
+  background-position: 0px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -892px;
+  background-position: -440px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -648px;
+  background-position: -1540px -651px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -440px;
+  background-position: -660px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -220px;
+  background-position: -1320px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -672px;
+  background-position: -1100px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -672px;
+  background-position: -440px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -220px;
+  background-position: -220px -232px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -865px;
+  background-position: -1540px -434px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -425px -1332px;
+  background-position: 0px -1332px;
   width: 222px;
   height: 177px;
 }
 .quest_owl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -452px;
+  background-position: 0px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -431px;
+  background-position: -1540px 0px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1721px;
+  background-position: 0px -1706px;
   width: 190px;
   height: 183px;
 }
 .quest_pterodactyl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -452px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_rat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -220px;
+  background-position: -220px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_robot {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -232px;
+  background-position: -660px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_rock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -214px;
+  background-position: -1540px -217px;
   width: 216px;
   height: 216px;
 }
 .quest_rooster {
   background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -428px -1534px;
+  background-position: -630px -1510px;
   width: 213px;
   height: 174px;
 }
-.quest_ruby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sabretooth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_seaserpent {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -1112px;
-  width: 219px;
-  height: 219px;
-}

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

@@ -1,414 +1,510 @@
-.Pet-Wolf-RoyalPurple {
+.Pet-Wolf-Dessert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -82px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Ruby {
+.Pet-Wolf-Ember {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -492px -200px;
+  background-position: -164px -500px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-SandSculpture {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -328px -100px;
-  width: 81px;
-  height: 99px;
-}
-.Pet-Wolf-Shade {
+.Pet-Wolf-Fairy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -164px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Shadow {
+.Pet-Wolf-Floral {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: 0px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Shimmer {
+.Pet-Wolf-Fluorite {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -82px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Silver {
+.Pet-Wolf-Frost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -164px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Skeleton {
+.Pet-Wolf-Ghost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -246px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Spooky {
+.Pet-Wolf-Glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -246px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-StarryNight {
+.Pet-Wolf-Glow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: 0px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Sunshine {
+.Pet-Wolf-Golden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -82px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Thunderstorm {
+.Pet-Wolf-Holly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -164px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Veggie {
+.Pet-Wolf-IcySnow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -246px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Veteran {
+.Pet-Wolf-Peppermint {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -328px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Watery {
+.Pet-Wolf-Rainbow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: 0px 0px;
+  background-position: -328px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-White {
+.Pet-Wolf-Red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -328px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Zombie {
+.Pet-Wolf-RoseQuartz {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: 0px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Base {
+.Pet-Wolf-RoyalPurple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -82px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-CottonCandyBlue {
+.Pet-Wolf-Ruby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -164px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-CottonCandyPink {
+.Pet-Wolf-SandSculpture {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -246px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Desert {
+.Pet-Wolf-Shade {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -328px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Golden {
+.Pet-Wolf-Shadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -410px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Red {
+.Pet-Wolf-Shimmer {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -410px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Shade {
+.Pet-Wolf-Silver {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -410px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Skeleton {
+.Pet-Wolf-Skeleton {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -410px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-White {
+.Pet-Wolf-Spooky {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -492px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Zombie {
+.Pet-Wolf-StarryNight {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -492px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet_HatchingPotion_Amber {
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
   background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -315px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Aquatic {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: 0px -400px;
+  background-position: -552px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Aurora {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -69px -400px;
+  background-position: -384px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Base {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -138px -400px;
+  background-position: -453px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_BirchBark {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -207px -400px;
+  background-position: -522px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Bronze {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -276px -400px;
+  background-position: -656px 0px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Celestial {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -345px -400px;
+  background-position: -656px -69px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_CottonCandyBlue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: 0px -607px;
+  background-position: -656px -138px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_CottonCandyPink {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -483px -400px;
+  background-position: -656px -207px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Cupid {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: 0px -469px;
+  background-position: -656px -276px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Desert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -69px -469px;
+  background-position: -656px -345px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ember {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -138px -469px;
+  background-position: -656px -414px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Fairy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -207px -469px;
+  background-position: -656px -483px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Floral {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -276px -469px;
+  background-position: 0px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Fluorite {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -345px -469px;
+  background-position: -69px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Frost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -414px -469px;
+  background-position: -138px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ghost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -483px -469px;
+  background-position: -207px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px 0px;
+  background-position: -276px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Glow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px -69px;
+  background-position: -345px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Golden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px -138px;
+  background-position: -414px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Holly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px -207px;
+  background-position: -483px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_IcySnow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px -276px;
+  background-position: -246px -500px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Peppermint {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px -345px;
+  background-position: -621px -600px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Purple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -574px -414px;
+  background-position: -725px 0px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Rainbow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: 0px -538px;
+  background-position: -725px -69px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -69px -538px;
+  background-position: -725px -138px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_RoseQuartz {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -138px -538px;
+  background-position: -725px -207px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_RoyalPurple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -207px -538px;
+  background-position: -725px -276px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ruby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -276px -538px;
+  background-position: -725px -345px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_SandSculpture {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -345px -538px;
+  background-position: -725px -414px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shade {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -414px -538px;
+  background-position: -725px -483px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -483px -538px;
+  background-position: -725px -552px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shimmer {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -552px -538px;
+  background-position: 0px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Silver {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px 0px;
+  background-position: -69px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Skeleton {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -69px;
+  background-position: -138px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Spooky {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -138px;
+  background-position: -207px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_StarryNight {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -207px;
+  background-position: -276px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Sunshine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -276px;
+  background-position: -345px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -345px;
+  background-position: -414px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Watery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -414px;
+  background-position: -483px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_White {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -643px -483px;
+  background-position: -552px -669px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Zombie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
-  background-position: -414px -400px;
+  background-position: -621px -669px;
   width: 68px;
   height: 68px;
 }

website/common/locales/en/backgrounds.json

@@ -603,6 +603,14 @@
   "backgroundVikingShipText": "Viking Ship",
   "backgroundVikingShipNotes": "Set sail for adventure aboard a Viking Ship.",
 
+  "backgrounds072020": "SET 74: Released July 2020",
+  "backgroundBeachCabanaText": "Beach Cabana",
+  "backgroundBeachCabanaNotes": "Relax in the shade of a Beach Cabana.",
+  "backgroundSwimmingAmongJellyfishText": "Swimming Among Jellyfish",
+  "backgroundSwimmingAmongJellyfishNotes": "Thrill with beauty and danger Swimming Among Jellyfish.",
+  "backgroundUnderwaterRuinsText": "Underwater Ruins",
+  "backgroundUnderwaterRuinsNotes": "Explore Underwater Ruins sunk long ago.",
+
   "timeTravelBackgrounds": "Steampunk Backgrounds",
   "backgroundAirshipText": "Airship",
   "backgroundAirshipNotes": "Become a sky sailor on board your very own Airship.",

website/common/locales/en/gear.json

@@ -501,6 +501,8 @@
   "weaponArmoireFiddlersBowNotes": "You can coax music out of anything with this! ...A violin might work best, though. Increases Strength by <%= str %>. Enchanted Armoire: Fiddler Set (Item 3 of 4).",
   "weaponArmoireBeachFlagText": "Beach Flag",
   "weaponArmoireBeachFlagNotes": "Rally the troops around your sandcastle and let everyone know where to come for help! Increases Perception by <%= per %>. Enchanted Armoire: Lifeguard Set (Item 1 of 3).",
+  "weaponArmoireHandyHookText": "Handy Hook",
+  "weaponArmoireHandyHookNotes": "Who needs opposable thumbs? This hook is “handy” enough for anyone. Increases Strength by <%= str %>. Enchanted Armoire: Pirate Set (Item 1 of 3).",
 
   "armor": "armor",
   "armorCapitalized": "Armor",
@@ -1078,6 +1080,8 @@
   "armorArmoireBoxArmorNotes": "Box Armor: It fits, therefore you sits... uh, therefore you wear it into battle, like the bold knight you are! Increases Perception and Constitution by <%= attrs %> each. Enchanted Armoire: Paper Knight Set (Item 3 of 3).",
   "armorArmoireFiddlersCoatText": "Fiddler's Coat",
   "armorArmoireFiddlersCoatNotes": "A practical outfit to give you plenty of room to move! Increases Constitution by <%= con %>. Enchanted Armoire: Fiddler Set (Item 2 of 4).",
+  "armorArmoirePirateOutfitText": "Pirate Outfit",
+  "armorArmoirePirateOutfitNotes": "Avast, ye landlubbers! The perfect outfit for swabbing the deck and counting your spoils. Increases Constitution and Intelligence by <%= attrs %> each. Enchanted Armoire: Pirate Set (Item 2 of 3).",
 
   "headgear": "helm",
   "headgearCapitalized": "Headgear",
@@ -1963,6 +1967,8 @@
   "shieldArmoireFiddleNotes": "A perfect instrument that always strikes the right note in company. Increases Intelligence by <%= int %>. Enchanted Armoire: Fiddler Set (Item 4 of 4).",
   "shieldArmoireLifeBuoyText": "Life Buoy",
   "shieldArmoireLifeBuoyNotes": "Oh buoy! This will come in handy if you spot someone struggling in a sea of tasks and responsibilities. Increases Constitution by <%= con %>. Enchanted Armoire: Lifeguard Set (Item 2 of 3).",
+  "shieldArmoirePiratesCompanionText": "Pirate's Companion",
+  "shieldArmoirePiratesCompanionNotes": "Perfect if you want to talk your enemies to death, this parrot never shuts up. Maybe it'll remind you about your tasks too! Increases Perception by <%= per %>. Enchanted Armoire: Pirate Set (Item 3 of 3).",
 
   "back": "Back Accessory",
   "backCapitalized": "Back Accessory",

website/common/script/content/appearance/backgrounds.js

@@ -385,6 +385,11 @@ const backgrounds = {
     salt_lake: { },
     viking_ship: { },
   },
+  backgrounds072020: {
+    beach_cabana: { },
+    swimming_among_jellyfish: { },
+    underwater_ruins: { },
+  },
   timeTravelBackgrounds: {
     airship: {
       price: 1,

website/common/script/content/gear/sets/armoire.js

@@ -312,6 +312,11 @@ const armor = {
     con: 6,
     set: 'fiddler',
   },
+  pirateOutfit: {
+    con: 4,
+    int: 4,
+    set: 'pirate',
+  },
 };
 
 const body = {
@@ -807,6 +812,10 @@ const shield = {
     con: 12,
     set: 'lifeguard',
   },
+  piratesCompanion: {
+    per: 8,
+    set: 'pirate',
+  },
 };
 
 const headAccessory = {
@@ -1077,6 +1086,10 @@ const weapon = {
     per: 12,
     set: 'lifeguard',
   },
+  handyHook: {
+    str: 8,
+    set: 'pirate',
+  },
 };
 
 forEach({

website/server/controllers/api-v3/news.js

@@ -4,7 +4,7 @@ const api = {};
 
 // @TODO export this const, cannot export it from here because only routes are exported from
 // controllers
-const LAST_ANNOUNCEMENT_TITLE = 'NEW SUBSCRIBER SET AND OFFICIAL HABITICA CHALLENGES!';
+const LAST_ANNOUNCEMENT_TITLE = 'NEW BACKGROUNDS AND ARMOIRE ITEMS!';
 const worldDmg = { // @TODO
   bailey: false,
 };
@@ -35,62 +35,21 @@ api.getNews = {
           </div>
         </div>
         <hr/>
-        <div class="promo_mystery_202007 center-block"></div>
-        <h3>July Subscriber Set Revealed!</h3>
+        <div class="promo_armoire_backgrounds_202007 center-block"></div>
         <p>
-          The July Subscriber Item Set has been revealed: the Outstanding Orca Item Set! <a
-          href='/user/settings/subscription'>Subscribe to Habitica</a> by July 31 to receive this
-          exciting set! If you're already an active subscriber, reload the site and then head to
-          Inventory > Items to claim your gear!
+          We’ve added three new backgrounds to the Background Shop! Now your avatar can explore
+          Underwater Ruins, go Swimming Among Jellyfish, and relax in a Beach Cabana. Check them
+          out under User Icon > Backgrounds on web and Menu > Inventory > Customize Avatar on
+          mobile!
         </p>
         <p>
-          Subscribers also receive the ability to buy Gems with Gold -- the longer you subscribe,
-          the more Gems you can buy per month! There are other perks as well, such as longer access
-          to uncompressed data and a cute Jackalope pet. Best of all, subscriptions let us keep
-          Habitica running. Thank you very much for your support -- it means a lot to us.
-        </p>
-        <div class="small mb-3">by Beffymaroo</div>
-        <div class="scene_hat_guild center-block"></div>
-        <h3>July 2020 Resolution Success Challenge and Take This Challenge</h3>
-        <p>
-          The Habitica team has launched a special official Challenge series hosted in the <a
-          href='/groups/guild/6e6a8bd3-9f5f-4351-9188-9f11fcd80a99'>Official New Year's Resolution
-          Guild</a>. These Challenges are designed to help you build and maintain goals that are
-          destined for success and then stick with them as the year progresses. For this month's
-          Challenge, <a href='/challenges/03646ace-c36e-4538-9d19-dcdfb96995fc'>Convene Your
-          Companions</a>, we're focusing on building accountability with your friends in Habitica's
-          social spaces! It has a 15 Gem prize, which will be awarded to five lucky winners on
-          August 1.
-        </p>
-        <p>
-          Congratulations to the winners of June's Challenge: @suba_al_hadid, @OnonokiNonon,
-          @kelsco, @Aermyst, and @StefanieFreige!
-        </p>
-        <p>
-          The next Take This Challenge has also launched, "<a
-          href='/challenges/77ffce9a-d3d8-43ac-84bb-3e6756660507'>+2 Intelligence Bonus!</a>", with
-          a focus on deep learning in a topic of interest. Be sure to check it out to earn
-          additional pieces of the Take This armor set!
-        </p>
-        <p>
-          <a href='http://www.takethis.org/' target='_blank'>Take This</a> is a nonprofit that
-          seeks to inform the gamer community about mental health issues, to provide education
-          about mental disorders and mental illness prevention, and to reduce the stigma of mental
-          illness.
-        </p>
-        <p>
-          Congratulations to the winners of the last Take This Challenge, "Keep Calm and Carry
-          On!": grand prize winner @xxDynastyxx, and runners-up @Angry_Teacup, @jepedesu,
-          @SergeyBelyaev, @kimmond, and Unicornio! Plus, all participants in that Challenge have
-          received a piece of the <a
-          href='http://habitica.wikia.com/wiki/Event_Item_Sequences#Take_This_Armor_Set'
-          target='_blank'>Take This item set</a> if they hadn't completed it already. It is located
-          in your Rewards column. Enjoy!
+          Plus, there’s new Gold-purchasable equipment in the Enchanted Armoire, including a new
+          set of Pirate Accessories. Better work hard on your real-life tasks to earn all the
+          pieces! Enjoy :)
         </p>
         <div class="small mb-3">
-          by Doctor B, the Take This team, Lemoness, Beffymaroo, and SabreCat
+          by gawrone, Vikte, -Tyr-, Vyllan, a_diamond, katieslug, shanaqui, and SabreCat
         </div>
-        <div class="promo_take_this center-block"></div>
       </div>
       `,
     });