4.204.2

Merge branch 'develop' into release
fix(analytics): reduce item drop firehose
2026-05-21 19:59:57 -05:00 · 2021-09-01 14:53:30 -05:00 · 2021-09-01 14:53:20 -05:00 · 2021-08-30 17:54:21 -05:00 · 2021-08-30 16:26:28 -05:00 · 2021-08-30 16:26:10 -05:00
669 changed files with 42898 additions and 37941 deletions
@@ -0,0 +1,138 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20210824_pet_group_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['FlyingPig-Base']
+      && pets['FlyingPig-CottonCandyBlue']
+      && pets['FlyingPig-CottonCandyPink']
+      && pets['FlyingPig-Desert']
+      && pets['FlyingPig-Golden']
+      && pets['FlyingPig-Red']
+      && pets['FlyingPig-Shade']
+      && pets['FlyingPig-Skeleton']
+      && pets['FlyingPig-White']
+      && pets['FlyingPig-Zombie']
+      && pets['Ferret-Base']
+      && pets['Ferret-CottonCandyBlue']
+      && pets['Ferret-CottonCandyPink']
+      && pets['Ferret-Desert']
+      && pets['Ferret-Golden']
+      && pets['Ferret-Red']
+      && pets['Ferret-Shade']
+      && pets['Ferret-Skeleton']
+      && pets['Ferret-White']
+      && pets['Ferret-Zombie']
+      && pets['GuineaPig-Base']
+      && pets['GuineaPig-CottonCandyBlue']
+      && pets['GuineaPig-CottonCandyPink']
+      && pets['GuineaPig-Desert']
+      && pets['GuineaPig-Golden']
+      && pets['GuineaPig-Red']
+      && pets['GuineaPig-Shade']
+      && pets['GuineaPig-Skeleton']
+      && pets['GuineaPig-White']
+      && pets['GuineaPig-Zombie']
+      && pets['Rooster-Base']
+      && pets['Rooster-CottonCandyBlue']
+      && pets['Rooster-CottonCandyPink']
+      && pets['Rooster-Desert']
+      && pets['Rooster-Golden']
+      && pets['Rooster-Red']
+      && pets['Rooster-Shade']
+      && pets['Rooster-Skeleton']
+      && pets['Rooster-White']
+      && pets['Rooster-Zombie']
+      && pets['Rat-Base']
+      && pets['Rat-CottonCandyBlue']
+      && pets['Rat-CottonCandyPink']
+      && pets['Rat-Desert']
+      && pets['Rat-Golden']
+      && pets['Rat-Red']
+      && pets['Rat-Shade']
+      && pets['Rat-Skeleton']
+      && pets['Rat-White']
+      && pets['Rat-Zombie']
+      && pets['Bunny-Base']
+      && pets['Bunny-CottonCandyBlue']
+      && pets['Bunny-CottonCandyPink']
+      && pets['Bunny-Desert']
+      && pets['Bunny-Golden']
+      && pets['Bunny-Red']
+      && pets['Bunny-Shade']
+      && pets['Bunny-Skeleton']
+      && pets['Bunny-White']
+      && pets['Bunny-Zombie']
+      && pets['Horse-Base']
+      && pets['Horse-CottonCandyBlue']
+      && pets['Horse-CottonCandyPink']
+      && pets['Horse-Desert']
+      && pets['Horse-Golden']
+      && pets['Horse-Red']
+      && pets['Horse-Shade']
+      && pets['Horse-Skeleton']
+      && pets['Horse-White']
+      && pets['Horse-Zombie']
+      && pets['Cow-Base']
+      && pets['Cow-CottonCandyBlue']
+      && pets['Cow-CottonCandyPink']
+      && pets['Cow-Desert']
+      && pets['Cow-Golden']
+      && pets['Cow-Red']
+      && pets['Cow-Shade']
+      && pets['Cow-Skeleton']
+      && pets['Cow-White']
+      && pets['Cow-Zombie']) {
+        set['achievements.domesticated'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    // migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2021-08-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};
@@ -1,19 +1,19 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.198.1",
+  "version": "4.204.2",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/register": "^7.13.16",
-    "@google-cloud/trace-agent": "^5.1.3",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/register": "^7.15.3",
+    "@google-cloud/trace-agent": "^5.1.5",
    "@parse/node-apn": "^4.1.1",
    "@slack/webhook": "^6.0.0",
    "accepts": "^1.3.5",
-    "amazon-payments": "^0.2.8",
+    "amazon-payments": "^0.2.9",
    "amplitude": "^5.1.6",
-    "apidoc": "^0.28.1",
+    "apidoc": "^0.29.0",
    "apple-auth": "^1.0.7",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.18.3",
@@ -43,15 +43,15 @@
    "in-app-purchase": "^1.11.3",
    "js2xmlparser": "^4.0.1",
    "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^2.0.3",
+    "jwks-rsa": "^2.0.4",
    "lodash": "^4.17.21",
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
    "moment": "^2.29.1",
    "moment-recur": "^1.0.7",
-    "mongoose": "^5.12.10",
+    "mongoose": "^5.13.7",
    "morgan": "^1.10.0",
-    "nconf": "^0.11.2",
+    "nconf": "^0.11.3",
    "node-gcm": "^1.0.4",
    "on-headers": "^1.0.2",
    "passport": "^0.4.1",
@@ -61,13 +61,13 @@
    "paypal-rest-sdk": "^1.8.1",
    "pp-ipn": "^1.1.0",
    "ps-tree": "^1.0.0",
-    "rate-limiter-flexible": "^2.2.2",
+    "rate-limiter-flexible": "^2.2.4",
    "redis": "^3.1.2",
-    "regenerator-runtime": "^0.13.7",
+    "regenerator-runtime": "^0.13.9",
    "remove-markdown": "^0.3.0",
    "rimraf": "^3.0.2",
    "short-uuid": "^4.2.0",
-    "stripe": "^8.150.0",
+    "stripe": "^8.170.0",
    "superagent": "^6.1.0",
    "universal-analytics": "^0.4.23",
    "useragent": "^2.1.9",
@@ -114,16 +114,16 @@
    "chai": "^4.3.4",
    "chai-as-promised": "^7.1.1",
    "chai-moment": "^0.1.0",
-    "chalk": "^4.1.1",
+    "chalk": "^4.1.2",
    "cross-spawn": "^7.0.3",
    "expect.js": "^0.3.1",
    "istanbul": "^1.1.0-alpha.1",
    "mocha": "^5.1.1",
    "monk": "^7.3.4",
    "require-again": "^2.0.0",
-    "run-rs": "^0.7.4",
+    "run-rs": "^0.7.5",
    "sinon": "^10.0.0",
-    "sinon-chai": "^3.6.0",
+    "sinon-chai": "^3.7.0",
    "sinon-stub-promise": "^4.0.0"
  },
  "optionalDependencies": {}
@@ -31,7 +31,6 @@ async function deleteAmplitudeData (userId, email) {
      console.log(`${userId} (${email}) Amplitude response: ${response.status} ${response.statusText}`);
    }
  }
-  await new Promise(resolve => setTimeout(resolve, 1000));
 }

 async function deleteHabiticaData (user, email) {
@@ -83,6 +82,7 @@ async function processEmailAddress (email) {
      $or: [
        { 'auth.facebook.emails.value': email },
        { 'auth.google.emails.value': email },
+        { 'auth.apple.emails.value': email },
      ],
    },
    { _id: 1, apiToken: 1, auth: 1 },
@@ -96,6 +96,7 @@ async function processEmailAddress (email) {
    return console.log(`No users found with email address ${email}`);
  }

+  await new Promise(resolve => setTimeout(resolve, 1000));
  return Promise.all(users.map(user => (async () => {
    await deleteAmplitudeData(user._id, email); // eslint-disable-line no-await-in-loop
    await deleteHabiticaData(user, email); // eslint-disable-line no-await-in-loop
@@ -293,90 +293,4 @@ describe('cron middleware', () => {
      });
    });
  });
-
-  context('Drop Cap A/B Test', async () => {
-    it('enrolls web users', async () => {
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.a.string;
-
-          return resolve();
-        });
-      });
-    });
-
-    it('enables the new notification for 50% of users', async () => {
-      sandbox.stub(Math, 'random').returns(0.5);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.equal('drop-cap-notif-enabled');
-
-          return resolve();
-        });
-      });
-    });
-
-    it('disables the new notification for 50% of users', async () => {
-      sandbox.stub(Math, 'random').returns(0.51);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.equal('drop-cap-notif-disabled');
-
-          return resolve();
-        });
-      });
-    });
-
-    it('does not affect subscribers', async () => {
-      sandbox.stub(Math, 'random').returns(0.2);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-      sandbox.stub(User.prototype, 'isSubscribed').returns(true);
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.not.exist;
-
-          return resolve();
-        });
-      });
-    });
-
-    it('does not affect mobile users', async () => {
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-ios';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.not.exist;
-
-          return resolve();
-        });
-      });
-    });
-  });
 });
@@ -488,20 +488,6 @@ describe('Group Model', () => {
          expect(party.quest.progress.collect.soapBars).to.eq(5);
        });

-        it('does not drop an item if not need when on a collection quest', async () => {
-          party.quest.key = 'dilatoryDistress1';
-          party.quest.active = false;
-          await party.startQuest(questLeader);
-          party.quest.progress.collect.fireCoral = 20;
-          await party.save();
-
-          await Group.processQuestProgress(participatingMember, progress);
-
-          party = await Group.findOne({ _id: party._id });
-
-          expect(party.quest.progress.collect.fireCoral).to.eq(20);
-        });
-
        it('sends a chat message about progress', async () => {
          await Group.processQuestProgress(participatingMember, progress);

@@ -538,8 +524,8 @@ describe('Group Model', () => {
          });
        });

-        describe('collection quests with multiple items', () => {
-          it('sends a chat message if no progress is made on quest with multiple items', async () => {
+        describe('collection quests with multiple item types', () => {
+          it('sends a chat message if no progress is made', async () => {
            progress.collectedItems = 0;
            party.quest.key = 'dilatoryDistress1';
            party.quest.active = false;
@@ -609,6 +595,28 @@ describe('Group Model', () => {
          });
        });

+        it('does not drop items when an item type becomes full', async () => {
+          progress.collectedItems = 20;
+          party.quest.key = 'dilatoryDistress1';
+          party.quest.active = false;
+
+          await party.startQuest(questLeader);
+          party.quest.progress.collect.fireCoral = 19;
+          await party.save();
+
+          await Group.processQuestProgress(participatingMember, progress);
+
+          party = await Group.findOne({ _id: party._id });
+
+          // There is a very small chance (~1 in 500K) that blueFins will
+          // be 19 or 20 due to randomness and not any bug. In these cases, this
+          // test doesn't actually verify anything, but it's rare enough that it
+          // shouldn't be a problem, and to make it deterministic would require
+          // stubbing out methods in implementation-specific ways.
+          expect(party.quest.progress.collect.fireCoral).to.be.within(19, 20);
+          expect(party.quest.progress.collect.blueFins).to.be.within(19, 20);
+        });
+
        it('sends message about victory', async () => {
          progress.collectedItems = 500;

@@ -1,5 +1,4 @@
 import randomDrop from '../../../website/common/script/fns/randomDrop';
-import i18n from '../../../website/common/script/i18n';
 import {
  generateUser,
  generateTodo,
@@ -145,148 +144,5 @@ describe('common.fns.randomDrop', () => {
        expect(acceptableDrops).to.contain(user._tmp.drop.key); // always Desert
      });
    });
-
-    context('drop cap notification', () => {
-      let analytics;
-      const req = {};
-      let isSubscribedStub;
-
-      beforeEach(() => {
-        user.addNotification = () => {};
-        sandbox.stub(user, 'addNotification');
-        user.isSubscribed = () => {};
-        isSubscribedStub = sandbox.stub(user, 'isSubscribed');
-        isSubscribedStub.returns(false);
-        analytics = { track () {} };
-        sandbox.stub(analytics, 'track');
-      });
-
-      it('sends a notification if A/B test is enabled when drop cap is reached', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.be.calledOnce;
-        expect(user.addNotification).to.be.calledWith('DROP_CAP_REACHED', {
-          message: i18n.t('dropCapReached'),
-          items: 5,
-        });
-      });
-
-      it('does not send a notification if user is enrolled in disabled A/B test group', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-disabled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('does not send a notification if user is enrolled in disabled A/B test group', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-not-enrolled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('does not send a notification if drop cap is not reached', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(4);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('does not send a notification if user is subscribed', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('tracks drop cap reached event for enrolled users (notification enabled)', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(analytics.track).to.be.calledWith('drop cap reached');
-      });
-
-      it('tracks drop cap reached event for enrolled users (notification disabled)', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-disabled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(analytics.track).to.be.calledWith('drop cap reached');
-      });
-
-      it('does not track drop cap reached event for users not enrolled in A/B test', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-not-enrolled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(analytics.track).to.not.be.calledWith('drop cap reached');
-      });
-    });
  });
 });
@@ -88,14 +88,6 @@ describe('shared.ops.buyMysterySet', () => {
        expect(user.items.gear.owned).to.have.property('armor_mystery_301404', true);
        expect(user.items.gear.owned).to.have.property('head_mystery_301404', true);
        expect(user.items.gear.owned).to.have.property('eyewear_mystery_301404', true);
-        expect(analytics.track).to.be.calledOnce;
-        expect(analytics.track).to.be.calledWithMatch('acquire item', {
-          uuid: user._id,
-          itemKey: '301404',
-          itemType: 'Subscriber Gear',
-          acquireMethod: 'Hourglass',
-          category: 'behavior',
-        });
      });
    });
  });
@@ -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: {
@@ -2,42 +2,14 @@
 import { configure } from '@storybook/vue';
 import './margin.css';
 import '../../src/assets/scss/index.scss';
-import '../../src/assets/css/sprites.css';

-import '../../src/assets/css/sprites/spritesmith-main-0.css';
-import '../../src/assets/css/sprites/spritesmith-main-1.css';
-import '../../src/assets/css/sprites/spritesmith-main-2.css';
-import '../../src/assets/css/sprites/spritesmith-main-3.css';
-import '../../src/assets/css/sprites/spritesmith-main-4.css';
-import '../../src/assets/css/sprites/spritesmith-main-5.css';
-import '../../src/assets/css/sprites/spritesmith-main-6.css';
-import '../../src/assets/css/sprites/spritesmith-main-7.css';
-import '../../src/assets/css/sprites/spritesmith-main-8.css';
-import '../../src/assets/css/sprites/spritesmith-main-9.css';
-import '../../src/assets/css/sprites/spritesmith-main-10.css';
-import '../../src/assets/css/sprites/spritesmith-main-11.css';
-import '../../src/assets/css/sprites/spritesmith-main-12.css';
-import '../../src/assets/css/sprites/spritesmith-main-13.css';
-import '../../src/assets/css/sprites/spritesmith-main-14.css';
-import '../../src/assets/css/sprites/spritesmith-main-15.css';
-import '../../src/assets/css/sprites/spritesmith-main-16.css';
-import '../../src/assets/css/sprites/spritesmith-main-17.css';
-import '../../src/assets/css/sprites/spritesmith-main-18.css';
-import '../../src/assets/css/sprites/spritesmith-main-19.css';
-import '../../src/assets/css/sprites/spritesmith-main-20.css';
-import '../../src/assets/css/sprites/spritesmith-main-21.css';
-import '../../src/assets/css/sprites/spritesmith-main-22.css';
-import '../../src/assets/css/sprites/spritesmith-main-23.css';
-import '../../src/assets/css/sprites/spritesmith-main-24.css';
-import '../../src/assets/css/sprites/spritesmith-main-25.css';
-import '../../src/assets/css/sprites/spritesmith-main-26.css';
-import '../../src/assets/css/sprites/spritesmith-main-27.css';
-import '../../src/assets/css/sprites/spritesmith-main-28.css';
-import '../../src/assets/css/sprites/spritesmith-main-29.css';
+import '../../src/assets/scss/sprites.scss';
+
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';
 import getStore from '@/store';
+import '../../src/filters/registerGlobals';

 import i18n from '../../../common/script/i18n';

@@ -65,16 +37,17 @@ store.state.user.data = {

    },
  },
+  preferences: {
+
+  },
 };

 Vue.prototype.$store = store;

-
 const req = require.context('../../src', true, /.stories.js$/);

 function loadStories () {
  req.keys().forEach(filename => req(filename));
 }

-
 configure(loadStories, module);
@@ -13,37 +13,37 @@
    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
  },
  "dependencies": {
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-knobs": "^6.3.0",
+    "@storybook/addon-links": "^6.3.7",
    "@storybook/addon-notes": "^5.3.21",
-    "@storybook/vue": "^6.2.9",
+    "@storybook/vue": "^6.3.7",
    "@vue/cli-plugin-babel": "^4.5.13",
    "@vue/cli-plugin-eslint": "^4.5.13",
    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-plugin-unit-mocha": "^4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^8.3.0",
+    "amplitude-js": "^8.5.0",
    "axios": "^0.21.1",
    "axios-progress-bar": "^1.2.0",
    "babel-eslint": "^10.1.0",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "chai": "^4.3.4",
-    "core-js": "^3.12.1",
+    "core-js": "^3.16.2",
    "eslint": "^6.8.0",
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-vue": "^6.2.2",
    "habitica-markdown": "^3.0.0",
-    "hellojs": "^1.19.3",
+    "hellojs": "^1.19.4",
    "inspectpack": "^4.7.1",
-    "intro.js": "^3.4.0",
+    "intro.js": "^4.1.0",
    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
-    "nconf": "^0.11.2",
+    "nconf": "^0.11.3",
    "sass": "^1.34.0",
    "sass-loader": "^8.0.2",
    "smartbanner.js": "^1.16.0",
@@ -53,16 +53,16 @@
    "svgo-loader": "^2.2.1",
    "uuid": "^8.3.2",
    "validator": "^13.6.0",
-    "vue": "^2.6.12",
-    "vue-cli-plugin-storybook": "^2.0.0",
+    "vue": "^2.6.14",
+    "vue-cli-plugin-storybook": "^2.1.0",
    "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.12",
+    "vue-router": "^3.5.2",
+    "vue-template-compiler": "^2.6.14",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.14.2"
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5"
  }
 }
@@ -7,7 +7,7 @@ if (process.env.NODE_ENV === 'production') {
    stdio: 'inherit',
  });

-  execSync('npm run storybook:build', {
+  /* execSync('npm run storybook:build', {
    stdio: 'inherit',
-  });
+  }); */
 }
@@ -261,6 +261,12 @@ export default {
      this.$root.$emit('bv::show::modal', 'buy-modal');
    });

+    this.$root.$on('bv::modal::hidden', event => {
+      if (event.componentId === 'buy-modal') {
+        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+      }
+    });
+
    this.$root.$on('selectMembersModal::showItem', item => {
      this.selectedSpellToBuy = item;
      this.$root.$emit('bv::show::modal', 'select-member-modal');
@@ -514,36 +520,5 @@ export default {
 <style src="axios-progress-bar/dist/nprogress.css"></style>
 <style src="@/assets/scss/index.scss" lang="scss"></style>
 <style src="@/assets/css/sprites/spritesmith-largeSprites-0.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-0.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-1.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-2.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-3.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-4.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-5.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-6.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-7.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-8.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-9.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-10.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-11.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-12.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-13.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-14.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-15.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-16.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-17.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-18.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-19.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-20.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-21.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-22.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-23.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-24.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-25.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-26.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-28.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-29.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-30.css"></style>
-<style src="@/assets/css/sprites.css"></style>
+<style src="@/assets/scss/sprites.scss" lang="scss"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>
@@ -10,6 +10,12 @@
  height: 219px;
 }

+.quest_solarSystem {
+  background: url("~@/assets/images/animated/quest_solarSystem.gif") no-repeat;
+  width: 219px;
+  height: 219px;
+}
+
 .Pet_HatchingPotion_Dessert, .Pet_HatchingPotion_Veggie, .Pet_HatchingPotion_Windup {
  width: 68px;
  height: 68px;
@@ -1,814 +1,814 @@
-.background_heart_shaped_bubbles {
+.background_haunted_forest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px 0px;
  width: 141px;
  height: 147px;
 }
-.background_heather_field {
+.background_haunted_house {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px 0px;
  width: 141px;
  height: 147px;
 }
-.background_herding_sheep_in_autumn {
+.background_heart_shaped_bubbles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px 0px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_hearth {
+.background_heather_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -148px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_market {
+.background_herding_sheep_in_autumn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -148px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_wreath {
+.background_holiday_hearth {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -148px;
  width: 141px;
  height: 147px;
 }
-.background_hot_air_balloon {
+.background_holiday_market {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px 0px;
  width: 141px;
  height: 147px;
 }
-.background_hot_spring {
+.background_holiday_wreath {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -148px;
  width: 141px;
  height: 147px;
 }
-.background_ice_cave {
+.background_hot_air_balloon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -296px;
  width: 141px;
  height: 147px;
 }
-.background_iceberg {
+.background_hot_spring {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -296px;
  width: 141px;
  height: 147px;
 }
-.background_icicle_bridge {
+.background_ice_cave {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -296px;
  width: 141px;
  height: 147px;
 }
-.background_idyllic_cabin {
+.background_iceberg {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -296px;
  width: 141px;
  height: 147px;
 }
-.background_in_a_classroom {
+.background_icicle_bridge {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px 0px;
  width: 141px;
  height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_idyllic_cabin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -148px;
  width: 141px;
  height: 147px;
 }
-.background_in_the_armory {
+.background_in_a_classroom {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -296px;
  width: 141px;
  height: 147px;
 }
-.background_inside_an_ornament {
+.background_in_an_ancient_tomb {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -444px;
  width: 141px;
  height: 147px;
 }
-.background_island_waterfalls {
+.background_in_the_armory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -444px;
  width: 141px;
  height: 147px;
 }
-.background_jungle_canopy {
+.background_inside_an_ornament {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -444px;
  width: 141px;
  height: 147px;
 }
-.background_kelp_forest {
+.background_island_waterfalls {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_jungle_canopy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lighthouse_shore {
+.background_kelp_forest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px 0px;
  width: 141px;
  height: 147px;
 }
-.background_lilypad {
+.background_lake_with_floating_lanterns {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -148px;
  width: 141px;
  height: 147px;
 }
-.background_magic_beanstalk {
+.background_lighthouse_shore {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -296px;
  width: 141px;
  height: 147px;
 }
-.background_magical_candles {
+.background_lilypad {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -444px;
  width: 141px;
  height: 147px;
 }
-.background_magical_museum {
+.background_magic_beanstalk {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -592px;
  width: 141px;
  height: 147px;
 }
-.background_marble_temple {
+.background_magical_candles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -592px;
  width: 141px;
  height: 147px;
 }
-.background_market {
+.background_magical_museum {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -592px;
  width: 141px;
  height: 147px;
 }
-.background_meandering_cave {
+.background_marble_temple {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -592px;
  width: 141px;
  height: 147px;
 }
-.background_medieval_kitchen {
+.background_market {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_castle {
+.background_meandering_cave {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_clouds {
+.background_medieval_kitchen {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px 0px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_lake {
+.background_midnight_castle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -148px;
  width: 141px;
  height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_midnight_clouds {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -296px;
  width: 141px;
  height: 147px;
 }
-.background_mistiflying_circus {
+.background_midnight_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -444px;
  width: 141px;
  height: 147px;
 }
-.background_monster_makers_workshop {
+.background_mist_shrouded_mountain {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -592px;
  width: 141px;
  height: 147px;
 }
-.background_mountain_lake {
+.background_mistiflying_circus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -740px;
  width: 141px;
  height: 147px;
 }
-.background_mountain_pyramid {
+.background_monster_makers_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -740px;
  width: 141px;
  height: 147px;
 }
-.background_mystical_observatory {
+.background_mountain_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -740px;
  width: 141px;
  height: 147px;
 }
-.background_night_dunes {
+.background_mountain_pyramid {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -740px;
  width: 141px;
  height: 147px;
 }
-.background_ocean_sunrise {
+.background_mystical_observatory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -740px;
  width: 141px;
  height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_night_dunes {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -740px;
  width: 141px;
  height: 147px;
 }
-.background_on_tree_branch {
+.background_ocean_sunrise {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -740px;
  width: 141px;
  height: 147px;
 }
-.background_open_waters {
+.background_old_fashioned_bakery {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px 0px;
  width: 141px;
  height: 147px;
 }
-.background_orchard {
+.background_on_tree_branch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -148px;
  width: 141px;
  height: 147px;
 }
-.background_pagodas {
+.background_open_waters {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -296px;
  width: 141px;
  height: 147px;
 }
-.background_park_with_statue {
+.background_orchard {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -444px;
  width: 141px;
  height: 147px;
 }
-.background_pirate_flag {
+.background_pagodas {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -592px;
  width: 141px;
  height: 147px;
 }
-.background_pixelists_workshop {
+.background_park_with_statue {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -740px;
  width: 141px;
  height: 147px;
 }
-.background_potion_shop {
+.background_pirate_flag {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -888px;
  width: 141px;
  height: 147px;
 }
-.background_productivity_plaza {
+.background_pixelists_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pumpkin_carriage {
+.background_potion_shop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pumpkin_patch {
+.background_productivity_plaza {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -888px;
  width: 141px;
  height: 147px;
 }
-.background_purple {
+.background_pumpkin_carriage {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pyramids {
+.background_pumpkin_patch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainbow_meadow {
+.background_purple {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainbows_end {
+.background_pyramids {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainforest {
+.background_raging_river {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px 0px;
  width: 141px;
  height: 147px;
 }
-.background_rainy_barnyard {
+.background_rainbow_meadow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -148px;
  width: 141px;
  height: 147px;
 }
-.background_rainy_city {
+.background_rainbows_end {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -296px;
  width: 141px;
  height: 147px;
 }
-.background_red {
+.background_rainforest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -444px;
  width: 141px;
  height: 147px;
 }
-.background_relaxation_river {
+.background_rainy_barnyard {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -592px;
  width: 141px;
  height: 147px;
 }
-.background_resting_in_the_inn {
+.background_rainy_city {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -740px;
  width: 141px;
  height: 147px;
 }
-.background_river_of_lava {
+.background_red {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rolling_hills {
+.background_relaxation_river {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_rose_garden {
+.background_resting_in_the_inn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_rowboat {
+.background_river_of_lava {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_salt_lake {
+.background_rolling_hills {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_sandcastle {
+.background_rope_bridge {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_school_of_fish {
+.background_rose_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_scribes_workshop {
+.background_rowboat {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_seafarer_ship {
+.background_salt_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_seaside_cliffs {
+.background_sandcastle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_school_of_fish {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px 0px;
  width: 141px;
  height: 147px;
 }
-.background_shimmery_bubbles {
+.background_scribes_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -148px;
  width: 141px;
  height: 147px;
 }
-.background_slimy_swamp {
+.background_seafarer_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -296px;
  width: 141px;
  height: 147px;
 }
-.background_snowglobe {
+.background_seaside_cliffs {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -444px;
  width: 141px;
  height: 147px;
 }
-.background_snowman_army {
+.background_shimmering_ice_prism {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -592px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_shimmery_bubbles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -740px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_pines {
+.background_slimy_swamp {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -888px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_sunrise {
+.background_snowglobe {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_south_pole {
+.background_snowman_army {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_sparkling_snowflake {
+.background_snowy_day_fireplace {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spider_web {
+.background_snowy_pines {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_snowy_sunrise {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spooky_hotel {
+.background_south_pole {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_sparkling_snowflake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spring_rain {
+.background_spider_web {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spring_thaw {
+.background_splash_in_a_puddle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stable {
+.background_spooky_hotel {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stained_glass {
+.background_spooky_scarecrow_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_starry_skies {
+.background_spring_rain {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px 0px;
  width: 141px;
  height: 147px;
 }
-.background_starry_winter_night {
+.background_spring_thaw {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -148px;
  width: 141px;
  height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_stable {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -296px;
  width: 141px;
  height: 147px;
 }
-.background_stone_circle {
+.background_stained_glass {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -444px;
  width: 141px;
  height: 147px;
 }
-.background_stormy_rooftops {
+.background_starry_skies {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -592px;
  width: 141px;
  height: 147px;
 }
-.background_stormy_ship {
+.background_starry_winter_night {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -740px;
  width: 141px;
  height: 147px;
 }
-.background_strange_sewers {
+.background_stoikalm_volcanoes {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -888px;
  width: 141px;
  height: 147px;
 }
-.background_strawberry_patch {
+.background_stone_circle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_succulent_garden {
+.background_stone_tower {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_summer_fireworks {
+.background_stormy_rooftops {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunken_ship {
+.background_stormy_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_meadow {
+.background_strange_sewers {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_oasis {
+.background_strawberry_patch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_savannah {
+.background_succulent_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_swarming_darkness {
+.background_summer_fireworks {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_sunken_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tar_pits {
+.background_sunset_meadow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tavern {
+.background_sunset_oasis {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tea_party {
+.background_sunset_savannah {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_terraced_rice_field {
+.background_swarming_darkness {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_throne_room {
+.background_swimming_among_jellyfish {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px 0px;
  width: 141px;
  height: 147px;
 }
-.background_thunderstorm {
+.background_tar_pits {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -148px;
  width: 141px;
  height: 147px;
 }
-.background_tide_pool {
+.background_tavern {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -296px;
  width: 141px;
  height: 147px;
 }
-.background_tornado {
+.background_tea_party {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -444px;
  width: 141px;
  height: 147px;
 }
-.background_toymakers_workshop {
+.background_terraced_rice_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -592px;
  width: 141px;
  height: 147px;
 }
-.background_training_grounds {
+.background_throne_room {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -740px;
  width: 141px;
  height: 147px;
 }
-.background_treasure_room {
+.background_thunderstorm {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -888px;
  width: 141px;
  height: 147px;
 }
-.background_tree_roots {
+.background_tide_pool {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_treehouse {
+.background_tornado {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_tulip_garden {
+.background_toymakers_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_twinkly_lights {
+.background_training_grounds {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_twinkly_party_lights {
+.background_treasure_room {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_underwater_ruins {
+.background_tree_roots {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_underwater_vents {
+.background_treehouse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_valentines_day_feasting_hall {
+.background_tulip_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_viking_ship {
+.background_twinkly_lights {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_violet {
+.background_twinkly_party_lights {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_volcano {
+.background_underwater_among_koi {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_water_mill {
+.background_underwater_ruins {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_waterfall_rock {
+.background_underwater_vents {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_wedding_arch {
+.background_valentines_day_feasting_hall {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_windmills {
+.background_viking_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_windy_autumn {
+.background_violet {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px 0px;
  width: 141px;
  height: 147px;
 }
-.background_winter_fireworks {
+.background_volcano {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -148px;
  width: 141px;
  height: 147px;
 }
-.background_winter_night {
+.background_water_mill {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -296px;
  width: 141px;
  height: 147px;
 }
-.background_winter_nocturne {
+.background_waterfall_rock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -444px;
  width: 141px;
@@ -0,0 +1,438 @@
+.Pet-Wolf-Sunset {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Windup {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.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: -410px -169px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -238px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -307px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Moonglow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -483px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_MossyStone {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_PolkaDot {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -483px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SolarSystem {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -552px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StainedGlass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunset {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -607px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -607px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -607px;
+  width: 68px;
+  height: 68px;
+}
@@ -0,0 +1,5 @@
+@import url("../css/sprites.css");
+
+@for $i from 0 through 31 {
+  @import url("../css/sprites/spritesmith-main-#{$i}.css");
+}
@@ -1,250 +0,0 @@
-<template>
-  <b-modal
-    id="drop-cap-reached"
-    size="md"
-    :hide-header="true"
-    :hide-footer="hasSubscription"
-  >
-    <div class="text-center">
-      <div
-        class="modal-close"
-        @click="close()"
-      >
-        <div
-          v-once
-          class="svg-icon"
-          v-html="icons.close"
-        ></div>
-      </div>
-      <h1
-        v-once
-        class="header purple"
-      >
-        {{ $t('dropCapReached') }}
-      </h1>
-      <div class="max-items-wrapper d-flex align-items-center justify-content-center">
-        <div
-          class="svg-icon sparkles sparkles-rotate"
-          v-html="icons.sparkles"
-        ></div>
-        <div class="max-items-module d-flex align-items-center justify-content-center flex-column">
-          <h1 class="max-items">
-            {{ maxItems }}
-          </h1>
-          <span
-            v-once
-            class="items-text"
-          >{{ $t('items') }}</span>
-        </div>
-        <div
-          class="svg-icon sparkles"
-          v-html="icons.sparkles"
-        ></div>
-      </div>
-      <p
-        v-once
-        class="mb-4"
-      >
-        {{ $t('dropCapExplanation') }}
-      </p>
-      <a
-        v-once
-        class="standard-link d-block mb-3"
-        @click="toWiki()"
-      >
-        {{ $t('dropCapLearnMore') }}
-      </a>
-    </div>
-    <div
-      slot="modal-footer"
-      class="footer"
-    >
-      <span
-        v-once
-        class="purple d-block font-weight-bold mb-3 mt-3"
-      >
-        {{ $t('lookingForMoreItems') }}
-      </span>
-      <img
-        class="swords mb-3"
-        srcset="
-      ~@/assets/images/swords.png,
-      ~@/assets/images/swords@2x.png 2x,
-      ~@/assets/images/swords@3x.png 3x"
-        src="~@/assets/images/swords.png"
-      >
-      <p
-        v-once
-        class="subs-benefits mb-3"
-      >
-        {{ $t('dropCapSubs') }}
-      </p>
-      <button
-        v-once
-        class="btn btn-primary"
-        @click="toLearnMore()"
-      >
-        {{ $t('learnMore') }}
-      </button>
-    </div>
-  </b-modal>
-</template>
-
-<style lang="scss">
-  @import '~@/assets/scss/colors.scss';
-
-  #drop-cap-reached {
-    .modal-body {
-      padding: 0 1.5rem;
-    }
-
-    .modal-footer {
-      background: $gray-700;
-      border-top: none;
-      padding: 0 1.5rem 2rem 1.5rem;
-    }
-
-    .modal-dialog {
-      width: 20.625rem;
-      font-size: 0.875rem;
-      line-height: 1.71;
-      text-align: center;
-    }
-  }
-</style>
-
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .modal-close {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    padding: 4px;
-    right: 16px;
-    top: 16px;
-    cursor: pointer;
-    .svg-icon {
-      width: 12px;
-      height: 12px;
-    }
-  }
-
-  .subs-benefits {
-    font-size: 0.75rem;
-    line-height: 1.33;
-    font-style: normal;
-  }
-
-  .purple {
-    color: $purple-300;
-  }
-
-  .header {
-    font-size: 1.25rem;
-    line-height: 1.4;
-    text-align: center;
-    margin-top: 2rem;
-  }
-
-  .sparkles {
-    width: 2.5rem;
-    height: 4rem;
-
-    &.sparkles-rotate {
-      transform: rotate(180deg);
-    }
-  }
-
-  .max-items-wrapper {
-    margin: 17px auto;
-  }
-
-  .max-items-module {
-    background: white;
-    border-radius: 92px;
-    border: 8px solid $purple-400;
-    width: 92px;
-    height: 92px;
-    margin-left: 17px;
-    margin-right: 17px;
-
-    .items-text {
-      font-size: 0.75rem;
-      line-height: 1.33;
-      color: $gray-100;
-    }
-  }
-
-  .max-items {
-    font-size: 2rem;
-    line-height: 1.25;
-    color: $purple-300;
-    margin: 0;
-  }
-
-  .swords {
-    width: 7rem;
-    height: 3rem;
-  }
-</style>
-
-<script>
-import closeIcon from '@/assets/svg/close.svg';
-import sparkles from '@/assets/svg/star-group.svg';
-import * as Analytics from '@/libs/analytics';
-import { mapState } from '@/libs/store';
-
-export default {
-  data () {
-    return {
-      icons: Object.freeze({
-        close: closeIcon,
-        sparkles,
-      }),
-      maxItems: null,
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-    hasSubscription () {
-      return Boolean(this.user.purchased.plan.customerId);
-    },
-  },
-  mounted () {
-    this.$root.$on('habitica:drop-cap-reached', notification => {
-      this.maxItems = notification.data.items;
-      this.$root.$emit('bv::show::modal', 'drop-cap-reached');
-    });
-  },
-  beforeDestroy () {
-    this.$root.$off('habitica:drop-cap-reached');
-  },
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'drop-cap-reached');
-    },
-    toWiki () {
-      window.open('https://habitica.fandom.com/wiki/Drops', '_blank');
-
-      Analytics.track({
-        hitType: 'event',
-        eventCategory: 'drop-cap-reached',
-        eventAction: 'click',
-        eventLabel: 'Drop Cap Reached > Modal > Wiki',
-      });
-    },
-    toLearnMore () {
-      Analytics.track({
-        hitType: 'event',
-        eventCategory: 'drop-cap-reached',
-        eventAction: 'click',
-        eventLabel: 'Drop Cap Reached > Modal > Subscriptions',
-      });
-
-      this.close();
-      this.$router.push('/user/settings/subscription');
-    },
-  },
-};
-</script>
@@ -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"
-               target="_blank">{{ $t('mobileIOS') }}</a>
+            <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"
-               target="_blank">{{ $t('mobileAndroid') }}</a>
+            <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/"
-                 target="_blank">{{ $t('companyBlog') }}</a>
+              <a
+                href="https://habitica.wordpress.com/"
+                target="_blank"
+              >{{ $t('companyBlog') }}</a>
            </li>
            <li>
-              <a href="http://blog.habitrpg.com/"
-                 target="_blank">{{ $t('tumblr') }}</a>
+              <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"
-                 target="_blank">{{ $t('oldNews') }}</a>
+              <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"
-                 href="/static/community-guidelines">{{ $t('communityGuidelines') }}</a>
+              <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"
-                 target="_blank">{{ $t('requestFeature') }}</a>
+              <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"
-                 target="_blank">{{ $t('communityFacebook') }}</a>
+              <a
+                href="https://www.facebook.com/Habitica"
+                target="_blank"
+              >{{ $t('communityFacebook') }}</a>
            </li>
            <li>
-              <a href="https://www.instagram.com/habitica"
-                 target="_blank">{{ $t('communityInstagram') }}</a>
+              <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"
-                     target="_blank">{{ $t('APIv3') }}</a>
+                  <a
+                    href="/apidoc"
+                    target="_blank"
+                  >{{ $t('APIv3') }}</a>
                </li>
                <li>
-                  <a :href="getDataDisplayToolUrl"
-                     target="_blank">{{ $t('dataDisplayTool') }}</a>
+                  <a
+                    :href="getDataDisplayToolUrl"
+                    target="_blank"
+                  >{{ $t('dataDisplayTool') }}</a>
                </li>
                <li>
-                  <a href="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
-                     target="_blank">{{ $t('guidanceForBlacksmiths') }}</a>
+                  <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"
-                   href="https://twitter.com/habitica"
-                   target="_blank">
-                  <div class="social-icon svg-icon"
-                       v-html="icons.twitter"></div>
+                <a
+                  class="social-circle"
+                  href="https://twitter.com/habitica"
+                  target="_blank"
+                >
+                  <div
+                    class="social-icon svg-icon"
+                    v-html="icons.twitter"
+                  ></div>
                </a>
-                <a class="social-circle"
-                   href="https://www.instagram.com/habitica/"
-                   target="_blank">
-                  <div class="social-icon svg-icon instagram"
-                       v-html="icons.instagram"></div>
+                <a
+                  class="social-circle"
+                  href="https://www.instagram.com/habitica/"
+                  target="_blank"
+                >
+                  <div
+                    class="social-icon svg-icon instagram"
+                    v-html="icons.instagram"
+                  ></div>
                </a>
-                <a class="social-circle"
-                   href="https://www.facebook.com/Habitica"
-                   target="_blank">
-                  <div class="social-icon facebook svg-icon"
-                       v-html="icons.facebook"></div>
+                <a
+                  class="social-circle"
+                  href="https://www.facebook.com/Habitica"
+                  target="_blank"
+                >
+                  <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"
-                      class="btn btn-contribute btn-front btn-flat"
-                      @click="donate()">
-                <div class="svg-icon heart"
-                     v-html="icons.heart"></div>
+              <button
+                v-if="user"
+                class="btn btn-contribute btn-front btn-flat"
+                @click="donate()"
+              >
+                <div
+                  class="svg-icon heart"
+                  v-html="icons.heart"
+                ></div>
                <div class="text">
                  {{ $t('companyDonate') }}
                </div>
              </button>
-              <div v-else
-                   class="btn btn-contribute btn-front btn-flat">
-                <a href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
-                   target="_blank">
-                  <div class="svg-icon heart"
-                       v-html="icons.heart"></div>
+              <div
+                v-else
+                class="btn btn-contribute btn-front btn-flat"
+              >
+                <a
+                  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"
-               class="debug float-left">
-            <button class="btn btn-primary"
-                    @click="debugMenuShown = !debugMenuShown">
+          <div
+            v-if="!IS_PRODUCTION && isUserLoaded"
+            class="debug float-left"
+          >
+            <button
+              class="btn btn-primary"
+              @click="debugMenuShown = !debugMenuShown"
+            >
              Toggle Debug Menu
            </button>
-            <div v-if="debugMenuShown"
-                 class="debug-group">
-              <a class="btn btn-secondary"
-                 @click="setHealthLow()">Health = 1</a>
-              <a class="btn btn-secondary"
-                 @click="addMissedDay(1)">+1 Missed Day</a>
-              <a class="btn btn-secondary"
-                 @click="addMissedDay(2)">+2 Missed Days</a>
-              <a class="btn btn-secondary"
-                 @click="addMissedDay(8)">+8 Missed Days</a>
-              <a class="btn btn-secondary"
-                 @click="addMissedDay(32)">+32 Missed Days</a>
-              <a class="btn btn-secondary"
-                 @click="addTenGems()">+10 Gems</a>
-              <a class="btn btn-secondary"
-                 @click="addHourglass()">+1 Mystic Hourglass</a>
-              <a class="btn btn-secondary"
-                 @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
+              v-if="debugMenuShown"
+              class="debug-group"
+            >
+              <a
+                class="btn btn-secondary"
+                @click="setHealthLow()"
+              >Health = 1</a>
+              <a
+                class="btn btn-secondary"
+                @click="addMissedDay(1)"
+              >+1 Missed Day</a>
+              <a
+                class="btn btn-secondary"
+                @click="addMissedDay(2)"
+              >+2 Missed Days</a>
+              <a
+                class="btn btn-secondary"
+                @click="addMissedDay(8)"
+              >+8 Missed Days</a>
+              <a
+                class="btn btn-secondary"
+                @click="addMissedDay(32)"
+              >+32 Missed Days</a>
+              <a
+                class="btn btn-secondary"
+                @click="addTenGems()"
+              >+10 Gems</a>
+              <a
+                class="btn btn-secondary"
+                @click="addHourglass()"
+              >+1 Mystic Hourglass</a>
+              <a
+                class="btn btn-secondary"
+                @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"
-               v-html="icons.gryphon"></div>
+          <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"
-               href="/static/privacy">{{ $t('privacy') }}</a>
+            <a
+              target="_blank"
+              href="/static/privacy"
+            >{{ $t('privacy') }}</a>
          </span>
          <span class="ml-4">
-            <a target="_blank"
-               href="/static/terms">{{ $t('terms') }}</a>
+            <a
+              target="_blank"
+              href="/static/terms"
+            >{{ $t('terms') }}</a>
          </span>
        </div>
      </div>
@@ -376,7 +466,6 @@ footer {
 import axios from 'axios';
 import moment from 'moment';
 import { mapState } from '@/libs/store';
-import * as Analytics from '@/libs/analytics';
 import gryphon from '@/assets/svg/gryphon.svg';
 import twitter from '@/assets/svg/twitter.svg';
 import facebook from '@/assets/svg/facebook.svg';
@@ -490,12 +579,6 @@ export default {
      this.$root.$emit('bv::show::modal', 'modify-inventory');
    },
    donate () {
-      Analytics.track({
-        hitType: 'event',
-        eventCategory: 'button',
-        eventAction: 'click',
-        eventLabel: 'Gems > Donate',
-      });
      this.$root.$emit('bv::show::modal', 'buy-gems', { alreadyTracked: true });
    },
  },
@@ -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,
@@ -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>
@@ -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,
@@ -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);
@@ -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,
@@ -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,
@@ -826,7 +826,6 @@
      }
    }

-
    .text-center {
      .gem-lock, .gold-lock {
        display: inline-block;
@@ -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 },
@@ -133,7 +133,6 @@
 </style>

 <script>
-import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';
 import paymentsMixin from '../../mixins/payments';
 import paymentsButtons from '@/components/payments/buttons/list';
@@ -174,12 +173,6 @@ export default {
  },
  methods: {
    changePage (page) {
-      Analytics.track({
-        hitType: 'event',
-        eventCategory: 'group-plans-static',
-        eventAction: 'view',
-        eventLabel: page,
-      });
      this.activePage = page;
      window.scrollTo(0, 0);
    },
@@ -4,7 +4,6 @@
    title="Empty"
    size="lg"
    hide-footer="hide-footer"
-    @shown="shown()"
  >
    <div
      slot="modal-header"
@@ -342,7 +341,6 @@
 </style>

 <script>
-import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';

 import upIcon from '@/assets/svg/up.svg';
@@ -368,14 +366,6 @@ export default {
    ...mapState({ user: 'user.data' }),
  },
  methods: {
-    shown () {
-      Analytics.track({
-        hitType: 'event',
-        eventCategory: 'button',
-        eventAction: 'click',
-        eventLabel: 'viewed-group-plan-overview',
-      });
-    },
    toggle (question) {
      this.expandedQuestions[question] = !this.expandedQuestions[question];
    },
@@ -37,6 +37,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: 'some-user',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -68,6 +71,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: 'some-user',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -101,6 +107,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: 'some-user',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -122,6 +131,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -143,6 +155,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: 'just-a-member',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -164,6 +179,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: 'just-a-member',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -190,6 +208,9 @@ storiesOf('Group Components|Party/Quest States', module)
            RSVPNeeded: true,
          },
        },
+        preferences: {
+
+        },
      },
    },
    challengeOptions: {},
@@ -218,6 +239,9 @@ storiesOf('Group Components|Party/Quest States', module)
            },
          },
        },
+        preferences: {
+
+        },
      },
    },
    challengeOptions: {},
@@ -246,6 +270,9 @@ storiesOf('Group Components|Party/Quest States', module)
            },
          },
        },
+        preferences: {
+
+        },
      },
    },
    challengeOptions: {},
@@ -274,6 +301,9 @@ storiesOf('Group Components|Party/Quest States', module)
            },
          },
        },
+        preferences: {
+
+        },
      },
    },
    challengeOptions: {},
@@ -302,6 +332,9 @@ storiesOf('Group Components|Party/Quest States', module)
            },
          },
        },
+        preferences: {
+
+        },
      },
    },
    challengeOptions: {},
@@ -330,6 +363,9 @@ storiesOf('Group Components|Party/Quest States', module)
            },
          },
        },
+        preferences: {
+
+        },
      },
    },
    challengeOptions: {},
@@ -355,6 +391,9 @@ storiesOf('Group Components|Party/Quest States', module)
        _id: 'some-user',
        party: {

+        },
+        preferences: {
+
        },
      },
    },
@@ -226,7 +226,6 @@ export const groupCollectionQuestPending = {
  id: '96ea599a-737b-47e2-ac17-8bd85b6ab62a',
 };

-
 export const collectionQuestLeaderParticipating = {
  leaderOnly: { challenges: false, getGems: false },
  quest: {
@@ -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="{
-        'status': true,
-        'accepted': member.accepted === true,
-        'declined': member.accepted === false,
-        'pending': member.accepted === null
-      }">
+      <div
+        :class="{
+          'status': true,
+          'accepted': member.accepted === true,
+          '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',
@@ -577,6 +577,7 @@ export default {
          groupId,
          includeAllPublicFields: true,
        });
+        if (this.selectedPage === 'invites' && invites.length === 0) this.viewMembers();
        this.invites = invites;
      }
    },
--- a/Show More
+++ b/Show More