4.209.0

feat(content): Shade pet/mount collection achievements
fix(analytics): confirm that 2x/day task actions should track on client
2026-05-12 11:39:44 -05:00 · 2021-10-21 10:49:41 -05:00 · 2021-10-21 10:49:22 -05:00 · 2021-10-20 10:49:32 -05:00 · 2021-10-14 13:58:53 -05:00 · 2021-10-14 18:20:54 +02:00
922 changed files with 49720 additions and 41490 deletions
@@ -8,10 +8,10 @@ website/client/
 website/common/transpiled-babel/
 dist/
 dist-client/
-apidoc_build/
+apidoc/html/
 content_cache/
 i18n_cache/
 node_modules/

 # Old migrations, disabled
-migrations/archive/*
+migrations/archive/*
@@ -4,7 +4,7 @@

 # Pull Request

-[Please see these instructions for adding a pull request](http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API)
+[Please see these instructions for adding a pull request](https://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica's_Website_and_API)

 # Requesting a feature

@@ -12,4 +12,4 @@ Habitica uses [this Google form](https://docs.google.com/forms/d/e/1FAIpQLScPhrw

 # Contributing Code

-See [Contributing to Habitica](http://habitica.fandom.com/wiki/Contributing_to_Habitica#Coders_.28Web_.26_Mobile.29)
+See [Contributing to Habitica](https://habitica.fandom.com/wiki/Contributing_to_Habitica#Coders_.28Web_.26_Mobile.29)
@@ -1,20 +1,19 @@
-[//]: # (Before logging this issue, please post to the Report a Bug guild from the Habitica website's Help menu. Most bugs can be handled quickly there. If a GitHub issue is needed, you will be advised of that by a moderator or staff member -- a player with a dark blue or purple name. It is recommended that you don't create a new issue unless advised to.)
+[//]: # (Before logging this issue, please contact site administrators from "Report a Bug" in the Habitica website's Help menu. If a GitHub issue is needed, staff will let you know and will most likely log one on your behalf. It is recommended that you don't create a new issue unless advised to.)

-[//]: # (Bugs in the mobile apps can also be reported there.)
+[//]: # (Bugs in the mobile apps can be reported via Menu > About > Support.)

-[//]: # (If you have a feature request, use "Help > Request a Feature", not GitHub or the Report a Bug guild.)
+[//]: # (If you have a feature request, use "Help > Request a Feature", not GitHub.)

 [//]: # (For more guidelines see https://github.com/HabitRPG/habitica/issues/2760)

-[//]: # (Fill out relevant information - UUID is found from the Habitia website at User Icon > Settings > API)
+[//]: # (Fill out relevant information - UUID is found from the Habitica website at User Icon > Settings > API)
 ### General Info
-  * UUID: 
-  * Browser: 
-  * OS: 
+  * UUID:
+  * Browser:
+  * OS:

 ### Description
 [//]: # (Describe bug in detail here. Include screenshots if helpful.)

 #### Console Errors
 [//]: # (Include any JavaScript console errors here.)
-
@@ -1,4 +1,4 @@
-[//]: # (Note: See http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API for more info)
+[//]: # (Note: See https://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API for more info)

 [//]: # (Put Issue # here, if applicable. This will automatically close the issue if your PR is merged in)
 Fixes put_#_and_issue_number_here
@@ -11,4 +11,4 @@ Fixes put_#_and_issue_number_here
 [//]: # (Put User ID in here - found on the Habitica website at User Icon > Settings > API)

 ----
-UUID: 
+UUID:
@@ -219,4 +219,25 @@ jobs:
        CI: true
        NODE_ENV: test
    - run: npm run test:unit
-      working-directory: ./website/client
+      working-directory: ./website/client
+
+  production-build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [14.x]
+    steps:
+    - uses: actions/checkout@v1
+      with:
+        fetch-depth: 1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: cp config.json.example config.json
+    - name: npm install
+      run: |
+        npm install
+      env:
+        CI: true
+        NODE_ENV: production
@@ -5,7 +5,7 @@ website/common/transpiled-babel/
 node_modules
 content_cache
 i18n_cache
-apidoc_build
+apidoc/html
 *.swp
 .idea*
 config.json
@@ -4,11 +4,11 @@ Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/bad
 [Habitica](https://habitica.com) is an open source habit building program which treats your life like a Role Playing Game. Level up as you succeed, lose HP as you fail, earn money to buy weapons and armor.

 **We need more programmers!** Your assistance will be greatly appreciated. The wiki pages below and the additional pages they link to will tell you how to get started on contributing code and where you can go to seek further help or ask questions:
-* [Guidance for Blacksmiths](http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths) - an introduction to the technologies used and how the software is organized.
-* [Setting up Habitica Locally](http://habitica.fandom.com/wiki/Setting_up_Habitica_Locally) - how to set up a local install of Habitica for development and testing on various platforms.
+* [Guidance for Blacksmiths](https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths) - an introduction to the technologies used and how the software is organized.
+* [Setting up Habitica Locally](https://habitica.fandom.com/wiki/Setting_up_Habitica_Locally) - how to set up a local install of Habitica for development and testing on various platforms.

 Habitica's code is licensed as described at https://github.com/HabitRPG/habitica/blob/develop/LICENSE

-**Found a bug?** Please report it in the [Report a Bug guild](https://habitica.com/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac) rather than creating an issue (an admin will advise you if a new issue is necessary; usually it is not).
+**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than creating an issue (an admin will advise you if a new issue is necessary; usually it is not).

 **Have any questions about Habitica or its community?** See the links in the [habitica.com](https://habitica.com) website's Help menu or drop in to [Guilds > Tavern Chat](https://habitica.com/groups/tavern) to ask questions or chat socially!
@@ -2,6 +2,7 @@
  "name": "Habitica V3 API Documentation",
  "title": "Habitica",
  "url": "https://habitica.com",
+  "sampleUrl": null,
  "header": {
    "title": "Introduction",
    "filename": "apidoc/header.md"
@@ -3,6 +3,3 @@
 This webpage includes the documentation for version 3 of the [Habitica](https://habitica.com) API.

 If you're developing a 3rd party tool that uses the Habitica API you should read the [Guidance for Comrades](https://habitica.fandom.com/wiki/Guidance_for_Comrades) and in particular the section called [Rules for Third-Party Tools](https://habitica.fandom.com/wiki/Guidance_for_Comrades#Rules_for_Third-Party_Tools) which includes suggestions on how to best use the API and the rules to follow when interacting with it.
-
-# Attention: Sample forms are non-functional
-The sample forms were enabled [due to a change in the apidoc package](https://github.com/apidoc/apidoc/pull/915) and do not function, they will be disabled in a future release.
@@ -2,8 +2,9 @@ import gulp from 'gulp';
 import clean from 'rimraf';
 import apidoc from 'apidoc';

-const APIDOC_DEST_PATH = './apidoc_build';
+const APIDOC_DEST_PATH = './apidoc/html';
 const APIDOC_SRC_PATH = './website/server';
+const APIDOC_CONFIG_PATH = './apidoc/apidoc.json';
 gulp.task('apidoc:clean', done => {
  clean(APIDOC_DEST_PATH, done);
 });
@@ -12,6 +13,7 @@ gulp.task('apidoc', gulp.series('apidoc:clean', done => {
  const result = apidoc.createDoc({
    src: APIDOC_SRC_PATH,
    dest: APIDOC_DEST_PATH,
+    config: APIDOC_CONFIG_PATH,
  });

  if (result === false) {
@@ -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
+  }
+};
@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20211021_pet_color_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['Wolf-Shade'] > 0
+      && pets['TigerCub-Shade'] > 0
+      && pets['PandaCub-Shade'] > 0
+      && pets['LionCub-Shade'] > 0
+      && pets['Fox-Shade'] > 0
+      && pets['FlyingPig-Shade'] > 0
+      && pets['Dragon-Shade'] > 0
+      && pets['Cactus-Shade'] > 0
+      && pets['BearCub-Shade'] > 0) {
+        set['achievements.shadyCustomer'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-Shade']
+      && mounts['TigerCub-Shade']
+      && mounts['PandaCub-Shade']
+      && mounts['LionCub-Shade']
+      && mounts['Fox-Shade']
+      && mounts['FlyingPig-Shade']
+      && mounts['Dragon-Shade']
+      && mounts['Cactus-Shade']
+      && mounts['BearCub-Shade'] ) {
+        set['achievements.shadeOfItAll'] = 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-10-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.209.0",
  "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.5",
+    "@babel/preset-env": "^7.15.6",
+    "@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",
-    "amplitude": "^5.1.6",
-    "apidoc": "^0.28.1",
+    "amazon-payments": "^0.2.9",
+    "amplitude": "^5.1.7",
+    "apidoc": "^0.29.0",
    "apple-auth": "^1.0.7",
    "bcrypt": "^5.0.1",
    "body-parser": "^1.18.3",
@@ -21,7 +21,7 @@
    "compression": "^1.7.4",
    "cookie-session": "^1.4.0",
    "coupon-code": "^0.4.5",
-    "csv-stringify": "^5.6.2",
+    "csv-stringify": "^5.6.5",
    "cwait": "^1.1.1",
    "domain-middleware": "~0.1.0",
    "eslint": "^6.8.0",
@@ -30,7 +30,7 @@
    "express": "^4.16.3",
    "express-basic-auth": "^1.1.5",
    "express-validator": "^5.2.0",
-    "glob": "^7.1.7",
+    "glob": "^7.2.0",
    "got": "^11.8.2",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
@@ -43,31 +43,31 @@
    "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",
-    "node-gcm": "^1.0.4",
+    "nconf": "^0.11.3",
+    "node-gcm": "^1.0.5",
    "on-headers": "^1.0.2",
-    "passport": "^0.4.1",
+    "passport": "^0.5.0",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth2": "^0.2.0",
    "passport-google-oauth20": "2.0.0",
    "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.3.1",
    "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.178.0",
    "superagent": "^6.1.0",
    "universal-analytics": "^0.4.23",
    "useragent": "^2.1.9",
@@ -110,20 +110,20 @@
    "apidoc": "gulp apidoc"
  },
  "devDependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.22.0",
    "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",
-    "sinon": "^10.0.0",
-    "sinon-chai": "^3.6.0",
+    "run-rs": "^0.7.5",
+    "sinon": "^11.1.2",
+    "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
@@ -1 +1 @@
-For information about writing and running tests, see [Using Your Local Install to Modify Habitica's Website and API](http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API).
+For information about writing and running tests, see [Using Your Local Install to Modify Habitica's Website and API](https://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica's_Website_and_API).
@@ -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;

@@ -7,7 +7,7 @@ import {
 } from '../../../../helpers/api-integration/v3';

 const INVITES_LIMIT = 100;
-const PARTY_LIMIT_MEMBERS = 30;
+const PARTY_LIMIT_MEMBERS = 29;
 const MAX_EMAIL_INVITES_BY_USER = 200;

 describe('Post /groups/:groupId/invite', () => {
@@ -650,7 +650,7 @@ describe('Post /groups/:groupId/invite', () => {
        .to.eventually.be.rejected.and.eql({
          code: 400,
          error: 'BadRequest',
-          message: t('partyExceedsMembersLimit', { maxMembersParty: PARTY_LIMIT_MEMBERS }),
+          message: t('partyExceedsMembersLimit', { maxMembersParty: PARTY_LIMIT_MEMBERS + 1 }),
        });
    }).timeout(10000);
  });
@@ -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: {
@@ -0,0 +1,8 @@
+# Storybook Updates
+
+Addon-Knobs has been deprecated inorder to update to the new `addons-controls` we need to:
+
+1. Change to the new export syntax for each story `export const StoryTemplate`
+2. And use `StoryTemplate.args` and `StoryTemplate.argTypes` to have the same `knobs` as before
+
+Maybe this can be made story by story and not all at once
@@ -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,38 @@
    "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-notes": "^5.3.21",
-    "@storybook/vue": "^6.2.9",
+    "@storybook/addons": "6.3.8",
+    "@storybook/addon-actions": "6.3.10",
+    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-links": "6.3.9",
+    "@storybook/addon-notes": "5.3.21",
+    "@storybook/vue": "6.3.9",
    "@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",
-    "axios": "^0.21.1",
+    "amplitude-js": "^8.8.0",
+    "axios": "^0.22.0",
    "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.18.1",
    "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.5",
    "inspectpack": "^4.7.1",
-    "intro.js": "^3.4.0",
+    "intro.js": "^4.2.2",
    "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 +54,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"
  }
 }
@@ -38,7 +38,7 @@
      <template v-else>
        <template v-if="isUserLoaded">
          <damage-paused-banner />
-          <!-- <gems-promo-banner /> -->
+          <gems-promo-banner />
          <gift-promo-banner />
          <notifications-display />
          <app-menu />
@@ -154,7 +154,7 @@ import { loadProgressBar } from 'axios-progress-bar';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
 import DamagePausedBanner from './components/header/banners/damagePaused';
-// import GemsPromoBanner from './components/header/banners/gemsPromo';
+import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
 import AppFooter from './components/appFooter';
 import notificationsDisplay from './components/notifications';
@@ -186,7 +186,7 @@ export default {
    AppHeader,
    AppFooter,
    DamagePausedBanner,
-    // GemsPromoBanner,
+    GemsPromoBanner,
    GiftPromoBanner,
    notificationsDisplay,
    snackbars,
@@ -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_harvest_feast {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px 0px;
  width: 141px;
  height: 147px;
 }
-.background_heather_field {
+.background_harvest_fields {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px 0px;
  width: 141px;
  height: 147px;
 }
-.background_herding_sheep_in_autumn {
+.background_harvest_moon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px 0px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_hearth {
+.background_haunted_forest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -148px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_market {
+.background_haunted_house {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -148px;
  width: 141px;
  height: 147px;
 }
-.background_holiday_wreath {
+.background_haunted_photo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -148px;
  width: 141px;
  height: 147px;
 }
-.background_hot_air_balloon {
+.background_heart_shaped_bubbles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px 0px;
  width: 141px;
  height: 147px;
 }
-.background_hot_spring {
+.background_heather_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -148px;
  width: 141px;
  height: 147px;
 }
-.background_ice_cave {
+.background_herding_sheep_in_autumn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -296px;
  width: 141px;
  height: 147px;
 }
-.background_iceberg {
+.background_holiday_hearth {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -296px;
  width: 141px;
  height: 147px;
 }
-.background_icicle_bridge {
+.background_holiday_market {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -296px;
  width: 141px;
  height: 147px;
 }
-.background_idyllic_cabin {
+.background_holiday_wreath {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -296px;
  width: 141px;
  height: 147px;
 }
-.background_in_a_classroom {
+.background_hot_air_balloon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px 0px;
  width: 141px;
  height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_hot_spring {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -148px;
  width: 141px;
  height: 147px;
 }
-.background_in_the_armory {
+.background_ice_cave {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -296px;
  width: 141px;
  height: 147px;
 }
-.background_inside_an_ornament {
+.background_iceberg {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -444px;
  width: 141px;
  height: 147px;
 }
-.background_island_waterfalls {
+.background_icicle_bridge {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -444px;
  width: 141px;
  height: 147px;
 }
-.background_jungle_canopy {
+.background_idyllic_cabin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -444px;
  width: 141px;
  height: 147px;
 }
-.background_kelp_forest {
+.background_in_a_classroom {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_in_an_ancient_tomb {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -444px;
  width: 141px;
  height: 147px;
 }
-.background_lighthouse_shore {
+.background_in_the_armory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px 0px;
  width: 141px;
  height: 147px;
 }
-.background_lilypad {
+.background_inside_an_ornament {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -148px;
  width: 141px;
  height: 147px;
 }
-.background_magic_beanstalk {
+.background_island_waterfalls {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -296px;
  width: 141px;
  height: 147px;
 }
-.background_magical_candles {
+.background_jungle_canopy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -444px;
  width: 141px;
  height: 147px;
 }
-.background_magical_museum {
+.background_kelp_forest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -592px;
  width: 141px;
  height: 147px;
 }
-.background_marble_temple {
+.background_lake_with_floating_lanterns {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -592px;
  width: 141px;
  height: 147px;
 }
-.background_market {
+.background_lighthouse_shore {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -592px;
  width: 141px;
  height: 147px;
 }
-.background_meandering_cave {
+.background_lilypad {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -592px;
  width: 141px;
  height: 147px;
 }
-.background_medieval_kitchen {
+.background_magic_beanstalk {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_castle {
+.background_magical_candles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -592px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_clouds {
+.background_magical_museum {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px 0px;
  width: 141px;
  height: 147px;
 }
-.background_midnight_lake {
+.background_marble_temple {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -148px;
  width: 141px;
  height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_market {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -296px;
  width: 141px;
  height: 147px;
 }
-.background_mistiflying_circus {
+.background_meandering_cave {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -444px;
  width: 141px;
  height: 147px;
 }
-.background_monster_makers_workshop {
+.background_medieval_kitchen {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -592px;
  width: 141px;
  height: 147px;
 }
-.background_mountain_lake {
+.background_midnight_castle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -740px;
  width: 141px;
  height: 147px;
 }
-.background_mountain_pyramid {
+.background_midnight_clouds {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -740px;
  width: 141px;
  height: 147px;
 }
-.background_mystical_observatory {
+.background_midnight_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -740px;
  width: 141px;
  height: 147px;
 }
-.background_night_dunes {
+.background_mist_shrouded_mountain {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -740px;
  width: 141px;
  height: 147px;
 }
-.background_ocean_sunrise {
+.background_mistiflying_circus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -740px;
  width: 141px;
  height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_monster_makers_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -740px;
  width: 141px;
  height: 147px;
 }
-.background_on_tree_branch {
+.background_mountain_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -740px;
  width: 141px;
  height: 147px;
 }
-.background_open_waters {
+.background_mountain_pyramid {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px 0px;
  width: 141px;
  height: 147px;
 }
-.background_orchard {
+.background_mystical_observatory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -148px;
  width: 141px;
  height: 147px;
 }
-.background_pagodas {
+.background_night_dunes {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -296px;
  width: 141px;
  height: 147px;
 }
-.background_park_with_statue {
+.background_ocean_sunrise {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -444px;
  width: 141px;
  height: 147px;
 }
-.background_pirate_flag {
+.background_old_fashioned_bakery {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -592px;
  width: 141px;
  height: 147px;
 }
-.background_pixelists_workshop {
+.background_on_tree_branch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -740px;
  width: 141px;
  height: 147px;
 }
-.background_potion_shop {
+.background_open_waters {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -888px;
  width: 141px;
  height: 147px;
 }
-.background_productivity_plaza {
+.background_orchard {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pumpkin_carriage {
+.background_pagodas {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pumpkin_patch {
+.background_park_with_statue {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -888px;
  width: 141px;
  height: 147px;
 }
-.background_purple {
+.background_pirate_flag {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -888px;
  width: 141px;
  height: 147px;
 }
-.background_pyramids {
+.background_pixelists_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainbow_meadow {
+.background_potion_shop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainbows_end {
+.background_productivity_plaza {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rainforest {
+.background_pumpkin_carriage {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px 0px;
  width: 141px;
  height: 147px;
 }
-.background_rainy_barnyard {
+.background_pumpkin_patch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -148px;
  width: 141px;
  height: 147px;
 }
-.background_rainy_city {
+.background_purple {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -296px;
  width: 141px;
  height: 147px;
 }
-.background_red {
+.background_pyramids {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -444px;
  width: 141px;
  height: 147px;
 }
-.background_relaxation_river {
+.background_raging_river {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -592px;
  width: 141px;
  height: 147px;
 }
-.background_resting_in_the_inn {
+.background_rainbow_meadow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -740px;
  width: 141px;
  height: 147px;
 }
-.background_river_of_lava {
+.background_rainbows_end {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -888px;
  width: 141px;
  height: 147px;
 }
-.background_rolling_hills {
+.background_rainforest {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_rose_garden {
+.background_rainy_barnyard {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_rowboat {
+.background_rainy_city {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_salt_lake {
+.background_red {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_sandcastle {
+.background_relaxation_river {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_school_of_fish {
+.background_resting_in_the_inn {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_scribes_workshop {
+.background_river_of_lava {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_seafarer_ship {
+.background_rolling_hills {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_seaside_cliffs {
+.background_rope_bridge {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_rose_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px 0px;
  width: 141px;
  height: 147px;
 }
-.background_shimmery_bubbles {
+.background_rowboat {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -148px;
  width: 141px;
  height: 147px;
 }
-.background_slimy_swamp {
+.background_salt_lake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -296px;
  width: 141px;
  height: 147px;
 }
-.background_snowglobe {
+.background_sandcastle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -444px;
  width: 141px;
  height: 147px;
 }
-.background_snowman_army {
+.background_school_of_fish {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -592px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_scribes_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -740px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_pines {
+.background_seafarer_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -888px;
  width: 141px;
  height: 147px;
 }
-.background_snowy_sunrise {
+.background_seaside_cliffs {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_south_pole {
+.background_shimmering_ice_prism {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_sparkling_snowflake {
+.background_shimmery_bubbles {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spider_web {
+.background_slimy_swamp {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_snowglobe {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spooky_hotel {
+.background_snowman_army {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_snowy_day_fireplace {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spring_rain {
+.background_snowy_pines {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_spring_thaw {
+.background_snowy_sunrise {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stable {
+.background_south_pole {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_stained_glass {
+.background_sparkling_snowflake {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_starry_skies {
+.background_spider_web {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px 0px;
  width: 141px;
  height: 147px;
 }
-.background_starry_winter_night {
+.background_splash_in_a_puddle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -148px;
  width: 141px;
  height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_spooky_hotel {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -296px;
  width: 141px;
  height: 147px;
 }
-.background_stone_circle {
+.background_spooky_scarecrow_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -444px;
  width: 141px;
  height: 147px;
 }
-.background_stormy_rooftops {
+.background_spring_rain {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -592px;
  width: 141px;
  height: 147px;
 }
-.background_stormy_ship {
+.background_spring_thaw {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -740px;
  width: 141px;
  height: 147px;
 }
-.background_strange_sewers {
+.background_stable {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -888px;
  width: 141px;
  height: 147px;
 }
-.background_strawberry_patch {
+.background_stained_glass {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_succulent_garden {
+.background_starry_skies {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_summer_fireworks {
+.background_starry_winter_night {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunken_ship {
+.background_stoikalm_volcanoes {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_meadow {
+.background_stone_circle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_oasis {
+.background_stone_tower {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_sunset_savannah {
+.background_stormy_rooftops {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_swarming_darkness {
+.background_stormy_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_strange_sewers {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tar_pits {
+.background_strawberry_patch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tavern {
+.background_succulent_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_tea_party {
+.background_summer_fireworks {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_terraced_rice_field {
+.background_sunken_ship {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_throne_room {
+.background_sunset_meadow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px 0px;
  width: 141px;
  height: 147px;
 }
-.background_thunderstorm {
+.background_sunset_oasis {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -148px;
  width: 141px;
  height: 147px;
 }
-.background_tide_pool {
+.background_sunset_savannah {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -296px;
  width: 141px;
  height: 147px;
 }
-.background_tornado {
+.background_swarming_darkness {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -444px;
  width: 141px;
  height: 147px;
 }
-.background_toymakers_workshop {
+.background_swimming_among_jellyfish {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -592px;
  width: 141px;
  height: 147px;
 }
-.background_training_grounds {
+.background_tar_pits {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -740px;
  width: 141px;
  height: 147px;
 }
-.background_treasure_room {
+.background_tavern {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -888px;
  width: 141px;
  height: 147px;
 }
-.background_tree_roots {
+.background_tea_party {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1036px;
  width: 141px;
  height: 147px;
 }
-.background_treehouse {
+.background_terraced_rice_field {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1184px;
  width: 141px;
  height: 147px;
 }
-.background_tulip_garden {
+.background_throne_room {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1332px;
  width: 141px;
  height: 147px;
 }
-.background_twinkly_lights {
+.background_thunderstorm {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: 0px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_twinkly_party_lights {
+.background_tide_pool {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -142px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_underwater_ruins {
+.background_tornado {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -284px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_underwater_vents {
+.background_toymakers_workshop {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -426px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_valentines_day_feasting_hall {
+.background_training_grounds {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -568px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_viking_ship {
+.background_treasure_room {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -710px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_violet {
+.background_tree_roots {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -852px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_volcano {
+.background_treehouse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -994px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_water_mill {
+.background_tulip_garden {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1136px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_waterfall_rock {
+.background_twinkly_lights {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1278px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_wedding_arch {
+.background_twinkly_party_lights {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1420px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_windmills {
+.background_undead_hands {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1562px -1480px;
  width: 141px;
  height: 147px;
 }
-.background_windy_autumn {
+.background_underwater_among_koi {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px 0px;
  width: 141px;
  height: 147px;
 }
-.background_winter_fireworks {
+.background_underwater_ruins {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -148px;
  width: 141px;
  height: 147px;
 }
-.background_winter_night {
+.background_underwater_vents {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -296px;
  width: 141px;
  height: 147px;
 }
-.background_winter_nocturne {
+.background_valentines_day_feasting_hall {
  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
  background-position: -1704px -444px;
  width: 141px;
@@ -0,0 +1,912 @@
+.Pet-Turtle-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Dessert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Moonglow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-MossyStone {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-PolkaDot {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-SolarSystem {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StainedGlass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunset {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Windup {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -574px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -656px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -738px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -820px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -100px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -169px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -238px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -307px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -376px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -445px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -514px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -583px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -652px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -721px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -902px -790px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -483px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -552px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -621px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -690px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -759px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -828px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Moonglow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -897px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_MossyStone {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_PolkaDot {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -552px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -621px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -690px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -759px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -828px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -984px -897px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SolarSystem {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StainedGlass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunset {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -483px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -552px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -621px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -690px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -759px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -828px -969px;
+  width: 68px;
+  height: 68px;
+}
@@ -2,7 +2,7 @@
  position: absolute;
  right: 24px;
  top: -24px;
-  z-index: 999;
+  z-index: 998;
  align-items: center;
 }

@@ -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="https://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">
@@ -71,22 +83,31 @@
              </router-link>
            </li>
            <li>
-              <router-link to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac">
+              <a
+                :href="bugReportMailto"
+                target="_blank"
+              >
                {{ $t('reportBug') }}
-              </router-link>
+              </a>
            </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 +117,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="https://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 +177,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="https://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 +217,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,19 +469,20 @@ 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';
 import instagram from '@/assets/svg/instagram.svg';
 import heart from '@/assets/svg/heart.svg';
 import buyGemsModal from './payments/buyGemsModal.vue';
+import reportBug from '@/mixins/reportBug.js';

 const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
 export default {
  components: {
    buyGemsModal,
  },
+  mixins: [reportBug],
  data () {
    return {
      icons: Object.freeze({
@@ -490,12 +584,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 });
    },
  },
--- a/Show More
+++ b/Show More