4.195.0

chore(sprites): compile
feat(content): mystery items 2021/06
2026-05-20 11:39:52 -05:00 · 2021-05-30 12:32:47 -05:00 · 2021-05-30 12:32:38 -05:00 · 2021-05-30 12:32:27 -05:00 · 2021-05-25 14:38:28 -05:00 · 2021-05-25 14:38:18 -05:00
657 changed files with 49801 additions and 44891 deletions
@@ -0,0 +1,186 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: weekly
+    time: "06:00"
+    timezone: Europe/Rome
+  open-pull-requests-limit: 99
+  ignore:
+  - dependency-name: express-validator
+    versions:
+    - 6.10.0
+    - 6.10.1
+    - 6.9.2
+  - dependency-name: "@babel/core"
+    versions:
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.1
+    - 7.13.10
+    - 7.13.13
+    - 7.13.14
+    - 7.13.15
+    - 7.13.8
+  - dependency-name: redis
+    versions:
+    - 3.1.0
+  - dependency-name: stripe
+    versions:
+    - 8.134.0
+    - 8.135.0
+    - 8.137.0
+    - 8.138.0
+    - 8.140.0
+    - 8.142.0
+  - dependency-name: "@babel/register"
+    versions:
+    - 7.12.13
+    - 7.13.14
+    - 7.13.8
+  - dependency-name: mongoose
+    versions:
+    - 5.11.14
+    - 5.11.15
+    - 5.11.16
+    - 5.11.17
+    - 5.11.18
+    - 5.11.19
+    - 5.12.0
+    - 5.12.1
+    - 5.12.2
+    - 5.12.3
+  - dependency-name: jwks-rsa
+    versions:
+    - 1.12.3
+    - 2.0.1
+    - 2.0.2
+  - dependency-name: "@babel/preset-env"
+    versions:
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.10
+    - 7.13.12
+    - 7.13.8
+    - 7.13.9
+  - dependency-name: image-size
+    versions:
+    - 0.9.4
+    - 0.9.5
+    - 0.9.7
+  - dependency-name: winston-loggly-bulk
+    versions:
+    - 3.2.0
+  - dependency-name: chai
+    versions:
+    - 4.3.0
+    - 4.3.3
+  - dependency-name: mocha
+    versions:
+    - 8.2.1
+    - 8.3.0
+    - 8.3.1
+  - dependency-name: "@google-cloud/trace-agent"
+    versions:
+    - 5.1.2
+  - dependency-name: monk
+    versions:
+    - 7.3.3
+- package-ecosystem: npm
+  directory: "/website/client"
+  schedule:
+    interval: weekly
+    time: "06:00"
+    timezone: Europe/Rome
+  open-pull-requests-limit: 99
+  ignore:
+  - dependency-name: eslint-plugin-vue
+    versions:
+    - 7.5.0
+    - 7.6.0
+    - 7.7.0
+    - 7.8.0
+    - 7.9.0
+  - dependency-name: "@storybook/addon-knobs"
+    versions:
+    - 6.1.17
+    - 6.1.18
+    - 6.1.20
+    - 6.1.21
+    - 6.2.2
+    - 6.2.3
+    - 6.2.7
+  - dependency-name: "@storybook/addon-links"
+    versions:
+    - 6.1.17
+    - 6.1.18
+    - 6.1.20
+    - 6.1.21
+    - 6.2.2
+    - 6.2.3
+    - 6.2.7
+  - dependency-name: "@storybook/vue"
+    versions:
+    - 6.1.17
+    - 6.1.18
+    - 6.1.20
+    - 6.1.21
+    - 6.2.2
+    - 6.2.3
+    - 6.2.7
+  - dependency-name: "@storybook/addon-actions"
+    versions:
+    - 6.1.17
+    - 6.1.18
+    - 6.1.20
+    - 6.1.21
+    - 6.2.2
+    - 6.2.3
+    - 6.2.7
+  - dependency-name: core-js
+    versions:
+    - 3.10.0
+    - 3.10.1
+    - 3.9.0
+    - 3.9.1
+  - dependency-name: bootstrap
+    versions:
+    - 4.6.0
+  - dependency-name: y18n
+    versions:
+    - 4.0.1
+  - dependency-name: hellojs
+    versions:
+    - 1.18.8
+    - 1.19.2
+  - dependency-name: chai
+    versions:
+    - 4.3.0
+    - 4.3.3
+  - dependency-name: amplitude-js
+    versions:
+    - 7.4.2
+    - 7.4.3
+    - 7.4.4
+  - dependency-name: pug
+    versions:
+    - 3.0.2
+  - dependency-name: sass
+    versions:
+    - 1.32.6
+    - 1.32.7
+    - 1.32.8
+  - dependency-name: "@vue/test-utils"
+    versions:
+    - 1.1.2
+    - 1.1.3
+  - dependency-name: intro.js
+    versions:
+    - 3.2.1
+    - 3.3.1
+  - dependency-name: sass-loader
+    versions:
+    - 10.1.1
@@ -2,4 +2,7 @@

 This webpage includes the documentation for version 3 of the [Habitica](https://habitica.com) API.

-If you're developing a 3rd party tool that uses the Habitica API you should read the [Guidance for Comrades](https://habitica.fandom.com/wiki/Guidance_for_Comrades) and in particular the section called [Rules for Third-Party Tools](https://habitica.fandom.com/wiki/Guidance_for_Comrades#Rules_for_Third-Party_Tools) which includes suggestions on how to best use the API and the rules to follow when interacting with it. 
+If you're developing a 3rd party tool that uses the Habitica API you should read the [Guidance for Comrades](https://habitica.fandom.com/wiki/Guidance_for_Comrades) and in particular the section called [Rules for Third-Party Tools](https://habitica.fandom.com/wiki/Guidance_for_Comrades#Rules_for_Third-Party_Tools) which includes suggestions on how to best use the API and the rules to follow when interacting with it.
+
+# Attention: Sample forms are non-functional
+The sample forms were enabled [due to a change in the apidoc package](https://github.com/apidoc/apidoc/pull/915) and do not function, they will be disabled in a future release.
@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20210525_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-CottonCandyBlue'] > 0
+      && pets['TigerCub-CottonCandyBlue'] > 0
+      && pets['PandaCub-CottonCandyBlue'] > 0
+      && pets['LionCub-CottonCandyBlue'] > 0
+      && pets['Fox-CottonCandyBlue'] > 0
+      && pets['FlyingPig-CottonCandyBlue'] > 0
+      && pets['Dragon-CottonCandyBlue'] > 0
+      && pets['Cactus-CottonCandyBlue'] > 0
+      && pets['BearCub-CottonCandyBlue'] > 0) {
+        set['achievements.violetsAreBlue'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-CottonCandyBlue']
+      && mounts['TigerCub-CottonCandyBlue']
+      && mounts['PandaCub-CottonCandyBlue']
+      && mounts['LionCub-CottonCandyBlue']
+      && mounts['Fox-CottonCandyBlue']
+      && mounts['FlyingPig-CottonCandyBlue']
+      && mounts['Dragon-CottonCandyBlue']
+      && mounts['Cactus-CottonCandyBlue']
+      && mounts['BearCub-CottonCandyBlue'] ) {
+        set['achievements.wildBlueYonder'] = 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('2021-05-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
+  }
+};
@@ -3,7 +3,7 @@ import { v4 as uuid } from 'uuid';

 import { model as User } from '../../website/server/models/user';

-const MIGRATION_NAME = '20200314_pi_day';
+const MIGRATION_NAME = '20210314_pi_day';

 const progressCount = 1000;
 let count = 0;
@@ -54,7 +54,7 @@ async function updateUser (user) {
 export default async function processUsers () {
  const query = {
    migration: { $ne: MIGRATION_NAME },
-    'auth.timestamps.loggedin': { $gt: new Date('2020-02-15') },
+    'auth.timestamps.loggedin': { $gt: new Date('2021-02-15') },
  };

  const fields = {
@@ -1,26 +1,27 @@
 {
  "name": "habitica",
  "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.183.0",
+  "version": "4.195.0",
  "main": "./website/server/index.js",
  "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/register": "^7.12.10",
-    "@google-cloud/trace-agent": "^5.1.1",
-    "@parse/node-apn": "^4.0.0",
-    "@slack/webhook": "^5.0.4",
+    "@babel/core": "^7.13.16",
+    "@babel/preset-env": "^7.14.1",
+    "@babel/register": "^7.13.16",
+    "@google-cloud/trace-agent": "^5.1.3",
+    "@parse/node-apn": "^4.1.1",
+    "@slack/webhook": "^6.0.0",
    "accepts": "^1.3.5",
    "amazon-payments": "^0.2.8",
-    "amplitude": "^5.1.4",
-    "apidoc": "^0.26.0",
+    "amplitude": "^5.1.5",
+    "apidoc": "^0.27.1",
    "apple-auth": "^1.0.7",
-    "bcrypt": "^5.0.0",
+    "bcrypt": "^5.0.1",
    "body-parser": "^1.18.3",
+    "bootstrap": "^4.6.0",
    "compression": "^1.7.4",
    "cookie-session": "^1.4.0",
    "coupon-code": "^0.4.5",
-    "csv-stringify": "^5.6.1",
+    "csv-stringify": "^5.6.2",
    "cwait": "^1.1.1",
    "domain-middleware": "~0.1.0",
    "eslint": "^6.8.0",
@@ -30,51 +31,51 @@
    "express-basic-auth": "^1.1.5",
    "express-validator": "^5.2.0",
    "glob": "^7.1.6",
-    "got": "^11.8.1",
+    "got": "^11.8.2",
    "gulp": "^4.0.0",
    "gulp-babel": "^8.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-nodemon": "^2.5.0",
    "gulp.spritesmith": "^6.9.0",
    "habitica-markdown": "^3.0.0",
-    "helmet": "^4.4.1",
-    "image-size": "^0.9.3",
+    "helmet": "^4.6.0",
+    "image-size": "^1.0.0",
    "in-app-purchase": "^1.11.3",
    "js2xmlparser": "^4.0.1",
    "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^1.12.2",
-    "lodash": "^4.17.20",
+    "jwks-rsa": "^2.0.3",
+    "lodash": "^4.17.21",
    "merge-stream": "^2.0.0",
    "method-override": "^3.0.0",
    "moment": "^2.29.1",
    "moment-recur": "^1.0.7",
-    "mongoose": "^5.11.13",
+    "mongoose": "^5.12.7",
    "morgan": "^1.10.0",
-    "nconf": "^0.11.1",
-    "node-gcm": "^1.0.3",
+    "nconf": "^0.11.2",
+    "node-gcm": "^1.0.4",
    "on-headers": "^1.0.2",
    "passport": "^0.4.1",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth2": "^0.2.0",
-    "passport-google-oauth20": "1.0.0",
+    "passport-google-oauth20": "2.0.0",
    "paypal-rest-sdk": "^1.8.1",
    "pp-ipn": "^1.1.0",
    "ps-tree": "^1.0.0",
    "rate-limiter-flexible": "^2.2.1",
-    "redis": "^3.0.2",
+    "redis": "^3.1.2",
    "regenerator-runtime": "^0.13.7",
    "remove-markdown": "^0.3.0",
    "rimraf": "^3.0.2",
    "short-uuid": "^4.1.0",
-    "stripe": "^8.132.0",
+    "stripe": "^8.145.0",
    "superagent": "^6.1.0",
    "universal-analytics": "^0.4.23",
    "useragent": "^2.1.9",
    "uuid": "^8.3.2",
-    "validator": "^13.5.2",
+    "validator": "^13.6.0",
    "vinyl-buffer": "^1.0.1",
    "winston": "^3.3.3",
-    "winston-loggly-bulk": "^3.1.1",
+    "winston-loggly-bulk": "^3.2.1",
    "xml2js": "^0.4.23"
  },
  "private": true,
@@ -110,19 +111,19 @@
  },
  "devDependencies": {
    "axios": "^0.21.1",
-    "chai": "^4.1.2",
+    "chai": "^4.3.4",
    "chai-as-promised": "^7.1.1",
    "chai-moment": "^0.1.0",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
    "cross-spawn": "^7.0.3",
    "expect.js": "^0.3.1",
    "istanbul": "^1.1.0-alpha.1",
    "mocha": "^5.1.1",
-    "monk": "^7.3.2",
+    "monk": "^7.3.4",
    "require-again": "^2.0.0",
    "run-rs": "^0.7.4",
-    "sinon": "^9.2.4",
-    "sinon-chai": "^3.5.0",
+    "sinon": "^10.0.0",
+    "sinon-chai": "^3.6.0",
    "sinon-stub-promise": "^4.0.0"
  },
  "optionalDependencies": {}
@@ -11,14 +11,14 @@ describe('highlightMentions', () => {
      lean () {
        return this;
      },
-      exec () {
-        return Promise.resolve([
+      async exec () {
+        return [
          { auth: { local: { username: 'user' } }, _id: '111' },
          { auth: { local: { username: 'user2' } }, _id: '222' },
          { auth: { local: { username: 'user3' } }, _id: '333' },
          { auth: { local: { username: 'user-dash' } }, _id: '444' },
          { auth: { local: { username: 'user_underscore' } }, _id: '555' },
-        ]);
+        ];
      },
    };

@@ -168,35 +168,50 @@ describe('highlightMentions', () => {
    });
  });

-  it('github issue 12118, method crashes when square brackets are used', async () => {
-    const text = '[test]';
+  describe('issues', () => {
+    it('github issue 12118, method crashes when square brackets are used', async () => {
+      const text = '[test]';

-    const result = await highlightMentions(text);
+      const result = await highlightMentions(text);

-    expect(result[0]).to.equal(text);
+      expect(result[0]).to.equal(text);
+    });
+
+    it('github issue 12138, method crashes when regex chars are used in code block', async () => {
+      const text = '`[test]`';
+
+      const result = await highlightMentions(text);
+
+      expect(result[0]).to.equal(text);
+    });
+
+    it('github issue 12586, method crashes when empty link is used', async () => {
+      const text = '[]()';
+
+      const result = await highlightMentions(text);
+
+      expect(result[0]).to.equal(text);
+    });
+
+    it('github issue 12586, method crashes when link without title is used', async () => {
+      const text = '[](www.google.com)';
+
+      const result = await highlightMentions(text);
+
+      expect(result[0]).to.equal(text);
+    });
  });

-  it('github issue 12138, method crashes when regex chars are used in code block', async () => {
-    const text = '`[test]`';
+  describe('base url', () => {
+    it('should prefix habitica.com if it is production', async () => {
+      const OLD_NODE_ENV = process.env.NODE_ENV;
+      process.env.NODE_ENV = 'production';
+      const text = '@user';

-    const result = await highlightMentions(text);
+      const result = await highlightMentions(text);

-    expect(result[0]).to.equal(text);
-  });
-
-  it('github issue 12586, method crashes when empty link is used', async () => {
-    const text = '[]()';
-
-    const result = await highlightMentions(text);
-
-    expect(result[0]).to.equal(text);
-  });
-
-  it('github issue 12586, method crashes when link without title is used', async () => {
-    const text = '[](www.google.com)';
-
-    const result = await highlightMentions(text);
-
-    expect(result[0]).to.equal(text);
+      expect(result[0]).to.equal('[@user](https://habitica.com/profile/111)');
+      process.env.NODE_ENV = OLD_NODE_ENV;
+    });
  });
 });
@@ -1,9 +1,11 @@
 import {
  createTasks,
  getTasks,
+} from '../../../../website/server/libs/tasks';
+import {
  syncableAttrs,
  moveTask,
-} from '../../../../website/server/libs/taskManager';
+} from '../../../../website/server/libs/tasks/utils';
 import i18n from '../../../../website/common/script/i18n';
 import shared from '../../../../website/common/script';
 import {
@@ -240,6 +240,30 @@ describe('POST /groups/:groupId/quests/invite/:questKey', () => {
        expect(body.group.name).to.eql(questingGroup.name);
        expect(body.quest.key).to.eql(PET_QUEST);
      });
+
+      it('sends quest invited webhook to the inviter too', async () => {
+        const uuid = generateUUID();
+
+        await leader.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);
+      });
    });
  });
 });
@@ -28,7 +28,6 @@ describe('DELETE /tasks/:id', () => {

    it('deletes a user\'s task', async () => {
      await user.del(`/tasks/${task._id}`);
-
      await expect(user.get(`/tasks/${task._id}`)).to.eventually.be.rejected.and.eql({
        code: 404,
        error: 'NotFound',
@@ -97,7 +97,7 @@ describe('POST /tasks/unlink-all/:challengeId', () => {
    await user.del(`/challenges/${challenge._id}`);
    await user.post(`/tasks/unlink-all/${challenge._id}?keep=keep-all`);
    // Get the task for the second user
-    const [, anotherUserTask] = await anotherUser.get('/tasks/user');
+    const [anotherUserTask] = await anotherUser.get('/tasks/user');
    // Expect the second user to still have the task, but unlinked
    expect(anotherUserTask.challenge).to.eql({
      taskId: daily._id,
@@ -92,16 +92,16 @@ describe('POST /tasks/unlink-one/:taskId', () => {

  it('unlinks a task from a challenge and saves it on keep=keep', async () => {
    await user.post(`/tasks/challenge/${challenge._id}`, tasksToTest.daily);
-    let [, daily] = await user.get('/tasks/user');
+    let [daily] = await user.get('/tasks/user');
    await user.del(`/challenges/${challenge._id}`);
    await user.post(`/tasks/unlink-one/${daily._id}?keep=keep`);
-    [, daily] = await user.get('/tasks/user');
+    [daily] = await user.get('/tasks/user');
    expect(daily.challenge).to.eql({});
  });

  it('unlinks a task from a challenge and deletes it on keep=remove', async () => {
    await user.post(`/tasks/challenge/${challenge._id}`, tasksToTest.daily);
-    const [, daily] = await user.get('/tasks/user');
+    const [daily] = await user.get('/tasks/user');
    await user.del(`/challenges/${challenge._id}`);
    await user.post(`/tasks/unlink-one/${daily._id}?keep=remove`);
    const tasks = await user.get('/tasks/user');
@@ -535,24 +535,12 @@ describe('PUT /tasks/:id', () => {
      });

      expect(savedMonthly.nextDue.length).to.eql(6);
-      expect(moment(savedMonthly.nextDue[0]).toDate()).to.eql(
-        moment(date2).add(1, 'months').startOf('day').toDate(),
-      );
-      expect(moment(savedMonthly.nextDue[1]).toDate()).to.eql(
-        moment(date2).add(2, 'months').startOf('day').toDate(),
-      );
-      expect(moment(savedMonthly.nextDue[2]).toDate()).to.eql(
-        moment(date2).add(3, 'months').startOf('day').toDate(),
-      );
-      expect(moment(savedMonthly.nextDue[3]).toDate()).to.eql(
-        moment(date2).add(4, 'months').startOf('day').toDate(),
-      );
-      expect(moment(savedMonthly.nextDue[4]).toDate()).to.eql(
-        moment(date2).add(5, 'months').startOf('day').toDate(),
-      );
-      expect(moment(savedMonthly.nextDue[5]).toDate()).to.eql(
-        moment(date2).add(6, 'months').startOf('day').toDate(),
-      );
+      expect(moment(savedMonthly.nextDue[0]).isSame(moment(date2).add(1, 'months').startOf('day')));
+      expect(moment(savedMonthly.nextDue[1]).isSame(moment(date2).add(2, 'months').startOf('day')));
+      expect(moment(savedMonthly.nextDue[2]).isSame(moment(date2).add(3, 'months').startOf('day')));
+      expect(moment(savedMonthly.nextDue[3]).isSame(moment(date2).add(4, 'months').startOf('day')));
+      expect(moment(savedMonthly.nextDue[4]).isSame(moment(date2).add(5, 'months').startOf('day')));
+      expect(moment(savedMonthly.nextDue[5]).isSame(moment(date2).add(6, 'months').startOf('day')));
    });
  });

@@ -21,10 +21,6 @@ describe('GET /tasks/challenge/:challengeId', () => {
      up: false,
      down: true,
    },
-    todo: {
-      text: 'test todo',
-      type: 'todo',
-    },
    daily: {
      text: 'test daily',
      type: 'daily',
@@ -32,6 +28,10 @@ describe('GET /tasks/challenge/:challengeId', () => {
      everyX: 5,
      startDate: new Date(),
    },
+    todo: {
+      text: 'test todo',
+      type: 'todo',
+    },
    reward: {
      text: 'test reward',
      type: 'reward',
@@ -84,4 +84,35 @@ describe('GET /tasks/challenge/:challengeId', () => {
      });
    });
  });
+
+  it('maintains challenge task order', async () => {
+    const orderedTasks = {};
+    Object.entries(tasksToTest).forEach(async (taskType, taskValue) => {
+      const results = [];
+      for (let i = 0; i < 5; i += 1) {
+        results.push(user.post(`/tasks/challenge/${challenge._id}`, taskValue));
+      }
+      const taskList = await Promise.all(results);
+      await user.post(`/tasks/${taskList[0]._id}/move/to/3`);
+
+      const firstTask = taskList.unshift();
+      taskList.splice(3, 0, firstTask);
+
+      orderedTasks[taskType] = taskList;
+    });
+
+    const results = await user.get(`/tasks/challenge/${challenge._id}`);
+    const resultTasks = {};
+
+    results.forEach(result => {
+      if (!resultTasks[result.type]) {
+        resultTasks[result.type] = [];
+      }
+      resultTasks[result.type].push(result);
+    });
+
+    Object.entries(orderedTasks).forEach((taskType, taskList) => {
+      expect(resultTasks[taskType]).to.eql(taskList);
+    });
+  });
 });
@@ -17,10 +17,6 @@ describe('GET /tasks/group/:groupId', () => {
      up: false,
      down: true,
    },
-    todo: {
-      text: 'test todo',
-      type: 'todo',
-    },
    daily: {
      text: 'test daily',
      type: 'daily',
@@ -28,6 +24,10 @@ describe('GET /tasks/group/:groupId', () => {
      everyX: 5,
      startDate: new Date(),
    },
+    todo: {
+      text: 'test todo',
+      type: 'todo',
+    },
    reward: {
      text: 'test reward',
      type: 'reward',
@@ -78,4 +78,35 @@ describe('GET /tasks/group/:groupId', () => {
      });
    });
  });
+
+  it('maintains group task order', async () => {
+    const orderedTasks = {};
+    Object.entries(tasksToTest).forEach(async (taskType, taskValue) => {
+      const results = [];
+      for (let i = 0; i < 5; i += 1) {
+        results.push(user.post(`/tasks/group/${group._id}`, taskValue));
+      }
+      const taskList = await Promise.all(results);
+      await user.post(`/tasks/${taskList[0]._id}/move/to/3`);
+
+      const firstTask = taskList.unshift();
+      taskList.splice(3, 0, firstTask);
+
+      orderedTasks[taskType] = taskList;
+    });
+
+    const results = await user.get(`/tasks/group/${group._id}`);
+    const resultTasks = {};
+
+    results.forEach(result => {
+      if (!resultTasks[result.type]) {
+        resultTasks[result.type] = [];
+      }
+      resultTasks[result.type].push(result);
+    });
+
+    Object.entries(orderedTasks).forEach((taskType, taskList) => {
+      expect(resultTasks[taskType]).to.eql(taskList);
+    });
+  });
 });
@@ -91,7 +91,15 @@ describe('PUT /user', () => {
      })).to.eventually.be.rejected.and.eql({
        code: 400,
        error: 'BadRequest',
-        message: t('displaynameIssueSlur'),
+        message: t('bannedSlurUsedInProfile'),
+      });
+
+      await expect(user.put('/user', {
+        'profile.name': 'TESTPLACEHOLDERSWEARWORDHERE',
+      })).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('bannedWordUsedInProfile'),
      });

      await expect(user.put('/user', {
@@ -139,7 +139,7 @@ describe('PUT /user/auth/update-username', async () => {
      })).to.eventually.be.rejected.and.eql({
        code: 400,
        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+        message: [t('usernameIssueLength'), t('bannedSlurUsedInProfile')].join(' '),
      });
    });

@@ -149,21 +149,14 @@ describe('PUT /user/auth/update-username', async () => {
      })).to.eventually.be.rejected.and.eql({
        code: 400,
        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+        message: [t('usernameIssueLength'), t('bannedSlurUsedInProfile')].join(' '),
      });
      await expect(user.put(ENDPOINT, {
        username: 'something_TESTPLACEHOLDERSLURWORDHERE',
      })).to.eventually.be.rejected.and.eql({
        code: 400,
        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
-      });
-      await expect(user.put(ENDPOINT, {
-        username: 'somethingTESTPLACEHOLDERSLURWORDHEREotherword',
-      })).to.eventually.be.rejected.and.eql({
-        code: 400,
-        error: 'BadRequest',
-        message: [t('usernameIssueLength'), t('usernameIssueSlur')].join(' '),
+        message: [t('usernameIssueLength'), t('bannedSlurUsedInProfile')].join(' '),
      });
    });

@@ -70,6 +70,7 @@ describe('POST /user/buy/:key', () => {
  it('buys a special spell', async () => {
    const key = 'spookySparkles';
    const item = content.special[key];
+    const stub = sinon.stub(item, 'canOwn').returns(true);

    await user.update({ 'stats.gp': 250 });
    const res = await user.post(`/user/buy/${key}`);
@@ -82,6 +83,8 @@ describe('POST /user/buy/:key', () => {
    expect(res.message).to.equal(t('messageBought', {
      itemText: item.text(),
    }));
+
+    stub.restore();
  });

  it('allows for bulk purchases', async () => {
@@ -33,19 +33,22 @@ describe('POST /user/auth/verify-display-name', async () => {
    it('errors if display name is a slur', async () => {
      await expect(user.post(ENDPOINT, {
        displayName: 'TESTPLACEHOLDERSLURWORDHERE',
-      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueSlur')] });
+      })).to.eventually.eql({ isUsable: false, issues: [t('bannedSlurUsedInProfile')] });
    });

    it('errors if display name contains a slur', async () => {
      await expect(user.post(ENDPOINT, {
        displayName: 'TESTPLACEHOLDERSLURWORDHERE_otherword',
-      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength'), t('displaynameIssueSlur')] });
+      })).to.eventually.eql({
+        isUsable: false,
+        issues: [t('displaynameIssueLength'), t('bannedSlurUsedInProfile')],
+      });
      await expect(user.post(ENDPOINT, {
        displayName: 'something_TESTPLACEHOLDERSLURWORDHERE',
-      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength'), t('displaynameIssueSlur')] });
-      await expect(user.post(ENDPOINT, {
-        displayName: 'somethingTESTPLACEHOLDERSLURWORDHEREotherword',
-      })).to.eventually.eql({ isUsable: false, issues: [t('displaynameIssueLength'), t('displaynameIssueSlur')] });
+      })).to.eventually.eql({
+        isUsable: false,
+        issues: [t('displaynameIssueLength'), t('bannedSlurUsedInProfile')],
+      });
    });

    it('errors if display name has incorrect length', async () => {
@@ -51,9 +51,6 @@ describe('POST /user/auth/verify-username', async () => {
      await expect(user.post(ENDPOINT, {
        username: 'something_TESTPLACEHOLDERSLURWORDHERE',
      })).to.eventually.eql({ isUsable: false, issues: [t('usernameIssueLength'), t('usernameIssueSlur')] });
-      await expect(user.post(ENDPOINT, {
-        username: 'somethingTESTPLACEHOLDERSLURWORDHEREotherword',
-      })).to.eventually.eql({ isUsable: false, issues: [t('usernameIssueLength'), t('usernameIssueSlur')] });
    });

    it('errors if username is not allowed', async () => {
@@ -1,6 +1,5 @@
 import moment from 'moment';
 import {
-  hasActiveOnboarding,
  hasCompletedOnboarding,
  onOnboardingComplete,
  checkOnboardingStatus,
@@ -17,19 +16,6 @@ describe('onboarding', () => {
    user.auth.timestamps.created = moment('2019-12-20').toDate();
  });

-  describe('hasActiveOnboarding', () => {
-    // The value of BEGIN DATE is available in common/script/libs/onboarding
-
-    it('returns true if the account is created after BEGIN_DATE', () => {
-      expect(hasActiveOnboarding(user)).to.eql(true);
-    });
-
-    it('returns false if the account is created before BEGIN_DATE', () => {
-      user.auth.timestamps.created = moment('2019-12-01').toDate();
-      expect(hasActiveOnboarding(user)).to.eql(false);
-    });
-  });
-
  describe('hasCompletedOnboarding', () => {
    it('returns false if no achievement has been awarded', () => {
      const result = hasCompletedOnboarding(user);
@@ -3,4 +3,7 @@ module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+  ],
 };
@@ -13,53 +13,56 @@
    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
  },
  "dependencies": {
-    "@storybook/addon-actions": "^6.1.15",
-    "@storybook/addon-knobs": "^6.1.15",
-    "@storybook/addon-links": "^6.1.15",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-knobs": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
    "@storybook/addon-notes": "^5.3.21",
-    "@storybook/vue": "^6.1.15",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^4.5.11",
-    "@vue/cli-plugin-router": "^4.5.11",
-    "@vue/cli-plugin-unit-mocha": "^4.5.11",
-    "@vue/cli-service": "^4.5.11",
+    "@storybook/vue": "^6.2.9",
+    "@vue/cli-plugin-babel": "^4.5.12",
+    "@vue/cli-plugin-eslint": "^4.5.12",
+    "@vue/cli-plugin-router": "^4.5.12",
+    "@vue/cli-plugin-unit-mocha": "^4.5.12",
+    "@vue/cli-service": "^4.5.12",
    "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^7.4.1",
+    "amplitude-js": "^8.2.1",
    "axios": "^0.21.1",
    "axios-progress-bar": "^1.2.0",
    "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
-    "chai": "^4.1.2",
-    "core-js": "^3.8.3",
+    "chai": "^4.3.4",
+    "core-js": "^3.11.1",
    "eslint": "^6.8.0",
    "eslint-config-habitrpg": "^6.2.0",
    "eslint-plugin-mocha": "^5.3.0",
    "eslint-plugin-vue": "^6.2.2",
    "habitica-markdown": "^3.0.0",
-    "hellojs": "^1.18.6",
-    "inspectpack": "^4.6.1",
-    "intro.js": "^2.9.3",
-    "jquery": "^3.5.1",
-    "lodash": "^4.17.20",
+    "hellojs": "^1.19.3",
+    "inspectpack": "^4.7.1",
+    "intro.js": "^3.4.0",
+    "jquery": "^3.6.0",
+    "lodash": "^4.17.21",
    "moment": "^2.29.1",
-    "nconf": "^0.11.1",
-    "sass": "^1.32.5",
+    "nconf": "^0.11.2",
+    "sass": "^1.32.12",
    "sass-loader": "^8.0.2",
    "smartbanner.js": "^1.16.0",
    "svg-inline-loader": "^0.8.2",
-    "svg-url-loader": "^6.0.0",
+    "svg-url-loader": "^7.1.1",
    "svgo": "^1.3.2",
    "svgo-loader": "^2.2.1",
    "uuid": "^8.3.2",
-    "validator": "^13.5.2",
+    "validator": "^13.6.0",
    "vue": "^2.6.12",
    "vue-cli-plugin-storybook": "^2.0.0",
    "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.4.9",
+    "vue-router": "^3.5.1",
    "vue-template-compiler": "^2.6.12",
    "vuedraggable": "^2.24.3",
    "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0",
    "webpack": "^4.46.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12"
  }
 }
@@ -544,6 +544,6 @@ export default {
 <style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-28.css"></style>
 <style src="@/assets/css/sprites/spritesmith-main-29.css"></style>
-<!-- <style src="@/assets/css/sprites/spritesmith-main-30.css"></style> -->
+<style src="@/assets/css/sprites/spritesmith-main-30.css"></style>
 <style src="@/assets/css/sprites.css"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>
@@ -1,396 +1,420 @@
+.npc_bailey {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1963px -444px;
+  width: 60px;
+  height: 72px;
+}
+.npc_matt {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1342px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1155px -1315px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_fall {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1351px -1315px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_habitoween {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -166px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -362px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_spring {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -558px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_summer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -754px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_thanksgiving {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -950px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_winter {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1146px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.background_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: 0px 0px;
+  width: 306px;
+  height: 202px;
+}
+.banner_flair_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1963px -517px;
+  width: 69px;
+  height: 18px;
+}
+.phobia_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1627px -1278px;
+  width: 201px;
+  height: 195px;
+}
+.quest_alligator {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1627px -862px;
+  width: 201px;
+  height: 213px;
+}
+.quest_amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -307px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_armadillo {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -527px 0px;
+  width: 219px;
+  height: 219px;
+}
+.quest_atom1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -445px -1315px;
+  width: 250px;
+  height: 150px;
+}
+.quest_atom2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -947px -1315px;
+  width: 207px;
+  height: 138px;
+}
+.quest_atom3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -967px -660px;
+  width: 216px;
+  height: 180px;
+}
+.quest_axolotl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: 0px -435px;
+  width: 219px;
+  height: 219px;
+}
+.quest_badger {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -220px -435px;
+  width: 219px;
+  height: 219px;
+}
+.quest_basilist {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1844px 0px;
+  width: 189px;
+  height: 141px;
+}
+.quest_beetle {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1627px -1076px;
+  width: 204px;
+  height: 201px;
+}
+.quest_blackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1627px 0px;
+  width: 216px;
+  height: 216px;
+}
+.quest_bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -440px -435px;
+  width: 219px;
+  height: 219px;
+}
+.quest_bunny {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1187px -880px;
+  width: 210px;
+  height: 186px;
+}
 .quest_butterfly {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px 0px;
+  background-position: -747px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_cheetah {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px 0px;
+  background-position: -747px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_cow {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1760px 0px;
+  background-position: -307px -220px;
  width: 174px;
  height: 213px;
 }
 .quest_dilatory {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -232px;
+  background-position: -220px -655px;
  width: 219px;
  height: 219px;
 }
 .quest_dilatoryDistress1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -442px -1332px;
+  background-position: -1627px -651px;
  width: 210px;
  height: 210px;
 }
 .quest_dilatoryDistress2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1935px -392px;
+  background-position: -1844px -142px;
  width: 150px;
  height: 150px;
 }
 .quest_dilatoryDistress3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -232px;
+  background-position: -440px -655px;
  width: 219px;
  height: 219px;
 }
 .quest_dilatory_derby {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -232px;
+  background-position: 0px -655px;
  width: 219px;
  height: 219px;
 }
 .quest_dolphin {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px 0px;
+  background-position: -660px -655px;
  width: 219px;
  height: 219px;
 }
 .quest_dustbunnies {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -220px;
+  background-position: -967px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_egg {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1935px -184px;
+  background-position: 0px -1529px;
  width: 165px;
  height: 207px;
 }
 .quest_evilsanta {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1935px -845px;
+  background-position: -1844px -444px;
  width: 118px;
  height: 131px;
 }
 .quest_evilsanta2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -452px;
+  background-position: -967px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_falcon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -452px;
+  background-position: -967px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_ferret {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -452px;
+  background-position: 0px -875px;
  width: 219px;
  height: 219px;
 }
 .quest_fluorite {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -452px;
+  background-position: -220px -875px;
  width: 219px;
  height: 219px;
 }
 .quest_frog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1332px;
+  background-position: 0px -1315px;
  width: 221px;
  height: 213px;
 }
 .quest_ghost_stag {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px 0px;
+  background-position: -440px -875px;
  width: 219px;
  height: 219px;
 }
 .quest_goldenknight1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -220px;
+  background-position: -660px -875px;
  width: 219px;
  height: 219px;
 }
 .quest_goldenknight2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1546px;
+  background-position: -696px -1315px;
  width: 250px;
  height: 150px;
 }
 .quest_goldenknight3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px 0px;
+  background-position: 0px -203px;
  width: 219px;
  height: 231px;
 }
 .quest_gryphon {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1096px -1332px;
+  background-position: -747px -440px;
  width: 216px;
  height: 177px;
 }
 .quest_guineapig {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -440px;
+  background-position: -880px -875px;
  width: 219px;
  height: 219px;
 }
 .quest_harpy {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -672px;
+  background-position: -1187px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_hedgehog {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -653px -1332px;
+  background-position: -1407px -1100px;
  width: 219px;
  height: 186px;
 }
 .quest_hippo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -672px;
+  background-position: -1187px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_horse {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -672px;
+  background-position: -1187px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_kangaroo {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -672px;
+  background-position: -1187px -660px;
  width: 219px;
  height: 219px;
 }
 .quest_kraken {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1313px -1332px;
+  background-position: -527px -220px;
  width: 216px;
  height: 177px;
 }
 .quest_lostMasterclasser1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -672px;
+  background-position: 0px -1095px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px 0px;
+  background-position: -220px -1095px;
  width: 219px;
  height: 219px;
 }
 .quest_lostMasterclasser3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -220px;
+  background-position: -440px -1095px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1935px -543px;
+  background-position: -1844px -293px;
  width: 150px;
  height: 150px;
 }
 .quest_mayhemMistiflying2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -440px;
+  background-position: -660px -1095px;
  width: 219px;
  height: 219px;
 }
 .quest_mayhemMistiflying3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -660px;
+  background-position: -880px -1095px;
  width: 219px;
  height: 219px;
 }
 .quest_monkey {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -892px;
+  background-position: -1100px -1095px;
  width: 219px;
  height: 219px;
 }
 .quest_moon1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -440px;
+  background-position: -1627px -217px;
  width: 216px;
  height: 216px;
 }
 .quest_moon2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -892px;
+  background-position: -1407px 0px;
  width: 219px;
  height: 219px;
 }
 .quest_moon3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -892px;
+  background-position: -1407px -220px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone1 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -892px;
+  background-position: -1407px -440px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone2 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -892px;
+  background-position: -1407px -660px;
  width: 219px;
  height: 219px;
 }
 .quest_moonstone3 {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -892px;
+  background-position: -1407px -880px;
  width: 219px;
  height: 219px;
 }
 .quest_nudibranch {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -657px;
+  background-position: -1627px -434px;
  width: 216px;
  height: 216px;
 }
 .quest_octopus {
  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -873px -1332px;
+  background-position: -222px -1315px;
  width: 222px;
  height: 177px;
 }
-.quest_owl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_peacock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -874px;
-  width: 216px;
-  height: 216px;
-}
-.quest_penguin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1935px 0px;
-  width: 190px;
-  height: 183px;
-}
-.quest_pterodactyl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rat {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_robot {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -1091px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1697px;
-  width: 213px;
-  height: 174px;
-}
-.quest_ruby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sabretooth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_seaserpent {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_silver {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -222px -1332px;
-  width: 219px;
-  height: 213px;
-}
-.quest_snake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1530px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_spider {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -251px -1546px;
-  width: 250px;
-  height: 150px;
-}
-.quest_squirrel {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1935px -694px;
-  width: 150px;
-  height: 150px;
-}
-.quest_stoikalmCalamity2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_stoikalmCalamity3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -220px;
-  width: 219px;
-  height: 219px;
-}
@@ -0,0 +1,996 @@
+.Pet-TRex-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-TRex-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Triceratops-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turkey-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turkey-Gilded {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Turtle-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Unicorn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Dessert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-MossyStone {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-PolkaDot {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -82px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -164px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -246px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -328px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -410px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -492px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StainedGlass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -574px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -656px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -738px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -820px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Windup {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -902px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -700px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -984px -800px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -69px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -138px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -207px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -276px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -345px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -414px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -483px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -552px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -621px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -690px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -759px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -828px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -897px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -966px -900px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -69px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -138px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -207px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -276px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -345px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -414px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -483px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -552px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_MossyStone {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -621px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -690px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_PolkaDot {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -759px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -828px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -897px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -966px -969px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -552px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -621px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StainedGlass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -690px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -759px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -828px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -897px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -1066px -966px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: 0px -1038px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -69px -1038px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -138px -1038px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-30.png');
+  background-position: -207px -1038px;
+  width: 68px;
+  height: 68px;
+}
@@ -213,10 +213,9 @@ export default {
    }),
    eventName () {
      if (
-        !this.currentEvent || !this.currentEvent.event
-        || this.currentEvent.season === 'normal' || this.currentEvent.season === 'valentines'
+        !this.currentEvent || !this.currentEvent.event || !this.currentEvent.gear
      ) return null;
-      return this.currentEvent.event.replace('NoPromo', '');
+      return this.currentEvent.event;
    },
  },
  methods: {
@@ -364,6 +364,10 @@ footer {
    .logo {
      color: #c3c0c7;
    }
+    @media screen and (max-width: 770px) {
+      padding-left: 1em;
+      padding-right: 1em;
+    }
  }
 }
 </style>
@@ -81,7 +81,7 @@
        <span
          v-if="member.items.currentPet"
          class="current-pet"
-          :class="'Pet-' + member.items.currentPet"
+          :class="petClass"
        ></span>
      </template>
    </div>
@@ -121,9 +121,15 @@
  .offset-kangaroo {
    margin-top: 24px;
  }
+
+  .invert {
+    filter: invert(100%);
+  }
 </style>

 <script>
+import some from 'lodash/some';
+import moment from 'moment';
 import { mapState } from '@/libs/store';

 import ClassBadge from '@/components/members/classBadge';
@@ -174,6 +180,7 @@ export default {
  computed: {
    ...mapState({
      flatGear: 'content.gear.flat',
+      currentEventList: 'worldState.data.currentEventList',
    }),
    hasClass () {
      return this.$store.getters['members:hasClass'](this.member);
@@ -233,6 +240,15 @@ export default {

      return null;
    },
+    petClass () {
+      if (some(
+        this.currentEventList,
+        event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'invert',
+      )) {
+        return `Pet-${this.member.items.currentPet} invert`;
+      }
+      return `Pet-${this.member.items.currentPet}`;
+    },
  },
  methods: {
    getGearClass (gearType) {
@@ -133,6 +133,7 @@
          :type="column"
          :task-list-override="tasksByType[column]"
          :challenge="challenge"
+          :draggable-override="isLeader || isAdmin"
          @editTask="editTask"
          @taskDestroyed="taskDestroyed"
        />
@@ -512,7 +513,7 @@ export default {
      this.creatingTask = null;
    },
    taskCreated (task) {
-      this.tasksByType[task.type].push(task);
+      this.tasksByType[task.type].unshift(task);
    },
    taskEdited (task) {
      const index = findIndex(this.tasksByType[task.type], taskItem => taskItem._id === task._id);
@@ -459,9 +459,16 @@ export default {
      };
      this.$root.$emit('bv::show::modal', 'challenge-modal');
    });
+    this.$root.$on('habitica:create-challenge', () => {
+      this.cloning = false;
+      this.$store.state.challengeOptions.workingChallenge = {};
+      this.$root.$emit('bv::show::modal', 'challenge-modal');
+    });
  },
  beforeDestroy () {
    this.$root.$off('habitica:clone-challenge');
+    this.$root.$off('habitica:update-challenge');
+    this.$root.$off('habitica:create-challenge');
  },
  methods: {
    async shown () {
@@ -193,7 +193,7 @@ export default {
      this.loadChallenges();
    },
    createChallenge () {
-      this.$root.$emit('bv::show::modal', 'challenge-modal');
+      this.$root.$emit('habitica:create-challenge');
    },
    async loadChallenges () {
      this.loading = true;
@@ -20,6 +20,7 @@
          {{ $t('challengeDetails') }}
        </p>
        <button
+          v-if="canCreateChallenges"
          class="btn btn-secondary"
          @click="createChallenge()"
        >
@@ -36,6 +37,7 @@
      />
      <div class="col-12 text-center">
        <button
+          v-if="canCreateChallenges"
          class="btn btn-secondary"
          @click="createChallenge()"
        >
@@ -86,7 +88,7 @@ export default {
  directives: {
    markdown: markdownDirective,
  },
-  props: ['groupId'],
+  props: ['group'],
  data () {
    return {
      challenges: [],
@@ -98,6 +100,12 @@ export default {
  },
  computed: {
    ...mapState({ user: 'user.data' }),
+    canCreateChallenges () {
+      if (this.group.leaderOnly.challenges) {
+        return this.group.leader._id === this.user._id;
+      }
+      return true;
+    },
  },
  watch: {
    async groupId () {
@@ -109,12 +117,12 @@ export default {
  },
  methods: {
    async loadChallenges () {
-      this.groupIdForChallenges = this.groupId;
-      if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
+      this.groupIdForChallenges = this.group._id;
+      if (this.group._id === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
      this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', { groupId: this.groupIdForChallenges });
    },
    createChallenge () {
-      this.$root.$emit('bv::show::modal', 'challenge-modal');
+      this.$root.$emit('habitica:create-challenge');
    },
    challengeCreated (challenge) {
      if (challenge.group._id !== this.groupIdForChallenges) return;
@@ -236,8 +236,7 @@ export default {
      this.loadChallenges();
    },
    createChallenge () {
-      this.$store.state.challengeOptions.workingChallenge = {};
-      this.$root.$emit('bv::show::modal', 'challenge-modal');
+      this.$root.$emit('habitica:create-challenge');
    },
    async loadChallenges () {
      this.loading = true;
@@ -90,12 +90,12 @@ export default {
  props: ['selections', 'text', 'caretPosition', 'coords', 'chat', 'textbox'],
  data () {
    return {
-      atRegex: /(?!\b)@[\w-]*$/,
+      atRegex: /(?!\b)@([\w-]*)$/,
      currentSearch: '',
      searchActive: false,
-      searchEscaped: false,
      currentSearchPosition: 0,
      tmpSelections: [],
+      searchResults: [],
      icons: Object.freeze({
        tier1,
        tier2,
@@ -114,7 +114,7 @@ export default {
  computed: {
    autocompleteStyle () {
      function heightToUse (textBox, topCoords) {
-        const textBoxHeight = textBox['user-entry'].clientHeight;
+        const textBoxHeight = textBox.clientHeight;
        return topCoords < textBoxHeight ? topCoords + 30 : textBoxHeight + 10;
      }
      return {
@@ -128,38 +128,25 @@ export default {
        backgroundColor: 'white',
      };
    },
-    searchResults () {
-      if (!this.searchActive) return [];
-      if (!this.atRegex.exec(this.text)) return [];
-      this.currentSearch = this.atRegex.exec(this.text)[0]; // eslint-disable-line vue/no-side-effects-in-computed-properties, max-len, prefer-destructuring
-      this.currentSearch = this.currentSearch.substring(1, this.currentSearch.length); // eslint-disable-line vue/no-side-effects-in-computed-properties, max-len
-
-      const lowerCaseSearch = this.currentSearch.toLowerCase();
-      return this.tmpSelections
-        .filter(option => { // eslint-disable-line arrow-body-style
-          return option.displayName.toLowerCase().indexOf(lowerCaseSearch) !== -1
-            || (option.username
-              && option.username.toLowerCase().indexOf(lowerCaseSearch) !== -1);
-        })
-        .slice(0, 4);
-    },
-
  },
  watch: {
-    text (newText) {
-      if (!newText[newText.length - 1] || newText[newText.length - 1] === ' ') {
+    text (newText, prevText) {
+      const delCharsBool = prevText.length > newText.length;
+      const caretPosition = this.textbox.selectionEnd;
+      const lastFocusChar = delCharsBool ? prevText[caretPosition] : newText[caretPosition - 1];
+      if (
+        newText.length === 0 // Delete all
+        || /\s/.test(lastFocusChar) // End Search
+        || (lastFocusChar === '@' && delCharsBool) // Cancel Search
+      ) {
        this.searchActive = false;
-        this.searchEscaped = false;
-        return;
+        this.searchResults = [];
+      } else {
+        if (lastFocusChar === '@') this.searchActive = true;
+        if (this.searchActive) {
+          this.searchResults = this.solveSearchResults(newText.substring(0, caretPosition));
+        }
      }
-      if (newText[newText.length - 1] === '@') {
-        this.searchEscaped = false;
-      }
-      if (this.searchEscaped) return;
-
-      if (!this.atRegex.test(newText)) return;
-
-      this.searchActive = true;
    },
    chat () {
      this.resetDefaults();
@@ -170,11 +157,23 @@ export default {
    this.grabUserNames();
  },
  methods: {
+    solveSearchResults (textFocus) {
+      if (!this.searchActive) return [];
+      const regexRes = this.atRegex.exec(textFocus);
+      if (!regexRes) return [];
+      this.currentSearch = regexRes[1]; // eslint-disable-line vue/no-side-effects-in-computed-properties, max-len, prefer-destructuring
+
+      const lowerCaseSearch = this.currentSearch.toLowerCase();
+
+      return this.tmpSelections
+        .filter(option => option.displayName.toLowerCase().includes(lowerCaseSearch)
+            || (option.username && option.username.toLowerCase().includes(lowerCaseSearch)))
+        .slice(0, 4);
+    },
    resetDefaults () {
      // Mounted is not called when switching between group pages because they have the
      // the same parent component. So, reset the data
      this.searchActive = false;
-      this.searchEscaped = false;
      this.tmpSelections = [];
      this.resetSelection();
    },
@@ -218,11 +217,18 @@ export default {
      return isContributor ? this.icons[`tier${message.contributor.level}`] : null;
    },
    select (result) {
-      let newText = this.text;
+      const { text } = this;
      const targetName = `${result.username || result.displayName} `;
-      newText = newText.replace(new RegExp(`${this.currentSearch}$`), targetName);
-      this.$emit('select', newText);
+      const oldCaret = this.caretPosition;
+      let newText = text.substring(0, this.caretPosition)
+        .replace(new RegExp(`${this.currentSearch}$`), targetName);
+      const newCaret = newText.length;
+      newText += text.substring(oldCaret, text.length);
+      this.$emit('select', newText, newCaret);
      this.resetSelection();
+
+      // Made selection, shut off searching
+      this.searchActive = false;
    },
    setHover (result) {
      this.resetSelection();
@@ -263,7 +269,6 @@ export default {
    },
    cancel () {
      this.searchActive = false;
-      this.searchEscaped = true;
      this.resetSelection();
    },
  },
@@ -30,47 +30,22 @@
        {{ $t('loading') }}
      </h2>
    </div>
-    <!-- eslint-disable vue/no-use-v-if-with-v-for -->
    <div
-      v-for="msg in messages"
-      v-if="chat && canViewFlag(msg)"
+      v-for="msg in messages.filter(m => chat && canViewFlag(m))"
      :key="msg.id"
    >
-      <!-- eslint-enable vue/no-use-v-if-with-v-for -->
-      <div
-        v-if="user._id !== msg.uuid"
-        class="d-flex"
-      >
+      <div class="d-flex">
        <avatar
-          v-if="msg.userStyles
-            || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)"
+          v-if="user._id !== msg.uuid && msg.uuid !== 'system'"
          class="avatar-left"
+          :class="{ invisible: avatarUnavailable(msg) }"
          :member="msg.userStyles || cachedProfileData[msg.uuid]"
          :avatar-only="true"
-          :override-top-padding="'14px'"
          :hide-class-badge="true"
+          :override-top-padding="'14px'"
          @click.native="showMemberModal(msg.uuid)"
        />
-        <div
-          class="card"
-        >
-          <chat-card
-            :msg="msg"
-            :group-id="groupId"
-            @message-liked="messageLiked"
-            @message-removed="messageRemoved"
-            @show-member-modal="showMemberModal"
-            @chat-card-mounted="itemWasMounted"
-          />
-        </div>
-      </div>
-      <div
-        v-if="user._id === msg.uuid"
-        class="d-flex"
-      >
-        <div
-          class="card"
-        >
+        <div class="card">
          <chat-card
            :msg="msg"
            :group-id="groupId"
@@ -81,8 +56,8 @@
          />
        </div>
        <avatar
-          v-if="msg.userStyles
-            || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)"
+          v-if="user._id === msg.uuid"
+          :class="{ invisible: avatarUnavailable(msg) }"
          :member="msg.userStyles || cachedProfileData[msg.uuid]"
          :avatar-only="true"
          :hide-class-badge="true"
@@ -167,8 +142,6 @@
  .message-scroll .d-flex {
    min-width: 1px;
  }
-
-
 </style>

 <script>
@@ -301,6 +274,10 @@ export default {

      this.loading = false;
    },
+    avatarUnavailable ({ userStyles, uuid }) {
+      const { cachedProfileData } = this;
+      return (!userStyles && (!cachedProfileData[uuid] || cachedProfileData[uuid].rejected));
+    },
    displayDivider (message) {
      if (this.currentDayDividerDisplay !== moment(message.timestamp).day()) {
        this.currentDayDividerDisplay = moment(message.timestamp).day();
@@ -883,8 +883,9 @@
      }

      .backgroundFilterToggle {
-        margin-left: auto;
-        margin-right: auto;
+        display: flex;
+        flex: 1;
+        justify-content: center;
      }

      .set-title {
@@ -77,6 +77,7 @@
        :task-list-override="tasksByType[column]"
        :group="group"
        :search-text="searchText"
+        :draggable-override="canCreateTasks"
        @editTask="editTask"
        @loadGroupCompletedTodos="loadGroupCompletedTodos"
        @taskDestroyed="taskDestroyed"
@@ -295,7 +296,7 @@ export default {
    },
    taskCreated (task) {
      task.group.id = this.group._id;
-      this.tasksByType[task.type].push(task);
+      this.tasksByType[task.type].unshift(task);
    },
    taskEdited (task) {
      const index = findIndex(this.tasksByType[task.type], taskItem => taskItem._id === task._id);
@@ -117,7 +117,7 @@ export default {
        TOP: 0,
        LEFT: 0,
      },
-      textbox: this.$refs,
+      textbox: null,
      MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
    };
  },
@@ -130,6 +130,9 @@ export default {
      return this.user.flags.communityGuidelinesAccepted;
    },
  },
+  mounted () {
+    this.textbox = this.$refs['user-entry'];
+  },
  methods: {
    // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
    getCoord (e, text) {
@@ -249,8 +252,13 @@ export default {
      }
    },

-    selectedAutocomplete (newText) {
+    selectedAutocomplete (newText, newCaret) {
      this.newMessage = newText;
+      // Wait for v-modal to update
+      this.$nextTick(() => {
+        this.textbox.setSelectionRange(newCaret, newCaret);
+        this.textbox.focus();
+      });
    },

    fetchRecentMessages () {
--- a/Show More
+++ b/Show More