Merge branch 'release' into develop

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "habitica",
-  "version": "4.203.1",
+  "version": "4.204.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.203.1",
+  "version": "4.204.0",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.15.0",

website/client/.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     // TODO find a way to let eslint understand webpack aliases
     'import/no-unresolved': 'off',
+    'import/extensions': 'off',
     'vue/no-v-html': 'off',
     'vue/html-self-closing': ['error', {
       html: {

website/client/config/storybook/config.js

@@ -44,12 +44,10 @@ store.state.user.data = {
 
 Vue.prototype.$store = store;
 
-
 const req = require.context('../../src', true, /.stories.js$/);
 
 function loadStories () {
   req.keys().forEach(filename => req(filename));
 }
 
-
 configure(loadStories, module);

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

@@ -1,237 +1,285 @@
-.shop_weapon_healer_6 {
+.shop_shield_warrior_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1616px -531px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_0 {
+.shop_shield_warrior_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1616px -637px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_1 {
+.shop_weapon_healer_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1616px -743px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_2 {
+.shop_weapon_healer_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1610px -849px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_3 {
+.shop_weapon_healer_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1595px -940px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_4 {
+.shop_weapon_healer_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1595px -1040px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_5 {
+.shop_weapon_healer_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1595px -1140px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_rogue_6 {
+.shop_weapon_healer_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1595px -1240px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_0 {
+.shop_weapon_healer_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1423px -422px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_1 {
+.shop_weapon_rogue_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -513px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_2 {
+.shop_weapon_rogue_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -604px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_3 {
+.shop_weapon_rogue_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -695px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_aetherCrystals {
+.shop_weapon_rogue_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -786px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_bardInstrument {
+.shop_weapon_rogue_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -877px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_critical {
+.shop_weapon_rogue_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -968px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_fencingFoil {
+.shop_weapon_rogue_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -1059px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_lunarScythe {
+.shop_weapon_special_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1411px -1150px;
   width: 68px;
   height: 68px;
 }
+.shop_weapon_special_1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1092px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1161px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1230px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_aetherCrystals {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1299px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_bardInstrument {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1368px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_critical {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1437px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_fencingFoil {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1506px -1487px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_special_lunarScythe {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1575px -1487px;
+  width: 68px;
+  height: 68px;
+}
 .shop_weapon_special_mammothRiderSpear {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1274px -1487px;
-  width: 68px;
-  height: 68px;
-}
-.shop_weapon_special_nomadsScimitar {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1343px -1487px;
-  width: 68px;
-  height: 68px;
-}
-.shop_weapon_special_pageBanner {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1412px -1487px;
-  width: 68px;
-  height: 68px;
-}
-.shop_weapon_special_roguishRainbowMessage {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1481px -1487px;
-  width: 68px;
-  height: 68px;
-}
-.shop_weapon_special_skeletonKey {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1550px -1487px;
-  width: 68px;
-  height: 68px;
-}
-.shop_weapon_special_tachi {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -72px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_taskwoodsLantern {
+.shop_weapon_special_nomadsScimitar {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -141px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_special_tridentOfCrashingTides {
+.shop_weapon_special_pageBanner {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -210px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_0 {
+.shop_weapon_special_roguishRainbowMessage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -279px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_1 {
+.shop_weapon_special_skeletonKey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -348px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_2 {
+.shop_weapon_special_tachi {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -417px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_3 {
+.shop_weapon_special_taskwoodsLantern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -486px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_4 {
+.shop_weapon_special_tridentOfCrashingTides {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -555px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_5 {
+.shop_weapon_warrior_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -624px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_warrior_6 {
+.shop_weapon_warrior_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -693px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_0 {
+.shop_weapon_warrior_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -762px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_1 {
+.shop_weapon_warrior_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -831px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_2 {
+.shop_weapon_warrior_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -900px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_3 {
+.shop_weapon_warrior_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -969px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_4 {
+.shop_weapon_warrior_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1038px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_5 {
+.shop_weapon_wizard_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1107px -1578px;
   width: 68px;
   height: 68px;
 }
-.shop_weapon_wizard_6 {
+.shop_weapon_wizard_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1176px -1578px;
   width: 68px;
   height: 68px;
 }
+.shop_weapon_wizard_2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1245px -1578px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_wizard_3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1314px -1578px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_wizard_4 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1383px -1578px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_wizard_5 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1452px -1578px;
+  width: 68px;
+  height: 68px;
+}
+.shop_weapon_wizard_6 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1521px -1578px;
+  width: 68px;
+  height: 68px;
+}
 .weapon_healer_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
   background-position: -1320px -513px;
@@ -282,37 +330,37 @@
 }
 .weapon_rogue_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1176px -1257px;
+  background-position: -980px -1257px;
   width: 90px;
   height: 90px;
 }
 .weapon_rogue_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1267px -1257px;
+  background-position: -1071px -1257px;
   width: 90px;
   height: 90px;
 }
 .weapon_rogue_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1358px -1257px;
+  background-position: -1162px -1257px;
   width: 90px;
   height: 90px;
 }
 .weapon_rogue_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1396px;
+  background-position: -1253px -1257px;
   width: 90px;
   height: 90px;
 }
 .weapon_rogue_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -91px -1396px;
+  background-position: -1344px -1257px;
   width: 90px;
   height: 90px;
 }
 .weapon_rogue_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -182px -1396px;
+  background-position: 0px -1396px;
   width: 90px;
   height: 90px;
 }
@@ -324,13 +372,13 @@
 }
 .weapon_special_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -273px -1396px;
+  background-position: -91px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -364px -1396px;
+  background-position: -182px -1396px;
   width: 90px;
   height: 90px;
 }
@@ -342,157 +390,157 @@
 }
 .weapon_special_bardInstrument {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -455px -1396px;
+  background-position: -273px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_fencingFoil {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -546px -1396px;
+  background-position: -364px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_lunarScythe {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -637px -1396px;
+  background-position: -455px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_mammothRiderSpear {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -728px -1396px;
+  background-position: -546px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_nomadsScimitar {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -819px -1396px;
+  background-position: -637px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_pageBanner {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -910px -1396px;
+  background-position: -728px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_roguishRainbowMessage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1001px -1396px;
+  background-position: -819px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_skeletonKey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1092px -1396px;
+  background-position: -910px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_tachi {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1183px -1396px;
+  background-position: -1001px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_taskwoodsLantern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1274px -1396px;
+  background-position: -1092px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_special_tridentOfCrashingTides {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1365px -1396px;
+  background-position: -1183px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1456px -1396px;
+  background-position: -1274px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1547px -1396px;
+  background-position: -1365px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1487px;
+  background-position: -1456px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -91px -1487px;
+  background-position: -1547px -1396px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -182px -1487px;
+  background-position: 0px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -273px -1487px;
+  background-position: -91px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_warrior_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -364px -1487px;
+  background-position: -182px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_0 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -455px -1487px;
+  background-position: -273px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -546px -1487px;
+  background-position: -364px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -637px -1487px;
+  background-position: -455px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -728px -1487px;
+  background-position: -546px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_4 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -819px -1487px;
+  background-position: -637px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_5 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -910px -1487px;
+  background-position: -728px -1487px;
   width: 90px;
   height: 90px;
 }
 .weapon_wizard_6 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1001px -1487px;
+  background-position: -819px -1487px;
   width: 90px;
   height: 90px;
 }
 .Pet_Currency_Gem {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1518px;
+  background-position: -207px -1680px;
   width: 68px;
   height: 68px;
 }
@@ -576,181 +624,181 @@
 }
 .empty_bottles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -138px -1680px;
+  background-position: -547px -1680px;
   width: 64px;
   height: 54px;
 }
 .ghost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1092px -1487px;
+  background-position: -910px -1487px;
   width: 90px;
   height: 90px;
 }
 .inventory_present {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -414px;
+  background-position: -1685px -759px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_01 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1245px -1578px;
+  background-position: -1590px -1578px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_02 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1314px -1578px;
+  background-position: -1685px 0px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_03 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1383px -1578px;
+  background-position: -1685px -69px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_04 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1452px -1578px;
+  background-position: -1685px -138px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_05 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1521px -1578px;
+  background-position: -1685px -207px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_06 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1590px -1578px;
+  background-position: -1685px -276px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_07 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px 0px;
+  background-position: -1685px -345px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_08 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -69px;
+  background-position: -1685px -414px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_09 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -138px;
+  background-position: -1685px -483px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_10 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -207px;
+  background-position: -1685px -552px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_11 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -276px;
+  background-position: -1685px -621px;
   width: 68px;
   height: 68px;
 }
 .inventory_present_12 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -345px;
+  background-position: -1685px -690px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_birthday {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -483px;
+  background-position: -1685px -828px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_congrats {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -552px;
+  background-position: -1685px -897px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_fortify {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -621px;
+  background-position: -1685px -966px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_getwell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -690px;
+  background-position: -1685px -1035px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_goodluck {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -759px;
+  background-position: -1685px -1104px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_greeting {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -828px;
+  background-position: -1685px -1173px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -897px;
+  background-position: -1685px -1242px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_opaquePotion {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -966px;
+  background-position: -1685px -1311px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_seafoam {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1035px;
+  background-position: -1685px -1380px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_shinySeed {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1104px;
+  background-position: -1685px -1449px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_snowball {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1173px;
+  background-position: -1685px -1518px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_spookySparkles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1242px;
+  background-position: -1685px -1587px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_thankyou {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1311px;
+  background-position: 0px -1680px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_trinket {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1380px;
+  background-position: -69px -1680px;
   width: 68px;
   height: 68px;
 }
 .inventory_special_valentine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1449px;
+  background-position: -138px -1680px;
   width: 68px;
   height: 68px;
 }
@@ -762,25 +810,25 @@
 }
 .pet_key {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1685px -1587px;
+  background-position: -276px -1680px;
   width: 68px;
   height: 68px;
 }
 .rebirth_orb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1680px;
+  background-position: -345px -1680px;
   width: 68px;
   height: 68px;
 }
 .seafoam_star {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1183px -1487px;
+  background-position: -1001px -1487px;
   width: 90px;
   height: 90px;
 }
 .shop_armoire {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -69px -1680px;
+  background-position: -414px -1680px;
   width: 68px;
   height: 68px;
 }
@@ -966,7 +1014,7 @@
 }
 .npc_bailey_valentines {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1619px -1487px;
+  background-position: -483px -1680px;
   width: 63px;
   height: 66px;
 }
@@ -978,55 +1026,55 @@
 }
 .npc_matt {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -980px -1257px;
+  background-position: -784px -1257px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_birthday {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -710px -1106px;
+  background-position: -502px -1106px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_fall {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -906px -1106px;
+  background-position: -698px -1106px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_habitoween {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1102px -1106px;
+  background-position: -894px -1106px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1257px;
+  background-position: -1090px -1106px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -196px -1257px;
+  background-position: 0px -1257px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_summer {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -392px -1257px;
+  background-position: -196px -1257px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_thanksgiving {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -588px -1257px;
+  background-position: -392px -1257px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_winter {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -784px -1257px;
+  background-position: -588px -1257px;
   width: 195px;
   height: 138px;
 }
@@ -1056,13 +1104,13 @@
 }
 .quest_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -502px -1106px;
+  background-position: -1072px -892px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -858px -892px;
+  background-position: -638px -892px;
   width: 216px;
   height: 180px;
 }
@@ -1104,7 +1152,7 @@
 }
 .quest_bunny {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -647px -892px;
+  background-position: -427px -892px;
   width: 210px;
   height: 186px;
 }
@@ -1236,7 +1284,7 @@
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1075px -892px;
+  background-position: -855px -892px;
   width: 216px;
   height: 177px;
 }
@@ -1252,9 +1300,3 @@
   width: 219px;
   height: 219px;
 }
-.quest_hedgehog {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -427px -892px;
-  width: 219px;
-  height: 186px;
-}

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

@@ -1,9 +1,15 @@
 .quest_TEMPLATE_FOR_MISSING_IMAGE {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -251px -1543px;
+  background-position: -553px -1543px;
   width: 221px;
   height: 39px;
 }
+.quest_hedgehog {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -654px -1326px;
+  width: 219px;
+  height: 186px;
+}
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -223px 0px;
@@ -24,7 +30,7 @@
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -877px -1326px;
+  background-position: -1097px -1326px;
   width: 216px;
   height: 177px;
 }
@@ -48,7 +54,7 @@
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1071px;
+  background-position: -1543px -1249px;
   width: 150px;
   height: 150px;
 }
@@ -114,7 +120,7 @@
 }
 .quest_octopus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -654px -1326px;
+  background-position: -874px -1326px;
   width: 222px;
   height: 177px;
 }
@@ -132,7 +138,7 @@
 }
 .quest_penguin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -887px;
+  background-position: -1543px -1065px;
   width: 190px;
   height: 183px;
 }
@@ -162,7 +168,7 @@
 }
 .quest_rooster {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -534px;
+  background-position: -1543px -712px;
   width: 213px;
   height: 174px;
 }
@@ -216,7 +222,7 @@
 }
 .quest_snake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1094px -1326px;
+  background-position: -1314px -1326px;
   width: 216px;
   height: 177px;
 }
@@ -234,7 +240,7 @@
 }
 .quest_stoikalmCalamity1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1222px;
+  background-position: -251px -1543px;
   width: 150px;
   height: 150px;
 }
@@ -258,7 +264,7 @@
 }
 .quest_taskwoodsTerror1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1373px;
+  background-position: -402px -1543px;
   width: 150px;
   height: 150px;
 }
@@ -276,19 +282,19 @@
 }
 .quest_treeling {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1311px -1326px;
+  background-position: -1543px 0px;
   width: 216px;
   height: 177px;
 }
 .quest_trex {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -709px;
+  background-position: -1543px -887px;
   width: 204px;
   height: 177px;
 }
 .quest_trex_undead {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px 0px;
+  background-position: -1543px -178px;
   width: 216px;
   height: 177px;
 }
@@ -324,7 +330,7 @@
 }
 .quest_vice1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -178px;
+  background-position: -1543px -356px;
   width: 216px;
   height: 177px;
 }
@@ -336,7 +342,7 @@
 }
 .quest_vice3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -356px;
+  background-position: -1543px -534px;
   width: 216px;
   height: 177px;
 }
@@ -360,469 +366,415 @@
 }
 .quest_atom1_soapBars {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1579px;
+  background-position: -1760px -820px;
   width: 48px;
   height: 51px;
 }
 .quest_dilatoryDistress1_blueFins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1631px;
+  background-position: -1760px -872px;
   width: 51px;
   height: 48px;
 }
 .quest_dilatoryDistress1_fireCoral {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1071px;
+  background-position: -1760px -921px;
   width: 48px;
   height: 51px;
 }
 .quest_egg_plainEgg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1123px;
+  background-position: -1760px -973px;
   width: 48px;
   height: 51px;
 }
 .quest_evilsanta2_branches {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1222px;
+  background-position: -1760px -1025px;
   width: 48px;
   height: 51px;
 }
 .quest_evilsanta2_tracks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1518px;
+  background-position: -1760px -759px;
   width: 54px;
   height: 60px;
 }
 .quest_goldenknight1_testimony {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1274px;
+  background-position: -1760px -1077px;
   width: 48px;
   height: 51px;
 }
 .quest_lostMasterclasser1_ancientTome {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -579px -1694px;
+  background-position: -1726px -1583px;
   width: 33px;
   height: 42px;
 }
 .quest_lostMasterclasser1_forbiddenTome {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -613px -1694px;
+  background-position: -181px -1694px;
   width: 33px;
   height: 42px;
 }
 .quest_lostMasterclasser1_hiddenTome {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -647px -1694px;
+  background-position: -215px -1694px;
   width: 33px;
   height: 42px;
 }
 .quest_mayhemMistiflying2_mistifly1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1373px;
+  background-position: -1760px -1129px;
   width: 48px;
   height: 51px;
 }
 .quest_mayhemMistiflying2_mistifly2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1425px;
+  background-position: -1760px -1181px;
   width: 48px;
   height: 51px;
 }
 .quest_mayhemMistiflying2_mistifly3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1700px -1583px;
+  background-position: -1760px -1233px;
   width: 48px;
   height: 51px;
 }
 .quest_moon1_shard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1175px;
+  background-position: -1760px -1649px;
   width: 42px;
   height: 42px;
 }
 .quest_moonstone1_moonstone {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -654px -1504px;
+  background-position: -935px -1543px;
   width: 30px;
   height: 30px;
 }
 .quest_robot_bolt {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1694px;
+  background-position: -1760px -1285px;
   width: 48px;
   height: 51px;
 }
 .quest_robot_gear {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -49px -1694px;
+  background-position: -1760px -1337px;
   width: 48px;
   height: 51px;
 }
 .quest_robot_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -98px -1694px;
+  background-position: -1760px -1389px;
   width: 48px;
   height: 51px;
 }
 .quest_ruby_aquariusRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -292px -1652px;
+  background-position: -594px -1652px;
   width: 39px;
   height: 40px;
 }
 .quest_ruby_rubyGem {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -147px -1694px;
+  background-position: -1760px -1441px;
   width: 48px;
   height: 51px;
 }
 .quest_ruby_venusRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -473px -1543px;
+  background-position: -775px -1543px;
   width: 39px;
   height: 39px;
 }
 .quest_silver_cancerRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -513px -1543px;
+  background-position: -815px -1543px;
   width: 39px;
   height: 39px;
 }
 .quest_silver_moonRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -539px -1694px;
+  background-position: -141px -1694px;
   width: 39px;
   height: 42px;
 }
 .quest_silver_silverIngot {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -196px -1694px;
+  background-position: -1760px -1493px;
   width: 48px;
   height: 51px;
 }
 .quest_stoikalmCalamity2_icicleCoin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -245px -1694px;
+  background-position: -1760px -1545px;
   width: 48px;
   height: 51px;
 }
 .quest_stone_capricornRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1326px;
+  background-position: -1694px -1353px;
   width: 42px;
   height: 42px;
 }
 .quest_stone_marsRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1694px -1477px;
+  background-position: -98px -1694px;
   width: 42px;
   height: 42px;
 }
 .quest_stone_mossyStone {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -294px -1694px;
+  background-position: -1760px -1597px;
   width: 48px;
   height: 51px;
 }
 .quest_taskwoodsTerror2_brownie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -343px -1694px;
+  background-position: -1694px -1249px;
   width: 48px;
   height: 51px;
 }
 .quest_taskwoodsTerror2_dryad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -392px -1694px;
+  background-position: -1694px -1301px;
   width: 48px;
   height: 51px;
 }
 .quest_taskwoodsTerror2_pixie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -441px -1694px;
+  background-position: 0px -1694px;
   width: 48px;
   height: 51px;
 }
 .quest_turquoise_neptuneRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -553px -1543px;
+  background-position: -855px -1543px;
   width: 39px;
   height: 39px;
 }
 .quest_turquoise_sagittariusRune {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -593px -1543px;
+  background-position: -895px -1543px;
   width: 39px;
   height: 39px;
 }
 .quest_turquoise_turquoiseGem {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -490px -1694px;
+  background-position: -49px -1694px;
   width: 48px;
   height: 51px;
 }
 .quest_vice2_lightCrystal {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -251px -1652px;
+  background-position: -553px -1652px;
   width: 40px;
   height: 40px;
 }
 .inventory_quest_scroll_alligator {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -251px -1583px;
+  background-position: -1543px -1400px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_amber {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -320px -1583px;
+  background-position: -1612px -1400px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_armadillo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -389px -1583px;
+  background-position: -1681px -1400px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_atom1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -527px -1583px;
+  background-position: -1612px -1469px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_atom1_locked {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -458px -1583px;
+  background-position: -1543px -1469px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -665px -1583px;
+  background-position: -553px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_atom2_locked {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -596px -1583px;
+  background-position: -1681px -1469px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_atom3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -803px -1583px;
+  background-position: -691px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_atom3_locked {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -734px -1583px;
+  background-position: -622px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_axolotl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -872px -1583px;
+  background-position: -760px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_badger {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -941px -1583px;
+  background-position: -829px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_basilist {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1010px -1583px;
+  background-position: -898px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_beetle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1079px -1583px;
+  background-position: -967px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_blackPearl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1148px -1583px;
+  background-position: -1036px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_bronze {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1217px -1583px;
+  background-position: -1105px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_bunny {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1286px -1583px;
+  background-position: -1174px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_butterfly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1355px -1583px;
+  background-position: -1243px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_cheetah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1424px -1583px;
+  background-position: -1312px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_cow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1493px -1583px;
+  background-position: -1381px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dilatoryDistress1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1631px -1583px;
+  background-position: -1519px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dilatoryDistress2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -69px;
+  background-position: -1657px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dilatoryDistress2_locked {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px 0px;
+  background-position: -1588px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dilatoryDistress3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -207px;
+  background-position: -1760px -69px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dilatoryDistress3_locked {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -138px;
+  background-position: -1760px 0px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dilatory_derby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1562px -1583px;
+  background-position: -1450px -1583px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dolphin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -276px;
+  background-position: -1760px -138px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_dustbunnies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -345px;
+  background-position: -1760px -207px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_egg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -414px;
+  background-position: -1760px -276px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_evilsanta {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -483px;
+  background-position: -1760px -345px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_evilsanta2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -552px;
+  background-position: -1760px -414px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_falcon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -621px;
+  background-position: -1760px -483px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_ferret {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -690px;
+  background-position: -1760px -552px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_fluorite {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -759px;
+  background-position: -1760px -621px;
   width: 68px;
   height: 68px;
 }
 .inventory_quest_scroll_frog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -828px;
+  background-position: -1760px -690px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_ghost_stag {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -897px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_goldenknight1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1035px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_goldenknight1_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -966px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_goldenknight2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1173px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_goldenknight2_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1104px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_goldenknight3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1311px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_goldenknight3_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1242px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_gryphon {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1380px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_guineapig {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1449px;
   width: 68px;
   height: 68px;
 }

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

@@ -1,408 +1,438 @@
-.Pet-Wolf-Veggie {
+.Pet-Wolf-Sunset {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: 0px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Veteran {
+.Pet-Wolf-Sunshine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -82px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Watery {
+.Pet-Wolf-Thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -164px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-White {
+.Pet-Wolf-Turquoise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: 0px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Windup {
+.Pet-Wolf-Vampire {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -82px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Wolf-Zombie {
+.Pet-Wolf-Veggie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -164px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Base {
+.Pet-Wolf-Veteran {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -246px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-CottonCandyBlue {
+.Pet-Wolf-Watery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -246px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-CottonCandyPink {
+.Pet-Wolf-White {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: 0px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Desert {
+.Pet-Wolf-Windup {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -82px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Golden {
+.Pet-Wolf-Zombie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -164px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Red {
+.Pet-Yarn-Base {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -246px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Shade {
+.Pet-Yarn-CottonCandyBlue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -328px 0px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Skeleton {
+.Pet-Yarn-CottonCandyPink {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -328px -100px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-White {
+.Pet-Yarn-Desert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -328px -200px;
   width: 81px;
   height: 99px;
 }
-.Pet-Yarn-Zombie {
+.Pet-Yarn-Golden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: 0px -300px;
   width: 81px;
   height: 99px;
 }
-.Pet_HatchingPotion_Amber {
+.Pet-Yarn-Red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
   background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -100px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Aquatic {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -151px -300px;
+  background-position: -410px -169px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Aurora {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -220px -300px;
+  background-position: -410px -238px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_AutumnLeaf {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -289px -300px;
+  background-position: -410px -307px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Base {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -410px 0px;
+  background-position: 0px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_BirchBark {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -410px -69px;
+  background-position: -69px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_BlackPearl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -410px -138px;
+  background-position: -138px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Bronze {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -410px -207px;
+  background-position: -207px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Celestial {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -410px -276px;
+  background-position: -276px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_CottonCandyBlue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -400px;
+  background-position: -345px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_CottonCandyPink {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -69px -400px;
+  background-position: -414px -400px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Cupid {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px -400px;
+  background-position: -492px 0px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Desert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -207px -400px;
+  background-position: -492px -69px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ember {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px -400px;
+  background-position: -492px -138px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Fairy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -345px -400px;
+  background-position: -492px -207px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Floral {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -479px 0px;
+  background-position: -492px -276px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Fluorite {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -479px -69px;
+  background-position: -492px -345px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Frost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -479px -138px;
+  background-position: 0px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ghost {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -479px -207px;
+  background-position: -69px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -479px -276px;
+  background-position: -138px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Glow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -479px -345px;
+  background-position: -207px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Golden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -469px;
+  background-position: -276px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Holly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -69px -469px;
+  background-position: -345px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_IcySnow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px -469px;
+  background-position: -414px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Moonglow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -207px -469px;
+  background-position: -483px -469px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_MossyStone {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px -469px;
+  background-position: -561px 0px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Peppermint {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -345px -469px;
+  background-position: -561px -69px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_PolkaDot {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -414px -469px;
+  background-position: -561px -138px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Purple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px 0px;
+  background-position: -561px -207px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Rainbow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px -69px;
+  background-position: -561px -276px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px -138px;
+  background-position: -561px -345px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_RoseQuartz {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px -207px;
+  background-position: -561px -414px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_RoyalPurple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px -276px;
+  background-position: 0px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ruby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px -345px;
+  background-position: -69px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_SandSculpture {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -548px -414px;
+  background-position: -138px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shade {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -538px;
+  background-position: -207px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -69px -538px;
+  background-position: -276px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shimmer {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px -538px;
+  background-position: -345px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Silver {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -207px -538px;
+  background-position: -414px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Skeleton {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px -538px;
+  background-position: -483px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_SolarSystem {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -345px -538px;
+  background-position: -552px -538px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Spooky {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -414px -538px;
+  background-position: -630px 0px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_StainedGlass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -483px -538px;
+  background-position: -630px -69px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_StarryNight {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px 0px;
+  background-position: -630px -138px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Sunset {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -69px;
+  background-position: -630px -207px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Sunshine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -138px;
+  background-position: -630px -276px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -207px;
+  background-position: -630px -345px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Turquoise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -276px;
+  background-position: -630px -414px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Vampire {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -345px;
+  background-position: -630px -483px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Watery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -414px;
+  background-position: 0px -607px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_White {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -617px -483px;
+  background-position: -69px -607px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Zombie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -607px;
+  background-position: -138px -607px;
   width: 68px;
   height: 68px;
 }

website/client/src/components/appFooter.vue

@@ -6,12 +6,16 @@
       <div class="row">
         <div class="col-12 col-md-2">
           <h3>
-            <a href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
+            <a
-               target="_blank">{{ $t('mobileIOS') }}</a>
+              href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
+              target="_blank"
+            >{{ $t('mobileIOS') }}</a>
           </h3>
           <h3>
-            <a href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
+            <a
-               target="_blank">{{ $t('mobileAndroid') }}</a>
+              href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
+              target="_blank"
+            >{{ $t('mobileAndroid') }}</a>
           </h3>
         </div>
         <div class="col-12 col-md-2">
@@ -23,12 +27,16 @@
               </router-link>
             </li>
             <li>
-              <a href="https://habitica.wordpress.com/"
+              <a
-                 target="_blank">{{ $t('companyBlog') }}</a>
+                href="https://habitica.wordpress.com/"
+                target="_blank"
+              >{{ $t('companyBlog') }}</a>
             </li>
             <li>
-              <a href="http://blog.habitrpg.com/"
+              <a
-                 target="_blank">{{ $t('tumblr') }}</a>
+                href="http://blog.habitrpg.com/"
+                target="_blank"
+              >{{ $t('tumblr') }}</a>
             </li>
             <li>
               <router-link to="/static/faq">
@@ -36,8 +44,10 @@
               </router-link>
             </li>
             <li>
-              <a href="http://habitica.fandom.com/wiki/Whats_New"
+              <a
-                 target="_blank">{{ $t('oldNews') }}</a>
+                href="http://habitica.fandom.com/wiki/Whats_New"
+                target="_blank"
+              >{{ $t('oldNews') }}</a>
             </li>
             <!-- Commenting out merch page see https://github.com/HabitRPG/habitica/issues/12039
             <li>
@@ -62,8 +72,10 @@
           <h3>{{ $t('footerCommunity') }}</h3>
           <ul>
             <li>
-              <a target="_blank"
+              <a
-                 href="/static/community-guidelines">{{ $t('communityGuidelines') }}</a>
+                target="_blank"
+                href="/static/community-guidelines"
+              >{{ $t('communityGuidelines') }}</a>
             </li>
             <li>
               <router-link to="/hall/contributors">
@@ -76,17 +88,23 @@
               </router-link>
             </li>
             <li>
-              <a href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
+              <a
-                 target="_blank">{{ $t('requestFeature') }}</a>
+                href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
+                target="_blank"
+              >{{ $t('requestFeature') }}</a>
             </li>
             <li v-html="$t('communityExtensions')"></li>
             <li>
-              <a href="https://www.facebook.com/Habitica"
+              <a
-                 target="_blank">{{ $t('communityFacebook') }}</a>
+                href="https://www.facebook.com/Habitica"
+                target="_blank"
+              >{{ $t('communityFacebook') }}</a>
             </li>
             <li>
-              <a href="https://www.instagram.com/habitica"
+              <a
-                 target="_blank">{{ $t('communityInstagram') }}</a>
+                href="https://www.instagram.com/habitica"
+                target="_blank"
+              >{{ $t('communityInstagram') }}</a>
             </li>
           </ul>
         </div>
@@ -96,39 +114,57 @@
               <h3>{{ $t('footerDevs') }}</h3>
               <ul>
                 <li>
-                  <a href="/apidoc"
+                  <a
-                     target="_blank">{{ $t('APIv3') }}</a>
+                    href="/apidoc"
+                    target="_blank"
+                  >{{ $t('APIv3') }}</a>
                 </li>
                 <li>
-                  <a :href="getDataDisplayToolUrl"
+                  <a
-                     target="_blank">{{ $t('dataDisplayTool') }}</a>
+                    :href="getDataDisplayToolUrl"
+                    target="_blank"
+                  >{{ $t('dataDisplayTool') }}</a>
                 </li>
                 <li>
-                  <a href="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
+                  <a
-                     target="_blank">{{ $t('guidanceForBlacksmiths') }}</a>
+                    href="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
+                    target="_blank"
+                  >{{ $t('guidanceForBlacksmiths') }}</a>
                 </li>
               </ul>
             </div>
             <div class="col-6 social">
               <h3>{{ $t('footerSocial') }}</h3>
               <div class="icons">
-                <a class="social-circle"
+                <a
-                   href="https://twitter.com/habitica"
+                  class="social-circle"
-                   target="_blank">
+                  href="https://twitter.com/habitica"
-                  <div class="social-icon svg-icon"
+                  target="_blank"
-                       v-html="icons.twitter"></div>
+                >
+                  <div
+                    class="social-icon svg-icon"
+                    v-html="icons.twitter"
+                  ></div>
                 </a>
-                <a class="social-circle"
+                <a
-                   href="https://www.instagram.com/habitica/"
+                  class="social-circle"
-                   target="_blank">
+                  href="https://www.instagram.com/habitica/"
-                  <div class="social-icon svg-icon instagram"
+                  target="_blank"
-                       v-html="icons.instagram"></div>
+                >
+                  <div
+                    class="social-icon svg-icon instagram"
+                    v-html="icons.instagram"
+                  ></div>
                 </a>
-                <a class="social-circle"
+                <a
-                   href="https://www.facebook.com/Habitica"
+                  class="social-circle"
-                   target="_blank">
+                  href="https://www.facebook.com/Habitica"
-                  <div class="social-icon facebook svg-icon"
+                  target="_blank"
-                       v-html="icons.facebook"></div>
+                >
+                  <div
+                    class="social-icon facebook svg-icon"
+                    v-html="icons.facebook"
+                  ></div>
                 </a>
               </div>
             </div>
@@ -138,21 +174,31 @@
               {{ $t('donateText3') }}
             </div>
             <div class="col-12 col-md-4">
-              <button v-if="user"
+              <button
-                      class="btn btn-contribute btn-front btn-flat"
+                v-if="user"
-                      @click="donate()">
+                class="btn btn-contribute btn-front btn-flat"
-                <div class="svg-icon heart"
+                @click="donate()"
-                     v-html="icons.heart"></div>
+              >
+                <div
+                  class="svg-icon heart"
+                  v-html="icons.heart"
+                ></div>
                 <div class="text">
                   {{ $t('companyDonate') }}
                 </div>
               </button>
-              <div v-else
+              <div
-                   class="btn btn-contribute btn-front btn-flat">
+                v-else
-                <a href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
+                class="btn btn-contribute btn-front btn-flat"
-                   target="_blank">
+              >
-                  <div class="svg-icon heart"
+                <a
-                       v-html="icons.heart"></div>
+                  href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
+                  target="_blank"
+                >
+                  <div
+                    class="svg-icon heart"
+                    v-html="icons.heart"
+                  ></div>
                   <div class="text">{{ $t('companyContribute') }}</div>
                 </a>
               </div>
@@ -168,62 +214,106 @@
       <div class="row">
         <div class="col-12 col-md-5 text-center text-md-left">
           © 2021 Habitica. All rights reserved.
-          <div v-if="!IS_PRODUCTION && isUserLoaded"
+          <div
-               class="debug float-left">
+            v-if="!IS_PRODUCTION && isUserLoaded"
-            <button class="btn btn-primary"
+            class="debug float-left"
-                    @click="debugMenuShown = !debugMenuShown">
+          >
+            <button
+              class="btn btn-primary"
+              @click="debugMenuShown = !debugMenuShown"
+            >
               Toggle Debug Menu
             </button>
-            <div v-if="debugMenuShown"
+            <div
-                 class="debug-group">
+              v-if="debugMenuShown"
-              <a class="btn btn-secondary"
+              class="debug-group"
-                 @click="setHealthLow()">Health = 1</a>
+            >
-              <a class="btn btn-secondary"
+              <a
-                 @click="addMissedDay(1)">+1 Missed Day</a>
+                class="btn btn-secondary"
-              <a class="btn btn-secondary"
+                @click="setHealthLow()"
-                 @click="addMissedDay(2)">+2 Missed Days</a>
+              >Health = 1</a>
-              <a class="btn btn-secondary"
+              <a
-                 @click="addMissedDay(8)">+8 Missed Days</a>
+                class="btn btn-secondary"
-              <a class="btn btn-secondary"
+                @click="addMissedDay(1)"
-                 @click="addMissedDay(32)">+32 Missed Days</a>
+              >+1 Missed Day</a>
-              <a class="btn btn-secondary"
+              <a
-                 @click="addTenGems()">+10 Gems</a>
+                class="btn btn-secondary"
-              <a class="btn btn-secondary"
+                @click="addMissedDay(2)"
-                 @click="addHourglass()">+1 Mystic Hourglass</a>
+              >+2 Missed Days</a>
-              <a class="btn btn-secondary"
+              <a
-                 @click="addGold()">+500GP</a>
+                class="btn btn-secondary"
-              <a class="btn btn-secondary"
+                @click="addMissedDay(8)"
-                 @click="plusTenHealth()">+ 10HP</a>
+              >+8 Missed Days</a>
-              <a class="btn btn-secondary"
+              <a
-                 @click="addMana()">+MP</a>
+                class="btn btn-secondary"
-              <a class="btn btn-secondary"
+                @click="addMissedDay(32)"
-                 @click="addLevelsAndGold()">+Exp +GP +MP</a>
+              >+32 Missed Days</a>
-              <a class="btn btn-secondary"
+              <a
-                 @click="addExp()">+Exp</a>
+                class="btn btn-secondary"
-              <a class="btn btn-secondary"
+                @click="addTenGems()"
-                 @click="addOneLevel()">+1 Level</a>
+              >+10 Gems</a>
-              <a class="btn btn-secondary"
+              <a
-                 tooltip="+1000 to boss quests. 300 items to collection quests"
+                class="btn btn-secondary"
-                 @click="addQuestProgress()">Quest Progress Up</a>
+                @click="addHourglass()"
-              <a class="btn btn-secondary"
+              >+1 Mystic Hourglass</a>
-                 @click="makeAdmin()">Make Admin</a>
+              <a
-              <a class="btn btn-secondary"
+                class="btn btn-secondary"
-                 @click="openModifyInventoryModal()">Modify Inventory</a>
+                @click="addGold()"
+              >+500GP</a>
+              <a
+                class="btn btn-secondary"
+                @click="plusTenHealth()"
+              >+ 10HP</a>
+              <a
+                class="btn btn-secondary"
+                @click="addMana()"
+              >+MP</a>
+              <a
+                class="btn btn-secondary"
+                @click="addLevelsAndGold()"
+              >+Exp +GP +MP</a>
+              <a
+                class="btn btn-secondary"
+                @click="addExp()"
+              >+Exp</a>
+              <a
+                class="btn btn-secondary"
+                @click="addOneLevel()"
+              >+1 Level</a>
+              <a
+                class="btn btn-secondary"
+                tooltip="+1000 to boss quests. 300 items to collection quests"
+                @click="addQuestProgress()"
+              >Quest Progress Up</a>
+              <a
+                class="btn btn-secondary"
+                @click="makeAdmin()"
+              >Make Admin</a>
+              <a
+                class="btn btn-secondary"
+                @click="openModifyInventoryModal()"
+              >Modify Inventory</a>
             </div>
           </div>
         </div>
         <div class="col-12 col-md-2 text-center">
-          <div class="logo svg-icon"
+          <div
-               v-html="icons.gryphon"></div>
+            class="logo svg-icon"
+            v-html="icons.gryphon"
+          ></div>
         </div>
         <div class="col-12 col-md-5 text-center text-md-right my-1">
           <span class="ml-4">
-            <a target="_blank"
+            <a
-               href="/static/privacy">{{ $t('privacy') }}</a>
+              target="_blank"
+              href="/static/privacy"
+            >{{ $t('privacy') }}</a>
           </span>
           <span class="ml-4">
-            <a target="_blank"
+            <a
-               href="/static/terms">{{ $t('terms') }}</a>
+              target="_blank"
+              href="/static/terms"
+            >{{ $t('terms') }}</a>
           </span>
         </div>
       </div>

website/client/src/components/avatarModal/body-settings.vue

@@ -43,7 +43,6 @@ import gem from '@/assets/svg/gem.svg';
 const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
 const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
 
-
 export default {
   components: {
     subMenu,

website/client/src/components/avatarModal/customize-options.vue

@@ -332,7 +332,6 @@ export default {
     margin-right: 12px;
     margin-bottom: 12px;
 
-
     width: calc(100% - 24px);
 
     padding-left: 0;
@@ -342,5 +341,4 @@ export default {
     flex: unset;
   }
 
-
 </style>

website/client/src/components/avatarModal/extra-settings.vue

@@ -68,7 +68,6 @@ import gem from '@/assets/svg/gem.svg';
 const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
 const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
 
-
 export default {
   components: {
     subMenu,

website/client/src/components/avatarModal/skin-settings.vue

@@ -41,7 +41,6 @@ import subMenu from './sub-menu';
 import customizeOptions from './customize-options';
 import gem from '@/assets/svg/gem.svg';
 
-
 const skinsBySet = groupBy(appearance.skin, 'set.key');
 
 const freeSkinKeys = skinsBySet[undefined].map(s => s.key);

website/client/src/components/challenges/findChallenges.vue

@@ -32,7 +32,7 @@
       <div class="row">
         <div
           v-if="!loading &&
-          this.filteredChallenges.length === 0"
+            this.filteredChallenges.length === 0"
           class="no-challenges text-center col-md-6 offset-3"
         >
           <h2 v-once>
@@ -124,7 +124,6 @@ import challengeUtilities from '@/mixins/challengeUtilities';
 
 import positiveIcon from '@/assets/svg/positive.svg';
 
-
 export default {
   components: {
     Sidebar,

website/client/src/components/challenges/myChallenges.vue

@@ -149,7 +149,6 @@ import challengeUtilities from '@/mixins/challengeUtilities';
 import challengeIcon from '@/assets/svg/challenge.svg';
 import positiveIcon from '@/assets/svg/positive.svg';
 
-
 export default {
   components: {
     Sidebar,

website/client/src/components/creatorIntro.vue

@@ -826,7 +826,6 @@
       }
     }
 
-
     .text-center {
       .gem-lock, .gold-lock {
         display: inline-block;

website/client/src/components/faceAvatar.stories.js

@@ -7,7 +7,6 @@ import { userStyles } from '../../config/storybook/mock.data';
 import content from '../../../common/script/content/index';
 import getters from '@/store/getters';
 
-
 storiesOf('Face Avatar', module)
   .add('simple', () => ({
     components: { FaceAvatar },

website/client/src/components/groups/group.stories.utils.js

@@ -226,7 +226,6 @@ export const groupCollectionQuestPending = {
   id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
 };
 
-
 export const collectionQuestLeaderParticipating = {
   leaderOnly: { challenges: false, getGems: false },
   quest: {

website/client/src/components/groups/invitationListModal.vue

@@ -8,7 +8,10 @@
     <div class="dialog-close">
       <close-icon @click="close()" />
     </div>
-    <h2 class="text-center textCondensed" v-once>
+    <h2
+      v-once
+      class="text-center textCondensed"
+    >
       {{ $t('invitations') }}
     </h2>
     <div
@@ -24,17 +27,22 @@
         />
       </div>
       <div class="usernames">
-        <user-label :user="member" class="user-label" /> <br>
+        <user-label
+          :user="member"
+          class="user-label"
+        /> <br>
         <span class="username">
           @{{ member.auth.local.username }}
         </span>
       </div>
-      <div :class="{
+      <div
-        'status': true,
+        :class="{
-        'accepted': member.accepted === true,
+          'status': true,
-        'declined': member.accepted === false,
+          'accepted': member.accepted === true,
-        'pending': member.accepted === null
+          'declined': member.accepted === false,
-      }">
+          'pending': member.accepted === null
+        }"
+      >
         <div
           v-if="member.accepted === true"
           class="accepted float-right"
@@ -243,6 +251,7 @@ export default {
     ClassBadge,
     CloseIcon,
   },
+  props: ['group'],
   data () {
     return {
       icons: Object.freeze({
@@ -251,7 +260,6 @@ export default {
       }),
     };
   },
-  props: ['group'],
   computed: {
     ...mapGetters({
       partyMembers: 'party:members',

website/client/src/components/groups/myGuilds.vue

@@ -112,7 +112,6 @@ b-dropdown(:text="$t('sort')", right=true)
 import { mapState } from '@/libs/store';
 import groupUtilities from '@/mixins/groupsUtilities';
 
-
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 

website/client/src/components/groups/participantListModal.vue

@@ -8,7 +8,10 @@
     <div class="dialog-close">
       <close-icon @click="close()" />
     </div>
-    <h2 class="text-center textCondensed" v-once>
+    <h2
+      v-once
+      class="text-center textCondensed"
+    >
       {{ $t('participantsTitle') }}
     </h2>
     <div
@@ -111,7 +114,6 @@
     }
   }
 
-
   #participant-list_modal_body {
     padding: 0;
     max-height: 450px;

website/client/src/components/groups/questDetailModal.vue

@@ -13,7 +13,10 @@
     <h2 class="text-center textCondensed">
       {{ selectMode ? $t('selectQuest') : $t('questDetailsTitle') }}
     </h2>
-    <div class="quest-panel" v-if="selectMode">
+    <div
+      v-if="selectMode"
+      class="quest-panel"
+    >
       <div class="quest-panel-header">
         <h3>
           {{ $t('yourQuests') }}
@@ -77,13 +80,19 @@
       </div>
     </div>
     <div v-else>
-      <div v-if="questData" class="quest-combined-content">
+      <div
+        v-if="questData"
+        class="quest-combined-content"
+      >
         <questDialogContent
           :item="questData"
           :group="group"
           class="quest-detail"
         />
-        <quest-rewards :quest="questData" class="mt-4" />
+        <quest-rewards
+          :quest="questData"
+          class="mt-4"
+        />
       </div>
       <div
         v-if="!groupHasQuest"

website/client/src/components/groups/questSidebarSection.vue

@@ -6,9 +6,9 @@
     >
       <div class="col-12 text-center">
         <div
+          v-once
           class="svg-icon quest-icon color"
           v-html="icons.questIcon"
-          v-once
         ></div>
         <h4 v-once>
           {{ $t('yourPartyIsNotOnQuest') }}
@@ -86,8 +86,10 @@
                 </div>
               </div>
             </div>
-            <div v-if="hasPendingQuestItems"
+            <div
-                 class="item-progress-pending mb-2">
+              v-if="hasPendingQuestItems"
+              class="item-progress-pending mb-2"
+            >
               <div class="pending-amount pt-2 pb-2">
                 {{ $t('questItemsPending', { amount: user.party.quest.progress.collectedItems }) }}
               </div>
@@ -126,9 +128,9 @@
               <div class="col-6">
                 <span class="float-left hp-value">
                   <div
+                    v-once
                     class="svg-icon health-icon"
                     v-html="icons.healthNoPaddingIcon"
-                    v-once
                   ></div>
                   {{
                     (Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100)
@@ -151,9 +153,9 @@
                   progress on the group doc? Each user could have different progress.-->
                 <span class="float-right pending-value">
                   <div
+                    v-once
                     class="svg-icon sword-icon"
                     v-html="icons.swordIcon"
-                    v-once
                   ></div>
                   {{
                     (user.party.quest.progress.up || 0)
@@ -187,9 +189,9 @@
               <div class="col-6">
                 <span class="float-left rage-value">
                   <div
+                    v-once
                     class="svg-icon rage-icon icon-16"
                     v-html="icons.rageIcon"
-                    v-once
                   >
                   </div>
                   <span
@@ -229,8 +231,10 @@
         ></div>
       </div>
     </div>
-    <div v-if="onPendingQuest || onActiveQuest"
+    <div
-         class="quest-buttons">
+      v-if="onPendingQuest || onActiveQuest"
+      class="quest-buttons"
+    >
       <button
         class="btn btn-secondary w-100"
         @click="openQuestDetails()"
@@ -238,8 +242,10 @@
         {{ $t('viewDetails') }}
       </button>
     </div>
-    <div v-if="userIsQuestLeader && !onActiveQuest"
+    <div
-         class="quest-buttons">
+      v-if="userIsQuestLeader && !onActiveQuest"
+      class="quest-buttons"
+    >
       <button
         class="btn btn-success w-100"
         @click="startQuest()"

website/client/src/components/groups/rightSidebar.vue

@@ -25,9 +25,9 @@
           >
             <template v-slot:button-content>
               <span
+                v-once
                 class="svg-icon inline menuIcon"
                 v-html="icons.menuIcon"
-                v-once
               >
               </span>
             </template>
@@ -38,9 +38,9 @@
             >
               <span class="with-icon">
                 <span
+                  v-once
                   class="svg-icon icon-16 color"
                   v-html="icons.sparklesIcon"
-                  v-once
                 ></span>
                 <span v-once>
                   {{ $t('upgradeToGroup') }}
@@ -54,9 +54,9 @@
             >
               <span class="with-icon">
                 <span
+                  v-once
                   class="svg-icon icon-16 color"
                   v-html="icons.usersIcon"
-                  v-once
                 ></span>
                 <span v-once>
                   {{ $t(isParty ? 'inviteToParty' : 'inviteToGuild') }}
@@ -69,9 +69,9 @@
             >
               <span class="with-icon">
                 <span
+                  v-once
                   class="svg-icon icon-16 color"
                   v-html="icons.messageIcon"
-                  v-once
                 ></span>
                 <span v-once>
                   {{ $t(isParty ? 'messagePartyLeader' : 'messageGuildLeader') }}
@@ -85,9 +85,9 @@
             >
               <span class="with-icon">
                 <span
+                  v-once
                   class="svg-icon icon-16 color"
                   v-html="icons.editIcon"
-                  v-once
                 ></span>
                 <span v-once>
                   {{ isParty ? $t('editParty') : $t('editGuild') }}
@@ -101,9 +101,9 @@
             >
               <span class="with-icon">
                 <span
+                  v-once
                   class="svg-icon icon-16 color"
                   v-html="icons.leaveIcon"
-                  v-once
                 ></span>
                 <span v-once>
                   {{ isParty ? $t('leaveParty') : $t('leaveGuild') }}
@@ -150,7 +150,6 @@ import editIcon from '@/assets/svg/edit.svg';
 import messageIcon from '@/assets/svg/message.svg';
 import usersIcon from '@/assets/svg/users.svg';
 
-
 export default {
   components: {
     groupChallenges,

website/client/src/components/header/menu.vue

@@ -744,7 +744,6 @@ import selectUserModal from '@/components/payments/selectUserModal';
 import sync from '@/mixins/sync';
 import userDropdown from './userDropdown';
 
-
 export default {
   components: {
     creatorIntro,

website/client/src/components/inventory/equipment/attributesGrid.vue

@@ -40,7 +40,6 @@
 
   @import '~@/assets/scss/colors.scss';
 
-
   .attributes-group {
     border-radius: 4px;
     // unless we have a way to give a popover an id or class, it needs expand the attributes area

website/client/src/components/inventory/equipment/index.vue

@@ -432,7 +432,6 @@ export default {
         }
       });
 
-
       each(this.gearTypesToStrings, (string, type) => {
         this.viewOptions[type].firstRender = false; // eslint-disable-line vue/no-side-effects-in-computed-properties, max-len
       });

website/client/src/components/inventory/stable/foodItem.vue

@@ -44,7 +44,6 @@ import DragDropDirective from '@/directives/dragdrop.directive';
 
 import CountBadge from '@/components/ui/countBadge';
 
-
 export default {
   components: {
     CountBadge,

website/client/src/components/inventory/stable/index.vue

@@ -582,7 +582,6 @@ export default {
         });
       });
 
-
       return petGroups;
     },
     mountGroups () {
@@ -627,7 +626,6 @@ export default {
         });
       });
 
-
       return mountGroups;
     },
     drawerTabs () {

website/client/src/components/inventory/stable/mountRaisedModal.vue

@@ -35,7 +35,6 @@
   </b-modal>
 </template>
 
-
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
   @import '~@/assets/scss/mixins.scss';
@@ -80,7 +79,6 @@
   }
 </style>
 
-
 <script>
 import markdownDirective from '@/directives/markdown';
 import { mountInfo } from '@/../../common/script/content/stable';

website/client/src/components/memberDetailsNew.vue

@@ -28,11 +28,11 @@
               :name="member.profile.name"
               :backer="member.backer"
               :contributor="member.contributor"
-              :smallerStyle="true"
+              :smaller-style="true"
             />
             <inline-class-badge
-              class="inline-class-badge"
               v-if="member.stats"
+              class="inline-class-badge"
               :member-class="member.stats.class"
             />
           </h3>
@@ -72,8 +72,8 @@
         :show-numbers="false"
       />
       <stats-bar
-        class="mt-75 stats-bar"
         v-if="hasClass"
+        class="mt-75 stats-bar"
         :icon="icons.mana"
         :value="member.stats.mp"
         :max-value="maxMP"

website/client/src/components/members/classBadge.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="class-badge d-flex justify-content-center"
+  <div
-       :style="{'--badge-size': badgeSize + 'px'}">
+    class="class-badge d-flex justify-content-center"
+    :style="{'--badge-size': badgeSize + 'px'}"
+  >
     <div
       class="align-self-center svg-icon"
       :aria-label="$t(memberClass)"

website/client/src/components/messages/messageList.vue

@@ -185,7 +185,6 @@
     margin-bottom: 1rem;
   }
 
-
 </style>
 
 <script>

website/client/src/components/payments/selectUserModal.vue

@@ -6,15 +6,15 @@
     @hide="onHide()"
   >
     <div
-      class="g1g1 d-flex flex-column text-center justify-content-center align-items-center"
       v-if="currentEvent && currentEvent.promo === 'g1g1'"
+      class="g1g1 d-flex flex-column text-center justify-content-center align-items-center"
     >
       <h1> {{ $t('g1g1') }} </h1>
       <p> {{ $t('g1g1Returning') }} </p>
     </div>
     <h2
-      class="ml-2"
       v-else
+      class="ml-2"
     >
       {{ $t('sendGift') }}
     </h2>
@@ -76,15 +76,15 @@
           <a
             class="cancel-link mx-auto mt-3"
             @click="close()"
-            >
+          >
             {{ $t('cancel') }}
           </a>
         </div>
       </div>
     </div>
     <div
-      class="g1g1-fine-print text-center pt-3"
       slot="modal-footer"
+      class="g1g1-fine-print text-center pt-3"
     >
       <strong>
         {{ $t ('howItWorks') }}

website/client/src/components/settings/index.vue

@@ -46,8 +46,8 @@
       </router-link>
     </secondary-menu>
     <div
-      class="g1g1-banner d-flex justify-content-center"
       v-if="$route.name === 'subscription' && promo === 'g1g1'"
+      class="g1g1-banner d-flex justify-content-center"
     >
       <div
         v-once
@@ -61,7 +61,9 @@
         > {{ $t('g1g1Event') }} </strong>
         <p
           class="mb-auto"
-        > {{ $t('g1g1Details') }} </p>
+        >
+          {{ $t('g1g1Details') }}
+        </p>
       </div>
       <div
         v-once

website/client/src/components/settings/subscriptionOptions.vue

@@ -41,7 +41,6 @@
   </div>
 </template>
 
-
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
   #subscription-form {

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

@@ -163,7 +163,7 @@
     </div>
     <countdown-banner
       v-if="item.event && item.owned == null"
-      :endDate = "endDate"
+      :end-date="endDate"
     />
     <div
       v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"

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

@@ -68,6 +68,9 @@ export default {
     this.countdownString();
     this.timer = setInterval(this.countdownString, 1000);
   },
+  beforeDestroy () {
+    this.cancelAutoUpdate();
+  },
   methods: {
     countdownString () {
       const diffDuration = moment.duration(moment(this.endDate).diff(moment()));
@@ -98,8 +101,5 @@ export default {
       clearInterval(this.timer);
     },
   },
-  beforeDestroy () {
-    this.cancelAutoUpdate();
-  },
 };
 </script>

website/client/src/components/shops/market/categoryRow.vue

@@ -110,6 +110,9 @@ export default {
     this.countdownString();
     this.timer = setInterval(this.countdownString, 1000);
   },
+  beforeDestroy () {
+    this.cancelAutoUpdate();
+  },
   methods: {
     itemSelected (item) {
       this.$root.$emit('buyModal::showItem', item);
@@ -141,8 +144,5 @@ export default {
       clearInterval(this.timer);
     },
   },
-  beforeDestroy () {
-    this.cancelAutoUpdate();
-  },
 };
 </script>

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

@@ -111,7 +111,6 @@
     height: 38px; // button + margin + padding
   }
 
-
   .icon-48 {
     width: 48px;
     height: 48px;
@@ -146,7 +145,6 @@
   }
 </style>
 
-
 <script>
 import _filter from 'lodash/filter';
 import _map from 'lodash/map';

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

@@ -17,7 +17,7 @@
       <close-icon @click="hideDialog()" />
     </div>
     <h2 class="text-center textCondensed">
-      {{$t('questDetailsTitle') }}
+      {{ $t('questDetailsTitle') }}
     </h2>
     <div
       v-if="item != null"
@@ -82,7 +82,7 @@
     </div>
     <countdown-banner
       v-if="item.event"
-      :endDate="endDate"
+      :end-date="endDate"
     />
     <div
       slot="modal-footer"

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

@@ -396,7 +396,6 @@
   }
 </style>
 
-
 <script>
 import _filter from 'lodash/filter';
 import _sortBy from 'lodash/sortBy';
@@ -426,7 +425,6 @@ import FilterGroup from '@/components/ui/filterGroup';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
 import QuestPopover from './questPopover';
 
-
 export default {
   components: {
     QuestPopover,

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

@@ -28,7 +28,6 @@
   </div>
 </template>
 
-
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
@@ -80,11 +79,6 @@ export default {
     UserLabel,
     QuestInfo,
   },
-  data () {
-    return {
-      leader: null,
-    };
-  },
   props: {
     item: {
       type: Object,
@@ -93,18 +87,10 @@ export default {
       type: Object,
     },
   },
-  async created () {
+  data () {
-    if (this.group && this.group.quest && this.group.quest.active) {
+    return {
-      try {
+      leader: null,
-        const fetchMemberResult = await this.$store.dispatch('members:fetchMember', {
+    };
-          memberId: this.group.quest.leader,
-        });
-
-        this.leader = fetchMemberResult;
-      } catch {
-        this.leader = null;
-      }
-    }
   },
   computed: {
     itemText () {
@@ -120,5 +106,18 @@ export default {
       return this.item.notes;
     },
   },
+  async created () {
+    if (this.group && this.group.quest && this.group.quest.active) {
+      try {
+        const fetchMemberResult = await this.$store.dispatch('members:fetchMember', {
+          memberId: this.group.quest.leader,
+        });
+
+        this.leader = fetchMemberResult;
+      } catch {
+        this.leader = null;
+      }
+    }
+  },
 };
 </script>

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

@@ -177,6 +177,9 @@ export default {
     this.countdownString();
     this.timer = setInterval(this.countdownString, 1000);
   },
+  beforeDestroy () {
+    this.cancelAutoUpdate();
+  },
   methods: {
     stars () {
       const result = [];
@@ -230,8 +233,5 @@ export default {
       clearInterval(this.timer);
     },
   },
-  beforeDestroy () {
-    this.cancelAutoUpdate();
-  },
 };
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="quest-rewards"
     v-if="quest.drop"
+    class="quest-rewards"
   >
     <div
       class="header d-flex align-items-center"

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

@@ -222,7 +222,6 @@
     width: 50%;
     margin-bottom: 24px;
 
-
     .items {
       border-radius: 2px;
       background-color: #edecee;

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

@@ -327,6 +327,9 @@ export default {
       }
     });
   },
+  beforeDestroy () {
+    this.cancelAutoUpdate();
+  },
   methods: {
     click () {
       this.$emit('click', {});
@@ -377,8 +380,5 @@ export default {
       clearInterval(this.timer);
     },
   },
-  beforeDestroy () {
-    this.cancelAutoUpdate();
-  },
 };
 </script>

website/client/src/components/sidebarSection.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="section" :class="{'visible':visible}">
+  <div
+    class="section"
+    :class="{'visible':visible}"
+  >
     <div class="section-header d-flex align-items-center">
       <h3
         v-once

website/client/src/components/static/home.vue

@@ -773,7 +773,6 @@
     }
   }
 
-
   @media only screen and (max-width: 768px) {
     #call-to-action .btn-primary {
       width: 95%;

website/client/src/components/tasks/column.vue

@@ -87,7 +87,7 @@
         ref="tasksList"
         class="sortable-tasks"
         :options="{disabled: activeFilter.label === 'scheduled' || !canBeDragged(),
-          scrollSensitivity: 64}"
+                   scrollSensitivity: 64}"
         :delay-on-touch-only="true"
         :delay="100"
         @update="taskSorted"

website/client/src/components/tasks/modal-controls/multiList.vue

@@ -37,7 +37,6 @@
   </div>
 </template>
 
-
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
 

website/client/src/components/tasks/modal-controls/selectDifficulty.vue

@@ -139,7 +139,6 @@ import difficultyMediumIcon from '@/assets/svg/difficulty-medium.svg';
 import difficultyHardIcon from '@/assets/svg/difficulty-hard.svg';
 import selectList from '@/components/ui/selectList';
 
-
 export default {
   components: {
     selectList,

website/client/src/components/tasks/user.vue

@@ -87,7 +87,10 @@
                           </div>
                         </div>
                       </div>
-                      <div v-if="tagsType.key === 'tags'" class="col-6 dragSpace">
+                      <div
+                        v-if="tagsType.key === 'tags'"
+                        class="col-6 dragSpace"
+                      >
                         <input
                           v-model="newTag"
                           class="new-tag-item edit-tag-item inline-edit-input form-control"

website/client/src/components/ui/itemRows.vue

@@ -47,7 +47,6 @@ import ResizeDirective from '@/directives/resize.directive';
 import openedItemRowsMixin from '@/mixins/openedItemRows';
 import ShowMoreButton from '@/components/ui/showMoreButton';
 
-
 export default {
   components: { ShowMoreButton },
   directives: {

website/client/src/components/ui/statsbar.vue

@@ -17,7 +17,10 @@
         :style="{width: `${percent(value, maxValue)}%`}"
       ></div>
     </div>
-    <span class="small-text" v-if="showNumbers">
+    <span
+      v-if="showNumbers"
+      class="small-text"
+    >
       {{ value | statFloor }} / {{ maxValue }}
     </span>
     <b-tooltip

website/client/src/components/userMenu/profile.vue

@@ -719,7 +719,6 @@ import achievementsLib from '@/../../common/script/libs/achievements';
 import Content from '@/../../common/script/content';
 import profileStats from './profileStats';
 
-
 import message from '@/assets/svg/message.svg';
 import gift from '@/assets/svg/gift.svg';
 import block from '@/assets/svg/block.svg';

website/client/src/components/userMenu/profileStats.vue

@@ -337,7 +337,6 @@ import autoAllocate from '@/../../common/script/fns/autoAllocate';
 import allocateBulk from '@/../../common/script/ops/stats/allocateBulk';
 import statsComputed from '@/../../common/script/libs/statsComputed';
 
-
 const DROP_ANIMALS = keys(Content.pets);
 const TOTAL_NUMBER_OF_DROP_ANIMALS = DROP_ANIMALS.length;
 export default {
@@ -694,7 +693,6 @@ export default {
     margin-top: 1em;
   }
 
-
     .gear.box {
       vertical-align: top;
       margin: 0 auto;

website/client/src/directives/dragdrop.directive.js

@@ -1,7 +1,6 @@
 /*
 import {emit} from './directive.common';
 
-
 import _keys from 'lodash/keys';
 import _without from 'lodash/without';
 */

website/client/src/libs/payments.js

@@ -1,6 +1,5 @@
 import getStore from '@/store';
 
-
 export function setup () { // eslint-disable-line import/prefer-default-export
   const store = getStore();
 

website/client/src/libs/userlocalManager.js

@@ -35,7 +35,6 @@ function removeLocalSetting (key) {
   return localStorage.removeItem(key);
 }
 
-
 export {
   CONSTANTS,
   getLocalSetting,