4.87.2

This reverts commit 3ebd37f7cb.

.github/CONTRIBUTING.md

@@ -4,7 +4,7 @@
 
 # Pull Request
 
-[Please see these instructions for adding a pull request](http://habitica.wikia.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API)
+[Please see these instructions for adding a pull request](http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API)
 
 # Requesting a feature
 
@@ -12,4 +12,4 @@ Habitica uses [Trello](https://trello.com/b/EpoYEYod/habitica) to track feature
 
 # Contributing Code
 
-See [Contributing to Habitica](http://habitica.wikia.com/wiki/Contributing_to_Habitica#Coders_.28Web_.26_Mobile.29)
+See [Contributing to Habitica](http://habitica.fandom.com/wiki/Contributing_to_Habitica#Coders_.28Web_.26_Mobile.29)

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-[//]: # (Note: See http://habitica.wikia.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API for more info)
+[//]: # (Note: See http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API for more info)
 
 [//]: # (Put Issue # here, if applicable. This will automatically close the issue if your PR is merged in)
 Fixes put_#_and_issue_numer_here

.gitignore

@@ -40,6 +40,7 @@ test/client/unit/coverage
 test/client/e2e/reports
 test/client-old/spec/mocks/translations.js
 yarn.lock
+.gitattributes
 
 # Elastic Beanstalk Files
 .elasticbeanstalk/*

README.md

@@ -7,6 +7,6 @@ Habitica [![Build Status](https://travis-ci.org/HabitRPG/habitica.svg?branch=dev
 
 We need more programmers! Your assistance will be greatly appreciated.
 
-For an introduction to the technologies used and how the software is organized, refer to [Guidance for Blacksmiths](http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths).
+For an introduction to the technologies used and how the software is organized, refer to [Guidance for Blacksmiths](http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths).
 
-To set up a local install of Habitica for development and testing on various platforms, see [Setting up Habitica Locally](http://habitica.wikia.com/wiki/Setting_up_Habitica_Locally).
+To set up a local install of Habitica for development and testing on various platforms, see [Setting up Habitica Locally](http://habitica.fandom.com/wiki/Setting_up_Habitica_Locally).

VAGRANT.md

@@ -8,4 +8,4 @@ minimal dependencies on the developer's local platform. It can be used
 on a variety of systems including Windows, Mac OS X, and Linux.
 
 Instructions for using the Habitica Vagrant environment are in
-[Setting up Habitica Locally](http://habitica.wikia.com/wiki/Setting_up_Habitica_Locally).
+[Setting up Habitica Locally](http://habitica.fandom.com/wiki/Setting_up_Habitica_Locally).

config.json.example

@@ -78,5 +78,6 @@
   "TEST_DB_URI": "mongodb://localhost/habitrpg_test",
   "TRANSIFEX_SLACK_CHANNEL": "transifex",
   "WEB_CONCURRENCY": 1,
-  "SKIP_SSL_CHECK_KEY": "key"
+  "SKIP_SSL_CHECK_KEY": "key",
+  "ENABLE_STACKDRIVER_TRACING": "false"
 }

migrations/archive/2017/20170111_announce_collection_quest_change_in_parties.js

@@ -19,7 +19,7 @@ const Timer = require('./utils/timer');
 const connectToDb = require('./utils/connect').connectToDb;
 const closeDb = require('./utils/connect').closeDb;
 
-const message = '`This party\'s collection quest has been made easier! For details, refer to http://habitica.wikia.com/wiki/User_blog:LadyAlys/Collection_Quests_are_Now_Easier`';
+const message = '`This party\'s collection quest has been made easier! For details, refer to http://habitica.fandom.com/wiki/User_blog:LadyAlys/Collection_Quests_are_Now_Easier`';
 
 const timer = new Timer();
 

migrations/users/mystery-items.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-const MIGRATION_NAME = 'mystery_items_201901';
-const MYSTERY_ITEMS = ['head_mystery_201901', 'body_mystery_201901'];
+const MIGRATION_NAME = 'mystery_items_201902';
+const MYSTERY_ITEMS = ['eyewear_mystery_201902', 'shield_mystery_201902'];
 import { model as User } from '../../website/server/models/user';
 import { model as UserNotification } from '../../website/server/models/userNotification';
 

migrations/users/pi-day.js

@@ -0,0 +1,73 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20190314_pi_day';
+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.Pie_Skeleton': 1,
+    'items.food.Pie_Base': 1,
+    'items.food.Pie_CottonCandyBlue': 1,
+    'items.food.Pie_CottonCandyPink': 1,
+    'items.food.Pie_Shade': 1,
+    'items.food.Pie_White': 1,
+    'items.food.Pie_Golden': 1,
+    'items.food.Pie_Zombie': 1,
+    'items.food.Pie_Desert': 1,
+    'items.food.Pie_Red': 1,
+  };
+  const set = {};
+
+  set.migration = MIGRATION_NAME;
+
+  set['items.gear.owned.head_special_piDay'] = false;
+  set['items.gear.owned.shield_special_piDay'] = false;
+  const push = [
+    {type: 'marketGear', path: 'gear.flat.head_special_piDay', _id: uuid()},
+    {type: 'marketGear', path: 'gear.flat.shield_special_piDay', _id: uuid()},
+  ];
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({_id: user._id}, {$inc: inc, $set: set, $push: {pinnedItems: {$each: push}}}).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2019-02-15')},
+  };
+
+  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,17 +1,19 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.82.0",
+  "version": "4.87.2",
   "main": "./website/server/index.js",
   "dependencies": {
+    "@google-cloud/trace-agent": "^3.5.2",
     "@slack/client": "^3.8.1",
     "accepts": "^1.3.5",
     "amazon-payments": "^0.2.7",
     "amplitude": "^3.5.0",
+    "amplitude-js": "^4.6.0-beta.2",
     "apidoc": "^0.17.5",
     "apn": "^2.2.0",
     "autoprefixer": "^8.5.0",
-    "aws-sdk": "^2.329.0",
+    "aws-sdk": "^2.400.0",
     "axios": "^0.18.0",
     "axios-progress-bar": "^1.2.0",
     "babel-core": "^6.26.3",
@@ -29,7 +31,7 @@
     "bcrypt": "^3.0.1",
     "body-parser": "^1.18.3",
     "bootstrap": "^4.1.1",
-    "bootstrap-vue": "^2.0.0-rc.9",
+    "bootstrap-vue": "^2.0.0-rc.13",
     "compression": "^1.7.2",
     "cookie-session": "^1.2.0",
     "coupon-code": "^0.4.5",
@@ -62,12 +64,12 @@
     "method-override": "^3.0.0",
     "moment": "^2.22.1",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.3.4",
+    "mongoose": "^5.4.11",
     "morgan": "^1.7.0",
     "nconf": "^0.10.0",
     "node-gcm": "^1.0.2",
     "node-sass": "^4.9.0",
-    "nodemailer": "^4.6.4",
+    "nodemailer": "^5.0.0",
     "ora": "^3.0.0",
     "pageres": "^4.1.1",
     "passport": "^0.4.0",
@@ -98,12 +100,12 @@
     "uuid": "^3.0.1",
     "validator": "^10.5.0",
     "vinyl-buffer": "^1.0.1",
-    "vue": "^2.5.16",
+    "vue": "^2.6.4",
     "vue-loader": "^14.2.2",
     "vue-mugen-scroll": "^0.2.1",
     "vue-router": "^3.0.0",
     "vue-style-loader": "^4.1.0",
-    "vue-template-compiler": "^2.5.16",
+    "vue-template-compiler": "^2.6.4",
     "vuedraggable": "^2.15.0",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#5d237615463a84a23dd6f3f77c6ab577d68593ec",
     "webpack": "^3.12.0",
@@ -144,7 +146,7 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.19",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-syntax-object-rest-spread": "^6.13.0",
     "chai": "^4.1.2",

test/README.md

@@ -1 +1 @@
-For information about writing and running tests, see [Using Your Local Install to Modify Habitica's Website and API](http://habitica.wikia.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API).
+For information about writing and running tests, see [Using Your Local Install to Modify Habitica's Website and API](http://habitica.fandom.com/wiki/Using_Your_Local_Install_to_Modify_Habitica%27s_Website_and_API).

test/api/unit/libs/slack.js

@@ -32,6 +32,7 @@ describe('slack', () => {
         },
         message: {
           id: 'chat-id',
+          username: 'author',
           user: 'Author',
           uuid: 'author-id',
           text: 'some text',
@@ -50,11 +51,11 @@ describe('slack', () => {
 
       expect(IncomingWebhook.prototype.send).to.be.calledOnce;
       expect(IncomingWebhook.prototype.send).to.be.calledWith({
-        text: 'flagger (flagger-id; language: flagger-lang) flagged a message',
+        text: 'flagger (flagger-id; language: flagger-lang) flagged a group message',
         attachments: [{
           fallback: 'Flag Message',
           color: 'danger',
-          author_name: `Author - author@example.com - author-id\n${timestamp}`,
+          author_name: `@author Author (author@example.com; author-id)\n${timestamp}`,
           title: 'Flag in Some group - (private guild)',
           title_link: undefined,
           text: 'some text',

test/api/v3/integration/challenges/GET-challenges_challengeId_export_csv.test.js

@@ -65,11 +65,11 @@ describe('GET /challenges/:challengeId/export/csv', () => {
     const sortedMembers = _.sortBy([members[0], members[1], members[2], groupLeader], '_id');
     const splitRes = res.split('\n');
 
-    expect(splitRes[0]).to.equal('UUID,name,Task,Value,Notes,Streak,Task,Value,Notes,Streak');
-    expect(splitRes[1]).to.equal(`${sortedMembers[0]._id},${sortedMembers[0].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
-    expect(splitRes[2]).to.equal(`${sortedMembers[1]._id},${sortedMembers[1].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
-    expect(splitRes[3]).to.equal(`${sortedMembers[2]._id},${sortedMembers[2].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
-    expect(splitRes[4]).to.equal(`${sortedMembers[3]._id},${sortedMembers[3].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[0]).to.equal('UUID,Display Name,Username,Task,Value,Notes,Streak,Task,Value,Notes,Streak');
+    expect(splitRes[1]).to.equal(`${sortedMembers[0]._id},${sortedMembers[0].profile.name},${sortedMembers[0].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[2]).to.equal(`${sortedMembers[1]._id},${sortedMembers[1].profile.name},${sortedMembers[1].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[3]).to.equal(`${sortedMembers[2]._id},${sortedMembers[2].profile.name},${sortedMembers[2].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[4]).to.equal(`${sortedMembers[3]._id},${sortedMembers[3].profile.name},${sortedMembers[3].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
     expect(splitRes[5]).to.equal('');
   });
 
@@ -78,10 +78,10 @@ describe('GET /challenges/:challengeId/export/csv', () => {
     const res = await members[1].get(`/challenges/${challenge._id}/export/csv`);
     const sortedMembers = _.sortBy([members[1], members[2], groupLeader], '_id');
     const splitRes = res.split('\n');
-    expect(splitRes[0]).to.equal('UUID,name,Task,Value,Notes,Streak,Task,Value,Notes,Streak');
-    expect(splitRes[1]).to.equal(`${sortedMembers[0]._id},${sortedMembers[0].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
-    expect(splitRes[2]).to.equal(`${sortedMembers[1]._id},${sortedMembers[1].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
-    expect(splitRes[3]).to.equal(`${sortedMembers[2]._id},${sortedMembers[2].profile.name},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[0]).to.equal('UUID,Display Name,Username,Task,Value,Notes,Streak,Task,Value,Notes,Streak');
+    expect(splitRes[1]).to.equal(`${sortedMembers[0]._id},${sortedMembers[0].profile.name},${sortedMembers[0].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[2]).to.equal(`${sortedMembers[1]._id},${sortedMembers[1].profile.name},${sortedMembers[1].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
+    expect(splitRes[3]).to.equal(`${sortedMembers[2]._id},${sortedMembers[2].profile.name},${sortedMembers[2].auth.local.username},habit:Task 1,0,,0,todo:Task 2,0,,0`);
     expect(splitRes[4]).to.equal('');
   });
 });

test/api/v3/integration/chat/POST-chat.flag.test.js

@@ -63,11 +63,11 @@ describe('POST /chat/:chatId/flag', () => {
 
     /* eslint-disable camelcase */
     expect(IncomingWebhook.prototype.send).to.be.calledWith({
-      text: `${user.profile.name} (${user.id}; language: en) flagged a message`,
+      text: `${user.profile.name} (${user.id}; language: en) flagged a group message`,
       attachments: [{
         fallback: 'Flag Message',
         color: 'danger',
-        author_name: `${anotherUser.profile.name} - ${anotherUser.auth.local.email} - ${anotherUser._id}\n${timestamp}`,
+        author_name: `@${anotherUser.auth.local.username} ${anotherUser.profile.name} (${anotherUser.auth.local.email}; ${anotherUser._id})\n${timestamp}`,
         title: 'Flag in Test Guild',
         title_link: `${BASE_URL}/groups/guild/${group._id}`,
         text: TEST_MESSAGE,
@@ -98,11 +98,11 @@ describe('POST /chat/:chatId/flag', () => {
 
     /* eslint-disable camelcase */
     expect(IncomingWebhook.prototype.send).to.be.calledWith({
-      text: `${newUser.profile.name} (${newUser.id}; language: en) flagged a message`,
+      text: `${newUser.profile.name} (${newUser.id}; language: en) flagged a group message`,
       attachments: [{
         fallback: 'Flag Message',
         color: 'danger',
-        author_name: `${newUser.profile.name} - ${newUser.auth.local.email} - ${newUser._id}\n${timestamp}`,
+        author_name: `@${newUser.auth.local.username} ${newUser.profile.name} (${newUser.auth.local.email}; ${newUser._id})\n${timestamp}`,
         title: 'Flag in Test Guild',
         title_link: `${BASE_URL}/groups/guild/${group._id}`,
         text: TEST_MESSAGE,

test/api/v3/integration/chat/POST-chat.test.js

@@ -257,7 +257,7 @@ describe('POST /chat', () => {
         attachments: [{
           fallback: 'Slur Message',
           color: 'danger',
-          author_name: `${user.profile.name} - ${user.auth.local.email} - ${user._id}`,
+          author_name: `@${user.auth.local.username} ${user.profile.name} (${user.auth.local.email}; ${user._id})`,
           title: 'Slur in Test Guild',
           title_link: `${BASE_URL}/groups/guild/${groupWithChat.id}`,
           text: testSlurMessage,
@@ -310,7 +310,7 @@ describe('POST /chat', () => {
         attachments: [{
           fallback: 'Slur Message',
           color: 'danger',
-          author_name: `${members[0].profile.name} - ${members[0].auth.local.email} - ${members[0]._id}`,
+          author_name: `@${members[0].auth.local.username} ${members[0].profile.name} (${members[0].auth.local.email}; ${members[0]._id})`,
           title: 'Slur in Party - (private party)',
           title_link: undefined,
           text: testSlurMessage,

test/api/v3/integration/hall/GET-hall_heroes_heroId.test.js

@@ -25,9 +25,9 @@ describe('GET /heroes/:heroId', () => {
 
   it('validates req.params.heroId', async () => {
     await expect(user.get('/hall/heroes/invalidUUID')).to.eventually.be.rejected.and.eql({
-      code: 400,
-      error: 'BadRequest',
-      message: t('invalidReqParams'),
+      code: 404,
+      error: 'NotFound',
+      message: t('userWithIDNotFound', {userId: 'invalidUUID'}),
     });
   });
 
@@ -40,7 +40,7 @@ describe('GET /heroes/:heroId', () => {
     });
   });
 
-  it('returns only necessary hero data', async () => {
+  it('returns only necessary hero data given user id', async () => {
     let hero = await generateUser({
       contributor: {tier: 23},
     });
@@ -53,4 +53,18 @@ describe('GET /heroes/:heroId', () => {
     expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
     expect(heroRes.profile).to.have.all.keys(['name']);
   });
+
+  it('returns only necessary hero data given username', async () => {
+    let hero = await generateUser({
+      contributor: {tier: 23},
+    });
+    let heroRes = await user.get(`/hall/heroes/${hero.auth.local.username}`);
+
+    expect(heroRes).to.have.all.keys([ // works as: object has all and only these keys
+      '_id', 'id', 'balance', 'profile', 'purchased',
+      'contributor', 'auth', 'items',
+    ]);
+    expect(heroRes.auth.local).not.to.have.keys(['salt', 'hashed_password']);
+    expect(heroRes.profile).to.have.all.keys(['name']);
+  });
 });

test/api/v4/members/POST-flag_private_message.test.js

@@ -0,0 +1,74 @@
+import {
+  generateUser,
+  translate as t,
+} from '../../../helpers/api-integration/v4';
+
+describe('POST /members/flag-private-message/:messageId', () => {
+  let userToSendMessage;
+  let messageToSend = 'Test Private Message';
+
+  beforeEach(async () => {
+    userToSendMessage = await generateUser();
+  });
+
+  it('Allows players to flag their own private message', async () => {
+    let receiver = await generateUser();
+
+    await userToSendMessage.post('/members/send-private-message', {
+      message: messageToSend,
+      toUserId: receiver._id,
+    });
+
+    let senderMessages = await userToSendMessage.get('/inbox/messages');
+
+    let sendersMessageInSendersInbox = _.find(senderMessages, (message) => {
+      return message.uuid === receiver._id && message.text === messageToSend;
+    });
+
+    expect(sendersMessageInSendersInbox).to.exist;
+    await expect(userToSendMessage.post(`/members/flag-private-message/${sendersMessageInSendersInbox.id}`)).to.eventually.be.ok;
+  });
+
+  it('Flags a private message', async () => {
+    let receiver = await generateUser();
+
+    await userToSendMessage.post('/members/send-private-message', {
+      message: messageToSend,
+      toUserId: receiver._id,
+    });
+
+    let receiversMessages = await receiver.get('/inbox/messages');
+
+    let sendersMessageInReceiversInbox = _.find(receiversMessages, (message) => {
+      return message.uuid === userToSendMessage._id && message.text === messageToSend;
+    });
+
+    expect(sendersMessageInReceiversInbox).to.exist;
+    await expect(receiver.post(`/members/flag-private-message/${sendersMessageInReceiversInbox.id}`)).to.eventually.be.ok;
+  });
+
+  it('Returns an error when user tries to flag a private message that is already flagged', async () => {
+    let receiver = await generateUser();
+
+    await userToSendMessage.post('/members/send-private-message', {
+      message: messageToSend,
+      toUserId: receiver._id,
+    });
+
+    let receiversMessages = await receiver.get('/inbox/messages');
+
+    let sendersMessageInReceiversInbox = _.find(receiversMessages, (message) => {
+      return message.uuid === userToSendMessage._id && message.text === messageToSend;
+    });
+
+    expect(sendersMessageInReceiversInbox).to.exist;
+    await expect(receiver.post(`/members/flag-private-message/${sendersMessageInReceiversInbox.id}`)).to.eventually.be.ok;
+
+    await expect(receiver.post(`/members/flag-private-message/${sendersMessageInReceiversInbox.id}`))
+      .to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('messageGroupChatFlagAlreadyReported'),
+      });
+  });
+});

test/client/unit/specs/components/categories/categoryTags.js

@@ -1,4 +1,5 @@
-import {shallow} from '@vue/test-utils';
+import {mount} from '@vue/test-utils';
+import Vue from 'vue';
 
 import CategoryTags from 'client/components/categories/categoryTags.vue';
 
@@ -6,7 +7,7 @@ describe('Category Tags', () => {
   let wrapper;
 
   beforeEach(function () {
-    wrapper = shallow(CategoryTags, {
+    wrapper = mount(CategoryTags, {
       propsData: {
         categories: [],
       },
@@ -27,8 +28,10 @@ describe('Category Tags', () => {
         },
       ],
     });
-    expect(wrapper.contains('.category-label')).to.eq(true);
-    expect(wrapper.find('.category-label').text()).to.eq('test');
+    return Vue.nextTick().then(() => {
+      expect(wrapper.contains('.category-label')).to.eq(true);
+      expect(wrapper.find('.category-label').text()).to.eq('test');
+    });
   });
 
   it('displays a habitica official in purple', () => {

test/client/unit/specs/components/sidebarSection.js

@@ -1,4 +1,4 @@
-import { shallow } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import SidebarSection from 'client/components/sidebarSection.vue';
 
@@ -6,7 +6,7 @@ describe('Sidebar Section', () => {
   let wrapper;
 
   beforeEach(function () {
-    wrapper = shallow(SidebarSection, {
+    wrapper = mount(SidebarSection, {
       propsData: {
         title: 'Hello World',
       },
@@ -39,7 +39,7 @@ describe('Sidebar Section', () => {
   });
 
   it('can hide contents by default', () => {
-    wrapper = shallow(SidebarSection, {
+    wrapper = mount(SidebarSection, {
       propsData: {
         title: 'Hello World',
         show: false,

test/client/unit/specs/components/tasks/column.js

@@ -1,4 +1,4 @@
-import { shallow, createLocalVue } from '@vue/test-utils';
+import { mount, createLocalVue } from '@vue/test-utils';
 
 import TaskColumn from 'client/components/tasks/column.vue';
 
@@ -21,7 +21,7 @@ describe('Task Column', () => {
     };
     let stubs = ['b-modal'];  // <b-modal> is a custom component and not tested here
 
-    return shallow(TaskColumn, {
+    return mount(TaskColumn, {
       propsData: {
         type,
       },

test/client/unit/specs/libs/highlightUsers.js

@@ -0,0 +1,39 @@
+import {highlightUsers} from '../../../../../website/client/libs/highlightUsers';
+import habiticaMarkdown from 'habitica-markdown';
+
+describe('highlightUserAndEmail', () => {
+  it('highlights displayname', () => {
+    const text = 'hello @displayedUser with text after';
+
+    const result = highlightUsers(text, 'user', 'displayedUser');
+
+    expect(result).to.contain('<span class="at-text at-highlight">@displayedUser</span>');
+  });
+
+  it('highlights username', () => {
+    const text = 'hello @user';
+
+    const result = highlightUsers(text, 'user', 'displayedUser');
+    expect(result).to.contain('<span class="at-text at-highlight">@user</span>');
+  });
+
+  it('not highlights any email', () => {
+    const text = habiticaMarkdown.render('hello@example.com');
+
+    const result = highlightUsers(text, 'example', 'displayedUser');
+    expect(result).to.not.contain('<span class="at-highlight">@example</span>');
+  });
+
+
+  it('complex highlight', () => {
+    const plainText = 'a bit more @mentions to @use my@mentions.com broken.@mail.com';
+
+    const text = habiticaMarkdown.render(plainText);
+
+    const result = highlightUsers(text, 'use', 'mentions');
+
+    expect(result).to.contain('<span class="at-text at-highlight">@mentions</span>');
+    expect(result).to.contain('<span class="at-text at-highlight">@use</span>');
+    expect(result).to.not.contain('<span class="at-text at-highlight">@mentions</span>.com');
+  });
+});

test/common/ops/buy/buyArmoire.js

@@ -158,7 +158,7 @@ describe('shared.ops.buyArmoire', () => {
 
       expect(armoireCount).to.eql(_.size(getFullArmoire()) - 2);
       expect(user.stats.gp).to.eql(100);
-      expect(analytics.track).to.be.calledOnce;
+      expect(analytics.track).to.be.calledTwice;
     });
   });
 });

test/common/ops/buy/purchase.js

@@ -13,7 +13,7 @@ import forEach from 'lodash/forEach';
 import moment from 'moment';
 
 describe('shared.ops.purchase', () => {
-  const SEASONAL_FOOD = 'Cake_Base';
+  const SEASONAL_FOOD = 'Pie_Base';
   let user;
   let goldPoints = 40;
   let analytics = {track () {}};

vagrant_scripts/vagrant.sh

@@ -65,7 +65,7 @@ apt-get install -qq ntp
 echo Installing nvm, node and global node modules...
 /vagrant/vagrant_scripts/install_node.sh
 
-echo "'vagrant up' is finished. Continue with the instructions at http://habitica.wikia.com/wiki/Setting_up_Habitica_Locally"
+echo "'vagrant up' is finished. Continue with the instructions at http://habitica.fandom.com/wiki/Setting_up_Habitica_Locally"
 
 # Uncomment both lines to autostart the habitica server when provisioning
 # echo Starting Habitica server...

website/client/README.md

@@ -1,5 +1,5 @@
 # Running
-For information about installing and running Habitica locally, see [Setting up Habitica Locally](http://habitica.wikia.com/wiki/Setting_up_Habitica_Locally).
+For information about installing and running Habitica locally, see [Setting up Habitica Locally](http://habitica.fandom.com/wiki/Setting_up_Habitica_Locally).
 
 # Preparation Reading
 - Vue 2 (https://vuejs.org)
@@ -18,4 +18,4 @@ The project is developed directly in the `develop` branch as long as we'll be ab
 
 So far most of the work has been on the template, so there's no complex logic to understand. The only thing I would suggest you to read about is Vuex for data management: it's basically a Flux implementation: there's a central store that hold the data for the entire app, and every change to the data must happen through an action, the data cannot be mutated directly.
 
-For further resources, see [Guidance for Blacksmiths](http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths), and in particular the ["Website Technology Stack" section](http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths#Website_Technology_Stack).
+For further resources, see [Guidance for Blacksmiths](http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths), and in particular the ["Website Technology Stack" section](http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths#Website_Technology_Stack).

website/client/app.vue

@@ -649,5 +649,6 @@ export default {
 <style src="assets/css/sprites/spritesmith-main-21.css"></style>
 <style src="assets/css/sprites/spritesmith-main-22.css"></style>
 <style src="assets/css/sprites/spritesmith-main-23.css"></style>
+<style src="assets/css/sprites/spritesmith-main-24.css"></style>
 <style src="assets/css/sprites.css"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

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

@@ -1,78 +1,42 @@
-.promo_armoire_backgrounds_201901 {
+.promo_armoire_backgrounds_201903 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -253px;
+  background-position: 0px -327px;
   width: 423px;
   height: 147px;
 }
-.promo_bird_buddies_bundle {
+.promo_mystery_201902 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -549px;
-  width: 420px;
+  background-position: -424px -475px;
+  width: 240px;
   height: 147px;
 }
-.promo_birthday_2019 {
+.promo_mythical_marvels_bundle {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -334px 0px;
-  width: 498px;
-  height: 144px;
-}
-.promo_mystery_201901 {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -833px -296px;
-  width: 282px;
-  height: 147px;
-}
-.promo_npc_alex {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -424px -253px;
-  width: 162px;
-  height: 138px;
-}
-.promo_seasonal_shop {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -587px -253px;
-  width: 162px;
-  height: 138px;
-}
-.promo_snow_potions {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -401px;
+  background-position: 0px -475px;
   width: 423px;
   height: 147px;
 }
+.promo_pi_day {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -424px -327px;
+  width: 273px;
+  height: 147px;
+}
 .promo_take_this {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1116px -296px;
+  background-position: -665px -475px;
   width: 96px;
   height: 69px;
 }
-.promo_winter_wonderland_2019 {
+.scene_dailies {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -833px -148px;
-  width: 402px;
-  height: 147px;
+  background-position: -441px 0px;
+  width: 327px;
+  height: 276px;
 }
-.promo_wintery_skins {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -833px 0px;
-  width: 420px;
-  height: 147px;
-}
-.customize-option.promo_wintery_skins {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -858px -15px;
-  width: 60px;
-  height: 60px;
-}
-.scene_apollo {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -833px -444px;
-  width: 279px;
-  height: 147px;
-}
-.scene_eating_healthy {
+.scene_tavern {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
   background-position: 0px 0px;
-  width: 333px;
-  height: 252px;
+  width: 440px;
+  height: 326px;
 }

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

@@ -336,103 +336,103 @@
 }
 .background_alpine_slopes {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -444px;
+  background-position: -564px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_apple_picking {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -592px;
+  background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
 .background_aquarium {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -740px;
+  background-position: -1410px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_archaeological_dig {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -592px;
+  background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
 .background_archery_range {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1480px;
+  background-position: -1560px -444px;
   width: 140px;
   height: 147px;
 }
 .background_at_the_docks {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -592px;
+  background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
 .background_aurora {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -592px;
+  background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
 .background_autumn_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -705px -1480px;
+  background-position: -1560px -888px;
   width: 140px;
   height: 147px;
 }
 .background_avalanche {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px 0px;
+  background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
 .background_back_alley {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -148px;
+  background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
 .background_back_of_giant_beast {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -296px;
+  background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
 .background_bamboo_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px 0px;
+  background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
 .background_bayou {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -592px;
+  background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
 .background_beach {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -740px;
+  background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
 .background_beehive {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -989px -1036px;
+  background-position: -994px -1036px;
   width: 140px;
   height: 147px;
 }
 .background_bell_tower {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1130px -1036px;
+  background-position: -1135px -1036px;
   width: 140px;
   height: 147px;
 }
 .background_beside_well {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -740px;
+  background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
@@ -456,7 +456,7 @@
 }
 .background_bridge {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -740px;
+  background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
@@ -468,7 +468,7 @@
 }
 .background_buried_treasure {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -740px;
+  background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
@@ -486,7 +486,7 @@
 }
 .background_chessboard_land {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -740px;
+  background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
@@ -510,31 +510,31 @@
 }
 .background_cozy_barn {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -740px;
+  background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_bedroom {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -740px;
+  background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_library {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px 0px;
+  background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
 .background_creepy_castle {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -148px;
+  background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
 .background_crosscountry_ski_trail {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -296px;
+  background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
@@ -546,13 +546,13 @@
 }
 .background_dark_deep {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -444px;
+  background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
 .background_deep_mine {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1036px;
+  background-position: -846px -1480px;
   width: 140px;
   height: 147px;
 }
@@ -564,7 +564,7 @@
 }
 .background_desert_dunes {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -740px;
+  background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
@@ -576,7 +576,7 @@
 }
 .background_dilatory_city {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -888px;
+  background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
@@ -600,322 +600,352 @@
 }
 .background_driving_a_coach {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -888px;
+  background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
 .background_driving_a_sleigh {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_dungeon {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_dusty_canyons {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -564px -1332px;
-  width: 140px;
-  height: 147px;
-}
-.background_elegant_balcony {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_fairy_ring {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -846px -1332px;
-  width: 140px;
-  height: 147px;
-}
-.background_fantastical_shoe_store {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -987px -1332px;
-  width: 140px;
-  height: 147px;
-}
-.background_farmhouse {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1128px -1332px;
-  width: 140px;
-  height: 147px;
-}
-.background_fiber_arts_room {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_floating_islands {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1410px -1332px;
-  width: 140px;
-  height: 147px;
-}
-.background_floral_meadow {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px 0px;
-  width: 140px;
-  height: 147px;
-}
-.background_flying_over_a_field_of_wildflowers {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.customize-option.background_flying_over_a_field_of_wildflowers {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -877px -903px;
-  width: 60px;
-  height: 60px;
-}
-.background_flying_over_an_ancient_forest {
+.background_duck_pond {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_icy_steppes {
+.background_dungeon {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_rocky_canyon {
+.background_dusty_canyons {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -705px -1332px;
+  width: 140px;
+  height: 147px;
+}
+.background_elegant_balcony {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_flying_over_snowy_mountains {
+.background_fairy_ring {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -296px;
-  width: 141px;
-  height: 147px;
-}
-.background_forest {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -888px;
+  background-position: -987px -1332px;
   width: 140px;
   height: 147px;
 }
-.background_frigid_peak {
+.background_fantastical_shoe_store {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -1036px;
+  background-position: -1128px -1332px;
   width: 140px;
   height: 147px;
 }
-.background_frosty_forest {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_frozen_lake {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -1332px;
-  width: 140px;
-  height: 147px;
-}
-.background_garden_shed {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_gazebo {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -141px -1480px;
-  width: 140px;
-  height: 147px;
-}
-.background_giant_birdhouse {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -282px -1480px;
-  width: 140px;
-  height: 147px;
-}
-.background_giant_book {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -740px;
-  width: 141px;
-  height: 147px;
-}
-.background_giant_florals {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -888px;
-  width: 141px;
-  height: 147px;
-}
-.background_giant_seashell {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_giant_wave {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1036px;
-  width: 141px;
-  height: 147px;
-}
-.background_glowing_mushroom_cave {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px 0px;
-  width: 141px;
-  height: 147px;
-}
-.background_gorgeous_greenhouse {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_grand_staircase {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -592px;
-  width: 141px;
-  height: 147px;
-}
-.background_graveyard {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -148px;
-  width: 140px;
-  height: 147px;
-}
-.background_green {
+.background_farmhouse {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -1269px -1332px;
   width: 140px;
   height: 147px;
 }
-.background_guardian_statues {
+.background_fiber_arts_room {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -592px;
+  background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.background_gumdrop_land {
+.background_field_with_colored_eggs {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -423px -1332px;
+  background-position: -1136px -444px;
+  width: 141px;
+  height: 147px;
+}
+.background_floating_islands {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1560px -148px;
   width: 140px;
   height: 147px;
 }
-.background_habit_city_streets {
+.background_floral_meadow {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -444px;
-  width: 141px;
-  height: 147px;
-}
-.background_harvest_feast {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -141px -1332px;
+  background-position: -1560px -296px;
   width: 140px;
   height: 147px;
 }
-.background_harvest_fields {
+.background_flower_market {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -296px;
+  background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.background_harvest_moon {
+.customize-option.background_flower_market {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -148px;
+  background-position: -1161px -607px;
+  width: 60px;
+  height: 60px;
+}
+.background_flying_over_a_field_of_wildflowers {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_haunted_house {
+.customize-option.background_flying_over_a_field_of_wildflowers {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1161px -755px;
+  width: 60px;
+  height: 60px;
+}
+.background_flying_over_an_ancient_forest {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1136px -888px;
+  width: 141px;
+  height: 147px;
+}
+.background_flying_over_icy_steppes {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: 0px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_flying_over_rocky_canyon {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -142px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_flying_over_snowy_mountains {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -284px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_forest {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1560px -1332px;
+  width: 140px;
+  height: 147px;
+}
+.background_frigid_peak {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: 0px -1480px;
+  width: 140px;
+  height: 147px;
+}
+.background_frosty_forest {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -426px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_frozen_lake {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -282px -1480px;
+  width: 140px;
+  height: 147px;
+}
+.background_garden_shed {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -568px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_gazebo {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -564px -1480px;
+  width: 140px;
+  height: 147px;
+}
+.background_giant_birdhouse {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -705px -1480px;
+  width: 140px;
+  height: 147px;
+}
+.background_giant_book {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -710px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_giant_florals {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -852px -1036px;
+  width: 141px;
+  height: 147px;
+}
+.background_giant_seashell {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -284px -888px;
+  width: 141px;
+  height: 147px;
+}
+.background_giant_wave {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -710px -592px;
+  width: 141px;
+  height: 147px;
+}
+.background_glowing_mushroom_cave {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -568px -592px;
+  width: 141px;
+  height: 147px;
+}
+.background_gorgeous_greenhouse {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -426px -592px;
+  width: 141px;
+  height: 147px;
+}
+.background_grand_staircase {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -284px -592px;
+  width: 141px;
+  height: 147px;
+}
+.background_graveyard {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1419px -592px;
+  width: 140px;
+  height: 147px;
+}
+.background_green {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -1419px -296px;
   width: 140px;
   height: 147px;
 }
-.background_ice_cave {
+.background_guardian_statues {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px 0px;
+  background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
-.background_iceberg {
+.background_gumdrop_land {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -1269px -1184px;
   width: 140px;
   height: 147px;
 }
-.background_idyllic_cabin {
+.background_habit_city_streets {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1128px -1184px;
-  width: 140px;
+  background-position: 0px -592px;
+  width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_harvest_feast {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -987px -1184px;
   width: 140px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_harvest_fields {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -444px;
+  background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_harvest_moon {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -705px -1184px;
-  width: 140px;
+  background-position: -710px -296px;
+  width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_haunted_house {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -141px -1184px;
   width: 140px;
   height: 147px;
 }
+.background_ice_cave {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -710px -148px;
+  width: 141px;
+  height: 147px;
+}
+.background_iceberg {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1278px -592px;
+  width: 140px;
+  height: 147px;
+}
+.background_idyllic_cabin {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1278px 0px;
+  width: 140px;
+  height: 147px;
+}
+.background_island_waterfalls {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -987px -1480px;
+  width: 140px;
+  height: 147px;
+}
+.background_kelp_forest {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -710px 0px;
+  width: 141px;
+  height: 147px;
+}
+.background_lighthouse_shore {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -423px -1480px;
+  width: 140px;
+  height: 147px;
+}
+.background_lilypad {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -141px -1480px;
+  width: 140px;
+  height: 147px;
+}
 .background_magic_beanstalk {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -888px;
+  background-position: -1560px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_magical_candles {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -444px;
+  background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
 .background_magical_museum {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -444px;
+  background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
 .background_marble_temple {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -444px;
+  background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
 .background_market {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -707px -1036px;
+  background-position: -1560px 0px;
   width: 140px;
   height: 147px;
 }
 .background_meandering_cave {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -566px -1036px;
+  background-position: -846px -1332px;
   width: 140px;
   height: 147px;
 }
+.background_medieval_kitchen {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -142px -444px;
+  width: 141px;
+  height: 147px;
+}
 .background_midnight_castle {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -444px;
@@ -924,7 +954,7 @@
 }
 .background_midnight_clouds {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -987px -1480px;
+  background-position: -141px -1332px;
   width: 140px;
   height: 147px;
 }
@@ -936,31 +966,31 @@
 }
 .background_mist_shrouded_mountain {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -564px -1480px;
+  background-position: -1419px -148px;
   width: 140px;
   height: 147px;
 }
 .background_mistiflying_circus {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -423px -1480px;
+  background-position: -1128px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_mountain_lake {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -1184px;
+  background-position: -846px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_mountain_pyramid {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -592px;
+  background-position: -705px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_night_dunes {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -296px;
+  background-position: -1278px -888px;
   width: 140px;
   height: 147px;
 }
@@ -970,75 +1000,81 @@
   width: 141px;
   height: 147px;
 }
-.background_on_tree_branch {
+.background_old_fashioned_bakery {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
-.background_open_waters {
+.background_on_tree_branch {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
-.background_orchard {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1419px -592px;
-  width: 140px;
-  height: 147px;
-}
-.background_pagodas {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1419px -148px;
-  width: 140px;
-  height: 147px;
-}
-.background_pirate_flag {
+.background_open_waters {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
-.background_pixelists_workshop {
+.background_orchard {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -423px -1332px;
+  width: 140px;
+  height: 147px;
+}
+.background_pagodas {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -282px -1332px;
+  width: 140px;
+  height: 147px;
+}
+.background_pirate_flag {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_patch {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px 0px;
-  width: 140px;
-  height: 147px;
-}
-.background_purple {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -848px -1036px;
-  width: 140px;
-  height: 147px;
-}
-.background_pyramids {
+.background_pixelists_workshop {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
-.background_rainbows_end {
+.background_pumpkin_patch {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1560px -1036px;
+  width: 140px;
+  height: 147px;
+}
+.background_purple {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -1560px -740px;
+  width: 140px;
+  height: 147px;
+}
+.background_pyramids {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
-.background_rainforest {
+.background_rainbows_end {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
+.background_rainforest {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -284px -148px;
+  width: 141px;
+  height: 147px;
+}
 .background_rainy_city {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -282px -1332px;
+  background-position: -1560px -592px;
   width: 140px;
   height: 147px;
 }
@@ -1050,61 +1086,31 @@
 }
 .background_rolling_hills {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -148px;
+  background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
 .background_rose_garden {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -148px;
+  background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
 .background_rowboat {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -148px;
+  background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
 .background_sandcastle {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px 0px;
+  background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
 .background_scribes_workshop {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -444px;
+  background-position: -142px 0px;
   width: 141px;
   height: 147px;
 }
-.background_seafarer_ship {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -846px -1184px;
-  width: 140px;
-  height: 147px;
-}
-.background_shimmering_ice_prism {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -592px;
-  width: 140px;
-  height: 147px;
-}
-.background_shimmery_bubbles {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -425px -1036px;
-  width: 140px;
-  height: 147px;
-}
-.background_slimy_swamp {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -846px -1480px;
-  width: 140px;
-  height: 147px;
-}
-.background_snowman_army {
-  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -705px -1332px;
-  width: 140px;
-  height: 147px;
-}

website/client/assets/css/sprites/spritesmith-main-11.css

@@ -1,18 +1,486 @@
+.weapon_warrior_4 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -100px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_5 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -737px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_warrior_6 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -191px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_0 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -282px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_1 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -464px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_2 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -646px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_3 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -919px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_4 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1010px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_5 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1101px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.weapon_wizard_6 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1192px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.Pet_Currency_Gem {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -220px -203px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_Currency_Gem1x {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -735px;
+  width: 15px;
+  height: 13px;
+}
+.Pet_Currency_Gem2x {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -307px -407px;
+  width: 30px;
+  height: 26px;
+}
+.PixelPaw-Gold {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -617px -1629px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -669px -1629px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw002 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -721px -1629px;
+  width: 51px;
+  height: 51px;
+}
+.avatar_floral_healer {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: 0px -1529px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_rogue {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1449px -1315px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_warrior {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1249px -1315px;
+  width: 99px;
+  height: 99px;
+}
+.avatar_floral_wizard {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1349px -1315px;
+  width: 99px;
+  height: 99px;
+}
+.empty_bottles {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -552px -1629px;
+  width: 64px;
+  height: 54px;
+}
+.ghost {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -828px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.inventory_present {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1100px -875px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_01 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -220px -341px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_02 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -660px -435px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_03 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -660px -504px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_04 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -880px -655px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_05 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -880px -724px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_06 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1283px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_07 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1352px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_08 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1421px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_09 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -483px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_10 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -220px -272px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_11 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -660px -573px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_present_12 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -880px -793px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_birthday {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1320px -1095px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_congrats {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1320px -1164px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_fortify {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1320px -1233px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_getwell {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1490px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_goodluck {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -414px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_greeting {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -345px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_nye {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -276px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_opaquePotion {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -207px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_seafoam {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -138px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_shinySeed {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -69px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_snowball {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: 0px -1629px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_spookySparkles {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1766px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_thankyou {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1697px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_trinket {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1628px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_valentine {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1559px -1529px;
+  width: 68px;
+  height: 68px;
+}
+.knockout {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1249px -1415px;
+  width: 120px;
+  height: 47px;
+}
+.pet_key {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1549px -1315px;
+  width: 68px;
+  height: 68px;
+}
+.rebirth_orb {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1100px -1013px;
+  width: 68px;
+  height: 68px;
+}
+.seafoam_star {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -373px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.shop_armoire {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1100px -944px;
+  width: 68px;
+  height: 68px;
+}
+.snowman {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -555px -1529px;
+  width: 90px;
+  height: 90px;
+}
+.zzz {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -578px;
+  width: 40px;
+  height: 40px;
+}
+.zzz_light {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -537px;
+  width: 40px;
+  height: 40px;
+}
+.notif_inventory_present_01 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -706px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_02 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -677px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_03 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -648px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_04 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1802px -619px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_05 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1549px -1384px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_06 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -925px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_07 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -896px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_08 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -867px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_09 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -838px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_10 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -809px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_11 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -780px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_12 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1793px -751px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_special_birthday {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -809px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_congrats {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -867px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_getwell {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -896px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_goodluck {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -751px;
+  width: 20px;
+  height: 26px;
+}
+.notif_inventory_special_greeting {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -925px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_nye {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1817px -1237px;
+  width: 24px;
+  height: 26px;
+}
+.notif_inventory_special_thankyou {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -780px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_valentine {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1822px -838px;
+  width: 20px;
+  height: 24px;
+}
 .npc_bailey {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1963px -836px;
-  width: 63px;
-  height: 93px;
+  background-position: 0px -1698px;
+  width: 60px;
+  height: 72px;
 }
 .npc_justin {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -968px;
+  background-position: -1746px -1379px;
   width: 84px;
   height: 120px;
 }
 .npc_matt {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -389px -1535px;
+  background-position: -1627px -1098px;
   width: 195px;
   height: 138px;
 }
@@ -24,181 +492,181 @@
 }
 .banner_flair_dysheartener {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1963px -930px;
+  background-position: -747px -627px;
   width: 69px;
   height: 18px;
 }
 .phobia_dysheartener {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -880px;
+  background-position: -527px -220px;
   width: 201px;
   height: 195px;
 }
 .quest_alligator {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -1079px;
+  background-position: -1187px -880px;
   width: 201px;
   height: 213px;
 }
 .quest_armadillo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -747px 0px;
+  background-position: -220px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_atom1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -885px -1315px;
+  background-position: -696px -1315px;
   width: 250px;
   height: 150px;
 }
 .quest_atom2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1387px -1315px;
+  background-position: -1627px -959px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -747px -440px;
+  background-position: -1627px 0px;
   width: 216px;
   height: 180px;
 }
 .quest_axolotl {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -655px;
+  background-position: -527px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_badger {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -655px;
+  background-position: -220px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_basilist {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -392px;
+  background-position: -1627px -1237px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -1293px;
+  background-position: -967px -660px;
   width: 204px;
   height: 201px;
 }
 .quest_bunny {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px -660px;
+  background-position: -307px -220px;
   width: 210px;
   height: 186px;
 }
 .quest_butterfly {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -875px;
+  background-position: -967px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_cheetah {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -875px;
+  background-position: -440px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_cow {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1535px;
+  background-position: -1627px -537px;
   width: 174px;
   height: 213px;
 }
 .quest_dilatory {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -875px;
+  background-position: 0px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatoryDistress1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -868px;
+  background-position: -1407px -1091px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -534px;
+  background-position: -947px -1315px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -440px;
+  background-position: -440px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -875px;
+  background-position: -1187px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -660px;
+  background-position: -660px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -184px;
+  background-position: -1627px -751px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -836px;
+  background-position: -1627px -1379px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -1095px;
+  background-position: -1407px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -1095px;
+  background-position: -1100px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -1095px;
+  background-position: -1407px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_frog {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -1315px;
+  background-position: 0px -1315px;
   width: 221px;
   height: 213px;
 }
 .quest_ghost_stag {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px 0px;
+  background-position: -880px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -220px;
+  background-position: -220px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_goldenknight2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1136px -1315px;
+  background-position: -445px -1315px;
   width: 250px;
   height: 150px;
 }
@@ -210,199 +678,151 @@
 }
 .quest_gryphon {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -527px -220px;
+  background-position: -1627px -359px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1315px;
+  background-position: -1187px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -1315px;
+  background-position: -1187px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -1100px;
+  background-position: -747px -440px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -880px;
+  background-position: -1187px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -660px;
+  background-position: -880px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -440px;
+  background-position: -660px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -307px -220px;
+  background-position: -1627px -181px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1100px -1095px;
+  background-position: -307px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -1095px;
+  background-position: 0px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1095px;
+  background-position: -967px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -685px;
+  background-position: -1098px -1315px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -220px;
+  background-position: -967px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px 0px;
+  background-position: -660px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -875px;
+  background-position: -440px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px 0px;
+  background-position: -1407px -440px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px -440px;
+  background-position: -220px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px -220px;
+  background-position: 0px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px 0px;
+  background-position: -747px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -655px;
+  background-position: -747px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -655px;
+  background-position: -440px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -434px;
+  background-position: -1407px -657px;
   width: 216px;
   height: 216px;
 }
 .quest_octopus {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -662px -1315px;
+  background-position: -222px -1315px;
   width: 222px;
   height: 177px;
 }
 .quest_owl {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -747px -220px;
+  background-position: 0px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_peacock {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -217px;
+  background-position: -1407px -874px;
   width: 216px;
   height: 216px;
 }
-.quest_penguin {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px 0px;
-  width: 190px;
-  height: 183px;
-}
-.quest_pterodactyl {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -435px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rat {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -435px;
-  width: 219px;
-  height: 219px;
-}
-.quest_rock {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -651px;
-  width: 216px;
-  height: 216px;
-}
-.quest_rooster {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -175px -1535px;
-  width: 213px;
-  height: 174px;
-}
-.quest_sabretooth {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -435px;
-  width: 219px;
-  height: 219px;
-}
-.quest_seaserpent {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -307px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -527px 0px;
-  width: 219px;
-  height: 219px;
-}

website/client/assets/css/sprites/spritesmith-main-24.css

@@ -0,0 +1,546 @@
+.Pet-Unicorn-Zombie {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Base {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-CottonCandyBlue {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-CottonCandyPink {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Desert {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Golden {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Red {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Shade {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Skeleton {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-White {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Velociraptor-Zombie {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Base {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyBlue {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-CottonCandyPink {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Desert {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Golden {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Red {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Shade {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Skeleton {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-White {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Whale-Zombie {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Aquatic {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Base {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyBlue {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-CottonCandyPink {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Cupid {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Desert {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ember {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Fairy {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Floral {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Frost {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Ghost {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glass {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Glow {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Golden {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Holly {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-IcySnow {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Peppermint {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Rainbow {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Red {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoseQuartz {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-RoyalPurple {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shade {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Shimmer {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Skeleton {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Spooky {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-StarryNight {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -656px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -656px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -656px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -656px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -656px -400px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -656px -500px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -82px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -164px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -246px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -328px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -410px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -492px -600px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -643px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -207px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -552px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -738px -621px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: 0px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -69px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -138px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -574px -600px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -276px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -345px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -414px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -483px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -552px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -621px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -690px -700px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~assets/images/sprites/spritesmith-main-24.png');
+  background-position: -807px -414px;
+  width: 68px;
+  height: 68px;
+}

website/client/assets/scss/index.scss

@@ -35,3 +35,5 @@
 @import './pin';
 @import './animals';
 @import './iconalert';
+@import './tiers';
+@import './payments';

website/client/assets/scss/payments.scss

@@ -0,0 +1,44 @@
+.payments-column {
+  display: flex;
+  flex-direction: column;
+  width: 296px;
+  justify-content: center;
+
+  &.payments-disabled {
+    opacity: 0.64;
+
+    .btn, .btn:hover, .btn:active {
+      box-shadow: none;
+    }
+
+    .payment-item > *{
+      cursor: default !important;
+    }
+  }
+
+  .payment-item {
+    margin-bottom: 12px;
+    display: flex;
+
+    &.payment-button {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .credit-card-icon {
+        width: 21.3px;
+        height: 16px;
+        margin-right: 8.7px;
+      }
+
+      &.paypal-checkout {
+        background: #009cde;
+
+        img {
+          width: 157px;
+          height: 21px;
+        }
+      }
+    }
+  }
+}

website/client/assets/scss/variables.scss

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

website/client/assets/svg/credit-card-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="16" viewBox="0 0 22 16">
+    <path fill="#FFF" fill-rule="nonzero" d="M0 13.872V5.333h21.333v8.539c0 1.176-.747 2.128-1.67 2.128H1.67C.747 16 0 15.047 0 13.872zM19.664 0c.922 0 1.67.918 1.67 2.053v.614H0v-.614C0 .918.747 0 1.67 0h17.994z"/>
+</svg>

website/client/assets/svg/difficulty-star-empty.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#E1E0E3" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+    <path class="star-empty" fill="#E1E0E3" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
 </svg>

website/client/assets/svg/difficulty-star-half.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
     <g fill="none" fill-rule="evenodd">
-        <path fill="#E1E0E3" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
-        <path fill="#FFB445" d="M8 0L5.333 5.333 0 8l5.333 2.667L8 16z"/>
+        <path class="star-empty" fill="#E1E0E3" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+        <path class="star" fill="#FFB445" d="M8 0L5.333 5.333 0 8l5.333 2.667L8 16z"/>
     </g>
 </svg>

website/client/assets/svg/difficulty-star.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
+    <path class="star" fill="#FFB445" fill-rule="evenodd" d="M10.667 10.667L16 8l-5.333-2.667L8 0 5.333 5.333 0 8l5.333 2.667L8 16z"/>
 </svg>

website/client/components/achievements/chooseClass.vue

@@ -164,30 +164,30 @@ export default {
     classGear (heroClass) {
       if (heroClass === 'rogue') {
         return {
-          armor: 'armor_special_winter2019Rogue',
-          head: 'head_special_winter2019Rogue',
-          shield: 'shield_special_winter2019Rogue',
-          weapon: 'weapon_special_winter2019Rogue',
+          armor: 'armor_rogue_5',
+          head: 'head_rogue_5',
+          shield: 'shield_rogue_6',
+          weapon: 'weapon_rogue_6',
         };
       } else if (heroClass === 'wizard') {
         return {
-          armor: 'armor_special_winter2019Mage',
-          head: 'head_special_winter2019Mage',
-          weapon: 'weapon_special_winter2019Mage',
+          armor: 'armor_wizard_5',
+          head: 'head_wizard_5',
+          weapon: 'weapon_wizard_6',
         };
       } else if (heroClass === 'healer') {
         return {
-          armor: 'armor_special_winter2019Healer',
-          head: 'head_special_winter2019Healer',
-          shield: 'shield_special_winter2019Healer',
-          weapon: 'weapon_special_winter2019Healer',
+          armor: 'armor_healer_5',
+          head: 'head_healer_5',
+          shield: 'shield_healer_5',
+          weapon: 'weapon_healer_6',
         };
       } else {
         return {
-          armor: 'armor_special_winter2019Warrior',
-          head: 'head_special_winter2019Warrior',
-          shield: 'shield_special_winter2019Warrior',
-          weapon: 'weapon_special_winter2019Warrior',
+          armor: 'armor_warrior_5',
+          head: 'head_warrior_5',
+          shield: 'shield_warrior_5',
+          weapon: 'weapon_warrior_6',
         };
       }
     },

website/client/components/achievements/newStuff.vue

@@ -9,7 +9,7 @@
     .modal-body
       .static-view(v-html='html')
     .modal-footer
-      a.btn.btn-info(href='http://habitica.wikia.com/wiki/Whats_New', target='_blank') {{ this.$t('newsArchive') }}
+      a.btn.btn-info(href='http://habitica.fandom.com/wiki/Whats_New', target='_blank') {{ this.$t('newsArchive') }}
       button.btn.btn-secondary(@click='tellMeLater()') {{ this.$t('tellMeLater') }}
       button.btn.btn-warning(@click='dismissAlert();') {{ this.$t('dismissAlert') }}
 </template>

website/client/components/appFooter.vue

@@ -21,7 +21,7 @@
           li
            router-link(to='/static/faq') {{ $t('FAQ') }}
           li
-            a(href='http://habitica.wikia.com/wiki/Whats_New', target='_blank') {{ $t('oldNews') }}
+            a(href='http://habitica.fandom.com/wiki/Whats_New', target='_blank') {{ $t('oldNews') }}
           li
            router-link(to='/static/merch') {{ $t('merch') }}
           li
@@ -43,6 +43,8 @@
           li(v-html='$t("communityForum")')
           li
             a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
+          li
+            a(href='https://www.instagram.com/habitica', target='_blank') {{ $t('communityInstagram') }}
           li
             a(href='https://www.reddit.com/r/habitrpg/', target='_blank') {{ $t('communityReddit') }}
       .col-12.col-md-6
@@ -55,25 +57,24 @@
               li
                 a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}
               li
-                a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
-              li
-                a(href='http://devs.habitica.com/', target='_blank') {{ $t('devBlog') }}
+                a(href='http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
           .col-6.social
             h3 {{ $t('footerSocial') }}
-            a.social-circle(href='https://twitter.com/habitica', target='_blank')
-              .social-icon.svg-icon(v-html='icons.twitter')
-            // TODO: Not ready yet. a.social-circle(href='https://www.instagram.com/habitica/', target='_blank')
-              .social-icon.svg-icon.instagram(v-html='icons.instagram')
-            a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
-              .social-icon.facebook.svg-icon(v-html='icons.facebook')
+            .icons
+              a.social-circle(href='https://twitter.com/habitica', target='_blank')
+                .social-icon.svg-icon(v-html='icons.twitter')
+              a.social-circle(href='https://www.instagram.com/habitica/', target='_blank')
+                .social-icon.svg-icon.instagram(v-html='icons.instagram')
+              a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
+                .social-icon.facebook.svg-icon(v-html='icons.facebook')
         .row
           .col-12.col-md-8 {{ $t('donateText3') }}
           .col-12.col-md-4
-            button.btn.btn-contribute(@click="donate()", v-if="user")
+            button.btn.btn-contribute.btn-flat(@click="donate()", v-if="user")
               .svg-icon.heart(v-html="icons.heart")
               .text {{ $t('companyDonate') }}
-            .btn.btn-contribute(v-else)
-              a(href='http://habitica.wikia.com/wiki/Contributing_to_Habitica', target='_blank')
+            .btn.btn-contribute.btn-flat(v-else)
+              a(href='http://habitica.fandom.com/wiki/Contributing_to_Habitica', target='_blank')
                 .svg-icon.heart(v-html="icons.heart")
                 .text {{ $t('companyContribute') }}
     .row
@@ -145,6 +146,22 @@
     }
   }
 
+  .icons {
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 1;
+  }
+
+  // smaller than desktop
+  @media only screen and (max-width: 992px) {
+    .social-circle {
+      height: 32px !important;
+      width: 32px !important;
+
+      margin-left: 0.75em !important;
+    }
+  }
+
   .social-circle {
     width: 40px;
     height: 40px;
@@ -152,17 +169,20 @@
     background-color: #c3c0c7;
     display: flex;
     margin-left: 1em;
-    float: right;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:hover {
+      background-color: #a5a1ac;
+    }
 
     .social-icon {
       color: #e1e0e3;
       width: 16px;
       margin: auto;
     }
-
-    .instagram {
-      margin-top: .85em;
-    }
   }
 
   .logo {
@@ -185,6 +205,14 @@
     box-shadow: none;
     border-radius: 4px;
 
+    &:hover {
+      background: #a5a1ac;
+
+      .text {
+        color: white;
+      }
+    }
+
     a {
       display: flex;
     }

website/client/components/chat/chatCard.vue

@@ -1,42 +1,38 @@
 <template lang="pug">
 div
   .mentioned-icon(v-if='isUserMentioned')
-  .message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
-  .message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
+  .message-hidden(v-if='!inbox && msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
+  .message-hidden(v-if='!inbox && msg.flagCount > 1 && user.contributor.admin') Message hidden
   .card-body
-    h3.leader(
-      :class='userLevelStyle(msg)',
-      @click="showMemberModal(msg.uuid)",
-      v-b-tooltip.hover.top="tierTitle",
-      v-if="msg.user"
-    )
-      | {{msg.user}}
-      .svg-icon(v-html="tierIcon")
+    user-link(:userId="msg.uuid", :name="msg.user", :backer="msg.backer", :contributor="msg.contributor")
     p.time
       span.mr-1(v-if="msg.username") @{{ msg.username }}
       span.mr-1(v-if="msg.username") •
       span(v-b-tooltip="", :title="msg.timestamp | date") {{ msg.timestamp | timeAgo }}&nbsp;
       span(v-if="msg.client && user.contributor.level >= 4")  ({{ msg.client }})
     .text(v-html='atHighlight(parseMarkdown(msg.text))')
+    .reported(v-if="isMessageReported && (inbox === true)")
+      span(v-once) {{ $t('reportedMessage')}}
+      br
+      span(v-once) {{ $t('canDeleteNow') }}
     hr
     .d-flex(v-if='msg.id')
       .action.d-flex.align-items-center(v-if='!inbox', @click='copyAsTodo(msg)')
         .svg-icon(v-html="icons.copy")
         div {{$t('copyAsTodo')}}
-      .action.d-flex.align-items-center(v-if='!inbox && user.flags.communityGuidelinesAccepted && msg.uuid !== "system"', @click='report(msg)')
-        .svg-icon(v-html="icons.report")
-        div {{$t('report')}}
-        // @TODO make flagging/reporting work in the inbox. NOTE: it must work even if the communityGuidelines are not accepted and it MUST work for messages that you have SENT as well as received. -- Alys
+      .action.d-flex.align-items-center(v-if='(inbox || (user.flags.communityGuidelinesAccepted && msg.uuid !== "system")) && !isMessageReported', @click='report(msg)')
+        .svg-icon(v-html="icons.report", v-once)
+        div(v-once) {{$t('report')}}
       .action.d-flex.align-items-center(v-if='msg.uuid === user._id || inbox || user.contributor.admin', @click='remove()')
-        .svg-icon(v-html="icons.delete")
-        | {{$t('delete')}}
+        .svg-icon(v-html="icons.delete", v-once)
+        div(v-once) {{$t('delete')}}
       .ml-auto.d-flex(v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}", v-if='!inbox')
         .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount > 0', :class='{active: msg.likes[user._id]}')
           .svg-icon(v-html="icons.liked", :title='$t("liked")')
           | +{{ likeCount }}
         .action.d-flex.align-items-center.mr-0(@click='like()', v-if='likeCount === 0', :class='{active: msg.likes[user._id]}')
           .svg-icon(v-html="icons.like", :title='$t("like")')
-          span(v-if='!msg.likes[user._id]') {{ $t('like') }}
+      span(v-if='!msg.likes[user._id] && !inbox') {{ $t('like') }}
 </template>
 
 <style lang="scss">
@@ -79,22 +75,6 @@ div
   .card-body {
     padding: 0.75rem 1.25rem 0.75rem 1.25rem;
 
-    .leader {
-      margin-bottom: 0;
-    }
-
-    h3 { // this is the user name
-      cursor: pointer;
-      display: inline-block;
-      font-size: 16px;
-
-      .svg-icon {
-        width: 10px;
-        display: inline-block;
-        margin-left: .5em;
-      }
-    }
-
     .time {
       font-size: 12px;
       color: #878190;
@@ -134,6 +114,11 @@ div
       color: $purple-400;
     }
   }
+
+  .reported {
+    margin-top: 18px;
+    color: $red-50;
+  }
 </style>
 
 <script>
@@ -145,29 +130,25 @@ import max from 'lodash/max';
 
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from 'client/libs/store';
-import styleHelper from 'client/mixins/styleHelper';
-
-import achievementsLib from '../../../common/script/libs/achievements';
+import userLink from '../userLink';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
 import likeIcon from 'assets/svg/like.svg';
 import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
-import tier1 from 'assets/svg/tier-1.svg';
-import tier2 from 'assets/svg/tier-2.svg';
-import tier3 from 'assets/svg/tier-3.svg';
-import tier4 from 'assets/svg/tier-4.svg';
-import tier5 from 'assets/svg/tier-5.svg';
-import tier6 from 'assets/svg/tier-6.svg';
-import tier7 from 'assets/svg/tier-7.svg';
-import tier8 from 'assets/svg/tier-mod.svg';
-import tier9 from 'assets/svg/tier-staff.svg';
-import tierNPC from 'assets/svg/tier-npc.svg';
+import {highlightUsers} from '../../libs/highlightUsers';
 
 export default {
-  props: ['msg', 'inbox', 'groupId'],
-  mixins: [styleHelper],
+  components: {userLink},
+  props: {
+    msg: {},
+    inbox: {
+      type: Boolean,
+      default: false,
+    },
+    groupId: {},
+  },
   data () {
     return {
       icons: Object.freeze({
@@ -176,17 +157,8 @@ export default {
         report: reportIcon,
         delete: deleteIcon,
         liked: likedIcon,
-        tier1,
-        tier2,
-        tier3,
-        tier4,
-        tier5,
-        tier6,
-        tier7,
-        tier8,
-        tier9,
-        tierNPC,
       }),
+      reported: false,
     };
   },
   filters: {
@@ -235,17 +207,8 @@ export default {
       }
       return likeCount;
     },
-    tierIcon () {
-      const message = this.msg;
-      const isNPC = Boolean(message.backer && message.backer.npc);
-      if (isNPC) {
-        return this.icons.tierNPC;
-      }
-      return this.icons[`tier${message.contributor.level}`];
-    },
-    tierTitle () {
-      const message = this.msg;
-      return achievementsLib.getContribText(message.contributor, message.backer) || '';
+    isMessageReported () {
+      return this.msg.flags && this.msg.flags[this.user.id] || this.reported;
     },
   },
   methods: {
@@ -272,10 +235,18 @@ export default {
     copyAsTodo (message) {
       this.$root.$emit('habitica::copy-as-todo', message);
     },
-    async report () {
+    report () {
+      this.$root.$on('habitica:report-result', data => {
+        if (data.ok) {
+          this.reported = true;
+        }
+
+        this.$root.$off('habitica:report-result');
+      });
+
       this.$root.$emit('habitica::report-chat', {
         message: this.msg,
-        groupId: this.groupId,
+        groupId: this.groupId || 'privateMessage',
       });
     },
     async remove () {
@@ -294,28 +265,8 @@ export default {
         chatId: message.id,
       });
     },
-    showMemberModal (memberId) {
-      this.$emit('show-member-modal', memberId);
-    },
     atHighlight (text) {
-      const escapedDisplayName = escapeRegExp(this.user.profile.name);
-      const escapedUsername = escapeRegExp(this.user.auth.local.username);
-      const userRegex = new RegExp(`@(${escapedDisplayName}|${escapedUsername})(?:\\b)`, 'gi');
-      const atRegex = new RegExp(/(?!\b)@[\w-]+/g);
-
-      if (userRegex.test(text)) {
-        text = text.replace(userRegex, match => {
-          return `<span class="at-highlight at-text">${match}</span>`;
-        });
-      }
-
-      if (atRegex.test(text)) {
-        text = text.replace(atRegex, match => {
-          return `<span class="at-text">${match}</span>`;
-        });
-      }
-
-      return text;
+      return highlightUsers(text, this.user.auth.local.username, this.user.profile.name);
     },
     parseMarkdown (text) {
       return habiticaMarkdown.render(text);

website/client/components/chat/chatMessages.vue

@@ -3,7 +3,6 @@
   .row
     .col-12
       copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
-      report-flag-modal
   div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
     .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
       avatar.avatar-left(
@@ -105,14 +104,21 @@ import findIndex from 'lodash/findIndex';
 
 import Avatar from '../avatar';
 import copyAsTodoModal from './copyAsTodoModal';
-import reportFlagModal from './reportFlagModal';
 import chatCard from './chatCard';
 
 export default {
-  props: ['chat', 'groupType', 'groupId', 'groupName', 'inbox'],
+  props: {
+    chat: {},
+    inbox: {
+      type: Boolean,
+      default: false,
+    },
+    groupType: {},
+    groupId: {},
+    groupName: {},
+  },
   components: {
     copyAsTodoModal,
-    reportFlagModal,
     chatCard,
     Avatar,
   },
@@ -239,10 +245,7 @@ export default {
 
       // Open the modal only if the data is available
       if (profile && !profile.rejected) {
-        this.$root.$emit('habitica:show-profile', {
-          user: profile,
-          startingPage: 'profile',
-        });
+        this.$router.push({name: 'userProfile', params: {userId: profile._id}});
       }
     },
     messageLiked (message) {

website/client/components/chat/reportFlagModal.vue

@@ -106,14 +106,16 @@ export default {
       this.$root.$emit('bv::hide::modal', 'report-flag');
     },
     async reportAbuse () {
-      this.notify('Thank you for reporting this violation. The moderators have been notified.');
+      this.text(this.$t(this.groupId === 'privateMessage' ? 'pmReported' : 'abuseReported'));
 
-      await this.$store.dispatch('chat:flag', {
+      let result = await this.$store.dispatch('chat:flag', {
         groupId: this.groupId,
         chatId: this.abuseObject.id,
         comment: this.reportComment,
       });
 
+      this.$root.$emit('habitica:report-result', result);
+
       this.close();
     },
     async clearFlagCount () {

website/client/components/group-plans/createGroupModalPages.vue

@@ -22,11 +22,11 @@
       button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
   .col-12(v-if='activePage === PAGES.PAY')
     h2 {{ $t('choosePaymentMethod') }}
-    .payment-providers
-      .box.payment-button(@click='pay(PAYMENTS.STRIPE)')
-        .svg-icon.credit-card-icon(v-html="icons.creditCard")
-      .box.payment-button.amazon(@click='pay(PAYMENTS.AMAZON)')
-        .svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
+    .payments-column
+      button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)') 
+        .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
+        | {{ $t('card') }}
+      amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
 </template>
 
 <style lang="scss" scoped>
@@ -65,40 +65,29 @@
     opacity: 0.7;
   }
 
-  .amazon-pay-icon {
-    width: 150px;
-  }
-
-  .credit-card-icon {
-    width: 150px;
-    color: #4e4a57;
-  }
-
   .btn-block {
     margin-bottom: 1em;
   }
-
-  .payment-button.amazon {
-    margin-bottom: 2em;
-  }
 </style>
 
 <script>
 import * as Analytics from 'client/libs/analytics';
 import { mapState } from 'client/libs/store';
 import paymentsMixin from '../../mixins/payments';
+import amazonButton from 'client/components/payments/amazonButton';
 
-import amazonpay from 'assets/svg/amazonpay.svg';
-import creditCard from 'assets/svg/credit-card.svg';
+import creditCardIcon from 'assets/svg/credit-card-icon.svg';
 
 export default {
   mixins: [paymentsMixin],
+  components: {
+    amazonButton,
+  },
   data () {
     return {
       amazonPayments: {},
       icons: Object.freeze({
-        amazonpay,
-        creditCard,
+        creditCardIcon,
       }),
       PAGES: {
         CREATE_GROUP: 'create-group',
@@ -159,7 +148,7 @@ export default {
         this.showStripe(paymentData);
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
         paymentData.type = 'subscription';
-        this.amazonPaymentsInit(paymentData);
+        return paymentData;
       }
     },
   },

website/client/components/groups/chat.vue

@@ -1,9 +1,10 @@
 <template lang="pug">
   .row.chat-row
     .col-12
-      h3(v-once) {{ label }}
+      h3.float-left.label(:class="{accepted: communityGuidelinesAccepted }") {{ label }}
+      div.float-right(v-markdown='$t("markdownFormattingHelp")')
 
-      .row
+      .row(v-if="communityGuidelinesAccepted")
         textarea(:placeholder='placeholder',
                   v-model='newMessage',
                   ref='user-entry',
@@ -22,14 +23,14 @@
                 :caretPosition = 'caretPosition',
                 :chat='group.chat')
 
+      community-guidelines
+
       .row.chat-actions
         .col-6.chat-receive-actions
           button.btn.btn-secondary.float-left.fetch(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
           button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }}
         .col-6.chat-send-actions
-          button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
-
-      community-guidelines
+          button.btn.btn-primary.send-chat.float-right(:disabled="!communityGuidelinesAccepted", @click='sendMessage()') {{ $t('send') }}
 
       slot(
         name="additionRow",
@@ -46,9 +47,14 @@
   import autocomplete from '../chat/autoComplete';
   import communityGuidelines from './communityGuidelines';
   import chatMessage from '../chat/chatMessages';
+  import { mapState } from 'client/libs/store';
+  import markdownDirective from 'client/directives/markdown';
 
   export default {
     props: ['label', 'group', 'placeholder'],
+    directives: {
+      markdown: markdownDirective,
+    },
     components: {
       autocomplete,
       communityGuidelines,
@@ -71,9 +77,13 @@
       };
     },
     computed: {
+      ...mapState({user: 'user.data'}),
       currentLength () {
         return this.newMessage.length;
       },
+      communityGuidelinesAccepted () {
+        return this.user.flags.communityGuidelinesAccepted;
+      },
     },
     methods: {
       // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
@@ -196,6 +206,16 @@
   .chat-row {
     position: relative;
 
+    .label:not(.accepted) {
+      color: #a5a1ac;
+    }
+
+    .row {
+      margin-left: 0;
+      margin-right: 0;
+      clear: both;
+    }
+
     textarea {
       min-height: 150px;
       width: 100%;
@@ -204,7 +224,7 @@
       font-style: italic;
       line-height: 1.43;
       color: $gray-300;
-      padding: .5em;
+      padding: 10px 12px;
     }
 
     .user-entry {

website/client/components/groups/communityGuidelines.vue

@@ -11,17 +11,31 @@
 
 .community-guidelines {
   background-color: rgba(135, 129, 144, 0.84);
-  padding: 1em;
+  padding-left: 0;
+  padding-right: 0;
   color: $white;
-  position: absolute;
-  top: 0;
-  height: 150px;
-  margin-top: 2.3em;
   width: 100%;
+  // width: calc(100% - 24px);
   border-radius: 4px;
   align-items: center;
   justify-content: center;
 
+  .col {
+    padding: 20px 24px;
+  }
+
+  a {
+    text-decoration: underline;
+    color: $white;
+    font-weight: bold;
+  }
+
+  button {
+    margin: 20px 12px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
   .btn-follow-guidelines {
     white-space: pre-line;
   }

website/client/components/groups/group.vue

@@ -21,12 +21,12 @@
               .svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='group.memberCount > 100 && group.memberCount < 999')
               .svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='group.memberCount < 100')
               span.number {{ group.memberCount | abbrNum }}
-              div.member-list(v-once) {{ $t('memberList') }}
+              div.member-list.label(v-once) {{ $t('memberList') }}
           .col-4(v-if='!isParty')
             .item-with-icon(@click='showGroupGems()')
               .svg-icon.gem(v-html="icons.gem")
               span.number {{group.balance * 4}}
-              div(v-once) {{ $t('guildBank') }}
+              div.label(v-once) {{ $t('guildBank') }}
     chat(
       :label="$t('chat')",
       :group="group",
@@ -100,6 +100,9 @@
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
     padding: 1em;
     text-align: center;
+    min-width: 80px;
+    max-width: 120px;
+    height: 76px;
 
     .svg-icon.shield, .svg-icon.gem {
       width: 28px;
@@ -115,7 +118,7 @@
       font-weight: bold;
     }
 
-    .member-list {
+    .label {
       margin-top: .5em;
     }
   }

website/client/components/groups/groupPlan.vue

@@ -48,14 +48,11 @@ div
 
           .box.payment-providers
             h3 Choose your payment method
-            .box.payment-button(@click='pay(PAYMENTS.STRIPE)')
-              div
-                .svg-icon.credit-card-icon(v-html="icons.group")
-                p.credit-card Credit Card
-              p Powered by Stripe
-            .box.payment-button(@click='pay(PAYMENTS.AMAZON)')
-              .svg-icon.amazon-pay-icon(v-html="icons.amazonpay")
-
+            .payments-column
+              button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)') 
+                .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
+                | {{ $t('card') }}
+              amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
     .container.col-6.offset-3.create-option(v-if='!upgradingGroup._id')
       .row
         h1.col-12.text-center.purple-header Create your Group today!
@@ -99,13 +96,13 @@ div
       .form-group
         button.btn.btn-primary.btn-lg.btn-block(@click="createGroup()", :disabled="!newGroupIsReady") {{ $t('createGroupPlan') }}
     .col-12(v-if='activePage === PAGES.PAY')
-      .payment-providers
+      .text-center
         h3 Choose your payment method
-        .box.payment-button(@click='pay(PAYMENTS.STRIPE)')
-          p Credit Card
-          p Powered by Stripe
-        .box.payment-button(@click='pay(PAYMENTS.AMAZON)')
-          | Amazon Pay
+        .payments-column.mx-auto
+          button.purchase.btn.btn-primary.payment-button.payment-item(@click='pay(PAYMENTS.STRIPE)') 
+            .svg-icon.credit-card-icon(v-html="icons.creditCardIcon")
+            | {{ $t('card') }}
+          amazon-button.payment-item(:amazon-data="pay(PAYMENTS.AMAZON)")
 </template>
 
 <style lang="scss" scoped>
@@ -130,12 +127,6 @@ div
       color: #fff;
     }
 
-    .payment-button {
-      display: block;
-      margin: 0 auto;
-      margin-bottom: 1em;
-    }
-
     .plus .svg-icon{
       width: 24px;
     }
@@ -143,26 +134,6 @@ div
     .payment-providers {
       width: 350px;
     }
-
-    .credit-card {
-      font-size: 20px;
-      font-weight: bold;
-      margin-bottom: 0;
-      margin-top: .5em;
-      display: inline-block;
-    }
-
-    .credit-card-icon {
-      width: 25px;
-      display: inline-block;
-      margin-right: .5em;
-    }
-
-    .amazon-pay-icon {
-      width: 150px;
-      margin: 0 auto;
-      margin-top: .5em;
-    }
   }
 
   .header {
@@ -316,35 +287,25 @@ div
       vertical-align: bottom;
     }
   }
-
-  .payment-button {
-    width: 200px;
-    height: 80px;
-    margin-bottom: .5em;
-    padding: .5em;
-    display: block;
-  }
-
-  .payment-button:hover {
-    cursor: pointer;
-  }
 </style>
 
 <script>
 import paymentsMixin from '../../mixins/payments';
 import { mapState } from 'client/libs/store';
-import group from 'assets/svg/group.svg';
-import amazonpay from 'assets/svg/amazonpay.svg';
 import positiveIcon from 'assets/svg/positive.svg';
+import creditCardIcon from 'assets/svg/credit-card-icon.svg';
+import amazonButton from 'client/components/payments/amazonButton';
 
 export default {
   mixins: [paymentsMixin],
+  components: {
+    amazonButton,
+  },
   data () {
     return {
       amazonPayments: {},
       icons: Object.freeze({
-        group,
-        amazonpay,
+        creditCardIcon,
         positiveIcon,
       }),
       PAGES: {
@@ -413,7 +374,7 @@ export default {
         this.showStripe(paymentData);
       } else if (this.paymentMethod === this.PAYMENTS.AMAZON) {
         paymentData.type = 'subscription';
-        this.amazonPaymentsInit(paymentData);
+        return paymentData;
       }
     },
   },

website/client/components/groups/membersModal.vue

@@ -20,7 +20,7 @@ div
           select.form-control(@change='changeSortDirection($event)')
             option(v-for='sortDirection in sortDirections', :value='sortDirection.value') {{sortDirection.text}}
 
-    .row.apply-options.d-flex.justify-content-center(v-if='sortDirty')
+    .row.apply-options.d-flex.justify-content-center(v-if='sortDirty && group.type === "party"')
       a(@click='applySortOptions()') {{ $t('applySortToHeader') }}
     .row(v-if='invites.length > 0')
       .col-6.offset-3.nav

website/client/components/groups/publicGuildItem.vue

@@ -109,7 +109,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
 
     .member-count {
       position: relative;
-      top: -3.6em;
+      top: -3.7em;
       font-size: 18px;
       font-weight: bold;
       line-height: 1.1;