4.196.1

also fix some date display and a Vue error

.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,26 +1,27 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.188.1",
+  "version": "4.196.1",
   "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.14.3",
+    "@babel/preset-env": "^7.14.4",
+    "@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.6",
+    "apidoc": "^0.28.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",
@@ -29,52 +30,52 @@
     "express": "^4.16.3",
     "express-basic-auth": "^1.1.5",
     "express-validator": "^5.2.0",
-    "glob": "^7.1.6",
-    "got": "^11.8.1",
+    "glob": "^7.1.7",
+    "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",
+    "gulp.spritesmith": "^6.12.1",
     "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.10",
     "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",
+    "rate-limiter-flexible": "^2.2.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",
+    "short-uuid": "^4.2.0",
+    "stripe": "^8.150.0",
     "superagent": "^6.1.0",
     "universal-analytics": "^0.4.23",
     "useragent": "^2.1.9",
     "uuid": "^8.3.2",
-    "validator": "^13.5.2",
+    "validator": "^13.6.0",
     "vinyl-buffer": "^1.0.1",
     "winston": "^3.3.3",
-    "winston-loggly-bulk": "^3.1.1",
+    "winston-loggly-bulk": "^3.2.1",
     "xml2js": "^0.4.23"
   },
   "private": true,
@@ -110,19 +111,19 @@
   },
   "devDependencies": {
     "axios": "^0.21.1",
-    "chai": "^4.1.2",
+    "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
-    "chalk": "^4.1.0",
+    "chalk": "^4.1.1",
     "cross-spawn": "^7.0.3",
     "expect.js": "^0.3.1",
     "istanbul": "^1.1.0-alpha.1",
     "mocha": "^5.1.1",
-    "monk": "^7.3.2",
+    "monk": "^7.3.4",
     "require-again": "^2.0.0",
     "run-rs": "^0.7.4",
-    "sinon": "^9.2.4",
-    "sinon-chai": "^3.5.0",
+    "sinon": "^10.0.0",
+    "sinon-chai": "^3.6.0",
     "sinon-stub-promise": "^4.0.0"
   },
   "optionalDependencies": {}

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/unit/libs/webhooks.test.js

@@ -656,9 +656,11 @@ describe('webhooks', () => {
           id: 'group-id',
           name: 'some group',
           otherData: 'foo',
+          quest: {},
         },
         quest: {
           key: 'some-key',
+          questOwner: 'user-id',
         },
       };
     });

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

@@ -240,6 +240,31 @@ 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);
+        expect(body.quest.questOwner).to.eql(questingGroup.leader._id);
+      });
     });
   });
 });

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

@@ -61,15 +61,6 @@ describe('POST /groups/:groupId/quests/leave', () => {
         });
     });
 
-    it('returns an error when quest is not active', async () => {
-      await expect(partyMembers[0].post(`/groups/${questingGroup._id}/quests/leave`))
-        .to.eventually.be.rejected.and.eql({
-          code: 404,
-          error: 'NotFound',
-          message: t('noActiveQuestToLeave'),
-        });
-    });
-
     it('returns an error when quest leader attempts to leave', async () => {
       await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
       await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
@@ -97,18 +88,14 @@ describe('POST /groups/:groupId/quests/leave', () => {
     });
   });
 
-  it('leaves a quest', async () => {
-    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
-    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
-    await partyMembers[1].post(`/groups/${questingGroup._id}/quests/accept`);
-
-    const leaveResult = await partyMembers[0].post(`/groups/${questingGroup._id}/quests/leave`);
+  async function letPartyMemberLeaveAndCheckChanges (partyMember) {
+    const leaveResult = await partyMember.post(`/groups/${questingGroup._id}/quests/leave`);
     await Promise.all([
-      partyMembers[0].sync(),
+      partyMember.sync(),
       questingGroup.sync(),
     ]);
 
-    expect(partyMembers[0].party.quest).to.eql({
+    expect(partyMember.party.quest).to.eql({
       key: null,
       progress: {
         up: 0,
@@ -120,6 +107,29 @@ describe('POST /groups/:groupId/quests/leave', () => {
       RSVPNeeded: false,
     });
     expect(questingGroup.quest).to.deep.equal(leaveResult);
-    expect(questingGroup.quest.members[partyMembers[0]._id]).to.be.false;
+    expect(questingGroup.quest.members[partyMember._id]).to.be.false;
+  }
+
+  it('leaves an active quest', async () => {
+    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
+    await partyMembers[1].post(`/groups/${questingGroup._id}/quests/accept`);
+
+    await questingGroup.sync();
+
+    expect(questingGroup.quest.active).to.eql(true);
+
+    await letPartyMemberLeaveAndCheckChanges(partyMembers[0]);
+  });
+
+  it('leaves an inactive quest ', async () => {
+    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
+
+    await questingGroup.sync();
+
+    expect(questingGroup.quest.active).to.eql(false);
+
+    await letPartyMemberLeaveAndCheckChanges(partyMembers[0]);
   });
 });

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/v3/integration/user/buy/POST-user_buy.test.js

@@ -70,6 +70,7 @@ describe('POST /user/buy/:key', () => {
   it('buys a special spell', async () => {
     const key = 'spookySparkles';
     const item = content.special[key];
+    const stub = sinon.stub(item, 'canOwn').returns(true);
 
     await user.update({ 'stats.gp': 250 });
     const res = await user.post(`/user/buy/${key}`);
@@ -82,6 +83,8 @@ describe('POST /user/buy/:key', () => {
     expect(res.message).to.equal(t('messageBought', {
       itemText: item.text(),
     }));
+
+    stub.restore();
   });
 
   it('allows for bulk purchases', async () => {

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/config/storybook/config.js

@@ -31,19 +31,45 @@ import '../../src/assets/css/sprites/spritesmith-main-23.css';
 import '../../src/assets/css/sprites/spritesmith-main-24.css';
 import '../../src/assets/css/sprites/spritesmith-main-25.css';
 import '../../src/assets/css/sprites/spritesmith-main-26.css';
+import '../../src/assets/css/sprites/spritesmith-main-27.css';
+import '../../src/assets/css/sprites/spritesmith-main-28.css';
+import '../../src/assets/css/sprites/spritesmith-main-29.css';
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';
+import getStore from '@/store';
+
+import i18n from '../../../common/script/i18n';
 
 // couldn't inject the languages easily,
 // so just a "$t()" string to show that this will be translated
-Vue.prototype.$t = function translateString (...args) {
+i18n.t = function translateString (...args) {
   return `$t(${JSON.stringify(args)})`;
 };
+Vue.prototype.$t = i18n.t;
 
 Vue.use(BootstrapVue);
 Vue.use(StoreModule);
 
+const store = getStore();
+store.state.user.data = {
+  stats: {},
+  tags: [],
+  items: {
+    quests: {
+      moon1: 3,
+    },
+  },
+  party: {
+    quest: {
+
+    },
+  },
+};
+
+Vue.prototype.$store = store;
+
+
 const req = require.context('../../src', true, /.stories.js$/);
 
 function loadStories () {

website/client/config/storybook/margin.css

@@ -3,11 +3,12 @@
     display: inline-block;
 }
 
-.content {
-    color: white;
-    background: grey;
-}
-
 .inline-block {
     display: inline-block;
 }
+
+.component-showcase {
+    position: absolute;
+    margin: 20px;
+    width: calc(100% - 40px);
+}

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

@@ -1,3 +1,5 @@
+import { v4 as generateUUID } from 'uuid';
+
 export const userStyles = {
   contributor: {
     admin: true,
@@ -72,4 +74,11 @@ export const userStyles = {
     maxHealth: 50,
     maxMP: 158,
   },
+  profile: {
+    name: 'user',
+  },
+  _id: generateUUID(),
+  flags: {
+    classSelected: true,
+  },
 };

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.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-router": "^4.5.13",
+    "@vue/cli-plugin-unit-mocha": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^7.4.1",
+    "amplitude-js": "^8.3.0",
     "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.5.3",
+    "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.21.2",
-    "chai": "^4.1.2",
-    "core-js": "^3.8.3",
+    "chai": "^4.3.4",
+    "core-js": "^3.12.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.34.0",
     "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.14.2"
   }
 }

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

@@ -1,396 +1,750 @@
+.Pet_Currency_Gem {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1369px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_Currency_Gem1x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1921px -557px;
+  width: 15px;
+  height: 13px;
+}
+.Pet_Currency_Gem2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -1065px;
+  width: 30px;
+  height: 26px;
+}
+.PixelPaw-Gold {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -817px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -886px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw002 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -955px;
+  width: 51px;
+  height: 51px;
+}
+.inventory_present {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -817px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_11 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1893px -576px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_12 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -817px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -886px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_congrats {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -886px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_fortify {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -955px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_getwell {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -955px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_goodluck {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1024px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_greeting {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1024px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1093px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_opaquePotion {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1093px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_seafoam {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1162px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_shinySeed {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1162px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_snowball {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1231px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_spookySparkles {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1231px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_thankyou {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1300px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_trinket {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1300px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_valentine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1369px;
+  width: 68px;
+  height: 68px;
+}
+.knockout {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -769px;
+  width: 120px;
+  height: 47px;
+}
+.pet_key {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1438px;
+  width: 68px;
+  height: 68px;
+}
+.rebirth_orb {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1438px;
+  width: 68px;
+  height: 68px;
+}
+.seafoam_star {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -576px;
+  width: 90px;
+  height: 90px;
+}
+.shop_armoire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1507px;
+  width: 68px;
+  height: 68px;
+}
+.zzz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -1024px;
+  width: 40px;
+  height: 40px;
+}
+.zzz_light {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1923px -769px;
+  width: 40px;
+  height: 40px;
+}
+.notif_inventory_present_01 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -142px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_02 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -171px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_03 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -200px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_04 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -229px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_05 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -258px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_06 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -293px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_07 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -322px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_08 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -351px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_09 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -380px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_10 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1953px -409px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_11 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1962px -576px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_12 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1962px -605px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_special_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -1093px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_congrats {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1961px -1118px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_getwell {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -1162px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_goodluck {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1971px -1065px;
+  width: 20px;
+  height: 26px;
+}
+.notif_inventory_special_greeting {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1961px -1162px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1964px -769px;
+  width: 24px;
+  height: 26px;
+}
+.notif_inventory_special_thankyou {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1961px -1093px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_valentine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1940px -1118px;
+  width: 20px;
+  height: 24px;
+}
+.npc_bailey {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1924px -1576px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1921px -444px;
+  width: 63px;
+  height: 93px;
+}
+.npc_bailey_fall {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1929px -667px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_habitoween {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1682px -422px;
+  width: 54px;
+  height: 72px;
+}
+.npc_bailey_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1874px -667px;
+  width: 54px;
+  height: 93px;
+}
+.npc_bailey_spring {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -1576px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_summer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1802px -667px;
+  width: 71px;
+  height: 101px;
+}
+.npc_bailey_thanksgiving {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1863px -1576px;
+  width: 60px;
+  height: 72px;
+}
+.npc_bailey_valentines {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1871px -1507px;
+  width: 63px;
+  height: 66px;
+}
+.npc_bailey_winter {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1627px -422px;
+  width: 54px;
+  height: 78px;
+}
+.npc_matt {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1372px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_birthday {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1366px -1315px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_fall {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: 0px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_habitoween {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -196px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -392px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_spring {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -588px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_summer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -784px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_thanksgiving {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -980px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_winter {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1176px -1529px;
+  width: 195px;
+  height: 138px;
+}
+.background_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: 0px 0px;
+  width: 306px;
+  height: 202px;
+}
+.banner_flair_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1921px -538px;
+  width: 69px;
+  height: 18px;
+}
+.phobia_dysheartener {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -747px -440px;
+  width: 201px;
+  height: 195px;
+}
+.quest_alligator {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -1407px -1085px;
+  width: 201px;
+  height: 213px;
+}
+.quest_amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
+  background-position: -307px 0px;
+  width: 219px;
+  height: 219px;
+}
 .quest_armadillo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px 0px;
+  background-position: -527px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_atom1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1082px -1332px;
+  background-position: -656px -1315px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -642px -1534px;
+  background-position: -1158px -1315px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -211px -1534px;
+  background-position: -307px -220px;
   width: 216px;
   height: 180px;
 }
 .quest_axolotl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px 0px;
+  background-position: 0px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_badger {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -232px;
+  background-position: -220px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_basilist {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -191px -1721px;
+  background-position: -1802px 0px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1332px;
+  background-position: -1187px -880px;
   width: 204px;
   height: 201px;
 }
 .quest_blackPearl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -214px;
+  background-position: -1407px -440px;
   width: 216px;
   height: 216px;
 }
 .quest_bronze {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -232px;
+  background-position: -440px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_bunny {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1534px;
+  background-position: -527px -220px;
   width: 210px;
   height: 186px;
 }
 .quest_butterfly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -232px;
+  background-position: -747px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_cheetah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px 0px;
+  background-position: -747px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_cow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1762px 0px;
+  background-position: -1627px 0px;
   width: 174px;
   height: 213px;
 }
 .quest_dilatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -452px;
+  background-position: -220px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatoryDistress1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -1112px;
+  background-position: -1407px -874px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1762px -422px;
+  background-position: -1802px -142px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -452px;
+  background-position: -440px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -220px;
+  background-position: 0px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_dolphin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -452px;
+  background-position: -660px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -452px;
+  background-position: -967px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1762px -214px;
+  background-position: -1627px -214px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1762px -724px;
+  background-position: -1802px -444px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px 0px;
+  background-position: -967px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -220px;
+  background-position: -967px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -440px;
+  background-position: 0px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_fluorite {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -672px;
+  background-position: -220px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_frog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px 0px;
+  background-position: 0px -1315px;
   width: 221px;
   height: 213px;
 }
 .quest_ghost_stag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -672px;
+  background-position: -440px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -672px;
+  background-position: -660px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1333px -1332px;
+  background-position: -907px -1315px;
   width: 250px;
   height: 150px;
 }
 .quest_goldenknight3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px 0px;
+  background-position: 0px -203px;
   width: 219px;
   height: 231px;
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -648px -1332px;
+  background-position: -222px -1315px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -672px;
+  background-position: -880px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -672px;
+  background-position: -1187px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -205px -1332px;
+  background-position: -967px -660px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px 0px;
+  background-position: -1187px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -220px;
+  background-position: -1187px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -440px;
+  background-position: -1187px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -865px -1332px;
+  background-position: -439px -1315px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -660px;
+  background-position: 0px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -892px;
+  background-position: -220px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -892px;
+  background-position: -440px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1762px -573px;
+  background-position: -1802px -293px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -892px;
+  background-position: -660px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -892px;
+  background-position: -880px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -892px;
+  background-position: -1100px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -431px;
+  background-position: -1407px -657px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -892px;
+  background-position: -1407px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -220px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_moonstone3 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_nudibranch {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -648px;
-  width: 216px;
-  height: 216px;
-}
-.quest_octopus {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -425px -1332px;
-  width: 222px;
-  height: 177px;
-}
-.quest_owl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1320px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_peacock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -865px;
-  width: 216px;
-  height: 216px;
-}
-.quest_penguin {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1721px;
-  width: 190px;
-  height: 183px;
-}
-.quest_pterodactyl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: 0px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rat {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -220px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_robot {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -440px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1540px -1082px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -428px -1534px;
-  width: 213px;
-  height: 174px;
-}
-.quest_ruby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -660px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sabretooth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -880px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_seaserpent {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-14.png');
-  background-position: -1100px -1112px;
+  background-position: -1407px -220px;
   width: 219px;
   height: 219px;
 }

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

@@ -39,6 +39,7 @@
 // shared dropdown-item styles
 .dropdown-item {
   // header items & not selectList-items
+
   padding-left: 24px;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -53,14 +54,13 @@
     background-color: inherit;
   }
 
-
   &:active, &:hover, &:focus, &.active {
     background-color: inherit !important;
-    color: $purple-300 !important;
+    color: var(--hover-color, $purple-300) !important;
   }
 
   &:hover {
-    background-color: rgba($purple-600, 0.25) !important;
+    background-color: var(--hover-background, rgba($purple-600, 0.25)) !important;
   }
 
   &.dropdown-inactive {
@@ -71,6 +71,21 @@
       color: inherit !important;
     }
   }
+
+  .with-icon {
+    display: flex;
+    align-items: center;
+
+    .svg-icon {
+      margin: 0 0.5rem 0 0;
+    }
+  }
+
+  &:not(:hover) {
+    .with-icon .svg-icon {
+      color: $gray-200;
+    }
+  }
 }
 
 .dropdown + .dropdown {

website/client/src/assets/scss/icon.scss

@@ -16,6 +16,12 @@
       fill: currentColor;
     }
   }
+
+  &.color-stroke {
+    svg path {
+      stroke: currentColor;
+    }
+  }
 }
 
 .icon-16 {
@@ -33,6 +39,11 @@
   height: 24px;
 }
 
+.icon-48 {
+  width: 48px;
+  height: 48px;
+}
+
 .icon-10 {
   width: 10px;
   height: 10px;

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

@@ -107,5 +107,5 @@
 }
 
 .questPopover {
-  width: 200px;
+  min-width: 200px;
 }

website/client/src/assets/scss/modal.scss

@@ -41,88 +41,6 @@
   }
 }
 
-#start-quest-modal, #buy-quest-modal {
-  @media only screen and (max-width: 1200px) {
-    .modal-dialog {
-      max-width: 33%;
-
-      .left-panel {
-        left: initial;
-        width: 100%;
-        right: 100%;
-
-        .col-4 {
-          width: 100px;
-        }
-      }
-
-      .side-panel, .right-sidebar {
-        left: calc(100% - 10px);
-        max-width: 100%;
-        right: initial;
-
-        .questRewards {
-          width: 90%;
-
-          .reward-item {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  @media only screen and (max-width: 1000px) {
-    .modal-dialog {
-      max-width: 80%;
-      width: 80% !important;
-
-      .modal-body {
-        flex-direction: column;
-        display: flex;
-
-        div:nth-child(1) { order: 3; }
-        div:nth-child(2) { order: 1; }
-        div:nth-child(3) { order: 4; }
-        div:nth-child(4) { order: 5; }
-        div:nth-child(5) { order: 2; }
-
-        .left-panel {
-          border-radius: 8px;
-          position: static;
-          right: initial;
-          margin: 20px 0;
-          height: auto;
-          width: 100%;
-          z-index: 0;
-          order: 3;
-
-          .col-4 {
-            max-width: 100px;
-          }
-        }
-
-        .side-panel, .right-sidebar {
-          margin: 20px 0 0 0;
-          position: static;
-          box-shadow: none;
-          height: auto;
-          width: 100%;
-          z-index: 0;
-          order: 2;
-          left: 0;
-
-          .questRewards {
-            padding: 0 2em 2em 2em;
-            width: 100%;
-            z-index: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
 #subscription-cancel-modal, #subscription-canceled-modal {
   .modal-content {
     background: transparent;

website/client/src/assets/svg/health_no_padding.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill="#F74E52" d="M0 2L3.333 0 8 2.533 12.667 0 16 2 16 8 12.667 12.667 8 16 3.333 12.667 0 8z" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FF6165" d="M4.267 11.733L1.333 7.6 1.333 2.733 3.333 1.533 8 4.067 12.667 1.533 14.667 2.733 14.667 7.6 11.733 11.733 8 14.333z" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L11.733 11.733 8 14.333z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L4.267 11.733 8 14.333z" opacity=".35" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M4.267 11.733L1.333 7.6 8 9.667z" opacity=".25" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M11.733 11.733L14.667 7.6 8 9.667z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L12.667 1.533 14.667 2.733 14.667 7.6z" opacity=".35" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L3.333 1.533 1.333 2.733 1.333 7.6z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L3.333 1.533 8 4.067z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L12.667 1.533 8 4.067z" opacity=".25" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M5.733 10.267L3.333 6.933 3.333 3.867 3.4 3.867 8 6.333 12.6 3.867 12.667 3.867 12.667 6.933 10.267 10.267 8 11.933z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

website/client/src/assets/svg/leave.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <path id="xnmy9c4dda" d="M11 6H6V3L0 8l6 5v-3h5V6zm5-4v12c0 1.104-.896 2-2 2H9v-2h5V2H9V0h5c1.104 0 2 .896 2 2z"/>
+</svg>

website/client/src/assets/svg/level.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="17"><defs><path id="a" d="M10 13v1H6v-1h4zm0-2v1H6v-1h4zM8 2l5 6h-3v2H6V8H3l5-6z"/></defs><g transform="rotate(-90 8 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#BDA8FF" xlink:href="#a"/><g fill="#878190" mask="url(#b)"><path d="M0 0h16v16H0z"/></g></g></svg>

website/client/src/assets/svg/navigation_back.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9" height="14" viewBox="0 0 9 14">
+    <defs>
+        <path id="lvd11k063a" d="M3.75 13.36L5.487 15.125 12.25 8.25 5.487 1.375 3.75 3.14 8.776 8.25z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-640 -837) translate(496 56) rotate(90 -311.5 468.5)">
+                    <use fill="#46a7d9" fill-rule="nonzero" transform="rotate(90 8 8.25)" xlink:href="#lvd11k063a"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

website/client/src/assets/svg/rage.svg

@@ -1,18 +1,26 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
-    <g fill="none" fill-rule="nonzero">
-        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
-        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
-        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
-        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
-        <path fill="#5AE4B2" d="M6.667 5.2v8.4L1.733 6.2z"/>
-        <path fill="#1B996B" d="M11.6 6.2l-4.933 7.4V5.2z" opacity=".35"/>
-        <path fill="#F47825" d="M13.333 6L6.667 0 0 6l1.333 2L0 10l6.667 6 6.666-6L12 8z"/>
-        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
-        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
-        <path fill="#FFF" d="M6.667 5.2v8.4L5.37 11.653 1.733 6.2zM6.667 10.8V2.4l1.296 1.947L11.6 9.8z" opacity=".25"/>
-        <path fill="#B4591B" d="M11.6 6.2l-4.933 7.4V5.2zM1.733 9.8l4.934 1v3.4z" opacity=".35"/>
-        <path fill="#FFF" d="M6.667 10.8l4.933-1-4.933 4.4z" opacity=".5"/>
-        <path fill="#FFF" d="M1.733 9.8l4.934-7.4v8.4z" opacity=".25"/>
-        <path fill="#FFF" d="M3.5 9.533L4.54 8 3.5 6.467l3.167-2.8 3.166 2.8L8.793 8l1.04 1.533-3.166 2.8z" opacity=".5"/>
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <g>
+                        <path fill="#24CC8F" d="M0 6L5.833 0 11.667 6 5.833 16z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#24CC8F" d="M0 6L5.833 0 11.667 6 5.833 16z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M10.15 6.2L5.833 5.2 5.833 1.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L1.517 6.2 5.833 1.8z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#5AE4B2" d="M5.833 5.2L5.833 13.6 1.517 6.2z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#1B996B" d="M10.15 6.2L5.833 13.6 5.833 5.2z" opacity=".35" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#F47825" d="M11.667 6L5.833 0 0 6 1.167 8 0 10 5.833 16 11.667 10 10.5 8z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M10.15 6.2L5.833 5.2 5.833 1.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L1.517 6.2 5.833 1.8z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L5.833 13.6 4.699 11.653 1.517 6.2zM5.833 10.8L5.833 2.4 6.968 4.347 10.15 9.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#B4591B" d="M10.15 6.2L5.833 13.6 5.833 5.2zM1.517 9.8L5.833 10.8 5.833 14.2z" opacity=".35" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 10.8L10.15 9.8 5.833 14.2z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M1.517 9.8L5.833 2.4 5.833 10.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M3.063 9.533L3.973 8 3.063 6.467 5.833 3.667 8.604 6.467 7.694 8 8.604 9.533 5.833 12.333z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
     </g>
 </svg>

website/client/src/assets/svg/sparklesIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+        <path id="re6owe1t5a" d="M7 10l1.06 1.94L10 13l-1.94 1.06L7 16l-1.06-1.94L4 13l1.94-1.06L7 10zm5.5-6l1.237 2.263L16 7.5l-2.263 1.237L12.5 11l-1.237-2.263L9 7.5l2.263-1.237L12.5 4zM4 0l1.414 2.586L8 4 5.414 5.414 4 8 2.586 5.414 0 4l2.586-1.414L4 0z"/>
+</svg>

website/client/src/assets/svg/users.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <defs>
+        <path id="rt3mruthma" d="M11.2 13.2c0-1.231-.467-2.35-1.23-3.2h1.23c1.765 0 3.2 1.435 3.2 3.2h-3.2zm-9.6 0c0-1.765 1.435-3.2 3.2-3.2h1.6c1.765 0 3.2 1.435 3.2 3.2h-8zm4-9.6C6.926 3.6 8 4.674 8 6c0 1.326-1.074 2.4-2.4 2.4-1.326 0-2.4-1.074-2.4-2.4 0-1.326 1.074-2.4 2.4-2.4zm3.452.415C9.436 3.754 9.9 3.6 10.4 3.6c1.326 0 2.4 1.074 2.4 2.4 0 1.326-1.074 2.4-2.4 2.4-.5 0-.964-.154-1.348-.415.34-.587.548-1.26.548-1.985 0-.726-.209-1.398-.548-1.985zm4.154 4.829C13.942 8.118 14.4 7.112 14.4 6c0-2.206-1.794-4-4-4-.904 0-1.73.313-2.4.82C7.33 2.314 6.504 2 5.6 2c-2.206 0-4 1.794-4 4 0 1.112.458 2.118 1.194 2.844C1.146 9.604 0 11.266 0 13.2c0 .884.716 1.6 1.6 1.6h12.8c.884 0 1.6-.716 1.6-1.6 0-1.934-1.146-3.596-2.794-4.356z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-1228 -1456) translate(1216 1416) translate(12 40)">
+                    <mask id="6szqyv7o1b" fill="#fff">
+                        <use xlink:href="#rt3mruthma"/>
+                    </mask>
+                    <use fill="#878190" xlink:href="#rt3mruthma"/>
+                    <g fill="#878190" mask="url(#6szqyv7o1b)">
+                        <path d="M0 0H16V16H0z"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -18,11 +18,11 @@
         v-if="questData.completion && typeof questData.completion === 'function'"
         v-html="questData.completion()"
       ></p>
-      <div class="quest-rewards text-center">
+      <div class="text-center">
         <h3 v-once>
           {{ $t('paymentYouReceived') }}
         </h3>
-        <questDialogDrops :item="questData" />
+        <quest-rewards :quest="questData" />
       </div>
     </div>
     <div class="modal-footer">
@@ -36,27 +36,32 @@
   </b-modal>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
   .quest {
     margin: 0 auto;
   }
-
-  .quest-rewards .questRewards {
-    margin: 0 auto;
-  }
+</style>
+
+<style lang="scss">
+ #quest-completed {
+   .quest-rewards {
+     margin-left: -2rem;
+     margin-right: -2rem;
+   }
+ }
 </style>
 
 <script>
 import * as quests from '@/../../common/script/content/quests';
-import questDialogDrops from '@/components/shops/quests/questDialogDrops';
 
 import { mapState } from '@/libs/store';
 import percent from '@/../../common/script/libs/percent';
 import { MAX_HEALTH as maxHealth } from '@/../../common/script/constants';
+import QuestRewards from '../shops/quests/questRewards';
 
 export default {
   components: {
-    questDialogDrops,
+    QuestRewards,
   },
   data () {
     return {