4.135.1

This commit also puts the list of guilds into alphabetical order.

.gitignore

@@ -37,3 +37,6 @@ yarn.lock
 .elasticbeanstalk/*
 !.elasticbeanstalk/*.cfg.yml
 !.elasticbeanstalk/*.global.yml
+
+# webstorm fake webpack for path intellisense
+webpack.webstorm.config

Dockerfile-Dev

@@ -3,9 +3,12 @@ FROM node:12
 # Install global packages
 RUN npm install -g gulp-cli mocha
 
-# Copy Habitica code into container and install dependencies
+# Copy package.json and package-lock.json into image, then install
+# dependencies.
 WORKDIR /usr/src/habitica
-COPY . /usr/src/habitica
-
+COPY ["package.json", "package-lock.json", "./"]
 RUN npm install
+
+# Copy the remaining source files in.
+COPY . /usr/src/habitica
 RUN npm run postinstall

docker-compose.dev.yml

@@ -15,8 +15,9 @@ services:
     ports:
       - "8080:8080"
     volumes:
-      - .:/code
-      - /code/node_modules
+      - .:/usr/src/habitica
+      - /usr/src/habitica/node_modules
+      - /usr/src/habitica/website/client/node_modules
   server:
     build:
       context: .
@@ -32,8 +33,8 @@ services:
     ports:
       - "3000:3000"
     volumes:
-      - .:/code
-      - /code/node_modules
+      - .:/usr/src/habitica
+      - /usr/src/habitica/node_modules
   mongo:
     image: mongo:3.6
     networks:

migrations/archive/2019/20191125_onboarding_achievements.js

@@ -50,20 +50,22 @@ async function updateUser (user) {
     set['achievements.purchasedEquipment'] = true;
   }
 
-  const hasTask = Object.keys(user.tasksOrder).find(tasksOrderType => {
-    const order = user.tasksOrder[tasksOrderType];
+  if (user.tasksOrder) {
+    const hasTask = Object.keys(user.tasksOrder).find(tasksOrderType => {
+      const order = user.tasksOrder[tasksOrderType];
 
-    if (order && order.length > 0) return true;
-    return false;
-  });
+      if (order && order.length > 0) return true;
+      return false;
+    });
 
-  if (hasTask) {
-    set['achievements.createdTask'] = true;
-  }
+    if (hasTask) {
+      set['achievements.createdTask'] = true;
+    }
 
-  const hasExperience = user.stats && user.stats.exp && user.stats.exp > 0;
-  if (hasTask && hasExperience) {
-    set['achievements.completedTask'] = true;
+    const hasExperience = user.stats && user.stats.exp && user.stats.exp > 0;
+    if (hasTask && hasExperience) {
+      set['achievements.completedTask'] = true;
+    }
   }
 
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);

migrations/archive/2019/20191231_nye.js

@@ -0,0 +1,118 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20191231_nye';
+import { model as User } from '../../../website/server/models/user';
+import { v4 as uuid } from 'uuid';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {'flags.newStuff': true};
+  let push;
+
+  set.migration = MIGRATION_NAME;
+
+  if (typeof user.items.gear.owned.head_special_nye2018 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2019'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2019',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2017 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2018'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2018',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2016 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2017'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2017',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2015 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2016'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2016',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2014 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2015'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2015',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye !== 'undefined') {
+    set['items.gear.owned.head_special_nye2014'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2014',
+        _id: uuid(),
+      },
+    ];
+  } else {
+    set['items.gear.owned.head_special_nye'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye',
+        _id: uuid(),
+      },
+    ];
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({_id: user._id}, {$set: set, $push: {pinnedItems: {$each: push}}}).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2020/20200131_habit_birthday.js

@@ -0,0 +1,91 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20200131_habit_birthday';
+import { v4 as uuid } from 'uuid';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const inc = {
+    'items.food.Cake_Skeleton': 1,
+    'items.food.Cake_Base': 1,
+    'items.food.Cake_CottonCandyBlue': 1,
+    'items.food.Cake_CottonCandyPink': 1,
+    'items.food.Cake_Shade': 1,
+    'items.food.Cake_White': 1,
+    'items.food.Cake_Golden': 1,
+    'items.food.Cake_Zombie': 1,
+    'items.food.Cake_Desert': 1,
+    'items.food.Cake_Red': 1,
+    'achievements.habitBirthdays': 1,
+  };
+  const set = {};
+  let push;
+
+  set.migration = MIGRATION_NAME;
+
+  if (typeof user.items.gear.owned.armor_special_birthday2019 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2020'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2020', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2018 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2019'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2019', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2017 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2018'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2018', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2016 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2017'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2017', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2015 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2016'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2016', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2015'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2015', _id: uuid()}};
+  } else {
+    set['items.gear.owned.armor_special_birthday'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday', _id: uuid()}};
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({_id: user._id}, {$inc: inc, $set: set, $push: push}).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2019-01-15')},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2020/20200218_pet_color_achievements.js

@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20200218_pet_color_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['Wolf-CottonCandyPink'] > 0
+      && pets['TigerCub-CottonCandyPink'] > 0
+      && pets['PandaCub-CottonCandyPink'] > 0
+      && pets['LionCub-CottonCandyPink'] > 0
+      && pets['Fox-CottonCandyPink'] > 0
+      && pets['FlyingPig-CottonCandyPink'] > 0
+      && pets['Dragon-CottonCandyPink'] > 0
+      && pets['Cactus-CottonCandyPink'] > 0
+      && pets['BearCub-CottonCandyPink'] > 0) {
+        set['achievements.tickledPink'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-CottonCandyPink']
+      && mounts['TigerCub-CottonCandyPink']
+      && mounts['PandaCub-CottonCandyPink']
+      && mounts['LionCub-CottonCandyPink']
+      && mounts['Fox-CottonCandyPink']
+      && mounts['FlyingPig-CottonCandyPink']
+      && mounts['Dragon-CottonCandyPink']
+      && mounts['Cactus-CottonCandyPink']
+      && mounts['BearCub-CottonCandyPink'] ) {
+        set['achievements.rosyOutlook'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2020-02-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/s3-upload.js

@@ -27,7 +27,7 @@ function uploadFile (buffer, fileName) {
       if (error) {
         reject(error);
       } else {
-        // console.info(`${fileName} uploaded to ${BUCKET_NAME} succesfully.`);
+        // console.info(`${fileName} uploaded to ${BUCKET_NAME} successfully.`);
         resolve(fileName);
       }
     });

migrations/users/bulk-email.js

@@ -8,13 +8,16 @@ const BASE_URL = nconf.get('BASE_URL');
 const EMAIL_SLUG = 'mandrill-email-slug'; // Set email template to send
 const MIGRATION_NAME = 'bulk-email';
 
-const progressCount = 1000;
+const progressCount = 250;
 let count = 0;
 
 async function updateUser (user) {
   count += 1;
 
-  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+  if (count % progressCount === 0) {
+    console.warn(`${count} ${user._id}`);
+    await new Promise(resolve => setTimeout(resolve, 5000));
+  }
 
   await sendTxn(
     user,

package.json

@@ -1,29 +1,29 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.127.3",
+  "version": "4.135.1",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.7.5",
-    "@babel/preset-env": "^7.7.6",
-    "@babel/register": "^7.7.4",
-    "@google-cloud/trace-agent": "^4.2.4",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/register": "^7.8.3",
+    "@google-cloud/trace-agent": "^4.2.5",
     "@slack/client": "^3.8.1",
     "accepts": "^1.3.5",
-    "amazon-payments": "^0.2.7",
+    "amazon-payments": "^0.2.8",
     "amplitude": "^3.5.0",
     "apidoc": "^0.17.5",
     "apn": "^2.2.0",
-    "aws-sdk": "^2.590.0",
-    "bcrypt": "^3.0.7",
+    "aws-sdk": "^2.624.0",
+    "bcrypt": "^3.0.8",
     "body-parser": "^1.18.3",
     "compression": "^1.7.4",
-    "cookie-session": "^1.3.3",
+    "cookie-session": "^1.4.0",
     "coupon-code": "^0.4.5",
-    "csv-stringify": "^5.3.4",
+    "csv-stringify": "^5.3.6",
     "cwait": "^1.1.1",
     "domain-middleware": "~0.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.0.0",
     "express": "^4.16.3",
@@ -40,13 +40,13 @@
     "helmet": "^3.21.2",
     "image-size": "^0.8.3",
     "in-app-purchase": "^1.11.3",
-    "js2xmlparser": "^4.0.0",
+    "js2xmlparser": "^4.0.1",
     "lodash": "^4.17.15",
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.24.0",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.8.1",
+    "mongoose": "^5.9.2",
     "morgan": "^1.7.0",
     "nconf": "^0.10.0",
     "node-gcm": "^1.0.2",
@@ -60,18 +60,18 @@
     "ps-tree": "^1.0.0",
     "regenerator-runtime": "^0.13.3",
     "remove-markdown": "^0.3.0",
-    "rimraf": "^3.0.0",
+    "rimraf": "^3.0.2",
     "short-uuid": "^3.0.0",
-    "stripe": "^7.14.0",
-    "superagent": "^5.1.2",
+    "stripe": "^7.15.0",
+    "superagent": "^5.2.2",
     "universal-analytics": "^0.4.17",
     "useragent": "^2.1.9",
-    "uuid": "^3.3.3",
+    "uuid": "^3.4.0",
     "validator": "^11.0.0",
     "vinyl-buffer": "^1.0.1",
     "winston": "^2.4.3",
     "winston-loggly-bulk": "^2.0.2",
-    "xml2js": "^0.4.4"
+    "xml2js": "^0.4.23"
   },
   "private": true,
   "engines": {
@@ -103,17 +103,17 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^0.19.0",
+    "axios": "^0.19.2",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "chalk": "^2.4.1",
     "expect.js": "^0.3.1",
     "istanbul": "^1.1.0-alpha.1",
     "mocha": "^5.1.1",
-    "monk": "^7.1.1",
+    "monk": "^7.1.2",
     "require-again": "^2.0.0",
     "sinon": "^7.2.4",
-    "sinon-chai": "^3.0.0",
+    "sinon-chai": "^3.5.0",
     "sinon-stub-promise": "^4.0.0"
   },
   "optionalDependencies": {}

scripts/gdpr-delete-users.js

@@ -34,11 +34,12 @@ async function deleteAmplitudeData (userId, email) {
 }
 
 async function deleteHabiticaData (user, email) {
+  const truncatedEmail = email.slice(0, email.indexOf('@'));
   await User.update(
     { _id: user._id },
     {
       $set: {
-        'auth.local.email': email,
+        'auth.local.email': user.auth.local.email ? email : `${truncatedEmail}@example.com`,
         'auth.local.hashed_password': '$2a$10$QDnNh1j1yMPnTXDEOV38xOePEWFd4X8DSYwAM8XTmqmacG5X0DKjW',
         'auth.local.passwordHashMethod': 'bcrypt',
       },

test/api/unit/libs/analyticsService.test.js

@@ -155,7 +155,7 @@ describe('analyticsService', () => {
             });
         });
 
-        it('sets Unkown if headers are not passed in', () => {
+        it('sets Unknown if headers are not passed in', () => {
           delete data.headers;
 
           return analyticsService.track(eventType, data)
@@ -476,7 +476,7 @@ describe('analyticsService', () => {
             });
         });
 
-        it('sets Unkown if headers are not passed in', () => {
+        it('sets Unknown if headers are not passed in', () => {
           delete data.headers;
 
           return analyticsService.trackPurchase(data)

test/api/unit/libs/payments/google.test.js

@@ -278,19 +278,6 @@ describe('Google Payments', () => {
         });
     });
 
-    it('should throw an error if subscription is still valid', async () => {
-      iap.getPurchaseData.restore();
-      iapGetPurchaseDataStub = sinon.stub(iap, 'getPurchaseData')
-        .returns([{ expirationDate: expirationDate.add({ day: 1 }).toDate() }]);
-
-      await expect(googlePayments.cancelSubscribe(user, headers))
-        .to.eventually.be.rejected.and.to.eql({
-          httpCode: 401,
-          name: 'NotAuthorized',
-          message: googlePayments.constants.RESPONSE_STILL_VALID,
-        });
-    });
-
     it('should throw an error if receipt is invalid', async () => {
       iap.isValidated.restore();
       iapIsValidatedStub = sinon.stub(iap, 'isValidated')

test/api/unit/libs/payments/payments.test.js

@@ -211,7 +211,7 @@ describe('payments/index', () => {
         await api.createSubscription(data);
         const msg = '`Hello recipient, sender has sent you 3 months of subscription!`';
 
-        expect(user.sendMessage).to.be.calledTwice;
+        expect(user.sendMessage).to.be.calledOnce;
         expect(user.sendMessage).to.be.calledWith(
           recipient,
           { receiverMsg: msg, senderMsg: msg, save: false },
@@ -252,77 +252,6 @@ describe('payments/index', () => {
           },
         });
       });
-
-      context('Winter 2019-20 Gift-1-Get-1 Promotion', async () => {
-        it('creates a gift subscription for purchaser and recipient if none exist', async () => {
-          await api.createSubscription(data);
-
-          expect(user.items.pets['Jackalope-RoyalPurple']).to.eql(5);
-          expect(user.purchased.plan.customerId).to.eql('Gift');
-          expect(user.purchased.plan.dateTerminated).to.exist;
-          expect(user.purchased.plan.dateUpdated).to.exist;
-          expect(user.purchased.plan.dateCreated).to.exist;
-
-          expect(recipient.items.pets['Jackalope-RoyalPurple']).to.eql(5);
-          expect(recipient.purchased.plan.customerId).to.eql('Gift');
-          expect(recipient.purchased.plan.dateTerminated).to.exist;
-          expect(recipient.purchased.plan.dateUpdated).to.exist;
-          expect(recipient.purchased.plan.dateCreated).to.exist;
-        });
-
-        it('adds extraMonths to existing subscription for purchaser and creates a gift subscription for recipient without sub', async () => {
-          user.purchased.plan = plan;
-
-          expect(user.purchased.plan.extraMonths).to.eql(0);
-
-          await api.createSubscription(data);
-
-          expect(user.purchased.plan.extraMonths).to.eql(3);
-
-          expect(recipient.items.pets['Jackalope-RoyalPurple']).to.eql(5);
-          expect(recipient.purchased.plan.customerId).to.eql('Gift');
-          expect(recipient.purchased.plan.dateTerminated).to.exist;
-          expect(recipient.purchased.plan.dateUpdated).to.exist;
-          expect(recipient.purchased.plan.dateCreated).to.exist;
-        });
-
-        it('adds extraMonths to existing subscription for recipient and creates a gift subscription for purchaser without sub', async () => {
-          recipient.purchased.plan = plan;
-
-          expect(recipient.purchased.plan.extraMonths).to.eql(0);
-
-          await api.createSubscription(data);
-
-          expect(recipient.purchased.plan.extraMonths).to.eql(3);
-
-          expect(user.items.pets['Jackalope-RoyalPurple']).to.eql(5);
-          expect(user.purchased.plan.customerId).to.eql('Gift');
-          expect(user.purchased.plan.dateTerminated).to.exist;
-          expect(user.purchased.plan.dateUpdated).to.exist;
-          expect(user.purchased.plan.dateCreated).to.exist;
-        });
-
-        it('adds extraMonths to existing subscriptions for purchaser and recipient', async () => {
-          user.purchased.plan = plan;
-          recipient.purchased.plan = plan;
-
-          expect(user.purchased.plan.extraMonths).to.eql(0);
-          expect(recipient.purchased.plan.extraMonths).to.eql(0);
-
-          await api.createSubscription(data);
-
-          expect(user.purchased.plan.extraMonths).to.eql(3);
-          expect(recipient.purchased.plan.extraMonths).to.eql(3);
-        });
-
-        it('sends a private message about the promotion', async () => {
-          await api.createSubscription(data);
-          const msg = '`Hello sender, you received 3 months of subscription as part of our holiday gift-giving promotion!`';
-
-          expect(user.sendMessage).to.be.calledTwice;
-          expect(user.sendMessage).to.be.calledWith(user, { senderMsg: msg });
-        });
-      });
     });
 
     context('Purchasing a subscription for self', () => {
@@ -697,7 +626,7 @@ describe('payments/index', () => {
           .calledWith(recipient, { receiverMsg: msg, senderMsg: msg, save: false });
       });
 
-      it('sends a message from purchaser to recipient wtih custom message', async () => {
+      it('sends a message from purchaser to recipient with custom message', async () => {
         data.gift.message = 'giftmessage';
 
         await api.buyGems(data);

test/api/unit/libs/webhooks.test.js

@@ -43,6 +43,7 @@ describe('webhooks', () => {
       options: {
         questStarted: true,
         questFinised: true,
+        questInvited: true,
       },
     }, {
       id: 'userActivity',
@@ -576,7 +577,7 @@ describe('webhooks', () => {
       };
     });
 
-    ['questStarted', 'questFinised'].forEach(type => {
+    ['questStarted', 'questFinised', 'questInvited'].forEach(type => {
       it(`sends ${type} webhooks`, () => {
         data.type = type;
 

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

@@ -1164,6 +1164,23 @@ describe('Group Model', () => {
         });
       });
 
+      it('unlink group tag', async () => {
+        participatingMember.tags.push({
+          name: party.name,
+          id: party._id,
+          group: party._id,
+        });
+
+        await participatingMember.save();
+        await party.leave(participatingMember);
+
+        participatingMember = await User.findOne({ _id: participatingMember._id });
+        const groupTag = participatingMember.tags.find(tag => tag.id === party._id);
+
+        expect(groupTag).to.not.be.undefined;
+        expect(groupTag.group).to.be.undefined;
+      });
+
       it('deletes a private party when the last member leaves', async () => {
         await party.leave(participatingMember);
         await party.leave(sleepingParticipatingMember);

test/api/unit/models/webhook.test.js

@@ -183,6 +183,7 @@ describe('Webhook Model', () => {
             options: {
               questStarted: true,
               questFinished: true,
+              questInvited: true,
             },
           };
         });
@@ -197,6 +198,7 @@ describe('Webhook Model', () => {
           expect(wh.options).to.eql({
             questStarted: false,
             questFinished: false,
+            questInvited: false,
           });
         });
 
@@ -210,6 +212,7 @@ describe('Webhook Model', () => {
           expect(wh.options).to.eql({
             questStarted: false,
             questFinished: true,
+            questInvited: true,
           });
         });
 
@@ -224,6 +227,7 @@ describe('Webhook Model', () => {
           expect(wh.options).to.eql({
             questStarted: true,
             questFinished: true,
+            questInvited: true,
           });
         });
 

test/api/v3/integration/challenges/POST-challenges.test.js

@@ -251,7 +251,7 @@ describe('POST /challenges', () => {
       expect(groupLeader.balance).to.eql(oldUserBalance);
     });
 
-    it('sets all properites of the challenge as passed', async () => {
+    it('sets all properties of the challenge as passed', async () => {
       const name = 'Test Challenge';
       const shortName = 'TC Label';
       const description = 'Test Description';

test/api/v3/integration/groups/GET-groups_id.test.js

@@ -177,7 +177,7 @@ describe('GET /groups/:id', () => {
         });
     });
 
-    it('removes non-existant guild from user\'s guild list', async () => {
+    it('removes non-existent guild from user\'s guild list', async () => {
       const guildId = generateUUID();
 
       await user.update({
@@ -197,7 +197,7 @@ describe('GET /groups/:id', () => {
       expect(user.guilds).to.not.include(guildId);
     });
 
-    it('removes non-existant party from user\'s party object', async () => {
+    it('removes non-existent party from user\'s party object', async () => {
       const partyId = generateUUID();
 
       await user.update({

test/api/v3/integration/groups/POST-groups_groupId_leave.js

@@ -210,7 +210,7 @@ describe('POST /groups/:groupId/leave', () => {
         expect(userWithoutInvitation.invitations.guilds).to.not.be.empty;
       });
 
-      it('deletes non existant guild from user when user tries to leave', async () => {
+      it('deletes non existent guild from user when user tries to leave', async () => {
         const nonExistentGuildId = generateUUID();
         const userWithNonExistentGuild = await generateUser({ guilds: [nonExistentGuildId] });
         expect(userWithNonExistentGuild.guilds).to.contain(nonExistentGuildId);
@@ -258,7 +258,7 @@ describe('POST /groups/:groupId/leave', () => {
       });
     });
 
-    it('deletes non existant party from user when user tries to leave', async () => {
+    it('deletes non existent party from user when user tries to leave', async () => {
       const nonExistentPartyId = generateUUID();
       const userWithNonExistentParty = await generateUser({ 'party._id': nonExistentPartyId });
       expect(userWithNonExistentParty.party._id).to.eql(nonExistentPartyId);

test/api/v3/integration/members/POST-send_private_message.test.js

@@ -66,7 +66,7 @@ describe('POST /members/send-private-message', () => {
     })).to.eventually.be.rejected.and.eql({
       code: 401,
       error: 'NotAuthorized',
-      message: t('notAuthorizedToSendMessageToThisUser'),
+      message: t('blockedToSendToThisUser'),
     });
   });
 

test/api/v3/integration/members/POST-transfer_gems.test.js

@@ -89,7 +89,7 @@ describe('POST /members/transfer-gems', () => {
     })).to.eventually.be.rejected.and.eql({
       code: 401,
       error: 'NotAuthorized',
-      message: t('notAuthorizedToSendMessageToThisUser'),
+      message: t('blockedToSendToThisUser'),
     });
   });
 

test/api/v3/integration/payments/amazon/POST-payments_amazon_checkout.test.js

@@ -29,7 +29,7 @@ describe('payments - amazon - #checkout', () => {
       amzLib.checkout.restore();
     });
 
-    it('makes a purcahse with amazon checkout', async () => {
+    it('makes a purchase with amazon checkout', async () => {
       user = await generateUser({
         'profile.name': 'sender',
         'purchased.plan.customerId': 'customer-id',

test/api/v3/integration/quests/POST-groups_groupId_quests_accept.test.js

@@ -100,7 +100,7 @@ describe('POST /groups/:groupId/quests/accept', () => {
         .to.eventually.be.rejected.and.eql({
           code: 401,
           error: 'NotAuthorized',
-          message: t('questAlreadyUnderway'),
+          message: t('questAlreadyStartedFriendly'),
         });
     });
   });

test/api/v3/integration/quests/POST-groups_groupId_quests_force-start.test.js

@@ -73,7 +73,7 @@ describe('POST /groups/:groupId/quests/force-start', () => {
         .to.eventually.be.rejected.and.eql({
           code: 401,
           error: 'NotAuthorized',
-          message: t('questAlreadyUnderway'),
+          message: t('questAlreadyStarted'),
         });
     });
 

test/api/v3/integration/quests/POST-groups_groupId_quests_invite.test.js

@@ -2,6 +2,7 @@ import { v4 as generateUUID } from 'uuid';
 import {
   createAndPopulateGroup,
   translate as t,
+  server,
   sleep,
 } from '../../../../helpers/api-integration/v3';
 import { quests as questScrolls } from '../../../../../website/common/script/content/quests';
@@ -210,5 +211,39 @@ describe('POST /groups/:groupId/quests/invite/:questKey', () => {
       const returnedGroup = await groupLeader.get(`/groups/${group._id}`);
       expect(returnedGroup.chat[0]._meta).to.be.undefined;
     });
+
+    context('sending quest activity webhooks', () => {
+      before(async () => {
+        await server.start();
+      });
+
+      after(async () => {
+        await server.close();
+      });
+
+      it('sends quest invited webhook', async () => {
+        const uuid = generateUUID();
+
+        await member.post('/user/webhook', {
+          url: `http://localhost:${server.port}/webhooks/${uuid}`,
+          type: 'questActivity',
+          enabled: true,
+          options: {
+            questInvited: true,
+          },
+        });
+
+        await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+
+        await sleep();
+
+        const body = server.getWebhookData(uuid);
+
+        expect(body.type).to.eql('questInvited');
+        expect(body.group.id).to.eql(questingGroup.id);
+        expect(body.group.name).to.eql(questingGroup.name);
+        expect(body.quest.key).to.eql(PET_QUEST);
+      });
+    });
   });
 });

test/api/v3/integration/quests/POST-groups_groupid_quests_reject.test.js

@@ -121,7 +121,7 @@ describe('POST /groups/:groupId/quests/reject', () => {
         .to.eventually.be.rejected.and.eql({
           code: 401,
           error: 'NotAuthorized',
-          message: t('questAlreadyUnderway'),
+          message: t('questAlreadyStartedFriendly'),
         });
     });
   });

test/api/v3/integration/tasks/DELETE-tasks_id.test.js

@@ -120,7 +120,7 @@ describe('DELETE /tasks/:id', () => {
   });
 
   context('task cannot be deleted', () => {
-    it('cannot delete a non-existant task', async () => {
+    it('cannot delete a non-existent task', async () => {
       await expect(user.del('/tasks/550e8400-e29b-41d4-a716-446655440000')).to.eventually.be.rejected.and.eql({
         code: 404,
         error: 'NotFound',

test/api/v3/integration/tasks/GET-tasks_id.test.js

@@ -39,7 +39,7 @@ describe('GET /tasks/:id', () => {
   });
 
   context('task cannot be accessed', () => {
-    it('cannot get a non-existant task', async () => {
+    it('cannot get a non-existent task', async () => {
       const dummyId = generateUUID();
 
       await expect(user.get(`/tasks/${dummyId}`)).to.eventually.be.rejected.and.eql({

test/api/v3/integration/tasks/challenges/DELETE-tasks_id_challenge_challengeId.test.js

@@ -27,7 +27,7 @@ describe('DELETE /tasks/:id', () => {
     });
   });
 
-  it('cannot delete a non-existant task', async () => {
+  it('cannot delete a non-existent task', async () => {
     await expect(user.del(`/tasks/${generateUUID()}`)).to.eventually.be.rejected.and.eql({
       code: 404,
       error: 'NotFound',

test/api/v3/integration/user/auth/PUT-user_update_email.test.js

@@ -16,7 +16,7 @@ describe('PUT /user/auth/update-email', () => {
   const newEmail = 'SOmE-nEw-emAIl_2@example.net';
   const oldPassword = 'password'; // from habitrpg/test/helpers/api-integration/v3/object-generators.js
 
-  context('Local Authenticaion User', async () => {
+  context('Local Authentication User', async () => {
     let user;
 
     beforeEach(async () => {

test/api/v3/integration/webhook/POST-user_add_webhook.test.js

@@ -226,6 +226,69 @@ describe('POST /user/webhook', () => {
     });
   });
 
+  it('defaults questActivity options', async () => {
+    body.type = 'questActivity';
+
+    const webhook = await user.post('/user/webhook', body);
+
+    expect(webhook.options).to.eql({
+      questStarted: false,
+      questFinished: false,
+      questInvited: false,
+    });
+  });
+
+  it('can set questActivity options', async () => {
+    body.type = 'questActivity';
+    body.options = {
+      questStarted: true,
+      questFinished: true,
+      questInvited: true,
+    };
+
+    const webhook = await user.post('/user/webhook', body);
+
+    expect(webhook.options).to.eql({
+      questStarted: true,
+      questFinished: true,
+      questInvited: true,
+    });
+  });
+
+  it('discards extra properties in questActivity options', async () => {
+    body.type = 'questActivity';
+    body.options = {
+      questStarted: false,
+      questFinished: true,
+      questInvited: true,
+      foo: 'bar',
+    };
+
+    const webhook = await user.post('/user/webhook', body);
+
+    expect(webhook.options.foo).to.not.exist;
+    expect(webhook.options).to.eql({
+      questStarted: false,
+      questFinished: true,
+      questInvited: true,
+    });
+  });
+
+  ['questStarted', 'questFinished', 'questInvited'].forEach(option => {
+    it(`requires questActivity option ${option} to be a boolean`, async () => {
+      body.type = 'questActivity';
+      body.options = {
+        [option]: 'not a boolean',
+      };
+
+      await expect(user.post('/user/webhook', body)).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('webhookBooleanOption', { option }),
+      });
+    });
+  });
+
   it('discards extra properties in globalActivity options', async () => {
     body.type = 'globalActivity';
     body.options = {

test/common/libs/getDebuffPotionItems.test.js

@@ -15,8 +15,8 @@ describe('getDebuffPotionItems', () => {
 
   for (const key of Object.keys(TRANSFORMATION_DEBUFFS_LIST)) {
     const debuff = TRANSFORMATION_DEBUFFS_LIST[key];
-    // Here we itterate whole object to dynamicaly create test suites as
-    // it described in dock of mocha
+    // Here we iterate the whole object to dynamically create test suites as
+    // described in mocha's docs
     // https://mochajs.org/#dynamically-generating-tests
     // That's why we have eslint-disable here
     // eslint-disable-next-line no-loop-func

test/common/ops/unlock.js

@@ -54,7 +54,7 @@ describe('shared.ops.unlock', () => {
     }
   });
 
-  // disabled untill fully implemente
+  // disabled until fully implemente
   xit('returns an error when user already owns items in a full set', done => {
     try {
       unlock(user, { query: { path: unlockPath } });

website/client/config/storybook/config.js

@@ -1,6 +1,37 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { configure } from '@storybook/vue';
 import '../../src/assets/scss/index.scss';
+import '../../src/assets/css/sprites.css';
+
+import '../../src/assets/css/sprites/spritesmith-main-0.css';
+import '../../src/assets/css/sprites/spritesmith-main-1.css';
+import '../../src/assets/css/sprites/spritesmith-main-2.css';
+import '../../src/assets/css/sprites/spritesmith-main-3.css';
+import '../../src/assets/css/sprites/spritesmith-main-4.css';
+import '../../src/assets/css/sprites/spritesmith-main-5.css';
+import '../../src/assets/css/sprites/spritesmith-main-6.css';
+import '../../src/assets/css/sprites/spritesmith-main-7.css';
+import '../../src/assets/css/sprites/spritesmith-main-8.css';
+import '../../src/assets/css/sprites/spritesmith-main-9.css';
+import '../../src/assets/css/sprites/spritesmith-main-10.css';
+import '../../src/assets/css/sprites/spritesmith-main-11.css';
+import '../../src/assets/css/sprites/spritesmith-main-12.css';
+import '../../src/assets/css/sprites/spritesmith-main-13.css';
+import '../../src/assets/css/sprites/spritesmith-main-14.css';
+import '../../src/assets/css/sprites/spritesmith-main-15.css';
+import '../../src/assets/css/sprites/spritesmith-main-16.css';
+import '../../src/assets/css/sprites/spritesmith-main-17.css';
+import '../../src/assets/css/sprites/spritesmith-main-18.css';
+import '../../src/assets/css/sprites/spritesmith-main-19.css';
+import '../../src/assets/css/sprites/spritesmith-main-20.css';
+import '../../src/assets/css/sprites/spritesmith-main-21.css';
+import '../../src/assets/css/sprites/spritesmith-main-22.css';
+import '../../src/assets/css/sprites/spritesmith-main-23.css';
+import '../../src/assets/css/sprites/spritesmith-main-24.css';
+import '../../src/assets/css/sprites/spritesmith-main-25.css';
+import '../../src/assets/css/sprites/spritesmith-main-26.css';
+import Vue from 'vue';
+import StoreModule from '@/libs/store';
 
 const req = require.context('../../src', true, /.stories.js$/);
 
@@ -8,4 +39,6 @@ function loadStories () {
   req.keys().forEach(filename => req(filename));
 }
 
+Vue.use(StoreModule);
+
 configure(loadStories, module);

website/client/config/storybook/mock.data.js

@@ -0,0 +1,75 @@
+export const userStyles = {
+  contributor: {
+    admin: true,
+    level: 9,
+    text: '',
+  },
+  items: {
+    gear: {
+      equipped: {
+        armor: 'armor_special_2',
+        head: 'head_special_2',
+        shield: 'shield_special_goldenknight',
+        headAccessory: 'headAccessory_base_0',
+        eyewear: 'eyewear_base_0',
+        weapon: 'weapon_special_1',
+        back: 'back_base_0',
+      },
+      costume: {
+        armor: 'armor_special_fallRogue',
+        head: 'head_special_fallRogue',
+        shield: 'shield_armoire_shieldOfDiamonds',
+        body: 'body_mystery_201706',
+        eyewear: 'eyewear_special_blackHalfMoon',
+        back: 'back_base_0',
+        headAccessory: 'headAccessory_special_wolfEars',
+        weapon: 'weapon_armoire_lamplighter',
+      },
+    },
+  },
+  preferences: {
+    hair: {
+      color: 'black', base: 0, bangs: 3, beard: 0, mustache: 0, flower: 0,
+    },
+    tasks: { groupByChallenge: false, confirmScoreNotes: false },
+    size: 'broad',
+    skin: 'wolf',
+    shirt: 'zombie',
+    chair: 'none',
+    sleep: true,
+    disableClasses: false,
+    background: 'midnight_castle',
+    costume: true,
+  },
+  stats: {
+    buffs: {
+      str: 0,
+      int: 0,
+      per: 0,
+      con: 0,
+      stealth: 0,
+      streaks: false,
+      snowball: false,
+      spookySparkles: false,
+      shinySeed: false,
+      seafoam: false,
+    },
+    training: {
+      int: 0, per: 0, str: 0, con: 0,
+    },
+    hp: 50,
+    mp: 158,
+    exp: 227,
+    gp: 464.31937261345155,
+    lvl: 17,
+    class: 'rogue',
+    points: 17,
+    str: 0,
+    con: 0,
+    int: 0,
+    per: 0,
+    toNextLevel: 380,
+    maxHealth: 50,
+    maxMP: 158,
+  },
+};

website/client/package.json

@@ -13,53 +13,54 @@
     "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js"
   },
   "dependencies": {
-    "@vue/cli-plugin-babel": "^4.1.1",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-plugin-router": "^4.1.1",
-    "@vue/cli-plugin-unit-mocha": "^4.1.1",
-    "@vue/cli-service": "^4.1.1",
-    "@storybook/addon-actions": "^5.0.0",
-    "@storybook/addon-knobs": "^5.0.0",
-    "@storybook/addon-links": "^5.0.0",
-    "@storybook/addon-notes": "^5.0.0",
-    "@storybook/vue": "^5.2.5",
+    "@vue/cli-plugin-babel": "^4.2.2",
+    "@vue/cli-plugin-eslint": "^4.2.2",
+    "@vue/cli-plugin-router": "^4.2.2",
+    "@vue/cli-plugin-unit-mocha": "^4.2.2",
+    "@vue/cli-service": "^4.2.2",
+    "@storybook/addon-actions": "^5.3.13",
+    "@storybook/addon-knobs": "^5.3.13",
+    "@storybook/addon-links": "^5.3.13",
+    "@storybook/addon-notes": "^5.3.13",
+    "@storybook/vue": "^5.3.13",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^5.8.0",
-    "axios": "^0.19.0",
+    "amplitude-js": "^5.9.0",
+    "axios": "^0.19.2",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.0.1",
     "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.1.0",
+    "bootstrap-vue": "^2.5.0",
     "chai": "^4.1.2",
-    "core-js": "^3.5.0",
-    "eslint": "^6.7.2",
+    "core-js": "^3.6.4",
+    "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint-plugin-vue": "^6.2.1",
     "habitica-markdown": "^1.3.2",
-    "hellojs": "^1.18.1",
-    "inspectpack": "^4.2.2",
+    "hellojs": "^1.18.4",
+    "inspectpack": "^4.4.0",
     "intro.js": "^2.9.3",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
     "nconf": "^0.10.0",
-    "sass": "^1.23.7",
-    "sass-loader": "^8.0.0",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
     "smartbanner.js": "^1.15.0",
-    "svg-inline-loader": "^0.8.0",
+    "svg-inline-loader": "^0.8.2",
     "svg-url-loader": "^3.0.3",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
-    "uuid": "^3.3.3",
+    "uuid": "^3.4.0",
     "validator": "^11.1.0",
     "vue": "^2.6.11",
     "vue-cli-plugin-storybook": "^0.6.1",
     "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.0.6",
+    "vue-router": "^3.1.5",
     "vue-template-compiler": "^2.6.11",
+    "vue2-perfect-scrollbar": "^1.3.0",
     "vuedraggable": "^2.23.1",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#5d237615463a84a23dd6f3f77c6ab577d68593ec",
-    "webpack": "^4.41.2"
+    "webpack": "^4.41.6"
   }
 }

website/client/src/app.vue

@@ -28,7 +28,10 @@
     </div>
     <div
       id="app"
-      :class="{'casting-spell': castingSpell}"
+      :class="{
+        'casting-spell': castingSpell,
+        'resting': showRestingBanner
+      }"
     >
       <banned-account-modal />
       <amazon-payments-modal v-if="!isStaticPage" />
@@ -64,33 +67,12 @@
               ></span>
             </div>
           </div>
-          <div
-            class="g1g1-banner d-flex justify-content-center align-items-center"
-            v-if="!giftingHidden">
-            <div
-              class="svg-icon svg-gifts left-gift"
-              v-html="icons.gifts">
-            </div>
-            <router-link class="g1g1-link" to="/user/settings/subscription">
-               {{ $t('g1g1Announcement') }}
-            </router-link>
-            <div
-              class="svg-icon svg-gifts right-gift"
-              v-html="icons.gifts">
-            </div>
-            <div
-              class="closepadding"
-              @click="hideGiftingBanner()">
-              <span
-                class="svg-icon inline-icon icon-10"
-                aria-hidden="true"
-                v-html="icons.close">
-              </span>
-            </div>
-          </div>
           <notifications-display />
           <app-menu />
-          <div class="container-fluid">
+          <div
+            class="container-fluid"
+            :class="{'no-margin': noMargin}"
+          >
             <app-header />
             <buyModal
               :item="selectedItemToBuy || {}"
@@ -107,7 +89,7 @@
               <router-view />
             </div>
           </div>
-          <app-footer />
+          <app-footer v-if="!hideFooter" />
           <audio
             id="sound"
             ref="sound"
@@ -121,13 +103,20 @@
 
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/variables.scss';
 
   #app {
-    height: calc(100% - 56px); /* 56px is the menu */
     display: flex;
     flex-direction: column;
-    min-height: 100vh;
     overflow-x: hidden;
+
+    &.resting {
+      --banner-resting-height: #{$restingToolbarHeight};
+    }
+
+    &.giftingBanner {
+      --banner-gifting-height: 2.5rem;
+    }
   }
 
   #loading-screen-inapp {
@@ -172,28 +161,11 @@
     flex: 1 0 auto;
   }
 
-  .g1g1-banner {
-    width: 100%;
-    min-height: 2.5rem;
-    background-color: $teal-50;
-  }
-
-  .g1g1-link {
-    color: $white;
-  }
-
-  .left-gift {
-    margin: auto 1rem auto auto;
-  }
-
-  .right-gift {
-    margin: auto auto auto 1rem;
-    filter: flipH;
-    transform: scaleX(-1);
-  }
-
-  .svg-gifts {
-    width: 4.6rem;
+  .no-margin {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .notification {
@@ -208,7 +180,7 @@
 
   .resting-banner {
     width: 100%;
-    min-height: 40px;
+    height: $restingToolbarHeight;
     background-color: $blue-10;
     top: 0;
     z-index: 1300;
@@ -291,10 +263,8 @@ import {
   CONSTANTS,
   getLocalSetting,
   removeLocalSetting,
-  setLocalSetting,
 } from '@/libs/userlocalManager';
 
-import gifts from '@/assets/svg/gifts.svg';
 import svgClose from '@/assets/svg/close.svg';
 import bannedAccountModal from '@/components/bannedAccountModal';
 
@@ -321,7 +291,6 @@ export default {
     return {
       icons: Object.freeze({
         close: svgClose,
-        gifts,
       }),
       selectedItemToBuy: null,
       selectedSpellToBuy: null,
@@ -332,7 +301,6 @@ export default {
       loading: true,
       currentTipNumber: 0,
       bannerHidden: false,
-      giftingHidden: getLocalSetting(CONSTANTS.keyConstants.GIFTING_BANNER_DISPLAY) === 'dismissed2019',
     };
   },
   computed: {
@@ -354,7 +322,13 @@ export default {
       return this.$t(`tip${tipNumber}`);
     },
     showRestingBanner () {
-      return !this.bannerHidden && this.user.preferences.sleep;
+      return !this.bannerHidden && this.user && this.user.preferences.sleep;
+    },
+    noMargin () {
+      return ['privateMessages'].includes(this.$route.name);
+    },
+    hideFooter () {
+      return ['privateMessages'].includes(this.$route.name);
     },
   },
   created () {
@@ -635,6 +609,25 @@ export default {
 
         if (modalBefore) this.$root.$emit('bv::show::modal', modalBefore, { fromRoot: true });
       });
+
+      // Dismiss modal aggressively. Pass a modal ID to remove a modal instance from the stack
+      // (both the stack entry itself and its "prev" reference) so we don't reopen it
+      this.$root.$on('habitica::dismiss-modal', oldModal => {
+        if (!oldModal) return;
+        this.$root.$emit('bv::hide::modal', oldModal);
+        let removeIndex = this.$store.state.modalStack
+          .map(modal => modal.modalId)
+          .indexOf(oldModal);
+        if (removeIndex >= 0) {
+          this.$store.state.modalStack.splice(removeIndex, 1);
+        }
+        removeIndex = this.$store.state.modalStack
+          .map(modal => modal.prev)
+          .indexOf(oldModal);
+        if (removeIndex >= 0) {
+          delete this.$store.state.modalStack[removeIndex].prev;
+        }
+      });
     },
     validStack (modalStack) {
       const modalsThatCanShowTwice = ['profile'];
@@ -726,10 +719,6 @@ export default {
     hideBanner () {
       this.bannerHidden = true;
     },
-    hideGiftingBanner () {
-      setLocalSetting(CONSTANTS.keyConstants.GIFTING_BANNER_DISPLAY, 'dismissed2019');
-      this.giftingHidden = true;
-    },
     resumeDamage () {
       this.$store.dispatch('user:sleep');
     },
@@ -768,5 +757,6 @@ export default {
 <style src="@/assets/css/sprites/spritesmith-main-24.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-25.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-26.css"></style>
+<style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
 <style src="@/assets/css/sprites.css"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

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

@@ -1,17 +1,11 @@
-.quest_dysheartener {
-  background: url("~@/assets/images/quest_dysheartener.gif") no-repeat;
-  width: 219px;
-  height: 219px;
-}
-
 .quest_lostMasterclasser4 {
-  background: url("~@/assets/images/quest_lostMasterclasser4.gif") no-repeat;
+  background: url("~@/assets/images/animated/quest_lostMasterclasser4.gif") no-repeat;
   width: 219px;
   height: 219px;
 }
 
 .Pet_HatchingPotion_Veggie {
-  background: url("~@/assets/images/Pet_HatchingPotion_Veggie.gif") no-repeat;
+  background: url("~@/assets/images/animated/Pet_HatchingPotion_Veggie.gif") no-repeat;
   width: 68px;
   height: 68px;
 }
@@ -51,7 +45,7 @@
 
 /* Critical */
 .weapon_special_critical {
-  background: url("~@/assets/images/weapon_special_critical.gif") no-repeat;
+  background: url("~@/assets/images/animated/weapon_special_critical.gif") no-repeat;
   width: 90px;
   height: 90px;
   margin-left:-12px;
@@ -68,32 +62,32 @@
 }
 
 .head_special_0 {
-  background: url("~@/assets/images/BackerOnly-Equip-ShadeHelmet.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-ShadeHelmet.gif") no-repeat;
 }
 .head_special_1 {
-  background: url("~@/assets/images/ContributorOnly-Equip-CrystalHelmet.gif") no-repeat;
+  background: url("~@/assets/images/animated/ContributorOnly-Equip-CrystalHelmet.gif") no-repeat;
   margin-top: 3px;
 }
 
 .broad_armor_special_0,.slim_armor_special_0 {
-  background: url("~@/assets/images/BackerOnly-Equip-ShadeArmor.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-ShadeArmor.gif") no-repeat;
 }
 .broad_armor_special_1,.slim_armor_special_1 {
-  background: url("~@/assets/images/ContributorOnly-Equip-CrystalArmor.gif") no-repeat;
+  background: url("~@/assets/images/animated/ContributorOnly-Equip-CrystalArmor.gif") no-repeat;
 }
 
 .shield_special_0 {
-  background: url("~@/assets/images/BackerOnly-Shield-TormentedSkull.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Shield-TormentedSkull.gif") no-repeat;
 }
 
 .weapon_special_0 {
-  background: url("~@/assets/images/BackerOnly-Weapon-DarkSoulsBlade.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Weapon-DarkSoulsBlade.gif") no-repeat;
 }
 
 .Pet-Wolf-Cerberus {
   width: 105px;
   height: 72px;
-  background: url("~@/assets/images/BackerOnly-Pet-CerberusPup.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Pet-CerberusPup.gif") no-repeat;
 }
 
 .broad_armor_special_ks2019, .slim_armor_special_ks2019, .eyewear_special_ks2019, .head_special_ks2019, .shield_special_ks2019 {
@@ -102,29 +96,29 @@
 }
 
 .broad_armor_special_ks2019, .slim_armor_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonArmor.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonArmor.gif") no-repeat;
 }
 
 .eyewear_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonVisor.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonVisor.gif") no-repeat;
 }
 
 .head_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonHelm.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonHelm.gif") no-repeat;
 }
 
 .shield_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonShield.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonShield.gif") no-repeat;
 }
 
 .weapon_special_ks2019 {
-  background: url("~@/assets/images/BackerOnly-Equip-MythicGryphonGlaive.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Equip-MythicGryphonGlaive.gif") no-repeat;
   width: 120px;
   height: 120px;
 }
 
 .Pet-Gryphon-Gryphatrice {
-  background: url("~@/assets/images/BackerOnly-Pet-Gryphatrice.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Pet-Gryphatrice.gif") no-repeat;
   width: 81px;
   height: 99px;
 }
@@ -135,11 +129,28 @@
 }
 
 .Mount_Head_Gryphon-Gryphatrice {
-  background: url("~@/assets/images/BackerOnly-Mount-Head-Gryphatrice.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Mount-Head-Gryphatrice.gif") no-repeat;
 }
 
 .Mount_Body_Gryphon-Gryphatrice {
-  background: url("~@/assets/images/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
+  background: url("~@/assets/images/animated/BackerOnly-Mount-Body-Gryphatrice.gif") no-repeat;
+}
+
+.background_airship, .background_clocktower, .background_steamworks {
+  width: 141px;
+  height: 147px;
+}
+
+.background_airship {
+  background: url("~@/assets/images/animated/background_airship.gif") no-repeat;
+}
+
+.background_clocktower {
+  background: url("~@/assets/images/animated/background_clocktower.gif") no-repeat;
+}
+
+.background_steamworks {
+  background: url("~@/assets/images/animated/background_steamworks.gif") no-repeat;
 }
 
 /* FIXME figure out how to handle customize menu!!

website/client/src/assets/css/sprites/spritesmith-largeSprites-0.css

@@ -1,60 +1,60 @@
-.promo_achievement_white {
+.promo_achievement_CottonCandyPink {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -524px -444px;
+  background-position: -668px -444px;
   width: 204px;
   height: 102px;
 }
-.promo_armoire_backgrounds_201912 {
+.promo_armoire_backgrounds_202002 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -148px;
+  background-position: 0px -277px;
   width: 423px;
   height: 147px;
 }
-.promo_g1g1_2019 {
+.promo_mystery_202003 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -469px -296px;
-  width: 357px;
-  height: 144px;
-}
-.promo_mystery_201912 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -241px -444px;
+  background-position: -668px -148px;
   width: 282px;
   height: 147px;
 }
 .promo_take_this {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -729px -444px;
+  background-position: -873px -444px;
   width: 96px;
   height: 69px;
 }
-.promo_winter_potions_2020 {
+.promo_valentines_2020 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -296px;
-  width: 423px;
+  background-position: -668px 0px;
+  width: 309px;
   height: 147px;
 }
-.promo_winter_quests_bundle {
+.promo_valentines_potions {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -469px 0px;
-  width: 423px;
+  background-position: 0px -425px;
+  width: 420px;
   height: 147px;
 }
-.promo_winter_wonderland_2019 {
+.scene_cake {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -469px -148px;
-  width: 402px;
-  height: 147px;
+  background-position: -424px -277px;
+  width: 204px;
+  height: 102px;
 }
-.promo_winter_wonderland_2020 {
+.scene_dailies {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px 0px;
-  width: 468px;
+  width: 327px;
+  height: 276px;
+}
+.scene_gaining_achievement {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -328px 0px;
+  width: 339px;
+  height: 210px;
+}
+.scene_shanaqui {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -668px -296px;
+  width: 282px;
   height: 147px;
 }
-.scene_todos {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -444px;
-  width: 240px;
-  height: 195px;
-}

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

@@ -0,0 +1,444 @@
+.Pet-Wolf-Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -69px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -276px -638px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -207px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -276px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -345px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -414px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -483px -500px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -574px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -69px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -138px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -207px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -276px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -345px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -414px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -483px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -552px -569px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -643px -552px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -638px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -69px -638px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -138px -638px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -207px -638px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -138px -500px;
+  width: 68px;
+  height: 68px;
+}