4.170.0

* track events on the client by default, remove unused ones

* fix lint, remove some calls to updateUser

* remove dead code from guide.js

migrations/archive/2020/20201020_pet_color_achievements.js

@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20201020_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-Golden'] > 0
+      && pets['TigerCub-Skeleton'] > 0
+      && pets['PandaCub-Skeleton'] > 0
+      && pets['LionCub-Skeleton'] > 0
+      && pets['Fox-Skeleton'] > 0
+      && pets['FlyingPig-Skeleton'] > 0
+      && pets['Dragon-Skeleton'] > 0
+      && pets['Cactus-Skeleton'] > 0
+      && pets['BearCub-Skeleton'] > 0) {
+        set['achievements.boneCollector'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-Skeleton']
+      && mounts['TigerCub-Skeleton']
+      && mounts['PandaCub-Skeleton']
+      && mounts['LionCub-Skeleton']
+      && mounts['Fox-Skeleton']
+      && mounts['FlyingPig-Skeleton']
+      && mounts['Dragon-Skeleton']
+      && mounts['Cactus-Skeleton']
+      && mounts['BearCub-Skeleton'] ) {
+        set['achievements.skeletonCrew'] = 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-10-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2020/20201029_habitoween_ladder.js

@@ -0,0 +1,84 @@
+/*
+ * Award Habitoween ladder items to participants in this month's Habitoween festivities
+ */
+/* eslint-disable no-console */
+
+const MIGRATION_NAME = '20201029_habitoween_ladder'; // Update when running in future years
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {};
+  const inc = {
+    'items.food.Candy_Skeleton': 1,
+    'items.food.Candy_Base': 1,
+    'items.food.Candy_CottonCandyBlue': 1,
+    'items.food.Candy_CottonCandyPink': 1,
+    'items.food.Candy_Shade': 1,
+    'items.food.Candy_White': 1,
+    'items.food.Candy_Golden': 1,
+    'items.food.Candy_Zombie': 1,
+    'items.food.Candy_Desert': 1,
+    'items.food.Candy_Red': 1,
+  };
+
+  set.migration = MIGRATION_NAME;
+
+  if (user && user.items && user.items.mounts && user.items.mounts['JackOLantern-Glow']) {
+    set['items.pets.JackOLantern-RoyalPurple'] = 5;
+  } else if (user && user.items && user.items.pets && user.items.pets['JackOLantern-Glow']) {
+    set['items.mounts.JackOLantern-Glow'] = true;
+  } else if (user && user.items && user.items.mounts && user.items.mounts['JackOLantern-Ghost']) {
+    set['items.pets.JackOLantern-Glow'] = 5;
+  } else if (user && user.items && user.items.pets && user.items.pets['JackOLantern-Ghost']) {
+    set['items.mounts.JackOLantern-Ghost'] = true;
+  } else if (user && user.items && user.items.mounts && user.items.mounts['JackOLantern-Base']) {
+    set['items.pets.JackOLantern-Ghost'] = 5;
+  } else if (user && user.items && user.items.pets && user.items.pets['JackOLantern-Base']) {
+    set['items.mounts.JackOLantern-Base'] = true;
+  } else {
+    set['items.pets.JackOLantern-Base'] = 5;
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+  return await User.update({_id: user._id}, {$inc: inc, $set: set}).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2020-10-01')},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2020/20201102_fix_habitoween.js

@@ -0,0 +1,58 @@
+/*
+ * Fix JackOLantern-Base for users that signed up recently
+ */
+/* eslint-disable no-console */
+
+const MIGRATION_NAME = '20201102_fix_habitoween'; // Update when running in future years
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {};
+
+  set.migration = MIGRATION_NAME;
+  set['items.pets.JackOLantern-Base'] = 5;
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+  return await User.update({_id: user._id}, {$inc: inc, $set: set}).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.created': {$gt: new Date('2020-10-26')},
+    'items.pets.JackOLantern-Base': true,
+  };
+
+  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/20201103_drop_cap_ab_tweaks.js

@@ -0,0 +1,62 @@
+/*
+ * All web users should be enrolled in the Drop Cap AB Test
+ */
+/* eslint-disable no-console */
+
+const MIGRATION_NAME = '20201103_drop_cap_ab_tweaks';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {};
+
+  set.migration = MIGRATION_NAME;
+
+  const testGroup = Math.random();
+  // Enroll 100% of users, splitting them 50/50
+  const value = testGroup <= 0.50 ? 'drop-cap-notif-enabled' : 'drop-cap-notif-disabled';
+  set['_ABtests.dropCapNotif'] = value;
+
+  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-10-10')},
+    '_ABtests.dropCapNotif': 'drop-cap-notif-not-enrolled',
+  };
+
+  const fields = {
+    _id: 1,
+    _ABtests: 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
+  }
+};

package.json

@@ -1,12 +1,12 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.165.0",
+  "version": "4.170.0",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/register": "^7.11.5",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/register": "^7.12.1",
     "@google-cloud/trace-agent": "^5.1.1",
     "@slack/client": "^4.12.0",
     "accepts": "^1.3.5",
@@ -30,7 +30,7 @@
     "express-basic-auth": "^1.1.5",
     "express-validator": "^5.2.0",
     "glob": "^7.1.6",
-    "got": "^11.7.0",
+    "got": "^11.8.0",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-imagemin": "^7.1.0",
@@ -38,17 +38,17 @@
     "gulp.spritesmith": "^6.9.0",
     "habitica-markdown": "^3.0.0",
     "helmet": "^3.23.3",
-    "image-size": "^0.9.1",
+    "image-size": "^0.9.3",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^4.0.1",
     "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^1.10.1",
+    "jwks-rsa": "^1.11.0",
     "lodash": "^4.17.20",
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.29.1",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.10.9",
+    "mongoose": "^5.10.13",
     "morgan": "^1.10.0",
     "nconf": "^0.10.0",
     "node-gcm": "^1.0.3",
@@ -60,7 +60,7 @@
     "paypal-rest-sdk": "^1.8.1",
     "pp-ipn": "^1.1.0",
     "ps-tree": "^1.0.0",
-    "rate-limiter-flexible": "^2.1.10",
+    "rate-limiter-flexible": "^2.1.13",
     "redis": "^3.0.2",
     "regenerator-runtime": "^0.13.7",
     "remove-markdown": "^0.3.0",
@@ -109,7 +109,7 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^0.19.2",
+    "axios": "^0.21.0",
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
@@ -121,7 +121,7 @@
     "monk": "^7.3.2",
     "require-again": "^2.0.0",
     "run-rs": "^0.6.2",
-    "sinon": "^9.2.0",
+    "sinon": "^9.2.1",
     "sinon-chai": "^3.5.0",
     "sinon-stub-promise": "^4.0.0"
   },

test/api/unit/libs/stringUtils.test.js

@@ -8,5 +8,10 @@ describe('stringUtils', () => {
       const matches = getMatchesByWordArray(message, bannedWords);
       expect(matches.length).to.equal(bannedWords.length);
     });
+    it('doesn\'t flag names with accented characters', () => {
+      const name = 'TESTPLACEHOLDERSWEARWORDHEREé';
+      const matches = getMatchesByWordArray(name, bannedWords);
+      expect(matches.length).to.equal(0);
+    });
   });
 });

test/api/unit/middlewares/cronMiddleware.js

@@ -311,29 +311,12 @@ describe('cron middleware', () => {
       });
     });
 
-    it('does not enroll 80% of users', async () => {
+    it('enables the new notification for 50% of users', async () => {
       sandbox.stub(Math, 'random').returns(0.5);
       user.lastCron = moment(new Date()).subtract({ days: 2 });
       await user.save();
       req.headers['x-client'] = 'habitica-web';
 
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.equal('drop-cap-notif-not-enrolled');
-
-          return resolve();
-        });
-      });
-    });
-
-    it('enables the new notification for 10% of users', async () => {
-      sandbox.stub(Math, 'random').returns(0.1);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
       await new Promise((resolve, reject) => {
         cronMiddleware(req, res, async err => {
           if (err) return reject(err);
@@ -345,8 +328,8 @@ describe('cron middleware', () => {
       });
     });
 
-    it('disables the new notification for 10% of users', async () => {
-      sandbox.stub(Math, 'random').returns(0.2);
+    it('disables the new notification for 50% of users', async () => {
+      sandbox.stub(Math, 'random').returns(0.51);
       user.lastCron = moment(new Date()).subtract({ days: 2 });
       await user.save();
       req.headers['x-client'] = 'habitica-web';

test/api/unit/models/user.test.js

@@ -592,6 +592,50 @@ describe('User Model', () => {
   });
 
   context('pre-save hook', () => {
+    it('enrolls users that signup through web in the Drop Cap AB test', async () => {
+      let user = new User();
+      user.registeredThrough = 'habitica-web';
+      user = await user.save();
+      expect(user._ABtests.dropCapNotif).to.exist;
+    });
+
+    it('does not enroll users that signup through modal in the Drop Cap AB test', async () => {
+      let user = new User();
+      user.registeredThrough = 'habitica-ios';
+      user = await user.save();
+      expect(user._ABtests.dropCapNotif).to.not.exist;
+    });
+
+    it('marks the last news post as read for new users', async () => {
+      const lastNewsPost = { _id: '1' };
+      sandbox.stub(NewsPost, 'lastNewsPost').returns(lastNewsPost);
+
+      let user = new User();
+      expect(user.isNew).to.equal(true);
+      user = await user.save();
+
+      expect(user.checkNewStuff()).to.equal(false);
+      expect(user.toJSON().flags.newStuff).to.equal(false);
+      expect(user.flags.lastNewStuffRead).to.equal(lastNewsPost._id);
+    });
+
+    it('does not mark the last news post as read for existing users', async () => {
+      const lastNewsPost = { _id: '1' };
+      const lastNewsPostStub = sandbox.stub(NewsPost, 'lastNewsPost');
+      lastNewsPostStub.returns(lastNewsPost);
+
+      let user = new User();
+      user = await user.save();
+
+      expect(user.isNew).to.equal(false);
+      user.profile.name = 'new name';
+
+      lastNewsPostStub.returns({ _id: '2' });
+      user = await user.save();
+
+      expect(user.flags.lastNewStuffRead).to.equal(lastNewsPost._id); // not _id: 2
+    });
+
     it('does not try to award achievements when achievements or items not selected in query', async () => {
       let user = new User();
       user = await user.save(); // necessary for user.isSelected to work correctly

test/api/v3/integration/analytics/POST-analytics_track_eventName.test.js

@@ -0,0 +1,28 @@
+import {
+  generateUser,
+  requester,
+  translate as t,
+} from '../../../../helpers/api-integration/v3';
+import { mockAnalyticsService as analytics } from '../../../../../website/server/libs/analyticsService';
+
+describe('POST /analytics/track/:eventName', () => {
+  it('requires authentication', async () => {
+    await expect(requester().post('/analytics/track/event')).to.eventually.be.rejected.and.eql({
+      code: 401,
+      error: 'NotAuthorized',
+      message: t('missingAuthHeaders'),
+    });
+  });
+
+  it('calls res.analytics', async () => {
+    const user = await generateUser();
+    sandbox.spy(analytics, 'track');
+
+    const requestWithHeaders = requester(user, { 'x-client': 'habitica-web' });
+    await requestWithHeaders.post('/analytics/track/eventName', { data: 'example' }, { 'x-client': 'habitica-web' });
+    expect(analytics.track).to.be.calledOnce;
+    expect(analytics.track).to.be.calledWith('eventName', sandbox.match({ data: 'example' }));
+
+    sandbox.restore();
+  });
+});

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

@@ -103,7 +103,15 @@ describe('POST /challenges/:challengeId/winner/:winnerId', () => {
       await expect(winningUser.sync()).to.eventually.have.nested.property('achievements.challenges').to.include(challenge.name);
       // 2 because winningUser just joined the challenge, which now awards an achievement
       expect(winningUser.notifications.length).to.equal(2);
-      expect(winningUser.notifications[1].type).to.equal('WON_CHALLENGE');
+
+      const notif = winningUser.notifications[1];
+      expect(notif.type).to.equal('WON_CHALLENGE');
+      expect(notif.data).to.eql({
+        id: challenge._id,
+        name: challenge.name,
+        prize: challenge.prize,
+        leader: challenge.leader,
+      });
     });
 
     it('gives winner gems as reward', async () => {

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

@@ -251,6 +251,29 @@ describe('POST /groups/:groupId/removeMember/:memberId', () => {
       expect(party.quest.members[partyMember._id]).to.not.exist;
     });
 
+    it('prevents user from being removed if they are the quest owner', async () => {
+      const petQuest = 'whale';
+      await partyMember.update({
+        [`items.quests.${petQuest}`]: 1,
+      });
+
+      await partyMember.post(`/groups/${party._id}/quests/invite/${petQuest}`);
+      await partyLeader.post(`/groups/${party._id}/quests/accept`);
+
+      await party.sync();
+
+      expect(party.quest.members[partyLeader._id]).to.be.true;
+      expect(party.quest.members[partyMember._id]).to.be.true;
+
+      await party.sync();
+
+      expect(leader.post(`/groups/${party._id}/removeMember/${partyMember._id}`))
+        .to.eventually.be.rejected.and.eql({
+          code: 401,
+          text: t('cannotRemoveQuestOwner'),
+        });
+    });
+
     it('sends email to user with rescinded invite', async () => {
       await partyLeader.post(`/groups/${party._id}/removeMember/${partyInvitedUser._id}`);
 

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

@@ -83,22 +83,6 @@ describe('POST /groups/:groupId/quests/invite/:questKey', () => {
       });
     });
 
-    it('does not issue invites if the user is of insufficient Level', async () => {
-      const LEVELED_QUEST = 'atom1';
-      const LEVELED_QUEST_REQ = questScrolls[LEVELED_QUEST].lvl;
-      const leaderUpdate = {};
-      leaderUpdate[`items.quests.${LEVELED_QUEST}`] = 1;
-      leaderUpdate['stats.lvl'] = LEVELED_QUEST_REQ - 1;
-
-      await leader.update(leaderUpdate);
-
-      await expect(leader.post(`/groups/${questingGroup._id}/quests/invite/${LEVELED_QUEST}`)).to.eventually.be.rejected.and.eql({
-        code: 401,
-        error: 'NotAuthorized',
-        message: t('questLevelTooHigh', { level: LEVELED_QUEST_REQ }),
-      });
-    });
-
     it('does not issue invites if a quest is already underway', async () => {
       const QUEST_IN_PROGRESS = 'atom1';
       const leaderUpdate = {};
@@ -212,6 +196,18 @@ describe('POST /groups/:groupId/quests/invite/:questKey', () => {
       expect(returnedGroup.chat[0]._meta).to.be.undefined;
     });
 
+    it('successfully issues a quest invitation when quest level is higher than user level', async () => {
+      const LEVELED_QUEST = 'atom1';
+      const LEVELED_QUEST_REQ = questScrolls[LEVELED_QUEST].lvl;
+      const leaderUpdate = {};
+      leaderUpdate[`items.quests.${LEVELED_QUEST}`] = 1;
+      leaderUpdate['stats.lvl'] = LEVELED_QUEST_REQ - 1;
+
+      await leader.update(leaderUpdate);
+
+      await leader.post(`/groups/${questingGroup._id}/quests/invite/${LEVELED_QUEST}`);
+    });
+
     context('sending quest activity webhooks', () => {
       before(async () => {
         await server.start();

test/api/v3/integration/tasks/POST-tasks_move_taskId_to_position.test.js

@@ -91,7 +91,9 @@ describe('POST /tasks/:taskId/move/to/:position', () => {
 
     const taskToMove = tasks[1];
     expect(taskToMove.text).to.equal('habit 2');
-    const newOrder = await user.post(`/tasks/${tasks[1]._id}/move/to/-1`);
+    await user.post(`/tasks/${tasks[1]._id}/move/to/-1`);
+    await user.sync();
+    const newOrder = user.tasksOrder.habits;
     expect(newOrder[4]).to.equal(taskToMove._id);
     expect(newOrder.length).to.equal(5);
   });

test/api/v4/user/POST-user_unequip.test.js

@@ -0,0 +1,52 @@
+import {
+  generateUser,
+} from '../../../helpers/api-integration/v4';
+import { UNEQUIP_EQUIPPED } from '../../../../website/common/script/ops/unequip';
+
+describe('POST /user/unequip', () => {
+  let user;
+
+  beforeEach(async () => {
+    user = await generateUser({
+      preferences: {
+        background: 'violet',
+      },
+      items: {
+        currentMount: 'BearCub-Base',
+        currentPet: 'BearCub-Base',
+        gear: {
+          owned: {
+            weapon_warrior_0: true,
+            weapon_warrior_1: true,
+            weapon_warrior_2: true,
+            weapon_wizard_1: true,
+            weapon_wizard_2: true,
+            shield_base_0: true,
+            shield_warrior_1: true,
+          },
+          equipped: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+          costume: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+        },
+      },
+      stats: { gp: 200 },
+    });
+  });
+
+  // More tests in common code unit tests
+
+  context('Gear', () => {
+    it('should unequip all battle gear items', async () => {
+      await user.post(`/user/unequip/${UNEQUIP_EQUIPPED}`);
+      await user.sync();
+
+      expect(user.items.gear.equipped.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.equipped.shield).to.eq('shield_base_0');
+    });
+  });
+});

test/common/ops/unequip.js

@@ -0,0 +1,100 @@
+/* eslint-disable camelcase */
+
+import {
+  generateUser,
+} from '../../helpers/common.helper';
+import {
+  UNEQUIP_ALL,
+  UNEQUIP_BACKGROUND,
+  UNEQUIP_COSTUME,
+  UNEQUIP_EQUIPPED,
+  UNEQUIP_PET_MOUNT,
+  unEquipByType,
+} from '../../../website/common/script/ops/unequip';
+
+describe('shared.ops.unequip', () => {
+  let user;
+
+  beforeEach(() => {
+    user = generateUser({
+      preferences: {
+        background: 'violet',
+      },
+      items: {
+        currentMount: 'BearCub-Base',
+        currentPet: 'BearCub-Base',
+        gear: {
+          owned: {
+            weapon_warrior_0: true,
+            weapon_warrior_1: true,
+            weapon_warrior_2: true,
+            weapon_wizard_1: true,
+            weapon_wizard_2: true,
+            shield_base_0: true,
+            shield_warrior_1: true,
+          },
+          equipped: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+          costume: {
+            weapon: 'weapon_warrior_2',
+            shield: 'shield_warrior_1',
+          },
+        },
+      },
+      stats: { gp: 200 },
+    });
+  });
+
+  context('Gear', () => {
+    it('should unequip all battle gear items', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_EQUIPPED } });
+
+      expect(user.items.gear.equipped.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.equipped.shield).to.eq('shield_base_0');
+    });
+  });
+
+  context('Costume', () => {
+    it('should unequip all costume items', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_COSTUME } });
+
+      expect(user.items.gear.costume.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.costume.shield).to.eq('shield_base_0');
+    });
+  });
+
+  context('Pet and Mount', () => {
+    it('should unequip Pet and Mount', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_PET_MOUNT } });
+
+      expect(user.items.currentMount).to.eq('');
+      expect(user.items.currentPet).to.eq('');
+    });
+  });
+
+  context('Background', () => {
+    it('should unequip Background', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_BACKGROUND } });
+
+      expect(user.preferences.background).to.eq('');
+    });
+  });
+
+  context('All Items', () => {
+    it('should unequip all Items', () => {
+      unEquipByType(user, { params: { type: UNEQUIP_ALL } });
+
+      expect(user.items.gear.equipped.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.equipped.shield).to.eq('shield_base_0');
+
+      expect(user.items.gear.costume.weapon).to.eq('weapon_base_0');
+      expect(user.items.gear.costume.shield).to.eq('shield_base_0');
+
+      expect(user.items.currentMount).to.eq('');
+      expect(user.items.currentPet).to.eq('');
+      expect(user.preferences.background).to.eq('');
+    });
+  });
+});

test/helpers/api-integration/requester.js

@@ -41,6 +41,7 @@ function _requestMaker (user, method, additionalSets = {}) {
       || route.indexOf('/amazon') === 0
       || route.indexOf('/stripe') === 0
       || route.indexOf('/qr-code') === 0
+      || route.indexOf('/analytics') === 0
     ) {
       url += `${route}`;
     } else {

website/client/config/storybook/config.js

@@ -50,4 +50,5 @@ function loadStories () {
   req.keys().forEach(filename => req(filename));
 }
 
+
 configure(loadStories, module);

website/client/package.json

@@ -18,20 +18,20 @@
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addon-notes": "^5.3.21",
     "@storybook/vue": "^5.3.19",
-    "@vue/cli-plugin-babel": "^4.5.7",
-    "@vue/cli-plugin-eslint": "^4.5.7",
-    "@vue/cli-plugin-router": "^4.5.7",
-    "@vue/cli-plugin-unit-mocha": "^4.5.7",
-    "@vue/cli-service": "^4.5.7",
+    "@vue/cli-plugin-babel": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-plugin-router": "^4.5.8",
+    "@vue/cli-plugin-unit-mocha": "^4.5.8",
+    "@vue/cli-service": "^4.5.8",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^7.2.2",
-    "axios": "^0.19.2",
+    "amplitude-js": "^7.3.2",
+    "axios": "^0.21.0",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.5.2",
-    "bootstrap-vue": "^2.17.3",
+    "bootstrap": "^4.5.3",
+    "bootstrap-vue": "^2.19.0",
     "chai": "^4.1.2",
-    "core-js": "^3.6.5",
+    "core-js": "^3.7.0",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
@@ -44,7 +44,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "nconf": "^0.10.0",
-    "sass": "^1.27.0",
+    "sass": "^1.29.0",
     "sass-loader": "^8.0.2",
     "smartbanner.js": "^1.16.0",
     "svg-inline-loader": "^0.8.2",
@@ -56,9 +56,9 @@
     "vue": "^2.6.12",
     "vue-cli-plugin-storybook": "^0.6.1",
     "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.4.6",
+    "vue-router": "^3.4.9",
     "vue-template-compiler": "^2.6.12",
-    "vuedraggable": "^2.24.1",
+    "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0",
     "webpack": "^4.44.2"
   }

website/client/src/app.vue

@@ -38,7 +38,7 @@
       <template v-else>
         <template v-if="isUserLoaded">
           <damage-paused-banner />
-          <gems-promo-banner />
+          <!-- <gems-promo-banner /> -->
           <notifications-display />
           <app-menu />
           <div
@@ -153,7 +153,7 @@ import { loadProgressBar } from 'axios-progress-bar';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
 import DamagePausedBanner from './components/header/banners/damagePaused';
-import GemsPromoBanner from './components/header/banners/gemsPromo';
+// import GemsPromoBanner from './components/header/banners/gemsPromo';
 import AppFooter from './components/appFooter';
 import notificationsDisplay from './components/notifications';
 import snackbars from './components/snackbars/notifications';
@@ -184,7 +184,7 @@ export default {
     AppHeader,
     AppFooter,
     DamagePausedBanner,
-    GemsPromoBanner,
+    // GemsPromoBanner,
     notificationsDisplay,
     snackbars,
     BuyModal,
@@ -540,5 +540,6 @@ export default {
 <style src="@/assets/css/sprites/spritesmith-main-26.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-28.css"></style>
+<style src="@/assets/css/sprites/spritesmith-main-29.css"></style>
 <style src="@/assets/css/sprites.css"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

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

@@ -1,60 +1,66 @@
 .promo_armoire_backgrounds_202010 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -452px;
+  background-position: 0px -639px;
   width: 423px;
   height: 147px;
 }
 .promo_fall_customizations {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -244px;
+  background-position: -532px 0px;
   width: 336px;
   height: 207px;
 }
 .promo_fall_festival_2019 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -532px 0px;
+  background-position: 0px -449px;
   width: 360px;
   height: 189px;
 }
 .promo_fall_festival_2020 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -532px -190px;
+  background-position: -361px -449px;
   width: 360px;
   height: 174px;
 }
 .promo_mystery_202009 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -893px 0px;
+  background-position: -869px -296px;
   width: 282px;
   height: 147px;
 }
 .promo_mystery_202010 {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -893px -148px;
+  background-position: -869px -444px;
   width: 282px;
   height: 147px;
 }
 .promo_sandy_sidekicks_bundle {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -600px;
+  background-position: -869px -148px;
   width: 420px;
   height: 147px;
 }
+.promo_skeleton_achievements {
+  background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -244px;
+  width: 366px;
+  height: 204px;
+}
 .promo_spooky_sparkles {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -452px;
+  background-position: -424px -639px;
   width: 423px;
   height: 147px;
 }
 .promo_take_this {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1035px -426px;
+  background-position: -1152px -296px;
   width: 96px;
   height: 69px;
 }
 .promo_vampire_potions {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -600px;
+  background-position: -869px 0px;
   width: 423px;
   height: 147px;
 }
@@ -66,13 +72,13 @@
 }
 .scene_squall {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -893px -426px;
+  background-position: -532px -208px;
   width: 141px;
   height: 169px;
 }
 .scene_strength {
   background-image: url('~@/assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -893px -296px;
+  background-position: -869px -592px;
   width: 192px;
   height: 129px;
 }

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

@@ -1,12 +1,12 @@
 .achievement-alien {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1671px -1480px;
+  background-position: -1568px -1628px;
   width: 24px;
   height: 26px;
 }
 .achievement-alien2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -524px -1549px;
+  background-position: -622px -1549px;
   width: 48px;
   height: 52px;
 }
@@ -24,7 +24,7 @@
 }
 .achievement-alpha2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -573px -1549px;
+  background-position: -671px -1549px;
   width: 48px;
   height: 52px;
 }
@@ -36,13 +36,13 @@
 }
 .achievement-armor2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -622px -1549px;
+  background-position: -720px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-backToBasics2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1279px -1480px;
+  background-position: -1344px -1480px;
   width: 48px;
   height: 56px;
 }
@@ -54,25 +54,31 @@
 }
 .achievement-bewilder2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -671px -1549px;
+  background-position: -769px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-birthday2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -720px -1549px;
+  background-position: -818px -1549px;
   width: 48px;
   height: 52px;
 }
+.achievement-boneCollector2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1393px -1480px;
+  width: 48px;
+  height: 56px;
+}
 .achievement-boot2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -769px -1549px;
+  background-position: -867px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-bow2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -818px -1549px;
+  background-position: -916px -1549px;
   width: 48px;
   height: 52px;
 }
@@ -84,85 +90,85 @@
 }
 .achievement-burnout2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -867px -1549px;
+  background-position: -965px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cactus2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -916px -1549px;
+  background-position: -1014px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cake2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -965px -1549px;
+  background-position: -1063px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cave2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1014px -1549px;
+  background-position: -1112px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-challenge2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1063px -1549px;
+  background-position: -1161px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-comment2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1112px -1549px;
+  background-position: -1210px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-completedTask2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1328px -1480px;
+  background-position: -1442px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-congrats2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1161px -1549px;
+  background-position: -1259px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-costumeContest2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1210px -1549px;
+  background-position: -1308px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-createdTask2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1377px -1480px;
+  background-position: -1491px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-dilatory2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1259px -1549px;
+  background-position: -1357px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-dustDevil2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1426px -1480px;
+  background-position: -1540px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-dysheartener2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1308px -1549px;
+  background-position: -1406px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-fedPet2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1475px -1480px;
+  background-position: -1589px -1480px;
   width: 48px;
   height: 56px;
 }
@@ -174,61 +180,61 @@
 }
 .achievement-friends2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1357px -1549px;
+  background-position: -1455px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-getwell2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1406px -1549px;
+  background-position: -1504px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-goodAsGold2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1524px -1480px;
+  background-position: -1638px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-goodluck2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1455px -1549px;
+  background-position: -1553px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-greeting2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1504px -1549px;
+  background-position: -1602px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-guild2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1553px -1549px;
+  background-position: -1651px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-habitBirthday2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1602px -1549px;
+  background-position: 0px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-habiticaDay2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1651px -1549px;
+  background-position: -49px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-hatchedPet2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1573px -1480px;
+  background-position: -426px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-heart2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1628px;
+  background-position: -98px -1628px;
   width: 48px;
   height: 52px;
 }
@@ -240,13 +246,13 @@
 }
 .achievement-karaoke-2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -49px -1628px;
+  background-position: -147px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-karaoke {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1671px -1507px;
+  background-position: -1593px -1628px;
   width: 24px;
   height: 26px;
 }
@@ -258,7 +264,7 @@
 }
 .achievement-lostMasterclasser2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -98px -1628px;
+  background-position: -196px -1628px;
   width: 48px;
   height: 52px;
 }
@@ -270,37 +276,37 @@
 }
 .achievement-monsterMagus2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1622px -1480px;
+  background-position: -475px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-ninja2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -147px -1628px;
+  background-position: -245px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-npc2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -196px -1628px;
+  background-position: -294px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-nye2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -245px -1628px;
+  background-position: -343px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-partyOn2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -294px -1628px;
+  background-position: -392px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-partyUp2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -343px -1628px;
+  background-position: -441px -1628px;
   width: 48px;
   height: 52px;
 }
@@ -312,25 +318,25 @@
 }
 .achievement-perfect2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -392px -1628px;
+  background-position: -490px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-primedForPainting2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -1549px;
+  background-position: -524px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-purchasedEquipment2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -475px -1549px;
+  background-position: -573px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-rat2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -441px -1628px;
+  background-position: -539px -1628px;
   width: 48px;
   height: 52px;
 }
@@ -342,70 +348,76 @@
 }
 .achievement-royally-loyal2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -490px -1628px;
+  background-position: -588px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-seafoam2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -539px -1628px;
+  background-position: -637px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-shield2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -588px -1628px;
+  background-position: -686px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-shinySeed2x {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -637px -1628px;
-  width: 48px;
-  height: 52px;
-}
-.achievement-snowball2x {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -686px -1628px;
-  width: 48px;
-  height: 52px;
-}
-.achievement-spookySparkles2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -735px -1628px;
   width: 48px;
   height: 52px;
 }
-.achievement-stoikalm2x {
+.achievement-skeletonCrew2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1214px -1480px;
+  width: 64px;
+  height: 56px;
+}
+.achievement-snowball2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -784px -1628px;
   width: 48px;
   height: 52px;
 }
-.achievement-sun2x {
+.achievement-spookySparkles2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -833px -1628px;
   width: 48px;
   height: 52px;
 }
-.achievement-sword2x {
+.achievement-stoikalm2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -882px -1628px;
   width: 48px;
   height: 52px;
 }
-.achievement-thankyou2x {
+.achievement-sun2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -931px -1628px;
   width: 48px;
   height: 52px;
 }
-.achievement-thermometer2x {
+.achievement-sword2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -980px -1628px;
   width: 48px;
   height: 52px;
 }
+.achievement-thankyou2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1029px -1628px;
+  width: 48px;
+  height: 52px;
+}
+.achievement-thermometer2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1078px -1628px;
+  width: 48px;
+  height: 52px;
+}
 .achievement-tickledPink2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: -702px -1480px;
@@ -414,61 +426,61 @@
 }
 .achievement-tree2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1029px -1628px;
+  background-position: -1127px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-triadbingo2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1078px -1628px;
+  background-position: -1176px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-healer2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1127px -1628px;
+  background-position: -1225px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-mage2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1176px -1628px;
+  background-position: -1274px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-rogue2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1225px -1628px;
+  background-position: -1323px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-warrior2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1274px -1628px;
+  background-position: -1372px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-undeadUndertaker2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1214px -1480px;
+  background-position: -1279px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-unearned2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1323px -1628px;
+  background-position: -1421px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-valentine2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1372px -1628px;
+  background-position: -1470px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-wolf2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1421px -1628px;
+  background-position: -1519px -1628px;
   width: 48px;
   height: 52px;
 }

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

@@ -0,0 +1,600 @@
+.Pet-Wolf-BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Dessert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Windup {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -164px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -246px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -328px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -410px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -492px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -574px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -656px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -656px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -656px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -656px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -656px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -656px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -69px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -138px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -207px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -276px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -345px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -414px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -483px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -552px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -621px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -69px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -138px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -207px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -276px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -345px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -414px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -483px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -552px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -621px -669px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -552px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -738px -621px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: 0px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -69px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -138px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -207px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -276px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -345px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -414px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -483px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -552px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -621px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -690px -738px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -807px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -807px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -807px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -807px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-29.png');
+  background-position: -807px -276px;
+  width: 68px;
+  height: 68px;
+}

website/client/src/assets/scss/animals.scss

@@ -19,6 +19,6 @@
   top: -16px !important;
 }
 
-.Pet.Pet-FlyingPig-Veggie {
+.Pet.Pet-FlyingPig-Veggie, .Pet.Pet-FlyingPig-Dessert {
   top: -28px !important;
 }

website/client/src/assets/scss/badge.scss

@@ -2,13 +2,15 @@
   font-size: 12px;
   font-weight: bold;
   line-height: 1.33;
-  color: $gray-200;
-  padding: 4px 8px;
+  text-align: center;
+  color: $gray-100;
+
+  padding: 0.25rem 0.5rem;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
 }
 
 .badge-pill {
-  border-radius: 100px;
+  border-radius: 12px;
 }
 
 .badge-round {
@@ -18,7 +20,7 @@
 }
 
 .badge-default {
-  background: $gray-500;
+  background: $gray-600;
   box-shadow: none;
 }
 

website/client/src/assets/scss/button.scss

@@ -5,7 +5,7 @@
   font-weight: bold;
   line-height: 1.71;
   border: 1px solid transparent;
-  padding: 0.219rem 1rem;
+  padding: 0.219rem 0.75rem;
   border-radius: 2px;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   color: $white;
@@ -22,7 +22,7 @@
     border-color: $purple-400;
   }
 
-  &:active, &.active:not(.btn-flat), &:disabled, &.disabled {
+  &:active, &.active:not(.btn-flat) {
     box-shadow: none;
   }
 
@@ -30,6 +30,13 @@
     cursor: default;
     opacity: 0.75;
   }
+
+  &.with-icon {
+    height: 2rem; // otherwise would something set the height to 33px
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 }
 
 .btn-front {
@@ -41,34 +48,49 @@
 .btn-primary {
   background: $purple-200;
   border: 1px solid transparent;
-
-  &:hover:not(:disabled):not(.disabled) {
-    background: #5d3b9c;
-    border: 1px solid transparent;
-  }
+  --icon-color: #{$purple-500};
 
   &:focus {
     background: $purple-200;
     border-color: $purple-400;
+    --icon-color: #{$white};
   }
 
   &:not(:disabled):not(.disabled) {
+    &:hover {
+      background: #5d3b9c;
+      border: 1px solid transparent;
+
+      --icon-color: #{$white};
+    }
+
+    &:active, &.active {
+      background: $purple-200;
+      border: 1px solid transparent;
+
+      --icon-color: #{$white};
+    }
+
     &:active:focus, &.active:focus {
       box-shadow: none;
       border-color: $purple-400;
     }
   }
 
-  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
-    background: $purple-200;
-    border: 1px solid transparent;
-  }
-
   &:disabled, &.disabled {
-    background: $purple-200;
+    background: $gray-700;
     border: 1px solid transparent;
     cursor: default;
-    opacity: 0.75;
+    color: $gray-50;
+
+    --icon-color: #{$gray-300};
+  }
+
+
+  &.with-icon {
+    .svg-icon.color {
+      color: var(--icon-color);
+    }
   }
 }
 
@@ -80,29 +102,27 @@
   border: 1px solid transparent;
   color: $gray-50;
 
+  --icon-color: #{$gray-200};
+
   &:focus, &:active {
     color: $gray-50;
     background: $white;
     border-color: $purple-400;
+
+    --icon-color: #{$purple-300};
   }
 
   &:not(:disabled):not(.disabled) {
-    &:active:focus,
-    &.active:focus {
+    &:active, &.active {
       color: $purple-300;
-      box-shadow: none;
-      border-color: $purple-400;
-    }
+      --icon-color: #{$purple-300};
 
-    &:active,
-    &.active {
-      color: $purple-300;
-
-      &.dropdown-toggle {
-        color: $gray-50;
+      &:focus {
+        color: $purple-300;
+        box-shadow: none;
+        border-color: $purple-400;
       }
 
-
       background: $white;
       border: 1px solid transparent;
     }
@@ -110,12 +130,10 @@
     &:hover {
       color: $purple-300;
 
-      &.dropdown-toggle {
-        color: $gray-50;
-      }
-
       background: $white !important;
       border: 1px solid transparent;
+
+      --icon-color: #{$purple-300};
     }
   }
 
@@ -125,7 +143,19 @@
     border: 1px solid transparent;
     cursor: default;
     opacity: 0.75;
+
+    --icon-color: #{$gray-300};
   }
+
+  &.with-icon {
+    .svg-icon.color {
+      color: var(--icon-color);
+    }
+  }
+}
+
+.show > .btn-secondary.dropdown-toggle:not(.btn-success):not(:disabled):not(.disabled) {
+  --icon-color: #{$purple-300};
 }
 
 .btn-danger {

website/client/src/assets/scss/categories.scss

@@ -7,6 +7,7 @@
   border-radius: 2px;
   background-color: $white;
   box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
+  z-index: 2;
 }
 
 .category-label {

website/client/src/assets/scss/dropdown.scss

@@ -1,13 +1,12 @@
 .dropdown > .btn {
-  padding: 0.25rem 0.75rem;
+  padding: 0.219rem 0.75rem;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   font-weight: normal;
-  line-height: 1.43;
 }
 
 .dropdown-toggle:hover {
-  --caret-color: #{$purple-200};
+  --caret-color: #{$purple-300};
 }
 
 .dropdown.show > .dropdown-toggle:not(.btn-success) {
@@ -16,7 +15,7 @@
   box-shadow: none;
 
   &::after {
-    --caret-color: #{$purple-200};
+    --caret-color: #{$purple-300};
   }
 }
 
@@ -25,6 +24,8 @@
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;
   vertical-align: 0;
+  margin-left: 1rem;
+  margin-bottom: 0.1rem;
 }
 
 .dropdown-menu {
@@ -54,8 +55,12 @@
 
 
   &:active, &:hover, &:focus, &.active {
-    background-color: rgba($purple-600, 0.32) !important;
-    color: $purple-200 !important;
+    background-color: inherit !important;
+    color: $purple-300 !important;
+  }
+
+  &:hover {
+    background-color: rgba($purple-600, 0.25) !important;
   }
 
   &.dropdown-inactive {
@@ -75,10 +80,17 @@
 .dropdown-label {
   font-size: 14px;
   font-weight: bold;
-  line-height: 1.43;
-  color: $gray-10;
+  line-height: 1.71;
   margin-right: 20px;
   margin-left: 20px;
+
+  height: 1.5rem;
+  font-stretch: normal;
+  font-style: normal;
+  text-align: right;
+
+  margin-top: calc(0.25rem + 1px); // Padding of the dropdown buttons + button border width
+  margin-bottom: 0.25rem;
 }
 
 .dropdown-icon-item {
@@ -118,7 +130,10 @@
   height: 32px;
 
   &:active, &:hover, &:focus, &.active {
-    background-color: rgba($purple-600, 0.25);
     color: $purple-300;
   }
+
+  &:hover {
+    background-color: rgba($purple-600, 0.25);
+  }
 }

website/client/src/assets/scss/form.scss

@@ -42,11 +42,16 @@ input, textarea, input.form-control, textarea.form-control {
   }
 
   &.input-search {
-    background-repeat: no-repeat;
-    background-position: center left 16px;
-    background-size: 16px 16px;
-    background-image: url(~@/assets/svg/for-css/search.svg);
-    padding-left: 40px;
+    height: 2rem;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+
+    font-size: 14px;
+    line-height: 1.71;
+    color: $gray-200;
+
+    padding: 0.25rem 1rem 0.25rem 0.75rem;
   }
 
   &.input-valid, &.input-invalid {
@@ -170,7 +175,7 @@ input, textarea, input.form-control, textarea.form-control {
 }
 
 .form-check {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.875rem;
   padding-left: 0px;
 }
 
@@ -182,17 +187,21 @@ $bg-disabled-control: #34303a;
   margin-bottom: .5rem;
 
   &-label {
-    padding-top: 3px;
+    padding-top: 2px;
     padding-left: 3px;
-  }
 
-  .custom-control-label::before {
-    width: 18px;
-    height: 18px;
-    background-size: 75% 75%;
-    background-color: transparent;
-    border: 2px solid $gray-200;
-    transition-property: box-shadow;
+    font-size: 14px;
+    line-height: 1.71;
+    color: $gray-50;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+      background-size: 75% 75%;
+      background-color: transparent;
+      border: 2px solid $gray-200;
+      transition-property: box-shadow;
+    }
   }
 }
 

website/client/src/assets/scss/item.scss

@@ -5,10 +5,6 @@
   margin-right: 24px;
 }
 
-.items > div:last-of-type {
-  margin-right: 0px;
-}
-
 .item-wrapper {
   position: relative;
   display: inline-block;
@@ -45,14 +41,13 @@
   position: relative;
   width: 94px;
   height: 92px;
-  border-radius: 2px;
+  border-radius: 4px;
   background: $white;
   box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24);
   border: 1px solid transparent;
   cursor: pointer;
 
   &-empty {
-    background: $gray-10;
     box-shadow: none;
     cursor: auto;
   }
@@ -85,7 +80,7 @@
   margin: 0 auto;
 }
 
-.drawer-content .item:hover {
+.drawer-content .item.item-empty:hover {
   border-color: transparent;
   box-shadow: none;
 }

website/client/src/assets/scss/markdown.scss

@@ -1,32 +1,52 @@
+@mixin h3Markdown {
+  font-family: 'Roboto Condensed', sans-serif;
+  font-size: 16px;
+  margin-bottom: 4px;
+
+  line-height: 1.25;
+  margin-top: 6px;
+  color: $gray-10;
+
+  font-weight: normal;
+}
+
+// task titles are h3 by default
+h3.markdown {
+  @include h3Markdown;
+}
+
 .markdown {
   p {
     margin-bottom: 8px;
   }
 
   h1 {
+    font-size: 24px;
+    line-height: 1.67;
     margin-bottom: 10px;
     margin-top: 14px;
-    line-height: 1.17;
   }
 
   h2 {
     margin-bottom: 6px;
     margin-top: 10px;
+    font-size: 20px;
+    line-height: 1.4;
   }
 
   h3 {
-    margin-bottom: 4px;
-    margin-top: 6px;
-    color: $gray-10;
+    @include h3Markdown;
   }
 
-  h1, h2, h3 {
+  h1, h2, h3, h4 {
     font-weight: normal;
   }
 
   h4 {
-    font-family: 'Roboto', sans-serif;
-    font-weight: bold;
+    font-family: 'Roboto Condensed', sans-serif;
+    font-size: 14px;
+    line-height: 1.43;
+    color: $gray-10;
   }
 
   a {

website/client/src/assets/scss/page.scss

@@ -20,5 +20,18 @@ body {
 }
 
 .page-header {
-  color: $purple-200;
+  color: $purple-300;
+
+  height: 2rem;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 1.33;
+}
+
+.sub-header {
+  height: 1.75rem;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 1.4;
+  color: $gray-10;
 }

website/client/src/assets/scss/typography.scss

@@ -46,7 +46,7 @@ a, a:not([href]):not([tabindex]) {
 }
 
 // Headers
-h1, h2, h3, h4, h5, h6 {
+h1, h2, h5, h6 {
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: bold;
   color: $gray-10;
@@ -64,16 +64,18 @@ h2 {
   margin-bottom: 16px;
 }
 
+h3, h4 {
+  font-weight: bold;
+  font-size: 0.875rem;
+  line-height: 1.71;
+}
+
 h3 {
-  font-size: 16px;
-  line-height: 1.5;
-  color: $gray-50;
-  margin-bottom: 4px;
+  color: $gray-10;
 }
 
 h4 {
-  font-size: 14px;
-  line-height: 1.43;
+  color: $gray-100;
 }
 
 .textCondensed {

website/client/src/assets/scss/variables.scss

@@ -2,10 +2,10 @@
 // possible values are: normal, fall, habitoween, thanksgiving, winter, nye, birthday, valentines, normal, normal
 // more to be added on future seasons
 
-$npc_market_flavor: 'fall';
-$npc_quests_flavor: 'fall';
-$npc_seasonal_flavor: 'fall';
-$npc_timetravelers_flavor: 'fall';
-$npc_tavern_flavor: 'fall';
+$npc_market_flavor: 'normal';
+$npc_quests_flavor: 'normal';
+$npc_seasonal_flavor: 'normal';
+$npc_timetravelers_flavor: 'normal';
+$npc_tavern_flavor: 'normal';
 
 $menuToolbarHeight: 56px;

website/client/src/assets/svg/equip.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#878190;" d="M12,7.9h2c0,4.1-3,7.5-7,8.1h0h0c-4-0.6-7-4-7-8.1V3l7-3v2.2
+	L2,4.3v3.6c0,2.9,2.1,5.5,5,6C9.9,13.4,12,10.9,12,7.9z M14,2V0h-2v2h-2v2h2v2h2V4h2V2H14z"/>
+</svg>

website/client/src/assets/svg/unequip.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#878190;" d="M12,7.9h2c0,4.1-3,7.5-7,8.1h0h0c-4-0.6-7-4-7-8.1V3l7-3v2.2
+	L2,4.3v3.6c0,2.9,2.1,5.5,5,6C9.9,13.4,12,10.9,12,7.9z M10,6h6V4h-6V6z"/>
+</svg>

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

@@ -225,31 +225,30 @@ export default {
     classGear (heroClass) {
       if (heroClass === 'rogue') {
         return {
-          armor: 'armor_special_fall2020Rogue',
-          head: 'head_special_fall2020Rogue',
-          shield: 'shield_special_fall2020Rogue',
-          weapon: 'weapon_special_fall2020Rogue',
+          armor: 'armor_rogue_5',
+          head: 'head_rogue_5',
+          shield: 'shield_rogue_6',
+          weapon: 'weapon_rogue_6',
         };
       } if (heroClass === 'wizard') {
         return {
-          armor: 'armor_special_fall2020Mage',
-          head: 'head_special_fall2020Mage',
-          weapon: 'weapon_special_fall2020Mage',
-          shield: 'shield_warrior_0',
+          armor: 'armor_wizard_5',
+          head: 'head_wizard_5',
+          weapon: 'weapon_wizard_6',
         };
       } if (heroClass === 'healer') {
         return {
-          armor: 'armor_special_fall2020Healer',
-          head: 'head_special_fall2020Healer',
-          shield: 'shield_special_fall2020Healer',
-          weapon: 'weapon_special_fall2020Healer',
+          armor: 'armor_healer_5',
+          head: 'head_healer_5',
+          shield: 'shield_healer_5',
+          weapon: 'weapon_healer_6',
         };
       }
       return {
-        armor: 'armor_special_fall2020Warrior',
-        head: 'head_special_fall2020Warrior',
-        shield: 'shield_special_fall2020Warrior',
-        weapon: 'weapon_special_fall2020Warrior',
+        armor: 'armor_warrior_5',
+        head: 'head_warrior_5',
+        shield: 'shield_warrior_5',
+        weapon: 'weapon_warrior_6',
       };
     },
     selectionBox (selectedClass, heroClass) {

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

@@ -3,7 +3,7 @@
     id="drop-cap-reached"
     size="md"
     :hide-header="true"
-    :hide-footer="!hasSubscription"
+    :hide-footer="hasSubscription"
   >
     <div class="text-center">
       <div
@@ -235,15 +235,15 @@ export default {
       });
     },
     toLearnMore () {
-      this.close();
-      this.$router.push('/user/settings/subscription');
-
       Analytics.track({
         hitType: 'event',
         eventCategory: 'drop-cap-reached',
         eventAction: 'click',
         eventLabel: 'Drop Cap Reached > Modal > Subscriptions',
       });
+
+      this.close();
+      this.$router.push('/user/settings/subscription');
     },
   },
 };

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

@@ -2,101 +2,186 @@
   <b-modal
     id="won-challenge"
     :title="$t('wonChallenge')"
-    size="md"
-    :hide-footer="true"
+    size="sm"
+    :hide-header="true"
   >
-    <div class="modal-body text-center">
-      <h4 v-markdown="user.achievements.challenges[user.achievements.challenges.length - 1]"></h4>
-      <div class="row">
-        <div class="col-4">
-          <div class="achievement-karaoke-2x"></div>
-        </div>
-        <div class="col-4">
-          <!-- @TODO: +generatedAvatar({sleep: false})-->
-          <avatar
-            class="avatar"
-            :member="user"
-            :avatar-only="true"
-          />
-        </div>
-        <div class="col-4">
-          <div class="achievement-karaoke-2x"></div>
-        </div>
+    <close-icon @click="close()" />
+    <div
+      class="text-center"
+    >
+      <h1
+        v-once
+        class="header purple"
+      >
+        {{ $t('wonChallenge') }}
+      </h1>
+      <div class="d-flex align-items-center justify-content-center mb-4">
+        <div
+          v-once
+          class="svg-icon sparkles sparkles-rotate"
+          v-html="icons.sparkles"
+        ></div>
+        <div class="achievement-karaoke-2x"></div>
+        <div
+          v-once
+          class="svg-icon sparkles"
+          v-html="icons.sparkles"
+        ></div>
+      </div>
+      <p
+        class="mb-4 chal-desc"
+        v-html="$t('wonChallengeDesc', {challengeName: challengeName})"
+      >
+      </p>
+    </div>
+    <div
+      v-if="notification"
+      slot="modal-footer"
+      class="pt-3 w-100"
+    >
+      <div class="d-flex align-items-center justify-content-center mb-3">
+        <div
+          v-once
+          class="svg-icon stars"
+          v-html="icons.stars"
+        ></div>
+        <strong v-once>{{ $t('yourReward') }}</strong>
+        <div
+          v-once
+          class="svg-icon stars stars-rotate"
+          v-html="icons.stars"
+        ></div>
+      </div>
+
+      <div class="d-flex align-items-center justify-content-center mb-4">
+        <div
+          v-once
+          class="svg-icon gem mr-1"
+          v-html="icons.gem"
+        ></div>
+        <strong>{{ notification.data.prize }}</strong>
       </div>
-      <p>{{ $t('congratulations') }}</p>
-      <br>
       <button
+        v-once
         class="btn btn-primary"
         @click="close()"
       >
-        {{ $t('hurray') }}
+        {{ $t('onwards') }}
       </button>
     </div>
-    <div class="modal-footer">
-      <div class="col-3">
-        <a
-          class="twitter-share-button"
-          href="https://twitter.com/intent/tweet?text=#{tweet}&via=habitica&url=#{env.BASE_URL}/social/won-challenge&count=none"
-        >{{ $t('tweet') }}</a>
-      </div>
-      <div
-        class="col-4"
-        style="margin-left:.8em"
-      >
-        <div
-          class="fb-share-button"
-          data-href="#{env.BASE_URL}/social/won-challenge"
-          data-layout="button"
-        ></div>
-      </div>
-      <div
-        class="col-4"
-        style="margin-left:.8em"
-      >
-        <a
-          class="tumblr-share-button"
-          data-href="#{env.BASE_URL}/social/won-challenge"
-          data-notes="none"
-        ></a>
-      </div>
-    </div>
   </b-modal>
 </template>
 
-<style scoped>
-  .achievement-karaoke-2x {
-    margin: 0 auto;
-    margin-top: 6em;
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  #won-challenge {
+    .modal-body {
+      padding: 0 1.5rem;
+    }
+
+    .modal-footer {
+      background: $gray-700;
+      border-top: none;
+      padding: 0 1.5rem 2rem 1.5rem;
+    }
+
+    .modal-dialog {
+      width: 20.625rem;
+      font-size: 0.875rem;
+      line-height: 1.71;
+      text-align: center;
+    }
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .purple {
+    color: $purple-300;
   }
 
-  .avatar {
-    width: 140px;
-    margin: 0 auto;
-    margin-bottom: 1.5em;
-    margin-top: 1.5em;
+  .header {
+    font-size: 1.25rem;
+    line-height: 1.4;
+    text-align: center;
+    margin-top: 2rem;
+  }
+
+  .sparkles {
+    width: 2.5rem;
+    height: 4rem;
+    margin-left: 2rem;
+
+    &.sparkles-rotate {
+      transform: rotate(180deg);
+      margin-right: 2rem;
+      margin-left: 0rem;
+    }
+  }
+
+  .stars {
+    width: 2rem;
+    height: 1.063rem;
+    margin-right: 1.25rem;
+
+    &.stars-rotate {
+      transform: rotate(180deg);
+      margin-left: 1.25rem;
+      margin-right: 0rem;
+    }
+  }
+
+  .gem {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .chal-desc ::v-deep p {
+    display: inline;
   }
 </style>
 
 <script>
+import habiticaMarkdown from 'habitica-markdown';
+import closeIcon from '@/components/shared/closeIcon';
+import sparkles from '@/assets/svg/star-group.svg';
+import gem from '@/assets/svg/gem.svg';
+import stars from '@/assets/svg/sparkles-left.svg';
 import { mapState } from '@/libs/store';
-import markdownDirective from '@/directives/markdown';
-import Avatar from '../avatar';
 
 export default {
   components: {
-    Avatar,
-  },
-  directives: {
-    markdown: markdownDirective,
+    closeIcon,
   },
   data () {
-    const tweet = this.$t('wonChallengeShare');
+    // const tweet = this.$t('wonChallengeShare');
     return {
-      tweet,
+      // tweet,
+      notification: null,
+      icons: Object.freeze({
+        sparkles,
+        gem,
+        stars,
+      }),
     };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
+    challengeName () {
+      if (!this.notification) return null;
+      return habiticaMarkdown.render(String(this.notification.data.name));
+    },
+  },
+  mounted () {
+    this.$root.$on('habitica:won-challenge', notification => {
+      this.notification = notification;
+      this.$root.$emit('bv::show::modal', 'won-challenge');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica:won-challenge');
   },
   methods: {
     close () {