Improve user history logging

* add script for heroku to notify about a deploy

* add emoji to server name

* add fallback for when script is run outside of git repo

* make script use bash

* remove exit

.github/workflows/test.yml

@@ -19,7 +19,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -41,7 +42,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -63,7 +65,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -86,7 +89,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -108,7 +112,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -137,7 +142,8 @@ jobs:
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -167,7 +173,8 @@ jobs:
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -197,7 +204,8 @@ jobs:
       with:
         mongodb-version: ${{ matrix.mongodb-version }}
         mongodb-replica-set: rs
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -222,7 +230,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |
@@ -246,7 +255,8 @@ jobs:
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-    - run: sudo apt-get -y install libkrb5-dev
+    - run: sudo apt update
+    - run: sudo apt -y install libkrb5-dev
     - run: cp config.json.example config.json
     - name: npm install
       run: |

.heroku/report_deploy.sh

@@ -0,0 +1,25 @@
+#!/bin/bash
+
+DEVELOPER="someone"
+if git rev-parse --git-dir > /dev/null 2>&1; then
+    DEVELOPERS=$(git log -5 --pretty=format:'%an')
+    IFS=$'\n'
+    DEVELOPER=""
+    for dev in $DEVELOPERS
+    do
+        if [ "$DEVELOPER" == "someone" ]; then
+            if [[ ${dev} != *"[bot]"* ]]; then
+                DEVELOPER=$dev
+                continue
+            fi
+            continue
+        fi
+    done
+fi
+
+PARTS=$(cut -d"." -f1 <<< $BASE_URL)
+SERVER_NAME=$(cut -d"/" -f3 <<< ${PARTS[0]})
+
+SERVER_NAME=":$SERVER_EMOJI: $SERVER_NAME"
+
+wget $SLACK_DEPLOY_URL --post-data="{\"server_name\": \"$SERVER_NAME\", \"developer\": \"$DEVELOPER\", \"base_url\": \"$BASE_URL\"}" -O /dev/null

README.md

@@ -1,14 +1,20 @@
-Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg) [![Code Climate](https://codeclimate.com/github/HabitRPG/habitrpg.svg)](https://codeclimate.com/github/HabitRPG/habitrpg) [![Bountysource](https://api.bountysource.com/badge/tracker?tracker_id=68393)](https://www.bountysource.com/trackers/68393-habitrpg?utm_source=68393&utm_medium=shield&utm_campaign=TRACKER_BADGE)
+Habitica ![Build Status](https://github.com/HabitRPG/habitica/workflows/Test/badge.svg)
 ===============
 
-[Habitica](https://habitica.com) is an open-source habit-building program that treats your life like a role-playing game. Level up as you succeed, lose HP as you fail, and earn money to buy weapons and armor.
+[Habitica](https://habitica.com) is an open-source habit-building program that treats your life like a role-playing game. Level up as you succeed, lose HP as you fail, and earn Gold to buy weapons and armor!
 
-**We need more programmers!** Your assistance will be greatly appreciated. The wiki pages below and the additional pages they link to will tell you how to get started on contributing code and where you can go to seek further help or ask questions:
+**Want to contribute code to Habitica?** We're always looking for assistance on any issues in our repo with the "Help Wanted" label. The wiki pages below and the additional linked pages will tell you how to start contributing code and where you can seek further help or ask questions:
 * [Guidance for Blacksmiths](https://habitica.fandom.com/wiki/Guidance_for_Blacksmiths) - an introduction to the technologies used and how the software is organized.
-* [Setting up Habitica Locally](https://habitica.fandom.com/wiki/Setting_up_Habitica_Locally) - how to set up a local install of Habitica for development and testing on various platforms.
+* [Setting up Habitica Locally](https://github.com/HabitRPG/habitica/wiki/Setting-Up-Habitica-for-Local-Development) - how to set up a local install of Habitica for development and testing.
+
+**Interested in contributing to Habitica’s mobile apps?** Visit the links below for our mobile repositories.
+* **Android:** https://github.com/HabitRPG/habitica-android
+* **iOS:** https://github.com/HabitRPG/habitica-ios
 
 Habitica's code is licensed as described at https://github.com/HabitRPG/habitica/blob/develop/LICENSE
 
-**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than creating an issue (an admin will advise you if a new issue is necessary; usually it is not).
+**Found a bug?** Please report it to [admin email](mailto:admin@habitica.com) rather than create an issue (an admin will advise you if a new issue is necessary; usually it is not).
 
-**Have any questions about Habitica or its community?** See the links in the [habitica.com](https://habitica.com) website's Help menu or drop in to [Guilds > Tavern Chat](https://habitica.com/groups/tavern) to ask questions or chat socially!
+**Creating a third-party tool?** Please review our [API Usage Guidelines](https://github.com/HabitRPG/habitica/wiki/API-Usage-Guidelines) to ensure that your tool is compliant and maintains the best experience for Habitica players.
+
+**Have any questions about Habitica or contributing?** See the links in the [Habitica](https://habitica.com) website's Help menu. There’s FAQ’s, guides, and the option to reach out to us with any further questions!

config.json.example

@@ -37,6 +37,7 @@
   "NODE_DB_URI": "mongodb://localhost:27017/habitica-dev?replicaSet=rs",
   "TEST_DB_URI": "mongodb://localhost:27017/habitica-test?replicaSet=rs",
   "MONGODB_POOL_SIZE": "10",
+  "MONGODB_SOCKET_TIMEOUT": "20000",
   "NODE_ENV": "development",
   "PATH": "bin:node_modules/.bin:/usr/local/bin:/usr/bin:/bin",
   "PAYPAL_BILLING_PLANS_basic_12mo": "basic_12mo",

gulp/gulp-sprites.js

@@ -42,10 +42,41 @@ function cssVarMap (sprite) {
   }
 }
 
-function createSpritesStream (name, src) {
+function filterFile (file) {
+  if (file.relative.indexOf('Mount_Icon_') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('shop/') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/eggs') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/food') !== -1) {
+    return false;
+  }
+  if (file.path.indexOf('stable/potions') !== -1) {
+    return false;
+  }
+  if (file.relative.indexOf('shop_') === 0) {
+    return false;
+  }
+  if (file.relative.indexOf('icon_background') === 0) {
+    return false;
+  }
+  return true;
+}
+
+async function createSpritesStream (name, src) {
   const stream = mergeStream();
+  // need to import this way bc of weird dependency things
+  // eslint-disable-next-line global-require
+  const filter = require('gulp-filter');
+
+  const f = filter(filterFile);
 
   const spriteData = gulp.src(src)
+    .pipe(f)
     .pipe(spritesmith({
       imgName: `spritesmith-${name}.png`,
       cssName: `spritesmith-${name}.css`,
@@ -63,7 +94,7 @@ function createSpritesStream (name, src) {
   return stream;
 }
 
-gulp.task('sprites:main', () => {
+gulp.task('sprites:main', async () => {
   const mainSrc = sync('habitica-images/**/*.png');
   return createSpritesStream('main', mainSrc);
 });

migrations/archive/2024/2024_purge_invite_accepted.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+import { model as User } from '../../../website/server/models/user';
+
+const MIGRATION_NAME = '2024_purge_invite_accepted';
+const progressCount = 1000;
+let count = 0;
+
+async function updateUsers (userIds) {
+  count += userIds.length;
+  if (count % progressCount === 0) console.warn(`${count} ${userIds[0]}`);
+
+  return await User.updateMany(
+    { _id: { $in: userIds } },
+    { $pull: { notifications: { type: 'GROUP_INVITE_ACCEPTED' } } },
+  ).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'notifications.type': 'GROUP_INVITE_ACCEPTED',
+    'auth.timestamps.loggedin': { $gt: new Date('2024-06-25') },
+  };
+
+  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({ _id: 1 })
+      .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],
+      };
+    }
+
+    const userIds = users.map(user => user._id);
+
+    await updateUsers(userIds); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/users/naming-day.js

@@ -1,14 +1,12 @@
 /* eslint-disable no-console */
-const MIGRATION_NAME = '20230731_naming_day';
-import { v4 as uuid } from 'uuid';
-
-import { model as User } from '../../../website/server/models/user';
+import { model as User } from '../../website/server/models/user';
 
+const MIGRATION_NAME = '20240731_naming_day';
 const progressCount = 1000;
 let count = 0;
 
 async function updateUser (user) {
-  count++;
+  count += 1;
 
   let set;
   let push;
@@ -115,16 +113,16 @@ async function updateUser (user) {
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
 
   if (push) {
-    return await user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
-  } else {
-    return await user.updateOne({ $set: set, $inc: inc }).exec();
+    return user.updateOne({ $set: set, $inc: inc, $push: push }).exec();
   }
+
+  return user.updateOne({ $set: set, $inc: inc }).exec();
 }
 
 export default async function processUsers () {
-  let query = {
+  const query = {
     migration: { $ne: MIGRATION_NAME },
-    'auth.timestamps.loggedin': { $gt: new Date('2023-07-01') },
+    'auth.timestamps.loggedin': { $gt: new Date('2024-07-01') },
   };
 
   const fields = {
@@ -136,7 +134,7 @@ export default async function processUsers () {
     const users = await User // eslint-disable-line no-await-in-loop
       .find(query)
       .limit(250)
-      .sort({_id: 1})
+      .sort({ _id: 1 })
       .select(fields)
       .exec();
 
@@ -152,4 +150,4 @@ export default async function processUsers () {
 
     await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
   }
-};
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.26.1",
+  "version": "5.27.3",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
@@ -15,6 +15,7 @@
     "amplitude": "^6.0.0",
     "apidoc": "^0.54.0",
     "apple-auth": "^1.0.9",
+    "babel-preset-env": "^1.7.0",
     "bcrypt": "^5.1.1",
     "body-parser": "^1.20.2",
     "bootstrap": "^4.6.2",
@@ -35,6 +36,7 @@
     "got": "^11.8.6",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
+    "gulp-filter": "^7.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-nodemon": "^2.5.0",
     "gulp.spritesmith": "^6.13.0",
@@ -74,6 +76,7 @@
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
     "validator": "^13.11.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "winston": "^3.10.0",
     "winston-loggly-bulk": "^3.3.0",
     "xml2js": "^0.6.2"
@@ -108,7 +111,7 @@
     "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
-    "heroku-postbuild": "npm run client:build"
+    "heroku-postbuild": ".heroku/report_deploy.sh"
   },
   "devDependencies": {
     "axios": "^1.4.0",

test/api/unit/middlewares/rateLimiter.test.js

@@ -54,6 +54,7 @@ describe('rateLimiter middleware', () => {
 
   it('does not throw when there are available points', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
     await attachRateLimiter(req, res, next);
 
@@ -71,6 +72,7 @@ describe('rateLimiter middleware', () => {
 
   it('does not throw when an unknown error is thrown by the rate limiter', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     sandbox.stub(logger, 'error');
     sandbox.stub(RateLimiterMemory.prototype, 'consume')
       .returns(Promise.reject(new Error('Unknown error.')));
@@ -104,6 +106,7 @@ describe('rateLimiter middleware', () => {
   it('limits when LIVELINESS_PROBE_KEY is incorrect', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
     nconfGetStub.withArgs('LIVELINESS_PROBE_KEY').returns('abc');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     req.query.liveliness = 'das';
@@ -120,6 +123,7 @@ describe('rateLimiter middleware', () => {
   it('limits when LIVELINESS_PROBE_KEY is not set', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
     nconfGetStub.withArgs('LIVELINESS_PROBE_KEY').returns(undefined);
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     await attachRateLimiter(req, res, next);
@@ -135,6 +139,7 @@ describe('rateLimiter middleware', () => {
   it('throws when LIVELINESS_PROBE_KEY is blank', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
     nconfGetStub.withArgs('LIVELINESS_PROBE_KEY').returns('');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     req.query.liveliness = '';
@@ -150,6 +155,7 @@ describe('rateLimiter middleware', () => {
 
   it('throws when there are no available points remaining', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     // call for 31 times
@@ -173,6 +179,7 @@ describe('rateLimiter middleware', () => {
 
   it('uses the user id if supplied or the ip address', async () => {
     nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(1);
     const attachRateLimiter = requireAgain(pathToRateLimiter).default;
 
     req.ip = 1;
@@ -199,4 +206,51 @@ describe('rateLimiter middleware', () => {
       'X-RateLimit-Reset': sinon.match(Date),
     });
   });
+
+  it('applies increased cost for registration calls with and without user id', async () => {
+    nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_REGISTRATION_COST').returns(3);
+    const attachRateLimiter = requireAgain(pathToRateLimiter).default;
+    req.path = '/api/v4/user/auth/local/register';
+
+    req.ip = 1;
+    await attachRateLimiter(req, res, next);
+
+    req.headers['x-api-user'] = 'user-1';
+    await attachRateLimiter(req, res, next);
+    await attachRateLimiter(req, res, next);
+
+    // user id an ip are counted as separate sources
+    expect(res.set).to.have.been.calledWithMatch({
+      'X-RateLimit-Limit': 30,
+      'X-RateLimit-Remaining': 27, // 2 calls with user id
+      'X-RateLimit-Reset': sinon.match(Date),
+    });
+
+    req.headers['x-api-user'] = undefined;
+    await attachRateLimiter(req, res, next);
+    await attachRateLimiter(req, res, next);
+
+    expect(res.set).to.have.been.calledWithMatch({
+      'X-RateLimit-Limit': 30,
+      'X-RateLimit-Remaining': 24, // 3 calls with only ip
+      'X-RateLimit-Reset': sinon.match(Date),
+    });
+  });
+
+  it('applies increased cost for unauthenticated API calls', async () => {
+    nconfGetStub.withArgs('RATE_LIMITER_ENABLED').returns('true');
+    nconfGetStub.withArgs('RATE_LIMITER_IP_COST').returns(10);
+    const attachRateLimiter = requireAgain(pathToRateLimiter).default;
+
+    req.ip = 1;
+    await attachRateLimiter(req, res, next);
+    await attachRateLimiter(req, res, next);
+
+    expect(res.set).to.have.been.calledWithMatch({
+      'X-RateLimit-Limit': 30,
+      'X-RateLimit-Remaining': 10,
+      'X-RateLimit-Reset': sinon.match(Date),
+    });
+  });
 });

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

@@ -3,6 +3,7 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
+import { model as Group } from '../../../../../website/server/models/group';
 
 describe('GET /groups/:groupId/chat', () => {
   let user;
@@ -37,4 +38,34 @@ describe('GET /groups/:groupId/chat', () => {
       });
     });
   });
+
+  context('public Guild', () => {
+    let group;
+    before(async () => {
+      ({ group } = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'test group',
+          type: 'guild',
+          privacy: 'private',
+        },
+        members: 1,
+        upgradeToGroupPlan: true,
+        chat: [
+          'Hello',
+          'Welcome to the Guild',
+        ],
+      }));
+
+      // Creation API is shut down, we need to simulate an extant public group
+      await Group.updateOne({ _id: group._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
+    });
+
+    it('returns error if user attempts to fetch a sunset Guild', async () => {
+      await expect(user.get(`/groups/${group._id}/chat`)).to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('featureRetired'),
+      });
+    });
+  });
 });

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

@@ -4,6 +4,7 @@ import {
   createAndPopulateGroup,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
+import { model as Group } from '../../../../../website/server/models/group';
 
 describe('POST /chat/:chatId/like', () => {
   let user;
@@ -111,4 +112,18 @@ describe('POST /chat/:chatId/like', () => {
         message: t('groupNotFound'),
       });
   });
+
+  it('does not like a message that belongs to a sunset public group', async () => {
+    const message = await anotherUser.post(`/groups/${groupWithChat._id}/chat`, { message: testMessage });
+
+    // Creation API is shut down, we need to simulate an extant public group
+    await Group.updateOne({ _id: groupWithChat._id }, { $set: { privacy: 'public' }, $unset: { 'purchased.plan': 1 } }).exec();
+
+    await expect(user.post(`/groups/${groupWithChat._id}/chat/${message.message.id}/like`))
+      .to.eventually.be.rejected.and.eql({
+        code: 400,
+        error: 'BadRequest',
+        message: t('featureRetired'),
+      });
+  });
 });

test/api/v3/integration/debug/POST-debug_boss-rage.test.js

@@ -0,0 +1,73 @@
+import nconf from 'nconf';
+import {
+  generateUser,
+  createAndPopulateGroup,
+} from '../../../../helpers/api-integration/v3';
+
+describe('POST /debug/boss-rage', () => {
+  let user;
+  let nconfStub;
+
+  beforeEach(async () => {
+    user = await generateUser();
+  });
+
+  beforeEach(() => {
+    nconfStub = sandbox.stub(nconf, 'get');
+    nconfStub.withArgs('DEBUG_ENABLED').returns(true);
+    nconfStub.withArgs('BASE_URL').returns('https://example.com');
+  });
+
+  afterEach(() => {
+    nconfStub.restore();
+  });
+
+  it('errors if user is not in a party', async () => {
+    await expect(user.post('/debug/boss-rage'))
+      .to.eventually.be.rejected.and.deep.equal({
+        code: 400,
+        error: 'BadRequest',
+        message: 'User not in a party.',
+      });
+  });
+
+  it('returns error when not in production mode', async () => {
+    nconfStub.withArgs('DEBUG_ENABLED').returns(false);
+
+    await expect(user.post('/debug/boss-rage'))
+      .to.eventually.be.rejected.and.deep.equal({
+        code: 404,
+        error: 'NotFound',
+        message: 'Not found.',
+      });
+  });
+
+  context('user is in a party', async () => {
+    let party;
+
+    beforeEach(async () => {
+      const { group, groupLeader } = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Party',
+          type: 'party',
+        },
+        members: 2,
+      });
+      party = group;
+      user = groupLeader;
+    });
+
+    it('increases boss rage to 50', async () => {
+      await user.post('/debug/boss-rage');
+      await party.sync();
+      expect(party.quest.progress.rage).to.eql(50);
+    });
+
+    it('increases boss rage to 100', async () => {
+      await user.post('/debug/boss-rage');
+      await user.post('/debug/boss-rage');
+      await party.sync();
+      expect(party.quest.progress.rage).to.eql(100);
+    });
+  });
+});

test/api/v3/integration/debug/POST-debug_jumpTime.test.js

@@ -34,9 +34,11 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
     const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: 1 })).time);
-    expect(newResultDate.getDate()).to.eql(today.getDate() + 1);
-    expect(newResultDate.getMonth()).to.eql(today.getMonth());
-    expect(newResultDate.getFullYear()).to.eql(today.getFullYear());
+    const tomorrow = new Date(today.valueOf());
+    tomorrow.setDate(today.getDate() + 1);
+    expect(newResultDate.getDate()).to.eql(tomorrow.getDate());
+    expect(newResultDate.getMonth()).to.eql(tomorrow.getMonth());
+    expect(newResultDate.getFullYear()).to.eql(tomorrow.getFullYear());
   });
 
   it('jumps back', async () => {
@@ -45,9 +47,11 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
     const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: -1 })).time);
-    expect(newResultDate.getDate()).to.eql(today.getDate() - 1);
-    expect(newResultDate.getMonth()).to.eql(today.getMonth());
-    expect(newResultDate.getFullYear()).to.eql(today.getFullYear());
+    const yesterday = new Date(today.valueOf());
+    yesterday.setDate(today.getDate() - 1);
+    expect(newResultDate.getDate()).to.eql(yesterday.getDate());
+    expect(newResultDate.getMonth()).to.eql(yesterday.getMonth());
+    expect(newResultDate.getFullYear()).to.eql(yesterday.getFullYear());
   });
 
   it('can jump a lot', async () => {

test/api/v3/integration/groups/POST-groups_groupId_join.test.js

@@ -85,22 +85,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(user.get('/user')).to.eventually.have.nested.property('items.quests.basilist', 1);
       });
 
-      it('notifies inviting user that their invitation was accepted', async () => {
-        await invitedUser.post(`/groups/${guild._id}/join`);
-
-        const inviter = await user.get('/user');
-        const expectedData = {
-          headerText: t('invitationAcceptedHeader'),
-          bodyText: t('invitationAcceptedBody', {
-            username: invitedUser.auth.local.username,
-            groupName: guild.name,
-          }),
-        };
-
-        expect(inviter.notifications[1].type).to.eql('GROUP_INVITE_ACCEPTED');
-        expect(inviter.notifications[1].data).to.eql(expectedData);
-      });
-
       it('awards Joined Guild achievement', async () => {
         await invitedUser.post(`/groups/${guild._id}/join`);
 
@@ -155,23 +139,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(invitedUser.get('/user')).to.eventually.have.nested.property('party._id', party._id);
       });
 
-      it('notifies inviting user that their invitation was accepted', async () => {
-        await invitedUser.post(`/groups/${party._id}/join`);
-
-        const inviter = await user.get('/user');
-
-        const expectedData = {
-          headerText: t('invitationAcceptedHeader'),
-          bodyText: t('invitationAcceptedBody', {
-            username: invitedUser.auth.local.username,
-            groupName: party.name,
-          }),
-        };
-
-        expect(inviter.notifications[0].type).to.eql('GROUP_INVITE_ACCEPTED');
-        expect(inviter.notifications[0].data).to.eql(expectedData);
-      });
-
       it('clears invitation from user when joining party', async () => {
         await invitedUser.post(`/groups/${party._id}/join`);
 

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

@@ -10,6 +10,7 @@ describe('GET /heroes/:heroId', () => {
   const heroFields = [
     '_id', 'id', 'auth', 'balance', 'contributor', 'flags', 'items',
     'lastCron', 'party', 'preferences', 'profile', 'purchased', 'secret', 'achievements',
+    'stats',
   ];
 
   before(async () => {

test/api/v3/integration/hall/PUT-hall_heores_heroId.test.js

@@ -11,6 +11,7 @@ describe('PUT /heroes/:heroId', () => {
   const heroFields = [
     '_id', 'auth', 'balance', 'contributor', 'flags', 'items', 'lastCron',
     'party', 'preferences', 'profile', 'purchased', 'secret', 'permissions', 'achievements',
+    'stats',
   ];
 
   before(async () => {

test/api/v3/integration/world-state/GET-world-state.test.js

@@ -123,7 +123,7 @@ describe('GET /world-state', () => {
 
       const res = await requester().get('/world-state');
 
-      expect(res.npcImageSuffix).to.equal('winter');
+      expect(res.npcImageSuffix).to.equal('fall');
     });
   });
 });

test/common/libs/shops.test.js

@@ -47,15 +47,17 @@ describe('shops', () => {
 
     describe('premium hatching potions', () => {
       it('contains current scheduled premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01'));
+        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.length).to.eql(2);
+        expect(potions.items.length).to.eql(3);
       });
 
       it('does not contain past scheduled premium hatching potions', async () => {
+        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.filter(x => x.key === 'Aquatic' || x.key === 'Celestial').length).to.eql(0);
+        expect(potions.items.filter(x => x.key === 'Aquatic' || x.key === 'Celestial').length, 'Aquatic or Celestial found').to.eql(0);
       });
+
       it('returns end date for scheduled premium potions', async () => {
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
         potions.items.forEach(potion => {
@@ -73,9 +75,9 @@ describe('shops', () => {
       });
 
       it('does not contain locked quest premium hatching potions', async () => {
-        clock = sinon.useFakeTimers(new Date('2024-04-01'));
+        clock = sinon.useFakeTimers(new Date('2024-04-01T09:00:00.000Z'));
         const potions = shared.shops.getMarketCategories(user).find(x => x.identifier === 'premiumHatchingPotions');
-        expect(potions.items.length).to.eql(2);
+        expect(potions.items.length).to.eql(3);
         expect(potions.items.filter(x => x.key === 'Bronze' || x.key === 'BlackPearl').length).to.eql(0);
       });
 
@@ -341,6 +343,16 @@ describe('shops', () => {
       const backgrounds = shopCategories.find(cat => cat.identifier === 'backgrounds').items;
       expect(backgrounds.length).to.be.greaterThan(0);
     });
+
+    it('does not add an end date to steampunk gear', () => {
+      const categories = shopCategories.filter(cat => cat.identifier.startsWith('30'));
+      categories.forEach(category => {
+        expect(category.end).to.not.exist;
+        category.items.forEach(item => {
+          expect(item.end).to.not.exist;
+        });
+      });
+    });
   });
 
   describe('customizationShop', () => {

test/common/ops/buy/purchase.test.js

@@ -233,6 +233,17 @@ describe('shared.ops.purchase', () => {
       expect(user.items.hatchingPotions[key]).to.eql(1);
     });
 
+    it('purchases event hatching potion', async () => {
+      clock.restore();
+      clock = sandbox.useFakeTimers(moment('2022-04-10').valueOf());
+      const type = 'hatchingPotions';
+      const key = 'Veggie';
+
+      await purchase(user, { params: { type, key } });
+
+      expect(user.items.hatchingPotions[key]).to.eql(1);
+    });
+
     it('purchases hatching potion if user completed quest', async () => {
       const type = 'hatchingPotions';
       const key = 'Bronze';

test/content/index.test.js

@@ -42,23 +42,23 @@ describe('content index', () => {
     expect(Object.keys(juneGear).length, '').to.equal(Object.keys(julyGear).length - 3);
   });
 
-  it('Releases pets gear when appropriate without needing restarting', () => {
+  it('Releases pets when appropriate without needing restarting', () => {
     clock = sinon.useFakeTimers(new Date('2024-06-20'));
     const junePets = content.petInfo;
     expect(junePets['Chameleon-Base']).to.not.exist;
     clock.restore();
-    clock = sinon.useFakeTimers(new Date('2024-07-10'));
+    clock = sinon.useFakeTimers(new Date('2024-07-18'));
     const julyPets = content.petInfo;
     expect(julyPets['Chameleon-Base']).to.exist;
     expect(Object.keys(junePets).length, '').to.equal(Object.keys(julyPets).length - 10);
   });
 
-  it('Releases mounts gear when appropriate without needing restarting', () => {
+  it('Releases mounts when appropriate without needing restarting', () => {
     clock = sinon.useFakeTimers(new Date('2024-06-20'));
     const juneMounts = content.mountInfo;
     expect(juneMounts['Chameleon-Base']).to.not.exist;
     clock.restore();
-    clock = sinon.useFakeTimers(new Date('2024-07-10'));
+    clock = sinon.useFakeTimers(new Date('2024-07-18'));
     const julyMounts = content.mountInfo;
     expect(julyMounts['Chameleon-Base']).to.exist;
     expect(Object.keys(juneMounts).length, '').to.equal(Object.keys(julyMounts).length - 10);

test/content/schedule.test.js

@@ -18,12 +18,19 @@ function validateMatcher (matcher, checkedDate) {
 
 describe('Content Schedule', () => {
   let switchoverTime;
+  let clock;
 
   beforeEach(() => {
     switchoverTime = nconf.get('CONTENT_SWITCHOVER_TIME_OFFSET') || 0;
     clearCachedMatchers();
   });
 
+  afterEach(() => {
+    if (clock) {
+      clock.restore();
+    }
+  });
+
   it('assembles scheduled items on january 15th', () => {
     const date = new Date('2024-01-15');
     const matchers = getAllScheduleMatchingGroups(date);
@@ -105,8 +112,14 @@ describe('Content Schedule', () => {
     expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-05-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
 
-  it('sets the end date if its on the release day', () => {
-    const date = new Date('2024-05-07T07:00:00.000Z');
+  it('sets the end date if its on the release day before switchover', () => {
+    const date = new Date('2024-05-07T07:00:00.000+00:00');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-05-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+  });
+
+  it('sets the end date if its on the release day after switchover', () => {
+    const date = new Date('2024-05-07T09:00:00.000+00:00');
     const matchers = getAllScheduleMatchingGroups(date);
     expect(matchers.backgrounds.end).to.eql(moment.utc(`2024-06-07T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
@@ -123,12 +136,54 @@ describe('Content Schedule', () => {
     expect(matchers.seasonalGear.end).to.eql(moment.utc(`2024-06-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
 
+  it('sets the end date for a winter gala', () => {
+    const date = new Date('2024-12-22');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
+  });
+
+  it('uses correct date for first hours of the month', () => {
+    // if the date is checked before CONTENT_SWITCHOVER_TIME_OFFSET,
+    // it should be considered the previous month
+    const date = new Date('2024-05-01T02:00:00.000Z');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.petQuests.items).to.contain('snake');
+    expect(matchers.petQuests.items).to.not.contain('horse');
+    expect(matchers.timeTravelers.match('202304'), '202304').to.be.true;
+    expect(matchers.timeTravelers.match('202404'), '202404').to.be.false;
+    expect(matchers.timeTravelers.match('202305'), '202305').to.be.false;
+  });
+
+  it('uses correct date after switchover time', () => {
+    // if the date is checked after CONTENT_SWITCHOVER_TIME_OFFSET,
+    // it should be considered the current
+    const date = new Date('2024-05-01T09:00:00.000Z');
+    const matchers = getAllScheduleMatchingGroups(date);
+    expect(matchers.petQuests.items).to.contain('snake');
+    expect(matchers.petQuests.items).to.not.contain('horse');
+    expect(matchers.timeTravelers.match('202304'), '202304').to.be.false;
+    expect(matchers.timeTravelers.match('202305'), '202305').to.be.true;
+    expect(matchers.timeTravelers.match('202405'), '202405').to.be.false;
+  });
+
+  it('uses UTC timezone', () => {
+    // if the date is checked after CONTENT_SWITCHOVER_TIME_OFFSET,
+    // it should be considered the current
+    clock = sinon.useFakeTimers(new Date('2024-05-01T05:00:00.000-04:00'));
+    const matchers = getAllScheduleMatchingGroups();
+    expect(matchers.petQuests.items).to.contain('snake');
+    expect(matchers.petQuests.items).to.not.contain('horse');
+    expect(matchers.timeTravelers.match('202304'), '202304').to.be.false;
+    expect(matchers.timeTravelers.match('202305'), '202305').to.be.true;
+    expect(matchers.timeTravelers.match('202405'), '202405').to.be.false;
+  });
+
   it('contains content for repeating events', () => {
     const date = new Date('2024-04-15');
     const matchers = getAllScheduleMatchingGroups(date);
     expect(matchers.premiumHatchingPotions).to.exist;
-    expect(matchers.premiumHatchingPotions.items.length).to.equal(4);
-    expect(matchers.premiumHatchingPotions.items.indexOf('Garden')).to.not.equal(-1);
+    expect(matchers.premiumHatchingPotions.items.length).to.equal(5);
+    expect(matchers.premiumHatchingPotions.items.indexOf('Veggie')).to.not.equal(-1);
     expect(matchers.premiumHatchingPotions.items.indexOf('Porcelain')).to.not.equal(-1);
   });
 
@@ -245,27 +300,33 @@ describe('Content Schedule', () => {
     it('allows sets matching the month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202307')).to.be.true;
-      expect(matcher.match('202207')).to.be.true;
+      expect(matcher.match('202307'), '202307').to.be.true;
+      expect(matcher.match('202207'), '202207').to.be.true;
     });
 
     it('disallows sets not matching the month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202306')).to.be.false;
-      expect(matcher.match('202402')).to.be.false;
+      expect(matcher.match('202306'), '202306').to.be.false;
+      expect(matcher.match('202402'), '202402').to.be.false;
     });
 
     it('disallows sets from current month', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
-      expect(matcher.match('202407')).to.be.false;
+      expect(matcher.match('202407'), '202407').to.be.false;
     });
 
     it('disallows sets from the future', () => {
       const date = new Date('2024-07-08');
-      const matcher = getAllScheduleMatchingGroups(date).backgrounds;
-      expect(matcher.match('202507')).to.be.false;
+      const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
+      expect(matcher.match('202507'), '202507').to.be.false;
+    });
+
+    it('matches sets released in the earlier half of the year', () => {
+      const date = new Date('2024-07-08');
+      const matcher = getAllScheduleMatchingGroups(date).timeTravelers;
+      expect(matcher.match('202401'), '202401').to.be.true;
     });
   });
 });

test/content/time-travelers.test.js

@@ -45,7 +45,7 @@ describe('time-travelers store', () => {
 
   describe('on may 1st', () => {
     beforeEach(() => {
-      date = new Date('2024-05-01');
+      date = new Date('2024-05-01T09:00:00.000Z');
     });
     it('returns the correct gear', () => {
       const items = timeTravelers.timeTravelerStore(user, date);

website/client/src/app.vue

@@ -27,73 +27,15 @@
         </div>
       </div>
     </div>
-    <div
-      id="app"
-      :class="{
-        'casting-spell': castingSpell,
-      }"
-    >
-      <!-- <banned-account-modal /> -->
-      <amazon-payments-modal v-if="!isStaticPage" />
-      <payments-success-modal />
-      <sub-cancel-modal-confirm v-if="isUserLoaded" />
-      <sub-canceled-modal v-if="isUserLoaded" />
-      <bug-report-modal v-if="isUserLoaded" />
-      <bug-report-success-modal v-if="isUserLoaded" />
-      <external-link-modal />
-      <birthday-modal />
-      <snackbars />
-      <router-view v-if="!isUserLoggedIn || isStaticPage" />
-      <template v-else>
-        <template v-if="isUserLoaded">
-          <chat-banner />
-          <damage-paused-banner />
-          <gems-promo-banner />
-          <gift-promo-banner />
-          <birthday-banner />
-          <notifications-display />
-          <app-menu />
-          <div
-            class="container-fluid"
-            :class="{'no-margin': noMargin}"
-          >
-            <app-header />
-            <buyModal
-              :item="selectedItemToBuy || {}"
-              :with-pin="true"
-              :generic-purchase="genericPurchase(selectedItemToBuy)"
-              @buyPressed="customPurchase($event)"
-            />
-            <selectMembersModal
-              :item="selectedSpellToBuy || {}"
-              :group="user.party"
-              @memberSelected="memberSelected($event)"
-            />
-            <div :class="{sticky: user.preferences.stickyHeader}">
-              <router-view />
-            </div>
-          </div>
-          <app-footer v-if="!hideFooter" />
-          <audio
-            id="sound"
-            ref="sound"
-            autoplay="autoplay"
-          ></audio>
-        </template>
-      </template>
-    </div>
+    <snackbars />
+    <router-view v-if="!isUserLoggedIn || isStaticPage" />
+    <user-main v-else />
   </div>
 </template>
 
 <style lang='scss' scoped>
   @import '~@/assets/scss/colors.scss';
 
-  #app {
-    display: flex;
-    flex-direction: column;
-    overflow-x: hidden;
-  }
-
   #loading-screen-inapp {
     #melior {
       color: $white;
@@ -163,68 +105,20 @@
 
 <script>
 import axios from 'axios';
-import { loadProgressBar } from 'axios-progress-bar';
 
-import birthdayModal from '@/components/news/birthdayModal';
-import AppMenu from './components/header/menu';
-import AppHeader from './components/header/index';
-import ChatBanner from './components/header/banners/chatBanner';
-import DamagePausedBanner from './components/header/banners/damagePaused';
-import GemsPromoBanner from './components/header/banners/gemsPromo';
-import GiftPromoBanner from './components/header/banners/giftPromo';
-import BirthdayBanner from './components/header/banners/birthdayBanner';
-import AppFooter from './components/appFooter';
-import notificationsDisplay from './components/notifications';
-import snackbars from './components/snackbars/notifications';
-import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
-import BuyModal from './components/shops/buyModal.vue';
-import SelectMembersModal from '@/components/selectMembersModal.vue';
-import notifications from '@/mixins/notifications';
-import { setup as setupPayments } from '@/libs/payments';
-import amazonPaymentsModal from '@/components/payments/amazonModal';
-import paymentsSuccessModal from '@/components/payments/successModal';
-import subCancelModalConfirm from '@/components/payments/cancelModalConfirm';
-import subCanceledModal from '@/components/payments/canceledModal';
-import externalLinkModal from '@/components/externalLinkModal.vue';
-
-import spellsMixin from '@/mixins/spells';
-import {
-  CONSTANTS,
-  getLocalSetting,
-  removeLocalSetting,
-} from '@/libs/userlocalManager';
-
-const bugReportModal = () => import(/* webpackChunkName: "bug-report-modal" */'@/components/bugReportModal');
-const bugReportSuccessModal = () => import(/* webpackChunkName: "bug-report-success-modal" */'@/components/bugReportSuccessModal');
+import { mapState } from '@/libs/store';
+import userMain from '@/pages/user-main';
+import snackbars from '@/components/snackbars/notifications';
 
 const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   name: 'App',
   components: {
-    AppMenu,
-    AppHeader,
-    AppFooter,
-    birthdayModal,
-    ChatBanner,
-    DamagePausedBanner,
-    GemsPromoBanner,
-    GiftPromoBanner,
-    BirthdayBanner,
-    notificationsDisplay,
     snackbars,
-    BuyModal,
-    SelectMembersModal,
-    amazonPaymentsModal,
-    paymentsSuccessModal,
-    subCancelModalConfirm,
-    subCanceledModal,
-    bugReportModal,
-    bugReportSuccessModal,
-    externalLinkModal,
+    userMain,
   },
-  mixins: [notifications, spellsMixin],
   data () {
     return {
       selectedItemToBuy: null,
@@ -238,71 +132,25 @@ export default {
     };
   },
   computed: {
-    ...mapState(['isUserLoggedIn', 'browserTimezoneUtcOffset', 'isUserLoaded', 'notificationsRemoved']),
+    ...mapState(['isUserLoggedIn', 'isUserLoaded', 'notificationsRemoved']),
     ...mapState({ user: 'user.data' }),
     isStaticPage () {
       return this.$route.meta.requiresLogin === false;
     },
-    castingSpell () {
-      return this.$store.state.spellOptions.castingSpell;
-    },
-    noMargin () {
-      return ['privateMessages'].includes(this.$route.name);
-    },
-    hideFooter () {
-      return ['privateMessages'].includes(this.$route.name);
-    },
   },
   created () {
-    this.$root.$on('playSound', sound => {
-      const theme = this.user.preferences.sound;
-
-      if (!theme || theme === 'off') {
-        return;
-      }
-
-      const file = `/static/audio/${theme}/${sound}`;
-
-      if (this.audioSuffix === null) {
-        this.audioSource = document.createElement('source');
-        if (this.$refs.sound.canPlayType('audio/ogg')) {
-          this.audioSuffix = '.ogg';
-          this.audioSource.type = 'audio/ogg';
-        } else {
-          this.audioSuffix = '.mp3';
-          this.audioSource.type = 'audio/mp3';
-        }
-        this.audioSource.src = file + this.audioSuffix;
-        this.$refs.sound.appendChild(this.audioSource);
-      } else {
-        this.audioSource.src = file + this.audioSuffix;
-      }
-
-      this.$refs.sound.load();
+    // Setup listener for title
+    this.$store.watch(state => state.title, title => {
+      document.title = title;
     });
-
-    // @TODO: I'm not sure these should be at the app level.
-    // Can we move these back into shop/inventory or maybe they need a lateral move?
-    this.$root.$on('buyModal::showItem', item => {
-      this.selectedItemToBuy = item;
-      this.$root.$emit('bv::show::modal', 'buy-modal');
-    });
-
-    this.$root.$on('bv::modal::hidden', event => {
-      if (event.componentId === 'buy-modal') {
-        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+    this.$store.watch(state => state.isUserLoaded, () => {
+      if (this.isUserLoaded) {
+        this.hideLoadingScreen();
       }
     });
-
-    this.$root.$on('selectMembersModal::showItem', item => {
-      this.selectedSpellToBuy = item;
-      this.$root.$emit('bv::show::modal', 'select-member-modal');
-    });
-
-    // @TODO split up this file, it's too big
-
-    loadProgressBar({
-      showSpinner: false,
+    this.$nextTick(() => {
+      // Load external scripts after the app has been rendered
+      Analytics.load();
     });
 
     axios.interceptors.response.use(response => { // Set up Response interceptors
@@ -414,79 +262,20 @@ export default {
 
       return Promise.reject(error);
     });
-
-    // Setup listener for title
-    this.$store.watch(state => state.title, title => {
-      document.title = title;
-    });
-    this.$nextTick(() => {
-      // Load external scripts after the app has been rendered
-      Analytics.load();
-    });
-
-    if (this.isUserLoggedIn && !this.isStaticPage) {
-      // Load the user and the user tasks
-      Promise.all([
-        this.$store.dispatch('user:fetch'),
-        this.$store.dispatch('tasks:fetchUserTasks'),
-      ]).then(() => {
-        this.$store.state.isUserLoaded = true;
-        Analytics.setUser();
-        Analytics.updateUser();
-        return axios.get(
-          '/api/v4/i18n/browser-script',
-          {
-            language: this.user.preferences.language,
-            headers: {
-              'Cache-Control': 'no-cache',
-              Pragma: 'no-cache',
-              Expires: '0',
-            },
-          },
-        );
-      }).then(() => {
-        const i18nData = window && window['habitica-i18n'];
-        this.$loadLocale(i18nData);
-        this.hideLoadingScreen();
-
-        // Adjust the timezone offset
-        const browserTimezoneOffset = -this.browserTimezoneUtcOffset;
-        if (this.user.preferences.timezoneOffset !== browserTimezoneOffset) {
-          this.$store.dispatch('user:set', {
-            'preferences.timezoneOffset': browserTimezoneOffset,
-          });
-        }
-
-        let appState = getLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
-        if (appState) {
-          appState = JSON.parse(appState);
-          if (appState.paymentCompleted) {
-            removeLocalSetting(CONSTANTS.savedAppStateValues.SAVED_APP_STATE);
-            this.$root.$emit('habitica:payment-success', appState);
-          }
-        }
-        this.$nextTick(() => {
-          // Load external scripts after the app has been rendered
-          setupPayments();
-        });
-      }).catch(err => {
-        console.error('Impossible to fetch user. Clean up localStorage and refresh.', err); // eslint-disable-line no-console
-      });
-    } else {
-      this.hideLoadingScreen();
-    }
-  },
-  beforeDestroy () {
-    this.$root.$off('playSound');
-    this.$root.$off('buyModal::showItem');
-    this.$root.$off('selectMembersModal::showItem');
   },
   mounted () {
     // Remove the index.html loading screen and now show the inapp loading
     const loadingScreen = document.getElementById('loading-screen');
     if (loadingScreen) document.body.removeChild(loadingScreen);
+
+    if (this.isStaticPage || !this.isUserLoggedIn) {
+      this.hideLoadingScreen();
+    }
   },
   methods: {
+    hideLoadingScreen () {
+      this.loading = false;
+    },
     checkForBannedUser (error) {
       const AUTH_SETTINGS = localStorage.getItem('habit-mobile-settings');
       const parseSettings = JSON.parse(AUTH_SETTINGS);
@@ -507,57 +296,10 @@ export default {
       this.$store.dispatch('auth:logout', { redirectToLogin: true });
       return true;
     },
-    itemSelected (item) {
-      this.selectedItemToBuy = item;
-    },
-    genericPurchase (item) {
-      if (!item) return false;
-
-      if (['card', 'debuffPotion'].includes(item.purchaseType)) return false;
-
-      return true;
-    },
-    customPurchase (item) {
-      if (item.purchaseType === 'card') {
-        this.selectedSpellToBuy = item;
-
-        // hide the dialog
-        this.$root.$emit('bv::hide::modal', 'buy-modal');
-        // remove the dialog from our modal-stack,
-        // the default hidden event is delayed
-        this.$root.$emit('bv::modal::hidden', {
-          target: {
-            id: 'buy-modal',
-          },
-        });
-
-        this.$root.$emit('bv::show::modal', 'select-member-modal');
-      }
-
-      if (item.purchaseType === 'debuffPotion') {
-        this.castStart(item, this.user);
-      }
-    },
-    async memberSelected (member) {
-      await this.castStart(this.selectedSpellToBuy, member);
-
-      this.selectedSpellToBuy = null;
-
-      if (this.user.party._id) {
-        this.$store.dispatch('party:getMembers', { forceLoad: true });
-      }
-
-      this.$root.$emit('bv::hide::modal', 'select-member-modal');
-    },
-    hideLoadingScreen () {
-      this.loading = false;
-    },
   },
 };
 </script>
 
-<style src="intro.js/minified/introjs.min.css"></style>
-<style src="axios-progress-bar/dist/nprogress.css"></style>
 <style src="@/assets/scss/index.scss" lang="scss"></style>
 <style src="@/assets/scss/sprites.scss" lang="scss"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

website/client/src/assets/scss/button.scss

@@ -174,6 +174,30 @@
   }
 }
 
+.btn-warning {
+  background: $orange-10;
+  color: $white !important;
+
+  &:hover:not(:disabled):not(.disabled) {
+    background: $orange-100;
+    color: $white;
+  }
+
+  &:focus {
+    background: $orange-10;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active:focus, &:not(:disabled):not(.disabled).active:focus {
+    box-shadow: none;
+    border-color: $purple-400;
+  }
+
+  &:not(:disabled):not(.disabled):active, &:not(:disabled):not(.disabled).active {
+    background: $orange-10;
+  }
+}
+
 .btn-success {
   background: $green-50;
   border: 1px solid transparent;

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

@@ -23,16 +23,14 @@
         {{ $t('foundNewItems') }}
       </h2>
       <div class="d-flex justify-content-center">
-        <div
+        <Sprite
           class="item-box ml-auto mr-3"
-          :class="eggClass"
-        >
-        </div>
-        <div
+          :image-name="eggClass"
+        />
+        <Sprite
           class="item-box mr-auto"
-          :class="potionClass"
-        >
-        </div>
+          :image-name="potionClass"
+        />
       </div>
       <p
         v-once
@@ -103,8 +101,12 @@
 
 <script>
 import closeIcon from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
+  components: {
+    Sprite,
+  },
   data () {
     return {
       icons: Object.freeze({

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

@@ -19,10 +19,10 @@
       </div>
       <div class="inner-content">
         <div class="achievement-background d-flex align-items-center">
-          <div
+          <Sprite
             class="icon"
-            :class="achievementClass"
-          ></div>
+            :image-name="achievementClass"
+          />
         </div>
         <h4
           class="title"
@@ -99,8 +99,12 @@
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
 import svgClose from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
+  components: {
+    Sprite,
+  },
   props: ['data'],
   data () {
     return {

website/client/src/components/admin-panel/index.vue

@@ -1,30 +1,41 @@
 <template>
-  <div class="row standard-page">
-    <div class="well col-12">
+  <div class="row standard-page col-12 d-flex justify-content-center">
+    <div class="admin-panel-content">
       <h1>Admin Panel</h1>
-
-      <div>
-        <form
-          class="form-inline"
-          @submit.prevent="loadHero(userIdentifier)"
-        >
+      <form
+        class="form-inline"
+        @submit.prevent="searchUsers(userIdentifier)"
+      >
+        <div class="input-group col pl-0 pr-0">
           <input
             v-model="userIdentifier"
-            class="form-control uidField"
+            class="form-control"
             type="text"
-            :placeholder="'User ID or Username; blank for your account'"
+            :placeholder="'UserID, username, email, or leave blank for your account'"
           >
-          <input
-            type="submit"
-            value="Load User"
-            class="btn btn-secondary"
-          >
-        </form>
-      </div>
+          <div class="input-group-append">
+            <button
+              class="btn btn-primary"
+              type="button"
+              @click="loadUser(userIdentifier)"
+            >
+              Load User
+            </button>
+            <button
+              class="btn btn-secondary"
+              type="button"
+              @click="searchUsers(userIdentifier)"
+            >
+              Search
+            </button>
+          </div>
+        </div>
+      </form>
 
-      <div>
-        <router-view @changeUserIdentifier="changeUserIdentifier" />
-      </div>
+      <router-view
+        class="mt-3"
+        @changeUserIdentifier="changeUserIdentifier"
+      />
     </div>
   </div>
 </template>
@@ -33,6 +44,15 @@
   .uidField {
     min-width: 45ch;
   }
+
+  .input-group-append {
+    width:auto;
+  }
+
+  .admin-panel-content {
+    flex: 0 0 800px;
+    max-width: 800px;
+  }
 </style>
 
 <script>
@@ -62,7 +82,24 @@ export default {
       // (useful if we want to re-fetch the user after making changes).
       this.userIdentifier = newId;
     },
-    async loadHero (userIdentifier) {
+    async searchUsers (userIdentifier) {
+      if (!userIdentifier || userIdentifier === '') {
+        this.loadUser();
+        return;
+      }
+      this.$router.push({
+        name: 'adminPanelSearch',
+        params: { userIdentifier },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          // the admin has requested that the same user be displayed again so reload the page
+          // (e.g., if they changed their mind about changes they were making)
+          this.$router.go();
+        }
+      });
+    },
+
+    async loadUser (userIdentifier) {
       const id = userIdentifier || this.user._id;
 
       this.$router.push({

website/client/src/components/admin-panel/search.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div
+      v-if="noUsersFound"
+      class="alert alert-warning"
+      role="alert"
+    >
+      Could not find any matching users.
+    </div>
+    <loading-spinner
+      v-if="isSearching"
+      class="mx-auto mb-2"
+      dark-color="true"
+    />
+    <div
+      v-if="users.length > 0"
+      class="list-group"
+    >
+      <a
+        v-for="user in users"
+        :key="user._id"
+        href="#"
+        class="list-group-item list-group-item-action"
+        @click="loadUser(user._id)"
+      >
+        <div class="d-flex w-100 justify-content-between">
+          <h5 class="mb-1">{{ user.profile.name }}</h5>
+          <small>{{ user._id }}</small>
+        </div>
+        <p
+          class="mb-1"
+          :class="{'highlighted-value': matchValueToIdentifier(user.auth.local.username)}"
+        >
+          @{{ user.auth.local.username }}</p>
+        <p class="mb-0">
+          <span
+            v-for="email in userEmails(user)"
+            :key="email"
+            :class="{'highlighted-value': matchValueToIdentifier(email)}"
+          >
+            {{ email }}
+          </span>
+        </p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .highlighted-value {
+    font-weight: bold;
+  }
+</style>
+
+<script>
+import VueRouter from 'vue-router';
+import { mapState } from '@/libs/store';
+import LoadingSpinner from '../ui/loadingSpinner';
+
+const { isNavigationFailure, NavigationFailureType } = VueRouter;
+
+export default {
+  components: {
+    LoadingSpinner,
+  },
+  data () {
+    return {
+      userIdentifier: '',
+      users: [],
+      noUsersFound: false,
+      isSearching: false,
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+  },
+  beforeRouteUpdate (to, from, next) {
+    this.userIdentifier = to.params.userIdentifier;
+    next();
+  },
+  watch: {
+    userIdentifier () {
+      this.isSearching = true;
+      this.$store.dispatch('adminPanel:searchUsers', { userIdentifier: this.userIdentifier }).then(users => {
+        this.isSearching = false;
+        if (users.length === 1) {
+          this.loadUser(users[0]._id);
+        } else {
+          const matchIndex = users.findIndex(user => this.isExactMatch(user));
+          if (matchIndex !== -1) {
+            users.splice(0, 0, users.splice(matchIndex, 1)[0]);
+          }
+          this.users = users;
+          this.noUsersFound = users.length === 0;
+        }
+      });
+      this.$emit('changeUserIdentifier', this.userIdentifier); // change user identifier in Admin Panel's form
+    },
+  },
+  mounted () {
+    this.userIdentifier = this.$route.params.userIdentifier;
+  },
+  methods: {
+    matchValueToIdentifier (value) {
+      return value.toLowerCase().includes(this.userIdentifier.toLowerCase());
+    },
+    userEmails (user) {
+      const allEmails = [];
+      if (user.auth.local.email) allEmails.push(user.auth.local.email);
+      if (user.auth.google && user.auth.google.emails) {
+        const emails = user.auth.google.emails;
+        allEmails.push(...this.findSocialEmails(emails));
+      }
+      if (user.auth.apple && user.auth.apple.emails) {
+        const emails = user.auth.apple.emails;
+        allEmails.push(...this.findSocialEmails(emails));
+      }
+      if (user.auth.facebook && user.auth.facebook.emails) {
+        const emails = user.auth.facebook.emails;
+        allEmails.push(...this.findSocialEmails(emails));
+      }
+      return allEmails;
+    },
+    findSocialEmails (emails) {
+      if (typeof emails === 'string') return [emails];
+      if (Array.isArray(emails)) return emails.map(email => email.value);
+      if (typeof emails === 'object') return [emails.value];
+      return [];
+    },
+    async loadUser (userIdentifier) {
+      const id = userIdentifier || this.user._id;
+
+      this.$router.push({
+        name: 'adminPanelUser',
+        params: { userIdentifier: id },
+      }).catch(failure => {
+        if (isNavigationFailure(failure, NavigationFailureType.duplicated)) {
+          // the admin has requested that the same user be displayed again so reload the page
+          // (e.g., if they changed their mind about changes they were making)
+          this.$router.go();
+        }
+      });
+    },
+    isExactMatch (user) {
+      return user._id === this.userIdentifier
+        || user.auth.local.username === this.userIdentifier
+        || (user.auth.google && user.auth.google.emails && user.auth.google.emails.findIndex(
+          email => email.value === this.userIdentifier,
+        ) !== -1)
+        || (user.auth.apple && user.auth.apple.emails && user.auth.apple.emails.findIndex(
+          email => email.value === this.userIdentifier,
+        ) !== -1)
+        || (user.auth.facebook && user.auth.facebook.emails && user.auth.facebook.emails.findIndex(
+          email => email.value === this.userIdentifier,
+        ) !== -1);
+    },
+  },
+};
+</script>

website/client/src/components/admin-panel/user-support/achievements.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Achievements
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Achievements
-    </h3>
-    <div v-if="expand">
       <ul>
         <li
           v-for="item in achievements"
@@ -251,11 +256,14 @@ export default {
   },
   methods: {
     async saveItem (item) {
-      // prepare the item's new value and path for being saved
-      this.hero.achievementPath = item.path;
-      this.hero.achievementVal = item.value;
-
-      await this.saveHero({ hero: this.hero, msg: item.path });
+      await this.saveHero({
+        hero: {
+          _id: this.hero._id,
+          achievementPath: item.path,
+          achievementVal: item.value,
+        },
+        msg: item.path,
+      });
       item.modified = false;
     },
     enableValueChange (item) {

website/client/src/components/admin-panel/user-support/avatarAndDrops.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Current Avatar Appearance, Drop Count Today
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Current Avatar Appearance, Drop Count Today
-    </h3>
-    <div v-if="expand">
       <div>Drops Today: {{ items.lastDrop.count }}</div>
       <div>Most Recent Drop: {{ items.lastDrop.date | formatDate }}</div>
       <div>Use Costume: {{ preferences.costume ? 'on' : 'off' }}</div>

website/client/src/components/admin-panel/user-support/contributorDetails.vue

@@ -1,160 +1,134 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Contributor Details
-    </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({hero, msg: 'Contributor details', clearData: true})">
-        <div>
-          <label>Permissions</label>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.fullAccess"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Full Admin Access (Allows access to everything. EVERYTHING)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.userSupport"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              User Support (Access this form, access purchase history)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.news"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              News poster (Bailey CMS)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.moderator"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Community Moderator (ban and mute users, access chat flags, manage social spaces)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.challengeAdmin"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Challenge Admin (can create official habitica challenges and admin all challenges)
-            </label>
-          </div>
-          <div class="checkbox">
-            <label>
-              <input
-                v-model="hero.permissions.coupons"
-                :disabled="!hasPermission(user, 'fullAccess')"
-                type="checkbox"
-              >
-              Coupon Creator (can manage coupon codes)
-            </label>
-          </div>
-        </div>
-        <div class="form-group">
-          <label>Title</label>
-          <input
-            v-model="hero.contributor.text"
-            class="form-control textField"
-            type="text"
-          >
-          <small>
-            Common titles:
-            <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher,
-              Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>.
-            <br>
-            Rare titles:
-            Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
-            Statistician, Tinker, Transcriber, Troubadour.
-          </small>
-        </div>
-        <div class="form-group form-inline">
-          <label>Tier</label>
-          <input
-            v-model="hero.contributor.level"
-            class="form-control levelField"
-            type="number"
-          >
-          <small>
-            1-7 for normal contributors, 8 for moderators, 9 for staff.
-            This determines which items, pets, mounts are available, and name-tag coloring.
-            Tiers 8 and 9 are automatically given admin status.
-          </small>
-        </div>
-        <div
-          v-if="hero.secret.text"
-          class="form-group"
+  <form @submit.prevent="saveHero({ hero: {
+    _id: hero._id,
+    contributor: hero.contributor,
+    secret: hero.secret,
+    permissions: hero.permissions,
+  }, msg: 'Contributor details', clearData: true })">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{ 'open': expand }"
+          @click="expand = !expand"
         >
-          <label>Moderation Notes</label>
+          Contributor Details
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
+        <div class="mb-4">
+          <h3 class="mt-0">
+            Permissions
+          </h3>
           <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
+            v-for="permission in permissionList"
+            :key="permission.key"
+            class="col-sm-9 offset-sm-3"
+          >
+            <div class="custom-control custom-checkbox">
+              <input
+                v-model="hero.permissions[permission.key]"
+                :disabled="!hasPermission(user, permission.key)"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label class="custom-control-label">
+                {{ permission.name }}<br>
+                <small class="text-secondary">{{ permission.description }}</small>
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Contributions</label>
-          <textarea
-            v-model="hero.contributor.contributions"
-            class="form-control"
-            cols="5"
-            rows="5"
-          ></textarea>
-          <div
-            v-markdown="hero.contributor.contributions"
-            class="markdownPreview"
-          ></div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Title</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.contributor.text"
+              class="form-control textField"
+              type="text"
+            >
+            <small>
+              Common titles:
+              <strong>Ambassador, Artisan, Bard, Blacksmith, Challenger, Comrade, Fletcher,
+                Linguist, Linguistic Scribe, Scribe, Socialite, Storyteller</strong>.
+              <br>
+              Rare titles:
+              Advisor, Chamberlain, Designer, Mathematician, Shirtster, Spokesperson,
+              Statistician, Tinker, Transcriber, Troubadour.
+            </small>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Edit Moderation Notes</label>
-          <textarea
-            v-model="hero.secret.text"
-            class="form-control"
-            cols="5"
-            rows="3"
-          ></textarea>
-          <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Tier</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.contributor.level"
+              class="form-control levelField"
+              type="number"
+            >
+            <small>
+              1-7 for normal contributors, 8 for moderators, 9 for staff.
+              This determines which items, pets, mounts are available, and name-tag coloring.
+            </small>
+          </div>
         </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Contributions</label>
+          <div class="col-sm-9">
+            <textarea
+              v-model="hero.contributor.contributions"
+              class="form-control"
+              cols="5"
+              rows="5"
+            >
+              </textarea>
+            <div
+              v-markdown="hero.contributor.contributions"
+              class="markdownPreview"
+            ></div>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Moderation Notes</label>
+          <div class="col-sm-9">
+            <textarea
+              v-model="hero.secret.text"
+              class="form-control"
+              cols="5"
+              rows="3"
+            ></textarea>
+            <div
+              v-markdown="hero.secret.text"
+              class="markdownPreview"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
-          value="Save and Clear Data"
-          class="btn btn-primary"
+          value="Save"
+          class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <style lang="scss" scoped>
-  .levelField {
-    min-width: 10ch;
-  }
-  .textField {
-    min-width: 50ch;
-  }
+.levelField {
+  min-width: 10ch;
+}
+
+.textField {
+  min-width: 50ch;
+}
 </style>
 
 <script>
@@ -164,6 +138,39 @@ import saveHero from '../mixins/saveHero';
 import { mapState } from '@/libs/store';
 import { userStateMixin } from '../../../mixins/userState';
 
+const permissionList = [
+  {
+    key: 'fullAccess',
+    name: 'Full Admin Access',
+    description: 'Allows access to everything. EVERYTHING',
+  },
+  {
+    key: 'userSupport',
+    name: 'User Support',
+    description: 'Access this form, access purchase history',
+  },
+  {
+    key: 'news',
+    name: 'News Poster',
+    description: 'Bailey CMS',
+  },
+  {
+    key: 'moderator',
+    name: 'Community Moderator',
+    description: 'Ban and mute users, access chat flags, manage social spaces',
+  },
+  {
+    key: 'challengeAdmin',
+    name: 'Challenge Admin',
+    description: 'Can create official habitica challenges and admin all challenges',
+  },
+  {
+    key: 'coupons',
+    name: 'Coupon Creator',
+    description: 'Can manage coupon codes',
+  },
+];
+
 function resetData (self) {
   self.expand = self.hero.contributor.level;
 }
@@ -192,6 +199,7 @@ export default {
   data () {
     return {
       expand: false,
+      permissionList,
     };
   },
   watch: {

website/client/src/components/admin-panel/user-support/cronAndAuth.vue

@@ -1,145 +1,197 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Timestamps, Time Zone, Authentication, Email Address
-      <span
-        v-if="errorsOrWarningsExist"
-      >- ERRORS / WARNINGS EXIST</span>
-    </h3>
-    <div v-if="expand">
-      <p
-        v-if="errorsOrWarningsExist"
-        class="errorMessage"
+  <form
+    @submit.prevent="saveHero({ hero: {
+      _id: hero._id,
+      auth: hero.auth,
+      preferences: hero.preferences,
+    }, msg: 'Authentication' })"
+  >
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          Timestamps, Time Zone, Authentication, Email Address
+          <span
+            v-if="errorsOrWarningsExist"
+          >- ERRORS / WARNINGS EXIST</span>
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
       >
-        See error(s) below.
-      </p>
-
-      <div>
-        Account created:
-        <strong>{{ hero.auth.timestamps.created | formatDate }}</strong>
-      </div>
-      <div v-if="hero.flags.thirdPartyTools">
-        User has employed <strong>third party tools</strong>. Last known usage:
-        <strong>{{ hero.flags.thirdPartyTools | formatDate }}</strong>
-      </div>
-      <div v-if="cronError">
-        "lastCron" value:
-        <strong>{{ hero.lastCron | formatDate }}</strong>
-        <br>
-        <span class="errorMessage">
-          ERROR: cron probably crashed before finishing
-          ("auth.timestamps.loggedin" and "lastCron" dates are different).
-        </span>
-      </div>
-      <div class="form-inline">
-        <div>
-          Most recent cron:
-          <strong>{{ hero.auth.timestamps.loggedin | formatDate }}</strong>
-          ("auth.timestamps.loggedin")
-        </div>
-        <button
-          class="btn btn-primary ml-2"
-          @click="resetCron()"
+        <p
+          v-if="errorsOrWarningsExist"
+          class="errorMessage"
         >
-          Reset Cron to Yesterday
-        </button>
-      </div>
-      <div class="subsection-start">
-        Time zone:
-        <strong>{{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
-      </div>
-      <div>
-        Custom Day Start time (CDS):
-        <strong>{{ hero.preferences.dayStart }}</strong>
-      </div>
-      <div v-if="timezoneDiffError || timezoneMissingError">
-        Time zone at previous cron:
-        <strong>{{ hero.preferences.timezoneOffsetAtLastCron | formatTimeZone }}</strong>
+          See error(s) below.
+        </p>
 
-        <div class="errorMessage">
-          <div v-if="timezoneDiffError">
-            ERROR: the player's current time zone is different than their time zone when
-            their previous cron ran. This can be because:
-            <ul>
-              <li>daylight savings started or stopped <sup>*</sup></li>
-              <li>the player changed zones due to travel <sup>*</sup></li>
-              <li>the player has devices set to different zones <sup>**</sup></li>
-              <li>the player uses a VPN with varying zones <sup>**</sup></li>
-              <li>something similarly unpleasant is happening. <sup>**</sup></li>
-            </ul>
-            <p>
-              <em>* The problem should fix itself in about a day.</em><br>
-              <em>** One of these causes is probably happening if the time zones stay
-                different for more than a day.</em>
-            </p>
-          </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Account created:</label>
+          <strong class="col-sm-9 col-form-label">
+            {{ hero.auth.timestamps.created | formatDate }}</strong>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Used third party tools:</label>
 
-          <div v-if="timezoneMissingError">
-            ERROR: One of the player's time zones is missing.
-            This is expected and okay if it's the "Time zone at previous cron"
-            AND if it's their first day in Habitica.
-            Otherwise an error has occurred.
+          <div class="col-sm-9 col-form-label">
+            <strong v-if="hero.flags.thirdPartyTools">
+              Yes - {{ hero.flags.thirdPartyTools | formatDate }}</strong>
+            <strong v-else>No</strong>
           </div>
         </div>
-      </div>
-
-      <div class="subsection-start form-inline">
-        API Token: &nbsp;
-        <form @submit.prevent="changeApiToken()">
-          <input
-            type="submit"
-            value="Change API Token"
-            class="btn btn-primary"
-          >
-        </form>
         <div
-          v-if="tokenModified"
-          class="form-inline"
+          v-if="cronError"
+          class="form-group row"
         >
-          <strong>API Token has been changed. Tell the player something like this:</strong>
+          <label class="col-sm-3 col-form-label">lastCron value:</label>
+          <strong>{{ hero.lastCron | formatDate }}</strong>
           <br>
-          I've given you a new API Token.
-          You'll need to log out of the website and mobile app then log back in
-          otherwise they won't work correctly.
-          If you have trouble logging out, for the website go to
-          https://habitica.com/static/clear-browser-data and click the red button there,
-          and for the Android app, clear its data.
-          For the iOS app, if you can't log out you might need to uninstall it,
-          reboot your phone, then reinstall it.
+          <span class="errorMessage">
+            ERROR: cron probably crashed before finishing
+            ("auth.timestamps.loggedin" and "lastCron" dates are different).
+          </span>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Most recent cron:</label>
+
+          <div class="col-sm-9 col-form-label">
+            <strong>
+              {{ hero.auth.timestamps.loggedin | formatDate }}</strong>
+            <a
+              class="btn btn-warning btn-sm ml-4"
+              @click="resetCron()"
+            >
+              Reset Cron to Yesterday
+            </a>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Time zone:</label>
+          <strong class="col-sm-9 col-form-label">
+            {{ hero.preferences.timezoneOffset | formatTimeZone }}</strong>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Custom Day Start time (CDS)</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.preferences.dayStart"
+              class="form-control levelField"
+              type="number"
+            >
+          </div>
+        </div>
+        <div v-if="timezoneDiffError || timezoneMissingError">
+          Time zone at previous cron:
+          <strong>{{ hero.preferences.timezoneOffsetAtLastCron | formatTimeZone }}</strong>
+
+          <div class="errorMessage">
+            <div v-if="timezoneDiffError">
+              ERROR: the player's current time zone is different than their time zone when
+              their previous cron ran. This can be because:
+              <ul>
+                <li>daylight savings started or stopped <sup>*</sup></li>
+                <li>the player changed zones due to travel <sup>*</sup></li>
+                <li>the player has devices set to different zones <sup>**</sup></li>
+                <li>the player uses a VPN with varying zones <sup>**</sup></li>
+                <li>something similarly unpleasant is happening. <sup>**</sup></li>
+              </ul>
+              <p>
+                <em>* The problem should fix itself in about a day.</em><br>
+                <em>** One of these causes is probably happening if the time zones stay
+                  different for more than a day.</em>
+              </p>
+            </div>
+
+            <div v-if="timezoneMissingError">
+              ERROR: One of the player's time zones is missing.
+              This is expected and okay if it's the "Time zone at previous cron"
+              AND if it's their first day in Habitica.
+              Otherwise an error has occurred.
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">API Token</label>
+          <div class="col-sm-9">
+            <a
+              href="#"
+              value="Change API Token"
+              class="btn btn-danger"
+              @click="changeApiToken()"
+            >
+              Change API Token
+          </a>
+            <div
+              v-if="tokenModified"
+            >
+              <strong>API Token has been changed. Tell the player something like this:</strong>
+              <br>
+              I've given you a new API Token.
+              You'll need to log out of the website and mobile app then log back in
+              otherwise they won't work correctly.
+              If you have trouble logging out, for the website go to
+              https://habitica.com/static/clear-browser-data and click the red button there,
+              and for the Android app, clear its data.
+              For the iOS app, if you can't log out you might need to uninstall it,
+              reboot your phone, then reinstall it.
+            </div>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Local Authentication E-Mail</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.auth.local.email"
+              class="form-control"
+              type="text"
+            >
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Google authentication</label>
+          <div class="col-sm-9">
+            <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
+            <span v-else><strong>None</strong></span>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Facebook authentication</label>
+          <div class="col-sm-9">
+            <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
+            <span v-else><strong>None</strong></span>
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Apple ID authentication</label>
+          <div class="col-sm-9">
+            <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
+            <span v-else><strong>None</strong></span>
+          </div>
+        </div>
+        <div class="subsection-start">
+          Full "auth" object for checking above is correct:
+          <pre>{{ hero.auth }}</pre>
         </div>
       </div>
-
-      <div class="subsection-start">
-        Local authentication:
-        <span v-if="hero.auth.local.email">Yes, &nbsp;
-          <strong>{{ hero.auth.local.email }}</strong></span>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Google authentication:
-        <pre v-if="authMethodExists('google')">{{ hero.auth.google }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Facebook authentication:
-        <pre v-if="authMethodExists('facebook')">{{ hero.auth.facebook }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div>
-        Apple ID authentication:
-        <pre v-if="authMethodExists('apple')">{{ hero.auth.apple }}</pre>
-        <span v-else><strong>None</strong></span>
-      </div>
-      <div class="subsection-start">
-        Full "auth" object for checking above is correct:
-        <pre>{{ hero.auth }}</pre>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
+        <input
+          type="submit"
+          value="Save"
+          class="btn btn-primary mt-1"
+        >
       </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <script>
@@ -226,13 +278,24 @@ export default {
       return false;
     },
     async changeApiToken () {
-      this.hero.changeApiToken = true;
-      await this.saveHero({ hero: this.hero, msg: 'API Token' });
+      await this.saveHero({
+        hero: {
+          _id: this.hero._id,
+          changeApiToken: true,
+        },
+        msg: 'API Token',
+      });
       this.tokenModified = true;
     },
     resetCron () {
-      this.hero.resetCron = true;
-      this.saveHero({ hero: this.hero, msg: 'Last Cron', clearData: true });
+      this.saveHero({
+        hero: {
+          _id: this.hero._id,
+          resetCron: true,
+        },
+        msg: 'Last Cron',
+        clearData: true,
+      });
     },
   },
 };

website/client/src/components/admin-panel/user-support/customizationsOwned.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Customizations
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Customizations
-    </h3>
-    <div v-if="expand">
       <div
         v-for="itemType in itemTypes"
         :key="itemType"
@@ -227,11 +232,14 @@ export default {
   },
   methods: {
     async saveItem (item) {
-      // prepare the item's new value and path for being saved
-      this.hero.purchasedPath = item.path;
-      this.hero.purchasedVal = item.value;
-
-      await this.saveHero({ hero: this.hero, msg: item.path });
+      await this.saveHero({
+        hero: {
+          _id: this.hero._id,
+          purchasedPath: item.path,
+          purchasedVal: item.value,
+        },
+        msg: item.path,
+      });
       item.modified = false;
     },
     enableValueChange (item) {

website/client/src/components/admin-panel/user-support/index.vue

@@ -47,6 +47,11 @@
           :preferences="hero.preferences"
         />
 
+        <stats
+          :hero="hero"
+          :reset-counter="resetCounter"
+        />
+
         <items-owned
           :hero="hero"
           :reset-counter="resetCounter"
@@ -67,6 +72,11 @@
           :reset-counter="resetCounter"
         />
 
+        <user-history
+          :hero="hero"
+          :reset-counter="resetCounter"
+        />
+
         <contributor-details
           :hero="hero"
           :reset-counter="resetCounter"
@@ -121,6 +131,8 @@ import Transactions from './transactions';
 import SubscriptionAndPerks from './subscriptionAndPerks';
 import CustomizationsOwned from './customizationsOwned.vue';
 import Achievements from './achievements.vue';
+import UserHistory from './userHistory.vue';
+import Stats from './stats.vue';
 
 import { userStateMixin } from '../../../mixins/userState';
 
@@ -135,6 +147,8 @@ export default {
     PrivilegesAndGems,
     ContributorDetails,
     Transactions,
+    UserHistory,
+    Stats,
     SubscriptionAndPerks,
     UserProfile,
     Achievements,

website/client/src/components/admin-panel/user-support/itemsOwned.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Items
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Items
-    </h3>
-    <div v-if="expand">
       <div>
         The sections below display each item's key (bolded if the player has ever owned it),
         followed by the item's English name.
@@ -264,16 +269,19 @@ export default {
   methods: {
     async saveItem (item) {
       // prepare the item's new value and path for being saved
-      this.hero.itemPath = item.path;
+      const toSave = {
+        _id: this.hero._id,
+      };
+      toSave.itemPath = item.path;
       if (item.value === null) {
-        this.hero.itemVal = 'null';
+        toSave.itemVal = 'null';
       } else if (item.value === false) {
-        this.hero.itemVal = 'false';
+        toSave.itemVal = 'false';
       } else {
-        this.hero.itemVal = item.value;
+        toSave.itemVal = item.value;
       }
 
-      await this.saveHero({ hero: this.hero, msg: item.key });
+      await this.saveHero({ hero: toSave, msg: item.key });
       item.neverOwned = false;
       item.modified = false;
     },

website/client/src/components/admin-panel/user-support/partyAndQuest.vue

@@ -1,16 +1,21 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="expand = !expand"
+      >
+        Party, Quest
+        <span
+          v-if="errorsOrWarningsExist"
+        >- ERRORS / WARNINGS EXIST</span>
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Party, Quest
-      <span
-        v-if="errorsOrWarningsExist"
-      >- ERRORS / WARNINGS EXIST</span>
-    </h3>
-    <div v-if="expand">
       <div
         v-if="errorsOrWarningsExist"
         class="errorMessage"

website/client/src/components/admin-panel/user-support/privilegesAndGems.vue

@@ -1,87 +1,138 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Privileges, Gem Balance
-    </h3>
-    <div v-if="expand">
-      <p
-        v-if="errorsOrWarningsExist"
-        class="errorMessage"
+  <form @submit.prevent="saveHero({hero: {
+    _id: hero._id,
+    flags: hero.flags,
+    balance: hero.balance,
+    auth: hero.auth,
+    secret: hero.secret,
+  }, msg: 'Privileges or Gems or Moderation Notes'})">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          Priviliges, Gem Balance
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
       >
-        Player has had privileges removed or has moderation notes.
-      </p>
-
-      <form @submit.prevent="saveHero({hero, msg: 'Privileges or Gems or Moderation Notes'})">
-        <div class="checkbox">
-          <label>
-            <input
-              v-if="hero.flags"
-              v-model="hero.flags.chatShadowMuted"
-              type="checkbox"
-            > Shadow Mute
-          </label>
+        <p
+          v-if="errorsOrWarningsExist"
+          class="errorMessage"
+        >
+          Player has had privileges removed or has moderation notes.
+        </p>
+        <div
+          v-if="hero.flags"
+          class="form-group row"
+        >
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="chatShadowMuted"
+                v-model="hero.flags.chatShadowMuted"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label
+                class="custom-control-label"
+                for="chatShadowMuted"
+              >
+                Shadow Mute
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-if="hero.flags"
-              v-model="hero.flags.chatRevoked"
-              type="checkbox"
-            > Mute (Revoke Chat Privileges)
-          </label>
+        <div
+          v-if="hero.flags"
+          class="form-group row"
+        >
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="chatRevoked"
+                v-model="hero.flags.chatRevoked"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label
+                class="custom-control-label"
+                for="chatRevoked"
+              >
+                Mute (Revoke Chat Privileges)
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="hero.auth.blocked"
-              type="checkbox"
-            > Ban / Block
-          </label>
+        <div class="form-group row">
+          <div class="col-sm-9 offset-sm-3">
+            <div class="custom-control custom-checkbox">
+              <input
+                id="blocked"
+                v-model="hero.auth.blocked"
+                class="custom-control-input"
+                type="checkbox"
+              >
+              <label
+                class="custom-control-label"
+                for="blocked"
+              >
+                Ban / Block
+              </label>
+            </div>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Balance
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.balance"
               class="form-control balanceField"
               type="number"
               step="0.25"
             >
-          </label>
-          <span>
             <small>
               Balance is in USD, not in Gems.
               E.g., if this number is 1, it means 4 Gems.
               Arrows change Balance by 0.25 (i.e., 1 Gem per click).
               Do not use when awarding tiers; tier gems are automatic.
             </small>
-          </span>
+          </div>
         </div>
-        <div class="form-group">
-          <label>Moderation Notes</label>
-          <textarea
-            v-model="hero.secret.text"
-            class="form-control"
-            cols="5"
-            rows="5"
-          ></textarea>
-          <div
-            v-markdown="hero.secret.text"
-            class="markdownPreview"
-          ></div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Moderation Notes</label>
+          <div class="col-sm-9">
+            <textarea
+              v-model="hero.secret.text"
+              class="form-control"
+              cols="5"
+              rows="5"
+            ></textarea>
+            <div
+              v-markdown="hero.secret.text"
+              class="markdownPreview"
+            ></div>
+          </div>
         </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary"
+          class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <style lang="scss" scoped>

website/client/src/components/admin-panel/user-support/stats-row.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="form-group row">
+    <label
+      class="col-sm-3 col-form-label"
+      :class="color"
+    >{{ label }}</label>
+    <div class="col-sm-9">
+      <input
+        :value="value"
+        class="form-control"
+        type="number"
+        :step="step"
+        :max="max"
+        :min="min"
+        @input="$emit('input', parseInt($event.target.value, 10))"
+      >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .about-row {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  .red-label {
+    color: $red_100;
+  }
+  .blue-label {
+    color: $blue_100;
+  }
+  .purple-label {
+    color: $purple_300;
+  }
+  .yellow-label {
+    color: $yellow_50;
+  }
+</style>
+
+<script>
+export default {
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: 'text-label',
+    },
+    value: {
+      type: Number,
+      required: true,
+    },
+    step: {
+      type: String,
+      default: 'any',
+    },
+    min: {
+    },
+    max: {
+    },
+  },
+};
+</script>

website/client/src/components/admin-panel/user-support/stats.vue

@@ -0,0 +1,235 @@
+<template>
+  <form @submit.prevent="submitClicked()">
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          Stats
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
+        <stats-row
+          label="Health"
+          color="red-label"
+          :max="maxHealth"
+          v-model="hero.stats.hp" />
+        <stats-row
+          label="Experience"
+          color="yellow-label"
+          min="0"
+          :max="maxFieldHardCap"
+          v-model="hero.stats.exp" />
+        <stats-row
+          label="Mana"
+          color="blue-label"
+          min="0"
+          :max="maxFieldHardCap"
+          v-model="hero.stats.mp" />
+        <stats-row
+          label="Level"
+          step="1"
+          min="0"
+          :max="maxLevelHardCap"
+          v-model="hero.stats.lvl" />
+        <stats-row
+          label="Gold"
+          min="0"
+          :max="maxFieldHardCap"
+          v-model="hero.stats.gp" />
+        <h3>Stat Points</h3>
+        <stats-row
+          label="Unallocated"
+          min="0"
+          step="1"
+          :max="maxStatPoints"
+          v-model="hero.stats.points" />
+        <stats-row
+          label="Strength"
+          color="red-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.str" />
+        <stats-row
+          label="Intelligence"
+          color="blue-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.int" />
+        <stats-row
+          label="Perception"
+          color="purple-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.per" />
+        <stats-row
+          label="Constitution"
+          color="yellow-label"
+          min="0"
+          :max="maxStatPoints"
+          step="1"
+          v-model="hero.stats.con" />
+        <div class="form-group row" v-if="statPointsIncorrect">
+          <div class="offset-sm-3 col-sm-9 red-label">
+            Error: Sum of stat points should equal the users level
+          </div>
+        </div>
+        <h3>Buffs</h3>
+        <stats-row
+          label="Strength"
+          color="red-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.str" />
+        <stats-row
+          label="Intelligence"
+          color="blue-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.int" />
+        <stats-row
+          label="Perception"
+          color="purple-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.per" />
+        <stats-row
+          label="Constitution"
+          color="yellow-label"
+          min="0"
+          step="1"
+          v-model="hero.stats.buffs.con" />
+        <div class="form-group row">
+          <div class="offset-sm-3 col-sm-9">
+            <button
+              type="button"
+              class="btn btn-warning btn-sm"
+              @click="resetBuffs">
+              Reset Buffs
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
+        <input
+          type="submit"
+          value="Save"
+          class="btn btn-primary mt-1"
+        >
+      </div>
+    </div>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .about-row {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+</style>
+
+<script>
+import {
+  MAX_HEALTH,
+  MAX_STAT_POINTS,
+  MAX_LEVEL_HARD_CAP,
+  MAX_FIELD_HARD_CAP,
+} from '@/../../common/script/constants';
+import markdownDirective from '@/directives/markdown';
+import saveHero from '../mixins/saveHero';
+
+import { mapState } from '@/libs/store';
+import { userStateMixin } from '../../../mixins/userState';
+
+import StatsRow from './stats-row';
+
+function resetData (self) {
+  self.expand = false;
+}
+
+export default {
+  directives: {
+    markdown: markdownDirective,
+  },
+  components: {
+    StatsRow,
+  },
+  mixins: [
+    userStateMixin,
+    saveHero,
+  ],
+  computed: {
+    ...mapState({ user: 'user.data' }),
+    statPointsIncorrect () {
+      return (parseInt(this.hero.stats.points, 10)
+        + parseInt(this.hero.stats.str, 10)
+        + parseInt(this.hero.stats.int, 10)
+        + parseInt(this.hero.stats.per, 10)
+        + parseInt(this.hero.stats.con, 10)
+      ) !== this.hero.stats.lvl;
+    },
+  },
+  props: {
+    resetCounter: {
+      type: Number,
+      required: true,
+    },
+    hero: {
+      type: Object,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      expand: false,
+      maxHealth: MAX_HEALTH,
+      maxStatPoints: MAX_STAT_POINTS,
+      maxLevelHardCap: MAX_LEVEL_HARD_CAP,
+      maxFieldHardCap: MAX_FIELD_HARD_CAP,
+    };
+  },
+  watch: {
+    resetCounter () {
+      resetData(this);
+    },
+  },
+  mounted () {
+    resetData(this);
+  },
+  methods: {
+    submitClicked () {
+      if (this.statPointsIncorrect) {
+        return;
+      }
+      this.saveHero({
+        hero: {
+          _id: this.hero._id,
+          stats: this.hero.stats,
+        },
+        msg: 'Stats',
+      });
+    },
+    resetBuffs () {
+      this.hero.stats.buffs = {
+        str: 0,
+        int: 0,
+        per: 0,
+        con: 0,
+      };
+    },
+  },
+};
+</script>

website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue

@@ -1,14 +1,24 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Subscription, Monthly Perks
-    </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({ hero, msg: 'Subscription Perks' })">
+  <form
+    @submit.prevent="saveHero({ hero: {
+      _id: hero._id,
+      purchased: hero.purchased
+    }, msg: 'Subscription Perks' })"
+  >
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{ 'open': expand }"
+          @click="expand = !expand"
+        >
+          Subscription, Monthly Perks
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
         <div v-if="hero.purchased.plan.paymentMethod">
           Payment method:
           <strong>{{ hero.purchased.plan.paymentMethod }}</strong>
@@ -23,46 +33,72 @@
         </div>
         <div
           v-if="hero.purchased.plan.dateCreated"
-          class="form-inline"
+          class="form-group row"
         >
-          <label>
+          <label class="col-sm-3 col-form-label">
             Creation date:
-            <input
-              v-model="hero.purchased.plan.dateCreated"
-              class="form-control"
-              type="text"
-            > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
           </label>
+          <div class="col-sm-9">
+            <div class="input-group">
+              <input
+                v-model="hero.purchased.plan.dateCreated"
+                class="form-control"
+                type="text"
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.dateCreated) }}
+                </strong>
+              </div>
+            </div>
+          </div>
         </div>
         <div
           v-if="hero.purchased.plan.dateCurrentTypeCreated"
-          class="form-inline"
+          class="form-group row"
         >
-          <label>
-            Start date for current subscription type:
-            <input
-              v-model="hero.purchased.plan.dateCurrentTypeCreated"
-              class="form-control"
-              type="text"
-            >
+          <label class="col-sm-3 col-form-label">
+            Current sub start date:
           </label>
-          <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
+          <div class="col-sm-9">
+            <div class="input-group">
+              <input
+                v-model="hero.purchased.plan.dateCurrentTypeCreated"
+                class="form-control"
+                type="text"
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}
+                </strong>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Termination date:
-            <div>
+          </label>
+          <div class="col-sm-9">
+            <div class="input-group">
               <input
                 v-model="hero.purchased.plan.dateTerminated"
                 class="form-control"
                 type="text"
-              > <strong class="ml-2">{{ dateFormat(hero.purchased.plan.dateTerminated) }}</strong>
+              >
+              <div class="input-group-append">
+                <strong class="input-group-text">
+                  {{ dateFormat(hero.purchased.plan.dateTerminated) }}
+                </strong>
+              </div>
             </div>
-          </label>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Consecutive months:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.count"
               class="form-control"
@@ -70,11 +106,13 @@
               min="0"
               step="1"
             >
-          </label>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Perk offset months:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.offset"
               class="form-control"
@@ -82,26 +120,34 @@
               min="0"
               step="1"
             >
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Perk month count:
           </label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.purchased.plan.perkMonthCount"
+              class="form-control"
+              type="number"
+              min="0"
+              max="2"
+              step="1"
+            >
+          </div>
         </div>
-        <div class="form-inline">
-          Perk month count:
-          <input
-            v-model="hero.purchased.plan.perkMonthCount"
-            class="form-control"
-            type="number"
-            min="0"
-            max="2"
-            step="1"
-          >
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Next Mystic Hourglass:
+          </label>
+          <strong class="col-sm-9 col-form-label">{{ nextHourglassDate }}</strong>
         </div>
-        <div>
-          Next Mystic Hourglass:
-          <strong>{{ nextHourglassDate }}</strong>
-        </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Mystic Hourglasses:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.trinkets"
               class="form-control"
@@ -109,11 +155,13 @@
               min="0"
               step="1"
             >
-          </label>
+          </div>
         </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Gem cap increase:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.consecutive.gemCapExtra"
               class="form-control"
@@ -122,15 +170,21 @@
               max="25"
               step="5"
             >
+          </div>
+        </div>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Total Gem cap:
           </label>
+          <strong class="col-sm-9 col-form-label">
+            {{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}
+          </strong>
         </div>
-        <div>
-          Total Gem cap:
-          <strong>{{ Number(hero.purchased.plan.consecutive.gemCapExtra) + 25 }}</strong>
-        </div>
-        <div class="form-inline">
-          <label>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
             Gems bought this month:
+          </label>
+          <div class="col-sm-9">
             <input
               v-model="hero.purchased.plan.gemsBought"
               class="form-control"
@@ -139,43 +193,64 @@
               :max="hero.purchased.plan.consecutive.gemCapExtra + 25"
               step="1"
             >
-          </label>
+          </div>
         </div>
-        <div
-          v-if="hero.purchased.plan.extraMonths > 0"
-        >
+        <div v-if="hero.purchased.plan.extraMonths > 0">
           Additional credit (applied upon cancellation):
           <strong>{{ hero.purchased.plan.extraMonths }}</strong>
         </div>
-        <div>
-          Mystery Items:
-          <span
-            v-if="hero.purchased.plan.mysteryItems.length > 0"
-          >
-            <span
-              v-for="(item, index) in hero.purchased.plan.mysteryItems"
-              :key="index"
-            >
-              <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
-                {{ item }},
-              </strong>
-              <strong v-else> {{ item }} </strong>
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">
+            Mystery Items:
+          </label>
+          <div class="col-sm-9 col-form-label">
+            <span v-if="hero.purchased.plan.mysteryItems.length > 0">
+              <span
+                v-for="(item, index) in hero.purchased.plan.mysteryItems"
+                :key="index"
+              >
+                <strong v-if="index < hero.purchased.plan.mysteryItems.length - 1">
+                  {{ item }},
+                </strong>
+                <strong v-else> {{ item }} </strong>
+              </span>
             </span>
-          </span>
-          <span v-else>
-            <strong>None</strong>
-          </span>
+            <span v-else>
+              <strong>None</strong>
+            </span>
+          </div>
         </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
           class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+.input-group-append {
+  width: auto;
+
+  .input-group-text {
+    border-bottom-right-radius: 2px;
+    border-top-right-radius: 2px;
+    font-weight: 600;
+    font-size: 0.8rem;
+    color: $gray-200;
+  }
+}
+</style>
+
 <script>
 import moment from 'moment';
 import { getPlanContext } from '@/../../common/script/cron';

website/client/src/components/admin-panel/user-support/transactions.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="toggleTransactionsOpen"
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="toggleTransactionsOpen"
+      >
+        Transactions
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
     >
-      Transactions
-    </h3>
-    <div v-if="expand">
       <purchase-history-table
         :gem-transactions="gemTransactions"
         :hourglass-transactions="hourglassTransactions"

website/client/src/components/admin-panel/user-support/userHistory.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="card mt-2">
+    <div class="card-header">
+      <h3
+        class="mb-0 mt-0"
+        :class="{'open': expand}"
+        @click="toggleHistoryOpen"
+      >
+        User History
+      </h3>
+    </div>
+    <div
+      v-if="expand"
+      class="card-body"
+    >
+      <div>
+        <div class="clearfix">
+          <div class="mb-4 float-left">
+            <button
+              class="page-header btn-flat tab-button textCondensed"
+              :class="{'active': selectedTab === 'armoire'}"
+              @click="selectTab('armoire')"
+            >
+              Armoire
+            </button>
+            <button
+              class="page-header btn-flat tab-button textCondensed"
+              :class="{'active': selectedTab === 'questInvites'}"
+              @click="selectTab('questInvites')"
+            >
+              Quest Invitations
+            </button>
+            <button
+              class="page-header btn-flat tab-button textCondensed"
+              :class="{'active': selectedTab === 'cron'}"
+              @click="selectTab('cron')"
+            >
+              Cron
+            </button>
+          </div>
+        </div>
+
+        <div class="row">
+          <div
+            v-if="selectedTab === 'armoire'"
+            class="col-12"
+          >
+            <table class="table">
+              <tr>
+                <th
+                  v-once
+                >
+                  {{ $t('timestamp') }}
+                </th>
+                <th v-once>
+                  Client
+                </th>
+                <th
+                  v-once
+                >
+                  Received
+                </th>
+              </tr>
+              <tr
+                v-for="entry in armoire"
+                :key="entry.timestamp"
+              >
+                <td>
+                  <span
+                    v-b-tooltip.hover="entry.timestamp"
+                  >{{ entry.timestamp | timeAgo }}</span>
+                </td>
+                <td>{{ entry.client }}</td>
+                <td>{{ entry.reward }}</td>
+              </tr>
+            </table>
+          </div>
+          <div
+            v-if="selectedTab === 'questInvites'"
+            class="col-12"
+          >
+            <table class="table">
+              <tr>
+                <th
+                  v-once
+                >
+                  {{ $t('timestamp') }}
+                </th>
+                <th v-once>
+                  Client
+                </th>
+                <th v-once>
+                  Quest Key
+                </th>
+                <th v-once>
+                  Response
+                </th>
+              </tr>
+              <tr
+                v-for="entry in questInviteResponses"
+                :key="entry.timestamp"
+              >
+                <td>
+                  <span
+                    v-b-tooltip.hover="entry.timestamp"
+                  >{{ entry.timestamp | timeAgo }}</span>
+                </td>
+                <td>{{ entry.client }}</td>
+                <td>{{ entry.quest }}</td>
+                <td>{{ entry.response }}</td>
+              </tr>
+            </table>
+          </div>
+          <div
+            v-if="selectedTab === 'cron'"
+            class="col-12"
+          >
+            <table class="table">
+              <tr>
+                <th
+                  v-once
+                >
+                  {{ $t('timestamp') }}
+                </th>
+                <th v-once>
+                  Client
+                </th>
+                <th v-once>
+                  Checkin Count
+                </th>
+              </tr>
+              <tr
+                v-for="entry in cron"
+                :key="entry.timestamp"
+              >
+                <td>
+                  <span
+                    v-b-tooltip.hover="entry.timestamp"
+                  >{{ entry.timestamp | timeAgo }}</span>
+                </td>
+                <td>{{ entry.client }}</td>
+                <td>{{ entry.checkinCount }}</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .page-header.btn-flat {
+    background: transparent;
+  }
+
+  .tab-button {
+    height: 2rem;
+    font-size: 24px;
+    font-weight: bold;
+    font-stretch: condensed;
+    line-height: 1.33;
+    letter-spacing: normal;
+    color: $gray-10;
+
+    margin-right: 1.125rem;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 2.5rem;
+
+    &.active, &:hover {
+      color: $purple-300;
+      box-shadow: 0px -0.25rem 0px $purple-300 inset;
+      outline: none;
+    }
+  }
+</style>
+
+<script>
+import moment from 'moment';
+import { userStateMixin } from '../../../mixins/userState';
+
+export default {
+  filters: {
+    timeAgo (value) {
+      return moment(value).fromNow();
+    },
+  },
+  mixins: [userStateMixin],
+  props: {
+    hero: {
+      type: Object,
+      required: true,
+    },
+    resetCounter: {
+      type: Number,
+      required: true,
+    },
+  },
+  data () {
+    return {
+      expand: false,
+      selectedTab: 'armoire',
+      armoire: [],
+      questInviteResponses: [],
+      cron: [],
+    };
+  },
+  watch: {
+    resetCounter () {
+      if (this.expand) {
+        this.retrieveUserHistory();
+      }
+    },
+  },
+  methods: {
+    selectTab (type) {
+      this.selectedTab = type;
+    },
+    async toggleHistoryOpen () {
+      this.expand = !this.expand;
+      if (this.expand) {
+        this.retrieveUserHistory();
+      }
+    },
+    async retrieveUserHistory () {
+      const history = await this.$store.dispatch('adminPanel:getUserHistory', { userIdentifier: this.hero._id });
+      this.armoire = history.armoire;
+      this.questInviteResponses = history.questInviteResponses;
+      this.cron = history.cron;
+    },
+  },
+};
+</script>

website/client/src/components/admin-panel/user-support/userProfile.vue

@@ -1,52 +1,71 @@
 <template>
-  <div class="accordion-group">
-    <h3
-      class="expand-toggle"
-      :class="{'open': expand}"
-      @click="expand = !expand"
-    >
-      Users Profile
-    </h3>
-    <div v-if="expand">
-      <form @submit.prevent="saveHero({hero, msg: 'Users Profile'})">
-        <div class="form-group">
-          <label>Display name</label>
-          <input
-            v-model="hero.profile.name"
-            class="form-control textField"
-            type="text"
-          >
+  <form
+    @submit.prevent="saveHero({hero: {
+      _id: hero._id,
+      profile: hero.profile
+    }, msg: 'Users Profile'})"
+  >
+    <div class="card mt-2">
+      <div class="card-header">
+        <h3
+          class="mb-0 mt-0"
+          :class="{'open': expand}"
+          @click="expand = !expand"
+        >
+          User Profile
+        </h3>
+      </div>
+      <div
+        v-if="expand"
+        class="card-body"
+      >
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Display name</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.profile.name"
+              class="form-control"
+              type="text"
+            >
+          </div>
         </div>
-        <div class="form-group">
-          <label>Photo URL</label>
-          <input
-            v-model="hero.profile.imageUrl"
-            class="form-control textField"
-            type="text"
-          >
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">Photo URL</label>
+          <div class="col-sm-9">
+            <input
+              v-model="hero.profile.imageUrl"
+              class="form-control"
+              type="text"
+            >
+          </div>
         </div>
-        <div class="form-group">
-          <label>About</label>
-          <div class="row about-row">
+        <div class="form-group row">
+          <label class="col-sm-3 col-form-label">About</label>
+          <div class="col-sm-9">
             <textarea
               v-model="hero.profile.blurb"
-              class="form-control col"
+              class="form-control"
               rows="10"
             ></textarea>
             <div
               v-markdown="hero.profile.blurb"
-              class="markdownPreview col"
+              class="markdownPreview"
             ></div>
           </div>
         </div>
+      </div>
+      <div
+        v-if="expand"
+        class="card-footer"
+      >
         <input
           type="submit"
           value="Save"
-          class="btn btn-primary"
+          class="btn btn-primary mt-1"
         >
-      </form>
+      </div>
     </div>
-  </div>
+  </form>
 </template>
 
 <style lang="scss" scoped>

website/client/src/components/appFooter.vue

@@ -291,6 +291,7 @@
       </div>
 
       <div
+        class="time-travel"
         v-if="TIME_TRAVEL_ENABLED && user.permissions && user.permissions.fullAccess"
         :key="lastTimeJump"
       >
@@ -309,9 +310,11 @@
         <div class="my-2">
           Time Traveling! It is {{ new Date().toLocaleDateString() }}
           <a
-            class="btn btn-warning mr-1"
+            class="btn btn-warning btn-small"
             @click="resetTime()"
-          >Reset</a>
+          >
+            Reset
+        </a>
         </div>
         <a
           class="btn btn-secondary mr-1"
@@ -399,6 +402,10 @@
               tooltip="+1000 to boss quests. 300 items to collection quests"
               @click="addQuestProgress()"
             >Quest Progress Up</a>
+            <a
+              class="btn btn-secondary"
+              @click="bossRage()"
+            >+ Boss Rage 😡</a>
             <a
               class="btn btn-secondary"
               @click="makeAdmin()"
@@ -506,6 +513,8 @@ li {
   grid-area: debug-pop;
    }
 
+.time-travel { grid-area: time-travel;}
+
 footer {
   background-color: $gray-500;
   color: $gray-50;
@@ -526,7 +535,7 @@ footer {
     "donate-text donate-text donate-text donate-button social"
     "hr hr hr hr hr"
     "copyright copyright melior privacy-terms privacy-terms"
-    "debug-toggle debug-toggle debug-toggle blank blank";
+    "time-travel time-travel debug-toggle debug-toggle debug-toggle";
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: auto;
 
@@ -960,6 +969,10 @@ export default {
       //  @TODO:  Notification.text('Quest progress increased');
       //  @TODO:  User.sync();
     },
+    async bossRage () {
+      await axios.post('/api/v4/debug/boss-rage');
+    },
+
     async makeAdmin () {
       await axios.post('/api/v4/debug/make-admin');
       // @TODO: Notification.text('You are now an admin!

website/client/src/components/auth/authForm.vue

@@ -224,7 +224,7 @@
 <script>
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
 import googleIcon from '@/assets/svg/google.svg';

website/client/src/components/auth/registerLoginReset.vue

@@ -607,7 +607,7 @@
 import axios from 'axios';
 import hello from 'hellojs';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import DOMPurify from 'dompurify';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';

website/client/src/components/avatarModal/customize-options.vue

@@ -6,6 +6,7 @@
     <div
       v-for="option in items"
       :key="option.key"
+      :id="option.imageName"
       class="outer-option-background"
       :class="{
         premium: Boolean(option.gem),
@@ -14,18 +15,28 @@
         hide: option.hide }"
       @click="option.click(option)"
     >
+      <b-popover
+        :target="option.imageName"
+        triggers="hover focus"
+        placement="bottom"
+        :prevent-overflow="false"
+      >
+        <strong> {{ option.text }} </strong>
+      </b-popover>
       <div class="option">
-        <div
-          class="sprite customize-option"
-          :class="option.class"
-        >
+        <Sprite
+          v-if="!option.none"
+          class="sprite"
+          :prefix="option.isGear ? 'shop' : 'icon'"
+          :imageName="option.imageName"
+          :image-name="option.imageName"
+        />
           <div
-            v-if="option.none"
+            v-else
             class="redline-outer"
           >
             <div class="redline"></div>
           </div>
-        </div>
       </div>
     </div>
   </div>
@@ -35,8 +46,12 @@
 import gem from '@/assets/svg/gem.svg';
 import gold from '@/assets/svg/gold.svg';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
+import Sprite from '@/components/ui/sprite.vue';
 
 export default {
+  components: {
+    Sprite,
+  },
   mixins: [
     avatarEditorUtilities,
   ],
@@ -75,7 +90,7 @@ export default {
     cursor: pointer;
 
     &.premium {
-      height: 112px;
+      height: 120px;
       width: 96px;
       margin-left: 8px;
       margin-right: 8px;
@@ -92,21 +107,9 @@ export default {
       box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
       background-color: $white;
 
-      .sprite.customize-option.shirt {
-        margin-left: -3px !important;
-        // otherwise its overriden by the .outer-option-background:not(.none) { rules
-      }
-
-      .sprite.customize-option.skin {
-        margin-left: -8px !important;
-        // otherwise its overriden by the .outer-option-background:not(.none) { rules
-      }
-
       .option {
         border: none;
         border-radius: 2px;
-        padding-left: 6px;
-        padding-top: 4px;
       }
 
       &:hover {
@@ -132,14 +135,14 @@ export default {
       }
 
       .redline-outer {
-        height: 60px;
-        width: 60px;
+        height: 68px;
+        width: 68px;
         position: absolute;
         bottom: 0;
         margin: 0 auto 0 0;
 
         .redline {
-          width: 60px;
+          width: 68px;
           height: 4px;
           display: block;
           background: red;
@@ -148,7 +151,6 @@ export default {
           top: 0;
           margin-top: 30px;
           margin-bottom: 20px;
-          margin-left: -1px;
         }
       }
     }
@@ -164,10 +166,9 @@ export default {
   }
   .option {
     vertical-align: bottom;
-    height: 64px;
-    width: 64px;
+    height: 76px;
+    width: 76px;
 
-    margin: 12px 8px;
     border: 4px solid transparent;
     border-radius: 10px;
     position: relative;
@@ -182,44 +183,6 @@ export default {
     .sprite.customize-option {
       margin-top: 0;
       margin-left: 0;
-
-      &.skin {
-        margin-top: -4px;
-        margin-left: -4px;
-      }
-      &.chair {
-        margin-left: -1px;
-        margin-top: -1px;
-
-        &.button_chair_black {
-          // different sprite margin?
-          margin-top: -3px;
-        }
-
-        &.handleless {
-          margin-left: -5px;
-          margin-top: -5px;
-        }
-      }
-      &.color, &.bangs, &.beard, &.flower, &.mustache {
-        background-position-x: -6px;
-        background-position-y: -12px;
-      }
-
-      &.hair.base {
-        background-position-x: -6px;
-        background-position-y: -4px;
-      }
-
-      &.headAccessory {
-        margin-top: 0;
-        margin-left: -4px;
-      }
-
-      &.headband {
-        margin-top: -6px;
-        margin-left: -27px;
-      }
     }
   }
 </style>

website/client/src/components/avatarModal/extra-settings.vue

@@ -75,6 +75,7 @@
 
 <script>
 import appearance from '@/../../common/script/content/appearance';
+import upperFirst from 'lodash/upperFirst';
 import { subPageMixin } from '../../mixins/subPage';
 import { userStateMixin } from '../../mixins/userState';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
@@ -82,9 +83,6 @@ import customizeBanner from './customize-banner';
 import customizeOptions from './customize-options';
 import subMenu from './sub-menu';
 
-const freeShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price === 0);
-const specialShirtKeys = Object.keys(appearance.shirt).filter(k => appearance.shirt[k].price !== 0);
-
 export default {
   components: {
     customizeBanner,
@@ -106,17 +104,6 @@ export default {
         headAccessory: ['bearEars', 'cactusEars', 'foxEars', 'lionEars', 'pandaEars', 'pigEars', 'tigerEars', 'wolfEars'],
       },
       chairKeys: ['none', 'black', 'blue', 'green', 'pink', 'red', 'yellow', 'handleless_black', 'handleless_blue', 'handleless_green', 'handleless_pink', 'handleless_red', 'handleless_yellow'],
-      specialShirtKeys,
-      items: [
-        {
-          id: 'size',
-          label: this.$t('size'),
-        },
-        {
-          id: 'shirt',
-          label: this.$t('shirt'),
-        },
-      ],
     };
   },
   computed: {
@@ -167,6 +154,7 @@ export default {
       ];
       const noneOption = this.createGearItem(0, 'eyewear', 'base');
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -178,42 +166,36 @@ export default {
         option.active = this.user.preferences.costume
           ? this.user.items.gear.costume.eyewear === newKey
           : this.user.items.gear.equipped.eyewear === newKey;
-        option.class = `eyewear_special_${key}`;
+        option.imageName = `eyewear_special_${key}`;
+        option.isGear = true;
         option.click = () => {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
 
           return this.equip(newKey, type);
         };
+        option.text = this.$t(`eyewearSpecial${upperFirst(key)}Text`);
         options.push(option);
       }
 
       return options;
     },
-    freeShirts () {
-      return freeShirtKeys.map(s => this.mapKeysToFreeOption(s, 'shirt'));
-    },
-    specialShirts () {
-      let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
-      const keys = this.specialShirtKeys;
-      const options = keys.map(key => this.mapKeysToOption(key, 'shirt'));
-      return options;
-    },
     headbands () {
       const keys = ['blackHeadband', 'blueHeadband', 'greenHeadband', 'pinkHeadband', 'redHeadband', 'whiteHeadband', 'yellowHeadband'];
-      const noneOption = this.createGearItem(0, 'headAccessory', 'base', 'headband');
+      const noneOption = this.createGearItem(0, 'headAccessory', 'base');
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
 
       for (const key of keys) {
-        const option = this.createGearItem(key, 'headAccessory', 'special', 'headband');
+        const option = this.createGearItem(key, 'headAccessory', 'special');
         const newKey = `headAccessory_special_${key}`;
         option.click = () => {
           const type = this.user.preferences.costume ? 'costume' : 'equipped';
           return this.equip(newKey, type);
         };
-
+        option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
         options.push(option);
       }
 
@@ -227,8 +209,9 @@ export default {
           option.none = true;
         }
         option.active = this.user.preferences.chair === key;
-        option.class = `button_chair_${key} chair ${key.includes('handleless_') ? 'handleless' : ''}`;
+        option.imageName = `chair_${key}`;
         option.click = () => this.set({ 'preferences.chair': key });
+        option.text = appearance.chair[key].text();
         return option;
       });
       return options;
@@ -242,8 +225,11 @@ export default {
           option.none = true;
         }
         option.active = this.user.preferences.hair.flower === key;
-        option.class = `icon_hair_flower_${key} flower`;
+        if (key !== 0) {
+          option.imageName = `hair_flower_${key}`;
+        }
         option.click = () => this.set({ 'preferences.hair.flower': key });
+        option.text = appearance.hair.flower[key].text();
         return option;
       });
       return options;
@@ -271,6 +257,7 @@ export default {
 
       const noneOption = this.createGearItem(0, category, 'base', category);
       noneOption.none = true;
+      noneOption.text = this.$t('none');
       const options = [
         noneOption,
       ];
@@ -284,10 +271,15 @@ export default {
           option.active = this.user.preferences.costume
             ? this.user.items.gear.costume[category] === newKey
             : this.user.items.gear.equipped[category] === newKey;
-          option.class = `headAccessory_special_${option.key} ${category}`;
+
           if (category === 'back') {
-            option.class = `icon_back_special_${option.key} back`;
+            option.text = this.$t(`back${upperFirst(key)}Text`);
+            option.imageName = `back_special_${option.key}`;
+          } else {
+            option.text = this.$t(`headAccessory${upperFirst(key)}Text`);
+            option.imageName = `headAccessory_special_${option.key}`;
           }
+          option.isGear = true;
           option.click = () => {
             const type = this.user.preferences.costume ? 'costume' : 'equipped';
             return this.equip(newKey, type);
@@ -303,7 +295,7 @@ export default {
 
       return keys.join(',');
     },
-    createGearItem (key, gearType, subGearType, additionalClass) {
+    createGearItem (key, gearType, subGearType) {
       const newKey = `${gearType}_${subGearType ? `${subGearType}_` : ''}${key}`;
       const option = {};
       option.key = key;
@@ -311,6 +303,7 @@ export default {
       const currentlyEquippedValue = this.user.items.gear[visibleGearType][gearType];
 
       option.active = currentlyEquippedValue === newKey;
+      option.isGear = true;
 
       if (key === 0) {
         // if key is the "none" option check if a property
@@ -318,7 +311,7 @@ export default {
         option.active = option.active || !currentlyEquippedValue;
       }
 
-      option.class = `${newKey} ${additionalClass}`;
+      option.imageName = `${newKey}`;
       option.click = () => {
         const type = this.user.preferences.costume ? 'costume' : 'equipped';
         const currentlyEquipped = this.user.items.gear[type][gearType];

website/client/src/components/bugReportModal.vue

@@ -167,7 +167,7 @@ label {
 
 <script>
 import axios from 'axios';
-import isEmail from 'validator/lib/isEmail';
+import isEmail from 'validator/es/lib/isEmail';
 import closeX from '@/components/ui/closeX';
 import { mapState } from '@/libs/store';
 import { MODALS } from '@/libs/consts';

website/client/src/components/creatorIntro.vue

@@ -220,10 +220,10 @@
               :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
-              <div
+              <Sprite
                 class="background"
-                :class="`icon_background_${bg.key}`"
-              ></div>
+                :image-name="`icon_background_${bg.key}`"
+              />
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -254,10 +254,10 @@
               :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
-              <div
+              <Sprite
                 class="background"
-                :class="`icon_background_${bg.key}`"
-              ></div>
+                :image-name="`icon_background_${bg.key}`"
+              />
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -286,10 +286,10 @@
               :class="{selected: bg.key === user.preferences.background}"
               @click="unlock('background.' + bg.key)"
             >
-              <div
+              <Sprite
                 class="background"
-                :class="`icon_background_${bg.key}`"
-              ></div>
+                :image-name="`icon_background_${bg.key}`"
+              />
               <b-popover
                 :target="bg.key"
                 triggers="hover focus"
@@ -818,9 +818,10 @@
 
         .background {
           border-radius: 4px;
+          object-position: -4px -4px;
+          object-fit: none;
           width: 60px;
           height: 60px;
-          background-position: -4px -4px;
         }
 
         .deselect {
@@ -1013,6 +1014,7 @@ import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
 import svgClose from '@/assets/svg/close.svg';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
+import Sprite from './ui/sprite';
 
 export default {
   components: {
@@ -1024,6 +1026,7 @@ export default {
     hairSettings,
     skinSettings,
     usernameForm,
+    Sprite,
   },
   mixins: [guide, notifications, avatarEditorUtilities],
   data () {

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

@@ -122,8 +122,8 @@
 <script>
 import clone from 'lodash/clone';
 import debounce from 'lodash/debounce';
-import isEmail from 'validator/lib/isEmail';
-import isUUID from 'validator/lib/isUUID';
+import isEmail from 'validator/es/lib/isEmail';
+import isUUID from 'validator/es/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import positiveIcon from '@/assets/svg/positive.svg';

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

@@ -16,10 +16,10 @@
         class="brand"
         aria-label="Habitica"
       >
-      <router-link to="/">
+        <router-link to="/">
           <div
-          class="logo svg-icon svg color gryphon"
-          v-html="icons.melior"
+            class="logo svg-icon svg color gryphon pl-2 mr-3"
+            v-html="icons.melior"
           ></div>
           <div class="svg-icon"></div>
         </router-link>
@@ -349,15 +349,15 @@
           >
             <div
               v-b-tooltip.hover.bottom="$t('mysticHourglassesTooltip')"
-              class="top-menu-icon svg-icon"
+              class="top-menu-icon svg-icon mr-1"
               v-html="icons.hourglasses"
             ></div>
             <span>{{ userHourglasses }}</span>
           </div>
-          <div class="item-with-icon">
+          <div class="item-with-icon gem">
             <a
               v-b-tooltip.hover.bottom="$t('gems')"
-              class="top-menu-icon svg-icon gem"
+              class="top-menu-icon svg-icon gem mr-2"
               :aria-label="$t('gems')"
               href="#buy-gems"
               @click.prevent="showBuyGemsModal()"
@@ -368,7 +368,7 @@
           <div class="item-with-icon gold">
             <div
               v-b-tooltip.hover.bottom="$t('gold')"
-              class="top-menu-icon svg-icon"
+              class="top-menu-icon svg-icon mr-2"
               :aria-label="$t('gold')"
               v-html="icons.gold"
             ></div>
@@ -409,6 +409,180 @@ body.modal-open #habitica-menu {
   @import '~@/assets/scss/utils.scss';
   @import '~@/assets/scss/variables.scss';
 
+  .menu-toggle {
+    border: none;
+  }
+
+  #menu_collapse {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .topbar {
+    z-index: 1080;
+    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
+    min-height: 56px;
+    box-shadow: 0 1px 2px 0 rgba($black, 0.24);
+
+    a {
+      color: white !important;
+    }
+  }
+
+  .logo {
+    color: $white;
+    height: 32px;
+    object-fit: contain;
+    width: 32px;
+  }
+
+  .quick-menu {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .currency-tray {
+    display: flex;
+  }
+
+  .topbar-item {
+    font-size: 16px;
+    color: $white !important;
+    font-weight: bold;
+    transition: none;
+
+    .topbar-dropdown  {
+        overflow: hidden;
+        max-height: 0;
+
+        .topbar-dropdown-item {
+          line-height: 1.5;
+          font-size: 16px;
+        }
+    }
+
+    >a {
+      padding: .8em 1em !important;
+    }
+
+    &.down {
+      color: $white !important;
+      background: $purple-200;
+
+      .topbar-dropdown {
+        margin-top: 0; // Remove gap between navbar and drop-down.
+        background: $purple-200;
+        border-radius: 0px;
+        border: none;
+        box-shadow: none;
+        padding: 0px;
+
+        border-bottom-right-radius: 5px;
+        border-bottom-left-radius: 5px;
+
+        .topbar-dropdown-item {
+          font-size: 16px;
+          box-shadow: none;
+          color: $white;
+          border: none;
+          line-height: 1.5;
+          display: list-item;
+
+          &.active {
+            background: $purple-300;
+          }
+
+          &:hover {
+            background: $purple-300;
+            text-decoration: none;
+
+            &:last-child {
+              border-bottom-right-radius: 5px;
+              border-bottom-left-radius: 5px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown + .dropdown {
+    margin-left: 0px;
+  }
+
+  .item-with-icon {
+    color: $white;
+    font-size: 16px;
+    font-weight: normal;
+    white-space: nowrap;
+
+    span {
+      font-weight: bold;
+    }
+
+    &.gem {
+      margin-left: 12px;
+    }
+
+    &.gold {
+      margin-left: 12px;
+      margin-right: 36px;
+    }
+
+    &:focus ::v-deep .top-menu-icon.svg-icon,
+    &:hover ::v-deep .top-menu-icon.svg-icon {
+      color: $white;
+    }
+
+    & ::v-deep .top-menu-icon.svg-icon {
+      color: $header-color;
+      vertical-align: bottom;
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin-right: 12px;
+      margin-left: 12px;
+    }
+  }
+
+  a.item-with-icon:focus {
+    outline: none;
+  }
+
+  @keyframes rotateGemColors {
+    /* Gems are green by default, so we rotate through ROYGBIV starting with green. */
+    20% {
+      fill: #46A7D9; /* Blue */
+    }
+    40% {
+      fill: #925CF3; /* Purple */
+    }
+    60% {
+      fill: #DE3F3F; /* Red */
+    }
+    80% {
+      fill: #FA8537; /* Orange */
+    }
+    100% {
+      fill: #FFB445; /* Yellow */
+    }
+  }
+
+  .gem:hover {
+    cursor: pointer;
+
+    & ::v-deep path:nth-child(1) {
+      animation: rotateGemColors 3s linear infinite alternate;
+    }
+  }
+
+  .message-count.top-count {
+    background-color: $red-50;
+    position: absolute;
+    right: 0;
+    top: -0.5em;
+    padding: .2em;
+  }
   @media only screen and (max-width: 1200px) {
     .chevron {
       display: none
@@ -416,12 +590,13 @@ body.modal-open #habitica-menu {
 
     .gryphon {
       background-size: cover;
-      height: 32px;
       color: $white;
+      height: 32px;
       margin: 0 auto;
-      width: 32px;
       top: -10px;
+      padding-left: 8px;
       position: relative;
+      width: 32px;
     }
 
     .logo {
@@ -545,193 +720,23 @@ body.modal-open #habitica-menu {
     .desktop-only {
       display: none !important;
     }
-  }
 
-  .menu-toggle {
-    border: none;
-  }
-
-  #menu_collapse {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .topbar {
-    z-index: 1080;
-    background: $purple-100 url(~@/assets/svg/for-css/bits.svg) right top no-repeat;
-    min-height: 56px;
-    box-shadow: 0 1px 2px 0 rgba($black, 0.24);
-
-    a {
-      color: white !important;
-    }
-  }
-
-  .logo {
-    color: $white;
-    height: 32px;
-    object-fit: contain;
-    width: 32px;
-  }
-
-  .quick-menu {
-    display: flex;
-    margin-left: auto;
-  }
-
-  .currency-tray {
-    display: flex;
-  }
-
-  .topbar-item {
-    font-size: 16px;
-    color: $white !important;
-    font-weight: bold;
-    transition: none;
-
-    .topbar-dropdown  {
-        overflow: hidden;
-        max-height: 0;
-
-        .topbar-dropdown-item {
-          line-height: 1.5;
-          font-size: 16px;
-        }
+    .navbar-toggler {
+      padding-left: 8px;
+      padding-right: 8px;
     }
 
-    >a {
-      padding: .8em 1em !important;
-    }
+    .item-with-icon {
+      margin-left: 0px;
+      margin-right: 16px;
 
-    &.down {
-      color: $white !important;
-      background: $purple-200;
-
-      .topbar-dropdown {
-        margin-top: 0; // Remove gap between navbar and drop-down.
-        background: $purple-200;
-        border-radius: 0px;
-        border: none;
-        box-shadow: none;
-        padding: 0px;
-
-        border-bottom-right-radius: 5px;
-        border-bottom-left-radius: 5px;
-
-        .topbar-dropdown-item {
-          font-size: 16px;
-          box-shadow: none;
-          color: $white;
-          border: none;
-          line-height: 1.5;
-          display: list-item;
-
-          &.active {
-            background: $purple-300;
-          }
-
-          &:hover {
-            background: $purple-300;
-            text-decoration: none;
-
-            &:last-child {
-              border-bottom-right-radius: 5px;
-              border-bottom-left-radius: 5px;
-            }
-          }
-        }
+      & ::v-deep .top-menu-icon.svg-icon {
+        margin-right: 0px;
+        margin-left: 0px;
       }
     }
   }
 
-  .dropdown + .dropdown {
-    margin-left: 0px;
-  }
-
-  .item-with-icon {
-    color: $white;
-    font-size: 16px;
-    font-weight: normal;
-    white-space: nowrap;
-
-    span {
-      font-weight: bold;
-    }
-
-    &.gold {
-      margin-right: 24px;
-    }
-
-    &:focus ::v-deep .top-menu-icon.svg-icon,
-    &:hover ::v-deep .top-menu-icon.svg-icon {
-      color: $white;
-    }
-
-    & ::v-deep .top-menu-icon.svg-icon {
-      color: $header-color;
-      vertical-align: bottom;
-      display: inline-block;
-      width: 24px;
-      height: 24px;
-      margin-right: 12px;
-      margin-left: 12px;
-    }
-  }
-
-  a.item-with-icon:focus {
-    outline: none;
-  }
-
-  .menu-icon {
-    margin-left: 24px;
-  }
-
-  @keyframes rotateGemColors {
-    /* Gems are green by default, so we rotate through ROYGBIV starting with green. */
-    20% {
-      fill: #46A7D9; /* Blue */
-    }
-    40% {
-      fill: #925CF3; /* Purple */
-    }
-    60% {
-      fill: #DE3F3F; /* Red */
-    }
-    80% {
-      fill: #FA8537; /* Orange */
-    }
-    100% {
-      fill: #FFB445; /* Yellow */
-    }
-  }
-
-  .gem:hover {
-    cursor: pointer;
-
-    & ::v-deep path:nth-child(1) {
-      animation: rotateGemColors 3s linear infinite alternate;
-    }
-  }
-
-  .message-count {
-    background-color: $blue-50;
-    border-radius: 50%;
-    height: 20px;
-    width: 20px;
-    float: right;
-    color: $white;
-    text-align: center;
-    font-weight: bold;
-    font-size: 12px;
-  }
-
-  .message-count.top-count {
-    background-color: $red-50;
-    position: absolute;
-    right: 0;
-    top: -0.5em;
-    padding: .2em;
-  }
 </style>
 
 <script>

website/client/src/components/header/messageCount.functional.vue

@@ -12,13 +12,13 @@
 .message-count {
   background-color: $red-50;
   border-radius: 50%;
-  height: 20px;
-  width: 20px;
-  float: right;
   color: $white;
-  text-align: center;
-  font-weight: bold;
   font-size: 12px;
+  font-weight: bold;
+  height: 20px;
+  left: 24px;
+  text-align: center;
+  width: 20px;
 
   svg {
     width: 12px;
@@ -36,4 +36,11 @@
 .message-count.top-count-gray {
   background-color: $gray-200;
 }
+
+@media only screen and (max-width: 992px) {
+
+  .message-count {
+    left: 12px;
+  }
+}
 </style>

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

@@ -14,7 +14,7 @@
           :top="true"
         />
         <div
-          class="top-menu-icon svg-icon user"
+          class="top-menu-icon svg-icon mr-2"
           v-html="icons.user"
         ></div>
       </div>
@@ -105,6 +105,11 @@
 
 <style lang='scss' scoped>
 @import '~@/assets/scss/colors.scss';
+@media only screen and (max-width: 992px) {
+  .item-with-icon.item-user {
+    margin-right: 0px;
+  }
+}
 
 .user-dropdown {
   width: 14.75em;

website/client/src/components/inventory/item.vue

@@ -21,10 +21,10 @@
         <slot
           name="itemBadge"
           :item="item"
-        ></slot><span
+        ></slot><Sprite
           class="item-content"
-          :class="itemContentClass"
-        ></span>
+          :image-name="itemContentClass"
+        />
       </div><span
         v-if="label"
         class="item-label"
@@ -46,8 +46,12 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   props: {
     item: {
       type: Object,

website/client/src/components/inventory/itemPopover.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="root"
+    v-if="draggedItem"
+    class="draggedItemInfo mouse"
+    v-mousePosition="30"
+    @mouseMoved="mouseMoved($event)">
+      <Sprite
+        class="dragging-icon"
+        :image-name="imageName()"
+      />
+      <div class="popover">
+        <div
+          class="popover-content"
+        >
+          {{ $t(popoverTextKey, { [translationKey]: itemText() }) }}
+        </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .draggedItemInfo {
+    position: absolute;
+    left: -500px;
+
+    z-index: 1080;
+
+    &.mouse {
+      position: fixed;
+      pointer-events: none
+    }
+
+    .dragging-icon {
+      width: 68px;
+      margin: 0 auto 8px;
+      display: block;
+      transform: scale(1.5);
+    }
+
+    .popover {
+      position: static;
+      width: 180px;
+    }
+
+    .popover-content {
+      color: white;
+      margin: 15px;
+      text-align: center;
+    }
+  }
+</style>
+
+<script>
+import Sprite from '@/components/ui/sprite';
+import MouseMoveDirective from '@/directives/mouseposition.directive';
+
+export default {
+  name: 'ItemPopover',
+  components: {
+    Sprite,
+  },
+  directives: {
+    mousePosition: MouseMoveDirective,
+  },
+  props: {
+    draggedItem: {
+      type: Object,
+      default: null,
+    },
+    popoverTextKey: {
+      type: String,
+      default: '',
+    },
+    translationKey: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    imageName () {
+      if (this.draggedItem) {
+        if (this.draggedItem.class) {
+          return this.draggedItem.class;
+        }
+        if (this.draggedItem.target) {
+          return `Pet_Food_${this.draggedItem.key}`;
+        }
+      }
+      return '';
+    },
+    mouseMoved ($event) {
+      if (this.$refs.root) {
+        this.$refs.root.style.left = `${$event.x - 60}px`;
+        this.$refs.root.style.top = `${$event.y + 10}px`;
+      }
+    },
+    itemText () {
+      if (this.draggedItem) {
+        if (this.draggedItem.text) {
+          if (typeof this.draggedItem.text === 'function') {
+            return this.draggedItem.text();
+          }
+          return this.draggedItem.text;
+        }
+        return this.draggedItem.class;
+      }
+      return '';
+    },
+  },
+};
+
+</script>

website/client/src/components/inventory/items/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    v-mousePosition="30"
     class="row"
-    @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
       <filter-sidebar>
@@ -99,7 +97,7 @@
                   {{ context.item.text }}
                 </h4>
                 <div
-                  v-if="currentDraggingPotion == null"
+                  v-if="!currentDraggingPotion"
                   class="popover-content-text"
                 >
                   {{ context.item.notes }}
@@ -148,7 +146,7 @@
                 <h4 class="popover-content-title">
                   {{ context.item.text }}
                 </h4>
-                <div class="popover-content-text">
+                <div class="popover-content-text" v-if="!currentDraggingEgg">
                   {{ context.item.notes }}
                 </div>
               </template>
@@ -224,120 +222,24 @@
       </div>
     </div>
     <hatchedPetDialog />
-    <div
-      ref="draggingEggInfo"
-      class="eggInfo"
-    >
-      <div v-if="currentDraggingEgg != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_Egg_${currentDraggingEgg.key}`"
-        ></div>
-        <div class="popover">
-          <div class="popover-content">
-            {{ $t('dragThisEgg', {eggName: currentDraggingEgg.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="eggClickMode"
-      ref="clickEggInfo"
-      class="eggInfo mouse"
-    >
-      <div v-if="currentDraggingEgg != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_Egg_${currentDraggingEgg.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnPotionToHatch', {eggName: currentDraggingEgg.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      ref="draggingPotionInfo"
-      class="hatchingPotionInfo"
-    >
-      <div v-if="currentDraggingPotion != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('dragThisPotion', {potionName: currentDraggingPotion.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="potionClickMode"
-      ref="clickPotionInfo"
-      class="hatchingPotionInfo mouse"
-    >
-      <div v-if="currentDraggingPotion != null">
-        <div
-          class="potion-icon"
-          :class="`Pet_HatchingPotion_${currentDraggingPotion.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnEggToHatch', {potionName: currentDraggingPotion.text }) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ItemPopover
+      :dragged-item="currentDraggingEgg"
+      popoverTextKey="clickOnPotionToHatch"
+      translationKey="eggName" />
+    <ItemPopover
+      :dragged-item="currentDraggingPotion"
+      popoverTextKey="clickOnEggToHatch"
+      translationKey="potionName" />
     <questDetailModal :group="user.party" />
     <cards-modal :card-options="cardOptions" />
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import '~@/assets/scss/colors.scss';
-
-  .eggInfo, .hatchingPotionInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .potion-icon {
-      margin: 0 auto 8px;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: inherit;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-
-</style>
-
 <script>
 import each from 'lodash/each';
 import throttle from 'lodash/throttle';
 import moment from 'moment';
+import ItemPopover from '@/components/inventory/itemPopover';
 import Item from '@/components/inventory/item';
 import ItemRows from '@/components/ui/itemRows';
 import CountBadge from '@/components/ui/countBadge';
@@ -354,7 +256,6 @@ import { createAnimal } from '@/libs/createAnimal';
 
 import notifications from '@/mixins/notifications';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import MouseMoveDirective from '@/directives/mouseposition.directive';
 import FilterGroup from '@/components/ui/filterGroup';
 import Checkbox from '@/components/ui/checkbox';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
@@ -375,8 +276,6 @@ const groups = [
   allowedItems,
 }));
 
-let lastMouseMoveEvent = {};
-
 export default {
   name: 'Items',
   components: {
@@ -391,10 +290,10 @@ export default {
     cardsModal,
     QuestInfo,
     FilterSidebar,
+    ItemPopover,
   },
   directives: {
     drag: DragDropDirective,
-    mousePosition: MouseMoveDirective,
   },
   mixins: [notifications],
   data () {
@@ -405,9 +304,7 @@ export default {
       sortBy: 'quantity', // or 'AZ'
 
       currentDraggingEgg: null,
-      eggClickMode: false,
       currentDraggingPotion: null,
-      potionClickMode: false,
       cardOptions: {
         cardType: '',
         messageOptions: 0,
@@ -567,22 +464,13 @@ export default {
         }
 
         this.currentDraggingPotion = null;
-        this.potionClickMode = false;
         return;
       }
 
       if (this.currentDraggingEgg === null || this.currentDraggingEgg !== egg) {
         this.currentDraggingEgg = egg;
-        this.eggClickMode = true;
-
-        // Wait for the div.eggInfo.mouse node to be added to the DOM before
-        // changing its position.
-        this.$nextTick(() => {
-          this.mouseMoved(lastMouseMoveEvent);
-        });
       } else {
         this.currentDraggingEgg = null;
-        this.eggClickMode = false;
       }
     },
     onPotionClicked ($event, potion) {
@@ -592,21 +480,12 @@ export default {
         }
 
         this.currentDraggingEgg = null;
-        this.eggClickMode = false;
         return;
       }
       if (this.currentDraggingPotion === null || this.currentDraggingPotion !== potion) {
         this.currentDraggingPotion = potion;
-        this.potionClickMode = true;
-
-        // Wait for the div.hatchingPotionInfo.mouse node to be added to the
-        // DOM before changing its position.
-        this.$nextTick(() => {
-          this.mouseMoved(lastMouseMoveEvent);
-        });
       } else {
         this.currentDraggingPotion = null;
-        this.potionClickMode = false;
       }
     },
 
@@ -640,23 +519,6 @@ export default {
         });
       }
     },
-
-    mouseMoved ($event) {
-      // Keep track of the last mouse position even in click mode so that we
-      // know where to position the dragged potion/egg info on item click.
-      lastMouseMoveEvent = $event;
-
-      // Update the potion/egg popover if we are already dragging it.
-      if (this.potionClickMode) {
-        // dragging potioninfo is 180px wide (90 would be centered)
-        this.$refs.clickPotionInfo.style.left = `${$event.x - 60}px`;
-        this.$refs.clickPotionInfo.style.top = `${$event.y + 10}px`;
-      } else if (this.eggClickMode) {
-        // dragging eggInfo is 180px wide (90 would be centered)
-        this.$refs.clickEggInfo.style.left = `${$event.x - 60}px`;
-        this.$refs.clickEggInfo.style.top = `${$event.y + 10}px`;
-      }
-    },
   },
 };
 </script>

website/client/src/components/inventory/stable/foodItem.vue

@@ -13,13 +13,13 @@
           :show="true"
           :count="itemCount"
         />
-        <span
+        <Sprite
           v-drag.food="item.key"
           class="item-content"
-          :class="`Pet_Food_${item.key}`"
+          :image-name="`Pet_Food_${item.key}`"
           @itemDragEnd="dragend($event)"
           @itemDragStart="dragstart($event)"
-        ></span>
+        />
       </div>
     </div>
     <b-popover
@@ -41,12 +41,14 @@
 <script>
 import { v4 as uuid } from 'uuid';
 import DragDropDirective from '@/directives/dragdrop.directive';
+import Sprite from '@/components/ui/sprite';
 
 import CountBadge from '@/components/ui/countBadge';
 
 export default {
   components: {
     CountBadge,
+    Sprite,
   },
   directives: {
     drag: DragDropDirective,

website/client/src/components/inventory/stable/hatchedPetDialog.vue

@@ -20,7 +20,7 @@
       </div>
       <div class="inner-content">
         <div class="pet-background d-flex align-items-center">
-          <div :class="pet.class"></div>
+          <Sprite :image-name="pet.imageName" />
         </div>
         <h4 class="title">
           {{ pet.name }}
@@ -76,10 +76,11 @@
       height: 112px;
       border-radius: 4px;
       background-color: $gray-700;
-    }
 
-    .Pet {
-      margin: auto;
+      img {
+        transform: scale(1.5);
+        margin: auto;
+      }
     }
 
     .dialog-header {
@@ -103,8 +104,12 @@
 <script>
 import markdownDirective from '@/directives/markdown';
 import svgClose from '@/assets/svg/close.svg';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   directives: {
     markdown: markdownDirective,
   },

website/client/src/components/inventory/stable/hatchingModal.vue

@@ -6,10 +6,10 @@
     >
       <div class="potionEggGroup">
         <div class="potionEggBackground">
-          <div :class="`Pet_HatchingPotion_${hatchablePet.potionKey}`"></div>
+          <Sprite :image-name="`Pet_HatchingPotion_${hatchablePet.potionKey}`" />
         </div>
         <div class="potionEggBackground">
-          <div :class="`Pet_Egg_${hatchablePet.eggKey}`"></div>
+          <Sprite :image-name="`Pet_Egg_${hatchablePet.eggKey}`" />
         </div>
       </div>
       <h4 class="title">
@@ -105,7 +105,7 @@
         margin-right: 24px;
       }
 
-      div {
+      img {
         margin: 0 auto;
       }
     }
@@ -116,8 +116,12 @@
 import svgClose from '@/assets/svg/close.svg';
 
 import petMixin from '@/mixins/petMixin';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   mixins: [petMixin],
   props: ['hatchablePet'],
   data () {

website/client/src/components/inventory/stable/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div
-    v-mousePosition="30"
     class="row stable"
-    @mouseMoved="mouseMoved($event)"
   >
     <div class="standard-sidebar d-none d-sm-block">
       <filter-sidebar>
@@ -265,43 +263,10 @@
       </inventoryDrawer>
     </div>
     <hatchedPetDialog :hide-text="true" />
-    <div
-      ref="dragginFoodInfo"
-      class="foodInfo"
-    >
-      <div v-if="currentDraggingFood != null">
-        <div
-          class="food-icon"
-          :class="`Pet_Food_${currentDraggingFood.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="foodClickMode"
-      ref="clickFoodInfo"
-      class="foodInfo mouse"
-    >
-      <div v-if="currentDraggingFood != null">
-        <div
-          class="food-icon"
-          :class="`Pet_Food_${currentDraggingFood.key}`"
-        ></div>
-        <div class="popover">
-          <div
-            class="popover-content"
-          >
-            {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
-          </div>
-        </div>
-      </div>
-    </div>
+    <ItemPopover
+      :dragged-item="currentDraggingFood"
+      popoverTextKey="clickOnPetToFeed"
+      translationKey="foodName" />
     <mount-raised-modal />
     <welcome-modal />
     <hatching-modal :hatchable-pet.sync="hatchablePet" />
@@ -364,34 +329,6 @@
     margin-bottom: 0;
   }
 
-  .foodInfo {
-    position: absolute;
-    left: -500px;
-
-    z-index: 1080;
-
-    &.mouse {
-      position: fixed;
-      pointer-events: none
-    }
-
-    .food-icon {
-      margin: 0 auto 8px;
-      transform: scale(1.5);
-    }
-
-    .popover {
-      position: inherit;
-      width: 180px;
-    }
-
-    .popover-content {
-      color: white;
-      margin: 15px;
-      text-align: center;
-    }
-  }
-
   .hatchablePopover {
     width: 180px;
 
@@ -428,6 +365,7 @@ import _throttle from 'lodash/throttle';
 import groupBy from 'lodash/groupBy';
 import { mapState } from '@/libs/store';
 
+import ItemPopover from '@/components/inventory/itemPopover';
 import PetItem from './petItem';
 import MountItem from './mountItem.vue';
 import FoodItem from './foodItem';
@@ -440,7 +378,6 @@ import InventoryDrawer from '@/components/shared/inventoryDrawer';
 
 import ResizeDirective from '@/directives/resize.directive';
 import DragDropDirective from '@/directives/dragdrop.directive';
-import MouseMoveDirective from '@/directives/mouseposition.directive';
 
 import { createAnimal } from '@/libs/createAnimal';
 
@@ -482,11 +419,11 @@ export default {
     WelcomeModal,
     HatchingModal,
     InventoryDrawer,
+    ItemPopover,
   },
   directives: {
     resize: ResizeDirective,
     drag: DragDropDirective,
-    mousePosition: MouseMoveDirective,
   },
   mixins: [notifications, openedItemRowsMixin, petMixin, seasonalNPC],
   data () {

website/client/src/components/inventory/stable/mountItem.vue

@@ -13,10 +13,11 @@
           name="itemBadge"
           :item="item"
         ></slot>
-        <span
+        <Sprite
           class="item-content"
           :class="itemClass()"
-        ></span>
+          :image-name="imageName()"
+        />
       </div>
     </div>
     <b-popover
@@ -37,8 +38,12 @@
 import { v4 as uuid } from 'uuid';
 import { mapState } from '@/libs/store';
 import { isOwned } from '../../../libs/createAnimal';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   props: {
     item: {
       type: Object,
@@ -70,7 +75,10 @@ export default {
       return isOwned('mount', this.item, this.userItems);
     },
     itemClass () {
-      return this.isOwned() ? `Mount_Icon_${this.item.key}` : 'PixelPaw GreyedOut';
+      return this.isOwned() ? '' : 'GreyedOut';
+    },
+    imageName () {
+      return this.isOwned() ? `stable_Mount_Icon_${this.item.key}` : 'PixelPaw';
     },
   },
 };

website/client/src/components/inventory/stable/mountRaisedModal.vue

@@ -12,10 +12,10 @@
       </div>
       <div class="inner-content">
         <div class="pet-background">
-          <div
+          <Sprite
             class="mount"
-            :class="`Mount_Icon_${mount.key}`"
-          ></div>
+            :image-name="`Mount_Icon_${mount.key}`"
+          />
         </div>
         <h4 class="title">
           {{ mount.text() }}
@@ -82,8 +82,12 @@
 <script>
 import stable from '@/../../common/script/content/stable';
 import markdownDirective from '@/directives/markdown';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   directives: {
     markdown: markdownDirective,
   },

website/client/src/components/inventory/stable/petItem.vue

@@ -13,19 +13,23 @@
           name="itemBadge"
           :item="item"
         ></slot><span
-          v-if="mountOwned() && isHatchable() && !item.isSpecial()"
+          v-if="isHatchable() && !item.isSpecial()"
           class="item-content hatchAgain"
-        ><span
+        ><Sprite
           class="egg"
-          :class="eggClass"
-        ></span><span
+          :image-name="eggClass"
+        /><Sprite
           class="potion"
-          :class="potionClass"
-        ></span></span><span
-          v-else
+          :image-name="potionClass"
+        />
+        </span>
+        <Sprite
+        v-else
           class="item-content"
-          :class="getPetItemClass()"
-        ></span><span
+          :class="itemClass()"
+          :image-name="imageName()"
+        />
+        <span
           v-if="isAllowedToFeed() && progress() > 0"
           class="pet-progress-background"
         ><div
@@ -52,9 +56,9 @@
           v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })"
         ></div><div class="potionEggGroup">
           <div class="potionEggBackground">
-            <div :class="potionClass"></div>
+            <Sprite :image-name="potionClass" />
           </div><div class="potionEggBackground">
-            <div :class="eggClass"></div>
+            <Sprite :image-name="eggClass" />
           </div>
         </div>
       </div><div v-else>
@@ -118,8 +122,12 @@ import foolPet from '@/mixins/foolPet';
 import {
   isAllowedToFeed, isHatchable, isOwned, isSpecial,
 } from '../../../libs/createAnimal';
+import Sprite from '@/components/ui/sprite';
 
 export default {
+  components: {
+    Sprite,
+  },
   mixins: [foolPet],
   props: {
     item: {
@@ -168,22 +176,28 @@ export default {
     isAllowedToFeed () {
       return isAllowedToFeed(this.item, this.userItems);
     },
-    getPetItemClass () {
+    itemClass () {
+      if (this.isOwned() || this.isHatchable()) {
+        return '';
+      }
+      return 'GreyedOut';
+    },
+    imageName () {
       if (this.isOwned() && some(
         this.currentEventList,
         event => moment().isBetween(event.start, event.end) && event.aprilFools && event.aprilFools === 'Fungi',
       )) {
-        if (this.isSpecial()) return `Pet ${this.foolPet(this.item.key)}`;
+        if (this.isSpecial()) return `stable_${this.foolPet(this.item.key)}`;
         const petString = `${this.item.eggKey}-${this.item.key}`;
-        return `Pet ${this.foolPet(petString)}`;
+        return `stable_${this.foolPet(petString)}`;
       }
 
       if (this.isOwned() || (this.mountOwned() && this.isHatchable())) {
-        return `Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        return `stable_Pet-${this.item.key}`;
       }
 
       if (!this.isOwned() && this.isSpecial()) {
-        return 'GreyedOut PixelPaw';
+        return 'PixelPaw';
       }
 
       if (this.isHatchable()) {
@@ -191,11 +205,11 @@ export default {
       }
 
       if (this.mountOwned()) {
-        return `GreyedOut Pet Pet-${this.item.key} ${this.item.eggKey}`;
+        return `stable_Pet-${this.item.key}`;
       }
 
       // Can't hatch
-      return 'GreyedOut PixelPaw';
+      return 'PixelPaw';
     },
     progress () {
       return this.userItems.pets[this.item.key];

website/client/src/components/modifyInventory.vue

@@ -56,11 +56,11 @@
                   class="list-group-item"
                   ng-init="inv.gear[item.key] = user.items.gear.owned[item.key]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'shop_' + item.key"
+                    :imageName="'shop_' + item.key"
                     style="margin-right: 10px"
-                  ></div>
+                  />
                   {{ item.text() }}
                   <div class="clearfix">
                     <label class="radio-inline">
@@ -330,9 +330,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -363,9 +363,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -396,9 +396,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -429,9 +429,9 @@
                   class="list-group-item"
                   ng-init="inv.mounts[mount] = user.items.mounts[mount]"
                 >
-                  <div
+                  <Sprite
                     class="pull-left"
-                    :class="'Mount_Icon_' + mount"
+                    :imageName="mount.key"
                     style="margin-right: 10px"
                   ></div>
                   {{ mount }}
@@ -503,11 +503,11 @@
                   ng-init="inv.hatchingPotions[item.key] = user.items.hatchingPotions[item.key]"
                 >
                   <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                       class="pull-left"
                       :class="'Pet_HatchingPotion_' + item.key"
                       style="margin-right: 10px"
-                    ></div>
+                    />
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -565,11 +565,11 @@
                   ng-init="inv.eggs[item.key] = user.items.eggs[item.key]"
                 >
                   <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                       class="pull-left"
-                      :class="'Pet_Egg_' + item.key"
+                      :image-name="'Pet_Egg_' + item.key"
                       style="margin-right: 10px"
-                    ></div>
+                     />
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -627,11 +627,11 @@
                   ng-init="inv.food[item.key] = user.items.food[item.key]"
                 >
                   <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                       class="pull-left"
                       :class="'Pet_Food_' + item.key"
                       style="margin-right: 10px"
-                    ></div>
+                    />
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -690,11 +690,11 @@
                   ng-if="item.category !== 'world'"
                 >
                   <div class="form-inline clearfix">
-                    <div
+                    <Sprite
                       class="pull-left"
                       :class="'inventory_quest_scroll_' + item.key"
                       style="margin-right: 10px"
-                    ></div>
+                    />
                     <p>{{ item.text() }}</p>
                     <input
                       class="form-control"
@@ -730,9 +730,13 @@
 import axios from 'axios';
 
 import Content from '@/../../common/script/content';
+import Sprite from '@/components/ui/sprite.vue';
 import { mapState } from '@/libs/store';
 
 export default {
+  components: {
+    Sprite,
+  },
   data () {
     const showInv = {};
     const inv = {

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

@@ -295,7 +295,7 @@ h2 {
 // import { nextTick } from 'vue'; // may not need this? I don't know!
 import debounce from 'lodash/debounce';
 import find from 'lodash/find';
-import isUUID from 'validator/lib/isUUID';
+import isUUID from 'validator/es/lib/isUUID';
 import moment from 'moment';
 import { mapState } from '@/libs/store';
 import closeIcon from '@/assets/svg/close.svg';

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

@@ -46,10 +46,10 @@
           </div>
           <div class="row">
             <div class="col-2">
-              <div
-                :class="currentMysterySet"
+              <Sprite
+                :image-name="currentMysterySet"
                 class="mt-n1"
-              ></div>
+              />
             </div>
             <div class="col-10">
               <h3> {{ $t('monthlyMysteryItems') }} </h3>
@@ -628,6 +628,7 @@ import paymentsMixin from '../../mixins/payments';
 import notificationsMixin from '../../mixins/notifications';
 
 import subscriptionOptions from './subscriptionOptions.vue';
+import Sprite from '@/components/ui/sprite';
 
 import amazonPayLogo from '@/assets/svg/amazonpay.svg';
 import applePayLogo from '@/assets/svg/apple-pay-logo.svg';
@@ -648,6 +649,7 @@ import subscriberHourglasses from '@/assets/svg/subscriber-hourglasses.svg';
 export default {
   components: {
     subscriptionOptions,
+    Sprite,
   },
   mixins: [paymentsMixin, notificationsMixin],
   data () {

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

@@ -715,6 +715,12 @@ export default {
       if (this.item.notes instanceof Function) {
         return this.item.notes();
       }
+      if (this.item.items) {
+        if (this.item.items[0].notes instanceof Function) {
+          return this.item.items[0].notes();
+        }
+        return this.item.items[0].notes;
+      }
       return this.item.notes;
     },
     gemsLeft () {

website/client/src/components/shops/customizations/index.vue

@@ -109,6 +109,7 @@
 </style>
 
 <script>
+import find from 'lodash/find';
 import shops from '@/../../common/script/libs/shops';
 import throttle from 'lodash/throttle';
 import { mapState } from '@/libs/store';
@@ -145,9 +146,16 @@ export default {
       return Object.values(this.viewOptions).some(g => g.selected);
     },
     imageURLs () {
+      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
+      if (!currentEvent) {
+        return {
+          background: 'url(/static/npc/normal/customizations_background.png)',
+          npc: 'url(/static/npc/normal/customizations_npc.png)',
+        };
+      }
       return {
-        background: 'url(/static/npc/normal/customizations_background.png)',
-        npc: 'url(/static/npc/normal/customizations_npc.png)',
+        background: `url(/static/npc/${currentEvent.season}/customizations_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/customizations_npc.png)`,
       };
     },
     categories () {

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

@@ -17,10 +17,10 @@
           :emptyItem="emptyItem"
         ></slot>
         <div class="image">
-          <div
+          <Sprite
             v-once
-            :class="item.class"
-          ></div>
+            :image-name="item.class"
+          />
           <slot
             name="itemImage"
             :item="item"
@@ -157,9 +157,11 @@
 
 <script>
 import { v4 as uuid } from 'uuid';
+import Sprite from '@/components/ui/sprite';
 
 export default {
   components: {
+    Sprite,
   },
   props: {
     item: {

website/client/src/components/shops/market/keysToKennel.vue

@@ -38,26 +38,6 @@
   }
 </style>
 
-<style>
-  .key_to_pets {
-    background-image: url('~@/assets/images/keys/key-to-the-pet-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-
-  .key_to_mounts {
-    background-image: url('~@/assets/images/keys/key-to-the-mount-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-
-  .key_to_both {
-    background-image: url('~@/assets/images/keys/keys-to-the-kennels.png');
-    width: 68px;
-    height: 68px;
-  }
-</style>
-
 <script>
 import { beastCount, mountMasterProgress } from '@/../../common/script/count';
 import { mapState } from '@/libs/store';

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

@@ -28,6 +28,12 @@
           :item="item"
           :abbreviated="true"
         />
+        <div
+          v-if="item.addlNotes"
+          class="mx-4 mb-3"
+        >
+          {{ item.addlNotes }}
+        </div>
         <quest-rewards :quest="item" />
         <div
           v-if="!item.locked"
@@ -52,12 +58,6 @@
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
-          <div
-            v-if="item.addlNotes"
-            class="mb-3"
-          >
-            {{ item.addlNotes }}
-          </div>
           <div>
             <number-increment
               @updateQuantity="selectedAmountToBuy = $event"
@@ -82,7 +82,7 @@
           v-if="priceType === 'gems'
             && !enoughCurrency(priceType, item.value * selectedAmountToBuy)
             && !item.locked"
-          class="btn btn-primary"
+          class="btn btn-primary mb-3"
           @click="purchaseGems()"
         >
           {{ $t('purchaseGems') }}
@@ -177,7 +177,6 @@
 
     .inner-content {
       margin: 33px auto auto;
-      padding: 0px 24px;
     }
 
     .item-notes {
@@ -233,8 +232,6 @@
     }
 
     .purchase-amount {
-      margin-top: 24px;
-
       .how-many-to-buy {
         margin-bottom: 16px;
       }
@@ -501,38 +498,6 @@ export default {
     hideDialog () {
       this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
     },
-    getDropIcon (drop) {
-      switch (drop.type) {
-        case 'gear':
-          return `shop_${drop.key}`;
-        case 'hatchingPotions':
-          return `Pet_HatchingPotion_${drop.key}`;
-        case 'food':
-          return `Pet_Food_${drop.key}`;
-        case 'eggs':
-          return `Pet_Egg_${drop.key}`;
-        case 'quests':
-          return `inventory_quest_scroll_${drop.key}`;
-        default:
-          return '';
-      }
-    },
-    getDropName (drop) {
-      switch (drop.type) {
-        case 'gear':
-          return this.content.gear.flat[drop.key].text();
-        case 'quests':
-          return this.content.quests[drop.key].text();
-        case 'hatchingPotions':
-          return this.$t('namedHatchingPotion', { type: this.content.hatchingPotions[drop.key].text() });
-        case 'food':
-          return this.content.food[drop.key].text();
-        case 'eggs':
-          return this.content.eggs[drop.key].text();
-        default:
-          return `Unknown type: ${drop.type}`;
-      }
-    },
     purchaseGems () {
       this.$root.$emit('bv::show::modal', 'buy-gems');
     },

website/client/src/components/shops/quests/quest-helper.mixin.js

@@ -19,9 +19,9 @@ export const QuestHelperMixin = {
         case 'quests':
           return `inventory_quest_scroll_${drop.key}`;
         case 'mounts':
-          return `rewards_mount Mount_Icon_${drop.key}`;
+          return `Mount_Icon_${drop.key}`;
         case 'pets':
-          return `rewards_pet Pet-${drop.key}`;
+          return `stable_Pet-${drop.key}`;
         default:
           return `shop_${drop.key}`;
       }

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

@@ -2,7 +2,7 @@
   <div class="quest-content">
     <div
       class="quest-image"
-      :class="'quest_' + item.key"
+      :class="item.purchaseType === 'bundles' ? `quest_bundle_${item.key}` : `quest_${item.key}`"
     ></div>
     <h3 class="text-center">
       {{ itemText }}
@@ -17,7 +17,7 @@
       <user-label :user="leader" />
     </div>
     <div
-      class="text"
+      class="mx-4"
       v-html="itemNotes"
     ></div>
     <questInfo
@@ -42,12 +42,6 @@
     margin-top: 24px;
   }
 
-  .text {
-    margin: 16px 16px;
-    overflow-y: auto;
-    text-overflow: ellipsis;
-  }
-
   .leader-label {
     font-size: 14px;
     font-weight: bold;

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="row"
+      class="row mt-3"
     >
       <div
         v-if="quest.collect"
@@ -25,7 +25,10 @@
         <dt>{{ $t('bossHP') + ':' }}</dt>
         <dd>{{ quest.boss.hp }}</dd>
       </div>
-      <div class="table-row">
+      <div
+        class="table-row"
+        v-if="quest.purchaseType !== 'bundles'"
+      >
         <dt>{{ $t('difficulty') + ':' }}</dt>
         <dd>
           <div
@@ -39,7 +42,6 @@
     </div>
     <div
       v-if="quest.end && !abbreviated"
-      class="m-auto"
     >
       {{ limitedString }}
     </div>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="quest.drop"
-    class="quest-rewards"
+    class="quest-rewards mb-3"
   >
     <div
       class="header d-flex align-items-center"
@@ -39,7 +39,7 @@
         label-class="purple"
       >
         <div slot="itemImage">
-          <div :class="getDropIcon(drop)"></div>
+          <Sprite :image-name="getDropIcon(drop)" />
         </div>
         <div slot="popoverContent">
           <quest-popover :item="drop" />
@@ -92,7 +92,7 @@
           :count="drop.amount"
         />
         <div slot="itemImage">
-          <div :class="getDropIcon(drop)"></div>
+          <Sprite :image-name="getDropIcon(drop)" />
         </div>
         <div slot="popoverContent">
           <equipmentAttributesPopover
@@ -133,6 +133,7 @@ import { QuestHelperMixin } from './quest-helper.mixin';
 import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
 import QuestPopover from './questPopover';
 import CountBadge from '../../ui/countBadge';
+import Sprite from '../../ui/sprite';
 
 export default {
   components: {
@@ -141,6 +142,7 @@ export default {
     ItemWithLabel,
     SectionButton,
     EquipmentAttributesPopover,
+    Sprite,
   },
   mixins: [QuestHelperMixin],
   props: ['quest'],

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

@@ -480,7 +480,7 @@ export default {
     });
 
     await this.triggerGetWorldState();
-    this.currentEvent = _find(this.currentEventList, event => Boolean(['winter', 'spring', 'summer', 'fall'].includes(event.season)));
+    this.currentEvent = _find(this.currentEventList, event => Boolean(event.season));
     this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`;
     this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`;
   },