4.148.1

fix(columns): avoid a Vue error on initial load
4.148.0
2026-05-10 11:09:46 -05:00 · 2020-07-10 11:04:56 -05:00 · 2020-07-10 10:50:27 -05:00 · 2020-07-07 14:49:31 -05:00 · 2020-07-07 14:49:20 -05:00 · 2020-07-07 14:39:27 -05:00
816 changed files with 50029 additions and 48395 deletions
@@ -10,6 +10,7 @@ dist/
 dist-client/
 apidoc_build/
 content_cache/
+i18n_cache/
 node_modules/

 # Old migrations, disabled
@@ -8,13 +8,8 @@

 # Requesting a feature

-Habitica uses [Trello](https://trello.com/b/EpoYEYod/habitica) to track feature requests. [Read more](https://trello.com/c/odmhIqyW/440-read-first-table-of-contents).
+Habitica uses [this Google form](https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link) to track feature requests. Please post there rather than creating an issue.

 # Contributing Code

 See [Contributing to Habitica](http://habitica.fandom.com/wiki/Contributing_to_Habitica#Coders_.28Web_.26_Mobile.29)
-
-## Issue Triage [![Open Source Helpers](https://www.codetriage.com/habitrpg/habitica/badges/users.svg)](https://www.codetriage.com/habitrpg/habitica)
-
-You can triage issues which may include reproducing bug reports or asking for vital information, such as version numbers or reproduction instructions. If you would like to start triaging issues, one easy way to get started is to [subscribe to habitrpg on CodeTriage](https://www.codetriage.com/habitrpg/habitica).
-
@@ -118,7 +118,7 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: sudo docker run --name mongo -d -p 27017:27017 mongo
+    - run: sudo docker run --name mongo -d -p 27017:27017 mongo:4.2
    - run: cp config.json.example config.json
    - name: npm install
      run: |
@@ -141,7 +141,7 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: sudo docker run --name mongo -d -p 27017:27017 mongo
+    - run: sudo docker run --name mongo -d -p 27017:27017 mongo:4.2
    - run: cp config.json.example config.json
    - name: npm install
      run: |
@@ -164,7 +164,7 @@ jobs:
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
-    - run: sudo docker run --name mongo -d -p 27017:27017 mongo
+    - run: sudo docker run --name mongo -d -p 27017:27017 mongo:4.2
    - run: cp config.json.example config.json
    - name: npm install
      run: |
@@ -1,4 +1,4 @@
-Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg) [![Code Climate](https://codeclimate.com/github/HabitRPG/habitrpg.svg)](https://codeclimate.com/github/HabitRPG/habitrpg) [![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=68393)](https://www.bountysource.com/trackers/68393-habitrpg?utm_source=68393&utm_medium=shield&utm_campaign=TRACKER_BADGE) [![Open Source Helpers](https://www.codetriage.com/habitrpg/habitica/badges/users.svg)](https://www.codetriage.com/habitrpg/habitica)
+Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg) [![Code Climate](https://codeclimate.com/github/HabitRPG/habitrpg.svg)](https://codeclimate.com/github/HabitRPG/habitrpg) [![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=68393)](https://www.bountysource.com/trackers/68393-habitrpg?utm_source=68393&utm_medium=shield&utm_campaign=TRACKER_BADGE)
 ===============

 [Habitica](https://habitica.com) is an open source habit building program which treats your life like a Role Playing Game. Level up as you succeed, lose HP as you fail, earn money to buy weapons and armor.
@@ -2,6 +2,10 @@
  "name": "Habitica V3 API Documentation",
  "title": "Habitica",
  "url": "https://habitica.com",
+  "header": {
+    "title": "Introduction",
+    "filename": "apidoc/header.md"
+  },
  "template": {
    "withCompare": false
  }
@@ -0,0 +1,5 @@
+# Introduction
+
+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. 
@@ -160,7 +160,7 @@ gulp.task('test:content:safe', gulp.series('test:prepare:build', cb => {
  pipe(runner);
 }));

-gulp.task('test:api:unit', done => {
+gulp.task('test:api:unit:run', done => {
  const runner = exec(
    testBin('istanbul cover --dir coverage/api-unit node_modules/mocha/bin/_mocha -- test/api/unit --recursive --require ./test/helpers/start-server'),
    err => {
@@ -174,7 +174,7 @@ gulp.task('test:api:unit', done => {
  pipe(runner);
 });

-gulp.task('test:api:unit:watch', () => gulp.watch(['website/server/libs/*', 'test/api/unit/**/*', 'website/server/controllers/**/*'], gulp.series('test:api:unit', done => done())));
+gulp.task('test:api:unit:watch', () => gulp.watch(['website/server/libs/*', 'test/api/unit/**/*', 'website/server/controllers/**/*'], gulp.series('test:api:unit:run', done => done())));

 gulp.task('test:api-v3:integration', done => {
  const runner = exec(
@@ -235,14 +235,22 @@ gulp.task('test', gulp.series(
  'test:sanity',
  'test:content',
  'test:common',
-  'test:api:unit',
+  'test:prepare:mongo',
+  'test:api:unit:run',
  'test:api-v3:integration',
  'test:api-v4:integration',
  done => done(),
 ));

 gulp.task('test:api-v3', gulp.series(
-  'test:api:unit',
+  'test:prepare:mongo',
+  'test:api:unit:run',
  'test:api-v3:integration',
  done => done(),
 ));
+
+gulp.task('test:api:unit', gulp.series(
+  'test:prepare:mongo',
+  'test:api:unit:run',
+  done => done(),
+));
@@ -12,7 +12,6 @@ const SLACK_CONFIG = {
 const LOCALES = './website/common/locales/';
 const ENGLISH_LOCALE = `${LOCALES}en/`;

-
 function getArrayOfLanguages () {
  const languages = fs.readdirSync(LOCALES);
  languages.shift(); // Remove README.md from array of languages
@@ -32,13 +32,11 @@
 *
 */

-
 // CONFIGURATION:
 // - Change the uuid below to be the user's uuid.
 // - Change ALL instances of "todos" to "habits"/"dailys"/"rewards" as
 //   needed. Do not miss any of them!

-
 const uuid = '30fb2640-7121-4968-ace5-f385e60ea6c5';

 db.users.aggregate([
@@ -2,7 +2,6 @@
 // @authorName = 'TheHollidayInn'; // in case script author needs to know when their ...
 // @authorUuid = ''; // ... own data is done

-
 /*
 * This migration moves chat off of groups and into their own model
 */
@@ -38,7 +37,6 @@ async function moveGroupChatToModel (skip = 0) {
    return chatpromises;
  });

-
  const reducedPromises = promises.reduce((acc, curr) => {
    acc = acc.concat(curr); // eslint-disable-line no-param-reassign
    return acc;
@@ -45,7 +45,7 @@ async function fixGroupPlanMembers () {
    pause();
    groupPlanCount += 1;

-    const canonicalMemberCount = await dbUsers.count(
+    const canonicalMemberCount = await dbUsers.countDocuments(
      {
        $or:
          [
@@ -25,7 +25,6 @@ const monk = require('monk'); // eslint-disable-line import/no-extraneous-depend

 const dbUsers = monk(connectionString).get('users', { castIds: false });

-
 function processUsers (lastId) {
  // specify a query to limit the affected users (empty for all users):
  const query = {
@@ -86,7 +85,6 @@ function updateUser (user) {

  const set = { migration: migrationName, 'flags.armoireEmpty': false };

-
  if (user.flags.armoireEmpty) {
    // this user believes their armoire has no more items in it
    if (
@@ -121,5 +121,4 @@ function exiting (code, msg) {
  process.exit(code);
 }

-
 processUsers();
@@ -9,7 +9,6 @@ const authorUuid = 'ed4c688c-6652-4a92-9d03-a5a79844174a'; // ... own data is do
 */
 const connectionString = 'mongodb://localhost:27017/habitrpg?auto_reconnect=true'; // FOR TEST DATABASE

-
 const dbUsers = monk(connectionString).get('users', { castIds: false });

 function processUsers (lastId) {
@@ -1,21 +1,21 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.141.2",
+  "version": "4.148.1",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/register": "^7.9.0",
-    "@google-cloud/trace-agent": "^4.2.5",
+    "@babel/core": "^7.10.3",
+    "@babel/preset-env": "^7.10.3",
+    "@babel/register": "^7.10.3",
+    "@google-cloud/trace-agent": "^5.1.0",
    "@slack/client": "^4.12.0",
    "accepts": "^1.3.5",
    "amazon-payments": "^0.2.8",
    "amplitude": "^3.5.0",
-    "apidoc": "^0.17.5",
+    "apidoc": "^0.23.0",
    "apn": "^2.2.0",
    "apple-auth": "^1.0.6",
-    "bcrypt": "^3.0.8",
+    "bcrypt": "^5.0.0",
    "body-parser": "^1.18.3",
    "compression": "^1.7.4",
    "cookie-session": "^1.4.0",
@@ -30,31 +30,32 @@
    "express-basic-auth": "^1.1.5",
    "express-validator": "^5.2.0",
    "glob": "^7.1.6",
-    "got": "^10.7.0",
+    "got": "^11.3.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
-    "gulp-imagemin": "^6.2.0",
+    "gulp-imagemin": "^7.1.0",
    "gulp-nodemon": "^2.5.0",
    "gulp.spritesmith": "^6.9.0",
-    "habitica-markdown": "^1.4.0",
-    "helmet": "^3.22.0",
+    "habitica-markdown": "^2.0.2",
+    "helmet": "^3.23.3",
    "image-size": "^0.8.3",
    "in-app-purchase": "^1.11.3",
    "js2xmlparser": "^4.0.1",
    "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^1.8.0",
+    "jwks-rsa": "^1.8.1",
    "lodash": "^4.17.15",
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
-    "moment": "^2.25.1",
+    "moment": "^2.27.0",
    "moment-recur": "^1.0.7",
-    "mongoose": "^5.9.10",
+    "mongoose": "^5.9.20",
    "morgan": "^1.10.0",
    "nconf": "^0.10.0",
    "node-gcm": "^1.0.2",
    "on-headers": "^1.0.2",
    "passport": "^0.4.1",
    "passport-facebook": "^3.0.0",
+    "passport-google-oauth2": "^0.2.0",
    "passport-google-oauth20": "1.0.0",
    "paypal-ipn": "3.0.0",
    "paypal-rest-sdk": "^1.8.1",
@@ -64,13 +65,13 @@
    "rimraf": "^3.0.2",
    "short-uuid": "^3.0.0",
    "stripe": "^7.15.0",
-    "superagent": "^5.2.2",
+    "superagent": "^5.3.1",
    "universal-analytics": "^0.4.17",
    "useragent": "^2.1.9",
-    "uuid": "^3.4.0",
-    "validator": "^11.0.0",
+    "uuid": "^8.2.0",
+    "validator": "^13.1.1",
    "vinyl-buffer": "^1.0.1",
-    "winston": "^3.2.1",
+    "winston": "^3.3.3",
    "winston-loggly-bulk": "^3.1.0",
    "xml2js": "^0.4.23"
  },
@@ -108,13 +109,13 @@
    "axios": "^0.19.2",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
-    "chalk": "^3.0.0",
+    "chalk": "^4.1.0",
    "expect.js": "^0.3.1",
    "istanbul": "^1.1.0-alpha.1",
    "mocha": "^5.1.1",
-    "monk": "^7.2.0",
+    "monk": "^7.3.0",
    "require-again": "^2.0.0",
-    "sinon": "^7.2.4",
+    "sinon": "^9.0.2",
    "sinon-chai": "^3.5.0",
    "sinon-stub-promise": "^4.0.0"
  },
@@ -35,15 +35,14 @@ async function deleteAmplitudeData (userId, email) {

 async function deleteHabiticaData (user, email) {
  const truncatedEmail = email.slice(0, email.indexOf('@'));
+  const set = {
+    'auth.local.hashed_password': '$2a$10$QDnNh1j1yMPnTXDEOV38xOePEWFd4X8DSYwAM8XTmqmacG5X0DKjW',
+    'auth.local.passwordHashMethod': 'bcrypt',
+  };
+  if (!user.auth.local.email) set['auth.local.email'] = `${truncatedEmail}@example.com`;
  await User.update(
    { _id: user._id },
-    {
-      $set: {
-        'auth.local.email': user.auth.local.email ? email : `${truncatedEmail}@example.com`,
-        'auth.local.hashed_password': '$2a$10$QDnNh1j1yMPnTXDEOV38xOePEWFd4X8DSYwAM8XTmqmacG5X0DKjW',
-        'auth.local.passwordHashMethod': 'bcrypt',
-      },
-    },
+    { $set: set },
  );
  const response = await axios.delete(
    `${BASE_URL}/api/v3/user`,
@@ -78,6 +77,7 @@ async function processEmailAddress (email) {

  const socialUsers = await User.find(
    {
+      'auth.local.email': { $not: emailRegex },
      $or: [
        { 'auth.facebook.emails.value': email },
        { 'auth.google.emails.value': email },
@@ -56,7 +56,6 @@ describe('Base model plugin', () => {
    expect(sanitized).not.to.have.property('usuallySettable');
  });

-
  it('can make fields private', () => {
    schema.plugin(baseModel, {
      private: ['amPrivate'],
@@ -1,4 +1,5 @@
 import mongoose from 'mongoose';
+
 import highlightMentions from '../../../../website/server/libs/highlightMentions';

 describe('highlightMentions', () => {
@@ -64,6 +65,67 @@ describe('highlightMentions', () => {
    expect(result[0]).to.equal(text);
  });

+  describe('link interactions', async () => {
+    it('doesn\'t highlight users in link', async () => {
+      const text = 'http://www.medium.com/@user/blog';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    it('doesn\'t highlight user in link between brackets', async () => {
+      const text = '(http://www.medium.com/@user/blog)';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    it('doesn\'t highlight user in an autolink', async () => {
+      const text = '<http://www.medium.com/@user/blog>';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    it('doesn\'t highlight users in link text', async () => {
+      const text = '[Check awesome blog written by @user](http://www.medium.com/@user/blog)';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    it('doesn\'t highlight users in link with newlines and markup', async () => {
+      const text = '[Check `awesome` \nblog **written** by @user](http://www.medium.com/@user/blog)';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    it('doesn\'t highlight users in link when followed by same @user mention', async () => {
+      const text = 'http://www.medium.com/@user/blog @user';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal('http://www.medium.com/@user/blog [@user](/profile/111)');
+    });
+
+    // https://spec.commonmark.org/0.29/#example-483
+    it('doesn\'t highlight user in a link without url', async () => {
+      const text = '[@user2]()';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    // https://github.com/HabitRPG/habitica/issues/12217
+    it('doesn\'t highlight user in link with url-escapable characters', async () => {
+      const text = '[test](https://habitica.fandom.com/ru/@wiki/Снаряжение)';
+      const result = await highlightMentions(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    // https://github.com/HabitRPG/habitica/issues/12223
+    it('matches a link in between two the same links', async () => {
+      const text = '[here](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)\n@user\n[hier](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)';
+
+      const result = await highlightMentions(text);
+
+      expect(result[0]).to.equal('[here](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)\n[@user](/profile/111)\n[hier](http://habitica.wikia.com/wiki/The_Keep:Pirate_Cove/FAQ)');
+    });
+  });
+
  describe('exceptions in code blocks', () => {
    it('doesn\'t highlight user in inline code block', async () => {
      const text = '`@user`';
@@ -1,5 +1,3 @@
-import uuid from 'uuid';
-
 import {
  generateGroup,
 } from '../../../../../helpers/api-unit.helper';
@@ -7,6 +5,7 @@ import { model as User } from '../../../../../../website/server/models/user';
 import { model as Group } from '../../../../../../website/server/models/group';
 import amzLib from '../../../../../../website/server/libs/payments/amazon';
 import payments from '../../../../../../website/server/libs/payments/payments';
+import common from '../../../../../../website/common';

 describe('#upgradeGroupPlan', () => {
  let spy; let data; let user; let group; let
@@ -41,7 +40,7 @@ describe('#upgradeGroupPlan', () => {
    spy.resolves([]);

    uuidString = 'uuid-v4';
-    sinon.stub(uuid, 'v4').returns(uuidString);
+    sinon.stub(common, 'uuid').returns(uuidString);

    data.groupId = group._id;
    data.sub.quantity = 3;
@@ -49,7 +48,7 @@ describe('#upgradeGroupPlan', () => {

  afterEach(() => {
    amzLib.authorizeOnBillingAgreement.restore();
-    uuid.v4.restore();
+    common.uuid.restore();
  });

  it('charges for a new member', async () => {
@@ -72,10 +72,18 @@ describe('#calculateSubscriptionTerminationDate', () => {

  it('returns current terminated date if it exists and is later than newly calculated date', () => {
    const expectedTerminationDate = moment().add({ months: 5 }).toDate();
-    plan.terminationDate = expectedTerminationDate;
+    plan.dateTerminated = expectedTerminationDate;

    const terminationDate = calculateSubscriptionTerminationDate(nextBill, plan, groupPlanId);

    expect(terminationDate).to.equal(expectedTerminationDate);
  });
+
+  it('returns the calculated termination date if the plan does not have one', () => {
+    nextBill = moment().add(5, 'days');
+    const expectedTerminationDate = moment().add(5, 'days');
+
+    const terminationDate = calculateSubscriptionTerminationDate(nextBill, plan, groupPlanId);
+    expect(expectedTerminationDate.diff(terminationDate, 'days')).to.eql(0);
+  });
 });
@@ -1,4 +1,3 @@
-
 import path from 'path';
 import nconf from 'nconf';
 import setupNconf from '../../../../website/server/libs/setupNconf';
@@ -16,7 +16,6 @@ describe('response middleware', () => {
    next = generateNext();
  });

-
  it('attaches respond method to res', () => {
    responseMiddleware(req, res, next);

@@ -769,7 +769,6 @@ describe('Group Model', () => {
        expect(res.t).to.not.be.called;
      });

-
      it('does not throw an error if only user ids are passed in', async () => {
        await Group.validateInvitations({ uuids: ['user-id', 'user-id2'] }, res);
        expect(res.t).to.not.be.called;
@@ -432,7 +432,6 @@ describe('User Model', () => {
      user = new User();
    });

-
    it('returns false if user does not have customer id', () => {
      expect(user.isSubscribed()).to.be.undefined;
    });
@@ -558,7 +557,6 @@ describe('User Model', () => {
    });
  });

-
  context('hasCancelled', () => {
    let user;
    beforeEach(() => {
@@ -299,7 +299,6 @@ describe('Webhook Model', () => {
        });
      });

-
      context('type is globalActivity', () => {
        let config;

@@ -2,6 +2,8 @@ import { v4 as generateUUID } from 'uuid';
 import {
  generateUser,
  translate as t,
+  createAndPopulateGroup,
+  generateChallenge,
 } from '../../../../helpers/api-integration/v3';

 describe('GET /tasks/:id', () => {
@@ -11,55 +13,158 @@ describe('GET /tasks/:id', () => {
    user = await generateUser();
  });

-  context('task can be accessed', async () => {
-    let task;
+  context('general', () => {
+    context('task cannot be accessed', () => {
+      it('cannot get a non-existent task', async () => {
+        const dummyId = generateUUID();

-    beforeEach(async () => {
-      task = await user.post('/tasks/user', {
-        text: 'test habit',
-        type: 'habit',
-        alias: 'alias',
+        await expect(user.get(`/tasks/${dummyId}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
      });
    });
-
-    it('gets specified task', async () => {
-      const getTask = await user.get(`/tasks/${task._id}`);
-
-      expect(getTask).to.eql(task);
-    });
-
-    it('can use alias to retrieve task', async () => {
-      const getTask = await user.get(`/tasks/${task.alias}`);
-
-      expect(getTask).to.eql(task);
-    });
-
-    // TODO after challenges are implemented
-    it('can get active challenge task that user does not own'); // Yes?
  });

-  context('task cannot be accessed', () => {
-    it('cannot get a non-existent task', async () => {
-      const dummyId = generateUUID();
+  context('user', () => {
+    context('task can be accessed', async () => {
+      let task;

-      await expect(user.get(`/tasks/${dummyId}`)).to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('taskNotFound'),
+      beforeEach(async () => {
+        task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+          alias: 'alias',
+        });
+      });
+
+      it('gets specified task', async () => {
+        const getTask = await user.get(`/tasks/${task._id}`);
+
+        expect(getTask).to.eql(task);
+      });
+
+      it('can use alias to retrieve task', async () => {
+        const getTask = await user.get(`/tasks/${task.alias}`);
+
+        expect(getTask).to.eql(task);
      });
    });

-    it('cannot get a task owned by someone else', async () => {
-      const anotherUser = await generateUser();
-      const task = await user.post('/tasks/user', {
+    context('task cannot be accessed', () => {
+      it('cannot get a task owned by someone else', async () => {
+        const anotherUser = await generateUser();
+        const task = await user.post('/tasks/user', {
+          text: 'test habit',
+          type: 'habit',
+        });
+
+        await expect(anotherUser.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
+      });
+    });
+  });
+
+  context('challenge', () => {
+    let challenge; let task; let leader; let member;
+
+    before(async () => {
+      const populatedGroup = await createAndPopulateGroup({
+        members: 1,
+      });
+
+      const guild = populatedGroup.group;
+      leader = populatedGroup.groupLeader;
+      member = populatedGroup.members[0]; // eslint-disable-line prefer-destructuring
+
+      challenge = await generateChallenge(leader, guild);
+      await leader.post(`/challenges/${challenge._id}/join`);
+
+      task = await leader.post(`/tasks/challenge/${challenge._id}`, {
        text: 'test habit',
        type: 'habit',
      });
+    });

-      await expect(anotherUser.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('taskNotFound'),
+    context('task can be accessed', async () => {
+      it('can get challenge task if member of that challenge', async () => {
+        await member.post(`/challenges/${challenge._id}/join`);
+
+        const getTask = await member.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+
+      it('can get challenge task if leader of that challenge', async () => {
+        const getTask = await leader.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+
+      it('can get challenge task if admin', async () => {
+        const admin = await generateUser({
+          'contributor.admin': true,
+        });
+
+        const getTask = await admin.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+    });
+
+    context('task cannot be accessed', () => {
+      it('cannot get a task in a challenge i am not part of', async () => {
+        await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
+      });
+    });
+  });
+
+  context('group', () => {
+    let group; let task; let members; let leader;
+
+    before(async () => {
+      const groupData = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Guild',
+          type: 'guild',
+        },
+        members: 1,
+      });
+
+      group = groupData.group;
+      members = groupData.members;
+      leader = groupData.groupLeader;
+
+      task = await leader.post(`/tasks/group/${group._id}`, {
+        text: 'test habit',
+        type: 'habit',
+      });
+    });
+
+    context('task can be accessed', async () => {
+      it('can get group task if leader of that group', async () => {
+        const getTask = await leader.get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+
+      it('can get group task if member of that group', async () => {
+        const getTask = await members[0].get(`/tasks/${task._id}`);
+        expect(getTask).to.eql(task);
+      });
+    });
+
+    context('task cannot be accessed', () => {
+      it('cannot get a task in a group i am not part of', async () => {
+        await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
+          code: 404,
+          error: 'NotFound',
+          message: t('taskNotFound'),
+        });
      });
    });
  });
@@ -179,7 +179,6 @@ describe('GET /tasks/user', () => {
    expect(dailys2[0].isDue).to.be.false;
  });

-
  xit('returns dailies with isDue for the date specified and will add CDS offset if time is not supplied and assumes timezones', async () => {
    const timezone = 240;
    await user.update({
@@ -687,7 +687,6 @@ describe('POST /tasks/user', () => {
      });
    });

-
    it('can create checklists', async () => {
      const task = await user.post('/tasks/user', {
        text: 'test daily',
@@ -4,8 +4,12 @@ import {
 } from '../../../../../helpers/api-integration/v3';

 describe('PUT /tasks/:id', () => {
-  let user; let guild; let member; let member2; let
-    task;
+  let user;
+  let guild;
+  let member;
+  let member2;
+  let habit;
+  let todo;

  function findAssignedTask (memberTask) {
    return memberTask.group.id === guild._id;
@@ -25,7 +29,7 @@ describe('PUT /tasks/:id', () => {
    member = members[0]; // eslint-disable-line prefer-destructuring
    member2 = members[1]; // eslint-disable-line prefer-destructuring

-    task = await user.post(`/tasks/group/${guild._id}`, {
+    habit = await user.post(`/tasks/group/${guild._id}`, {
      text: 'test habit',
      type: 'habit',
      up: false,
@@ -33,12 +37,18 @@ describe('PUT /tasks/:id', () => {
      notes: 1976,
    });

-    await user.post(`/tasks/${task._id}/assign/${member._id}`);
-    await user.post(`/tasks/${task._id}/assign/${member2._id}`);
+    todo = await user.post(`/tasks/group/${guild._id}`, {
+      text: 'test todo',
+      type: 'todo',
+      notes: 1976,
+    });
+
+    await user.post(`/tasks/${habit._id}/assign/${member._id}`);
+    await user.post(`/tasks/${habit._id}/assign/${member2._id}`);
  });

  it('updates a group task', async () => {
-    const savedHabit = await user.put(`/tasks/${task._id}`, {
+    const savedHabit = await user.put(`/tasks/${habit._id}`, {
      notes: 'some new notes',
    });

@@ -51,14 +61,14 @@ describe('PUT /tasks/:id', () => {
      managerId: member._id,
    });

-    // change the todo
-    task = await member.put(`/tasks/${task._id}`, {
+    // change the habit
+    habit = await member.put(`/tasks/${habit._id}`, {
      text: 'new text!',
      requiresApproval: true,
    });

    const memberTasks = await member2.get('/tasks/user');
-    const syncedTask = find(memberTasks, memberTask => memberTask.group.taskId === task._id);
+    const syncedTask = find(memberTasks, memberTask => memberTask.group.taskId === habit._id);

    // score up to trigger approval
    await expect(member2.post(`/tasks/${syncedTask._id}/score/up`))
@@ -69,9 +79,39 @@ describe('PUT /tasks/:id', () => {
      });
  });

+  it('member updates a group task value - not allowed', async () => {
+    // change the todo
+    await expect(member.put(`/tasks/${habit._id}`, {
+      text: 'new text!',
+    })).to.eventually.be.rejected.and.to.eql({
+      code: 401,
+      error: 'NotAuthorized',
+      message: t('onlyGroupLeaderCanEditTasks'),
+    });
+  });
+
+  it('member updates the collapseChecklist property - change is allowed', async () => {
+    // change the todo
+    await member.put(`/tasks/${todo._id}`, {
+      collapseChecklist: true,
+    });
+  });
+
+  it('member updates the collapseChecklist and another property - change not allowed', async () => {
+    // change the todo
+    await expect(member.put(`/tasks/${todo._id}`, {
+      collapseChecklist: true,
+      title: 'test',
+    })).to.eventually.be.rejected.and.to.eql({
+      code: 401,
+      error: 'NotAuthorized',
+      message: t('onlyGroupLeaderCanEditTasks'),
+    });
+  });
+
  it('updates a group task with checklist', async () => {
    // add a new todo
-    task = await user.post(`/tasks/group/${guild._id}`, {
+    habit = await user.post(`/tasks/group/${guild._id}`, {
      text: 'todo',
      type: 'todo',
      checklist: [
@@ -81,13 +121,13 @@ describe('PUT /tasks/:id', () => {
      ],
    });

-    await user.post(`/tasks/${task._id}/assign/${member._id}`);
+    await user.post(`/tasks/${habit._id}/assign/${member._id}`);

    // change the checklist text
-    task = await user.put(`/tasks/${task._id}`, {
+    habit = await user.put(`/tasks/${habit._id}`, {
      checklist: [
        {
-          id: task.checklist[0].id,
+          id: habit.checklist[0].id,
          text: 'checklist 1 - edit',
        },
        {
@@ -96,18 +136,17 @@ describe('PUT /tasks/:id', () => {
      ],
    });

-    expect(task.checklist.length).to.eql(2);
+    expect(habit.checklist.length).to.eql(2);
  });

  it('updates the linked tasks', async () => {
-    await user.put(`/tasks/${task._id}`, {
+    await user.put(`/tasks/${habit._id}`, {
      text: 'some new text',
      up: false,
      down: false,
      notes: 'some new notes',
    });

-
    const memberTasks = await member.get('/tasks/user');
    const syncedTask = find(memberTasks, findAssignedTask);

@@ -117,7 +156,7 @@ describe('PUT /tasks/:id', () => {
  });

  it('updates the linked tasks for all assigned users', async () => {
-    await user.put(`/tasks/${task._id}`, {
+    await user.put(`/tasks/${habit._id}`, {
      text: 'some new text',
      up: false,
      down: false,
@@ -144,14 +183,13 @@ describe('PUT /tasks/:id', () => {
      managerId: member2._id,
    });

-    await member2.put(`/tasks/${task._id}`, {
+    await member2.put(`/tasks/${habit._id}`, {
      text: 'some new text',
      up: false,
      down: false,
      notes: 'some new notes',
    });

-
    const memberTasks = await member.get('/tasks/user');
    const syncedTask = find(memberTasks, findAssignedTask);

@@ -1,4 +1,3 @@
-
 import { v4 as generateUUID } from 'uuid';
 import { find } from 'lodash';
 import {
@@ -325,7 +324,6 @@ describe('POST /user/class/cast/:spellId', () => {
    expect(result.user.stats.mp).to.equal(10);
  });

-
  // TODO find a way to have sinon working in integration tests
  // it doesn't work when tests are running separately from server
  it('passes correct target to spell when targetType === \'tasks\'');
@@ -4,7 +4,6 @@ import {
  translate as t,
 } from '../../../../helpers/api-integration/v3';

-
 describe('PUT /user', () => {
  let user;

@@ -53,7 +52,6 @@ describe('PUT /user', () => {
      expect(user.tags.length).to.be.eql(userTags.length + 1);
    });

-
    it('validates profile.name', async () => {
      await expect(user.put('/user', {
        'profile.name': ' ', // string should be trimmed
@@ -10,7 +10,6 @@ import {
  sha1Encrypt as sha1EncryptPassword,
 } from '../../../../../../website/server/libs/password';

-
 describe('POST /user/auth/local/login', () => {
  let api;
  let user;
@@ -9,7 +9,6 @@ import {
  sha1Encrypt as sha1EncryptPassword,
 } from '../../../../../../website/server/libs/password';

-
 const ENDPOINT = '/user/auth/update-email';

 describe('PUT /user/auth/update-email', () => {
@@ -1,4 +1,3 @@
-
 import { v4 as generateUUID } from 'uuid';
 import { find } from 'lodash';
 import {
@@ -310,7 +309,6 @@ describe('POST /user/class/cast/:spellId', () => {
    expect(result.user.stats.mp).to.equal(10);
  });

-
  // TODO find a way to have sinon working in integration tests
  // it doesn't work when tests are running separately from server
  it('passes correct target to spell when targetType === \'tasks\'');
@@ -130,7 +130,6 @@ describe('POST /user/reset', () => {
      },
    });

-
    await hero.post('/user/reset');

    const heroRes = await admin.get(`/hall/heroes/${hero.auth.local.username}`);
@@ -4,7 +4,6 @@ import {
  translate as t,
 } from '../../../helpers/api-integration/v4';

-
 describe('PUT /user', () => {
  let user;

@@ -53,7 +52,6 @@ describe('PUT /user', () => {
      expect(user.tags.length).to.be.eql(userTags.length + 1);
    });

-
    it('profile.name cannot be an empty string or null', async () => {
      await expect(user.put('/user', {
        'profile.name': ' ', // string should be trimmed
@@ -1,16 +0,0 @@
-{
-  "env": {
-    "test": {
-      plugins: [
-        ["istanbul"],
-      ],
-    },
-  },
-  "presets": [
-    ["es2015", { modules: false }],
-  ],
-  "plugins": [
-    "transform-object-rest-spread",
-  ],
-  "comments": false,
-}
@@ -1,21 +0,0 @@
-/* eslint-disable */
-// TODO verify if it's needed, added because Axios require Promise in the global scope
-// and babel-runtime doesn't affect external libraries
-require('babel-polyfill');
-
-// Automatically setup SinonJS' sandbox for each test
-beforeEach(() => {
-  global.sandbox = sinon.createSandbox();
-});
-
-afterEach(() => {
-  global.sandbox.restore();
-});
-
-// require all test files
-const testsContext = require.context('./specs', true, /\.js$/);
-testsContext.keys().forEach(testsContext);
-
-// require all .vue and .js files except main.js for coverage.
-const srcContext = require.context('../../../website/client', true, /^\.\/(?=(?!main(\.js)?$))(?=(.*\.(vue|js)$))/);
-srcContext.keys().forEach(srcContext);
@@ -1,40 +0,0 @@
-/* eslint-disable */
-// This is a karma config file. For more details see
-//   http://karma-runner.github.io/0.13/config/configuration-file.html
-// we are also using it with karma-webpack
-//   https://github.com/webpack/karma-webpack
-
-// Necessary for babel to respect the env version of .babelrc which is necessary
-// Because inject-loader does not work with ["es2015", { modules: false }] that we use
-// in order to let webpack2 handle the imports
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-// eslint-disable-line no-process-env
-process.env.BABEL_ENV = process.env.NODE_ENV; // eslint-disable-line no-process-env
-const webpackConfig = require('../../../webpack/webpack.test.conf');
-
-module.exports = function (config) {
-  config.set({
-    // to run in additional browsers:
-    // 1. install corresponding karma launcher
-    //    http://karma-runner.github.io/0.13/config/browsers.html
-    // 2. add it to the `browsers` array below.
-    browsers: ['ChromeHeadless'],
-    frameworks: ['mocha', 'sinon-stub-promise', 'sinon-chai', 'chai-as-promised', 'chai'],
-    reporters: ['spec', 'coverage'],
-    files: ['./index.js'],
-    preprocessors: {
-      './index.js': ['webpack', 'sourcemap'],
-    },
-    webpack: webpackConfig,
-    webpackMiddleware: {
-      noInfo: true,
-    },
-    coverageReporter: {
-      dir: '../../../coverage/client-unit',
-      reporters: [
-        { type: 'lcov', subdir: '.' },
-        { type: 'text-summary' },
-      ],
-    },
-  });
-};
@@ -16,6 +16,8 @@ describe('common.fns.randomDrop', () => {
    user = generateUser();
    user._tmp = user._tmp ? user._tmp : {};
    user.items.eggs.Wolf = 0;
+    user.items.food.Meat = 0;
+    user._id = `a${user._id.slice(1)}`;
    task = generateTodo({ userId: user._id });
    predictableRandom = sandbox.stub().returns(0.5);
  });
@@ -1,4 +1,3 @@
-
 import {
  generateUser,
 } from '../../helpers/common.helper';
@@ -36,7 +35,6 @@ describe('getDebuffPotionItems', () => {
    user.stats.buffs.snowball = true;
    user.stats.buffs.shinySeed = true;

-
    const result = getDebuffPotionItems(user);

    expect(result).to.be.an('array').that.deep.include.members([
@@ -1,4 +1,3 @@
-
 import {
  generateUser,
 } from '../../helpers/common.helper';
@@ -27,7 +26,6 @@ describe('setDebuffPotionItems', () => {
    const firstSetResult = [...setDebuffPotionItems(user).pinnedItems];
    const secondSetResult = [...setDebuffPotionItems(user).pinnedItems];

-
    expect(firstSetResult).to.be.deep.equal(secondSetResult);
  });

@@ -90,7 +90,6 @@ describe('shops', () => {
        },
      });

-
      const shopWizardItems = shared.shops.getMarketGearCategories(userWithItems).find(x => x.identifier === 'wizard').items.filter(x => x.klass === 'wizard' && (x.owned === false || x.owned === undefined));
      expect(shopWizardItems.length).to.eql(0);
    });
@@ -122,7 +121,6 @@ describe('shops', () => {
        },
      });

-
      const shopWizardItems = shared.shops.getMarketGearCategories(userWithItems).find(x => x.identifier === 'wizard').items.filter(x => x.klass === 'wizard' && (x.owned === false || x.owned === undefined));
      expect(shopWizardItems.find(item => item.key === 'weapon_wizard_5').locked).to.eql(false);
      expect(shopWizardItems.find(item => item.key === 'weapon_wizard_6').locked).to.eql(true);
@@ -75,7 +75,6 @@ describe('shared.ops.buyGem', () => {
      expect(user.stats.gp).to.equal(goldPoints - planGemLimits.convRate * 2);
    });

-
    context('Failure conditions', () => {
      it('returns an error when key is not provided', done => {
        try {
@@ -88,7 +88,14 @@ 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.called;
+        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',
+        });
      });
    });
  });
@@ -141,7 +141,6 @@ describe('shared.ops.buyQuest', () => {
    }
  });

-
  it('does not buy Gem-premium Quests', done => {
    user.stats.gp = 9999;
    try {
@@ -43,7 +43,6 @@ describe('shared.ops.purchase', () => {
      }
    });

-
    it('returns error when unknown type is provided', done => {
      try {
        purchase(user, { params: { type: 'randomType', key: 'gem' } });
@@ -96,7 +95,6 @@ describe('shared.ops.purchase', () => {
      }
    });

-
    it('returns error when item is not found', done => {
      const params = { key: 'notExisting', type: 'food' };

@@ -29,7 +29,6 @@ describe('shared.ops.reset', () => {
    tasksToRemove = [habit, todo, daily, reward];
  });

-
  it('resets a user', () => {
    const [, message] = reset(user);

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import unlock from '../../../website/common/script/ops/unlock';
 import i18n from '../../../website/common/script/i18n';
 import { generateUser } from '../../helpers/common.helper';
@@ -8,8 +9,10 @@ describe('shared.ops.unlock', () => {
  const unlockPath = 'shirt.convict,shirt.cross,shirt.fire,shirt.horizon,shirt.ocean,shirt.purple,shirt.rainbow,shirt.redblue,shirt.thunder,shirt.tropical,shirt.zombie';
  const unlockGearSetPath = 'items.gear.owned.headAccessory_special_bearEars,items.gear.owned.headAccessory_special_cactusEars,items.gear.owned.headAccessory_special_foxEars,items.gear.owned.headAccessory_special_lionEars,items.gear.owned.headAccessory_special_pandaEars,items.gear.owned.headAccessory_special_pigEars,items.gear.owned.headAccessory_special_tigerEars,items.gear.owned.headAccessory_special_wolfEars';
  const backgroundUnlockPath = 'background.giant_florals';
-  const unlockCost = 1.25;
-  const usersStartingGems = 5;
+  const backgroundSetUnlockPath = 'background.archery_range,background.giant_florals,background.rainbows_end';
+  const hairUnlockPath = 'hair.color.rainbow,hair.color.yellow,hair.color.green,hair.color.purple,hair.color.blue,hair.color.TRUred';
+  const facialHairUnlockPath = 'hair.mustache.1,hair.mustache.2,hair.beard.1,hair.beard.2,hair.beard.3';
+  const usersStartingGems = 50 / 4;

  beforeEach(() => {
    user = generateUser();
@@ -48,32 +51,100 @@ describe('shared.ops.unlock', () => {
  });

  it('returns an error when user already owns a full set', done => {
+    let expectedBalance;
+
    try {
      unlock(user, { query: { path: unlockPath } });
+      expectedBalance = user.balance;
      unlock(user, { query: { path: unlockPath } });
    } catch (err) {
      expect(err).to.be.an.instanceof(NotAuthorized);
      expect(err.message).to.equal(i18n.t('alreadyUnlocked'));
-      expect(user.balance).to.equal(3.75);
+      expect(user.balance).to.equal(expectedBalance);
      done();
    }
  });

  it('returns an error when user already owns a full set of gear', done => {
+    let expectedBalance;
+
    try {
      unlock(user, { query: { path: unlockGearSetPath } });
+      expectedBalance = user.balance;
      unlock(user, { query: { path: unlockGearSetPath } });
    } catch (err) {
      expect(err).to.be.an.instanceof(NotAuthorized);
      expect(err.message).to.equal(i18n.t('alreadyUnlocked'));
-      expect(user.balance).to.equal(3.75);
+      expect(user.balance).to.equal(expectedBalance);
      done();
    }
  });

-  xit('returns an error when user already owns items in a full set', done => {
+  it('returns an error if an item does not exists', done => {
    try {
-      unlock(user, { query: { path: unlockPath.split(',').splice(2).join(',') } });
+      unlock(user, { query: { path: 'background.invalid_background' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if there are items from multiple sets', done => {
+    try {
+      unlock(user, { query: { path: 'shirt.convict,skin.0ff591' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if gear is not from the animal set', done => {
+    try {
+      unlock(user, { query: { path: 'items.gear.owned.back_mystery_202004' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if the item is free', done => {
+    try {
+      unlock(user, { query: { path: 'shirt.black' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error if an item does not belong to a set (appearances)', done => {
+    try {
+      unlock(user, { query: { path: 'shirt.pink' } });
+    } catch (err) {
+      expect(err).to.be.an.instanceof(BadRequest);
+      expect(err.message).to.equal(i18n.t('invalidUnlockSet'));
+      done();
+    }
+  });
+
+  it('returns an error when user already owns items in a full set and it would be more expensive to buy the entire set', done => {
+    try {
+      // There are 11 shirts in the set, each cost 2 gems, the full set 5 gems
+      // In order for the full purchase not to be worth, we must own 9
+      const partialUnlockPaths = unlockPath.split(',');
+      unlock(user, { query: { path: partialUnlockPaths[0] } });
+      unlock(user, { query: { path: partialUnlockPaths[1] } });
+      unlock(user, { query: { path: partialUnlockPaths[2] } });
+      unlock(user, { query: { path: partialUnlockPaths[3] } });
+      unlock(user, { query: { path: partialUnlockPaths[4] } });
+      unlock(user, { query: { path: partialUnlockPaths[5] } });
+      unlock(user, { query: { path: partialUnlockPaths[6] } });
+      unlock(user, { query: { path: partialUnlockPaths[7] } });
+      unlock(user, { query: { path: partialUnlockPaths[8] } });
+
      unlock(user, { query: { path: unlockPath } });
    } catch (err) {
      expect(err).to.be.an.instanceof(NotAuthorized);
@@ -82,6 +153,22 @@ describe('shared.ops.unlock', () => {
    }
  });

+  it('does not return an error when user already owns items in a full set and it would not be more expensive to buy the entire set', () => {
+    // There are 11 shirts in the set, each cost 2 gems, the full set 5 gems
+    // In order for the full purchase to be worth, we can own already 8
+    const partialUnlockPaths = unlockPath.split(',');
+    unlock(user, { query: { path: partialUnlockPaths[0] } });
+    unlock(user, { query: { path: partialUnlockPaths[1] } });
+    unlock(user, { query: { path: partialUnlockPaths[2] } });
+    unlock(user, { query: { path: partialUnlockPaths[3] } });
+    unlock(user, { query: { path: partialUnlockPaths[4] } });
+    unlock(user, { query: { path: partialUnlockPaths[5] } });
+    unlock(user, { query: { path: partialUnlockPaths[6] } });
+    unlock(user, { query: { path: partialUnlockPaths[7] } });
+
+    unlock(user, { query: { path: unlockPath } });
+  });
+
  it('equips an item already owned', () => {
    expect(user.purchased.background.giant_florals).to.not.exist;

@@ -107,31 +194,143 @@ describe('shared.ops.unlock', () => {
    expect(user.preferences.background).to.equal('');
  });

-  it('unlocks a full set', () => {
+  it('unlocks a full set of appearance items', () => {
+    const initialShirts = Object.keys(user.purchased.shirt).length;
    const [, message] = unlock(user, { query: { path: unlockPath } });

    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.purchased.shirt.convict).to.be.true;
+    const individualPaths = unlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.shirt).length)
+      .to.equal(initialShirts + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
+  });
+
+  it('unlocks a full set of hair items', () => {
+    user.purchased.hair.color = {};
+
+    const initialHairColors = Object.keys(user.purchased.hair.color).length;
+    const [, message] = unlock(user, { query: { path: hairUnlockPath } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    const individualPaths = hairUnlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.hair.color).length)
+      .to.equal(initialHairColors + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
+  });
+
+  it('unlocks the facial hair set', () => {
+    user.purchased.hair.mustache = {};
+    user.purchased.hair.beard = {};
+
+    const initialMustache = Object.keys(user.purchased.hair.mustache).length;
+    const initialBeard = Object.keys(user.purchased.hair.mustache).length;
+    const [, message] = unlock(user, { query: { path: facialHairUnlockPath } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    const individualPaths = facialHairUnlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.hair.mustache).length + Object.keys(user.purchased.hair.beard).length) // eslint-disable-line max-len
+      .to.equal(initialMustache + initialBeard + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
  });

  it('unlocks a full set of gear', () => {
+    const initialGear = Object.keys(user.items.gear.owned).length;
    const [, message] = unlock(user, { query: { path: unlockGearSetPath } });

    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.items.gear.owned.headAccessory_special_wolfEars).to.be.true;
+
+    const individualPaths = unlockGearSetPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user, path)).to.be.true;
+    });
+    expect(Object.keys(user.items.gear.owned).length)
+      .to.equal(initialGear + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 1.25);
  });

-  it('unlocks an item', () => {
+  it('unlocks a full set of backgrounds', () => {
+    const initialBackgrounds = Object.keys(user.purchased.background).length;
+    const [, message] = unlock(user, { query: { path: backgroundSetUnlockPath } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    const individualPaths = backgroundSetUnlockPath.split(',');
+    individualPaths.forEach(path => {
+      expect(get(user.purchased, path)).to.be.true;
+    });
+    expect(Object.keys(user.purchased.background).length)
+      .to.equal(initialBackgrounds + individualPaths.length);
+    expect(user.balance).to.equal(usersStartingGems - 3.75);
+  });
+
+  it('unlocks an item (appearance)', () => {
+    const path = unlockPath.split(',')[0];
+    const initialShirts = Object.keys(user.purchased.shirt).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    expect(Object.keys(user.purchased.shirt).length).to.equal(initialShirts + 1);
+    expect(get(user.purchased, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (hair color)', () => {
+    user.purchased.hair.color = {};
+
+    const path = hairUnlockPath.split(',')[0];
+    const initialColorHair = Object.keys(user.purchased.hair.color).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    expect(Object.keys(user.purchased.hair.color).length).to.equal(initialColorHair + 1);
+    expect(get(user.purchased, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (facial hair)', () => {
+    user.purchased.hair.mustache = {};
+    user.purchased.hair.beard = {};
+
+    const path = facialHairUnlockPath.split(',')[0];
+    const initialMustache = Object.keys(user.purchased.hair.mustache).length;
+    const initialBeard = Object.keys(user.purchased.hair.beard).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+
+    expect(Object.keys(user.purchased.hair.mustache).length).to.equal(initialMustache + 1);
+    expect(Object.keys(user.purchased.hair.beard).length).to.equal(initialBeard);
+
+    expect(get(user.purchased, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (gear)', () => {
+    const path = unlockGearSetPath.split(',')[0];
+    const initialGear = Object.keys(user.items.gear.owned).length;
+    const [, message] = unlock(user, { query: { path } });
+
+    expect(message).to.equal(i18n.t('unlocked'));
+    expect(Object.keys(user.items.gear.owned).length).to.equal(initialGear + 1);
+    expect(get(user, path)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 0.5);
+  });
+
+  it('unlocks an item (background)', () => {
+    const initialBackgrounds = Object.keys(user.purchased.background).length;
    const [, message] = unlock(user, { query: { path: backgroundUnlockPath } });

    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.purchased.background.giant_florals).to.be.true;
-  });
-
-  it('reduces a user\'s balance', () => {
-    const [, message] = unlock(user, { query: { path: unlockPath } });
-
-    expect(message).to.equal(i18n.t('unlocked'));
-    expect(user.balance).to.equal(usersStartingGems - unlockCost);
+    expect(Object.keys(user.purchased.background).length).to.equal(initialBackgrounds + 1);
+    expect(get(user.purchased, backgroundUnlockPath)).to.be.true;
+    expect(user.balance).to.equal(usersStartingGems - 1.75);
  });
 });
@@ -377,7 +377,6 @@ describe('shouldDo', () => {
        m: false,
      };

-
      [0, 1, 2, 3, 4, 5, 6].forEach(weekday => {
        day = moment().add(1, 'weeks').day(weekday).toDate();

@@ -1,9 +1,10 @@
 import express from 'express';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import bodyParser from 'body-parser';
+import http from 'http';

 const app = express();
-const server = require('http').createServer(app);
+const server = http.createServer(app);

 const PORT = process.env.TEST_WEBHOOK_APP_PORT || 3099; // eslint-disable-line no-process-env

@@ -30,7 +31,7 @@ app.post('/webhooks/:id', (req, res) => {
 // See http://stackoverflow.com/a/37054753/2601552
 const sockets = {};
 server.on('connection', socket => {
-  const id = uuid.v4();
+  const id = uuid();
  sockets[id] = socket;

  socket.once('close', () => {
@@ -10,7 +10,6 @@ import {

 export { translate } from './translate';

-
 export function generateUser (options = {}) {
  const user = new User(options).toObject();

@@ -1,6 +1,7 @@
 import i18n from '../../website/common/script/i18n';
+import { translations } from '../../website/server/libs/i18n';

-i18n.translations = require('../../website/server/libs/i18n').translations;
+i18n.translations = translations;

 const STRING_ERROR_MSG = 'Error processing the string. Please see Help > Report a Bug.';
 const STRING_DOES_NOT_EXIST_MSG = /^String '.*' not found.$/;
@@ -1,5 +1,4 @@
-
-const glob = require('glob').sync;
+import { sync as glob } from 'glob';

 describe('Locales files', () => {
  it('do not contain duplicates of any keys', () => {
@@ -1,6 +1,5 @@
-
-const glob = require('glob').sync;
-const readFile = require('fs').readFileSync;
+import { sync as glob } from 'glob';
+import { readFileSync as readFile } from 'fs';

 const IMPORT_REGEX = /(import|require).*common\/script/;

@@ -31,14 +31,22 @@ 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 Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';

+// couldn't inject the languages easily,
+// so just a "$t()"  string to show that this will be translated
+Vue.prototype.$t = function translateString (...args) {
+  return `$t(${JSON.stringify(args)})`;
+};
+
+Vue.use(BootstrapVue);
+Vue.use(StoreModule);
+
 const req = require.context('../../src', true, /.stories.js$/);

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

-Vue.use(StoreModule);
-
 configure(loadStories, module);
@@ -5,60 +5,60 @@
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
    "lint": "vue-cli-service lint .",
    "lint-no-fix": "vue-cli-service lint --no-fix .",
    "postinstall": "node ./scripts/npm-postinstall.js",
    "storybook:build": "vue-cli-service storybook:build -c config/storybook -o dist/storybook",
-    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
-    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js"
+    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
  },
  "dependencies": {
-    "@vue/cli-plugin-babel": "^4.3.1",
-    "@vue/cli-plugin-eslint": "^4.3.1",
-    "@vue/cli-plugin-router": "^4.3.1",
-    "@vue/cli-plugin-unit-mocha": "^4.3.1",
-    "@vue/cli-service": "^4.3.1",
-    "@storybook/addon-actions": "^5.3.18",
-    "@storybook/addon-knobs": "^5.3.18",
-    "@storybook/addon-links": "^5.3.18",
-    "@storybook/addon-notes": "^5.3.18",
-    "@storybook/vue": "^5.3.18",
+    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-knobs": "^5.3.19",
+    "@storybook/addon-links": "^5.3.19",
+    "@storybook/addon-notes": "^5.3.19",
+    "@storybook/vue": "^5.3.19",
+    "@vue/cli-plugin-babel": "^4.4.6",
+    "@vue/cli-plugin-eslint": "^4.4.6",
+    "@vue/cli-plugin-router": "^4.4.6",
+    "@vue/cli-plugin-unit-mocha": "^4.4.6",
+    "@vue/cli-service": "^4.4.6",
    "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^5.11.0",
+    "amplitude-js": "^6.2.0",
    "axios": "^0.19.2",
    "axios-progress-bar": "^1.2.0",
    "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.13.0",
+    "bootstrap": "^4.5.0",
+    "bootstrap-vue": "^2.15.0",
    "chai": "^4.1.2",
    "core-js": "^3.6.5",
    "eslint": "^6.8.0",
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-vue": "^6.2.2",
-    "habitica-markdown": "^1.4.0",
+    "habitica-markdown": "^2.0.2",
    "hellojs": "^1.18.4",
-    "inspectpack": "^4.4.0",
+    "inspectpack": "^4.5.2",
    "intro.js": "^2.9.3",
-    "jquery": "^3.5.0",
+    "jquery": "^3.5.1",
    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
+    "moment": "^2.27.0",
    "nconf": "^0.10.0",
-    "sass": "^1.26.5",
+    "sass": "^1.26.9",
    "sass-loader": "^8.0.2",
-    "smartbanner.js": "^1.15.0",
+    "smartbanner.js": "^1.16.0",
    "svg-inline-loader": "^0.8.2",
-    "svg-url-loader": "^3.0.3",
+    "svg-url-loader": "^6.0.0",
    "svgo": "^1.3.2",
    "svgo-loader": "^2.2.1",
-    "uuid": "^3.4.0",
-    "validator": "^11.1.0",
+    "uuid": "^8.2.0",
+    "validator": "^13.1.1",
    "vue": "^2.6.11",
    "vue-cli-plugin-storybook": "^0.6.1",
    "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.1.6",
+    "vue-router": "^3.3.4",
    "vue-template-compiler": "^2.6.11",
-    "vuedraggable": "^2.23.1",
+    "vuedraggable": "^2.23.2",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#5d237615463a84a23dd6f3f77c6ab577d68593ec",
    "webpack": "^4.43.0"
  }
@@ -18,6 +18,7 @@
    <meta name="smartbanner:button-url-apple" content="https://itunes.apple.com/us/app/habitica-gamified-taskmanager/id994882113">
    <meta name="smartbanner:button-url-google" content="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica">
    <meta name="smartbanner:enabled-platforms" content="android,ios">
+    <meta name="smartbanner:hide-ttl" content="2592000000">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
    <link rel="shortcut icon" sizes="48x48" href="/static/icons/favicon.ico">
    <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
@@ -297,7 +297,7 @@ export default {
    };
  },
  computed: {
-    ...mapState(['isUserLoggedIn', 'browserTimezoneOffset', 'isUserLoaded']),
+    ...mapState(['isUserLoggedIn', 'browserTimezoneOffset', 'isUserLoaded', 'notificationsRemoved']),
    ...mapState({ user: 'user.data' }),
    isStaticPage () {
      return this.$route.meta.requiresLogin === false;
@@ -361,13 +361,55 @@ export default {
      showSpinner: false,
    });

-    // Set up Error interceptors
-    axios.interceptors.response.use(response => {
-      if (this.user && response.data && response.data.notifications) {
-        this.$set(this.user, 'notifications', response.data.notifications);
+    axios.interceptors.response.use(response => { // Set up Response interceptors
+      // Verify that the user was not updated from another browser/app/client
+      // If it was, sync
+      const { url } = response.config;
+      const { method } = response.config;
+
+      const isApiCall = url.indexOf('api/v4') !== -1;
+      const userV = response.data && response.data.userV;
+      const isCron = url.indexOf('/api/v4/cron') === 0 && method === 'post';
+
+      if (this.isUserLoaded && isApiCall && userV) {
+        const oldUserV = this.user._v;
+        this.user._v = userV;
+
+        // Do not sync again if already syncing
+        const isUserSync = url.indexOf('/api/v4/user') === 0 && method === 'get';
+        const isTasksSync = url.indexOf('/api/v4/tasks/user') === 0 && method === 'get';
+        // exclude chat seen requests because with real time chat they would be too many
+        const isChatSeen = url.indexOf('/chat/seen') !== -1 && method === 'post';
+        // exclude POST /api/v4/cron because the user is synced automatically after cron runs
+
+        // Something has changed on the user object that was not tracked here, sync the user
+        if (userV - oldUserV > 1 && !isCron && !isChatSeen && !isUserSync && !isTasksSync) {
+          Promise.all([
+            this.$store.dispatch('user:fetch', { forceLoad: true }),
+            this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true }),
+          ]);
+        }
      }
+
+      // Store the app version from the server
+      const serverAppVersion = response.data && response.data.appVersion;
+
+      if (serverAppVersion && this.$store.state.serverAppVersion !== response.data.appVersion) {
+        this.$store.state.serverAppVersion = serverAppVersion;
+      }
+
+      // Store the notifications, filtering those that have already been read
+      // See store/index.js on why this is necessary
+      if (this.user && response.data && response.data.notifications) {
+        const filteredNotifications = response.data.notifications.filter(serverNotification => {
+          if (this.notificationsRemoved.includes(serverNotification.id)) return false;
+          return true;
+        });
+        this.$set(this.user, 'notifications', filteredNotifications);
+      }
+
      return response;
-    }, error => {
+    }, error => { // Set up Error interceptors
      if (error.response.status >= 400) {
        const isBanned = this.checkForBannedUser(error);
        if (isBanned === true) return null; // eslint-disable-line consistent-return
@@ -425,51 +467,6 @@ export default {
      return Promise.reject(error);
    });

-    axios.interceptors.response.use(response => {
-      // Verify that the user was not updated from another browser/app/client
-      // If it was, sync
-      const { url } = response.config;
-      const { method } = response.config;
-
-      const isApiCall = url.indexOf('api/v4') !== -1;
-      const userV = response.data && response.data.userV;
-      const isCron = url.indexOf('/api/v4/cron') === 0 && method === 'post';
-
-      if (this.isUserLoaded && isApiCall && userV) {
-        const oldUserV = this.user._v;
-        this.user._v = userV;
-
-        // Do not sync again if already syncing
-        const isUserSync = url.indexOf('/api/v4/user') === 0 && method === 'get';
-        const isTasksSync = url.indexOf('/api/v4/tasks/user') === 0 && method === 'get';
-        // exclude chat seen requests because with real time chat they would be too many
-        const isChatSeen = url.indexOf('/chat/seen') !== -1 && method === 'post';
-        // exclude POST /api/v4/cron because the user is synced automatically after cron runs
-
-        // Something has changed on the user object that was not tracked here, sync the user
-        if (userV - oldUserV > 1 && !isCron && !isChatSeen && !isUserSync && !isTasksSync) {
-          Promise.all([
-            this.$store.dispatch('user:fetch', { forceLoad: true }),
-            this.$store.dispatch('tasks:fetchUserTasks', { forceLoad: true }),
-          ]);
-        }
-      }
-
-      // Verify the client is updated
-      // const serverAppVersion = response.data.appVersion;
-      // let serverAppVersionState = this.$store.state.serverAppVersion;
-      // if (isApiCall && !serverAppVersionState) {
-      //   this.$store.state.serverAppVersion = serverAppVersion;
-      // } else if (isApiCall && serverAppVersionState !== serverAppVersion) {
-      //   if (document.activeElement.tagName !== 'INPUT'
-      // || confirm(this.$t('habiticaHasUpdated'))) {
-      //     location.reload(true);
-      //   }
-      // }
-
-      return response;
-    });
-
    // Setup listener for title
    this.$store.watch(state => state.title, title => {
      document.title = title;
@@ -745,5 +742,6 @@ export default {
 <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.css"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>
@@ -1,30 +1,78 @@
-.promo_armoire_backgrounds_202005 {
+.promo_armoire_backgrounds_202007 {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -313px 0px;
+  background-position: -340px -524px;
  width: 423px;
  height: 147px;
 }
-.promo_fairy_sunshine_potions {
+.promo_mystery_202007 {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -223px;
-  width: 423px;
-  height: 147px;
-}
-.promo_mystery_202005 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -223px;
+  background-position: -424px -735px;
  width: 282px;
  height: 147px;
 }
+.promo_sand_sculpture_potions {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -735px;
+  width: 423px;
+  height: 147px;
+}
+.promo_splashy_skins {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -409px -337px;
+  width: 375px;
+  height: 186px;
+}
+.customize-option.promo_splashy_skins {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -434px -352px;
+  width: 60px;
+  height: 60px;
+}
+.promo_summer_splash_2019 {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -337px;
+  width: 408px;
+  height: 186px;
+}
+.promo_summer_splash_2020 {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -445px 0px;
+  width: 444px;
+  height: 198px;
+}
 .promo_take_this {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -313px -148px;
+  background-position: -1032px -389px;
  width: 96px;
  height: 69px;
 }
-.scene_casting_spells {
+.scene_achievement {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -524px;
+  width: 339px;
+  height: 210px;
+}
+.scene_hat_guild {
  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
  background-position: 0px 0px;
-  width: 312px;
-  height: 222px;
+  width: 444px;
+  height: 336px;
+}
+.scene_hiking {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -890px 0px;
+  width: 258px;
+  height: 258px;
+}
+.scene_nakonana {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -890px -389px;
+  width: 141px;
+  height: 169px;
+}
+.scene_strength {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -890px -259px;
+  width: 192px;
+  height: 129px;
 }
@@ -1,96 +1,204 @@
-.quest_TEMPLATE_FOR_MISSING_IMAGE {
+.banner_flair_dysheartener {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -502px -1543px;
-  width: 221px;
-  height: 39px;
+  background-position: -1757px -856px;
+  width: 69px;
+  height: 18px;
 }
-.quest_dilatory {
+.phobia_dysheartener {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px 0px;
+  background-position: 0px -1510px;
+  width: 201px;
+  height: 195px;
+}
+.quest_alligator {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1540px -1079px;
+  width: 201px;
+  height: 213px;
+}
+.quest_amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1100px -660px;
  width: 219px;
  height: 219px;
 }
-.quest_dilatoryDistress1 {
+.quest_armadillo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1332px;
-  width: 210px;
-  height: 210px;
+  background-position: -880px -672px;
+  width: 219px;
+  height: 219px;
 }
-.quest_dilatoryDistress2 {
+.quest_atom1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -567px;
-  width: 150px;
+  background-position: -657px -1332px;
+  width: 250px;
  height: 150px;
 }
-.quest_dilatoryDistress3 {
+.quest_atom2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px 0px;
-  width: 219px;
-  height: 219px;
+  background-position: -1159px -1332px;
+  width: 207px;
+  height: 138px;
 }
-.quest_dolphin {
+.quest_atom3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -232px;
-  width: 219px;
-  height: 219px;
+  background-position: -413px -1510px;
+  width: 216px;
+  height: 180px;
 }
-.quest_dustbunnies {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_egg {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -359px;
-  width: 165px;
-  height: 207px;
-}
-.quest_evilsanta {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -1171px;
-  width: 118px;
-  height: 131px;
-}
-.quest_evilsanta2 {
+.quest_axolotl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
  background-position: -440px -232px;
  width: 219px;
  height: 219px;
 }
-.quest_falcon {
+.quest_badger {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
  background-position: -660px 0px;
  width: 219px;
  height: 219px;
 }
-.quest_ferret {
+.quest_basilist {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -220px;
-  width: 219px;
-  height: 219px;
+  background-position: -844px -1510px;
+  width: 189px;
+  height: 141px;
 }
-.quest_frog {
+.quest_beetle {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px 0px;
-  width: 221px;
-  height: 213px;
+  background-position: -1102px -1112px;
+  width: 204px;
+  height: 201px;
 }
-.quest_ghost_stag {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_goldenknight1 {
+.quest_bronze {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
  background-position: -220px -452px;
  width: 219px;
  height: 219px;
 }
+.quest_bunny {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -202px -1510px;
+  width: 210px;
+  height: 186px;
+}
+.quest_butterfly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -660px -452px;
+  width: 219px;
+  height: 219px;
+}
+.quest_cheetah {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_cow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1757px 0px;
+  width: 174px;
+  height: 213px;
+}
+.quest_dilatory {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -440px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dilatoryDistress1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1540px -868px;
+  width: 210px;
+  height: 210px;
+}
+.quest_dilatoryDistress2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1757px -573px;
+  width: 150px;
+  height: 150px;
+}
+.quest_dilatoryDistress3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -440px -672px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dilatory_derby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -220px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dolphin {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -660px -672px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dustbunnies {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -220px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_egg {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1757px -214px;
+  width: 165px;
+  height: 207px;
+}
+.quest_evilsanta {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1757px -724px;
+  width: 118px;
+  height: 131px;
+}
+.quest_evilsanta2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1100px -440px;
+  width: 219px;
+  height: 219px;
+}
+.quest_falcon {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -1320px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_ferret {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: 0px -892px;
+  width: 219px;
+  height: 219px;
+}
+.quest_fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -220px -892px;
+  width: 219px;
+  height: 219px;
+}
+.quest_frog {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -1112px;
+  width: 221px;
+  height: 213px;
+}
+.quest_ghost_stag {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -660px -892px;
+  width: 219px;
+  height: 219px;
+}
+.quest_goldenknight1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
+  background-position: -880px -892px;
+  width: 219px;
+  height: 219px;
+}
 .quest_goldenknight2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1543px;
+  background-position: -908px -1332px;
  width: 250px;
  height: 150px;
 }
@@ -102,301 +210,187 @@
 }
 .quest_gryphon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -654px -1332px;
+  background-position: -440px -1332px;
  width: 216px;
  height: 177px;
 }
 .quest_guineapig {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -452px;
+  background-position: -1320px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_harpy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -452px;
+  background-position: -1320px -660px;
  width: 219px;
  height: 219px;
 }
 .quest_hedgehog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -211px -1332px;
+  background-position: -1307px -1112px;
  width: 219px;
  height: 186px;
 }
 .quest_hippo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px 0px;
+  background-position: 0px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_horse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -220px;
+  background-position: -220px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_kangaroo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -440px;
+  background-position: -440px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_kraken {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -871px -1332px;
+  background-position: -223px -1332px;
  width: 216px;
  height: 177px;
 }
 .quest_lostMasterclasser1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -672px;
+  background-position: -1320px -880px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -672px;
+  background-position: -440px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -672px;
+  background-position: -1100px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -718px;
+  background-position: -1757px -422px;
  width: 150px;
  height: 150px;
 }
 .quest_mayhemMistiflying2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -672px;
+  background-position: 0px -452px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -672px;
+  background-position: 0px -232px;
  width: 219px;
  height: 219px;
 }
 .quest_monkey {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px 0px;
+  background-position: -440px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_moon1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -214px;
+  background-position: -1540px -651px;
  width: 216px;
  height: 216px;
 }
 .quest_moon2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -220px;
+  background-position: -660px -1112px;
  width: 219px;
  height: 219px;
 }
 .quest_moon3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -440px;
+  background-position: -1320px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -660px;
+  background-position: -1100px -892px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -892px;
+  background-position: -440px -452px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -892px;
+  background-position: -220px -232px;
  width: 219px;
  height: 219px;
 }
 .quest_nudibranch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -431px;
+  background-position: -1540px -434px;
  width: 216px;
  height: 216px;
 }
 .quest_octopus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -431px -1332px;
+  background-position: 0px -1332px;
  width: 222px;
  height: 177px;
 }
 .quest_owl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -892px;
+  background-position: 0px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_peacock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -648px;
+  background-position: -1540px 0px;
  width: 216px;
  height: 216px;
 }
 .quest_penguin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -175px;
+  background-position: 0px -1706px;
  width: 190px;
  height: 183px;
 }
 .quest_pterodactyl {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -892px;
+  background-position: -1100px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_rat {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -892px;
+  background-position: -220px -672px;
  width: 219px;
  height: 219px;
 }
 .quest_robot {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -892px;
+  background-position: -660px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_rock {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -865px;
+  background-position: -1540px -217px;
  width: 216px;
  height: 216px;
 }
 .quest_rooster {
  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px 0px;
+  background-position: -630px -1510px;
  width: 213px;
  height: 174px;
 }
-.quest_ruby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sabretooth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_seaserpent {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_silver {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: 0px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -220px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1320px -1112px;
-  width: 219px;
-  height: 213px;
-}
-.quest_snake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1088px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_spider {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -251px -1543px;
-  width: 250px;
-  height: 150px;
-}
-.quest_squirrel {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -440px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -869px;
-  width: 150px;
-  height: 150px;
-}
-.quest_stoikalmCalamity2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -660px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -880px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_taskwoodsTerror1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1762px -1020px;
-  width: 150px;
-  height: 150px;
-}
-.quest_taskwoodsTerror2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1540px -1082px;
-  width: 216px;
-  height: 216px;
-}
-.quest_taskwoodsTerror3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1100px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_treeling {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1305px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_trex_undead {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-13.png');
-  background-position: -1522px -1332px;
-  width: 216px;
-  height: 177px;
-}
@@ -0,0 +1,510 @@
+.Pet-Wolf-Dessert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -315px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -552px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -384px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -453px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -522px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -656px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -69px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -138px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -207px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -276px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -345px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -414px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -483px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -246px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -621px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -725px -552px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: 0px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -69px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -138px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -207px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -276px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -345px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -414px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -483px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -552px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-28.png');
+  background-position: -621px -669px;
+  width: 68px;
+  height: 68px;
+}
--- a/Show More
+++ b/Show More