Merge branch 'release' into develop

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "4.129.4",
+  "version": "4.130.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.129.4",
+  "version": "4.130.0",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.8.3",

website/client/src/assets/css/sprites.css

@@ -1,17 +1,11 @@
-.quest_dysheartener {
-  background: url("~@/assets/images/quest_dysheartener.gif") no-repeat;
-  width: 219px;
-  height: 219px;
-}
-
 .quest_lostMasterclasser4 {
-  background: url("~@/assets/images/quest_lostMasterclasser4.gif") no-repeat;
+  background: url("~@/assets/images/animated/quest_lostMasterclasser4.gif") no-repeat;
   width: 219px;
   height: 219px;
 }
 
 .Pet_HatchingPotion_Veggie {
-  background: url("~@/assets/images/Pet_HatchingPotion_Veggie.gif") no-repeat;
+  background: url("~@/assets/images/animated/Pet_HatchingPotion_Veggie.gif") no-repeat;
   width: 68px;
   height: 68px;
 }
@@ -51,7 +45,7 @@
 
 /* Critical */
 .weapon_special_critical {
-  background: url("~@/assets/images/weapon_special_critical.gif") no-repeat;
+  background: url("~@/assets/images/animated/weapon_special_critical.gif") no-repeat;
   width: 90px;
   height: 90px;
   margin-left:-12px;
@@ -68,32 +62,32 @@
 }
 
 .head_special_0 {
-  background: url("~@/assets/images/BackerOnly-Equip-ShadeHelmet.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-ShadeHelmet.gif") no-repeat;
 }
 .head_special_1 {
-  background: url("~@/assets/images/ContributorOnly-Equip-CrystalHelmet.gif") no-repeat;
+  background: url("~@/assets/images/animated/ContributorOnly-Equip-CrystalHelmet.gif") no-repeat;
   margin-top: 3px;
 }
 
 .broad_armor_special_0,.slim_armor_special_0 {
-  background: url("~@/assets/images/BackerOnly-Equip-ShadeArmor.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-ShadeArmor.gif") no-repeat;
 }
 .broad_armor_special_1,.slim_armor_special_1 {
-  background: url("~@/assets/images/ContributorOnly-Equip-CrystalArmor.gif") no-repeat;
+  background: url("~@/assets/images/animated/ContributorOnly-Equip-CrystalArmor.gif") no-repeat;
 }
 
 .shield_special_0 {
-  background: url("~@/assets/images/BackerOnly-Shield-TormentedSkull.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Shield-TormentedSkull.gif") no-repeat;
 }
 
 .weapon_special_0 {
-  background: url("~@/assets/images/BackerOnly-Weapon-DarkSoulsBlade.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Weapon-DarkSoulsBlade.gif") no-repeat;
 }
 
 .Pet-Wolf-Cerberus {
   width: 105px;
   height: 72px;
-  background: url("~@/assets/images/BackerOnly-Pet-CerberusPup.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Pet-CerberusPup.gif") no-repeat;
 }
 
 .broad_armor_special_ks2019, .slim_armor_special_ks2019, .eyewear_special_ks2019, .head_special_ks2019, .shield_special_ks2019 {
@@ -102,29 +96,29 @@
 }
 
 .broad_armor_special_ks2019, .slim_armor_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonArmor.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonArmor.gif") no-repeat;
 }
 
 .eyewear_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonVisor.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonVisor.gif") no-repeat;
 }
 
 .head_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonHelm.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonHelm.gif") no-repeat;
 }
 
 .shield_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonShield.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonShield.gif") no-repeat;
 }
 
 .weapon_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonGlaive.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonGlaive.gif") no-repeat;
   width: 120px;
   height: 120px;
 }
 
 .Pet-Gryphon-Gryphatrice {
-  background: url("~@/assets/images/BackerOnly-Pet-Gryphatrice.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Pet-Gryphatrice.gif") no-repeat;
   width: 81px;
   height: 99px;
 }
@@ -135,11 +129,28 @@
 }
 
 .Mount_Head_Gryphon-Gryphatrice {
-  background: url("~@/assets/images/BackerOnly-Mount-Head-Gryphatrice.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Mount-Head-Gryphatrice.gif") no-repeat;
 }
 
 .Mount_Body_Gryphon-Gryphatrice {
-  background: url("~@/assets/images/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
+}
+
+.background_airship, .background_clocktower, .background_steamworks {
+  width: 141px;
+  height: 147px;
+}
+
+.background_airship {
+  background: url("~@/assets/images/animated/background_airship.gif") no-repeat;
+}
+
+.background_clocktower {
+  background: url("~@/assets/images/animated/background_clocktower.gif") no-repeat;
+}
+
+.background_steamworks {
+  background: url("~@/assets/images/animated/background_steamworks.gif") no-repeat;
 }
 
 /* FIXME figure out how to handle customize menu!!

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

@@ -1,246 +1,282 @@
+.shop_shield_warrior_4 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1727px -345px;
+  width: 68px;
+  height: 68px;
+}
+.shop_shield_warrior_5 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -220px -341px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_healer_0 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1727px -414px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_healer_1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1727px -483px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_healer_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1727px -552px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_healer_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
+  background-position: -1727px -621px;
+  width: 68px;
+  height: 68px;
+}
 .shop_weapon_healer_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -828px -1654px;
+  background-position: -1727px -690px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_healer_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1573px -486px;
+  background-position: -1727px -759px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_healer_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -897px -1654px;
+  background-position: -1658px -690px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -966px -1654px;
+  background-position: -1658px -828px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1035px -1654px;
+  background-position: -1658px -897px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1104px -1654px;
+  background-position: -1658px -1035px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1173px -1654px;
+  background-position: -1658px -1104px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1242px -1654px;
+  background-position: -1658px -1173px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1311px -1654px;
+  background-position: -1658px -1311px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_rogue_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1380px -1654px;
+  background-position: -1658px -1449px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1449px -1654px;
+  background-position: -1658px -1518px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1518px -1654px;
+  background-position: 0px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1587px -1654px;
+  background-position: -69px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1656px -1654px;
+  background-position: -138px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_aetherCrystals {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -276px;
+  background-position: -207px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_bardInstrument {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -414px;
+  background-position: -276px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_critical {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -483px;
+  background-position: -345px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_fencingFoil {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -621px;
+  background-position: -414px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_lunarScythe {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -690px;
+  background-position: -483px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_mammothRiderSpear {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -759px;
+  background-position: -552px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_nomadsScimitar {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -897px;
+  background-position: -621px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_pageBanner {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1035px;
+  background-position: -690px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_roguishRainbowMessage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1104px;
+  background-position: -759px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_skeletonKey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1173px;
+  background-position: -828px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_tachi {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1242px;
+  background-position: -897px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_taskwoodsLantern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1311px;
+  background-position: -966px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_special_tridentOfCrashingTides {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1380px;
+  background-position: -1035px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1449px;
+  background-position: -1104px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -1518px;
+  background-position: -1173px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: 0px -1654px;
+  background-position: -1242px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -69px -1654px;
+  background-position: -1311px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -138px -1654px;
+  background-position: -1380px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -207px -1654px;
+  background-position: -1449px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_warrior_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -276px -1654px;
+  background-position: -1518px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -345px -1654px;
+  background-position: -1587px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -414px -1654px;
+  background-position: -1656px -1654px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -483px -1654px;
+  background-position: -1727px 0px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -552px -1654px;
+  background-position: -1727px -69px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -621px -1654px;
+  background-position: -1727px -138px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -690px -1654px;
+  background-position: -1727px -207px;
   width: 68px;
   height: 68px;
 }
 .shop_weapon_wizard_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -759px -1654px;
+  background-position: -1727px -276px;
   width: 68px;
   height: 68px;
 }
@@ -504,37 +540,37 @@
 }
 .Pet_Currency_Gem {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -345px;
+  background-position: -1658px -759px;
   width: 68px;
   height: 68px;
 }
 .Pet_Currency_Gem1x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1779px -538px;
+  background-position: -1779px -952px;
   width: 15px;
   height: 13px;
 }
 .Pet_Currency_Gem2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -950px;
+  background-position: -1727px -1364px;
   width: 30px;
   height: 26px;
 }
 .PixelPaw-Gold {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -538px;
+  background-position: -1727px -952px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -590px;
+  background-position: -1727px -1004px;
   width: 51px;
   height: 51px;
 }
 .PixelPaw002 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -642px;
+  background-position: -1727px -1056px;
   width: 51px;
   height: 51px;
 }
@@ -588,7 +624,7 @@
 }
 .empty_bottles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -483px;
+  background-position: -1727px -897px;
   width: 64px;
   height: 54px;
 }
@@ -600,169 +636,169 @@
 }
 .inventory_present {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -660px -504px;
+  background-position: -1100px -944px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_01 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px 0px;
+  background-position: -1582px -245px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_02 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -69px;
+  background-position: -1573px -486px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_03 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -138px;
+  background-position: -220px -203px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_04 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -207px;
+  background-position: -220px -272px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_05 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -276px;
+  background-position: -1727px -828px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_06 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -345px;
+  background-position: -660px -435px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_07 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1582px -245px;
+  background-position: -660px -504px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_08 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -414px;
+  background-position: -660px -573px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_09 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -203px;
+  background-position: -880px -655px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_10 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -272px;
+  background-position: -880px -724px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_11 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -220px -341px;
+  background-position: -880px -793px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_12 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -660px -435px;
+  background-position: -1100px -875px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_birthday {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -660px -573px;
+  background-position: -1100px -1013px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_congrats {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -880px -655px;
+  background-position: -1335px -1095px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_fortify {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -880px -724px;
+  background-position: -1335px -1164px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_getwell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -880px -793px;
+  background-position: -1582px -1309px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_goodluck {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1100px -875px;
+  background-position: -1574px -1415px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_greeting {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1100px -944px;
+  background-position: -1658px 0px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1100px -1013px;
+  background-position: -1658px -69px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_opaquePotion {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1335px -1095px;
+  background-position: -1658px -138px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_seafoam {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1335px -1164px;
+  background-position: -1658px -207px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_shinySeed {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1582px -1309px;
+  background-position: -1658px -276px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_snowball {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1574px -1415px;
+  background-position: -1658px -345px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_spookySparkles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px 0px;
+  background-position: -1658px -414px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_thankyou {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -69px;
+  background-position: -1658px -483px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_trinket {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -138px;
+  background-position: -1658px -552px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_valentine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -207px;
+  background-position: -1658px -621px;
   width: 68px;
   height: 68px;
 }
@@ -774,13 +810,13 @@
 }
 .pet_key {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -552px;
+  background-position: -1658px -966px;
   width: 68px;
   height: 68px;
 }
 .rebirth_orb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -828px;
+  background-position: -1658px -1242px;
   width: 68px;
   height: 68px;
 }
@@ -792,139 +828,139 @@
 }
 .shop_armoire {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1658px -966px;
+  background-position: -1658px -1380px;
   width: 68px;
   height: 68px;
 }
 .zzz {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -735px;
+  background-position: -1727px -1149px;
   width: 40px;
   height: 40px;
 }
 .zzz_light {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -694px;
+  background-position: -1727px -1108px;
   width: 40px;
   height: 40px;
 }
 .notif_inventory_present_01 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1756px -863px;
+  background-position: -1756px -1277px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_02 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -776px;
+  background-position: -1727px -1190px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_03 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -921px;
+  background-position: -1727px -1335px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_04 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1756px -892px;
+  background-position: -1756px -1306px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_05 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -892px;
+  background-position: -1727px -1306px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_06 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1756px -776px;
+  background-position: -1756px -1190px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_07 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -863px;
+  background-position: -1727px -1277px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_08 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1756px -834px;
+  background-position: -1756px -1248px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_09 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -834px;
+  background-position: -1727px -1248px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_10 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1756px -805px;
+  background-position: -1756px -1219px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_11 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -805px;
+  background-position: -1727px -1219px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_present_12 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1756px -921px;
+  background-position: -1756px -1335px;
   width: 28px;
   height: 28px;
 }
 .notif_inventory_special_birthday {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1748px -977px;
+  background-position: -1748px -1391px;
   width: 20px;
   height: 24px;
 }
 .notif_inventory_special_congrats {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1769px -977px;
+  background-position: -1769px -1391px;
   width: 20px;
   height: 22px;
 }
 .notif_inventory_special_getwell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -1002px;
+  background-position: -1727px -1416px;
   width: 20px;
   height: 22px;
 }
 .notif_inventory_special_goodluck {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1768px -735px;
+  background-position: -1768px -1149px;
   width: 20px;
   height: 26px;
 }
 .notif_inventory_special_greeting {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1748px -1002px;
+  background-position: -1748px -1416px;
   width: 20px;
   height: 22px;
 }
 .notif_inventory_special_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1768px -694px;
+  background-position: -1768px -1108px;
   width: 24px;
   height: 26px;
 }
 .notif_inventory_special_thankyou {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1727px -977px;
+  background-position: -1727px -1391px;
   width: 20px;
   height: 24px;
 }
 .notif_inventory_special_valentine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-12.png');
-  background-position: -1758px -950px;
+  background-position: -1758px -1364px;
   width: 20px;
   height: 24px;
 }

website/client/src/components/creatorIntro.vue

@@ -197,6 +197,59 @@
             </div>
           </div>
         </div>
+        <div
+          v-if="!filterBackgrounds"
+          class="row text-center title-row"
+        >
+          <strong>{{ backgroundShopSets[1].text }}</strong>
+        </div>
+        <div
+          v-if="!filterBackgrounds"
+          class="row title-row"
+        >
+          <div
+            v-for="bg in backgroundShopSets[1].items"
+            :key="bg.key"
+            class="col-4 text-center customize-option background-button"
+            :popover-title="bg.text"
+            :popover="bg.notes"
+            popover-trigger="mouseenter"
+            @click="!user.purchased.background[bg.key]
+              ? backgroundSelected(bg) : unlock('background.' + bg.key)"
+          >
+            <div
+              class="background"
+              :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
+            ></div>
+            <i
+              v-if="!user.purchased.background[bg.key]"
+              class="glyphicon glyphicon-lock"
+            ></i>
+            <div
+              v-if="!user.purchased.background[bg.key]"
+              class="purchase-background single"
+            >
+              <div
+                class="svg-icon hourglass"
+                v-html="icons.hourglass"
+              ></div>
+              <span class="price">1</span>
+            </div>
+            <span
+              v-if="!user.purchased.background[bg.key]"
+              class="badge badge-pill badge-item badge-svg"
+              :class="{
+                'item-selected-badge': isBackgroundPinned(bg),
+                'hide': !isBackgroundPinned(bg)}"
+              @click.prevent.stop="togglePinned(bg)"
+            >
+              <span
+                class="svg-icon inline icon-12 color"
+                v-html="icons.pin"
+              ></span>
+            </span>
+          </div>
+        </div>
         <sub-menu
           class="text-center"
           :items="bgSubMenuItems"
@@ -923,7 +976,7 @@
           color: #24cc8f;
         }
 
-        .gem, .coin {
+        .gem, .coin, .hourglass {
           width: 16px;
         }
 
@@ -944,7 +997,7 @@
         }
       }
 
-      .gem, .coin {
+      .gem, .coin, .hourglass {
         margin: 0 .5em;
         display: inline-block;
         vertical-align: bottom;
@@ -1103,6 +1156,7 @@ import skinIcon from '@/assets/svg/skin.svg';
 import hairIcon from '@/assets/svg/hair.svg';
 import backgroundsIcon from '@/assets/svg/backgrounds.svg';
 import gem from '@/assets/svg/gem.svg';
+import hourglass from '@/assets/svg/hourglass.svg';
 import gold from '@/assets/svg/gold.svg';
 import pin from '@/assets/svg/pin.svg';
 import arrowRight from '@/assets/svg/arrow_right.svg';
@@ -1143,6 +1197,7 @@ export default {
         hairIcon,
         backgroundsIcon,
         gem,
+        hourglass,
         pin,
         gold,
         arrowRight,

website/client/src/components/shops/balanceInfo.vue

@@ -1,14 +1,19 @@
 <template>
-  <div>
+  <div class="d-flex justify-content-around">
     <span
       v-for="currency of currencies"
       :key="currency.key"
     >
       <div
-        class="svg-icon"
+        class="svg-icon ml-1"
         v-html="currency.icon"
       ></div>
-      <span :class="{'notEnough': currency.notEnough}">{{ currency.value | roundBigNumber }}</span>
+      <span
+        :class="{'notEnough': currency.notEnough}"
+        class="mx-1"
+      >
+        {{ currency.value | roundBigNumber }}
+      </span>
     </span>
   </div>
 </template>
@@ -29,9 +34,6 @@ span {
   vertical-align: middle;
   width: 16px;
   height: 16px;
-  margin-right: 8px;
-  margin-left: 4px;
-
   display: inline-block;
 }
 
@@ -51,9 +53,6 @@ import currencyMixin from './_currencyMixin';
 export default {
   mixins: [currencyMixin],
   props: {
-    withHourglass: {
-      type: Boolean,
-    },
     currencyNeeded: {
       type: String,
     },
@@ -73,14 +72,11 @@ export default {
   computed: {
     currencies () {
       const currencies = [];
-
-      if (this.withHourglass) {
-        currencies.push({
-          type: 'hourglasses',
-          icon: this.icons.hourglasses,
-          value: this.userHourglasses,
-        });
-      }
+      currencies.push({
+        type: 'hourglasses',
+        icon: this.icons.hourglasses,
+        value: this.userHourglasses,
+      });
 
       currencies.push({
         type: 'gems',

website/client/src/components/shops/buyModal.vue

@@ -11,13 +11,13 @@
       @click.prevent.stop="togglePinned()"
     >
       <span
-        class="svg-icon inline color icon-10"
+        class="svg-icon inline color icon-16"
         v-html="icons.pin"
       ></span>
     </span>
-    <div class="close">
+    <div>
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon icon-12 close-icon"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -54,10 +54,7 @@
         <h4 class="title">
           {{ itemText }}
         </h4>
-        <div
-          class="text"
-          v-html="itemNotes"
-        ></div>
+        <div v-html="itemNotes"></div>
         <slot
           name="additionalInfo"
           :item="item"
@@ -100,14 +97,14 @@
               >{{ item.value }}</span>
             </span>
           </div>
-          <div v-else>
+          <div v-else class="d-flex align-items-middle">
             <span
-              class="svg-icon inline icon-32"
+              class="svg-icon inline icon-32 ml-auto my-auto"
               aria-hidden="true"
               v-html="icons[getPriceClass()]"
             ></span>
             <span
-              class="cost"
+              class="cost mr-auto my-auto"
               :class="getPriceClass()"
             >{{ item.value }}</span>
           </div>
@@ -122,6 +119,9 @@
         <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
         </div>
+        <div v-if="nonSubscriberHourglasses" class="hourglass-nonsub mt-3">
+          {{ $t('mysticHourglassNeededNoSub') }}
+        </div>
         <button
           v-if="getPriceClass() === 'gems'
             && !enoughCurrency(getPriceClass(), item.value * selectedAmountToBuy)"
@@ -130,6 +130,13 @@
         >
           {{ $t('purchaseGems') }}
         </button>
+        <button
+          v-else-if="nonSubscriberHourglasses"
+          class="btn btn-primary"
+          @click="viewSubscriptions(item)"
+        >
+          {{ $t('viewSubscriptions') }}
+        </button>
         <button
           v-else
           class="btn btn-primary"
@@ -167,12 +174,11 @@
     </div>
     <div
       slot="modal-footer"
-      class="clearfix"
+      class="d-flex"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
+      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="float-right"
-        :with-hourglass="getPriceClass() === 'hourglasses'"
+        class="ml-auto"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -187,6 +193,10 @@
   #buy-modal {
     @include centeredModal();
 
+    .modal-body {
+      padding-bottom: 0px;
+    }
+
     .modal-dialog {
       width: 330px;
     }
@@ -274,6 +284,7 @@
     button.btn.btn-primary {
       margin-top: 24px;
       margin-bottom: 24px;
+      min-width: 6rem;
     }
 
     .balance {
@@ -360,6 +371,21 @@
   }
 </style>
 
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .close-icon {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+
+  .hourglass-nonsub {
+    color: $yellow-5;
+    font-size: 12px;
+  }
+</style>
+
 <script>
 import keys from 'lodash/keys';
 import reduce from 'lodash/reduce';
@@ -488,6 +514,9 @@ export default {
     nextFreeRebirth () {
       return 45 - moment().diff(moment(this.user.flags.lastFreeRebirth), 'days');
     },
+    nonSubscriberHourglasses () {
+      return (!this.user.purchased.plan.customerId && this.getPriceClass() === 'hourglasses');
+    },
   },
   watch: {
     item: function itemChanged () {
@@ -612,6 +641,25 @@ export default {
 
       return {};
     },
+    viewSubscriptions (item) {
+      if (item.purchaseType === 'backgrounds') {
+        this.$root.$emit('bv::hide::modal', 'avatar-modal');
+        let removeIndex = this.$store.state.modalStack
+          .map(modal => modal.modalId)
+          .indexOf('avatar-modal');
+        if (removeIndex >= 0) {
+          this.$store.state.modalStack.splice(removeIndex, 1);
+        }
+        removeIndex = this.$store.state.modalStack
+          .map(modal => modal.prev)
+          .indexOf('avatar-modal');
+        if (removeIndex >= 0) {
+          delete this.$store.state.modalStack[removeIndex].prev;
+        }
+      }
+      this.$router.push('/user/settings/subscription');
+      this.hideDialog();
+    },
   },
 };
 </script>

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -160,7 +160,11 @@
       }
 
       &.gold {
-        color: $yellow-10
+        color: $yellow-10;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
       }
     }
 

website/client/src/components/shops/timeTravelers/index.vue

@@ -390,9 +390,9 @@ export default {
       // force update for now until we restructure the data
       let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
 
-      const normalGroups = _filter(apiCategories, c => c.identifier === 'mounts' || c.identifier === 'pets' || c.identifier === 'quests');
+      const normalGroups = _filter(apiCategories, c => c.identifier === 'mounts' || c.identifier === 'pets' || c.identifier === 'quests' || c.identifier === 'backgrounds');
 
-      const setGroups = _filter(apiCategories, c => c.identifier !== 'mounts' && c.identifier !== 'pets' && c.identifier !== 'quests');
+      const setGroups = _filter(apiCategories, c => c.identifier !== 'mounts' && c.identifier !== 'pets' && c.identifier !== 'quests' && c.identifier !== 'backgrounds');
 
       const setCategory = {
         identifier: 'sets',

website/client/src/store/actions/shops.js

@@ -163,6 +163,9 @@ export async function genericPurchase (store, params) {
       // resetting type to pinType only here
       return buyItem(store, { ...params, type: params.pinType });
     case 'background':
+      if (params.currency === 'hourglasses') {
+        return purchaseHourglassItem(store, params);
+      }
       return unlock(store, {
         query: {
           path: `background.${params.key}`,

website/common/locales/en/backgrounds.json

@@ -561,5 +561,13 @@
   "backgroundDesertWithSnowText": "Snowy Desert",
   "backgroundDesertWithSnowNotes": "Witness the rare and quiet beauty of a Snowy Desert.",
   "backgroundSnowglobeText": "Snowglobe",
-  "backgroundSnowglobeNotes": "Shake up a Snowglobe and take your place in a microcosm of a winter landscape."
+  "backgroundSnowglobeNotes": "Shake up a Snowglobe and take your place in a microcosm of a winter landscape.",
+
+  "timeTravelBackgrounds": "Steampunk Backgrounds",
+  "backgroundAirshipText": "Airship",
+  "backgroundAirshipNotes": "Become a sky sailor on board your very own Airship.",
+  "backgroundSteamworksText": "Steamworks",
+  "backgroundSteamworksNotes": "Build mighty contraptions of vapor and steel in a Steamworks.",
+  "backgroundClocktowerText": "Clock Tower",
+  "backgroundClocktowerNotes": "Situate your secret lair behind the face of a Clock Tower."
 }

website/common/locales/en/npc.json

@@ -48,7 +48,7 @@
   "displayPotionForGold": "Do you want to sell a <strong><%= itemType %> Potion</strong>?",
   "sellForGold": "Sell it for <%= gold %> Gold",
   "howManyToSell": "How many would you like to sell?",
-  "yourBalance": "Your balance",
+  "yourBalance": "Your balance:",
   "sell": "Sell",
   "buyNow": "Buy Now",
   "sortByNumber": "Number",

website/common/locales/en/subscriber.json

@@ -1,6 +1,7 @@
 {
     "subscription": "Subscription",
     "subscriptions": "Subscriptions",
+    "viewSubscriptions": "View Subscriptions",
     "subDescription": "Buy Gems with gold, get monthly mystery items, retain progress history, double daily drop-caps, support the devs. Click for more info.",
     "sendGems": "Send Gems",
     "buyGemsGold": "Buy Gems with Gold",
@@ -91,6 +92,7 @@
     "timeTravelersPopover": "Your Mystic Hourglass has opened our time portal! Choose what you’d like us to fetch from the past or future.",
     "timeTravelersAlreadyOwned": "Congratulations! You already own everything the Time Travelers currently offer. Thanks for supporting the site!",
     "mysticHourglassPopover": "A Mystic Hourglass allows you to purchase certain limited-time items, such as monthly Mystery Item Sets and awards from world bosses, from the past!",
+    "mysticHourglassNeededNoSub": "This item requires a Mystic Hourglass. You earn Mystic Hourglasses by being a Habitica subscriber.",
     "mysterySetNotFound": "Mystery set not found, or set already owned.",
     "mysteryItemIsEmpty": "Mystery items are empty",
     "mysteryItemOpened": "Mystery item opened.",
@@ -180,6 +182,7 @@
     "notEnoughHourglasses": "You don't have enough Mystic Hourglasses.",
     "hourglassBuyEquipSetConfirm": "Buy this full set of items for 1 Mystic Hourglass?",
     "hourglassBuyItemConfirm": "Buy this item for 1 Mystic Hourglass?",
+    "backgroundAlreadyOwned": "Background already owned.",
     "petsAlreadyOwned": "Pet already owned.",
     "mountsAlreadyOwned": "Mount already owned.",
     "typeNotAllowedHourglass": "Item type not supported for purchase with Mystic Hourglass. Allowed types: <%= allowedTypes %>",

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

@@ -955,6 +955,26 @@ const backgrounds = {
       notes: t('backgroundSnowglobeNotes'),
     },
   },
+  timeTravelBackgrounds: {
+    airship: {
+      text: t('backgroundAirshipText'),
+      notes: t('backgroundAirshipNotes'),
+      price: 1,
+      currency: 'hourglasses',
+    },
+    clocktower: {
+      text: t('backgroundClocktowerText'),
+      notes: t('backgroundClocktowerNotes'),
+      price: 1,
+      currency: 'hourglasses',
+    },
+    steamworks: {
+      text: t('backgroundSteamworksText'),
+      notes: t('backgroundSteamworksNotes'),
+      price: 1,
+      currency: 'hourglasses',
+    },
+  },
   incentiveBackgrounds: {
     violet: {
       text: t('backgroundVioletText'),
@@ -996,7 +1016,7 @@ forOwn(backgrounds, (backgroundsInSet, set) => {
   forOwn(backgroundsInSet, (background, bgKey) => {
     background.key = bgKey;
     background.set = set;
-    background.price = 7;
+    background.price = background.price || 7;
 
     flat[bgKey] = background;
   });

website/common/script/errors/commonErrorMessages.js

@@ -13,6 +13,7 @@ export default {
   invalidTypeEquip: '"type" must be one of "equipped", "pet", "mount", "costume"',
   missingPetFoodFeed: '"pet" and "food" are required parameters.',
   missingEggHatchingPotion: '"egg" and "hatchingPotion" are required parameters.',
+  useUnlockForCosmetics: 'Use the "unlock" route to purchase backgrounds and avatar customizations using Gems.',
 
   invalidPetName: 'Invalid pet name supplied.',
   invalidFoodName: 'Invalid food name supplied.',

website/common/script/libs/getItemInfo.js

@@ -243,6 +243,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         purchaseType: 'backgrounds',
         path: `backgrounds.${item.set}.${item.key}`,
         pinType: 'background',
+        locked: false,
       };
       break;
     case 'mystery_set':

website/common/script/libs/shops.js

@@ -326,6 +326,25 @@ shops.getTimeTravelersCategories = function getTimeTravelersCategories (user, la
   }
   categories.push(questCategory);
 
+  const backgroundCategory = {
+    identifier: 'backgrounds',
+    text: i18n.t('backgrounds', language),
+    items: [],
+  };
+  for (const bg in content.backgrounds.timeTravelBackgrounds) {
+    if (!user.purchased.background[bg]) {
+      const item = getItemInfo(
+        user,
+        'background',
+        content.backgroundsFlat[bg],
+        officialPinnedItems,
+        language,
+      );
+      backgroundCategory.items.push(item);
+    }
+  }
+  categories.push(backgroundCategory);
+
   for (const type of Object.keys(stable)) {
     const category = {
       identifier: type,

website/common/script/ops/buy/buy.js

@@ -43,6 +43,10 @@ export default function buy (
       buyRes = buyOp.purchase();
       break;
     }
+    case 'backgrounds':
+      if (!hourglass) throw new BadRequest(errorMessage('useUnlockForCosmetics'));
+      buyRes = hourglassPurchase(user, req, analytics);
+      break;
     case 'mystery':
       buyRes = buyMysterySet(user, req, analytics);
       break;

website/common/script/ops/buy/hourglassPurchase.js

@@ -8,6 +8,8 @@ import {
   NotAuthorized,
 } from '../../libs/errors';
 import errorMessage from '../../libs/errorMessage';
+import getItemInfo from '../../libs/getItemInfo';
+import { removeItemByPath } from '../pinnedGearUtils';
 
 export default function purchaseHourglass (user, req = {}, analytics, quantity = 1) {
   const key = get(req, 'params.key');
@@ -16,7 +18,24 @@ export default function purchaseHourglass (user, req = {}, analytics, quantity =
   const type = get(req, 'params.type');
   if (!type) throw new BadRequest(errorMessage('missingTypeParam'));
 
-  if (type === 'quests') {
+  if (type === 'backgrounds') {
+    if (!content.backgroundsFlat[key] || content.backgroundsFlat[key].currency !== 'hourglasses') {
+      throw new NotAuthorized(i18n.t('notAllowedHourglass', req.language));
+    }
+    if (user.purchased.background[key]) {
+      throw new NotAuthorized(i18n.t('backgroundAlreadyOwned', req.language));
+    }
+    if (user.purchased.plan.consecutive.trinkets <= 0) {
+      throw new NotAuthorized(i18n.t('notEnoughHourglasses', req.language));
+    }
+
+    user.purchased.background[key] = true;
+    user.purchased.plan.consecutive.trinkets -= 1;
+    const itemInfo = getItemInfo(user, 'background', content.backgroundsFlat[key]);
+    removeItemByPath(user, itemInfo.path);
+
+    if (user.markModified) user.markModified('purchased.background');
+  } else if (type === 'quests') {
     if (!content.quests[key] || content.quests[key].category !== 'timeTravelers') throw new NotAuthorized(i18n.t('notAllowedHourglass', req.language));
     if (user.purchased.plan.consecutive.trinkets < quantity) {
       throw new NotAuthorized(i18n.t('notEnoughHourglasses', req.language));

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 = 'BLOG POST: SEASONAL SHOP';
+const LAST_ANNOUNCEMENT_TITLE = 'NEW STEAMPUNK BACKGROUNDS FROM THE TIME TRAVELERS!';
 const worldDmg = { // @TODO
   bailey: false,
 };
@@ -31,21 +31,29 @@ api.getNews = {
           <div class="mr-3 ${baileyClass}"></div>
           <div class="media-body">
             <h1 class="align-self-center">${res.t('newStuff')}</h1>
-            <h2>1/16/2020 - ${LAST_ANNOUNCEMENT_TITLE}</h2>
+            <h2>1/21/2020 - ${LAST_ANNOUNCEMENT_TITLE}</h2>
           </div>
         </div>
         <hr/>
-        <div class="promo_seasonal_shop center-block"></div>
+        <div class="d-flex justify-content-center mb-3">
+          <img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_steamworks_demo.gif" />
+          <img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_clocktower_demo.gif" />
+          <img src="https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_airship_demo.gif" />
+        </div>
         <p>
-          This month's <a href='https://habitica.wordpress.com/2020/01/15/seasonal-shop/'
-          target='_blank'>featured Wiki article</a> is about the Seasonal Shop! We hope that it
-          will help you get the most out of the Winter Wonderland Gala and many Galas to come. Be
-          sure to check it out, and let us know what you think by reaching out on <a
-          href='https://twitter.com/habitica' target='_blank'>Twitter</a>, <a href=
-          'http://blog.habitrpg.com' target='_blank'>Tumblr</a>, and <a href=
-          'https://facebook.com/habitica' target='_blank'>Facebook</a>.
+          Hello Habiticans! We've released brand-new backgrounds in the Time Travelers' shop! Show
+          off your retrofuturistic outfits at the Clocktower, Steamworks, and even in an Airship!
+          These will be available at the cost of one <a
+          href='https://habitica.fandom.com/wiki/Mystic_Hourglass' target='_blank'>Mystic
+          Hourglass</a> each.
         </p>
-        <div class="small mb-3">by shanaqui and the Wiki Wizards</div>
+        <p>
+          Check out the <a href='/shops/time'>Time Travelers' shop</a> to find these cool
+          backgrounds, as well as past subscriber gear, the Robot pet quest, and even rare pets and
+          mounts!
+        </p>
+        <p>Thanks for supporting Habitica! We hope that you enjoy your new backgrounds.</p>
+        <div class="small mb-3">by gawrone, annetiger, SabreCat, and Viirus</div>
       </div>
       `,
     });