4.132.0

- Fix wrong level field
- Check if tier is 800 everywhere

.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/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);
       }
     });

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.0",
+  "version": "4.132.0",
   "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.3",
+    "@babel/preset-env": "^7.8.3",
+    "@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",
+    "aws-sdk": "^2.610.0",
     "bcrypt": "^3.0.7",
     "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",
@@ -46,7 +46,7 @@
     "method-override": "^3.0.0",
     "moment": "^2.24.0",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.8.1",
+    "mongoose": "^5.8.9",
     "morgan": "^1.7.0",
     "nconf": "^0.10.0",
     "node-gcm": "^1.0.2",
@@ -62,16 +62,16 @@
     "remove-markdown": "^0.3.0",
     "rimraf": "^3.0.0",
     "short-uuid": "^3.0.0",
-    "stripe": "^7.14.0",
-    "superagent": "^5.1.2",
+    "stripe": "^7.15.0",
+    "superagent": "^5.2.1",
     "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.4.0",
     "sinon-stub-promise": "^4.0.0"
   },
   "optionalDependencies": {}

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/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_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/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.1.2",
+    "@vue/cli-plugin-eslint": "^4.1.2",
+    "@vue/cli-plugin-router": "^4.1.2",
+    "@vue/cli-plugin-unit-mocha": "^4.1.2",
+    "@vue/cli-service": "^4.1.2",
+    "@storybook/addon-actions": "^5.3.9",
+    "@storybook/addon-knobs": "^5.3.9",
+    "@storybook/addon-links": "^5.3.9",
+    "@storybook/addon-notes": "^5.3.9",
+    "@storybook/vue": "^5.3.9",
     "@vue/test-utils": "1.0.0-beta.29",
     "amplitude-js": "^5.8.0",
-    "axios": "^0.19.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.3.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.1.2",
     "habitica-markdown": "^1.3.2",
-    "hellojs": "^1.18.1",
-    "inspectpack": "^4.2.2",
+    "hellojs": "^1.18.4",
+    "inspectpack": "^4.3.1",
     "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-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.5"
   }
 }

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

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,24 @@
-.promo_achievement_white {
+.promo_armoire_backgrounds_202002 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -524px -444px;
-  width: 204px;
-  height: 102px;
-}
-.promo_armoire_backgrounds_201912 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -148px;
+  background-position: -328px 0px;
   width: 423px;
   height: 147px;
 }
-.promo_g1g1_2019 {
+.promo_mystery_022020 {
   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: 0px -277px;
   width: 282px;
   height: 147px;
 }
 .promo_take_this {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -729px -444px;
+  background-position: -328px -148px;
   width: 96px;
   height: 69px;
 }
-.promo_winter_potions_2020 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -296px;
-  width: 423px;
-  height: 147px;
-}
-.promo_winter_quests_bundle {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -469px 0px;
-  width: 423px;
-  height: 147px;
-}
-.promo_winter_wonderland_2019 {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -469px -148px;
-  width: 402px;
-  height: 147px;
-}
-.promo_winter_wonderland_2020 {
+.scene_dailies {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px 0px;
-  width: 468px;
-  height: 147px;
-}
-.scene_todos {
-  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -444px;
-  width: 240px;
-  height: 195px;
+  width: 327px;
+  height: 276px;
 }

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

@@ -562,631 +562,631 @@
   width: 141px;
   height: 147px;
 }
-.background_blacksmithy {
+.background_birthday_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -444px;
   width: 141px;
   height: 147px;
 }
-.background_blizzard {
+.background_blacksmithy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -592px;
   width: 141px;
   height: 147px;
 }
-.background_blossoming_desert {
+.background_blizzard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -740px;
   width: 141px;
   height: 147px;
 }
-.background_blue {
+.background_blossoming_desert {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
-.background_bridge {
+.background_blue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_bug_covered_log {
+.background_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
-.background_buried_treasure {
+.background_bug_covered_log {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_champions_colosseum {
+.background_buried_treasure {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_cherry_trees {
+.background_champions_colosseum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_chessboard_land {
+.background_cherry_trees {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_clouds {
+.background_chessboard_land {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_coral_reef {
+.background_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_cornfields {
+.background_coral_reef {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_cozy_barn {
+.background_cornfields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_cozy_bedroom {
+.background_cozy_barn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_cozy_library {
+.background_cozy_bedroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_creepy_castle {
+.background_cozy_library {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_crosscountry_ski_trail {
+.background_creepy_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
-.background_crystal_cave {
+.background_crosscountry_ski_trail {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
-.background_dark_deep {
+.background_crystal_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
-.background_deep_mine {
+.background_dark_deep {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
-.background_deep_sea {
+.background_deep_mine {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
-.background_desert_dunes {
+.background_deep_sea {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
-.background_dilatory_castle {
+.background_desert_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
-.background_dilatory_city {
+.background_desert_with_snow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_dilatory_ruins {
+.background_dilatory_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_distant_castle {
+.background_dilatory_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_dojo {
+.background_dilatory_ruins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_drifting_raft {
+.background_distant_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_driving_a_coach {
+.background_dojo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_driving_a_sleigh {
+.background_drifting_raft {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_duck_pond {
+.background_driving_a_coach {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_dungeon {
+.background_driving_a_sleigh {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_dusty_canyons {
+.background_duck_pond {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_elegant_balcony {
+.background_dungeon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_fairy_ring {
+.background_dusty_canyons {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_fantastical_shoe_store {
+.background_elegant_balcony {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_farmers_market {
+.background_elegant_ballroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_farmhouse {
+.background_fairy_ring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_fiber_arts_room {
+.background_fantastical_shoe_store {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_field_with_colored_eggs {
+.background_farmers_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_floating_islands {
+.background_farmhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
-.background_floral_meadow {
+.background_fiber_arts_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_flower_market {
+.background_field_with_colored_eggs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.customize-option.background_flower_market {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1161px -607px;
-  width: 60px;
-  height: 60px;
-}
-.background_flying_in_a_thunderstorm {
+.background_floating_islands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_a_field_of_wildflowers {
+.background_floral_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.customize-option.background_flying_over_a_field_of_wildflowers {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1161px -311px;
-  width: 60px;
-  height: 60px;
-}
-.background_flying_over_an_ancient_forest {
+.background_flower_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_icy_steppes {
+.customize-option.background_flower_market {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1161px -163px;
+  width: 60px;
+  height: 60px;
+}
+.background_flying_in_a_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_rocky_canyon {
+.background_flying_over_a_field_of_wildflowers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_snowy_mountains {
+.customize-option.background_flying_over_a_field_of_wildflowers {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1019px -903px;
+  width: 60px;
+  height: 60px;
+}
+.background_flying_over_an_ancient_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_tropical_islands {
+.background_flying_over_icy_steppes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
-.background_foggy_moor {
+.background_flying_over_rocky_canyon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
-.background_forest {
+.background_flying_over_snowy_mountains {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
-.background_frigid_peak {
+.background_flying_over_tropical_islands {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
-.background_frosty_forest {
+.background_foggy_moor {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
-.background_frozen_lake {
+.background_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
-.background_garden_shed {
+.background_frigid_peak {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
-.background_gazebo {
+.background_frosty_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
-.background_giant_birdhouse {
+.background_frozen_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
-.background_giant_book {
+.background_garden_shed {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
-.background_giant_dandelions {
+.background_gazebo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
-.background_giant_florals {
+.background_giant_birdhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
-.background_giant_seashell {
+.background_giant_book {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
-.background_giant_wave {
+.background_giant_dandelions {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
-.background_glowing_mushroom_cave {
+.background_giant_florals {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
-.background_gorgeous_greenhouse {
+.background_giant_seashell {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
-.background_grand_staircase {
+.background_giant_wave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
-.background_graveyard {
+.background_glowing_mushroom_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
-.background_green {
+.background_gorgeous_greenhouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
-.background_guardian_statues {
+.background_grand_staircase {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
-.background_gumdrop_land {
+.background_graveyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
-.background_habit_city_streets {
+.background_green {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
-.background_halflings_house {
+.background_guardian_statues {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_feast {
+.background_gumdrop_land {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_fields {
+.background_habit_city_streets {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_moon {
+.background_halflings_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
-.background_haunted_house {
+.background_hall_of_heroes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_market {
+.background_harvest_feast {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_wreath {
+.background_harvest_fields {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
-.background_ice_cave {
+.background_harvest_moon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
-.background_iceberg {
+.background_haunted_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
-.background_idyllic_cabin {
+.background_holiday_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_a_classroom {
+.background_holiday_wreath {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_ice_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_iceberg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_idyllic_cabin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_in_a_classroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_in_an_ancient_tomb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magic_beanstalk {
+.background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -296px;
   width: 141px;
   height: 147px;
 }
-.background_magical_candles {
+.background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -148px;
   width: 141px;
   height: 147px;
 }
-.background_magical_museum {
+.background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
-.background_marble_temple {
+.background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
-.background_market {
+.background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
-.background_meandering_cave {
+.background_magical_candles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
-.background_medieval_kitchen {
+.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_castle {
+.background_marble_temple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_clouds {
+.background_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_lake {
+.background_meandering_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -148px;
   width: 141px;
   height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_medieval_kitchen {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
-.background_mistiflying_circus {
+.background_midnight_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
-.background_monster_makers_workshop {
+.background_midnight_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_lake {
+.background_midnight_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px 0px;
   width: 141px;

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

@@ -0,0 +1,30 @@
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -69px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: 0px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -69px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-27.png');
+  background-position: -138px 0px;
+  width: 68px;
+  height: 68px;
+}