4.208.1

Currently translated at 100.0% (373 of 373 strings)

Translated using Weblate (French)

Currently translated at 100.0% (203 of 203 strings)

Translated using Weblate (French)

Currently translated at 100.0% (56 of 56 strings)

Translated using Weblate (French)

Currently translated at 100.0% (47 of 47 strings)

Translated using Weblate (Russian)

Currently translated at 99.8% (737 of 738 strings)

Translated using Weblate (Ukrainian)

Currently translated at 87.5% (7 of 8 strings)

Translated using Weblate (Japanese)

Currently translated at 100.0% (2413 of 2413 strings)

Translated using Weblate (Japanese)

Currently translated at 100.0% (738 of 738 strings)

Translated using Weblate (Thai)

Currently translated at 34.4% (41 of 119 strings)

Co-authored-by: Benoit Hetru <me+hbtc@gahanka.net>
Co-authored-by: Sirapat Charukamnertkanok <sirapat1charu@gmail.com>
Co-authored-by: Weblate <noreply@weblate.org>
Co-authored-by: mattya 226 <worldworld1114@gmail.com>
Co-authored-by: Естай <akseleu@yahoo.com>
Co-authored-by: Назар Коцур <bicolino34@gmail.com>
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/th/
Translate-URL: https://translate.habitica.com/projects/habitica/contrib/fr/
Translate-URL: https://translate.habitica.com/projects/habitica/faq/fr/
Translate-URL: https://translate.habitica.com/projects/habitica/gear/ja/
Translate-URL: https://translate.habitica.com/projects/habitica/generic/fr/
Translate-URL: https://translate.habitica.com/projects/habitica/groups/fr/
Translate-URL: https://translate.habitica.com/projects/habitica/inventory/uk/
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/ja/
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/ru/
Translation: Habitica/Achievements
Translation: Habitica/Contrib
Translation: Habitica/Faq
Translation: Habitica/Gear
Translation: Habitica/Generic
Translation: Habitica/Groups
Translation: Habitica/Inventory
Translation: Habitica/Questscontent

.eslintignore

@@ -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/*

.github/ISSUE_TEMPLATE.md

@@ -1,4 +1,4 @@
-[//]: # (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 the Habitica website's Help menu. Most bugs can be handled quickly there. If a GitHub issue is needed, staff will let you know. It is recommended that you don't create a new issue unless advised to.)
 
 [//]: # (Bugs in the mobile apps can also be reported there.)
 
@@ -6,15 +6,14 @@
 
 [//]: # (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.)
-

.github/workflows/test.yml

@@ -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

.gitignore

@@ -5,7 +5,7 @@ website/common/transpiled-babel/
 node_modules
 content_cache
 i18n_cache
-apidoc_build
+apidoc/html
 *.swp
 .idea*
 config.json

README.md

@@ -9,6 +9,6 @@ Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/bad
 
 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!

apidoc/apidoc.json

@@ -2,6 +2,7 @@
   "name": "Habitica V3 API Documentation",
   "title": "Habitica",
   "url": "https://habitica.com",
+  "sampleUrl": null,
   "header": {
     "title": "Introduction",
     "filename": "apidoc/header.md"

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.

gulp/gulp-apidoc.js

@@ -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) {

migrations/archive/2021/20210824_pet_group_achievements.js

@@ -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
+  }
+};

package.json

@@ -1,18 +1,18 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.202.0",
+  "version": "4.208.1",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.15.0",
-    "@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.9",
-    "amplitude": "^5.1.6",
+    "amplitude": "^5.1.7",
     "apidoc": "^0.29.0",
     "apple-auth": "^1.0.7",
     "bcrypt": "^5.0.1",
@@ -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",
@@ -43,16 +43,16 @@
     "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.13.5",
+    "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-facebook": "^3.0.0",
@@ -61,13 +61,13 @@
     "paypal-rest-sdk": "^1.8.1",
     "pp-ipn": "^1.1.0",
     "ps-tree": "^1.0.0",
-    "rate-limiter-flexible": "^2.2.2",
+    "rate-limiter-flexible": "^2.2.4",
     "redis": "^3.1.2",
-    "regenerator-runtime": "^0.13.7",
+    "regenerator-runtime": "^0.13.9",
     "remove-markdown": "^0.3.0",
     "rimraf": "^3.0.2",
     "short-uuid": "^4.2.0",
-    "stripe": "^8.168.0",
+    "stripe": "^8.174.0",
     "superagent": "^6.1.0",
     "universal-analytics": "^0.4.23",
     "useragent": "^2.1.9",
@@ -110,7 +110,7 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
@@ -121,9 +121,9 @@
     "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": {}

test/api/unit/middlewares/cronMiddleware.js

@@ -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();
-        });
-      });
-    });
-  });
 });

test/api/unit/models/group.test.js

@@ -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;
 

test/common/fns/randomDrop.test.js

@@ -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');
-      });
-    });
   });
 });

test/common/ops/buy/buyMysterySet.js

@@ -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',
-        });
       });
     });
   });

website/client/.eslintrc.js

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

website/client/config/storybook/README.md

@@ -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

website/client/config/storybook/config.js

@@ -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);

website/client/package.json

@@ -13,37 +13,38 @@
     "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^6.3.7",
-    "@storybook/addon-knobs": "^6.2.9",
-    "@storybook/addon-links": "^6.3.7",
-    "@storybook/addon-notes": "^5.3.21",
-    "@storybook/vue": "^6.3.7",
+    "@storybook/addons": "6.3.8",
+    "@storybook/addon-actions": "6.3.8",
+    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-links": "6.3.8",
+    "@storybook/addon-notes": "5.3.21",
+    "@storybook/vue": "6.3.8",
     "@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.4.0",
-    "axios": "^0.21.1",
+    "amplitude-js": "^8.6.0",
+    "axios": "^0.21.4",
     "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.16.1",
+    "core-js": "^3.17.3",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-vue": "^6.2.2",
     "habitica-markdown": "^3.0.0",
-    "hellojs": "^1.19.3",
+    "hellojs": "^1.19.4",
     "inspectpack": "^4.7.1",
-    "intro.js": "^3.4.0",
+    "intro.js": "^4.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"
   }
 }

website/client/src/app.vue

@@ -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,37 +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/spritesmith-main-31.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>

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

@@ -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;

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

@@ -1,814 +1,814 @@
-.background_haunted_forest {
+.background_harvest_feast {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
-.background_haunted_house {
+.background_harvest_fields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px 0px;
   width: 141px;
   height: 147px;
 }
-.background_heart_shaped_bubbles {
+.background_harvest_moon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
-.background_heather_field {
+.background_haunted_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
-.background_herding_sheep_in_autumn {
+.background_haunted_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_hearth {
+.background_haunted_photo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -148px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_market {
+.background_heart_shaped_bubbles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_wreath {
+.background_heather_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
-.background_hot_air_balloon {
+.background_herding_sheep_in_autumn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
-.background_hot_spring {
+.background_holiday_hearth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
-.background_ice_cave {
+.background_holiday_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
-.background_iceberg {
+.background_holiday_wreath {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
-.background_icicle_bridge {
+.background_hot_air_balloon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
-.background_idyllic_cabin {
+.background_hot_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -148px;
   width: 141px;
   height: 147px;
 }
-.background_in_a_classroom {
+.background_ice_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_iceberg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
-.background_in_the_armory {
+.background_icicle_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
-.background_inside_an_ornament {
+.background_idyllic_cabin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_in_a_classroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
-.background_jungle_canopy {
+.background_in_an_ancient_tomb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_in_the_armory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_inside_an_ornament {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_jungle_canopy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magic_beanstalk {
+.background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
-.background_magical_candles {
+.background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
-.background_magical_museum {
+.background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
-.background_marble_temple {
+.background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
-.background_market {
+.background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
-.background_meandering_cave {
+.background_magical_candles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
-.background_medieval_kitchen {
+.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_castle {
+.background_marble_temple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_clouds {
+.background_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_lake {
+.background_meandering_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_medieval_kitchen {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
-.background_mistiflying_circus {
+.background_midnight_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
-.background_monster_makers_workshop {
+.background_midnight_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_lake {
+.background_midnight_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_pyramid {
+.background_mist_shrouded_mountain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
-.background_mystical_observatory {
+.background_mistiflying_circus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
-.background_night_dunes {
+.background_monster_makers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
-.background_ocean_sunrise {
+.background_mountain_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_mountain_pyramid {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
-.background_on_tree_branch {
+.background_mystical_observatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
-.background_open_waters {
+.background_night_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
-.background_orchard {
+.background_ocean_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
-.background_pagodas {
+.background_old_fashioned_bakery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
-.background_park_with_statue {
+.background_on_tree_branch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
-.background_pirate_flag {
+.background_open_waters {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pixelists_workshop {
+.background_orchard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
-.background_potion_shop {
+.background_pagodas {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
-.background_productivity_plaza {
+.background_park_with_statue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_carriage {
+.background_pirate_flag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_patch {
+.background_pixelists_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
-.background_purple {
+.background_potion_shop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pyramids {
+.background_productivity_plaza {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.background_raging_river {
+.background_pumpkin_carriage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_rainbow_meadow {
+.background_pumpkin_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_rainbows_end {
+.background_purple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.background_rainforest {
+.background_pyramids {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_barnyard {
+.background_raging_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_city {
+.background_rainbow_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_red {
+.background_rainbows_end {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
-.background_relaxation_river {
+.background_rainforest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_resting_in_the_inn {
+.background_rainy_barnyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_river_of_lava {
+.background_rainy_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rolling_hills {
+.background_red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rope_bridge {
+.background_relaxation_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rose_garden {
+.background_resting_in_the_inn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rowboat {
+.background_river_of_lava {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_salt_lake {
+.background_rolling_hills {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_sandcastle {
+.background_rope_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_school_of_fish {
+.background_rose_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px 0px;
   width: 141px;
   height: 147px;
 }
-.background_scribes_workshop {
+.background_rowboat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -148px;
   width: 141px;
   height: 147px;
 }
-.background_seafarer_ship {
+.background_salt_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -296px;
   width: 141px;
   height: 147px;
 }
-.background_seaside_cliffs {
+.background_sandcastle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -444px;
   width: 141px;
   height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_school_of_fish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -592px;
   width: 141px;
   height: 147px;
 }
-.background_shimmery_bubbles {
+.background_scribes_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -740px;
   width: 141px;
   height: 147px;
 }
-.background_slimy_swamp {
+.background_seafarer_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -888px;
   width: 141px;
   height: 147px;
 }
-.background_snowglobe {
+.background_seaside_cliffs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_snowman_army {
+.background_shimmering_ice_prism {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_shimmery_bubbles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_pines {
+.background_slimy_swamp {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_sunrise {
+.background_snowglobe {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_south_pole {
+.background_snowman_army {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_sparkling_snowflake {
+.background_snowy_day_fireplace {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spider_web {
+.background_snowy_pines {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_snowy_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_hotel {
+.background_south_pole {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_sparkling_snowflake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spring_rain {
+.background_spider_web {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px 0px;
   width: 141px;
   height: 147px;
 }
-.background_spring_thaw {
+.background_splash_in_a_puddle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -148px;
   width: 141px;
   height: 147px;
 }
-.background_stable {
+.background_spooky_hotel {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -296px;
   width: 141px;
   height: 147px;
 }
-.background_stained_glass {
+.background_spooky_scarecrow_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -444px;
   width: 141px;
   height: 147px;
 }
-.background_starry_skies {
+.background_spring_rain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -592px;
   width: 141px;
   height: 147px;
 }
-.background_starry_winter_night {
+.background_spring_thaw {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -740px;
   width: 141px;
   height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_stable {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
-.background_stone_circle {
+.background_stained_glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_stone_tower {
+.background_starry_skies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_rooftops {
+.background_starry_winter_night {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_ship {
+.background_stoikalm_volcanoes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_strange_sewers {
+.background_stone_circle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_strawberry_patch {
+.background_stone_tower {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_succulent_garden {
+.background_stormy_rooftops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_summer_fireworks {
+.background_stormy_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_sunken_ship {
+.background_strange_sewers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_meadow {
+.background_strawberry_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_oasis {
+.background_succulent_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_savannah {
+.background_summer_fireworks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_swarming_darkness {
+.background_sunken_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_sunset_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
-.background_tar_pits {
+.background_sunset_oasis {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
-.background_tavern {
+.background_sunset_savannah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
-.background_tea_party {
+.background_swarming_darkness {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
-.background_terraced_rice_field {
+.background_swimming_among_jellyfish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
-.background_throne_room {
+.background_tar_pits {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
-.background_thunderstorm {
+.background_tavern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
-.background_tide_pool {
+.background_tea_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_tornado {
+.background_terraced_rice_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_toymakers_workshop {
+.background_throne_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_training_grounds {
+.background_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_treasure_room {
+.background_tide_pool {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tree_roots {
+.background_tornado {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_treehouse {
+.background_toymakers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tulip_garden {
+.background_training_grounds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_lights {
+.background_treasure_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_party_lights {
+.background_tree_roots {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_among_koi {
+.background_treehouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_ruins {
+.background_tulip_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_vents {
+.background_twinkly_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_valentines_day_feasting_hall {
+.background_twinkly_party_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_viking_ship {
+.background_undead_hands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_violet {
+.background_underwater_among_koi {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px 0px;
   width: 141px;
   height: 147px;
 }
-.background_volcano {
+.background_underwater_ruins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -148px;
   width: 141px;
   height: 147px;
 }
-.background_water_mill {
+.background_underwater_vents {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -296px;
   width: 141px;
   height: 147px;
 }
-.background_waterfall_rock {
+.background_valentines_day_feasting_hall {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -444px;
   width: 141px;

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

@@ -1,744 +1,396 @@
 .quest_TEMPLATE_FOR_MISSING_IMAGE {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -704px -1543px;
+  background-position: -502px -1519px;
   width: 221px;
   height: 39px;
 }
+.quest_dustbunnies {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -220px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_egg {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1762px -362px;
+  width: 165px;
+  height: 207px;
+}
+.quest_evilsanta {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1762px -1023px;
+  width: 118px;
+  height: 131px;
+}
+.quest_evilsanta2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -440px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_falcon {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_ferret {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -220px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -440px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_frog {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1540px 0px;
+  width: 221px;
+  height: 213px;
+}
+.quest_ghost_stag {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -660px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_goldenknight1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -660px -220px;
+  width: 219px;
+  height: 219px;
+}
+.quest_goldenknight2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -1519px;
+  width: 250px;
+  height: 150px;
+}
+.quest_goldenknight3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px 0px;
+  width: 219px;
+  height: 231px;
+}
+.quest_gryphon {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -443px -1332px;
+  width: 216px;
+  height: 177px;
+}
+.quest_guineapig {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -452px;
+  width: 219px;
+  height: 219px;
+}
 .quest_harpy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -223px 0px;
+  background-position: -220px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -871px -1326px;
+  background-position: 0px -1332px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -443px 0px;
+  background-position: -440px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -226px;
+  background-position: -660px -452px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -226px;
+  background-position: -880px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1314px -1326px;
+  background-position: -660px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -226px;
+  background-position: -880px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -663px 0px;
+  background-position: -880px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -663px -220px;
+  background-position: 0px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -251px -1543px;
+  background-position: -1762px -570px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -446px;
+  background-position: -220px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -446px;
+  background-position: -440px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -446px;
+  background-position: -660px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -1106px;
+  background-position: -1540px -214px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -446px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -883px 0px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -883px -220px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -883px -440px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -666px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1097px -1106px;
+  background-position: -1540px -431px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1091px -1326px;
+  background-position: -220px -1332px;
   width: 222px;
   height: 177px;
 }
 .quest_owl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -666px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1314px -1106px;
+  background-position: -1540px -648px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1243px;
+  background-position: -1762px -178px;
   width: 190px;
   height: 183px;
 }
 .quest_pterodactyl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -666px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_rat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -666px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_robot {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -666px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_rock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1326px;
+  background-position: -1540px -865px;
   width: 216px;
   height: 216px;
 }
 .quest_rooster {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -890px;
+  background-position: -1528px -1332px;
   width: 213px;
   height: 174px;
 }
 .quest_ruby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1103px 0px;
+  background-position: -880px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_sabretooth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1103px -220px;
+  background-position: -1100px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_seaserpent {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1103px -440px;
+  background-position: -1320px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_sheep {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1103px -660px;
+  background-position: -1320px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_silver {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -886px;
+  background-position: -1320px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_slime {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -886px;
+  background-position: -1320px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_sloth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -886px;
+  background-position: -1320px -880px;
   width: 219px;
   height: 219px;
 }
 .quest_snail {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -651px -1326px;
+  background-position: -1320px -1112px;
   width: 219px;
   height: 213px;
 }
 .quest_snake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px 0px;
+  background-position: -877px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_spider {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1543px;
+  background-position: -251px -1519px;
   width: 250px;
   height: 150px;
 }
 .quest_squirrel {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -886px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_stoikalmCalamity1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -402px -1543px;
+  background-position: -1762px -721px;
   width: 150px;
   height: 150px;
 }
 .quest_stoikalmCalamity2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -886px;
+  background-position: -220px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_stoikalmCalamity3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -886px;
+  background-position: -440px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_stone {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1323px 0px;
+  background-position: -660px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_taskwoodsTerror1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -553px -1543px;
+  background-position: -1762px -872px;
   width: 150px;
   height: 150px;
 }
 .quest_taskwoodsTerror2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -217px -1326px;
+  background-position: -1540px -1082px;
   width: 216px;
   height: 216px;
 }
 .quest_taskwoodsTerror3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1323px -220px;
+  background-position: -880px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_treeling {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -178px;
+  background-position: -1094px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_trex {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1065px;
+  background-position: -1762px 0px;
   width: 204px;
   height: 177px;
 }
 .quest_trex_undead {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -356px;
+  background-position: -1311px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_triceratops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1323px -440px;
+  background-position: -1100px -1112px;
   width: 219px;
   height: 219px;
 }
-.quest_turquoise {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1323px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_turtle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1323px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_unicorn {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1106px;
-  width: 219px;
-  height: 219px;
-}
-.quest_velociraptor {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px 0px;
-  width: 222px;
-  height: 225px;
-}
-.quest_vice1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -534px;
-  width: 216px;
-  height: 177px;
-}
-.quest_vice2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -1106px;
-  width: 219px;
-  height: 219px;
-}
-.quest_vice3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -712px;
-  width: 216px;
-  height: 177px;
-}
-.quest_waffle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -1106px;
-  width: 219px;
-  height: 219px;
-}
-.quest_whale {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -1106px;
-  width: 219px;
-  height: 219px;
-}
-.quest_yarn {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -434px -1326px;
-  width: 216px;
-  height: 216px;
-}
-.quest_atom1_soapBars {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -682px;
-  width: 48px;
-  height: 51px;
-}
-.quest_dilatoryDistress1_blueFins {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -734px;
-  width: 51px;
-  height: 48px;
-}
-.quest_dilatoryDistress1_fireCoral {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -783px;
-  width: 48px;
-  height: 51px;
-}
-.quest_egg_plainEgg {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -835px;
-  width: 48px;
-  height: 51px;
-}
-.quest_evilsanta2_branches {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -887px;
-  width: 48px;
-  height: 51px;
-}
-.quest_evilsanta2_tracks {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -621px;
-  width: 54px;
-  height: 60px;
-}
-.quest_goldenknight1_testimony {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -939px;
-  width: 48px;
-  height: 51px;
-}
-.quest_lostMasterclasser1_ancientTome {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -49px -1694px;
-  width: 33px;
-  height: 42px;
-}
-.quest_lostMasterclasser1_forbiddenTome {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -83px -1694px;
-  width: 33px;
-  height: 42px;
-}
-.quest_lostMasterclasser1_hiddenTome {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -117px -1694px;
-  width: 33px;
-  height: 42px;
-}
-.quest_mayhemMistiflying2_mistifly1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -991px;
-  width: 48px;
-  height: 51px;
-}
-.quest_mayhemMistiflying2_mistifly2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1043px;
-  width: 48px;
-  height: 51px;
-}
-.quest_mayhemMistiflying2_mistifly3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1095px;
-  width: 48px;
-  height: 51px;
-}
-.quest_moon1_shard {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1496px;
-  width: 42px;
-  height: 42px;
-}
-.quest_moonstone1_moonstone {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1086px -1543px;
-  width: 30px;
-  height: 30px;
-}
-.quest_robot_bolt {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1147px;
-  width: 48px;
-  height: 51px;
-}
-.quest_robot_gear {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1199px;
-  width: 48px;
-  height: 51px;
-}
-.quest_robot_spring {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1251px;
-  width: 48px;
-  height: 51px;
-}
-.quest_ruby_aquariusRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -704px -1652px;
-  width: 39px;
-  height: 40px;
-}
-.quest_ruby_rubyGem {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1303px;
-  width: 48px;
-  height: 51px;
-}
-.quest_ruby_venusRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -926px -1543px;
-  width: 39px;
-  height: 39px;
-}
-.quest_silver_cancerRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -966px -1543px;
-  width: 39px;
-  height: 39px;
-}
-.quest_silver_moonRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1672px -1496px;
-  width: 39px;
-  height: 42px;
-}
-.quest_silver_silverIngot {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1355px;
-  width: 48px;
-  height: 51px;
-}
-.quest_stoikalmCalamity2_icicleCoin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1407px;
-  width: 48px;
-  height: 51px;
-}
-.quest_stone_capricornRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1586px -1496px;
-  width: 42px;
-  height: 42px;
-}
-.quest_stone_marsRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1629px -1496px;
-  width: 42px;
-  height: 42px;
-}
-.quest_stone_mossyStone {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1459px;
-  width: 48px;
-  height: 51px;
-}
-.quest_taskwoodsTerror2_brownie {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1511px;
-  width: 48px;
-  height: 51px;
-}
-.quest_taskwoodsTerror2_dryad {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1563px;
-  width: 48px;
-  height: 51px;
-}
-.quest_taskwoodsTerror2_pixie {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -1615px;
-  width: 48px;
-  height: 51px;
-}
-.quest_turquoise_neptuneRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1006px -1543px;
-  width: 39px;
-  height: 39px;
-}
-.quest_turquoise_sagittariusRune {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1046px -1543px;
-  width: 39px;
-  height: 39px;
-}
-.quest_turquoise_turquoiseGem {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1694px;
-  width: 48px;
-  height: 51px;
-}
-.quest_vice2_lightCrystal {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1712px -1496px;
-  width: 40px;
-  height: 40px;
-}
-.inventory_quest_scroll_alligator {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1543px -1427px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_amber {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1612px -1427px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_armadillo {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1681px -1427px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_atom1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -773px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_atom1_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -704px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_atom2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -911px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_atom2_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -842px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_atom3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1049px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_atom3_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -980px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_axolotl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1118px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_badger {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1187px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_basilist {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1256px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_beetle {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1325px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_blackPearl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1394px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_bronze {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1463px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_bunny {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1532px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_butterfly {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1601px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_cheetah {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1670px -1583px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_cow {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px 0px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dilatoryDistress1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -138px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dilatoryDistress2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -276px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dilatoryDistress2_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -207px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dilatoryDistress3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -414px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dilatoryDistress3_locked {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -345px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dilatory_derby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -69px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dolphin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -483px;
-  width: 68px;
-  height: 68px;
-}
-.inventory_quest_scroll_dustbunnies {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -552px;
-  width: 68px;
-  height: 68px;
-}

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

@@ -1,120 +1,912 @@
-.Pet_HatchingPotion_RoseQuartz {
+.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: -69px 0px;
+  background-position: -984px -483px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Ruby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -69px;
+  background-position: -984px -552px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_SandSculpture {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -69px -69px;
+  background-position: -984px -621px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shade {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px 0px;
+  background-position: -984px -690px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px -69px;
+  background-position: -984px -759px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Shimmer {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -138px;
+  background-position: -984px -828px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Silver {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -69px -138px;
+  background-position: -984px -897px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Skeleton {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px -138px;
+  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: -207px 0px;
+  background-position: -138px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_StainedGlass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -207px -69px;
+  background-position: -207px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_StarryNight {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -207px -138px;
+  background-position: -276px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Sunset {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: 0px -207px;
+  background-position: -345px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Sunshine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -69px -207px;
+  background-position: -414px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -138px -207px;
+  background-position: -483px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Turquoise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -207px -207px;
+  background-position: -552px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Vampire {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px 0px;
+  background-position: -621px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Watery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px -69px;
+  background-position: -690px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_White {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px -138px;
+  background-position: -759px -969px;
   width: 68px;
   height: 68px;
 }
 .Pet_HatchingPotion_Zombie {
   background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
-  background-position: -276px -207px;
+  background-position: -828px -969px;
   width: 68px;
   height: 68px;
 }

website/client/src/assets/scss/create-task.scss

@@ -2,7 +2,7 @@
   position: absolute;
   right: 24px;
   top: -24px;
-  z-index: 999;
+  z-index: 998;
   align-items: center;
 }
 

website/client/src/assets/scss/sprites.scss

@@ -0,0 +1,5 @@
+@import url("../css/sprites.css");
+
+@for $i from 0 through 31 {
+  @import url("../css/sprites/spritesmith-main-#{$i}.css");
+}

website/client/src/components/achievements/dropCapReached.vue

@@ -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>

website/client/src/components/appFooter.vue

@@ -6,12 +6,16 @@
       <div class="row">
         <div class="col-12 col-md-2">
           <h3>
-            <a href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
-               target="_blank">{{ $t('mobileIOS') }}</a>
+            <a
+              href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
+              target="_blank"
+            >{{ $t('mobileIOS') }}</a>
           </h3>
           <h3>
-            <a href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
-               target="_blank">{{ $t('mobileAndroid') }}</a>
+            <a
+              href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
+              target="_blank"
+            >{{ $t('mobileAndroid') }}</a>
           </h3>
         </div>
         <div class="col-12 col-md-2">
@@ -23,12 +27,16 @@
               </router-link>
             </li>
             <li>
-              <a href="https://habitica.wordpress.com/"
-                 target="_blank">{{ $t('companyBlog') }}</a>
+              <a
+                href="https://habitica.wordpress.com/"
+                target="_blank"
+              >{{ $t('companyBlog') }}</a>
             </li>
             <li>
-              <a href="http://blog.habitrpg.com/"
-                 target="_blank">{{ $t('tumblr') }}</a>
+              <a
+                href="http://blog.habitrpg.com/"
+                target="_blank"
+              >{{ $t('tumblr') }}</a>
             </li>
             <li>
               <router-link to="/static/faq">
@@ -36,8 +44,10 @@
               </router-link>
             </li>
             <li>
-              <a href="http://habitica.fandom.com/wiki/Whats_New"
-                 target="_blank">{{ $t('oldNews') }}</a>
+              <a
+                href="http://habitica.fandom.com/wiki/Whats_New"
+                target="_blank"
+              >{{ $t('oldNews') }}</a>
             </li>
             <!-- Commenting out merch page see https://github.com/HabitRPG/habitica/issues/12039
             <li>
@@ -62,8 +72,10 @@
           <h3>{{ $t('footerCommunity') }}</h3>
           <ul>
             <li>
-              <a target="_blank"
-                 href="/static/community-guidelines">{{ $t('communityGuidelines') }}</a>
+              <a
+                target="_blank"
+                href="/static/community-guidelines"
+              >{{ $t('communityGuidelines') }}</a>
             </li>
             <li>
               <router-link to="/hall/contributors">
@@ -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="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
+                    target="_blank"
+                  >{{ $t('guidanceForBlacksmiths') }}</a>
                 </li>
               </ul>
             </div>
             <div class="col-6 social">
               <h3>{{ $t('footerSocial') }}</h3>
               <div class="icons">
-                <a class="social-circle"
-                   href="https://twitter.com/habitica"
-                   target="_blank">
-                  <div class="social-icon svg-icon"
-                       v-html="icons.twitter"></div>
+                <a
+                  class="social-circle"
+                  href="https://twitter.com/habitica"
+                  target="_blank"
+                >
+                  <div
+                    class="social-icon svg-icon"
+                    v-html="icons.twitter"
+                  ></div>
                 </a>
-                <a class="social-circle"
-                   href="https://www.instagram.com/habitica/"
-                   target="_blank">
-                  <div class="social-icon svg-icon instagram"
-                       v-html="icons.instagram"></div>
+                <a
+                  class="social-circle"
+                  href="https://www.instagram.com/habitica/"
+                  target="_blank"
+                >
+                  <div
+                    class="social-icon svg-icon instagram"
+                    v-html="icons.instagram"
+                  ></div>
                 </a>
-                <a class="social-circle"
-                   href="https://www.facebook.com/Habitica"
-                   target="_blank">
-                  <div class="social-icon facebook svg-icon"
-                       v-html="icons.facebook"></div>
+                <a
+                  class="social-circle"
+                  href="https://www.facebook.com/Habitica"
+                  target="_blank"
+                >
+                  <div
+                    class="social-icon facebook svg-icon"
+                    v-html="icons.facebook"
+                  ></div>
                 </a>
               </div>
             </div>
@@ -138,21 +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="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
+                  target="_blank"
+                >
+                  <div
+                    class="svg-icon heart"
+                    v-html="icons.heart"
+                  ></div>
                   <div class="text">{{ $t('companyContribute') }}</div>
                 </a>
               </div>
@@ -168,62 +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 });
     },
   },

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

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

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

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

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

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

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

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

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

@@ -154,6 +154,7 @@
         <input
           v-model="workingChallenge.prize"
           type="number"
+          class="form-control"
           :min="minPrize"
           :max="maxPrize"
           @change="enableSubmit"

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

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

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

@@ -112,8 +112,10 @@ export default {
     },
   },
   watch: {
-    async groupId () {
-      this.loadChallenges();
+    'group._id': {
+      async groupId () {
+        this.loadChallenges();
+      },
     },
   },
   mounted () {

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

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

website/client/src/components/creatorIntro.vue

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