4.219.0

Currently translated at 69.1% (1744 of 2523 strings)

Co-authored-by: Sabe Jones <sabe@habitica.com>
Translate-URL: https://translate.habitica.com/projects/habitica/gear/pl/
Translation: Habitica/Gear

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "habitica-images"]
+	path = habitica-images
+	url = https://github.com/HabitRPG/habitica-images

.slugignore

@@ -0,0 +1,3 @@
+# Files not included in deployments to Heroku, to save on file size.
+
+/habitica-images

gulp/gulp-sprites.js

@@ -4,7 +4,6 @@ import spritesmith from 'gulp.spritesmith';
 import clean from 'rimraf';
 import sizeOf from 'image-size';
 import mergeStream from 'merge-stream';
-import { basename } from 'path';
 import { sync } from 'glob';
 import { each } from 'lodash';
 import vinylBuffer from 'vinyl-buffer';
@@ -118,47 +117,12 @@ function createSpritesStream (name, src) {
 }
 
 gulp.task('sprites:main', () => {
-  const mainSrc = sync('website/raw_sprites/spritesmith/**/*.png');
+  const mainSrc = sync('habitica-images/**/*.png');
   return createSpritesStream('main', mainSrc);
 });
 
-gulp.task('sprites:largeSprites', () => {
-  const largeSrc = sync('website/raw_sprites/spritesmith_large/**/*.png');
-  return createSpritesStream('largeSprites', largeSrc);
-});
-
 gulp.task('sprites:clean', done => {
   clean(`${IMG_DIST_PATH}spritesmith*,${CSS_DIST_PATH}spritesmith*}`, done);
 });
 
-gulp.task('sprites:checkCompiledDimensions', gulp.series('sprites:main', 'sprites:largeSprites', done => {
-  console.log('Verifiying that images do not exceed max dimensions'); // eslint-disable-line no-console
-
-  let numberOfSheetsThatAreTooBig = 0;
-
-  const distSpritesheets = sync(`${IMG_DIST_PATH}*.png`);
-
-  each(distSpritesheets, img => {
-    const spriteSize = calculateImgDimensions(img);
-
-    if (spriteSize > MAX_SPRITESHEET_SIZE) {
-      numberOfSheetsThatAreTooBig += 1;
-      const name = basename(img, '.png');
-      console.error(`WARNING: ${name} might be too big - ${spriteSize} > ${MAX_SPRITESHEET_SIZE}`); // eslint-disable-line no-console
-    }
-  });
-
-  if (numberOfSheetsThatAreTooBig > 0) {
-    // https://github.com/HabitRPG/habitica/pull/6683#issuecomment-185462180
-    console.error( // eslint-disable-line no-console
-      `${numberOfSheetsThatAreTooBig} sheets might too big for mobile Safari to be able to handle
-      them, but there is a margin of error in these calculations so it is probably okay. Mention
-      this to an admin so they can test a staging site on mobile Safari after your PR is merged.`,
-    );
-  } else {
-    console.log('All images are within the correct dimensions'); // eslint-disable-line no-console
-  }
-  done();
-}));
-
-gulp.task('sprites:compile', gulp.series('sprites:clean', 'sprites:checkCompiledDimensions', done => done()));
+gulp.task('sprites:compile', gulp.series('sprites:clean', 'sprites:main', done => done()));

migrations/archive/2021/20211230_nye.js

@@ -0,0 +1,135 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20211230_nye';
+import { model as User } from '../../../website/server/models/user';
+import { v4 as uuid } from 'uuid';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = { migration: MIGRATION_NAME };
+  let push;
+
+  if (typeof user.items.gear.owned.head_special_nye2020 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2021'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2021',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2019 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2020'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2020',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2018 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2019'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2019',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2017 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2018'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2018',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2016 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2017'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2017',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2015 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2016'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2016',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye2014 !== 'undefined') {
+    set['items.gear.owned.head_special_nye2015'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2015',
+        _id: uuid(),
+      },
+    ];
+  } else if (typeof user.items.gear.owned.head_special_nye !== 'undefined') {
+    set['items.gear.owned.head_special_nye2014'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye2014',
+        _id: uuid(),
+      },
+    ];
+  } else {
+    set['items.gear.owned.head_special_nye'] = false;
+    push = [
+      {
+        type: 'marketGear',
+        path: 'gear.flat.head_special_nye',
+        _id: uuid(),
+      },
+    ];
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({_id: user._id}, {$set: set, $push: {pinnedItems: {$each: push}}}).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    'auth.timestamps.loggedin': {$gt: new Date('2021-12-01')},
+    migration: {$ne: MIGRATION_NAME},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2022/20220131_habit_birthday.js

@@ -0,0 +1,97 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20220131_habit_birthday';
+import { v4 as uuid } from 'uuid';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const inc = {
+    'items.food.Cake_Skeleton': 1,
+    'items.food.Cake_Base': 1,
+    'items.food.Cake_CottonCandyBlue': 1,
+    'items.food.Cake_CottonCandyPink': 1,
+    'items.food.Cake_Shade': 1,
+    'items.food.Cake_White': 1,
+    'items.food.Cake_Golden': 1,
+    'items.food.Cake_Zombie': 1,
+    'items.food.Cake_Desert': 1,
+    'items.food.Cake_Red': 1,
+    'achievements.habitBirthdays': 1,
+  };
+  const set = {};
+  let push;
+
+  set.migration = MIGRATION_NAME;
+
+  if (typeof user.items.gear.owned.armor_special_birthday2021 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2022'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2022', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2020 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2021'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2021', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2019 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2020'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2020', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2018 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2019'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2019', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2017 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2018'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2018', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2016 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2017'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2017', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2015 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2016'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2016', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2015'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2015', _id: uuid()}};
+  } else {
+    set['items.gear.owned.armor_special_birthday'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday', _id: uuid()}};
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({_id: user._id}, {$inc: inc, $set: set, $push: push}).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2022-01-01')},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

package.json

@@ -1,25 +1,25 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.214.1",
+  "version": "4.219.0",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/register": "^7.16.0",
-    "@google-cloud/trace-agent": "^5.1.5",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/register": "^7.16.9",
+    "@google-cloud/trace-agent": "^5.1.6",
     "@parse/node-apn": "^5.1.0",
-    "@slack/webhook": "^6.0.0",
+    "@slack/webhook": "^6.1.0",
     "accepts": "^1.3.5",
     "amazon-payments": "^0.2.9",
     "amplitude": "^5.2.0",
-    "apidoc": "^0.50.2",
+    "apidoc": "^0.50.3",
     "apple-auth": "^1.0.7",
     "bcrypt": "^5.0.1",
-    "body-parser": "^1.18.3",
+    "body-parser": "^1.19.1",
     "bootstrap": "^4.6.0",
     "compression": "^1.7.4",
-    "cookie-session": "^1.4.0",
+    "cookie-session": "^2.0.0",
     "coupon-code": "^0.4.5",
     "csv-stringify": "^5.6.5",
     "cwait": "^1.1.1",
@@ -27,8 +27,8 @@
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.0.0",
-    "express": "^4.16.3",
-    "express-basic-auth": "^1.1.5",
+    "express": "^4.17.2",
+    "express-basic-auth": "^1.2.1",
     "express-validator": "^5.2.0",
     "glob": "^7.2.0",
     "got": "^11.8.3",
@@ -39,7 +39,7 @@
     "gulp.spritesmith": "^6.12.1",
     "habitica-markdown": "^3.0.0",
     "helmet": "^4.6.0",
-    "image-size": "^1.0.0",
+    "image-size": "^1.0.1",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^4.0.2",
     "jsonwebtoken": "^8.5.1",
@@ -67,14 +67,14 @@
     "remove-markdown": "^0.3.0",
     "rimraf": "^3.0.2",
     "short-uuid": "^4.2.0",
-    "stripe": "^8.191.0",
-    "superagent": "^6.1.0",
-    "universal-analytics": "^0.4.23",
+    "stripe": "^8.201.0",
+    "superagent": "^7.1.1",
+    "universal-analytics": "^0.5.3",
     "useragent": "^2.1.9",
     "uuid": "^8.3.2",
     "validator": "^13.7.0",
     "vinyl-buffer": "^1.0.1",
-    "winston": "^3.3.3",
+    "winston": "^3.5.0",
     "winston-loggly-bulk": "^3.2.1",
     "xml2js": "^0.4.23"
   },
@@ -110,8 +110,8 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^0.24.0",
-    "chai": "^4.3.4",
+    "axios": "^0.25.0",
+    "chai": "^4.3.6",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
     "chalk": "^4.1.2",
@@ -121,7 +121,7 @@
     "mocha": "^5.1.1",
     "monk": "^7.3.4",
     "require-again": "^2.0.0",
-    "run-rs": "^0.7.5",
+    "run-rs": "^0.7.6",
     "sinon": "^12.0.1",
     "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"

test/api/unit/libs/bug-report.test.js

@@ -0,0 +1,57 @@
+/* eslint-disable global-require */
+import nconf from 'nconf';
+import { generateUser } from '../../../helpers/api-unit.helper';
+import * as emailLib from '../../../../website/server/libs/email';
+import { bugReportLogic } from '../../../../website/server/libs/bug-report';
+
+describe('bug-report', () => {
+  beforeEach(() => {
+    sandbox.stub(emailLib, 'sendTxn').returns(Promise.resolve());
+
+    const nconfGetStub = sandbox.stub(nconf, 'get');
+    nconfGetStub.withArgs('ADMIN_EMAIL').returns('true');
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  it('sends a mail using sendTxn', async () => {
+    const userId = '2b58daeb-bc50-4a83-b5d3-4ac52c7c0608';
+    const userMail = 'me@me.com';
+    const userMessage = 'The power is over 9000, please fix it';
+    const userAgent = 'The UserAgent with a bunch of weird browser engine levels';
+
+    const user = generateUser({
+      _id: userId,
+    });
+
+    const result = await bugReportLogic(
+      user, userMail, userMessage, userAgent,
+    );
+
+    expect(emailLib.sendTxn).to.be.called;
+    expect(result).to.deep.equal({
+      sendMailResult: undefined,
+      emailData: {
+        BROWSER_UA: userAgent,
+        REPORT_MSG: userMessage,
+        USER_CLASS: 'warrior',
+        USER_CONSECUTIVE_MONTHS: 0,
+        USER_COSTUME: 'false',
+        USER_CUSTOMER_ID: undefined,
+        USER_CUSTOM_DAY: 0,
+        USER_DAILIES_PAUSED: 'false',
+        USER_EMAIL: userMail,
+        USER_HOURGLASSES: 0,
+        USER_ID: userId,
+        USER_LEVEL: 1,
+        USER_OFFSET_MONTHS: 0,
+        USER_PAYMENT_PLATFORM: undefined,
+        USER_SUBSCRIPTION: undefined,
+        USER_TIMEZONE_OFFSET: 0,
+        USER_USERNAME: undefined,
+      },
+    });
+  });
+});

test/api/unit/libs/email.test.js

@@ -148,9 +148,18 @@ describe('emails', () => {
     });
   });
 
-  describe('sendTxnEmail', () => {
+  describe('sendTxn', () => {
+    let sendTxn = null;
+
     beforeEach(() => {
       sandbox.stub(got, 'post').returns(defer().promise);
+
+      const nconfGetStub = sandbox.stub(nconf, 'get');
+      nconfGetStub.withArgs('IS_PROD').returns(true);
+      nconfGetStub.withArgs('BASE_URL').returns('BASE_URL');
+
+      const attachEmail = requireAgain(pathToEmailLib);
+      sendTxn = attachEmail.sendTxn;
     });
 
     afterEach(() => {
@@ -158,16 +167,14 @@ describe('emails', () => {
     });
 
     it('can send a txn email to one recipient', () => {
-      sandbox.stub(nconf, 'get').withArgs('IS_PROD').returns(true);
-      const attachEmail = requireAgain(pathToEmailLib);
-      const sendTxnEmail = attachEmail.sendTxn;
       const emailType = 'an email type';
       const mailingInfo = {
         name: 'my name',
         email: 'my@email',
       };
 
-      sendTxnEmail(mailingInfo, emailType);
+      sendTxn(mailingInfo, emailType);
+      expect(got.post).to.be.called;
       expect(got.post).to.be.calledWith('undefined/job', sinon.match({
         json: {
           data: {
@@ -179,27 +186,77 @@ describe('emails', () => {
     });
 
     it('does not send email if address is missing', () => {
-      sandbox.stub(nconf, 'get').withArgs('IS_PROD').returns(true);
-      const attachEmail = requireAgain(pathToEmailLib);
-      const sendTxnEmail = attachEmail.sendTxn;
       const emailType = 'an email type';
       const mailingInfo = {
         name: 'my name',
         // email: 'my@email',
       };
 
-      sendTxnEmail(mailingInfo, emailType);
+      sendTxn(mailingInfo, emailType);
       expect(got.post).not.to.be.called;
     });
 
+    it('throws error when mail target is only a string', () => {
+      const emailType = 'an email type';
+      const mailingInfo = 'my email';
+
+      expect(sendTxn(mailingInfo, emailType)).to.throw;
+    });
+
+    it('throws error when mail target has no _id or email', () => {
+      const emailType = 'an email type';
+      const mailingInfo = {
+
+      };
+
+      expect(sendTxn(mailingInfo, emailType)).to.throw;
+    });
+
+    it('throws error when variables not an array', () => {
+      const emailType = 'an email type';
+      const mailingInfo = {
+        name: 'my name',
+        email: 'my@email',
+      };
+      const variables = {};
+
+      expect(sendTxn(mailingInfo, emailType, variables)).to.throw;
+    });
+    it('throws error when variables array not contain name/content', () => {
+      const emailType = 'an email type';
+      const mailingInfo = {
+        name: 'my name',
+        email: 'my@email',
+      };
+      const variables = [
+        {
+
+        },
+      ];
+
+      expect(sendTxn(mailingInfo, emailType, variables)).to.throw;
+    });
+    it('throws no error when variables array contain name but no content', () => {
+      const emailType = 'an email type';
+      const mailingInfo = {
+        name: 'my name',
+        email: 'my@email',
+      };
+      const variables = [
+        {
+          name: 'MY_VAR',
+        },
+      ];
+
+      expect(sendTxn(mailingInfo, emailType, variables)).to.not.throw;
+    });
+
     it('uses getUserInfo in case of user data', () => {
-      sandbox.stub(nconf, 'get').withArgs('IS_PROD').returns(true);
-      const attachEmail = requireAgain(pathToEmailLib);
-      const sendTxnEmail = attachEmail.sendTxn;
       const emailType = 'an email type';
       const mailingInfo = getUser();
 
-      sendTxnEmail(mailingInfo, emailType);
+      sendTxn(mailingInfo, emailType);
+      expect(got.post).to.be.called;
       expect(got.post).to.be.calledWith('undefined/job', sinon.match({
         json: {
           data: {
@@ -211,17 +268,15 @@ describe('emails', () => {
     });
 
     it('sends email with some default variables', () => {
-      sandbox.stub(nconf, 'get').withArgs('IS_PROD').returns(true);
-      const attachEmail = requireAgain(pathToEmailLib);
-      const sendTxnEmail = attachEmail.sendTxn;
       const emailType = 'an email type';
       const mailingInfo = {
         name: 'my name',
         email: 'my@email',
       };
-      const variables = [1, 2, 3];
+      const variables = [];
 
-      sendTxnEmail(mailingInfo, emailType, variables);
+      sendTxn(mailingInfo, emailType, variables);
+      expect(got.post).to.be.called;
       expect(got.post).to.be.calledWith('undefined/job', sinon.match({
         json: {
           data: {

test/api/unit/libs/payments/payments.test.js

@@ -247,11 +247,11 @@ describe('payments/index', () => {
 
       context('No Active Promotion', () => {
         beforeEach(() => {
-          sinon.stub(worldState, 'getCurrentEvent').returns(null);
+          sinon.stub(worldState, 'getCurrentEventList').returns([]);
         });
 
         afterEach(() => {
-          worldState.getCurrentEvent.restore();
+          worldState.getCurrentEventList.restore();
         });
 
         it('sends a private message about the gift', async () => {
@@ -268,14 +268,14 @@ describe('payments/index', () => {
 
       context('Active Promotion', () => {
         beforeEach(() => {
-          sinon.stub(worldState, 'getCurrentEvent').returns({
+          sinon.stub(worldState, 'getCurrentEventList').returns([{
             ...common.content.events.winter2021Promo,
             event: 'winter2021',
-          });
+          }]);
         });
 
         afterEach(() => {
-          worldState.getCurrentEvent.restore();
+          worldState.getCurrentEventList.restore();
         });
 
         it('creates a gift subscription for purchaser and recipient if none exist', async () => {

test/api/v3/integration/challenges/PUT-challenges_challengeId.test.js

@@ -74,7 +74,6 @@ describe('PUT /challenges/:challengeId', () => {
     expect(res.memberCount).to.equal(2);
     expect(res.tasksOrder).not.to.equal('new order');
     expect(res.official).to.equal(false);
-    expect(res.shortName).not.to.equal('new short name');
 
     expect(res.leader).to.eql({
       _id: user._id,

test/api/v4/POST-bug-report.test.js

@@ -0,0 +1,49 @@
+import {
+  generateUser,
+} from '../../helpers/api-integration/v4';
+
+describe('POST /bug-report', () => {
+  let user;
+
+  beforeEach(async () => {
+    user = await generateUser();
+  });
+
+  it('returns an error when message is not added', async () => {
+    await expect(user.post('/bug-report', {
+      message: '',
+    }))
+      .to.eventually.be.rejected.and.to.eql({
+        code: 400,
+        error: 'BadRequest',
+        // seems it is not possible to get the real error message
+        message: 'Invalid request parameters.',
+      });
+  });
+
+  it('returns an error when email is not added', async () => {
+    await expect(user.post('/bug-report', {
+      message: 'message',
+      email: '',
+    }))
+      .to.eventually.be.rejected.and.to.eql({
+        code: 400,
+        error: 'BadRequest',
+        // seems it is not possible to get the real error message
+        message: 'Invalid request parameters.',
+      });
+  });
+
+  it('returns an error when email is not valid', async () => {
+    await expect(user.post('/bug-report', {
+      message: 'message',
+      email: 'notamail',
+    }))
+      .to.eventually.be.rejected.and.to.eql({
+        code: 400,
+        error: 'BadRequest',
+        // seems it is not possible to get the real error message
+        message: 'Invalid request parameters.',
+      });
+  });
+});

website/client/config/storybook/config.js

@@ -40,6 +40,18 @@ store.state.user.data = {
   preferences: {
 
   },
+  auth: {
+    local: {
+      // email: 'example@example.com',
+    },
+    facebook: {
+      emails: [
+        {
+          value: 'test@test.de',
+        },
+      ],
+    },
+  },
 };
 
 Vue.prototype.$store = store;

website/client/package.json

@@ -13,26 +13,26 @@
     "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
   },
   "dependencies": {
-    "@storybook/addons": "6.3.12",
-    "@storybook/addon-actions": "6.3.12",
+    "@storybook/addons": "6.4.17",
+    "@storybook/addon-actions": "6.4.17",
     "@storybook/addon-knobs": "6.2.9",
-    "@storybook/addon-links": "6.3.12",
+    "@storybook/addon-links": "6.4.17",
     "@storybook/addon-notes": "5.3.21",
-    "@storybook/vue": "6.3.12",
+    "@storybook/vue": "6.3.13",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-plugin-router": "^4.5.15",
     "@vue/cli-plugin-unit-mocha": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^8.13.1",
-    "axios": "^0.24.0",
+    "amplitude-js": "^8.16.1",
+    "axios": "^0.25.0",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.21.2",
-    "chai": "^4.3.4",
-    "core-js": "^3.19.2",
+    "chai": "^4.3.6",
+    "core-js": "^3.20.3",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
@@ -64,6 +64,6 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.16.0"
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7"
   }
 }

website/client/src/app.vue

@@ -33,6 +33,8 @@
       <payments-success-modal />
       <sub-cancel-modal-confirm v-if="isUserLoaded" />
       <sub-canceled-modal v-if="isUserLoaded" />
+      <bug-report-modal v-if="isUserLoaded" />
+      <bug-report-success-modal v-if="isUserLoaded" />
       <snackbars />
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
       <template v-else>
@@ -177,6 +179,10 @@ import {
   removeLocalSetting,
 } from '@/libs/userlocalManager';
 
+const bugReportModal = () => import(/* webpackChunkName: "bug-report-modal" */'@/components/bugReportModal');
+const bugReportSuccessModal = () => import(/* webpackChunkName: "bug-report-success-modal" */'@/components/bugReportSuccessModal');
+
+
 const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
@@ -196,6 +202,8 @@ export default {
     paymentsSuccessModal,
     subCancelModalConfirm,
     subCanceledModal,
+    bugReportModal,
+    bugReportSuccessModal,
   },
   mixins: [notifications, spellsMixin],
   data () {

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

@@ -1,48 +1,48 @@
 .achievement-alien {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1659px -1480px;
+  background-position: -1679px -1480px;
   width: 24px;
   height: 26px;
 }
 .achievement-alien2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -583px -1549px;
+  background-position: -632px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-allThatGlitters2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -715px -1480px;
+  background-position: -784px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-allYourBase2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -780px -1480px;
+  background-position: -849px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-alpha2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -632px -1549px;
+  background-position: -681px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-aridAuthority2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -845px -1480px;
+  background-position: -914px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-armor2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -681px -1549px;
+  background-position: -730px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-backToBasics2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1365px -1480px;
+  background-position: -1434px -1480px;
   width: 48px;
   height: 56px;
 }
@@ -54,127 +54,127 @@
 }
 .achievement-bewilder2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -730px -1549px;
+  background-position: -779px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-birthday2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -779px -1549px;
+  background-position: -828px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-boneCollector2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1414px -1480px;
+  background-position: -1483px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-boot2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -828px -1549px;
+  background-position: -877px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-bow2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -877px -1549px;
+  background-position: -926px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-bugBonanza2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -349px -1480px;
+  background-position: -418px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-burnout2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -926px -1549px;
+  background-position: -975px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cactus2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -975px -1549px;
+  background-position: -1024px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cake2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1024px -1549px;
+  background-position: -1073px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-cave2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1073px -1549px;
+  background-position: -1122px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-challenge2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1122px -1549px;
+  background-position: -1171px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-comment2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1171px -1549px;
+  background-position: -1220px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-completedTask2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1463px -1480px;
+  background-position: -1532px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-congrats2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1220px -1549px;
+  background-position: -1269px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-costumeContest2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1269px -1549px;
+  background-position: -1318px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-createdTask2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1512px -1480px;
+  background-position: -1581px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-dilatory2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1318px -1549px;
+  background-position: -1367px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-domesticated2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -410px -1480px;
+  background-position: -479px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-dustDevil2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1561px -1480px;
+  background-position: -1630px -1480px;
   width: 48px;
   height: 56px;
 }
 .achievement-dysheartener2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1367px -1549px;
+  background-position: -1416px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-fedPet2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1610px -1480px;
+  background-position: -142px -1549px;
   width: 48px;
   height: 56px;
 }
@@ -186,79 +186,79 @@
 }
 .achievement-friends2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1416px -1549px;
+  background-position: -1465px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-getwell2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1465px -1549px;
+  background-position: -1514px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-goodAsGold2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1549px;
+  background-position: -191px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-goodluck2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1514px -1549px;
+  background-position: -1563px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-greeting2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1563px -1549px;
+  background-position: -1612px -1549px;
   width: 48px;
   height: 52px;
 }
 .achievement-guild2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1612px -1549px;
+  background-position: 0px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-habitBirthday2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1628px;
+  background-position: -49px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-habiticaDay2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -49px -1628px;
+  background-position: -98px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-hatchedPet2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -191px -1549px;
+  background-position: -240px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-heart2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -98px -1628px;
+  background-position: -147px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-justAddWater2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -471px -1480px;
+  background-position: -540px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-karaoke-2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -147px -1628px;
+  background-position: -196px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-karaoke {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1659px -1507px;
+  background-position: -1679px -1507px;
   width: 24px;
   height: 26px;
 }
@@ -270,274 +270,280 @@
 }
 .achievement-legendaryBestiary2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -532px -1480px;
+  background-position: -601px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-lostMasterclasser2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -196px -1628px;
+  background-position: -245px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-mindOverMatter2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -593px -1480px;
+  background-position: -662px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-monsterMagus2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -240px -1549px;
+  background-position: -289px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-ninja2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -245px -1628px;
+  background-position: -294px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-npc2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -294px -1628px;
+  background-position: -343px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-nye2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -343px -1628px;
+  background-position: -392px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-partyOn2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -392px -1628px;
+  background-position: -441px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-partyUp2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -441px -1628px;
+  background-position: -490px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-pearlyPro2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -910px -1480px;
+  background-position: -979px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-perfect2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -490px -1628px;
+  background-position: -539px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-primedForPainting2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -289px -1549px;
+  background-position: -338px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-purchasedEquipment2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -338px -1549px;
+  background-position: -387px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-rat2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -539px -1628px;
+  background-position: -588px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-redLetterDay2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -975px -1480px;
+  background-position: -1044px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-rosyOutlook2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1040px -1480px;
+  background-position: -1109px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-royally-loyal2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -588px -1628px;
+  background-position: -637px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-seafoam2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -637px -1628px;
+  background-position: -686px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-seasonalSpecialist2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -654px -1480px;
+  background-position: -723px -1480px;
   width: 60px;
   height: 64px;
 }
 .achievement-seeingRed2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -387px -1549px;
+  background-position: -436px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-shadeOfItAll2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1105px -1480px;
+  background-position: -1174px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-shadyCustomer2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -436px -1549px;
+  background-position: -485px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-shield2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -686px -1628px;
+  background-position: -735px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-shinySeed2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -735px -1628px;
+  background-position: -784px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-skeletonCrew2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1170px -1480px;
+  background-position: -1239px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-snowball2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -784px -1628px;
+  background-position: -833px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-spookySparkles2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -833px -1628px;
+  background-position: -882px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-stoikalm2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -882px -1628px;
+  background-position: -931px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-sun2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -931px -1628px;
+  background-position: -980px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-sword2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -980px -1628px;
+  background-position: -1029px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-thankyou2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1029px -1628px;
+  background-position: -1078px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-thermometer2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1078px -1628px;
+  background-position: -1127px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-tickledPink2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -485px -1549px;
+  background-position: -534px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-tree2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1127px -1628px;
+  background-position: -1176px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-triadbingo2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1176px -1628px;
+  background-position: -1225px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-healer2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1225px -1628px;
+  background-position: -1274px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-mage2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1274px -1628px;
+  background-position: -1323px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-rogue2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1323px -1628px;
+  background-position: -1372px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-ultimate-warrior2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1372px -1628px;
+  background-position: -1421px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-undeadUndertaker2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1235px -1480px;
+  background-position: -1304px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-unearned2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1421px -1628px;
+  background-position: -1470px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-valentine2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1470px -1628px;
+  background-position: -1519px -1628px;
   width: 48px;
   height: 52px;
 }
 .achievement-violetsAreBlue2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -534px -1549px;
+  background-position: -583px -1549px;
   width: 48px;
   height: 56px;
 }
 .achievement-wildBlueYonder2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1300px -1480px;
+  background-position: -1369px -1480px;
   width: 64px;
   height: 56px;
 }
 .achievement-wolf2x {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1519px -1628px;
+  background-position: -1568px -1628px;
   width: 48px;
   height: 52px;
 }
+.achievement-zodiac2x {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
+  background-position: -349px -1480px;
+  width: 68px;
+  height: 68px;
+}
 .background_afternoon_picnic {
   background-image: url('~@/assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px 0px;

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

@@ -154,661 +154,661 @@
   width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_iridescent_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
-.background_jungle_canopy {
+.background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_jungle_canopy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
-.background_magic_beanstalk {
+.background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
-.background_magical_candles {
+.background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magical_museum {
+.background_magical_candles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
-.background_marble_temple {
+.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
-.background_market {
+.background_marble_temple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
-.background_meandering_cave {
+.background_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
-.background_medieval_kitchen {
+.background_meandering_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_castle {
+.background_medieval_kitchen {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_clouds {
+.background_meteor_shower {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_lake {
+.background_midnight_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_midnight_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
-.background_mistiflying_circus {
+.background_midnight_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
-.background_monster_makers_workshop {
+.background_mist_shrouded_mountain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_lake {
+.background_mistiflying_circus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_pyramid {
+.background_monster_makers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
-.background_mystical_observatory {
+.background_mountain_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
-.background_night_dunes {
+.background_mountain_pyramid {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
-.background_ocean_sunrise {
+.background_mystical_observatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_night_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
-.background_on_tree_branch {
+.background_ocean_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
-.background_open_waters {
+.background_old_fashioned_bakery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
-.background_orchard {
+.background_on_tree_branch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pagodas {
+.background_open_waters {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.background_park_with_statue {
+.background_orange_grove {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pirate_flag {
+.background_orchard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_pixelists_workshop {
+.background_pagodas {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_potion_shop {
+.background_palm_tree_with_fairy_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.background_productivity_plaza {
+.background_park_with_statue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_carriage {
+.background_pirate_flag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_patch {
+.background_pixelists_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_purple {
+.background_potion_shop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pyramids {
+.background_productivity_plaza {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_raging_river {
+.background_pumpkin_carriage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rainbow_meadow {
+.background_pumpkin_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rainbows_end {
+.background_purple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rainforest {
+.background_pyramids {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_barnyard {
+.background_raging_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_city {
+.background_rainbow_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_red {
+.background_rainbows_end {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_relaxation_river {
+.background_rainforest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_resting_in_the_inn {
+.background_rainy_barnyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px 0px;
   width: 141px;
   height: 147px;
 }
-.background_river_of_lava {
+.background_rainy_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -148px;
   width: 141px;
   height: 147px;
 }
-.background_rolling_hills {
+.background_red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -296px;
   width: 141px;
   height: 147px;
 }
-.background_rope_bridge {
+.background_relaxation_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -444px;
   width: 141px;
   height: 147px;
 }
-.background_rose_garden {
+.background_resting_in_the_inn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -592px;
   width: 141px;
   height: 147px;
 }
-.background_rowboat {
+.background_river_of_lava {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -740px;
   width: 141px;
   height: 147px;
 }
-.background_salt_lake {
+.background_rolling_hills {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -888px;
   width: 141px;
   height: 147px;
 }
-.background_sandcastle {
+.background_rope_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_school_of_fish {
+.background_rose_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_scribes_workshop {
+.background_rowboat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_seafarer_ship {
+.background_salt_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_seaside_cliffs {
+.background_sandcastle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_school_of_fish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_shimmery_bubbles {
+.background_scribes_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_slimy_swamp {
+.background_seafarer_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowglobe {
+.background_seaside_cliffs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowman_army {
+.background_shimmering_ice_prism {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_shimmery_bubbles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_pines {
+.background_slimy_swamp {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px 0px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_sunrise {
+.background_snowglobe {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -148px;
   width: 141px;
   height: 147px;
 }
-.background_south_pole {
+.background_snowman_army {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -296px;
   width: 141px;
   height: 147px;
 }
-.background_sparkling_snowflake {
+.background_snowy_day_fireplace {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -444px;
   width: 141px;
   height: 147px;
 }
-.background_spider_web {
+.background_snowy_farm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -592px;
   width: 141px;
   height: 147px;
 }
-.background_spiral_staircase {
+.background_snowy_pines {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -740px;
   width: 141px;
   height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_snowy_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_hotel {
+.background_south_pole {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_sparkling_snowflake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spring_rain {
+.background_spider_web {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_spring_thaw {
+.background_spiral_staircase {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stable {
+.background_splash_in_a_puddle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stained_glass {
+.background_spooky_hotel {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_starry_skies {
+.background_spooky_scarecrow_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_starry_winter_night {
+.background_spring_rain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_spring_thaw {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stone_circle {
+.background_stable {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stone_tower {
+.background_stained_glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_rooftops {
+.background_starry_skies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_ship {
+.background_starry_winter_night {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_strange_sewers {
+.background_stoikalm_volcanoes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
-.background_strawberry_patch {
+.background_stone_circle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
-.background_succulent_garden {
+.background_stone_tower {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
-.background_summer_fireworks {
+.background_stormy_rooftops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
-.background_sunken_ship {
+.background_stormy_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_meadow {
+.background_strange_sewers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_oasis {
+.background_strawberry_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_savannah {
+.background_succulent_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_swarming_darkness {
+.background_summer_fireworks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_sunken_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tar_pits {
+.background_sunset_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tavern {
+.background_sunset_oasis {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tea_party {
+.background_sunset_savannah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_terraced_rice_field {
+.background_swarming_darkness {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_throne_room {
+.background_swimming_among_jellyfish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_thunderstorm {
+.background_tar_pits {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tide_pool {
+.background_tavern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tornado {
+.background_tea_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_toymakers_workshop {
+.background_terraced_rice_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_training_grounds {
+.background_throne_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_treasure_room {
+.background_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_tree_roots {
+.background_tide_pool {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_treehouse {
+.background_tornado {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px 0px;
   width: 141px;
   height: 147px;
 }
-.background_tulip_garden {
+.background_toymakers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -148px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_lights {
+.background_training_grounds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -296px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_party_lights {
+.background_treasure_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -444px;
   width: 141px;

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

@@ -1,126 +1,240 @@
-.quest_bunny {
+.npc_matt {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1546px;
-  width: 210px;
-  height: 186px;
+  background-position: -1150px -1519px;
+  width: 195px;
+  height: 138px;
 }
-.quest_butterfly {
+.npc_matt_habitoween {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1355px -1332px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_nye {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1551px -1332px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_spring {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -366px -1519px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_summer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -562px -1519px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_thanksgiving {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -758px -1519px;
+  width: 195px;
+  height: 138px;
+}
+.npc_matt_winter {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -954px -1519px;
+  width: 195px;
+  height: 138px;
+}
+.quest_alligator {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1540px -1079px;
+  width: 201px;
+  height: 213px;
+}
+.quest_amber {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -220px 0px;
   width: 219px;
   height: 219px;
 }
-.quest_cheetah {
+.quest_armadillo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -440px 0px;
   width: 219px;
   height: 219px;
 }
-.quest_cow {
+.quest_atom1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px 0px;
-  width: 174px;
-  height: 213px;
-}
-.quest_dilatory {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -232px;
-  width: 219px;
-  height: 219px;
-}
-.quest_dilatoryDistress1 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -222px -1332px;
-  width: 210px;
-  height: 210px;
-}
-.quest_dilatoryDistress2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -422px;
-  width: 150px;
+  background-position: -645px -1332px;
+  width: 250px;
   height: 150px;
 }
-.quest_dilatoryDistress3 {
+.quest_atom2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -232px;
-  width: 219px;
-  height: 219px;
+  background-position: -1147px -1332px;
+  width: 207px;
+  height: 138px;
 }
-.quest_dilatory_derby {
+.quest_atom3 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -211px -1332px;
+  width: 216px;
+  height: 180px;
+}
+.quest_axolotl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: 0px -232px;
   width: 219px;
   height: 219px;
 }
-.quest_dolphin {
+.quest_badger {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -220px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_basilist {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -1733px;
+  width: 189px;
+  height: 141px;
+}
+.quest_beetle {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -662px -1112px;
+  width: 204px;
+  height: 201px;
+}
+.quest_blackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1540px 0px;
+  width: 216px;
+  height: 216px;
+}
+.quest_bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -440px -232px;
+  width: 219px;
+  height: 219px;
+}
+.quest_bunny {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -1332px;
+  width: 210px;
+  height: 186px;
+}
+.quest_butterfly {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -660px 0px;
   width: 219px;
   height: 219px;
 }
-.quest_dustbunnies {
+.quest_cheetah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -660px -220px;
   width: 219px;
   height: 219px;
 }
-.quest_egg {
+.quest_cow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -214px;
-  width: 165px;
-  height: 207px;
+  background-position: 0px -1519px;
+  width: 174px;
+  height: 213px;
 }
-.quest_evilsanta {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -724px;
-  width: 118px;
-  height: 131px;
-}
-.quest_evilsanta2 {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -452px;
-  width: 219px;
-  height: 219px;
-}
-.quest_falcon {
+.quest_dilatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -220px -452px;
   width: 219px;
   height: 219px;
 }
-.quest_ferret {
+.quest_dilatoryDistress1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1540px -868px;
+  width: 210px;
+  height: 210px;
+}
+.quest_dilatoryDistress2 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1757px -208px;
+  width: 150px;
+  height: 150px;
+}
+.quest_dilatoryDistress3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -440px -452px;
   width: 219px;
   height: 219px;
 }
-.quest_fluorite {
+.quest_dilatory_derby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -452px;
+  width: 219px;
+  height: 219px;
+}
+.quest_dolphin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -660px -452px;
   width: 219px;
   height: 219px;
 }
-.quest_frog {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1332px;
-  width: 221px;
-  height: 213px;
-}
-.quest_ghost_stag {
+.quest_dustbunnies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -880px 0px;
   width: 219px;
   height: 219px;
 }
-.quest_goldenknight1 {
+.quest_egg {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1757px 0px;
+  width: 165px;
+  height: 207px;
+}
+.quest_evilsanta {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -1757px -510px;
+  width: 118px;
+  height: 131px;
+}
+.quest_evilsanta2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
   background-position: -880px -220px;
   width: 219px;
   height: 219px;
 }
+.quest_falcon {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -880px -440px;
+  width: 219px;
+  height: 219px;
+}
+.quest_ferret {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: 0px -672px;
+  width: 219px;
+  height: 219px;
+}
+.quest_fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -220px -672px;
+  width: 219px;
+  height: 219px;
+}
+.quest_frog {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -440px -1112px;
+  width: 221px;
+  height: 213px;
+}
+.quest_ghost_stag {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -440px -672px;
+  width: 219px;
+  height: 219px;
+}
+.quest_goldenknight1 {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
+  background-position: -660px -672px;
+  width: 219px;
+  height: 219px;
+}
 .quest_goldenknight2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -211px -1546px;
+  background-position: -896px -1332px;
   width: 250px;
   height: 150px;
 }
@@ -132,259 +246,163 @@
 }
 .quest_gryphon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -876px -1332px;
+  background-position: -1310px -1112px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -440px;
+  background-position: -880px -672px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -672px;
+  background-position: -1100px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -433px -1332px;
+  background-position: -867px -1112px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -672px;
+  background-position: -1100px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -672px;
+  background-position: -1100px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -672px;
+  background-position: -1100px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1093px -1332px;
+  background-position: -428px -1332px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -672px;
+  background-position: 0px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px 0px;
+  background-position: -220px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -220px;
+  background-position: -440px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1760px -573px;
+  background-position: -1757px -359px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -440px;
+  background-position: -660px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -660px;
+  background-position: -880px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -892px;
+  background-position: -1100px -892px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -220px;
+  background-position: -1540px -217px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -892px;
+  background-position: -1320px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -892px;
+  background-position: -1320px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -892px;
+  background-position: -1320px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -892px;
+  background-position: -1320px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -892px;
+  background-position: -1320px -880px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -437px;
+  background-position: -1540px -434px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -653px -1332px;
+  background-position: -1087px -1112px;
   width: 222px;
   height: 177px;
 }
 .quest_onyx {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px 0px;
+  background-position: 0px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_owl {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -220px;
+  background-position: -220px -1112px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -654px;
+  background-position: -1540px -651px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1733px;
+  background-position: -175px -1519px;
   width: 190px;
   height: 183px;
 }
-.quest_pterodactyl {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -440px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rat {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -660px;
-  width: 219px;
-  height: 219px;
-}
-.quest_robot {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -880px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rock {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -871px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1527px -1332px;
-  width: 213px;
-  height: 174px;
-}
-.quest_ruby {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: 0px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sabretooth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -220px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_seaserpent {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -440px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -660px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_silver {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -880px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_slime {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1100px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sloth {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1320px -1112px;
-  width: 219px;
-  height: 219px;
-}
-.quest_snail {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px -1088px;
-  width: 219px;
-  height: 213px;
-}
-.quest_snake {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1310px -1332px;
-  width: 216px;
-  height: 177px;
-}
-.quest_spider {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -462px -1546px;
-  width: 250px;
-  height: 150px;
-}
-.quest_squirrel {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-15.png');
-  background-position: -1540px 0px;
-  width: 219px;
-  height: 219px;
-}

website/client/src/assets/svg/check_circle.svg

@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <circle fill="#1CA372" cx="32" cy="32" r="32"/>
+        <path d="M27.277 46a3.34 3.34 0 0 1-2.367-.98L14 34.11l4.733-4.733 8.356 8.356L43.999 18l5.084 4.354L29.82 44.832a3.366 3.366 0 0 1-2.415 1.165c-.043.003-.086.003-.128.003" fill="#FFF"/>
+    </g>
+</svg>

website/client/src/components/appFooter.vue

@@ -82,9 +82,17 @@
                 {{ $t('hall') }}
               </router-link>
             </li>
-            <li>
+            <li v-if="user">
               <a
-                :href="bugReportMailto"
+                @click.prevent="openBugReportModal()"
+                target="_blank"
+              >
+                {{ $t('reportBug') }}
+              </a>
+            </li>
+            <li v-else>
+              <a
+                href="mailto:admin@habitica.com?subject=Habitica Web Bug Report"
                 target="_blank"
               >
                 {{ $t('reportBug') }}

website/client/src/components/bug-report-modal.stories.js

@@ -0,0 +1,43 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+
+import bugReportModal from '@/components/bugReportModal';
+import bugReportSuccessModal from '@/components/bugReportSuccessModal';
+
+const stories = storiesOf('Bug Report Modal', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('bugReportModal', () => ({
+    components: { bugReportModal },
+    data () {
+      return {
+      };
+    },
+    template: `  
+      <div> 
+        <bug-report-modal></bug-report-modal>
+      </div>
+    `,
+    mounted () {
+      this.$root.$emit('bv::show::modal', 'bug-report-modal');
+    },
+  }))
+  .add('bugReportSuccessModal', () => ({
+    components: { bugReportSuccessModal },
+    data () {
+      return {
+      };
+    },
+    template: `  
+      <div> 
+        <bug-report-success-modal></bug-report-success-modal>
+      </div>
+    `,
+    mounted () {
+      this.$root.$emit('bv::show::modal', 'bug-report-success-modal');
+    },
+  }));

website/client/src/components/bugReportModal.vue

@@ -0,0 +1,243 @@
+<template>
+  <b-modal
+    :id="modalId"
+    size="md"
+    :hide-footer="true"
+  >
+    <div
+      slot="modal-header"
+      class="bug-report-modal-header"
+    >
+      <h2 v-once>
+        {{ $t('reportBug') }}
+      </h2>
+
+      <div v-once class="report-bug-header-describe">
+        {{ $t('reportBugHeaderDescribe') }}
+      </div>
+
+      <div class="dialog-close">
+        <close-icon @click="close()" :purple="true"/>
+      </div>
+    </div>
+    <div>
+      <form
+        class="form"
+        @submit.prevent.stop="sendBugReport()"
+      >
+        <div
+          class="form-group"
+        >
+          <label
+            v-once
+            for="emailInput"
+          >
+            {{ $t('email') }}
+          </label>
+          <div class="mb-2 description-label" v-once>
+            {{ $t('reportEmailText') }}
+          </div>
+          <input
+            id="emailInput"
+            v-model="email"
+            class="form-control"
+            type="email"
+            :required="true"
+            :placeholder="$t('reportEmailPlaceholder')"
+            :class="{'input-invalid': emailInvalid, 'input-valid': emailValid}"
+          >
+
+          <div class="error-label mt-2" v-if="emailInvalid">
+            {{ $t('reportEmailError') }}
+          </div>
+        </div>
+
+        <label v-once>
+          {{ $t('reportDescription') }}
+        </label>
+        <div class="mb-2 description-label" v-once>
+          {{ $t('reportDescriptionText') }}
+        </div>
+        <textarea
+          v-model="message"
+          class="form-control"
+          rows="5"
+          :required="true"
+          :placeholder="$t('reportDescriptionPlaceholder')"
+          :class="{'input-invalid': messageInvalid && this.message.length === 0}"
+        >
+
+        </textarea>
+
+        <button
+          class="btn btn-primary submit-button btn-block mx-auto mt-4"
+          type="submit"
+          :disabled="!message || !emailValid"
+        >
+          {{ $t('submitBugReport') }}
+        </button>
+      </form>
+    </div>
+    <div class="modal-footer">
+      <a
+        class="cancel-link mx-auto mb-4"
+        @click.prevent="close()"
+      >
+        {{ $t('cancel') }}
+      </a>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+#bug-report-modal {
+  .modal-header {
+    padding: 0;
+    border: none;
+  }
+
+  .modal-dialog {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    overflow: auto;
+  }
+
+  .modal-body {
+    padding-top: 1rem;
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    padding-bottom: 0;
+  }
+
+  .modal-footer {
+    border-top: 0;
+    padding-bottom: 0;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+@import '~@/assets/scss/colors.scss';
+
+h2 {
+  color: $white;
+}
+
+.bug-report-modal-header {
+  color: $white;
+  width: 100%;
+  padding: 2rem 3rem 1.5rem 1.5rem;
+
+  background-image: linear-gradient(288deg, #{$purple-200}, #{$purple-300});
+}
+
+.report-bug-header-describe {
+  font-size: 14px;
+  line-height: 1.71;
+  color: $purple-600;
+}
+
+label {
+  font-weight: bold;
+  line-height: 1.71;
+  color: $gray-50;
+}
+
+.cancel-link {
+  color: $blue-10;
+  line-height: 1.71;
+}
+
+.submit-button {
+  width: auto;
+}
+
+.error-label {
+  font-size: 12px;
+  line-height: 1.33;
+  color: $maroon-10;
+}
+
+.description-label {
+  font-size: 12px;
+  line-height: 1.33;
+  color: $gray-100;
+}
+</style>
+
+<script>
+import axios from 'axios';
+import isEmail from 'validator/lib/isEmail';
+import closeIcon from '@/components/shared/closeIcon';
+import { mapState } from '@/libs/store';
+import { MODALS } from '@/libs/consts';
+
+export default {
+  components: {
+    closeIcon,
+  },
+  data () {
+    return {
+      message: '',
+      email: '',
+      messageInvalid: false,
+      modalId: MODALS.BUG_REPORT,
+    };
+  },
+  methods: {
+    async sendBugReport () {
+      this.messageInvalid = false;
+
+      if (this.message.length === 0) {
+        this.messageInvalid = true;
+
+        return;
+      }
+
+      await axios.post('/api/v4/bug-report', {
+        message: this.message,
+        email: this.email,
+      });
+
+      this.message = '';
+
+      this.close();
+
+      this.$root.$emit('bv::show::modal', MODALS.BUG_REPORT_SUCCESS);
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', MODALS.BUG_REPORT);
+    },
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+    emailValid () {
+      if (this.email.length <= 3) return false;
+      return isEmail(this.email);
+    },
+    emailInvalid () {
+      if (this.email.length <= 3) return false;
+      return !this.emailValid;
+    },
+  },
+  mounted () {
+    const { user } = this;
+
+    let email = user.auth?.local?.email;
+
+    if (!email && user.auth?.facebook?.emails) {
+      email = user.auth.facebook.emails?.[0]?.value;
+    }
+
+    if (!email && user.auth?.google?.emails) {
+      email = user.auth.google.emails?.[0]?.value;
+    }
+
+    if (!email && user.auth?.apple?.emails) {
+      email = user.auth.apple.emails?.[0]?.value;
+    }
+
+    this.email = email;
+  },
+};
+</script>

website/client/src/components/bugReportSuccessModal.vue

@@ -0,0 +1,154 @@
+<template>
+  <b-modal
+    :id="modalId"
+    size="md"
+    :hide-footer="true"
+  >
+    <div
+      slot="modal-header"
+      class="bug-report-modal-header"
+    >
+      <div class="green-bar"></div>
+
+      <div class="sub-header position-relative">
+        <div class="dialog-close">
+          <close-icon @click="close()" />
+        </div>
+      </div>
+    </div>
+    <div>
+      <span class="svg-icon check-icon"
+            v-html="icons.checkCircleIcon"
+      ></span>
+
+      <div class="title" v-once>
+        {{ $t('reportSent') }}
+      </div>
+
+      <div class="text mt-3 mb-4" v-once>
+        {{ $t('reportSentDescription') }}
+      </div>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss">
+#bug-report-success-modal {
+
+  .modal-header {
+    padding: 0;
+    border: none;
+  }
+
+  .modal-content {
+    border: 0;
+  }
+
+  .modal-dialog {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    overflow: auto;
+    width: 330px;
+  }
+
+  .modal-body {
+    padding: 0 1.5rem;
+  }
+
+  .modal-footer {
+    border-top: 0;
+    padding-bottom: 0;
+  }
+}
+</style>
+
+<style scoped lang="scss">
+@import '~@/assets/scss/colors.scss';
+
+h2 {
+  color: $white;
+}
+
+.bug-report-modal-header {
+  width: 100%;
+
+  .green-bar {
+    height: 8px;
+    width: 100%;
+    background-color: $green-10;
+  }
+}
+
+.check-icon {
+  width: 64px;
+  height: 64px;
+
+  margin: 0 auto;
+  margin-top: -0.25rem;
+}
+
+.report-bug-header-describe {
+  font-size: 14px;
+  line-height: 1.71;
+  color: $purple-600;
+}
+
+label {
+  font-weight: bold;
+  line-height: 1.71;
+  color: $gray-50;
+}
+
+.cancel-link {
+  color: $blue-10;
+  line-height: 1.71;
+}
+
+.submit-button {
+  width: auto;
+}
+
+.error-label {
+  font-size: 12px;
+  line-height: 1.33;
+  color: $maroon-10;
+}
+
+.description-label {
+  font-size: 12px;
+  line-height: 1.33;
+  color: $gray-100;
+}
+
+.text {
+  min-height: 0;
+}
+
+</style>
+
+<script>
+import closeIcon from '@/components/shared/closeIcon';
+import checkCircleIcon from '@/assets/svg/check_circle.svg';
+import { MODALS } from '@/libs/consts';
+
+export default {
+  components: {
+    closeIcon,
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        checkCircleIcon,
+      }),
+      modalId: MODALS.BUG_REPORT_SUCCESS,
+    };
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', MODALS.BUG_REPORT_SUCCESS);
+    },
+  },
+  computed: {},
+  mounted () {},
+};
+</script>

website/client/src/components/creatorIntro.vue

@@ -121,7 +121,7 @@
             v-if="editing"
             class="menu-container col-2"
             :class="{active: activeTopPage === 'backgrounds'}"
-            @click="changeTopPage('backgrounds', '2021')"
+            @click="changeTopPage('backgrounds', '2022')"
           >
             <div class="menu-item">
               <div
@@ -1184,7 +1184,7 @@ export default {
         },
       ],
 
-      bgSubMenuItems: ['2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014'].map(y => ({
+      bgSubMenuItems: ['2022', '2021', '2020', '2019', '2018', '2017', '2016', '2015', '2014'].map(y => ({
         id: y,
         label: y,
       })),
@@ -1212,6 +1212,7 @@ export default {
         2019: [],
         2020: [],
         2021: [],
+        2022: [],
       };
 
       // Hack to force update for now until we restructure the data

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

@@ -27,7 +27,7 @@
           @keydown.tab="handleTab($event)"
           @keydown.up="selectPreviousAutocomplete($event)"
           @keydown.down="selectNextAutocomplete($event)"
-          @keydown.enter="selectAutocomplete($event)"
+          @keypress.enter="selectAutocomplete($event)"
           @keydown.esc="handleEscape($event)"
           @paste="disableMessageSendShortcut()"
         ></textarea>
@@ -247,8 +247,13 @@ export default {
 
     selectAutocomplete (e) {
       if (this.$refs.autocomplete.searchActive) {
-        e.preventDefault();
-        this.$refs.autocomplete.makeSelection();
+        if (this.$refs.autocomplete.selected !== null) {
+          e.preventDefault();
+          this.$refs.autocomplete.makeSelection();
+        } else {
+          // no autocomplete selected, newline instead
+          this.$refs.autocomplete.cancel();
+        }
       }
     },
 

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

@@ -311,6 +311,7 @@ import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
 import QuestDetailModal from './questDetailModal';
 import RightSidebar from '@/components/groups/rightSidebar';
 import InvitationListModal from './invitationListModal';
+import { PAGES } from '@/libs/consts';
 
 export default {
   components: {
@@ -554,7 +555,7 @@ export default {
       this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },
     messageLeader () {
-      window.open(`/private-messages?uuid=${this.group.leader.id}`);
+      window.open(`${PAGES.PRIVATE_MESSAGES}?uuid=${this.group.leader.id}`);
     },
   },
 };

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

@@ -389,6 +389,7 @@ import messageIcon from '@/assets/members/message.svg';
 import starIcon from '@/assets/members/star.svg';
 import dots from '@/assets/svg/dots.svg';
 import SelectList from '@/components/ui/selectList';
+import { PAGES } from '@/libs/consts';
 
 export default {
   components: {
@@ -558,7 +559,7 @@ export default {
       });
 
       this.$root.$emit('bv::hide::modal', 'members-modal');
-      this.$router.push('/private-messages');
+      this.$router.push(PAGES.PRIVATE_MESSAGES);
     },
     async searchMembers (searchTerm = '') {
       this.members = await this.$store.state.memberModalOptions.fetchMoreMembers({

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

@@ -361,7 +361,7 @@
             </li>
             <li>
               <a
-                :href="bugReportMailto"
+                @click.prevent="openBugReportModal()"
                 target="_blank"
               >
                 {{ $t('reportBug') }}

website/client/src/components/header/banners/gemsPromo.vue

@@ -89,6 +89,7 @@
 </style>
 
 <script>
+import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';
 
@@ -98,8 +99,11 @@ export default {
   },
   computed: {
     ...mapState({
-      currentEvent: 'worldState.data.currentEvent',
+      currentEventList: 'worldState.data.currentEventList',
     }),
+    currentEvent () {
+      return find(this.currentEventList, event => Boolean(event.gemsPromo));
+    },
     eventName () {
       return this.currentEvent && this.currentEvent.event;
     },

website/client/src/components/header/banners/giftPromo.vue

@@ -63,6 +63,7 @@
 </style>
 
 <script>
+import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';
 
@@ -74,8 +75,11 @@ export default {
   },
   computed: {
     ...mapState({
-      currentEvent: 'worldState.data.currentEvent',
+      currentEventList: 'worldState.data.currentEventList',
     }),
+    currentEvent () {
+      return find(this.currentEventList, event => Boolean(event.promo));
+    },
     eventName () {
       return this.currentEvent && this.currentEvent.event;
     },

website/client/src/components/header/menu.vue

@@ -311,7 +311,7 @@
               </router-link>
               <a
                 class="topbar-dropdown-item dropdown-item"
-                :href="bugReportMailto"
+                @click.prevent="openBugReportModal()"
                 target="_blank"
               >
                 {{ $t('reportBug') }}

website/client/src/components/header/notifications/newPrivateMessage.vue

@@ -17,6 +17,7 @@
 
 <script>
 import BaseNotification from './base';
+import { PAGES } from '@/libs/consts';
 
 export default {
   components: {
@@ -25,7 +26,7 @@ export default {
   props: ['notification', 'canRemove'],
   methods: {
     action () {
-      this.$router.push('/private-messages');
+      this.$router.push(PAGES.PRIVATE_MESSAGES);
     },
   },
 };

website/client/src/components/header/userDropdown.vue

@@ -143,6 +143,7 @@ import userIcon from '@/assets/svg/user.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
 import MessageCount from './messageCount';
 import { EVENTS } from '@/libs/events';
+import { PAGES } from '@/libs/consts';
 
 export default {
   components: {
@@ -170,7 +171,7 @@ export default {
       if (this.$router.history.current.name === 'privateMessages') {
         this.$root.$emit(EVENTS.PM_REFRESH);
       } else {
-        this.$router.push('/private-messages');
+        this.$router.push(PAGES.PRIVATE_MESSAGES);
       }
     },
     showProfile (startingPage) {

website/client/src/components/payments/buyGemsModal.vue

@@ -364,6 +364,7 @@
 </style>
 
 <script>
+import find from 'lodash/find';
 import moment from 'moment';
 import { mapState } from '@/libs/store';
 import markdown from '@/directives/markdown';
@@ -408,8 +409,11 @@ export default {
     ...mapState({
       user: 'user.data',
       originalGemsBlocks: 'content.gems',
-      currentEvent: 'worldState.data.currentEvent',
+      currentEventList: 'worldState.data.currentEventList',
     }),
+    currentEvent () {
+      return find(this.currentEventList, event => Boolean(event.gemsPromo) || Boolean(event.promo));
+    },
     eventName () {
       return this.currentEvent && this.currentEvent.event;
     },

website/client/src/components/payments/selectUserModal.vue

@@ -210,6 +210,7 @@
 
 <script>
 import debounce from 'lodash/debounce';
+import find from 'lodash/find';
 import isUUID from 'validator/lib/isUUID';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';
@@ -227,8 +228,11 @@ export default {
   },
   computed: {
     ...mapState({
-      currentEvent: 'worldState.data.currentEvent',
+      currentEventList: 'worldState.data.currentEventList',
     }),
+    currentEvent () {
+      return find(this.currentEventList, event => Boolean(event.gemsPromo) || Boolean(event.promo));
+    },
     searchCannotSubmit () {
       if (this.userSearchTerm.length < 1) return true;
       return typeof this.foundUser._id === 'undefined';

website/client/src/components/settings/index.vue

@@ -111,6 +111,7 @@
 </style>
 
 <script>
+import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import SecondaryMenu from '@/components/secondaryMenu';
 import gifts from '@/assets/svg/gifts-vertical.svg';
@@ -128,8 +129,11 @@ export default {
   },
   computed: {
     ...mapState({
-      currentEvent: 'worldState.data.currentEvent',
+      currentEventList: 'worldState.data.currentEventList',
     }),
+    currentEvent () {
+      return find(this.currentEventList, event => Boolean(event.promo));
+    },
     promo () {
       if (!this.currentEvent || !this.currentEvent.promo) return 'none';
       return this.currentEvent.promo;

website/client/src/components/shared/closeIcon.vue

@@ -2,6 +2,11 @@
   <button
     title="close dialog"
     @click="$emit('click', $event)"
+    :style="{
+      '--icon-color': iconColor,
+      '--icon-color-hover': iconColorHover,
+    }"
+    :class="{'purple': purple}"
   >
     <div
       v-once
@@ -16,6 +21,7 @@ import svgClose from '@/assets/svg/close.svg';
 
 export default {
   name: 'CloseIcon',
+  props: ['iconColor', 'iconColorHover', 'purple'],
   data () {
     return {
       icons: Object.freeze({
@@ -43,13 +49,18 @@ export default {
     width: 1rem;
     height: 1rem;
 
+    &.purple {
+      --icon-color: #{$purple-400};
+      --icon-color-hover: #{$purple-500};
+    }
+
     ::v-deep svg path {
-      stroke: $gray-200;
+      stroke: var(--icon-color, #{$gray-200});
     }
 
     &:hover {
       ::v-deep svg path {
-        stroke: $gray-100;
+        stroke: var(--icon-color-hover, #{$gray-100});
       }
     }
   }