4.84.1

* chore(analytics): upgrade to NPM Amplitude pkg

* chore(build): run package-lock on Linux

* refactor(analytics): use preferred Amplitude v3+ syntax

* refactor(analytics): more v3+ syntax

* chore(npm): attempt updating package lock

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

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/archive/2019/20190131_habit_birthday.js

@@ -0,0 +1,88 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20190131_habit_birthday';
+import { v4 as uuid } from 'uuid';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const inc = {
+    'items.food.Cake_Skeleton': 1,
+    'items.food.Cake_Base': 1,
+    'items.food.Cake_CottonCandyBlue': 1,
+    'items.food.Cake_CottonCandyPink': 1,
+    'items.food.Cake_Shade': 1,
+    'items.food.Cake_White': 1,
+    'items.food.Cake_Golden': 1,
+    'items.food.Cake_Zombie': 1,
+    'items.food.Cake_Desert': 1,
+    'items.food.Cake_Red': 1,
+    'achievements.habitBirthdays': 1,
+  };
+  const set = {};
+  let push;
+
+  set.migration = MIGRATION_NAME;
+
+  if (typeof user.items.gear.owned.armor_special_birthday2018 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2019'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2019', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2017 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2018'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2018', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2016 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2017'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2017', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday2015 !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2016'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2016', _id: uuid()}};
+  } else if (typeof user.items.gear.owned.armor_special_birthday !== 'undefined') {
+    set['items.gear.owned.armor_special_birthday2015'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday2015', _id: uuid()}};
+  } else {
+    set['items.gear.owned.armor_special_birthday'] = false;
+    push = {pinnedItems: {type: 'marketGear', path: 'gear.flat.armor_special_birthday', _id: uuid()}};
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({_id: user._id}, {$inc: inc, $set: set, $push: push}).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2019-01-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,18 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.81.1",
+  "version": "4.84.1",
   "main": "./website/server/index.js",
   "dependencies": {
     "@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",
@@ -62,12 +63,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 +99,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 +145,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/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/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-highlight at-text">@displayedUser</span>');
+  });
+
+  it('highlights username', () => {
+    const text = 'hello @user';
+
+    const result = highlightUsers(text, 'user', 'displayedUser');
+    expect(result).to.contain('<span class="at-highlight at-text">@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-highlight at-text">@mentions</span>');
+    expect(result).to.contain('<span class="at-highlight at-text">@use</span>');
+    expect(result).to.not.contain('<span class="at-highlight at-text">@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;
     });
   });
 });

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,72 +1,66 @@
-.promo_armoire_backgrounds_201901 {
+.promo_armoire_backgrounds_201902 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -334px 0px;
+  background-position: 0px -530px;
   width: 423px;
   height: 147px;
 }
 .promo_bird_buddies_bundle {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -401px;
+  background-position: -689px -148px;
   width: 420px;
   height: 147px;
 }
 .promo_mystery_201901 {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -758px -148px;
+  background-position: -689px -444px;
   width: 282px;
   height: 147px;
 }
-.promo_npc_alex {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -758px -444px;
-  width: 162px;
-  height: 138px;
-}
-.promo_seasonal_shop {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -921px -444px;
-  width: 162px;
-  height: 138px;
-}
-.promo_snow_potions {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -253px;
-  width: 423px;
-  height: 147px;
-}
 .promo_take_this {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -1041px -148px;
+  background-position: -999px -296px;
   width: 96px;
   height: 69px;
 }
-.promo_winter_wonderland_2019 {
+.promo_valentines {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -758px 0px;
-  width: 402px;
+  background-position: -689px -296px;
+  width: 309px;
   height: 147px;
 }
-.promo_wintery_skins {
+.promo_valentines_potions {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px -549px;
+  background-position: -689px 0px;
   width: 420px;
   height: 147px;
 }
-.customize-option.promo_wintery_skins {
-  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -25px -564px;
-  width: 60px;
-  height: 60px;
-}
 .scene_apollo {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: -758px -296px;
+  background-position: -334px -277px;
   width: 279px;
   height: 147px;
 }
+.scene_coding {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px -678px;
+  width: 150px;
+  height: 150px;
+}
 .scene_eating_healthy {
   background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
-  background-position: 0px 0px;
+  background-position: 0px -277px;
   width: 333px;
   height: 252px;
 }
+.scene_office {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: -328px 0px;
+  width: 360px;
+  height: 240px;
+}
+.scene_yesterdailies {
+  background-image: url('~assets/images/sprites/spritesmith-largeSprites-0.png');
+  background-position: 0px 0px;
+  width: 327px;
+  height: 276px;
+}

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: -1560px -148px;
   width: 140px;
   height: 147px;
 }
 .background_apple_picking {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -592px;
+  background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
 .background_aquarium {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -740px;
+  background-position: -1560px -444px;
   width: 140px;
   height: 147px;
 }
 .background_archaeological_dig {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -592px;
+  background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
 .background_archery_range {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1480px;
+  background-position: -1560px -740px;
   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 0px;
   width: 141px;
   height: 147px;
 }
 .background_aurora {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -592px;
+  background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
 .background_autumn_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -705px -1480px;
+  background-position: -423px -1480px;
   width: 140px;
   height: 147px;
 }
 .background_avalanche {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px 0px;
+  background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
 .background_back_alley {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -148px;
+  background-position: -852px -444px;
   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: 0px 0px;
   width: 141px;
   height: 147px;
 }
 .background_bamboo_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px 0px;
+  background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
 .background_bayou {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -592px;
+  background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
 .background_beach {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -740px;
+  background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
 .background_beehive {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -989px -1036px;
+  background-position: -991px -1036px;
   width: 140px;
   height: 147px;
 }
 .background_bell_tower {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1130px -1036px;
+  background-position: -1132px -1036px;
   width: 140px;
   height: 147px;
 }
 .background_beside_well {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -740px;
+  background-position: -426px -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: -568px -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: -710px -740px;
   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: -852px -740px;
   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 0px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_bedroom {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -740px;
+  background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
 .background_cozy_library {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px 0px;
+  background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
 .background_creepy_castle {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -148px;
+  background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
 .background_crosscountry_ski_trail {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -296px;
+  background-position: -994px -592px;
   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: -994px -740px;
   width: 141px;
   height: 147px;
 }
 .background_deep_mine {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -1036px;
+  background-position: -568px -1036px;
   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: -142px -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: -284px -888px;
   width: 141px;
   height: 147px;
 }
@@ -600,19 +600,19 @@
 }
 .background_driving_a_coach {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -888px;
+  background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
 .background_driving_a_sleigh {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -888px;
+  background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
 .background_dungeon {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -888px;
+  background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
@@ -624,7 +624,7 @@
 }
 .background_elegant_balcony {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -888px;
+  background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
@@ -648,7 +648,7 @@
 }
 .background_fiber_arts_room {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -888px;
+  background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
@@ -666,37 +666,37 @@
 }
 .background_flying_over_a_field_of_wildflowers {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -888px;
+  background-position: -1136px 0px;
   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;
+  background-position: -1161px -15px;
   width: 60px;
   height: 60px;
 }
 .background_flying_over_an_ancient_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -888px;
+  background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_icy_steppes {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px 0px;
+  background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_rocky_canyon {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -148px;
+  background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
 .background_flying_over_snowy_mountains {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -296px;
+  background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
@@ -714,7 +714,7 @@
 }
 .background_frosty_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -444px;
+  background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
@@ -726,7 +726,7 @@
 }
 .background_garden_shed {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -592px;
+  background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
@@ -744,25 +744,25 @@
 }
 .background_giant_book {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -740px;
+  background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_giant_florals {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1136px -888px;
+  background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_giant_seashell {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -1036px;
+  background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
 .background_giant_wave {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -1036px;
+  background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
@@ -774,197 +774,209 @@
 }
 .background_gorgeous_greenhouse {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -994px -592px;
+  background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
 .background_grand_staircase {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -592px;
+  background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
 .background_graveyard {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -148px;
+  background-position: -705px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_green {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1269px -1332px;
+  background-position: -423px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_guardian_statues {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -592px;
+  background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
 .background_gumdrop_land {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -423px -1332px;
+  background-position: -141px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_habit_city_streets {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -444px;
+  background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
 .background_harvest_feast {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -141px -1332px;
+  background-position: -1419px -592px;
   width: 140px;
   height: 147px;
 }
 .background_harvest_fields {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -296px;
+  background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
 .background_harvest_moon {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px -148px;
+  background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
 .background_haunted_house {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1419px -296px;
+  background-position: -1269px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_ice_cave {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -710px 0px;
+  background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
 .background_iceberg {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1269px -1184px;
+  background-position: -987px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_idyllic_cabin {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1128px -1184px;
+  background-position: -846px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_island_waterfalls {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -987px -1184px;
+  background-position: -705px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_kelp_forest {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -444px;
+  background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
 .background_lighthouse_shore {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -705px -1184px;
+  background-position: -1278px -888px;
   width: 140px;
   height: 147px;
 }
 .background_lilypad {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -141px -1184px;
+  background-position: -1278px -592px;
   width: 140px;
   height: 147px;
 }
 .background_magic_beanstalk {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -888px;
+  background-position: -1278px 0px;
   width: 140px;
   height: 147px;
 }
 .background_magical_candles {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -426px -444px;
+  background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
 .background_magical_museum {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -284px -444px;
+  background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
 .background_marble_temple {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -142px -444px;
+  background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
 .background_market {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -707px -1036px;
+  background-position: -846px -1480px;
   width: 140px;
   height: 147px;
 }
 .background_meandering_cave {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -566px -1036px;
+  background-position: -705px -1480px;
   width: 140px;
   height: 147px;
 }
+.background_medieval_kitchen {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -284px -444px;
+  width: 141px;
+  height: 147px;
+}
 .background_midnight_castle {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: 0px -444px;
+  background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
 .background_midnight_clouds {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -987px -1480px;
+  background-position: -1560px -1184px;
   width: 140px;
   height: 147px;
 }
 .background_midnight_lake {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -568px -296px;
+  background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
 .background_mist_shrouded_mountain {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -564px -1480px;
+  background-position: -1560px -296px;
   width: 140px;
   height: 147px;
 }
 .background_mistiflying_circus {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -423px -1480px;
+  background-position: -1269px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_mountain_lake {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -1184px;
+  background-position: -282px -1332px;
   width: 140px;
   height: 147px;
 }
 .background_mountain_pyramid {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -592px;
+  background-position: -1419px -888px;
   width: 140px;
   height: 147px;
 }
 .background_night_dunes {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1560px -296px;
+  background-position: -1419px -296px;
   width: 140px;
   height: 147px;
 }
 .background_ocean_sunrise {
+  background-image: url('~assets/images/sprites/spritesmith-main-0.png');
+  background-position: -568px -296px;
+  width: 141px;
+  height: 147px;
+}
+.background_old_fashioned_bakery {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
   background-position: -568px -148px;
   width: 141px;
@@ -984,13 +996,13 @@
 }
 .background_orchard {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1419px -592px;
+  background-position: -709px -1036px;
   width: 140px;
   height: 147px;
 }
 .background_pagodas {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1419px -148px;
+  background-position: -987px -1480px;
   width: 140px;
   height: 147px;
 }
@@ -1008,13 +1020,13 @@
 }
 .background_pumpkin_patch {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px 0px;
+  background-position: -1560px -592px;
   width: 140px;
   height: 147px;
 }
 .background_purple {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -848px -1036px;
+  background-position: -1419px -148px;
   width: 140px;
   height: 147px;
 }
@@ -1038,13 +1050,13 @@
 }
 .background_rainy_city {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -282px -1332px;
+  background-position: -564px -1480px;
   width: 140px;
   height: 147px;
 }
 .background_red {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1419px -888px;
+  background-position: 0px -1480px;
   width: 140px;
   height: 147px;
 }
@@ -1074,37 +1086,25 @@
 }
 .background_scribes_workshop {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -852px -444px;
+  background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
 .background_seafarer_ship {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -846px -1184px;
+  background-position: -850px -1036px;
   width: 140px;
   height: 147px;
 }
 .background_shimmering_ice_prism {
   background-image: url('~assets/images/sprites/spritesmith-main-0.png');
-  background-position: -1278px -592px;
+  background-position: -1128px -1184px;
   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;
+  background-position: -141px -1184px;
   width: 140px;
   height: 147px;
 }

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

@@ -1,12 +1,306 @@
+.Pet_Currency_Gem {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1913px -1504px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_Currency_Gem1x {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2015px -905px;
+  width: 15px;
+  height: 13px;
+}
+.Pet_Currency_Gem2x {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1982px -1407px;
+  width: 30px;
+  height: 26px;
+}
+.PixelPaw-Gold {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1982px -1228px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1963px -905px;
+  width: 51px;
+  height: 51px;
+}
+.PixelPaw002 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1982px -1297px;
+  width: 51px;
+  height: 51px;
+}
+.inventory_special_congrats {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1913px -1366px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_fortify {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1366px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_getwell {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1913px -1228px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_goodluck {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1504px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_greeting {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1573px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_nye {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1765px -1444px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_opaquePotion {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -220px -203px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_seafoam {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1963px -836px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_shinySeed {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1935px -1089px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_snowball {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1228px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_spookySparkles {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1297px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_thankyou {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1913px -1297px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_trinket {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1435px;
+  width: 68px;
+  height: 68px;
+}
+.inventory_special_valentine {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1913px -1435px;
+  width: 68px;
+  height: 68px;
+}
+.knockout {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1180px;
+  width: 120px;
+  height: 47px;
+}
+.pet_key {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1913px -1573px;
+  width: 68px;
+  height: 68px;
+}
+.rebirth_orb {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1627px -1444px;
+  width: 68px;
+  height: 68px;
+}
+.seafoam_star {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1929px -968px;
+  width: 90px;
+  height: 90px;
+}
+.shop_armoire {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1696px -1444px;
+  width: 68px;
+  height: 68px;
+}
+.snowman {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1844px -1089px;
+  width: 90px;
+  height: 90px;
+}
+.zzz {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1982px -1366px;
+  width: 40px;
+  height: 40px;
+}
+.zzz_light {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1965px -1180px;
+  width: 40px;
+  height: 40px;
+}
+.notif_inventory_present_01 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2004px -1118px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_02 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -563px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_03 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -685px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_04 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -592px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_05 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -621px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_06 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -714px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_07 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -743px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_08 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -772px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_09 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -801px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_10 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2004px -1089px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_11 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -534px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_present_12 {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -1995px -650px;
+  width: 28px;
+  height: 28px;
+}
+.notif_inventory_special_birthday {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -238px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_congrats {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -336px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_getwell {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -313px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_goodluck {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -211px;
+  width: 20px;
+  height: 26px;
+}
+.notif_inventory_special_greeting {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -359px;
+  width: 20px;
+  height: 22px;
+}
+.notif_inventory_special_nye {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -184px;
+  width: 24px;
+  height: 26px;
+}
+.notif_inventory_special_thankyou {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -263px;
+  width: 20px;
+  height: 24px;
+}
+.notif_inventory_special_valentine {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -2010px -288px;
+  width: 20px;
+  height: 24px;
+}
+.npc_bailey {
+  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
+  background-position: -220px -272px;
+  width: 63px;
+  height: 66px;
+}
 .npc_justin {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -856px;
+  background-position: -1844px -968px;
   width: 84px;
   height: 120px;
 }
 .npc_matt {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -214px -1535px;
+  background-position: -1155px -1315px;
   width: 195px;
   height: 138px;
 }
@@ -18,91 +312,91 @@
 }
 .banner_flair_dysheartener {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1929px -856px;
+  background-position: -1929px -1059px;
   width: 69px;
   height: 18px;
 }
 .phobia_dysheartener {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -880px;
+  background-position: -1627px -1061px;
   width: 201px;
   height: 195px;
 }
 .quest_alligator {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -1079px;
+  background-position: -1627px -645px;
   width: 201px;
   height: 213px;
 }
 .quest_armadillo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -435px;
+  background-position: -660px -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: -947px -1315px;
   width: 207px;
   height: 138px;
 }
 .quest_atom3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -747px -440px;
+  background-position: -967px -660px;
   width: 216px;
   height: 180px;
 }
 .quest_axolotl {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -655px;
+  background-position: -527px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_badger {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -655px;
+  background-position: -1407px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_basilist {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -191px -1710px;
+  background-position: -1844px -392px;
   width: 189px;
   height: 141px;
 }
 .quest_beetle {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -1293px;
+  background-position: -1627px -859px;
   width: 204px;
   height: 201px;
 }
 .quest_bunny {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px -660px;
+  background-position: -1627px -1257px;
   width: 210px;
   height: 186px;
 }
 .quest_butterfly {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px -440px;
+  background-position: -220px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_cheetah {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -875px;
+  background-position: -440px -435px;
   width: 219px;
   height: 219px;
 }
 .quest_cow {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px 0px;
+  background-position: -307px -220px;
   width: 174px;
   height: 213px;
 }
@@ -114,67 +408,67 @@
 }
 .quest_dilatoryDistress1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -868px;
+  background-position: -1627px -434px;
   width: 210px;
   height: 210px;
 }
 .quest_dilatoryDistress2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -422px;
+  background-position: -1844px -534px;
   width: 150px;
   height: 150px;
 }
 .quest_dilatoryDistress3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -220px;
+  background-position: -1187px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_dilatory_derby {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -875px;
+  background-position: -660px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_dustbunnies {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -440px;
+  background-position: 0px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_egg {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -214px;
+  background-position: -1844px -184px;
   width: 165px;
   height: 207px;
 }
 .quest_evilsanta {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -724px;
+  background-position: -1844px -836px;
   width: 118px;
   height: 131px;
 }
 .quest_evilsanta2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -1095px;
+  background-position: -1407px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_falcon {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -440px -1095px;
+  background-position: -1407px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_ferret {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -1095px;
+  background-position: -1407px -220px;
   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;
 }
@@ -186,13 +480,13 @@
 }
 .quest_goldenknight1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px 0px;
+  background-position: -880px -1095px;
   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;
 }
@@ -204,199 +498,181 @@
 }
 .quest_gryphon {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -527px -220px;
+  background-position: -747px -440px;
   width: 216px;
   height: 177px;
 }
 .quest_guineapig {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -880px;
+  background-position: -220px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_harpy {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1315px;
+  background-position: -1187px -660px;
   width: 219px;
   height: 219px;
 }
 .quest_hedgehog {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -1100px;
+  background-position: -1187px -880px;
   width: 219px;
   height: 186px;
 }
 .quest_hippo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -1315px;
+  background-position: -307px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_horse {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -660px;
+  background-position: -1187px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_kangaroo {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -440px;
+  background-position: -880px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_kraken {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -307px -220px;
+  background-position: -527px -220px;
   width: 216px;
   height: 177px;
 }
 .quest_lostMasterclasser1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1407px -220px;
+  background-position: -440px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -1095px;
+  background-position: -220px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_lostMasterclasser3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1095px;
+  background-position: 0px -875px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1844px -573px;
+  background-position: -1844px -685px;
   width: 150px;
   height: 150px;
 }
 .quest_mayhemMistiflying2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px -660px;
+  background-position: -967px -440px;
   width: 219px;
   height: 219px;
 }
 .quest_mayhemMistiflying3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1187px 0px;
+  background-position: -967px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_monkey {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -880px -875px;
+  background-position: -967px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_moon1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -651px;
+  background-position: -1627px -217px;
   width: 216px;
   height: 216px;
 }
 .quest_moon2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -875px;
+  background-position: -440px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moon3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px -220px;
+  background-position: -220px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone1 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -967px 0px;
+  background-position: 0px -655px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone2 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -660px -655px;
+  background-position: -747px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_moonstone3 {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -655px;
+  background-position: -747px 0px;
   width: 219px;
   height: 219px;
 }
 .quest_nudibranch {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px -434px;
+  background-position: -1407px -1097px;
   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: -1627px 0px;
   width: 216px;
   height: 216px;
 }
 .quest_penguin {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1710px;
+  background-position: -1844px 0px;
   width: 190px;
   height: 183px;
 }
 .quest_pterodactyl {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -747px 0px;
+  background-position: -440px -1095px;
   width: 219px;
   height: 219px;
 }
 .quest_rat {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -220px -435px;
+  background-position: -1187px -220px;
   width: 219px;
   height: 219px;
 }
 .quest_rock {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -1627px 0px;
+  background-position: -1407px -880px;
   width: 216px;
   height: 216px;
 }
 .quest_rooster {
   background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: 0px -1535px;
+  background-position: 0px -1529px;
   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: -527px 0px;
-  width: 219px;
-  height: 219px;
-}
-.quest_sheep {
-  background-image: url('~assets/images/sprites/spritesmith-main-11.png');
-  background-position: -307px 0px;
-  width: 219px;
-  height: 219px;
-}

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

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

website/client/assets/scss/index.scss

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

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: 'winter';
-$npc_quests_flavor: 'winter';
-$npc_seasonal_flavor: 'winter';
-$npc_timetravelers_flavor: 'winter';
-$npc_tavern_flavor: 'winter';
+$npc_market_flavor: 'valentines';
+$npc_quests_flavor: 'normal';
+$npc_seasonal_flavor: 'normal';
+$npc_timetravelers_flavor: 'normal';
+$npc_tavern_flavor: 'valentines';

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
@@ -55,7 +55,7 @@
               li
                 a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}
               li
-                a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
+                a(href='http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
               li
                 a(href='http://devs.habitica.com/', target='_blank') {{ $t('devBlog') }}
           .col-6.social
@@ -73,7 +73,7 @@
               .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')
+              a(href='http://habitica.fandom.com/wiki/Contributing_to_Habitica', target='_blank')
                 .svg-icon.heart(v-html="icons.heart")
                 .text {{ $t('companyContribute') }}
     .row

website/client/components/chat/chatCard.vue

@@ -4,14 +4,7 @@ div
   .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
   .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") •
@@ -79,22 +72,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;
@@ -145,29 +122,18 @@ 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},
   data () {
     return {
       icons: Object.freeze({
@@ -176,16 +142,6 @@ export default {
         report: reportIcon,
         delete: deleteIcon,
         liked: likedIcon,
-        tier1,
-        tier2,
-        tier3,
-        tier4,
-        tier5,
-        tier6,
-        tier7,
-        tier8,
-        tier9,
-        tierNPC,
       }),
     };
   },
@@ -235,18 +191,6 @@ 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) || '';
-    },
   },
   methods: {
     async like () {
@@ -294,28 +238,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

@@ -239,10 +239,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/groups/tavern.vue

@@ -93,7 +93,7 @@
         .row
           .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
             div
-              a.title(@click="viewStaffProfile(user.uuid)") {{user.name}}
+              router-link.title(:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}") {{user.name}}
               .svg-icon.staff-icon(v-html="icons.tierStaff", v-if='user.type === "Staff"')
               .svg-icon.mod-icon(v-html="icons.tierMod", v-if='user.type === "Moderator" && user.name !== "It\'s Bailey"')
               .svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
@@ -112,7 +112,7 @@
           li
             a(href='', v-html="$t('glossary')")
           li
-            a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
+            a(href='http://habitica.fandom.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
           li
             a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
           li
@@ -542,15 +542,6 @@ export default {
         this.$root.$emit('bv::show::modal', 'world-boss-rage');
       }
     },
-
-    async viewStaffProfile (staffId) {
-      let staffDetails = await this.$store.dispatch('members:fetchMember', { memberId: staffId });
-      this.$root.$emit('habitica:show-profile', {
-        user: staffDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
-
     async fetchRecentMessages () {
       this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
     },

website/client/components/hall/heroes.vue

@@ -15,7 +15,7 @@
 
       .row
         .form.col-6(v-if='hero && hero.profile', submit='saveHero(hero)')
-          a(@click='clickMember(hero, true)')
+          router-link(:to="{'name': 'userProfile', 'params': {'userId': msg.uuid}}")
             h3 {{hero.profile.name}}
           .form-group
             input.form-control(type='text', v-model='hero.contributor.text', :placeholder="$t('contribTitle')")
@@ -197,13 +197,6 @@ export default {
       window.scrollTo(0, 200);
       this.loadHero(id, index);
     },
-    async clickMember (hero) {
-      let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: hero._id });
-      this.$root.$emit('habitica:show-profile', {
-        user: heroDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
   },
 };
 </script>

website/client/components/header/menu.vue

@@ -2,7 +2,7 @@
 div
   inbox-modal
   creator-intro
-  profile
+  profileModal
   b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
     b-navbar-brand.brand
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
@@ -54,8 +54,8 @@ div
             router-link.topbar-dropdown-item.dropdown-item(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportBug') }}
             router-link.topbar-dropdown-item.dropdown-item(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askAQuestion') }}
             a.topbar-dropdown-item.dropdown-item(href="https://trello.com/c/odmhIqyW/440-read-first-table-of-contents", target='_blank') {{ $t('requestAF') }}
-            a.topbar-dropdown-item.dropdown-item(href="http://habitica.wikia.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
-            a.topbar-dropdown-item.dropdown-item(href="http://habitica.wikia.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
+            a.topbar-dropdown-item.dropdown-item(href="http://habitica.fandom.com/wiki/Contributing_to_Habitica", target='_blank') {{ $t('contributing') }}
+            a.topbar-dropdown-item.dropdown-item(href="http://habitica.fandom.com/wiki/Habitica_Wiki", target='_blank') {{ $t('wiki') }}
             a.topbar-dropdown-item.dropdown-item(@click='modForm()') {{ $t('contactForm') }}
       .currency-tray.form-inline
         .item-with-icon(v-if="userHourglasses > 0")
@@ -346,7 +346,7 @@ import logo from 'assets/svg/logo.svg';
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
 import creatorIntro from '../creatorIntro';
-import profile from '../userMenu/profile';
+import profileModal from '../userMenu/profileModal';
 import userDropdown from './userDropdown';
 
 export default {
@@ -355,7 +355,7 @@ export default {
     InboxModal,
     notificationMenu,
     creatorIntro,
-    profile,
+    profileModal,
   },
   data () {
     return {

website/client/components/header/notifications/unallocatedStatsPoints.vue

@@ -35,11 +35,8 @@ export default {
   },
   methods: {
     action () {
-      this.$root.$emit('habitica:show-profile', {
-        user: this.$store.state.user.data,
-        startingPage: 'stats',
-      });
+      this.$router.push({name: 'stats'});
     },
   },
 };
-</script>
+</script>

website/client/components/header/userDropdown.vue

@@ -102,10 +102,7 @@ export default {
       this.$root.$emit('bv::show::modal', 'inbox-modal');
     },
     showProfile (startingPage) {
-      this.$root.$emit('habitica:show-profile', {
-        user: this.user,
-        startingPage,
-      });
+      this.$router.push({name: startingPage});
     },
     showBuyGemsModal (startingPage) {
       this.$store.state.gemModalOptions.startingPage = startingPage;

website/client/components/memberDetails.vue

@@ -12,7 +12,7 @@
       :hide-class-badge="classBadgePosition !== 'under-avatar'",
     )
   .member-stats(:class="{'col-8': !expanded && !isHeader}")
-    .d-flex.align-items-center
+    .d-flex.align-items-center.profile-first-row
       class-badge(v-if="classBadgePosition === 'next-to-name'", :member-class="member.stats.class")
       .d-flex.flex-column.profile-name-character
         h3.character-name
@@ -95,9 +95,14 @@
     }
   }
 
+  .profile-first-row {
+    margin-bottom: .5em
+  }
+
   .progress-container {
     margin-left: 4px;
     margin-bottom: .5em;
+    height: 24px;
   }
 
   .progress-container > span {
@@ -111,7 +116,6 @@
     width: 24px;
     height: 24px;
     margin-right: 8px;
-    padding-top: 6px;
   }
 
   .progress-container > .progress {
@@ -130,7 +134,7 @@
 
   .progress-container .svg-icon, .progress-container .progress, .progress-container .small-text {
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: middle;
   }
 
   // Condensed version
@@ -249,10 +253,7 @@ export default {
   methods: {
     percent,
     showMemberModal (member) {
-      this.$root.$emit('habitica:show-profile', {
-        user: member,
-        startingPage: 'profile',
-      });
+      this.$router.push({name: 'userProfile', params: {userId: member._id}});
     },
   },
   computed: {

website/client/components/settings/site.vue

@@ -39,7 +39,7 @@
           button.btn.btn-danger.btn-xs(@click='changeClassForUser(true)', v-once) {{ $t('changeClass') }}
           small.cost   3 {{ $t('gems') }}
             // @TODO add icon span.Pet_Currency_Gem1x.inline-gems
-      hr
+        hr
 
       div
         .checkbox

website/client/components/shops/market/index.vue

@@ -246,8 +246,8 @@ export default {
         categories.push({
           identifier: 'cards',
           text: this.$t('cards'),
-          items: _map(_filter(this.content.cardTypes, (value) => {
-            return value.yearRound;
+          items: _map(_filter(this.content.cardTypes, (value, key) => {
+            return value.yearRound || key === 'valentine';
           }), (value) => {
             return {
               ...getItemInfo(this.user, 'card', value),

website/client/components/shops/market/sellModal.vue

@@ -25,19 +25,20 @@
           div.text {{ item.sellWarningNote() }}
           br
 
-        div(v-once)
-          div.text {{ item.notes() }}
+        div(v-else)
+          div(v-once)
+            div.text {{ item.notes() }}
 
-          div
-            b.how-many-to-sell {{ $t('howManyToSell') }}
+            div
+              b.how-many-to-sell {{ $t('howManyToSell') }}
 
-          div
-            b-input.itemsToSell(type="number", v-model="selectedAmountToSell", :max="itemContextToSell.itemCount", min="1", @keyup.native="preventNegative($event)", step="1")
+            div
+              b-input.itemsToSell(type="number", v-model="selectedAmountToSell", :max="itemContextToSell.itemCount", min="1", @keyup.native="preventNegative($event)", step="1")
 
-            span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons.gold")
-            span.value {{ item.value }}
+              span.svg-icon.inline.icon-32(aria-hidden="true", v-html="icons.gold")
+              span.value {{ item.value }}
 
-          button.btn.btn-primary(@click="sellItems()") {{ $t('sell') }}
+            button.btn.btn-primary(@click="sellItems()") {{ $t('sell') }}
 
     div.clearfix(slot="modal-footer")
       span.balance.float-left {{ $t('yourBalance') }}

website/client/components/shops/seasonal/index.vue

@@ -388,7 +388,9 @@
       },
 
       seasonal () {
+        // vue subscriptions, don't remove
         let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
+        const myUserVersion = this.user._v; // eslint-disable-line
 
         let seasonal = shops.getSeasonalShop(this.user);
 

website/client/components/static/faq.vue

@@ -80,7 +80,7 @@
         // linkStart: '[',
         // linkEnd: '](/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)',
         // },
-        // "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the <%= linkStart %>Habitica Help guild<%= linkEnd %>! We're happy to help."
+        // "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.fandom.com/wiki/FAQ), come ask in the <%= linkStart %>Habitica Help guild<%= linkEnd %>! We're happy to help."
       };
     },
     methods: {

website/client/components/tasks/taskModal.vue

@@ -20,7 +20,7 @@
           label.d-flex.align-items-center.justify-content-between(v-once)
             span {{ $t('notes') }}
             small(v-once)
-              a(target="_blank", href="http://habitica.wikia.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
+              a(target="_blank", href="http://habitica.fandom.com/wiki/Markdown_Cheat_Sheet") {{ $t('markdownHelpLink') }}
 
           textarea.form-control(v-model="task.notes", rows="3")
       .task-modal-content(@click="handleClick($event)")

website/client/components/userLink.vue

@@ -1,21 +1,113 @@
 <template lang="pug">
-  b-link(
-    v-if='user && user.profile',
-    @click.prevent='showProfile(user)'
-    ) {{user.profile.name}}
+  router-link.leader(
+  :to="{'name': 'userProfile', 'params': {'userId': id}}",
+  :class='levelStyle()',
+  v-b-tooltip.hover.top="tierTitle",
+  v-if='displayName')
+    | {{displayName}}
+    .svg-icon(v-html="tierIcon()")
 </template>
 
+<style scoped lang="scss">
+  @import '~client/assets/scss/colors.scss';
+
+  a {
+    color: $gray-50;
+  }
+
+  a.leader { // this is the user name
+    font-family: 'Roboto Condensed', sans-serif;
+    font-weight: bold;
+    margin-bottom: 0;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 16px;
+
+    .svg-icon {
+      width: 10px;
+      display: inline-block;
+      margin-left: .5em;
+    }
+  }
+</style>
+
 <script>
+
+  import styleHelper from 'client/mixins/styleHelper';
+
+  import achievementsLib from '../../common/script/libs/achievements';
+
+  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';
+
   export default {
-    props: ['user'],
+    props: ['user', 'userId', 'name', 'backer', 'contributor'],
+    mixins: [styleHelper],
+    data () {
+      return {
+        icons: Object.freeze({
+          tier1,
+          tier2,
+          tier3,
+          tier4,
+          tier5,
+          tier6,
+          tier7,
+          tier8,
+          tier9,
+          tierNPC,
+        }),
+      };
+    },
+    computed: {
+      displayName () {
+        if (this.name) {
+          return this.name;
+        } else if (this.user && this.user.profile) {
+          return this.user.profile.name;
+        }
+      },
+      level () {
+        if (this.contributor) {
+          return this.contributor.level;
+        } else if (this.user && this.user.contributor) {
+          return this.user.contributor.level;
+        }
+        return 0;
+      },
+      isNPC () {
+        if (this.backer) {
+          return this.backer.level;
+        } else if (this.user && this.user.backer) {
+          return this.user.backer.level;
+        }
+        return false;
+      },
+      id () {
+        return this.userId || this.user._id;
+      },
+    },
     methods: {
-      async showProfile (user) {
-        let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: user._id });
-        this.$root.$emit('habitica:show-profile', {
-          user: heroDetails.data.data,
-          startingPage: 'profile',
-        });
+      tierIcon () {
+        if (this.isNPC) {
+          return this.icons.tierNPC;
+        }
+        return this.icons[`tier${this.level}`];
+      },
+      tierTitle () {
+        return achievementsLib.getContribText(this.level, this.isNPC) || '';
+      },
+      levelStyle () {
+        return this.userLevelStyleFromLevel(this.level, this.isNPC);
       },
     },
   };
-</script>
+</script>

website/client/components/userMenu/profile.vue

@@ -1,150 +1,148 @@
 <template lang="pug">
-div
-  b-modal#profile(title="Profile", size='lg', :hide-footer="true")
-    .header(slot='modal-header')
-      .profile-actions
-        button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
-          .svg-icon.message-icon(v-html="icons.message")
-        button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
-          .svg-icon.gift-icon(v-html="icons.gift")
-        button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
-          @click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
-          .svg-icon.remove-icon(v-html="icons.remove")
-        button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
-          @click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
-          .svg-icon.positive-icon(v-html="icons.positive")
-        button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin && !adminToolsLoaded',
-          @click="loadAdminTools()", v-b-tooltip.hover.right="'Admin - Load Tools'")
-          .svg-icon.positive-icon(v-html="icons.edit")
-        span(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
-          button.btn.btn-secondary.positive-icon(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
-            @click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Admin - Revoke Chat Privileges'")
-            .svg-icon.positive-icon(v-html="icons.megaphone")
-          button.btn.btn-secondary.positive-icon(v-if='hero.flags && hero.flags.chatRevoked',
-            @click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Admin - Reinstate Chat Privileges'")
-            .svg-icon.positive-icon(v-html="icons.challenge")
-          button.btn.btn-secondary.positive-icon(v-if='!hero.auth.blocked',
-            @click="adminBlockUser()", v-b-tooltip.hover.right="'Admin - Ban User'")
-            .svg-icon.positive-icon(v-html="icons.lock")
-          button.btn.btn-secondary.positive-icon(v-if='hero.auth.blocked',
-            @click="adminUnblockUser()", v-b-tooltip.hover.right="'Admin - Unblock User'")
-            .svg-icon.positive-icon(v-html="icons.member")
-      .row
-        .col-12
-          member-details(:member="user")
+.profile(v-if='user')
+  .header
+    .profile-actions
+      button.btn.btn-secondary.message-icon(@click='sendMessage()', v-b-tooltip.hover.left="$t('sendMessage')")
+        .svg-icon.message-icon(v-html="icons.message")
+      button.btn.btn-secondary.gift-icon(@click='openSendGemsModal()', v-b-tooltip.hover.bottom="$t('sendGems')")
+        .svg-icon.gift-icon(v-html="icons.gift")
+      button.btn.btn-secondary.remove-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1',
+        @click="blockUser()", v-b-tooltip.hover.right="$t('blockWarning')")
+        .svg-icon.remove-icon(v-html="icons.remove")
+      button.btn.btn-secondary.positive-icon(v-if='user._id !== this.userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) !== -1',
+        @click="unblockUser()", v-b-tooltip.hover.right="$t('unblock')")
+        .svg-icon.positive-icon(v-html="icons.positive")
+      button.btn.btn-secondary.positive-icon(v-if='this.userLoggedIn.contributor.admin && !adminToolsLoaded',
+        @click="loadAdminTools()", v-b-tooltip.hover.right="'Admin - Load Tools'")
+        .svg-icon.positive-icon(v-html="icons.edit")
+      span(v-if='this.userLoggedIn.contributor.admin && adminToolsLoaded')
+        button.btn.btn-secondary.positive-icon(v-if='!hero.flags || (hero.flags && !hero.flags.chatRevoked)',
+          @click="adminRevokeChat()", v-b-tooltip.hover.bottom="'Admin - Revoke Chat Privileges'")
+          .svg-icon.positive-icon(v-html="icons.megaphone")
+        button.btn.btn-secondary.positive-icon(v-if='hero.flags && hero.flags.chatRevoked',
+          @click="adminReinstateChat()", v-b-tooltip.hover.bottom="'Admin - Reinstate Chat Privileges'")
+          .svg-icon.positive-icon(v-html="icons.challenge")
+        button.btn.btn-secondary.positive-icon(v-if='!hero.auth.blocked',
+          @click="adminBlockUser()", v-b-tooltip.hover.right="'Admin - Ban User'")
+          .svg-icon.positive-icon(v-html="icons.lock")
+        button.btn.btn-secondary.positive-icon(v-if='hero.auth.blocked',
+          @click="adminUnblockUser()", v-b-tooltip.hover.right="'Admin - Unblock User'")
+          .svg-icon.positive-icon(v-html="icons.member")
     .row
-      .col-12.col-md-6.offset-md-3.text-center.nav
-        .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
-        .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
-        .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
-    #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
-      .row
-        .col-12.col-md-8
-          .header.mb-3
-            h1 {{user.profile.name}}
-            div
-              .name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
-            div
-              .name {{ user._id }}
-        .col-12.col-md-4
-          button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing') {{ $t('edit') }}
-      .row(v-if='!editing')
-        .col-12.col-md-8
-          .about
-            h2 {{ $t('about') }}
-            p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
-            p(v-else) {{ $t('noDescription') }}
-          .photo
-            h2 {{ $t('photo') }}
-            img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
-            p(v-else) {{ $t('noPhoto') }}
+      .col-12
+        member-details(:member="user")
+  .row
+    .col-12.col-md-6.offset-md-3.text-center.nav
+      .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
+      .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
+      .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
+  #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
+    .row
+      .col-12.col-md-8
+        .header.mb-3
+          h1 {{user.profile.name}}
+          .name(v-if='user.auth && user.auth.local && user.auth.local.username') @{{ user.auth.local.username }}
+      .col-12.col-md-4
+        button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing', style='float:right;') {{ $t('edit') }}
+    .row(v-if='!editing')
+      .col-12.col-md-8
+        .about.profile-section
+          h2 {{ $t('about') }}
+          p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
+          p(v-else) {{ $t('noDescription') }}
+        .photo.profile-section
+          h2 {{ $t('photo') }}
+          img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
+          p(v-else) {{ $t('noPhoto') }}
 
-        .col-12.col-md-4
-          .info
-            h2 {{ $t('info') }}
-            div
-              strong {{ $t('joined') }}:&nbsp;
-              | {{userJoinedDate}}
-            div
-              strong {{ $t('latestCheckin') }}:&nbsp;
-              | {{userLastLoggedIn}}
-            div
-              strong {{ $t('totalLogins') }}:&nbsp;
-              span {{ $t('totalCheckins', {count: user.loginIncentives}) }}
-            div
-              | {{getProgressDisplay()}}
-              .progress
-                .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
-                  span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
-          // @TODO: Implement in V2 .social
+      .col-12.col-md-4
+        .info.profile-section
+          h2 {{ $t('info') }}
+          .info-item
+            .info-item-label {{ $t('joined') }}:
+            .info-item-value {{userJoinedDate}}
+          .info-item
+            .info-item-label  {{ $t('totalLogins') }}:
+            .info-item-value {{ user.loginIncentives }}
+          .info-item
+            .info-item-label  {{ $t('latestCheckin') }}:
+            .info-item-value {{userLastLoggedIn}}
+          .info-item
+            | {{getProgressDisplay()}}
+            .progress
+              .progress-bar(role='progressbar', :aria-valuenow='incentivesProgress', aria-valuemin='0', aria-valuemax='100', :style='{width: incentivesProgress + "%"}')
+                span.sr-only {{ incentivesProgress }}% {{$t('complete')}}
+        // @TODO: Implement in V2 .social
 
-      .row(v-if='editing')
-        h1 {{$t('editProfile')}}
-        .col-12
-          .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
+    .row(v-if='editing')
+      h1 {{$t('editProfile')}}
+      .col-12
+        .alert.alert-info.alert-sm(v-html='$t("communityGuidelinesWarning", managerEmail)')
 
-          // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
-          .form-group
-            label {{ $t('displayName') }}
-            input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
-          .form-group
-            label {{ $t('photoUrl') }}
-            input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
-          .form-group
-            label {{ $t('about') }}
-            textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
-            // include ../../shared/formatting-help
-          //- .form-group
-          //-   label Facebook
-          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
-          //- .form-group
-          //-   label Instagram
-          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
-          //- .form-group
-          //-   label Twitter
-          //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
+        // TODO use photo-upload instead: https://groups.google.com/forum/?fromgroups=#!topic/derbyjs/xMmADvxBOak
+        .form-group
+          label {{ $t('displayName') }}
+          input.form-control(type='text', :placeholder="$t('fullName')", v-model='editingProfile.name')
+        .form-group
+          label {{ $t('photoUrl') }}
+          input.form-control(type='url', v-model='editingProfile.imageUrl', :placeholder="$t('imageUrl')")
+        .form-group
+          label {{ $t('about') }}
+          textarea.form-control(rows=5, :placeholder="$t('displayBlurbPlaceholder')", v-model='editingProfile.blurb')
+          // include ../../shared/formatting-help
+        //- .form-group
+        //-   label Facebook
+        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.facebook')
+        //- .form-group
+        //-   label Instagram
+        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.instagram')
+        //- .form-group
+        //-   label Twitter
+        //-   input.form-control(type='text', placeholder="Paste your link here", v-model='editingProfile.twitter')
 
-        .col-12.text-center
-          button.btn.btn-primary(@click='save()') {{ $t("save") }}
-          button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
-    #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
-      .row(v-for='(category, key) in achievements')
-        h2.col-12.text-center {{ $t(key+'Achievs') }}
-        .col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
-          .box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
-            b-popover(
-              :target="'#' + key + '-achievement'",
-              triggers="hover",
-              placement="top",
-            )
-              h4.popover-content-title {{ achievement.title }}
-              div.popover-content-text(v-html="achievement.text")
-            .achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
-              .counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
-            .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
-      hr.col-12
-      .row
-        .col-12.col-md-6(v-if='user.achievements.challenges')
-          .achievement-icon.achievement-karaoke
-          h2.text-center {{$t('challengesWon')}}
-          div(v-for='chal in user.achievements.challenges')
-            span(v-markdown='chal')
-            hr
-        .col-12.col-md-6(v-if='user.achievements.quests')
-          .achievement-icon.achievement-alien
-          h2.text-center {{$t('questsCompleted')}}
-          div(v-for='(value, key) in user.achievements.quests')
-            span {{ content.quests[key].text() }} ({{ value }})
-    profileStats(
-      :user='user',
-      v-show='selectedPage === "stats"',
-      :showAllocation='showAllocation()',
-      v-if='user.preferences')
+      .col-12.text-center
+        button.btn.btn-primary(@click='save()') {{ $t("save") }}
+        button.btn.btn-warning(@click='editing = false') {{ $t("cancel") }}
+  #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
+    .row(v-for='(category, key) in achievements')
+      h2.col-12.text-center {{ $t(key+'Achievs') }}
+      .col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
+        .box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
+          b-popover(
+            :target="'#' + key + '-achievement'",
+            triggers="hover",
+            placement="top",
+          )
+            h4.popover-content-title {{ achievement.title }}
+            div.popover-content-text(v-html="achievement.text")
+          .achievement(:class='achievement.icon + "2x"', v-if='achievement.earned')
+            .counter.badge.badge-info.stack-count(v-if='achievement.optionalCount') {{achievement.optionalCount}}
+          .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
+    hr.col-12
+    .row
+      .col-12.col-md-6(v-if='user.achievements.challenges')
+        .achievement-icon.achievement-karaoke
+        h2.text-center {{$t('challengesWon')}}
+        div(v-for='chal in user.achievements.challenges')
+          span(v-markdown='chal')
+          hr
+      .col-12.col-md-6(v-if='user.achievements.quests')
+        .achievement-icon.achievement-alien
+        h2.text-center {{$t('questsCompleted')}}
+        div(v-for='(value, key) in user.achievements.quests')
+          span {{ content.quests[key].text() }} ({{ value }})
+  profileStats(
+    :user='user',
+    v-show='selectedPage === "stats"',
+    :showAllocation='showAllocation()',
+    v-if='user.preferences')
   send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>
 
 <style lang="scss" >
-  #profile {
+  @import '~client/assets/scss/colors.scss';
+
+  .profile {
     .member-details {
       .character-name, small, .small-text {
         color: #878190;
@@ -159,6 +157,20 @@ div
       color: white;
       margin-bottom: 20px;
     }
+
+    .progress-container > .progress {
+      background-color: $gray-500 !important;
+      height: 16px !important;
+      vertical-align: middle !important;
+
+      .progress-bar {
+        height: 16px !important;
+      }
+    }
+
+    .profile-name-character {
+      margin-left: 4px !important;
+    }
   }
 
   .message-icon svg {
@@ -218,7 +230,7 @@ div
   .header {
     h1 {
       color: $purple-200;
-      margin-bottom: 0rem;
+      margin-bottom: 0.2rem;
     }
 
     h4 {
@@ -228,12 +240,13 @@ div
 
   .nav {
     font-weight: bold;
-    height: 40px;
+    min-height: 40px;
+    justify-content: center;
   }
 
   .nav-item {
     display: inline-block;
-    margin: 0 auto;
+    margin: 0 1.2em;
     padding: 1em;
   }
 
@@ -306,7 +319,65 @@ div
     }
   }
 
+    .member-details {
+      .character-name, small, .small-text {
+        color: #878190;
+      }
 
+      .progress-container > .progress {
+        background-color: $gray-500;
+      }
+    }
+
+    .gearTitle {
+      color: white;
+      margin-bottom: 20px;
+    }
+
+  .profile-section {
+    h2 {
+      overflow: hidden;
+      size: 16px;
+      color: $gray-50;
+    }
+    h2:after {
+      background-color: $gray-500;
+      content: "";
+      display: inline-block;
+      height: 1px;
+      position: relative;
+      vertical-align: middle;
+      width: 90%;
+      left: 16px;
+    }
+  }
+
+  .info {
+
+    .info-item {
+      color: $gray-200;
+      size: 14px;
+      margin-bottom: 8px;
+
+      .info-item-label {
+        font-weight: bold;
+        display: inline-block;
+      }
+
+      .info-item-value {
+        display: inline-block;
+        float: right;
+      }
+    }
+
+    .progress {
+      height: 8px;
+
+      .progress-bar {
+        background-color: $green-10 !important;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -338,6 +409,7 @@ import member from 'assets/svg/member-icon.svg';
 import edit from 'assets/svg/edit.svg';
 
 export default {
+  props: ['userId', 'startingPage'],
   directives: {
     markdown,
   },
@@ -376,20 +448,9 @@ export default {
       selectedPage: 'profile',
       achievements: {},
       content: Content,
+      user: undefined,
     };
   },
-  mounted () {
-    this.$root.$on('habitica:show-profile', (data) => {
-      if (!data.user || !data.startingPage) return;
-      // @TODO: We may be able to remove the need for store
-      this.$store.state.profileUser = data.user;
-      this.$store.state.profileOptions.startingPage = data.startingPage;
-      this.$root.$emit('bv::show::modal', 'profile');
-    });
-  },
-  destroyed () {
-    this.$root.$off('habitica:show-profile');
-  },
   computed: {
     ...mapState({
       userLoggedIn: 'user.data',
@@ -407,34 +468,6 @@ export default {
     costumeItems () {
       return this.user.items.gear.costume;
     },
-    user () {
-      let user = this.userLoggedIn;
-
-      // Reset editing when user is changed. Move to watch or is this good?
-      this.editing = false;
-      this.hero = {};
-      this.adminToolsLoaded = false;
-
-      let profileUser = this.$store.state.profileUser;
-
-      if (profileUser._id && profileUser._id !== this.userLoggedIn._id) {
-        user = profileUser;
-      }
-
-      this.editingProfile.name = user.profile.name;
-      this.editingProfile.imageUrl = user.profile.imageUrl;
-      this.editingProfile.blurb = user.profile.blurb;
-
-      if (!user.achievements.quests) user.achievements.quests = {};
-      if (!user.achievements.challenges) user.achievements.challenges = {};
-      // @TODO: this common code should handle the above
-      this.achievements = achievementsLib.getAchievementsForProfile(user);
-
-      // @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
-      user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
-
-      return user;
-    },
     incentivesProgress () {
       return this.getIncentivesProgress();
     },
@@ -456,16 +489,50 @@ export default {
       return this.$store.getters['members:hasClass'](this.userLoggedIn);
     },
   },
+  mounted () {
+    this.loadUser();
+  },
   watch: {
-    startingPageOption () {
-      this.selectedPage = this.$store.state.profileOptions.startingPage;
+    startingPage () {
+      this.selectedPage = this.startingPage;
+    },
+    async userId () {
+      this.loadUser();
     },
   },
   methods: {
+    async loadUser () {
+      let user = this.userLoggedIn;
+
+      // Reset editing when user is changed. Move to watch or is this good?
+      this.editing = false;
+      this.hero = {};
+      this.adminToolsLoaded = false;
+
+      let profileUserId = this.userId;
+
+      if (profileUserId && profileUserId !== this.userLoggedIn._id) {
+        let response = await this.$store.dispatch('members:fetchMember', { memberId: profileUserId });
+        user = response.data.data;
+      }
+
+      this.editingProfile.name = user.profile.name;
+      this.editingProfile.imageUrl = user.profile.imageUrl;
+      this.editingProfile.blurb = user.profile.blurb;
+
+      if (!user.achievements.quests) user.achievements.quests = {};
+      if (!user.achievements.challenges) user.achievements.challenges = {};
+      // @TODO: this common code should handle the above
+      this.achievements = achievementsLib.getAchievementsForProfile(user);
+
+      // @TODO For some reason markdown doesn't seem to be handling numbers or maybe undefined?
+      user.profile.blurb = user.profile.blurb ? `${user.profile.blurb}` : '';
+
+      this.user = user;
+    },
     selectPage (page) {
       this.selectedPage = page;
-      // @TODO: rename this property?
-      this.$store.state.profileOptions.startingPage = page;
+      history.replaceState(null, null, '');
     },
     sendMessage () {
       this.$root.$emit('habitica::new-inbox-message', {
@@ -561,7 +628,6 @@ export default {
     showAllocation () {
       return this.user._id === this.userLoggedIn._id && this.hasClass;
     },
-
   },
 };
 </script>

website/client/components/userMenu/profileModal.vue

@@ -0,0 +1,50 @@
+<template lang="pug">
+  b-modal#profile(size='lg', :hide-footer="true", :hide-header="true", @hidden="onHidden", @shown="onShown()")
+    profile(:userId='userId', :startingPage='startingPage', style="margin-top:24px;")
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .header {
+    width: 100%;
+  }
+</style>
+
+<script>
+  import profile from './profile';
+
+  export default {
+    components: {
+      profile,
+    },
+    data () {
+      return {
+        userId: undefined,
+        startingPage: undefined,
+        path: undefined,
+      };
+    },
+    mounted () {
+      this.$root.$on('habitica:show-profile', (data) => {
+        this.userId = data.userId;
+        this.startingPage = data.startingPage || 'profile';
+        this.path = data.path;
+        this.$root.$emit('bv::show::modal', 'profile');
+      });
+    },
+    destroyed () {
+      this.$root.$off('habitica:show-profile');
+    },
+    methods: {
+      onShown () {
+        history.pushState('', null, this.path);
+      },
+      onHidden () {
+        if (this.$route.path !== window.location.pathname) {
+          this.$router.go(-1);
+        }
+      },
+    },
+  };
+</script>

website/client/components/userMenu/profilePage.vue

@@ -1,21 +1,24 @@
 <template lang="pug">
-div
-  // @TODO: profile modal is pulled in on the header. So.. seems a little odd to depend on it that way, but for now let's depend
+  .container
+    .standard-page
+      profile(:userId='userId', :startingPage='startingPage')
 </template>
 
-<script>
-import profile from './profile';
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
 
-export default {
-  components: {
-    profile,
-  },
-  mounted () {
-    // @TODO: Do we need this page?
-    this.$root.$emit('habitica:show-profile', {
-      user: {},
-      startingPage: 'profile',
-    });
-  },
-};
+  .header {
+    width: 100%;
+  }
+</style>
+
+<script>
+  import profile from './profile';
+
+  export default {
+    props: ['userId', 'startingPage'],
+    components: {
+      profile,
+    },
+  };
 </script>

website/client/components/world-boss/worldBossInfoModal.vue

@@ -18,7 +18,7 @@
             .info {{ $t(bullet) }}
     .row
       .col-12.text-center
-        a(href='http://habitica.wikia.com/wiki/World_Bosses' target='_blank').footer-link {{ $t('worldBossLink') }}
+        a(href='http://habitica.fandom.com/wiki/World_Bosses' target='_blank').footer-link {{ $t('worldBossLink') }}
 </template>
 
 <style>

website/client/libs/analytics.js

@@ -1,8 +1,10 @@
+import forEach from 'lodash/forEach';
 import isEqual from 'lodash/isEqual';
 import keys from 'lodash/keys';
 import pick from 'lodash/pick';
 import includes from 'lodash/includes';
 import getStore from 'client/store';
+import amplitude from 'amplitude-js';
 import Vue from 'vue';
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
@@ -70,7 +72,7 @@ function _gatherUserStats (properties) {
 export function setUser () {
   const store = getStore();
   const user = store.state.user.data;
-  window.amplitude.setUserId(user._id);
+  amplitude.getInstance().setUserId(user._id);
   window.ga('set', {userId: user._id});
 }
 
@@ -80,7 +82,7 @@ export function track (properties) {
     if (_doesNotHaveRequiredFields(properties)) return false;
     if (_doesNotHaveAllowedHitType(properties)) return false;
 
-    window.amplitude.logEvent(properties.eventAction, properties);
+    amplitude.getInstance().logEvent(properties.eventAction, properties);
     window.ga('send', properties);
   });
 }
@@ -92,7 +94,11 @@ export function updateUser (properties) {
 
     _gatherUserStats(properties);
 
-    window.amplitude.setUserProperties(properties);
+    forEach(properties, (value, key) => {
+      const identify = new amplitude.Identify().set(key, value);
+      amplitude.getInstance().identify(identify);
+    });
+
     window.ga('set', properties);
   });
 }
@@ -103,13 +109,7 @@ export function setup () {
   /* eslint-disable */
 
   // Amplitude
-  var r = window.amplitude || {};
-  r._q = [];
-  function a(window) {r[window] = function() {r._q.push([window].concat(Array.prototype.slice.call(arguments, 0)));}}
-  var i = ["init", "logEvent", "logRevenue", "setUserId", "setUserProperties", "setOptOut", "setVersionName", "setDomain", "setDeviceId", "setGlobalUserProperties"];
-  for (var o = 0; o < i.length; o++) {a(i[o])}
-  window.amplitude = r;
-  amplitude.init(AMPLITUDE_KEY);
+  amplitude.getInstance().init(AMPLITUDE_KEY);
 
   // Google Analytics (aka Universal Analytics)
   window['GoogleAnalyticsObject'] = 'ga';
@@ -124,14 +124,7 @@ export function load () {
   // Load real scripts
   if (!IS_PRODUCTION) return;
 
-  // Amplitude
-  const amplitudeScript = document.createElement('script');
   let firstScript = document.getElementsByTagName('script')[0];
-  amplitudeScript.type = 'text/javascript';
-  amplitudeScript.async = true;
-  amplitudeScript.src = 'https://d24n15hnbwhuhn.cloudfront.net/libs/amplitude-2.2.0-min.gz.js';
-  firstScript.parentNode.insertBefore(amplitudeScript, firstScript);
-
   // Google Analytics
   const gaScript = document.createElement('script');
   firstScript = document.getElementsByTagName('script')[0];

website/client/libs/highlightUsers.js

@@ -0,0 +1,24 @@
+import escapeRegExp from 'lodash/escapeRegExp';
+
+const optionalAnchorTagRegExStr = '(<\\w[^>]*)?'; // everything including the anchor tag is recognized
+const mentionRegExStr = '(@[\\w-]+)';
+const optionalPostMentionRegExStr = '(\\.\\w+)?'; // like dot-TLD
+
+const finalMentionRegEx = new RegExp(`${optionalAnchorTagRegExStr}${mentionRegExStr}${optionalPostMentionRegExStr}`, 'gi');
+
+export function highlightUsers (text, userName, displayName) {
+  const currentUser = [`@${userName}`, `@${displayName}`].map(escapeRegExp);
+
+
+  text = text.replace(finalMentionRegEx, (fullMatched, preMention, mentionStr, postMention) => {
+    if (preMention && preMention.includes('<a') || Boolean(postMention)) {
+      return fullMatched;
+    }
+
+    const isUserMention = currentUser.includes(mentionStr) ? 'at-text' : '';
+
+    return fullMatched.replace(mentionStr, `<span class="at-highlight ${isUserMention}">${mentionStr}</span>`);
+  });
+
+  return text;
+}

website/client/router/index.js

@@ -107,6 +107,15 @@ const router = new VueRouter({
     { name: 'logout', path: '/logout', component: Logout },
     { name: 'resetPassword', path: '/reset-password', component: RegisterLoginReset, meta: {requiresLogin: false} },
     { name: 'tasks', path: '/', component: UserTasks },
+    {
+      name: 'userProfile',
+      path: '/profile/:userId',
+      component: ProfilePage,
+      props: true,
+      children: [
+        { name: 'userProfilePage', path: ':startingPage', component: ProfilePage },
+      ],
+    },
     {
       path: '/inventory',
       component: InventoryContainer,
@@ -354,6 +363,31 @@ router.beforeEach(function routerGuard (to, from, next) {
     page: to.name || to.path,
   });
 
+  if ((to.name === 'userProfile' || to.name === 'userProfilePage') && from.name !== null) {
+    let startingPage = 'profile';
+    if (to.params.startingPage !== undefined) {
+      startingPage = to.params.startingPage;
+    }
+    router.app.$emit('habitica:show-profile', {
+      userId: to.params.userId,
+      startingPage,
+      path: to.path,
+    });
+    return;
+  }
+
+  if ((to.name === 'stats' || to.name === 'achievements' || to.name === 'profile') && from.name !== null) {
+    router.app.$emit('habitica:show-profile', {
+      startingPage: to.name,
+      path: to.path,
+    });
+    return;
+  }
+
+  if (from.name === 'userProfile' || from.name === 'userProfilePage' || from.name === 'stats' || from.name === 'achievements' || from.name === 'profile') {
+    router.app.$root.$emit('bv::hide::modal', 'profile');
+  }
+
   next();
 });
 

website/common/locales/README.md

@@ -10,6 +10,6 @@ request that your changes be translated; changes are automatically
 copied to Transifex on a regular basis.
 
 If you want to help with translations, please first read [Guidance for
-Linguists](http://habitrpg.wikia.com/wiki/Guidance_for_Linguists) and
+Linguists](http://habitica.fandom.com/wiki/Guidance_for_Linguists) and
 note especially its information about the [Translations Trello
 card](https://trello.com/c/SvTsLdRF/12-translations).

website/common/locales/bg/challenge.json

@@ -12,7 +12,7 @@
     "unsubChallenge": "Повредена връзка на предизвикателство: тази задача е била част от предизвикателство, но Вие сте се отписали от него. Какво искате да направите с останалите задачи?",
     "challengeWinner": "Беше победител в следните предизвикателства",
     "challenges": "Предизвикателства",
-    "challengesLink": "<a href='http://habitica.wikia.com/wiki/Challenges' target='_blank'>Предизвикателства</a>",
+    "challengesLink": "<a href='http://habitica.fandom.com/wiki/Challenges' target='_blank'>Предизвикателства</a>",
     "challengePrize": "Награда за предизвикателството",
     "endDate": "Крайна дата",
     "noChallenges": "Все още няма предизвикателства. Посетете",