4.195.0

_Originally posted by @citrusella in https://github.com/HabitRPG/habitica/issues/9470#issuecomment-842279146_

.github/dependabot.yml

@@ -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

apidoc/header.md

@@ -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.

migrations/archive/2021/20210525_pet_color_achievements.js

@@ -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
+  }
+};

package.json

@@ -1,27 +1,27 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.191.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",
@@ -31,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,
@@ -111,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": {}

test/api/unit/libs/highlightMentions.test.js

@@ -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;
+    });
   });
 });

test/api/unit/libs/taskManager.js

@@ -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 {

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

@@ -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);
+      });
     });
   });
 });

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

@@ -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',

test/api/v3/integration/tasks/POST-tasks_unlink-all_challengeId.test.js

@@ -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,

test/api/v3/integration/tasks/POST-tasks_unlink-one_taskId.test.js

@@ -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');

test/api/v3/integration/tasks/challenges/GET_tasks_challenge.id.test.js

@@ -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);
+    });
+  });
 });

test/api/v3/integration/tasks/groups/GET-tasks_group_id.test.js

@@ -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);
+    });
+  });
 });

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

@@ -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', {

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

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

test/api/v4/user/auth/POST-user_verify_display_name.test.js

@@ -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 () => {

test/api/v4/user/auth/POST-user_verify_username.test.js

@@ -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 () => {

website/client/babel.config.js

@@ -3,4 +3,7 @@ module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset',
   ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+  ],
 };

website/client/package.json

@@ -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.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"
   }
 }

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

@@ -1,510 +1,522 @@
 .achievement-alien {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1656px -1549px;
+  background-position: -1661px -1549px;
   width: 24px;
   height: 26px;
 }
 .achievement-alien2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -578px -1549px;
+  background-position: -387px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-allThatGlitters2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -934px -1480px;
+  background-position: -792px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-allYourBase2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -999px -1480px;
+  background-position: -857px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-alpha2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -627px -1549px;
+  background-position: -436px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-aridAuthority2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1064px -1480px;
+  background-position: -922px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-armor2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -676px -1549px;
+  background-position: -485px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-backToBasics2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1389px -1480px;
+  background-position: -1312px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-bareNecessities2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1480px;
+  background-position: -142px -1480px;
   width: 68px;
   height: 68px;
 }
 .achievement-bewilder2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -725px -1549px;
+  background-position: -534px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-birthday2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -774px -1549px;
+  background-position: -583px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-boneCollector2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1438px -1480px;
+  background-position: -1361px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-boot2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -823px -1549px;
+  background-position: -632px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-bow2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -872px -1549px;
+  background-position: -681px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-bugBonanza2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -629px -1480px;
+  background-position: -487px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-burnout2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -921px -1549px;
+  background-position: -730px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cactus2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -970px -1549px;
+  background-position: -779px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cake2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1019px -1549px;
+  background-position: -828px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cave2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1068px -1549px;
+  background-position: -877px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-challenge2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1117px -1549px;
+  background-position: -926px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-comment2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1166px -1549px;
+  background-position: -975px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-completedTask2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1487px -1480px;
+  background-position: -1410px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-congrats2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1215px -1549px;
+  background-position: -1024px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-costumeContest2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1264px -1549px;
+  background-position: -1073px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-createdTask2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1536px -1480px;
+  background-position: -1459px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-dilatory2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1313px -1549px;
+  background-position: -1122px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-dustDevil2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1585px -1480px;
+  background-position: -1508px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-dysheartener2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1362px -1549px;
+  background-position: -1171px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-fedPet2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1634px -1480px;
+  background-position: -1557px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-freshwaterFriends2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -353px -1480px;
+  background-position: -211px -1480px;
   width: 68px;
   height: 68px;
 }
 .achievement-friends2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1411px -1549px;
+  background-position: -1220px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-getwell2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1460px -1549px;
+  background-position: -1269px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-goodAsGold2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1549px;
+  background-position: -1606px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-goodluck2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1509px -1549px;
+  background-position: -1318px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-greeting2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1558px -1549px;
+  background-position: -1367px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-guild2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1607px -1549px;
+  background-position: -1416px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-habitBirthday2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1628px;
+  background-position: -1465px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-habiticaDay2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -49px -1628px;
+  background-position: -1514px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-hatchedPet2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -333px -1549px;
+  background-position: -1655px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-heart2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -98px -1628px;
+  background-position: -1563px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-justAddWater2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -690px -1480px;
+  background-position: -548px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-karaoke-2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -147px -1628px;
+  background-position: -1612px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-karaoke {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1568px -1628px;
+  background-position: -1372px -1628px;
   width: 24px;
   height: 26px;
 }
 .achievement-kickstarter20192x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -422px -1480px;
+  background-position: -280px -1480px;
   width: 68px;
   height: 68px;
 }
 .achievement-legendaryBestiary2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -751px -1480px;
+  background-position: -609px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-lostMasterclasser2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -196px -1628px;
+  background-position: 0px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-mindOverMatter2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -812px -1480px;
+  background-position: -670px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-monsterMagus2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -382px -1549px;
+  background-position: -142px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-ninja2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -245px -1628px;
+  background-position: -49px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-npc2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -294px -1628px;
+  background-position: -98px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-nye2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -343px -1628px;
+  background-position: -147px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-partyOn2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -392px -1628px;
+  background-position: -196px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-partyUp2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -441px -1628px;
+  background-position: -245px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-pearlyPro2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1129px -1480px;
+  background-position: -987px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-perfect2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -490px -1628px;
+  background-position: -294px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-primedForPainting2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -431px -1549px;
+  background-position: -191px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-purchasedEquipment2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -480px -1549px;
+  background-position: -240px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-rat2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -539px -1628px;
+  background-position: -343px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-redLetterDay2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1194px -1480px;
+  background-position: -1052px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-rosyOutlook2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -491px -1480px;
+  background-position: -349px -1480px;
   width: 68px;
   height: 68px;
 }
 .achievement-royally-loyal2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -588px -1628px;
+  background-position: -392px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-seafoam2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -637px -1628px;
+  background-position: -441px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-seasonalSpecialist2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -873px -1480px;
+  background-position: -731px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-seeingRed2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -529px -1549px;
+  background-position: -289px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-shield2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -686px -1628px;
+  background-position: -490px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-shinySeed2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -735px -1628px;
+  background-position: -539px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-skeletonCrew2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1259px -1480px;
+  background-position: -1117px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-snowball2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -784px -1628px;
+  background-position: -588px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-spookySparkles2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -833px -1628px;
+  background-position: -637px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-stoikalm2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -882px -1628px;
+  background-position: -686px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-sun2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -931px -1628px;
+  background-position: -735px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-sword2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -980px -1628px;
+  background-position: -784px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-thankyou2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1029px -1628px;
+  background-position: -833px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-thermometer2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1078px -1628px;
+  background-position: -882px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-tickledPink2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -560px -1480px;
+  background-position: -418px -1480px;
   width: 68px;
   height: 68px;
 }
 .achievement-tree2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1127px -1628px;
+  background-position: -931px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-triadbingo2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1176px -1628px;
+  background-position: -980px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-healer2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1225px -1628px;
+  background-position: -1029px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-mage2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1274px -1628px;
+  background-position: -1078px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-rogue2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1323px -1628px;
+  background-position: -1127px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-warrior2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1372px -1628px;
+  background-position: -1176px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-undeadUndertaker2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1324px -1480px;
+  background-position: -1182px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-unearned2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1421px -1628px;
+  background-position: -1225px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-valentine2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1470px -1628px;
+  background-position: -1274px -1628px;
   width: 48px;
   height: 52px;
 }
+.achievement-violetsAreBlue2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -338px -1549px;
+  width: 48px;
+  height: 56px;
+}
+.achievement-wildBlueYonder2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1247px -1480px;
+  width: 64px;
+  height: 56px;
+}
 .achievement-wolf2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1519px -1628px;
+  background-position: -1323px -1628px;
   width: 48px;
   height: 52px;
 }
@@ -1258,9 +1270,3 @@
   width: 141px;
   height: 147px;
 }
-.background_herding_sheep_in_autumn {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1480px;
-  width: 141px;
-  height: 147px;
-}

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

@@ -1,846 +1,828 @@
-.background_holiday_hearth {
+.background_herding_sheep_in_autumn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_market {
+.background_holiday_hearth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px 0px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_wreath {
+.background_holiday_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
-.background_hot_air_balloon {
+.background_holiday_wreath {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
-.background_hot_spring {
+.background_hot_air_balloon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
-.background_ice_cave {
+.background_hot_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -148px;
   width: 141px;
   height: 147px;
 }
-.background_iceberg {
+.background_ice_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
-.background_icicle_bridge {
+.background_iceberg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
-.background_idyllic_cabin {
+.background_icicle_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_a_classroom {
+.background_idyllic_cabin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_in_a_classroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_the_armory {
+.background_in_an_ancient_tomb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
-.background_inside_an_ornament {
+.background_in_the_armory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_inside_an_ornament {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -148px;
   width: 141px;
   height: 147px;
 }
-.background_jungle_canopy {
+.background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -296px;
   width: 141px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_jungle_canopy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magic_beanstalk {
+.background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magical_candles {
+.background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
-.background_magical_museum {
+.background_magical_candles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
-.background_marble_temple {
+.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
-.background_market {
+.background_marble_temple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
-.background_meandering_cave {
+.background_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
-.background_medieval_kitchen {
+.background_meandering_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_castle {
+.background_medieval_kitchen {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_clouds {
+.background_midnight_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_lake {
+.background_midnight_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_midnight_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
-.background_mistiflying_circus {
+.background_mist_shrouded_mountain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
-.background_monster_makers_workshop {
+.background_mistiflying_circus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_lake {
+.background_monster_makers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_pyramid {
+.background_mountain_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
-.background_mystical_observatory {
+.background_mountain_pyramid {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
-.background_night_dunes {
+.background_mystical_observatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
-.background_ocean_sunrise {
+.background_night_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_ocean_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
-.background_on_tree_branch {
+.background_old_fashioned_bakery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
-.background_open_waters {
+.background_on_tree_branch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
-.background_orchard {
+.background_open_waters {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
-.background_pagodas {
+.background_orchard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
-.background_park_with_statue {
+.background_pagodas {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
-.background_pirate_flag {
+.background_park_with_statue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
-.background_pixelists_workshop {
+.background_pirate_flag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
-.background_potion_shop {
+.background_pixelists_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
-.background_productivity_plaza {
+.background_potion_shop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_carriage {
+.background_productivity_plaza {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_patch {
+.background_pumpkin_carriage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
-.background_purple {
+.background_pumpkin_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pyramids {
+.background_purple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainbow_meadow {
+.background_pyramids {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainbows_end {
+.background_rainbow_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainforest {
+.background_rainbows_end {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_barnyard {
+.background_rainforest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_city {
+.background_rainy_barnyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.background_red {
+.background_rainy_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_relaxation_river {
+.background_red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_resting_in_the_inn {
+.background_relaxation_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.background_river_of_lava {
+.background_resting_in_the_inn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
-.background_rolling_hills {
+.background_river_of_lava {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.background_rose_garden {
+.background_rolling_hills {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_rowboat {
+.background_rose_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
-.background_salt_lake {
+.background_rowboat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_sandcastle {
+.background_salt_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_school_of_fish {
+.background_sandcastle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_scribes_workshop {
+.background_school_of_fish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_seafarer_ship {
+.background_scribes_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_seaside_cliffs {
+.background_seafarer_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_seaside_cliffs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_shimmery_bubbles {
+.background_shimmering_ice_prism {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_slimy_swamp {
+.background_shimmery_bubbles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_snowglobe {
+.background_slimy_swamp {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px 0px;
   width: 141px;
   height: 147px;
 }
-.background_snowman_army {
+.background_snowglobe {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -148px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_snowman_army {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -296px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_pines {
+.background_snowy_day_fireplace {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -444px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_sunrise {
+.background_snowy_pines {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -592px;
   width: 141px;
   height: 147px;
 }
-.background_south_pole {
+.background_snowy_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -740px;
   width: 141px;
   height: 147px;
 }
-.background_sparkling_snowflake {
+.background_south_pole {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -888px;
   width: 141px;
   height: 147px;
 }
-.background_spider_web {
+.background_sparkling_snowflake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_spider_web {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_hotel {
+.background_splash_in_a_puddle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_spooky_hotel {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spring_rain {
+.background_spooky_scarecrow_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spring_thaw {
+.background_spring_rain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stable {
+.background_spring_thaw {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stained_glass {
+.background_stable {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_starry_skies {
+.background_stained_glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_starry_winter_night {
+.background_starry_skies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_starry_winter_night {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stone_circle {
+.background_stoikalm_volcanoes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px 0px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_rooftops {
+.background_stone_circle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -148px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_ship {
+.background_stormy_rooftops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -296px;
   width: 141px;
   height: 147px;
 }
-.background_strange_sewers {
+.background_stormy_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -444px;
   width: 141px;
   height: 147px;
 }
-.background_strawberry_patch {
+.background_strange_sewers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -592px;
   width: 141px;
   height: 147px;
 }
-.background_succulent_garden {
+.background_strawberry_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -740px;
   width: 141px;
   height: 147px;
 }
-.background_summer_fireworks {
+.background_succulent_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
-.background_sunken_ship {
+.background_summer_fireworks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_meadow {
+.background_sunken_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_oasis {
+.background_sunset_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_savannah {
+.background_sunset_oasis {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_swarming_darkness {
+.background_sunset_savannah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_swarming_darkness {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tar_pits {
+.background_swimming_among_jellyfish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tavern {
+.background_tar_pits {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tea_party {
+.background_tavern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_terraced_rice_field {
+.background_tea_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_throne_room {
+.background_terraced_rice_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_thunderstorm {
+.background_throne_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tide_pool {
+.background_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tornado {
+.background_tide_pool {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
-.background_toymakers_workshop {
+.background_tornado {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
-.background_training_grounds {
+.background_toymakers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
-.background_treasure_room {
+.background_training_grounds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
-.background_tree_roots {
+.background_treasure_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
-.background_treehouse {
+.background_tree_roots {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
-.background_tulip_garden {
+.background_treehouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_lights {
+.background_tulip_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_party_lights {
+.background_twinkly_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_ruins {
+.background_twinkly_party_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_vents {
+.background_underwater_ruins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_valentines_day_feasting_hall {
+.background_underwater_vents {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_viking_ship {
+.background_valentines_day_feasting_hall {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_violet {
+.background_viking_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_volcano {
+.background_violet {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_waterfall_rock {
+.background_volcano {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_wedding_arch {
+.background_waterfall_rock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_windmills {
+.background_wedding_arch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_windy_autumn {
+.background_windmills {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_fireworks {
+.background_windy_autumn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_night {
+.background_winter_fireworks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_nocturne {
+.background_winter_night {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_storefront {
+.background_winter_nocturne {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px 0px;
   width: 141px;
   height: 147px;
 }
-.background_winter_town {
+.background_winter_storefront {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -148px;
   width: 141px;
   height: 147px;
 }
-.background_wintry_castle {
+.background_winter_town {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -296px;
   width: 141px;
   height: 147px;
 }
-.background_yellow {
+.background_wintry_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -444px;
   width: 141px;
   height: 147px;
 }
-.icon_background_afternoon_picnic {
+.background_yellow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -592px;
-  width: 68px;
-  height: 68px;
+  width: 141px;
+  height: 147px;
 }
-.icon_background_airship {
+.icon_background_afternoon_picnic {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1773px -592px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_alpine_slopes {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -661px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_amid_ancient_ruins {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1773px -661px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_among_cattails {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -730px;
+  background-position: -1704px -740px;
   width: 68px;
   height: 68px;
 }

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

@@ -1,48 +1,60 @@
+.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: -1517px -1535px;
+  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: -1375px -1315px;
+  background-position: -1351px -1315px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_habitoween {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -341px -1535px;
+  background-position: -166px -1529px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_nye {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -537px -1535px;
+  background-position: -362px -1529px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -733px -1535px;
+  background-position: -558px -1529px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_summer {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -929px -1535px;
+  background-position: -754px -1529px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_thanksgiving {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1125px -1535px;
+  background-position: -950px -1529px;
   width: 195px;
   height: 138px;
 }
 .npc_matt_winter {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1321px -1535px;
+  background-position: -1146px -1529px;
   width: 195px;
   height: 138px;
 }
@@ -54,19 +66,19 @@
 }
 .banner_flair_dysheartener {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1963px -444px;
+  background-position: -1963px -517px;
   width: 69px;
   height: 18px;
 }
 .phobia_dysheartener {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1187px -880px;
+  background-position: -1627px -1278px;
   width: 201px;
   height: 195px;
 }
 .quest_alligator {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -1079px;
+  background-position: -1627px -862px;
   width: 201px;
   height: 213px;
 }
@@ -84,19 +96,19 @@
 }
 .quest_atom1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -665px -1315px;
+  background-position: -445px -1315px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1167px -1315px;
+  background-position: -947px -1315px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -747px -440px;
+  background-position: -967px -660px;
   width: 216px;
   height: 180px;
 }
@@ -120,7 +132,7 @@
 }
 .quest_beetle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -1293px;
+  background-position: -1627px -1076px;
   width: 204px;
   height: 201px;
 }
@@ -138,7 +150,7 @@
 }
 .quest_bunny {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -967px -660px;
+  background-position: -1187px -880px;
   width: 210px;
   height: 186px;
 }
@@ -156,7 +168,7 @@
 }
 .quest_cow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1535px;
+  background-position: -307px -220px;
   width: 174px;
   height: 213px;
 }
@@ -168,7 +180,7 @@
 }
 .quest_dilatoryDistress1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -868px;
+  background-position: -1627px -651px;
   width: 210px;
   height: 210px;
 }
@@ -204,7 +216,7 @@
 }
 .quest_egg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -175px -1535px;
+  background-position: 0px -1529px;
   width: 165px;
   height: 207px;
 }
@@ -240,7 +252,7 @@
 }
 .quest_frog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -1315px;
+  background-position: 0px -1315px;
   width: 221px;
   height: 213px;
 }
@@ -258,7 +270,7 @@
 }
 .quest_goldenknight2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -916px -1315px;
+  background-position: -696px -1315px;
   width: 250px;
   height: 150px;
 }
@@ -270,7 +282,7 @@
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -527px -220px;
+  background-position: -747px -440px;
   width: 216px;
   height: 177px;
 }
@@ -312,7 +324,7 @@
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -307px -220px;
+  background-position: -527px -220px;
   width: 216px;
   height: 177px;
 }
@@ -402,19 +414,7 @@
 }
 .quest_octopus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -442px -1315px;
+  background-position: -222px -1315px;
   width: 222px;
   height: 177px;
 }
-.quest_owl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1315px;
-  width: 219px;
-  height: 219px;
-}
-.quest_peacock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1627px -651px;
-  width: 216px;
-  height: 216px;
-}

website/client/src/components/appFooter.vue

@@ -364,6 +364,10 @@ footer {
     .logo {
       color: #c3c0c7;
     }
+    @media screen and (max-width: 770px) {
+      padding-left: 1em;
+      padding-right: 1em;
+    }
   }
 }
 </style>

website/client/src/components/challenges/challengeDetail.vue

@@ -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);

website/client/src/components/challenges/challengeModal.vue

@@ -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 () {

website/client/src/components/challenges/findChallenges.vue

@@ -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;

website/client/src/components/challenges/groupChallenges.vue

@@ -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;

website/client/src/components/challenges/myChallenges.vue

@@ -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;

website/client/src/components/chat/autoComplete.vue

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

website/client/src/components/chat/chatMessages.vue

@@ -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();

website/client/src/components/creatorIntro.vue

@@ -883,8 +883,9 @@
       }
 
       .backgroundFilterToggle {
-        margin-left: auto;
-        margin-right: auto;
+        display: flex;
+        flex: 1;
+        justify-content: center;
       }
 
       .set-title {

website/client/src/components/group-plans/taskInformation.vue

@@ -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);

website/client/src/components/groups/chat.vue

@@ -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 () {

website/client/src/components/groups/group.vue

@@ -176,7 +176,7 @@
           :title="$t('challenges')"
           :tooltip="$t('challengeDetails')"
         >
-          <group-challenges :group-id="searchId" />
+          <group-challenges :group="group" />
         </sidebar-section>
       </div>
       <div class="text-center">

website/client/src/components/groups/membersModal.vue

@@ -42,7 +42,7 @@
               :placeholder="$t('search')"
             >
           </div>
-          <div class="col">
+          <div class="col-5">
             <select-list
               :items="sortOptions"
               :value="optionEntryBySelectedValue"

website/client/src/components/groups/questSidebarSection.vue

@@ -149,7 +149,13 @@
             <div class="row boss-details">
               <div class="col-6">
                 <span class="float-left">
-                  {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }} <!-- eslint-disable-line max-len -->
+                  {{
+                    (Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100)
+                      | localizeNumber(user.preferences.language, { toFixed:2 })
+                  }} / {{
+                    parseFloat(questData.boss.hp)
+                      | localizeNumber(user.preferences.language, { toFixed:2 })
+                  }}
                   <!-- current boss hp uses ceil so
                     you don't underestimate damage needed to end quest-->
                 </span>
@@ -160,9 +166,13 @@
               >
                 <!-- @TODO: Why do we not sync quest
                   progress on the group doc? Each user could have different progress.-->
-                <span
-                  class="float-right"
-                >{{ (user.party.quest.progress.up || 0) | floor(10) }} {{ $t('pendingDamageLabel') }}</span> <!-- eslint-disable-line max-len -->
+                <span class="float-right">
+                  {{
+                    (user.party.quest.progress.up || 0)
+                      | floor(10)
+                      | localizeNumber(user.preferences.language, { toFixed:1 })
+                  }} {{ $t('pendingDamageLabel') }}
+                </span>
                 <!-- player's pending damage uses floor so you
                   don't overestimate damage you've already done-->
               </div>
@@ -188,7 +198,13 @@
               <div class="col-6">
                 <span
                   class="float-left"
-                >{{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}</span> <!-- eslint-disable-line max-len -->
+                >{{ $t('rage') }} {{
+                  parseFloat(group.quest.progress.rage)
+                    | localizeNumber(user.preferences.language, { toFixed: 2 })
+                }} / {{
+                  questData.boss.rage.value
+                    | localizeNumber(user.preferences.language)
+                }}</span>
               </div>
             </div>
           </div>

website/client/src/components/notifications.vue

@@ -403,6 +403,22 @@ const NOTIFICATIONS = {
       achievement: 'seasonalSpecialist',
     },
   },
+  ACHIEVEMENT_VIOLETS_ARE_BLUE: {
+    achievement: true,
+    label: $t => `${$t('achievement')}: ${$t('achievementVioletsAreBlue')}`,
+    modalId: 'generic-achievement',
+    data: {
+      achievement: 'violetsAreBlue',
+    },
+  },
+  ACHIEVEMENT_WILD_BLUE_YONDER: {
+    achievement: true,
+    label: $t => `${$t('achievement')}: ${$t('achievementWildBlueYonder')}`,
+    modalId: 'generic-achievement',
+    data: {
+      achievement: 'wildBlueYonder',
+    },
+  },
 };
 
 export default {
@@ -466,6 +482,7 @@ export default {
       'ACHIEVEMENT_FRESHWATER_FRIENDS', 'ACHIEVEMENT_GOOD_AS_GOLD', 'ACHIEVEMENT_ALL_THAT_GLITTERS',
       'ACHIEVEMENT_BONE_COLLECTOR', 'ACHIEVEMENT_SKELETON_CREW', 'ACHIEVEMENT_SEEING_RED',
       'ACHIEVEMENT_RED_LETTER_DAY', 'ACHIEVEMENT_LEGENDARY_BESTIARY', 'ACHIEVEMENT_SEASONAL_SPECIALIST',
+      'ACHIEVEMENT_VIOLETS_ARE_BLUE', 'ACHIEVEMENT_WILD_BLUE_YONDER',
     ].forEach(type => {
       handledNotifications[type] = true;
     });
@@ -765,10 +782,12 @@ export default {
         hours: this.user.preferences.dayStart,
       });
 
+      const yesterUtcOffset = yesterDay.utcOffset();
+
       dailys.forEach(task => {
         if (task && task.group.approval && task.group.approval.requested) return;
         if (task.completed) return;
-        const due = shouldDo(yesterDay, task);
+        const due = shouldDo(yesterDay, task, { timezoneUtcOffset: yesterUtcOffset });
         if (task.yesterDaily && due) this.yesterDailies.push(task);
       });
 
@@ -888,6 +907,8 @@ export default {
           case 'ACHIEVEMENT_RED_LETTER_DAY':
           case 'ACHIEVEMENT_LEGENDARY_BESTIARY':
           case 'ACHIEVEMENT_SEASONAL_SPECIALIST':
+          case 'ACHIEVEMENT_VIOLETS_ARE_BLUE':
+          case 'ACHIEVEMENT_WILD_BLUE_YONDER':
           case 'GENERIC_ACHIEVEMENT':
             this.showNotificationWithModal(notification);
             break;

website/client/src/components/shops/buyModal.vue

@@ -539,6 +539,7 @@ export default {
         const ownedPets = reduce(this.user.items.pets, (sum, petValue, petKey) => {
           if (petKey.includes(this.item.key) && petValue > 0
             && !petKey.includes('JackOLantern') // Jack-O-Lantern has "Ghost" version
+            && !petKey.includes('RoyalPurple') // to avoid counting Royal Purple Gryphons for gryphon eggs
           ) return sum + 1;
           return sum;
         }, 0);
@@ -546,6 +547,7 @@ export default {
         const ownedMounts = reduce(this.user.items.mounts, (sum, mountValue, mountKey) => {
           if (mountKey.includes(this.item.key) && mountValue === true
             && !mountKey.includes('JackOLantern')
+            && !mountKey.includes('RoyalPurple')
           ) return sum + 1;
           return sum;
         }, 0);

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -26,7 +26,10 @@
       class="content"
     >
       <div class="inner-content">
-        <questDialogContent :item="item" />
+        <questDialogContent
+          :item="item"
+          :abbreviated="true"
+        />
         <div
           v-if="!item.locked"
           class="purchase-amount"
@@ -131,11 +134,6 @@
       padding-bottom: 0px;
     }
 
-    .questInfo {
-      width: 70%;
-      margin: 0 auto 10px auto;
-    }
-
     .right-sidebar {
       position: absolute;
       right: -350px;

website/client/src/components/shops/quests/questDialogContent.vue

@@ -14,6 +14,7 @@
     <questInfo
       class="questInfo"
       :quest="item"
+      :abbreviated="true"
     />
   </div>
 </template>