4.277.4

* refactor(notifs): universal routing for migrations

* fix(lint): remove whitespace

* chore(content): update migration for new scheme

* fix(migration): account for cake

* chore(images): update sprite CSS

---------

Co-authored-by: SabreCat <sabe@habitica.com>

config.json.example

@@ -87,5 +87,5 @@
   "REDIS_HOST": "aaabbbcccdddeeefff",
   "REDIS_PORT": "1234",
   "REDIS_PASSWORD": "12345678",
-  "TRUSTED_DOMAINS": "https://localhost,https://habitica.com"
+  "TRUSTED_DOMAINS": "localhost,habitica.com"
 }

migrations/archive/2023/20230522_pet_group_achievements.js

@@ -0,0 +1,158 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230522_pet_group_achievements';
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = {
+    migration: MIGRATION_NAME,
+  };
+
+  if (user && user.items && user.items.pets) {
+    const pets = user.items.pets;
+    if (pets['Parrot-Base']
+      && pets['Parrot-CottonCandyBlue']
+      && pets['Parrot-CottonCandyPink']
+      && pets['Parrot-Desert']
+      && pets['Parrot-Golden']
+      && pets['Parrot-Red']
+      && pets['Parrot-Shade']
+      && pets['Parrot-Skeleton']
+      && pets['Parrot-White']
+      && pets['Parrot-Zombie']
+      && pets['Rooster-Base']
+      && pets['Rooster-CottonCandyBlue']
+      && pets['Rooster-CottonCandyPink']
+      && pets['Rooster-Desert']
+      && pets['Rooster-Golden']
+      && pets['Rooster-Red']
+      && pets['Rooster-Shade']
+      && pets['Rooster-Skeleton']
+      && pets['Rooster-White']
+      && pets['Rooster-Zombie']
+      && pets['Triceratops-Base']
+      && pets['Triceratops-CottonCandyBlue']
+      && pets['Triceratops-CottonCandyPink']
+      && pets['Triceratops-Desert']
+      && pets['Triceratops-Golden']
+      && pets['Triceratops-Red']
+      && pets['Triceratops-Shade']
+      && pets['Triceratops-Skeleton']
+      && pets['Triceratops-White']
+      && pets['Triceratops-Zombie']
+      && pets['TRex-Base']
+      && pets['TRex-CottonCandyBlue']
+      && pets['TRex-CottonCandyPink']
+      && pets['TRex-Desert']
+      && pets['TRex-Golden']
+      && pets['TRex-Red']
+      && pets['TRex-Shade']
+      && pets['TRex-Skeleton']
+      && pets['TRex-White']
+      && pets['TRex-Zombie']
+      && pets['Pterodactyl-Base']
+      && pets['Pterodactyl-CottonCandyBlue']
+      && pets['Pterodactyl-CottonCandyPink']
+      && pets['Pterodactyl-Desert']
+      && pets['Pterodactyl-Golden']
+      && pets['Pterodactyl-Red']
+      && pets['Pterodactyl-Shade']
+      && pets['Pterodactyl-Skeleton']
+      && pets['Pterodactyl-White']
+      && pets['Pterodactyl-Zombie']
+      && pets['Owl-Base']
+      && pets['Owl-CottonCandyBlue']
+      && pets['Owl-CottonCandyPink']
+      && pets['Owl-Desert']
+      && pets['Owl-Golden']
+      && pets['Owl-Red']
+      && pets['Owl-Shade']
+      && pets['Owl-Skeleton']
+      && pets['Owl-White']
+      && pets['Owl-Zombie']
+      && pets['Velociraptor-Base']
+      && pets['Velociraptor-CottonCandyBlue']
+      && pets['Velociraptor-CottonCandyPink']
+      && pets['Velociraptor-Desert']
+      && pets['Velociraptor-Golden']
+      && pets['Velociraptor-Red']
+      && pets['Velociraptor-Shade']
+      && pets['Velociraptor-Skeleton']
+      && pets['Velociraptor-White']
+      && pets['Velociraptor-Zombie']
+      && pets['Penguin-Base']
+      && pets['Penguin-CottonCandyBlue']
+      && pets['Penguin-CottonCandyPink']
+      && pets['Penguin-Desert']
+      && pets['Penguin-Golden']
+      && pets['Penguin-Red']
+      && pets['Penguin-Shade']
+      && pets['Penguin-Skeleton']
+      && pets['Penguin-White']
+      && pets['Penguin-Zombie']
+      && pets['Falcon-Base']
+      && pets['Falcon-CottonCandyBlue']
+      && pets['Falcon-CottonCandyPink']
+      && pets['Falcon-Desert']
+      && pets['Falcon-Golden']
+      && pets['Falcon-Red']
+      && pets['Falcon-Shade']
+      && pets['Falcon-Skeleton']
+      && pets['Falcon-White']
+      && pets['Falcon-Zombie']
+      && pets['Peacock-Base']
+      && pets['Peacock-CottonCandyBlue']
+      && pets['Peacock-CottonCandyPink']
+      && pets['Peacock-Desert']
+      && pets['Peacock-Golden']
+      && pets['Peacock-Red']
+      && pets['Peacock-Shade']
+      && pets['Peacock-Skeleton']
+      && pets['Peacock-White']
+      && pets['Peacock-Zombie']) {
+        set['achievements.dinosaurDynasty'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    // migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-04-15') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2023/20230718_summer_splash_orcas.js

@@ -0,0 +1,79 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20230718_summer_splash_orcas';
+
+import { model as User } from '../../../website/server/models/user';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  const set = { migration: MIGRATION_NAME };
+  const push = {};
+
+  if (user && user.items && user.items.pets && typeof user.items.pets['Orca-Base'] !== 'undefined') {
+    return;
+  } else if (user && user.items && user.items.mounts && typeof user.items.mounts['Orca-Base'] !== 'undefined') {
+    set['items.pets.Orca-Base'] = 5;
+    push.notifications = {
+      type: 'ITEM_RECEIVED',
+      data: {
+        icon: 'notif_orca_pet',
+        title: 'Orcas for Summer Splash!',
+        text: 'To celebrate Summer Splash, we\'ve given you an Orca Pet!',
+        destination: 'stable',
+      },
+      seen: false,
+    };
+  } else {
+    set['items.mounts.Orca-Base'] = true;
+    push.notifications = {
+      type: 'ITEM_RECEIVED',
+      data: {
+        icon: 'notif_orca_mount',
+        title: 'Orcas for Summer Splash!',
+        text: 'To celebrate Summer Splash, we\'ve given you an Orca Mount!',
+        destination: 'stable',
+      },
+      seen: false,
+    };
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await user.updateOne({ $set: set, $push: push }).exec();
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: {$ne: MIGRATION_NAME},
+    'auth.timestamps.loggedin': {$gt: new Date('2023-06-18')},
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1],
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2023/20230731_naming_day.js

@@ -0,0 +1,155 @@
+/* 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';
+
+const progressCount = 1000;
+let count = 0;
+
+async function updateUser (user) {
+  count++;
+
+  let set;
+  let push;
+  const inc = {
+    'items.food.Cake_Base': 1,
+    'items.food.Cake_CottonCandyBlue': 1,
+    'items.food.Cake_CottonCandyPink': 1,
+    'items.food.Cake_Desert': 1,
+    'items.food.Cake_Golden': 1,
+    'items.food.Cake_Red': 1,
+    'items.food.Cake_Shade': 1,
+    'items.food.Cake_Skeleton': 1,
+    'items.food.Cake_White': 1,
+    'items.food.Cake_Zombie': 1,
+    'achievements.habiticaDays': 1,
+  };
+
+  if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.back_special_namingDay2020 !== 'undefined') {
+    set = { migration: MIGRATION_NAME };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_cake',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you some cake!',
+          destination: '/inventory/items',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.body_special_namingDay2018 !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.back_special_namingDay2020': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_back',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Tail and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.gear && user.items.gear.owned && typeof user.items.gear.owned.head_special_namingDay2017 !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.body_special_namingDay2018': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_body',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Cloak and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.pets && typeof user.items.pets['Gryphon-RoyalPurple'] !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.gear.owned.head_special_namingDay2017': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_head',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Helm and cake!',
+          destination: '/inventory/equipment',
+        },
+        seen: false,
+      },
+    };
+  } else if (user && user.items && user.items.mounts && typeof user.items.mounts['Gryphon-RoyalPurple'] !== 'undefined') {
+    set = { migration: MIGRATION_NAME, 'items.pets.Gryphon-RoyalPurple': 5 };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_pet',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Pet and cake!',
+          destination: '/inventory/stable',
+        },
+        seen: false,
+      },
+    };
+  } else {
+    set = { migration: MIGRATION_NAME, 'items.mounts.Gryphon-RoyalPurple': true };
+    push = {
+      notifications: {
+        type: 'ITEM_RECEIVED',
+        data: {
+          icon: 'notif_namingDay_mount',
+          title: 'Happy Naming Day!',
+          text: 'To celebrate the day we became Habitica, we’ve awarded you a Royal Purple Gryphon Mount and cake!',
+          destination: '/inventory/stable',
+        },
+        seen: false,
+      },
+    };
+  }
+
+  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();
+  }
+}
+
+export default async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2023-07-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

package.json

@@ -1,12 +1,12 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.268.1",
+  "version": "4.277.4",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/register": "^7.18.9",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/register": "^7.22.5",
     "@google-cloud/trace-agent": "^7.1.2",
     "@parse/node-apn": "^5.1.3",
     "@slack/webhook": "^6.1.0",
@@ -14,9 +14,9 @@
     "amazon-payments": "^0.2.9",
     "amplitude": "^6.0.0",
     "apidoc": "^0.54.0",
-    "apple-auth": "^1.0.7",
+    "apple-auth": "^1.0.9",
     "bcrypt": "^5.1.0",
-    "body-parser": "^1.20.1",
+    "body-parser": "^1.20.2",
     "bootstrap": "^4.6.0",
     "compression": "^1.7.4",
     "cookie-session": "^2.0.0",
@@ -42,7 +42,7 @@
     "image-size": "^1.0.2",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^5.0.0",
-    "jsonwebtoken": "^8.5.1",
+    "jsonwebtoken": "^9.0.0",
     "jwks-rsa": "^2.1.5",
     "lodash": "^4.17.21",
     "merge-stream": "^2.0.0",
@@ -67,16 +67,16 @@
     "remove-markdown": "^0.5.0",
     "rimraf": "^3.0.2",
     "short-uuid": "^4.2.2",
-    "stripe": "^11.10.0",
-    "superagent": "^8.0.6",
+    "stripe": "^12.9.0",
+    "superagent": "^8.0.9",
     "universal-analytics": "^0.5.3",
     "useragent": "^2.1.9",
     "uuid": "^9.0.0",
     "validator": "^13.9.0",
     "vinyl-buffer": "^1.0.1",
-    "winston": "^3.8.2",
+    "winston": "^3.9.0",
     "winston-loggly-bulk": "^3.2.1",
-    "xml2js": "^0.4.23"
+    "xml2js": "^0.6.0"
   },
   "private": true,
   "engines": {
@@ -110,7 +110,7 @@
     "apidoc": "gulp apidoc"
   },
   "devDependencies": {
-    "axios": "^1.2.2",
+    "axios": "^1.3.6",
     "chai": "^4.3.7",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
@@ -122,7 +122,7 @@
     "monk": "^7.3.4",
     "require-again": "^2.0.0",
     "run-rs": "^0.7.7",
-    "sinon": "^15.0.1",
+    "sinon": "^15.1.2",
     "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"
   },

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

@@ -748,9 +748,19 @@ describe('payments/index', () => {
       });
 
       it('does not add to plans.consecutive.offset if 1 month subscription', async () => {
+        data.sub.key = 'basic_earned';
         await api.createSubscription(data);
 
-        expect(user.purchased.plan.extraMonths).to.eql(0);
+        expect(user.purchased.plan.consecutive.offset).to.eql(0);
+      });
+
+      it('resets plans.consecutive.offset if 1 month subscription', async () => {
+        user.purchased.plan.consecutive.offset = 1;
+        await user.save();
+        data.sub.key = 'basic_earned';
+        await api.createSubscription(data);
+
+        expect(user.purchased.plan.consecutive.offset).to.eql(0);
       });
 
       it('adds 5 to plan.consecutive.gemCapExtra for 3 month block', async () => {

test/api/unit/middlewares/cronMiddleware.js

@@ -242,7 +242,7 @@ describe('cron middleware', () => {
 
     sandbox.spy(cronLib, 'recoverCron');
 
-    sandbox.stub(User, 'update')
+    sandbox.stub(User, 'updateOne')
       .withArgs({
         _id: user._id,
         $or: [

test/api/unit/models/group.test.js

@@ -1732,7 +1732,7 @@ describe('Group Model', () => {
         });
 
         it('updates participting members (not including user)', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateMany');
 
           await party.startQuest(nonParticipatingMember);
 
@@ -1740,7 +1740,7 @@ describe('Group Model', () => {
             questLeader._id, participatingMember._id, sleepingParticipatingMember._id,
           ];
 
-          expect(User.update).to.be.calledWith(
+          expect(User.updateMany).to.be.calledWith(
             { _id: { $in: members } },
             {
               $set: {
@@ -1753,11 +1753,11 @@ describe('Group Model', () => {
         });
 
         it('updates non-user quest leader and decrements quest scroll', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateOne');
 
           await party.startQuest(participatingMember);
 
-          expect(User.update).to.be.calledWith(
+          expect(User.updateOne).to.be.calledWith(
             { _id: questLeader._id },
             {
               $inc: {
@@ -1819,29 +1819,29 @@ describe('Group Model', () => {
         };
 
         it('doesn\'t retry successful operations', async () => {
-          sandbox.stub(User, 'update').returns(successfulMock);
+          sandbox.stub(User, 'updateOne').returns(successfulMock);
 
           await party.finishQuest(quest);
 
-          expect(User.update).to.be.calledThrice;
+          expect(User.updateOne).to.be.calledThrice;
         });
 
         it('stops retrying when a successful update has occurred', async () => {
-          const updateStub = sandbox.stub(User, 'update');
+          const updateStub = sandbox.stub(User, 'updateOne');
           updateStub.onCall(0).returns(failedMock);
           updateStub.returns(successfulMock);
 
           await party.finishQuest(quest);
 
-          expect(User.update.callCount).to.equal(4);
+          expect(User.updateOne.callCount).to.equal(4);
         });
 
         it('retries failed updates at most five times per user', async () => {
-          sandbox.stub(User, 'update').returns(failedMock);
+          sandbox.stub(User, 'updateOne').returns(failedMock);
 
           await expect(party.finishQuest(quest)).to.eventually.be.rejected;
 
-          expect(User.update.callCount).to.eql(15); // for 3 users
+          expect(User.updateOne.callCount).to.eql(15); // for 3 users
         });
       });
 
@@ -2088,17 +2088,17 @@ describe('Group Model', () => {
 
       context('Party quests', () => {
         it('updates participating members with rewards', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateOne');
           await party.finishQuest(quest);
 
-          expect(User.update).to.be.calledThrice;
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledThrice;
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: questLeader._id,
           });
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: participatingMember._id,
           });
-          expect(User.update).to.be.calledWithMatch({
+          expect(User.updateOne).to.be.calledWithMatch({
             _id: sleepingParticipatingMember._id,
           });
         });
@@ -2173,11 +2173,11 @@ describe('Group Model', () => {
         });
 
         it('updates all users with rewards', async () => {
-          sandbox.spy(User, 'update');
+          sandbox.spy(User, 'updateMany');
           await party.finishQuest(tavernQuest);
 
-          expect(User.update).to.be.calledOnce;
-          expect(User.update).to.be.calledWithMatch({});
+          expect(User.updateMany).to.be.calledOnce;
+          expect(User.updateMany).to.be.calledWithMatch({});
         });
 
         it('sets quest completed to the world quest key', async () => {

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

@@ -2,7 +2,6 @@ import { v4 as generateUUID } from 'uuid';
 import {
   generateUser,
   createAndPopulateGroup,
-  checkExistence,
   translate as t,
 } from '../../../../helpers/api-integration/v3';
 
@@ -258,47 +257,6 @@ describe('POST /group/:groupId/join', () => {
         await expect(user.get('/user')).to.eventually.have.nested.property('items.quests.basilist', 2);
       });
 
-      it('deletes previous party where the user was the only member', async () => {
-        const userToInvite = await generateUser();
-        const oldParty = await userToInvite.post('/groups', { // add user to a party
-          name: 'Another Test Party',
-          type: 'party',
-        });
-
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(true);
-        await user.post(`/groups/${party._id}/invite`, {
-          uuids: [userToInvite._id],
-        });
-        await userToInvite.post(`/groups/${party._id}/join`);
-
-        await expect(user.get('/user')).to.eventually.have.nested.property('party._id', party._id);
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(false);
-      });
-
-      it('does not allow user to leave a party if a quest was active and they were the only member', async () => {
-        const userToInvite = await generateUser();
-        const oldParty = await userToInvite.post('/groups', { // add user to a party
-          name: 'Another Test Party',
-          type: 'party',
-        });
-
-        await userToInvite.update({
-          [`items.quests.${PET_QUEST}`]: 1,
-        });
-        await userToInvite.post(`/groups/${oldParty._id}/quests/invite/${PET_QUEST}`);
-
-        await expect(checkExistence('groups', oldParty._id)).to.eventually.equal(true);
-        await user.post(`/groups/${party._id}/invite`, {
-          uuids: [userToInvite._id],
-        });
-
-        await expect(userToInvite.post(`/groups/${party._id}/join`)).to.eventually.be.rejected.and.eql({
-          code: 401,
-          error: 'NotAuthorized',
-          message: t('messageCannotLeaveWhileQuesting'),
-        });
-      });
-
       it('invites joining member to active quest', async () => {
         await user.update({
           [`items.quests.${PET_QUEST}`]: 1,

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

@@ -1,6 +1,7 @@
 import { v4 as generateUUID } from 'uuid';
 import nconf from 'nconf';
 import {
+  createAndPopulateGroup,
   generateUser,
   generateGroup,
   translate as t,
@@ -581,20 +582,7 @@ describe('Post /groups/:groupId/invite', () => {
         });
     });
 
-    it('allow inviting a user to a party if they are partying solo', async () => {
-      const userToInvite = await generateUser();
-      await userToInvite.post('/groups', { // add user to a party
-        name: 'Another Test Party',
-        type: 'party',
-      });
-
-      await inviter.post(`/groups/${party._id}/invite`, {
-        uuids: [userToInvite._id],
-      });
-      expect((await userToInvite.get('/user')).invitations.parties[0].id).to.equal(party._id);
-    });
-
-    it('allow inviting a user to 2 different parties', async () => {
+    it('allows inviting a user to 2 different parties', async () => {
       // Create another inviter
       const inviter2 = await generateUser();
 
@@ -635,29 +623,48 @@ describe('Post /groups/:groupId/invite', () => {
       });
       expect((await userToInvite.get('/user')).invitations.parties[0].id).to.equal(party._id);
     });
+  });
+
+  describe('party size limits', () => {
+    let party;
+    let partyLeader;
+
+    beforeEach(async () => {
+      group = await createAndPopulateGroup({
+        groupDetails: {
+          name: 'Test Party',
+          type: 'party',
+          privacy: 'private',
+        },
+        // Generate party with 20 members
+        members: PARTY_LIMIT_MEMBERS - 10,
+      });
+      party = group.group;
+      partyLeader = group.groupLeader;
+    });
 
     it('allows 30 members in a party', async () => {
       const invitesToGenerate = [];
-      // Generate 29 users to invite (29 + leader = 30 members)
-      for (let i = 0; i < PARTY_LIMIT_MEMBERS - 1; i += 1) {
+      // Generate 10 new invites
+      for (let i = 1; i < 10; i += 1) {
         invitesToGenerate.push(generateUser());
       }
       const generatedInvites = await Promise.all(invitesToGenerate);
       // Invite users
-      expect(await inviter.post(`/groups/${party._id}/invite`, {
+      expect(await partyLeader.post(`/groups/${party._id}/invite`, {
         uuids: generatedInvites.map(invite => invite._id),
       })).to.be.an('array');
     }).timeout(10000);
 
-    it('does not allow 30+ members in a party', async () => {
+    it('does not allow >30 members in a party', async () => {
       const invitesToGenerate = [];
-      // Generate 30 users to invite (30 + leader = 31 members)
-      for (let i = 0; i < PARTY_LIMIT_MEMBERS; i += 1) {
+      // Generate 11 invites
+      for (let i = 1; i < 11; i += 1) {
         invitesToGenerate.push(generateUser());
       }
       const generatedInvites = await Promise.all(invitesToGenerate);
       // Invite users
-      await expect(inviter.post(`/groups/${party._id}/invite`, {
+      await expect(partyLeader.post(`/groups/${party._id}/invite`, {
         uuids: generatedInvites.map(invite => invite._id),
       }))
         .to.eventually.be.rejected.and.eql({

test/api/v4/user/POST-user_class_cast_spellId.test.js

@@ -202,18 +202,86 @@ describe('POST /user/class/cast/:spellId', () => {
     await group.groupLeader.post('/user/class/cast/mpheal');
 
     promises = [];
+    promises.push(group.groupLeader.sync());
     promises.push(group.members[0].sync());
     promises.push(group.members[1].sync());
     promises.push(group.members[2].sync());
     promises.push(group.members[3].sync());
     await Promise.all(promises);
 
+    expect(group.groupLeader.stats.mp).to.be.equal(170); // spell caster
     expect(group.members[0].stats.mp).to.be.greaterThan(0); // warrior
     expect(group.members[1].stats.mp).to.equal(0); // wizard
     expect(group.members[2].stats.mp).to.be.greaterThan(0); // rogue
     expect(group.members[3].stats.mp).to.be.greaterThan(0); // healer
   });
 
+  const spellList = [
+    {
+      className: 'warrior',
+      spells: [['smash', 'task'], ['defensiveStance'], ['valorousPresence'], ['intimidate']],
+    },
+    {
+      className: 'wizard',
+      spells: [['fireball', 'task'], ['mpheal'], ['earth'], ['frost']],
+    },
+    {
+      className: 'healer',
+      spells: [['heal'], ['brightness'], ['protectAura'], ['healAll']],
+    },
+    {
+      className: 'rogue',
+      spells: [['pickPocket', 'task'], ['backStab', 'task'], ['toolsOfTrade'], ['stealth']],
+    },
+  ];
+
+  spellList.forEach(async habitClass => {
+    describe(`For a ${habitClass.className}`, async () => {
+      habitClass.spells.forEach(async spell => {
+        describe(`Using ${spell[0]}`, async () => {
+          it('Deducts MP from spell caster', async () => {
+            const { groupLeader } = await createAndPopulateGroup({
+              groupDetails: { type: 'party', privacy: 'private' },
+              members: 3,
+            });
+            await groupLeader.update({
+              'stats.mp': 200, 'stats.class': habitClass.className, 'stats.lvl': 20, 'stats.hp': 40,
+            });
+            // need this for task spells and for stealth
+            const task = await groupLeader.post('/tasks/user', {
+              text: 'test habit',
+              type: 'daily',
+            });
+            if (spell.length === 2 && spell[1] === 'task') {
+              await groupLeader.post(`/user/class/cast/${spell[0]}?targetId=${task._id}`);
+            } else {
+              await groupLeader.post(`/user/class/cast/${spell[0]}`);
+            }
+            await groupLeader.sync();
+            expect(groupLeader.stats.mp).to.be.lessThan(200);
+          });
+          it('works without a party', async () => {
+            await user.update({
+              'stats.mp': 200, 'stats.class': habitClass.className, 'stats.lvl': 20, 'stats.hp': 40,
+            });
+            // need this for task spells and for stealth
+            const task = await user.post('/tasks/user', {
+              text: 'test habit',
+              type: 'daily',
+            });
+            if (spell.length === 2 && spell[1] === 'task') {
+              await user.post(`/user/class/cast/${spell[0]}?targetId=${task._id}`);
+            } else {
+              await user.post(`/user/class/cast/${spell[0]}`);
+            }
+            await user.sync();
+            expect(user.stats.mp).to.be.lessThan(200);
+          });
+        });
+      });
+    });
+  });
+
   it('cast bulk', async () => {
     let { group, groupLeader } = await createAndPopulateGroup({ // eslint-disable-line prefer-const
       groupDetails: { type: 'party', privacy: 'private' },

website/client/.eslintrc.js

@@ -14,6 +14,8 @@ module.exports = {
     // TODO find a way to let eslint understand webpack aliases
     'import/no-unresolved': 'off',
     'import/extensions': 'off',
+    'vue/component-tags-order': 'off',
+    'vue/no-mutating-props': 'off',
     'vue/no-v-html': 'off',
     'vue/html-self-closing': ['error', {
       html: {

website/client/package-lock.json

@@ -1842,9 +1842,9 @@
       }
     },
     "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.20.7.tgz",
-      "integrity": "sha512-T+A7b1kfjtRM51ssoOfS1+wbyCVqorfyZhT99TvxxLMirPShD8CzKMRepMlCBGM5RpHMbn8s+5MMHnPstJH6mQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+      "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
@@ -1870,9 +1870,9 @@
           "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w=="
         },
         "@babel/types": {
-          "version": "7.20.7",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
-          "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.2.tgz",
+          "integrity": "sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==",
           "requires": {
             "@babel/helper-string-parser": "^7.19.4",
             "@babel/helper-validator-identifier": "^7.19.1",
@@ -13321,14 +13321,12 @@
         "emojis-list": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-          "optional": true
+          "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
         },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "optional": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "is-fullwidth-code-point": {
           "version": "3.0.0",
@@ -13339,7 +13337,6 @@
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
           "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "optional": true,
           "requires": {
             "big.js": "^5.2.2",
             "emojis-list": "^3.0.0",
@@ -13381,7 +13378,6 @@
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "optional": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -13390,7 +13386,6 @@
           "version": "npm:vue-loader@16.8.3",
           "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
           "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "optional": true,
           "requires": {
             "chalk": "^4.1.0",
             "hash-sum": "^2.0.0",
@@ -13401,7 +13396,6 @@
               "version": "4.1.2",
               "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
               "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-              "optional": true,
               "requires": {
                 "ansi-styles": "^4.1.0",
                 "supports-color": "^7.1.0"
@@ -16907,9 +16901,9 @@
       }
     },
     "core-js": {
-      "version": "3.27.2",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
-      "integrity": "sha512-9ashVQskuh5AZEZ1JdQWp1GqSoC1e1G87MzRqg2gIfVAQ7Qn9K+uFj8EcniUFA4P2NLZfV+TOlX1SzoKfo+s7w=="
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.0.tgz",
+      "integrity": "sha512-NIp2TQSGfR6ba5aalZD+ZQ1fSxGhDo/s1w0nx3RYzf2pnJxt7YynxFlFScP6eV7+GZsKO95NSjGxyJsU3DZgeQ=="
     },
     "core-js-compat": {
       "version": "3.11.0",
@@ -17958,9 +17952,9 @@
       }
     },
     "dompurify": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.3.tgz",
-      "integrity": "sha512-q6QaLcakcRjebxjg8/+NP+h0rPfatOgOzc46Fst9VAA3jF2ApfKBNKMzdP4DYTqtUMXSCd5pRS/8Po/OmoCHZQ=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.3.tgz",
+      "integrity": "sha512-axQ9zieHLnAnHh0sfAamKYiqXMJAVwu+LM/alQ7WDagoWessyWvMSFyW65CqF3owufNu8HBcE4cM2Vflu7YWcQ=="
     },
     "domutils": {
       "version": "1.7.0",
@@ -21077,6 +21071,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
+    "immutable": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
+      "integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg=="
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -21437,9 +21436,9 @@
       "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
     },
     "intro.js": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-6.0.0.tgz",
-      "integrity": "sha512-ZUiR6BoLSvPSlLG0boewnWVgji1fE1gBvP/pyw5pgCKXEDQz1mMeUxarggClPNs71UTq364LwSk9zxz17A9gaQ=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-7.0.1.tgz",
+      "integrity": "sha512-1oqz6aOz9cGQ3CrtVYhCSo6AkjnXUn302kcIWLaZ3TI4kKssRXDwDSz4VRoGcfC1jN+WfaSJXRBrITz+QVEBzg=="
     },
     "invariant": {
       "version": "2.2.4",
@@ -22019,9 +22018,9 @@
       }
     },
     "jquery": {
-      "version": "3.6.3",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.3.tgz",
-      "integrity": "sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg=="
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz",
+      "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ=="
     },
     "js-message": {
       "version": "1.0.5",
@@ -27367,17 +27366,19 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.34.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
-      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
+      "version": "1.63.4",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.63.4.tgz",
+      "integrity": "sha512-Sx/+weUmK+oiIlI+9sdD0wZHsqpbgQg8wSwSnGBjwb5GwqFhYNwwnI+UWZtLjKvKyFlKkatRK235qQ3mokyPoQ==",
       "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "dependencies": {
         "anymatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-          "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+          "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
           "requires": {
             "normalize-path": "^3.0.0",
             "picomatch": "^2.0.4"
@@ -27397,18 +27398,18 @@
           }
         },
         "chokidar": {
-          "version": "3.5.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-          "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+          "version": "3.5.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+          "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
           "requires": {
-            "anymatch": "~3.1.1",
+            "anymatch": "~3.1.2",
             "braces": "~3.0.2",
-            "fsevents": "~2.3.1",
-            "glob-parent": "~5.1.0",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
             "is-binary-path": "~2.1.0",
             "is-glob": "~4.0.1",
             "normalize-path": "~3.0.0",
-            "readdirp": "~3.5.0"
+            "readdirp": "~3.6.0"
           }
         },
         "fill-range": {
@@ -27447,9 +27448,9 @@
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
         },
         "readdirp": {
-          "version": "3.5.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-          "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
           "requires": {
             "picomatch": "^2.2.1"
           }
@@ -27801,9 +27802,9 @@
       }
     },
     "smartbanner.js": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.19.1.tgz",
-      "integrity": "sha512-x3alFTlk6pLuqrm9PrYQv1E+86CrEIgPf/KJ+nP5342BmOWstbdR8OwD3TPmM56zHQm4MEr/eoqbEcfTKdvdKw=="
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/smartbanner.js/-/smartbanner.js-1.19.2.tgz",
+      "integrity": "sha512-hwcGNp5Hza5PJHTmqP6H8q0XBYhloIQyJgdzv0ldz3HQSeEuKB2riVraQXdKuquE6ZU/0M0yubno53xJ/ZiQQg=="
     },
     "snapdragon": {
       "version": "0.8.2",
@@ -28175,9 +28176,9 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
     "stopword": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/stopword/-/stopword-2.0.7.tgz",
-      "integrity": "sha512-s+uLKAxrproCLrq0Wcd3JAIjlJLx6l80b2Rzt0u8+ra5SzGkHnNG8PS3DfGmYk2TrKePDVLL4SdKYwKpgSLc+w=="
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/stopword/-/stopword-2.0.8.tgz",
+      "integrity": "sha512-btlEC2vEuhCuvshz99hSGsY8GzaP5qzDPQm56j6rR/R38p8xdsOXgU5a6tIgvU/4hcCta1Vlo/2FVXA9m0f8XA=="
     },
     "store2": {
       "version": "2.10.0",
@@ -30271,9 +30272,9 @@
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
     "uuid-browser": {
       "version": "3.1.0",

website/client/package.json

@@ -32,8 +32,8 @@
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
     "chai": "^4.3.7",
-    "core-js": "^3.27.2",
-    "dompurify": "^2.4.3",
+    "core-js": "^3.31.0",
+    "dompurify": "^3.0.3",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
@@ -41,20 +41,20 @@
     "habitica-markdown": "^3.0.0",
     "hellojs": "^1.20.0",
     "inspectpack": "^4.7.1",
-    "intro.js": "^6.0.0",
-    "jquery": "^3.6.3",
+    "intro.js": "^7.0.1",
+    "jquery": "^3.7.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "nconf": "^0.12.0",
-    "sass": "^1.34.0",
+    "sass": "^1.63.4",
     "sass-loader": "^8.0.2",
-    "smartbanner.js": "^1.19.1",
-    "stopword": "^2.0.7",
+    "smartbanner.js": "^1.19.2",
+    "stopword": "^2.0.8",
     "svg-inline-loader": "^0.8.2",
     "svg-url-loader": "^7.1.1",
     "svgo": "^1.3.2",
     "svgo-loader": "^2.2.1",
-    "uuid": "^8.3.2",
+    "uuid": "^9.0.0",
     "validator": "^13.9.0",
     "vue": "^2.7.10",
     "vue-cli-plugin-storybook": "2.1.0",
@@ -66,6 +66,6 @@
     "webpack": "^4.46.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0"
   }
 }

website/client/src/app.vue

@@ -41,6 +41,7 @@
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
       <template v-else>
         <template v-if="isUserLoaded">
+          <chat-banner />
           <damage-paused-banner />
           <gems-promo-banner />
           <gift-promo-banner />
@@ -159,6 +160,7 @@ 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';
@@ -198,6 +200,7 @@ export default {
     AppHeader,
     AppFooter,
     birthdayModal,
+    ChatBanner,
     DamagePausedBanner,
     GemsPromoBanner,
     GiftPromoBanner,

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

@@ -24,9 +24,9 @@
   }
 }
 
-.icon-16 {
-  width: 16px;
-  height: 16px;
+.icon-10 {
+  width: 10px;
+  height: 10px;
 }
 
 .icon-12 {
@@ -34,21 +34,26 @@
   height: 12px;
 }
 
+.icon-16 {
+  width: 16px;
+  height: 16px;
+}
+
 .icon-24 {
   width: 24px;
   height: 24px;
 }
 
+.icon-32 {
+  width: 32px;
+  height: 32px;
+}
+
 .icon-48 {
   width: 48px;
   height: 48px;
 }
 
-.icon-10 {
-  width: 10px;
-  height: 10px;
-}
-
 .inline {
   display: inline-block;
 }

website/client/src/assets/svg/sync-2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path id="b" d="m10,6h6V0h-2v2.72C12.49.99,10.3,0,8,0,3.59,0,0,3.59,0,8s3.59,8,8,8c2.69,0,5.2-1.35,6.68-3.6l-1.67-1.1c-1.11,1.69-2.99,2.71-5.01,2.7-3.31,0-6-2.69-6-6s2.69-6,6-6c1.72,0,3.33.74,4.46,2h-2.46v2Z" fill-rule="evenodd"/></svg>

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

@@ -17,10 +17,18 @@
           Payment schedule ("basic-earned" is monthly):
           <strong>{{ hero.purchased.plan.planId }}</strong>
         </div>
+        <div v-if="hero.purchased.plan.planId == 'group_plan_auto'">
+          Group plan ID:
+          <strong>{{ hero.purchased.plan.owner }}</strong>
+        </div>
         <div v-if="hero.purchased.plan.dateCreated">
           Creation date:
           <strong>{{ dateFormat(hero.purchased.plan.dateCreated) }}</strong>
         </div>
+        <div v-if="hero.purchased.plan.dateCurrentTypeCreated">
+          Start date for current subscription type:
+          <strong>{{ dateFormat(hero.purchased.plan.dateCurrentTypeCreated) }}</strong>
+        </div>
         <div>
           Termination date:
           <strong
@@ -46,9 +54,16 @@
           Perk offset months:
           <strong>{{ hero.purchased.plan.consecutive.offset }}</strong>
         </div>
-        <div>
+        <div class="form-inline">
           Perk month count:
-          <strong>{{ hero.purchased.plan.perkMonthCount }}</strong>
+          <input
+              v-model="hero.purchased.plan.perkMonthCount"
+              class="form-control"
+              type="number"
+              min="0"
+              max="2"
+              step="1"
+            >
         </div>
         <div>
           Next Mystic Hourglass:

website/client/src/components/creatorIntro.vue

@@ -183,10 +183,8 @@
           <div
             v-for="bg in backgroundShopSets[0].items"
             :key="bg.key"
+            :id="bg.key"
             class="col-2"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
@@ -195,6 +193,13 @@
             >
               <div class="small-rectangle"></div>
             </div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
         <div
@@ -211,16 +216,21 @@
             <div
               v-for="bg in backgroundShopSets[2].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="unlock('background.' + bg.key)"
             >
               <div
                 class="background"
                 :class="`background_${bg.key}`"
               ></div>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -236,10 +246,8 @@
             <div
               v-for="bg in backgroundShopSets[1].items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
             >
@@ -270,6 +278,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
           </div>
         </div>
@@ -302,10 +317,8 @@
             <div
               v-for="bg in set.items"
               :key="bg.key"
+              :id="bg.key"
               class="col-4 text-center customize-option background-button"
-              :popover-title="bg.text"
-              :popover="bg.notes"
-              popover-trigger="mouseenter"
               @click="!user.purchased.background[bg.key]
                 ? backgroundSelected(bg) : unlock('background.' + bg.key)"
             >
@@ -336,6 +349,13 @@
                   :pinned="isBackgroundPinned(bg)"
                 />
               </span>
+              <b-popover
+                :target="bg.key"
+                triggers="hover focus"
+                placement="bottom"
+                :prevent-overflow="false"
+                :content="bg.notes"
+              />
             </div>
             <div
               v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
@@ -358,16 +378,21 @@
           <div
             v-for="(bg) in ownedBackgrounds"
             :key="bg.key"
+            :id="bg.key"
             class="col-4 text-center customize-option background-button"
-            :popover-title="bg.text"
-            :popover="bg.notes"
-            popover-trigger="mouseenter"
             @click="unlock('background.' + bg.key)"
           >
             <div
               class="background"
               :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
             ></div>
+            <b-popover
+              :target="bg.key"
+              triggers="hover focus"
+              placement="bottom"
+              :prevent-overflow="false"
+              :content="bg.notes"
+            />
           </div>
         </div>
       </div>

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

@@ -11,9 +11,12 @@
       <div class="quest_screen"></div>
       <div class="row heading">
         <div class="col-12 text-center pr-5 pl-5">
-          <h2 v-once>
+          <h1
+            v-once
+            class="mb-2"
+          >
             {{ $t('playInPartyTitle') }}
-          </h2>
+          </h1>
           <p
             v-once
             class="mb-4"
@@ -22,67 +25,91 @@
           </p>
           <button
             v-once
-            class="btn btn-primary"
+            class="btn btn-primary px-4 mb-2"
             @click="createParty()"
           >
             {{ $t('createParty') }}
           </button>
         </div>
       </div>
+      <close-x
+        @close="close()"
+      />
     </div>
     <div class="row grey-row">
-      <div class="col-12 text-center">
+      <div class="col-12 text-center px-0">
         <div class="join-party"></div>
-        <h2 v-once>
-          {{ $t('wantToJoinPartyTitle') }}
-        </h2>
-        <p v-html="$t('wantToJoinPartyDescription')"></p>
-        <div
-          class="form-group"
-          @click="copyUsername"
+        <h1
+          v-once
+          class="mb-2"
         >
-          <div class="d-flex align-items-center">
-            <label
-              v-once
-              class="mr-3"
-            >{{ $t('username') }}</label>
-            <div class="flex-grow-1">
-              <div class="input-group-prepend input-group-text">
-                @
-                <div class="text">
-                  {{ user.auth.local.username }}
-                </div>
-                <div
-                  class="svg-icon copy-icon"
-                  v-html="icons.copy"
-                ></div>
-                <div
-                  v-once
-                  class="small"
-                >
-                  {{ $t('copy') }}
-                </div>
-              </div>
+          {{ $t('wantToJoinPartyTitle') }}
+        </h1>
+        <p
+          v-once
+          class="mb-4"
+          v-html="$t('partyFinderDescription')"
+        >
+        </p>
+        <div
+          v-if="seeking"
+        >
+          <div
+            class="green-bar mb-3"
+          >
+            {{ $t('currentlyLookingForParty') }}
+          </div>
+          <div class="d-flex justify-content-center">
+            <div
+              class="red-link"
+              @click="seekParty()"
+            >
+              {{ $t('leave') }}
             </div>
           </div>
         </div>
+        <button
+          v-else
+          class="btn btn-primary px-4 mt-2 mb-1"
+          @click="seekParty()"
+        >
+          {{ $t('lookForParty') }}
+        </button>
       </div>
     </div>
   </b-modal>
 </template>
 
-<style>
-  #create-party-modal .modal-body {
-    padding: 0rem 0.75rem;
-  }
+<style lang="scss">
+  #create-party-modal {
+    display: flex !important;
+    overflow-y: hidden;
 
-  #create-party-modal .modal-dialog {
-    width: 35.75rem;
-  }
+    @media (max-height: 770px) {
+      overflow-y: auto;
+    }
 
-  #create-party-modal .modal-header {
-    padding: 0;
-    border-bottom: 0px;
+    .modal-body {
+      padding: 0rem 0.75rem;
+    }
+
+    .modal-content {
+      border-radius: 8px;
+    }
+
+    .modal-dialog {
+      width: 566px;
+      margin: auto;
+
+      @media (max-height: 826px) {
+        margin-top: 56px;
+      }
+    }
+
+    .modal-header {
+      padding: 0;
+      border-bottom: 0px;
+    }
   }
 </style>
 
@@ -107,15 +134,27 @@
     cursor: pointer;
   }
 
+  .green-bar {
+    height: 32px;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 1.71;
+    text-align: center;
+    color: $green-1;
+    background-color: $green-100;
+    border-radius: 2px;
+    padding: 4px 0px 4px 0px;
+  }
+
   .grey-row {
     background-color: $gray-700;
     color: #4e4a57;
     padding: 2em;
-    border-radius: 0px 0px 2px 2px;
+    border-radius: 0px 0px 8px 8px;
   }
 
-  h2 {
-    color: $gray-100;
+  h1 {
+    color: $purple-300;
   }
 
   .header-wrap {
@@ -132,10 +171,6 @@
       border-radius: 2px 2px 0 0;
       image-rendering: optimizequality;
     }
-
-    h2 {
-      color: $purple-200;
-    }
   }
 
   .heading {
@@ -182,6 +217,21 @@
     margin: 0.75rem auto 0.75rem 0.25rem;
   }
 
+  p {
+    line-height: 1.71;
+  }
+
+  .red-link {
+    cursor: pointer;
+    font-size: 14px;
+    line-height: 1.71;
+    text-align: center;
+    color: $maroon-50;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   .small {
     color: $gray-200;
     margin: auto 0.5rem auto 0.25rem;
@@ -192,21 +242,29 @@
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
+import closeX from '../ui/closeX';
 
 import copyIcon from '@/assets/svg/copy.svg';
 
 export default {
+  components: {
+    closeX,
+  },
   mixins: [notifications],
   data () {
     return {
       icons: Object.freeze({
         copy: copyIcon,
       }),
+      seeking: false,
     };
   },
   computed: {
     ...mapState({ user: 'user.data' }),
   },
+  mounted () {
+    this.seeking = Boolean(this.user.party.seeking);
+  },
   methods: {
     async createParty () {
       const group = {
@@ -223,7 +281,10 @@ export default {
       });
 
       this.$root.$emit('bv::hide::modal', 'create-party-modal');
-      this.$router.push('/party');
+      await this.$router.push('/party');
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'create-party-modal');
     },
     copyUsername () {
       if (navigator.clipboard) {
@@ -238,6 +299,12 @@ export default {
       }
       this.text(this.$t('usernameCopied'));
     },
+    seekParty () {
+      this.$store.dispatch('user:set', {
+        'party.seeking': !this.user.party.seeking ? new Date() : null,
+      });
+      this.seeking = !this.seeking;
+    },
   },
 };
 </script>

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

@@ -542,7 +542,8 @@ export default {
       await this.$store.dispatch('guilds:leave', data);
 
       if (this.isParty) {
-        this.$router.push({ name: 'tasks' });
+        await this.$router.push({ name: 'tasks' });
+        window.location.reload(true);
       }
     },
     upgradeGroup () {

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

@@ -4,12 +4,12 @@
     <group-plan-creation-modal />
     <div>
       <div class="header">
-        <h1 class="text-center">
-          Need more for your Group?
+        <h1 v-once class="text-center">
+          {{ $t('groupPlanTitle') }}
         </h1>
         <div class="row">
           <div class="col-8 offset-2 text-center">
-            <h2 class="sub-text">
+            <h2 v-once class="sub-text">
               {{ $t('groupBenefitsDescription') }}
             </h2>
           </div>
@@ -24,8 +24,8 @@
                 src="~@/assets/images/group-plans/group-14@3x.png"
               >
               <hr>
-              <h2>{{ $t('teamBasedTasks') }}</h2>
-              <p>Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('teamBasedTasks') }} </h2>
+              <p v-once> {{ $t('teamBasedTasksListDesc') }} </p>
             </div>
           </div>
           <div class="col-4">
@@ -35,8 +35,8 @@
                 src="~@/assets/images/group-plans/group-12@3x.png"
               >
               <hr>
-              <h2>Group Management Controls</h2>
-              <p>Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('groupManagementControls') }} </h2>
+              <p v-once> {{ $t('groupManagementControlsDesc') }} </p>
             </div>
           </div>
           <div class="col-4">
@@ -46,8 +46,8 @@
                 src="~@/assets/images/group-plans/group-13@3x.png"
               >
               <hr>
-              <h2>In-Game Benefits</h2>
-              <p>Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.</p><!-- eslint-disable-line max-len -->
+              <h2 v-once> {{ $t('inGameBenefits') }} </h2>
+              <p v-once> {{ $t('inGameBenefitsDesc') }} </p>
             </div>
           </div>
         </div>

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

@@ -0,0 +1,344 @@
+<template>
+  <div>
+    <div class="d-flex justify-content-center">
+      <div
+        v-if="seekers.length > 0"
+        class="fit-content mx-auto mt-4"
+      >
+        <div class="d-flex align-items-center">
+          <h1 v-once class="my-auto mr-auto"> {{ $t('findPartyMembers') }}</h1>
+          <div
+            class="btn btn-secondary btn-sync ml-auto my-auto pl-2 pr-3 d-flex"
+            @click="refreshList()"
+          >
+            <div class="svg-icon icon-16 color my-auto mr-2" v-html="icons.sync"></div>
+            <div class="ml-auto"> {{ $t('refreshList') }} </div>
+          </div>
+        </div>
+        <div class="d-flex flex-wrap seeker-list">
+          <div
+            v-for="(seeker, index) in seekers"
+            :key="seeker._id"
+            class="seeker"
+          >
+            <div class="d-flex">
+              <avatar
+                :member="seeker"
+                :hideClassBadge="true"
+                @click.native="showMemberModal(seeker._id)"
+                class="mr-3 mb-2"
+              />
+              <div class="card-data">
+                <user-link
+                  :user-id="seeker._id"
+                  :name="seeker.profile.name"
+                  :backer="seeker.backer"
+                  :contributor="seeker.contributor"
+                />
+                <div class="small-with-border pb-2 mb-2">
+                  @{{ seeker.auth.local.username }} • {{ $t('level') }} {{ seeker.stats.lvl }}
+                </div>
+                <div
+                  class="d-flex"
+                >
+                  <strong v-once> {{ $t('classLabel') }} </strong>
+                  <span
+                    class="svg-icon d-inline-block icon-16 my-auto mx-2"
+                    v-html="icons[seeker.stats.class]"
+                  >
+                  </span>
+                  <strong
+                    :class="`${seeker.stats.class}-color`"
+                  >
+                    {{ $t(seeker.stats.class) }}
+                  </strong>
+                </div>
+                <div>
+                  <strong v-once class="mr-2"> {{ $t('checkinsLabel') }} </strong>
+                  {{ seeker.loginIncentives }}
+                </div>
+                <div>
+                  <strong v-once class="mr-2"> {{ $t('languageLabel') }} </strong>
+                  {{ displayLanguage(seeker.preferences.language) }}
+                </div>
+              </div>
+            </div>
+            <strong
+              v-if="!seeker.invited"
+              @click="inviteUser(seeker._id, index)"
+              class="btn btn-primary w-100"
+            >
+              {{ $t('inviteToParty') }}
+            </strong>
+            <div
+              v-else
+              @click="rescindInvite(seeker._id, index)"
+              class="btn btn-success w-100"
+              v-html="$t('invitedToYourParty')"
+            >
+            </div>
+          </div>
+          <mugen-scroll
+            v-show="loading"
+            :handler="infiniteScrollTrigger"
+            :should-handle="!loading && canLoadMore"
+            :threshold="1"
+          />
+        </div>
+      </div>
+      <div
+        v-if="seekers.length === 0 && !loading"
+        class="d-flex flex-column empty-state text-center my-5"
+      >
+        <div class="gray-circle mb-3 mx-auto d-flex">
+          <div
+            class="svg-icon icon-32 color m-auto"
+            v-html="icons.users"
+          >
+
+          </div>
+        </div>
+        <strong class="mb-1"> {{ $t('findMorePartyMembers') }} </strong>
+        <div v-html="$t('noOneLooking')"></div>
+      </div>
+    </div>
+    <h2
+      v-show="loading"
+      class="loading"
+      :class="seekers.length === 0 ? 'mt-3' : 'mt-0'"
+    >
+      {{ $t('loading') }}
+    </h2>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    color: $purple-300;
+  }
+
+  strong {
+    line-height: 1.71;
+  }
+  .avatar {
+    background-color: $gray-600;
+  }
+
+  .btn-success {
+    box-shadow: none;
+    color: $green-1;
+    font-weight: normal;
+
+    &:not(:disabled):not(.disabled):active {
+      color: $green-1;
+    }
+  }
+
+  .btn-sync {
+    min-width: 128px;
+    max-height: 32px;
+
+    .svg-icon {
+      color: $gray-200;
+    }
+  }
+
+  .card-data {
+    width: 267px;
+  }
+
+  .empty-state {
+    color: $gray-100;
+    line-height: 1.71;
+  }
+
+  .fit-content {
+    width: fit-content;
+  }
+
+  .gray-circle {
+    width: 64px;
+    height: 64px;
+    color: $gray-600;
+    background-color: $gray-200;
+    border-radius: 100px;
+
+    .icon-32 {
+      height: auto;
+    }
+  }
+
+  .loading {
+    text-align: center;
+    color: $purple-300;
+  }
+
+  .seeker-list {
+    max-width: 920px;
+
+    @media (max-width: 962px) {
+      max-width: 464px;
+    };
+
+    .seeker {
+      width: 448px;
+      margin-bottom: 24px;
+      padding: 8px;
+      border-radius: 4px;
+      box-shadow: 0 1px 3px 0 rgba(26, 24, 29, 0.12), 0 1px 2px 0 rgba(26, 24, 29, 0.24);
+      background-color: $white;
+
+      &:first-of-type {
+        margin-top: 24px;
+      }
+
+      @media (min-width: 963px) {
+        &:nth-child(2) {
+          margin-top: 24px;
+        }
+        &:nth-child(even) {
+          margin-left: 24px;
+        }
+      }
+    }
+  }
+
+  .small-with-border {
+    border-bottom: 1px solid $gray-500;
+    color: $gray-100;
+    font-size: 12px;
+    font-weight: normal;
+    line-height: 1.33;
+  }
+
+  .healer-color {
+    color: $yellow-10;
+  }
+
+  .rogue-color {
+    color: $purple-200;
+  }
+
+  .warrior-color {
+    color: $red-50;
+  }
+
+  .wizard-color {
+    color: $blue-10;
+  }
+</style>
+
+<script>
+import debounce from 'lodash/debounce';
+import MugenScroll from 'vue-mugen-scroll';
+import Avatar from '../avatar';
+import userLink from '../userLink';
+import { mapState } from '@/libs/store';
+
+import syncIcon from '@/assets/svg/sync-2.svg';
+import usersIcon from '@/assets/svg/users.svg';
+import warriorIcon from '@/assets/svg/warrior.svg';
+import rogueIcon from '@/assets/svg/rogue.svg';
+import healerIcon from '@/assets/svg/healer.svg';
+import wizardIcon from '@/assets/svg/wizard.svg';
+
+export default {
+  components: {
+    Avatar,
+    MugenScroll,
+    userLink,
+  },
+  data () {
+    return {
+      canLoadMore: true,
+      loading: true,
+      page: 0,
+      party: {},
+      seekers: [],
+      icons: Object.freeze({
+        warrior: warriorIcon,
+        rogue: rogueIcon,
+        healer: healerIcon,
+        sync: syncIcon,
+        users: usersIcon,
+        wizard: wizardIcon,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({
+      availableLanguages: 'i18n.availableLanguages',
+      user: 'user.data',
+    }),
+  },
+  async mounted () {
+    try {
+      this.party = await this.$store.dispatch('guilds:getGroup', { groupId: this.user.party._id });
+    } catch {
+      this.$router.push('/');
+    }
+    if (!this.party._id || this.party.leader._id !== this.user._id) {
+      this.$router.push('/');
+    } else {
+      this.$store.dispatch('common:setTitle', {
+        section: this.$t('lookingForPartyTitle'),
+      });
+      this.seekers = await this.$store.dispatch('party:lookingForParty');
+      this.canLoadMore = this.seekers.length === 30;
+      this.loading = false;
+    }
+  },
+  methods: {
+    displayLanguage (languageCode) {
+      const language = this.availableLanguages.find(lang => lang.code === languageCode);
+      if (language) {
+        return language.name;
+      }
+      return languageCode;
+    },
+    infiniteScrollTrigger () {
+      if (this.canLoadMore) {
+        this.loading = true;
+      }
+
+      this.loadMore();
+    },
+    async inviteUser (userId, index) {
+      await this.$store.dispatch('guilds:invite', {
+        invitationDetails: {
+          inviter: this.user.profile.name,
+          uuids: [userId],
+        },
+        groupId: this.party._id,
+      });
+      this.seekers[index].invited = true;
+    },
+    loadMore: debounce(async function loadMoreDebounce () {
+      this.page += 1;
+      const addlSeekers = await this.$store.dispatch('party:lookingForParty', { page: this.page });
+      this.seekers = this.seekers.concat(addlSeekers);
+      this.canLoadMore = this.seekers.length % 30 === 0;
+      this.loading = false;
+    }, 1000),
+    async refreshList () {
+      this.loading = true;
+      this.page = 0;
+      this.seekers = await this.$store.dispatch('party:lookingForParty');
+      this.canLoadMore = this.seekers.length === 30;
+      this.loading = false;
+    },
+    async rescindInvite (userId, index) {
+      await this.$store.dispatch('members:removeMember', {
+        memberId: userId,
+        groupId: this.party._id,
+      });
+      this.seekers[index].invited = false;
+    },
+    showMemberModal (userId) {
+      this.$router.push({ name: 'userProfile', params: { userId } });
+    },
+  },
+};
+</script>

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

@@ -2,7 +2,7 @@
   <div class="sidebar px-4">
     <div>
       <div class="buttons-wrapper">
-        <div class="button-container button-with-menu-row">
+        <div class="button-container d-flex">
           <button
             v-if="!isMember"
             class="btn btn-success btn-success"
@@ -203,10 +203,6 @@ export default {
     }
   }
 
-  .button-with-menu-row {
-    display: flex;
-  }
-
   .menuIcon {
     width: 4px;
     height: 1rem;

website/client/src/components/hall/heroes.vue

@@ -258,13 +258,22 @@
                 :key="hero._id"
               >
                 <td>
-                  <user-link
+                  <div
                     v-if="hasPermission(hero, 'userSupport')"
-                    :user="hero"
-                    :popover="$t('gamemaster')"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                  />
+                    class="width-content"
+                  >
+                    <user-link
+                      :id="hero._id"
+                      :user="hero"
+                    />
+                    <b-popover
+                      :target="hero._id"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('gamemaster')"
+                    />
+                  </div>
                   <user-link
                     v-else
                     :user="hero"
@@ -302,6 +311,10 @@
   h4.expand-toggle::after {
     margin-left: 5px;
   }
+
+  .width-content {
+    width: fit-content;
+  }
 </style>
 
 <script>

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

@@ -6,13 +6,10 @@
     :style="{height}"
   >
     <slot name="content"></slot>
-    <div
+    <close-x
       v-if="canClose"
-      class="close-icon svg-icon icon-12"
-
-      @click="close()"
-      v-html="icons.close"
-    ></div>
+      @close="close()"
+    />
   </div>
 </template>
 
@@ -30,32 +27,24 @@ body.modal-open .habitica-top-banner {
   padding-left: 1.5rem;
   padding-right: 1.625rem;
   z-index: 1300;
-}
 
-.close-icon.svg-icon {
-  position: relative;
-  top: 0;
-  right: 0;
-  opacity: 0.48;
-
-  & ::v-deep svg path {
-    stroke: $white !important;
-  }
-
-  &:hover {
-    opacity: 0.75;
+  .modal-close {
+    position: unset;
   }
 }
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeX from '@/components/ui/closeX';
 import {
   clearBannerSetting, hideBanner, isBannerHidden, updateBannerHeight,
 } from '@/libs/banner.func';
 import { EVENTS } from '@/libs/events';
 
 export default {
+  components: {
+    closeX,
+  },
   props: {
     bannerId: {
       type: String,
@@ -82,9 +71,6 @@ export default {
   },
   data () {
     return {
-      icons: Object.freeze({
-        close: closeIcon,
-      }),
       hidden: false,
     };
   },
@@ -119,8 +105,6 @@ export default {
     close () {
       hideBanner(this.bannerId);
       this.hidden = true;
-
-      this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
     },
   },
 };

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

@@ -0,0 +1,67 @@
+<template>
+  <base-banner
+    banner-id="chat-warning"
+    banner-class="chat-banner"
+    class="chat-banner"
+    height="3rem"
+    v-if="showChatWarning"
+    :class="{faq: faqPage}"
+  >
+    <div
+      slot="content"
+      class="w-100 text-center"
+      v-html="$t('chatSunsetWarning')"
+    >
+    </div>
+  </base-banner>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .chat-banner {
+    width: 100%;
+    min-height: 48px;
+    padding: 8px;
+    color: $orange-1;
+    background-color: $orange-100;
+    line-height: 1.71;
+
+    a {
+      color: $orange-1;
+      text-decoration: underline;
+
+      &:hover {
+        color: $orange-1;
+      }
+    }
+
+    &.faq {
+      position: fixed;
+      top: 3.5rem;
+    }
+  }
+
+</style>
+
+<script>
+import BaseBanner from './base';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+  computed: {
+    faqPage () {
+      return (this.$route.fullPath.indexOf('/faq')) !== -1;
+    },
+    showChatWarning () {
+      if (this.$route.fullPath.indexOf('/groups') !== -1) return true;
+      if (this.$route.fullPath.indexOf('/tavern-and-guilds') !== -1) return false;
+      if (this.$route.fullPath.indexOf('/tavern') !== -1) return true;
+      return this.faqPage;
+    },
+  },
+};
+
+</script>

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

@@ -51,20 +51,20 @@
       </div>
       <div
         v-else
-        class="no-party d-none d-md-flex  justify-content-center text-center mr-4"
+        class="no-party d-none d-md-flex justify-content-center text-center mr-4"
       >
         <div class="align-self-center">
-          <h3>{{ $t('battleWithFriends') }}</h3>
+          <h3>{{ user.party._id ? $t('questWithOthers') : $t('battleWithFriends') }}</h3>
           <span
             class="small-text"
-            v-html="$t('inviteFriendsParty')"
+            v-html="user.party._id ? $t('inviteFriendsParty') : $t('startPartyDetail')"
           ></span>
           <br>
           <button
             class="btn btn-primary"
             @click="createOrInviteParty()"
           >
-            {{ user.party._id ? $t('inviteFriends') : $t('startAParty') }}
+            {{ user.party._id ? $t('findPartyMembers') : $t('getStarted') }}
           </button>
         </div>
       </div>
@@ -122,6 +122,7 @@
 
 <script>
 import orderBy from 'lodash/orderBy';
+import * as Analytics from '@/libs/analytics';
 import { mapGetters, mapActions } from '@/libs/store';
 import MemberDetails from '../memberDetails';
 import createPartyModal from '../groups/createPartyModal';
@@ -232,10 +233,24 @@ export default {
         this.expandedMember = memberId;
       }
     },
-    createOrInviteParty () {
+    async createOrInviteParty () {
       if (this.user.party._id) {
-        this.$root.$emit('inviteModal::inviteToGroup', this.user.party);
+        await Analytics.track({
+          eventName: 'Header Party CTA',
+          eventAction: 'Header Party CTA',
+          eventCategory: 'behavior',
+          hitType: 'event',
+          state: 'Find Party Members',
+        });
+        this.$router.push('/looking-for-party');
       } else {
+        await Analytics.track({
+          eventName: 'Header Party CTA',
+          eventAction: 'Header Party CTA',
+          eventCategory: 'behavior',
+          hitType: 'event',
+          state: 'Get Started',
+        });
         this.$root.$emit('bv::show::modal', 'create-party-modal');
       }
     },

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

@@ -148,7 +148,7 @@
             </div>
           </li>
           <b-nav-item
-            v-if="user.party._id"
+            v-if="user.party._id && user._id !== partyLeaderId"
             class="topbar-item"
             :class="{'active': $route.path.startsWith('/party')}"
             tag="li"
@@ -156,6 +156,36 @@
           >
             {{ $t('party') }}
           </b-nav-item>
+          <li
+            v-if="user.party._id && user._id === partyLeaderId"
+            class="topbar-item droppable"
+            :class="{'active': $route.path.startsWith('/party')}"
+          >
+            <div
+              class="chevron rotate"
+              @click="dropdownMobile($event)"
+            >
+              <div
+                v-once
+                class="chevron-icon-down"
+                v-html="icons.chevronDown"
+              ></div>
+            </div>
+            <router-link
+              class="nav-link"
+              :to="{name: 'party'}"
+            >
+              {{ $t('party') }}
+            </router-link>
+            <div class="topbar-dropdown">
+              <router-link
+                class="topbar-dropdown-item dropdown-item"
+                :to="{name: 'lookingForParty'}"
+              >
+                {{ $t('lookingForPartyTitle') }}
+              </router-link>
+            </div>
+          </li>
           <b-nav-item
             v-if="!user.party._id"
             class="topbar-item"
@@ -768,6 +798,7 @@ export default {
     return {
       isUserDropdownOpen: false,
       menuIsOpen: false,
+      partyLeaderId: null,
       icons: Object.freeze({
         gem: gemIcon,
         gold: goldIcon,
@@ -796,15 +827,21 @@ export default {
       };
     },
   },
-  mounted () {
-    this.getUserGroupPlans();
-    Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
-      link.addEventListener('click', this.closeMenu);
-    });
+  async mounted () {
+    await this.getUserGroupPlans();
+    await this.getUserParty();
+    if (document.getElementById('menu_collapse')) {
+      Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
+        link.addEventListener('click', this.closeMenu);
+      });
+    }
     Array.from(document.getElementsByClassName('topbar-item')).forEach(link => {
       link.addEventListener('mouseenter', this.dropdownDesktop);
       link.addEventListener('mouseleave', this.dropdownDesktop);
     });
+    this.$root.$on('update-party', () => {
+      this.getUserParty();
+    });
   },
   methods: {
     modForm () {
@@ -816,6 +853,12 @@ export default {
     async getUserGroupPlans () {
       await this.$store.dispatch('guilds:getGroupPlans');
     },
+    async getUserParty () {
+      if (this.user.party._id) {
+        await this.$store.dispatch('party:getParty');
+        this.partyLeaderId = this.$store.state.party.data.leader._id;
+      }
+    },
     openPartyModal () {
       this.$root.$emit('bv::show::modal', 'create-party-modal');
     },

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

@@ -44,13 +44,13 @@ export default {
       if (!this.notification || !this.notification.data) {
         return;
       }
-      if (this.notification.data.destination === 'backgrounds') {
+      if (this.notification.data.destination.indexOf('backgrounds') !== -1) {
         this.$store.state.avatarEditorOptions.editingUser = true;
         this.$store.state.avatarEditorOptions.startingPage = 'backgrounds';
         this.$store.state.avatarEditorOptions.subpage = '2023';
         this.$root.$emit('bv::show::modal', 'avatar-modal');
       } else {
-        this.$router.push({ name: this.notification.data.destination || 'items' });
+        this.$router.push(this.notification.data.destination || '/inventory/items');
       }
     },
   },

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

@@ -34,11 +34,13 @@
 <script>
 import BaseNotification from './base';
 import { mapState } from '@/libs/store';
+import sync from '@/mixins/sync';
 
 export default {
   components: {
     BaseNotification,
   },
+  mixins: [sync],
   props: {
     notification: {
       type: Object,
@@ -73,6 +75,7 @@ export default {
       }
 
       await this.$store.dispatch('guilds:join', { groupId: group.id, type: 'party' });
+      this.sync();
       this.$router.push('/party');
     },
     reject () {

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

@@ -126,7 +126,7 @@
 
           <!-- the word "total" -->
           <div class="buy-gem-total">
-            {{ $t('sendGiftTotal') }}
+            {{ $t('sendTotal') }}
           </div>
 
           <!-- the actual dollar amount -->

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

@@ -128,7 +128,10 @@
         <hr>
       </div>
       <div>
-        <div class="checkbox">
+        <div
+          class="checkbox"
+          id="preferenceAdvancedCollapsed"
+        >
           <label>
             <input
               v-model="user.preferences.advancedCollapsed"
@@ -136,33 +139,22 @@
               class="mr-2"
               @change="set('advancedCollapsed')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('startAdvCollapsedPop')"
-            >{{ $t('startAdvCollapsed') }}</span>
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input
-              v-model="user.preferences.dailyDueDefaultView"
-              type="checkbox"
-              class="mr-2"
-              @change="set('dailyDueDefaultView')"
-            >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('dailyDueDefaultViewPop')"
-            >{{ $t('dailyDueDefaultView') }}</span>
+            <span class="hint">
+              {{ $t('startAdvCollapsed') }}
+            </span>
+            <b-popover
+              target="preferenceAdvancedCollapsed"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('startAdvCollapsedPop')"
+            />
           </label>
         </div>
         <div
           v-if="party.memberCount === 1"
           class="checkbox"
+          id="preferenceDisplayInviteAtOneMember"
         >
           <label>
             <input
@@ -171,12 +163,9 @@
               class="mr-2"
               @change="set('displayInviteToPartyWhenPartyIs1')"
             >
-            <span
-              class="hint"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('displayInviteToPartyWhenPartyIs1')"
-            >{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
+            <span class="hint">
+              {{ $t('displayInviteToPartyWhenPartyIs1') }}
+            </span>
           </label>
         </div>
         <div class="checkbox">
@@ -217,32 +206,47 @@
         </div>
         <hr>
         <button
+          id="buttonShowBailey"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('showBaileyPop')"
           @click="showBailey()"
         >
           {{ $t('showBailey') }}
+          <b-popover
+            target="buttonShowBailey"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('showBaileyPop')"
+          />
         </button>
         <button
+          id="buttonFCV"
           class="btn btn-primary mr-2 mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('fixValPop')"
           @click="openRestoreModal()"
         >
           {{ $t('fixVal') }}
+          <b-popover
+            target="buttonFCV"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('fixValPop')"
+          />
         </button>
         <button
           v-if="user.preferences.disableClasses == true"
+          id="buttonEnableClasses"
           class="btn btn-primary mb-2"
-          popover-trigger="mouseenter"
-          popover-placement="right"
-          :popover="$t('enableClassPop')"
           @click="changeClassForUser(false)"
         >
           {{ $t('enableClass') }}
+          <b-popover
+            target="buttonEnableClasses"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('enableClassPop')"
+          />
         </button>
         <hr>
         <day-start-adjustment />
@@ -532,6 +536,10 @@
   input {
     color: $gray-50;
   }
+
+  .checkbox {
+    width: fit-content;
+  }
   .usersettings h5 {
     margin-top: 1em;
   }

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

@@ -0,0 +1,93 @@
+<template>
+  <div class="item-cost">
+    <span
+      class="cost"
+      :class="getPriceClass()"
+    >
+      <span
+        class="svg-icon inline icon-24"
+        aria-hidden="true"
+        v-html="icons[getPriceClass()]"
+      >
+      </span>
+      <span
+        :class="getPriceClass()"
+      >{{ item.value }}</span>
+    </span>
+  </div>
+</template>
+
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
+
+.item-cost {
+ padding-bottom: 16px;
+}
+
+  .cost {
+    height: 40px;
+    font-size: 1.25rem;
+    font-weight: bold;
+    line-height: 1.4;
+    vertical-align: middle;
+
+    &.gems {
+      color: $gems-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(36, 204, 143, 0.15);
+    }
+
+    &.gold {
+      color: $gold-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(255, 190, 93, 0.15);
+    }
+
+    &.hourglasses {
+      color: $hourglass-color;
+      border-radius: 20px;
+      padding: 8px 20px 8px 20px;
+      margin-top: 16px;
+      margin-bottom: 16px;
+      background-color: rgba(41, 149, 205, 0.15);
+    }
+  }
+</style>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgGem from '@/assets/svg/gem.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+        gold: svgGold,
+        gems: svgGem,
+      }),
+      selectedAmountToBuy: 1,
+      selectedAmount: 1,
+    };
+  },
+  methods: {
+    getPriceClass () {
+      if (this.priceType && this.icons[this.priceType]) {
+        return this.priceType;
+      } if (this.item.currency && this.icons[this.item.currency]) {
+        return this.item.currency;
+      }
+      return 'gold';
+    },
+  },
+};
+</script>

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

@@ -0,0 +1,137 @@
+<template>
+  <div class="d-flex flex-row align-items-center justify-content-center number-increment">
+    <!-- buy modal -->
+    <div
+      class="gray-circle"
+      @click="quantity <= 0
+        ? quantity = 0
+        : quantity--"
+    >
+      <div
+        class="icon-negative"
+        v-html="icons.svgNegative"
+      ></div>
+    </div>
+    <div class="input-group">
+      <div class="align-items-center">
+      </div>
+      <input
+        v-model="quantity"
+        class="form-control alignment"
+        step="1"
+        type="number"
+      >
+    </div>
+    <div
+      class="gray-circle"
+      @click="quantity++"
+    >
+      <div
+        class="icon-positive"
+        v-html="icons.svgPositive"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .number-increment {
+    padding-bottom: 0px;
+    }
+
+  .alignment {
+    text-align: center;
+  }
+
+  .input-group {
+    width: 94px;
+    height: 32px;
+    width: 48px;
+    margin: 0px 16px 0px 16px;
+    padding: 0;
+    border-radius: 2px;
+    border: solid 1px $gray-400;
+    background-color: $white;
+  }
+
+  .gray-circle {
+    border-radius: 100%;
+    border: solid 2px $gray-300;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    &:hover {
+      border-color: $purple-300;
+    }
+  }
+
+  .gray-circle:hover{
+    .icon-positive, .icon-negative {
+      & ::v-deep svg path {
+        fill: $purple-300;
+      }
+    }
+  }
+
+  .icon-positive, .icon-negative {
+    width: 10px;
+    height: 10px;
+    margin: 4px auto;
+
+    & ::v-deep svg path {
+      fill: $gray-300;
+    }
+  }
+
+/* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+/* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
+</style>
+
+<script>
+// icons
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        svgGem,
+        svgGold,
+        svgPositive,
+        svgNegative,
+      }),
+      item: { },
+      quantity: 1,
+    };
+  },
+  computed: {
+  },
+  watch: {
+    quantity () {
+      this.$emit('updateQuantity', this.quantity);
+    },
+  },
+  methods: {
+    setDefaults () {
+      this.input = 1;
+    },
+  },
+};
+
+</script>

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

@@ -22,10 +22,11 @@
   @import '~@/assets/scss/colors.scss';
 
 span {
-  font-weight: normal;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.33;
-  color: $gray-200;
+  color: $gray-100;
+  margin-bottom: 16px;
+  margin-top: -4px;
 
   display: inline-block;
 }

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

@@ -17,7 +17,7 @@
     </span>
     <div>
       <span
-        class="svg-icon icon-12 close-icon"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         tabindex="0"
         @click="hideDialog()"
@@ -45,6 +45,13 @@
               :sprites-margin="'0px auto 0px -24px'"
             />
           </div>
+          <item
+            v-else-if="item.key === 'gem'"
+            class="flat bordered-item"
+            :item="item"
+            :item-content-class="item.class"
+            :show-popover="false"
+          />
           <item
             v-else-if="item.key != 'gem'"
             class="flat bordered-item"
@@ -53,10 +60,20 @@
             :show-popover="false"
           />
         </slot>
+        <div
+          v-if="!showAvatar && user.items[item.purchaseType]"
+          class="owned"
+          :class="totalOwned"
+        >
+          <!-- eslint-disable-next-line max-len -->
+          <span class="owned-text">{{ $t('owned') }}: <span class="user-amount">{{ totalOwned }}</span></span>
+        </div>
         <h4 class="title">
           {{ itemText }}
         </h4>
-        <div v-html="itemNotes"></div>
+        <div class="item-notes">
+          {{ itemNotes }}
+        </div>
         <slot
           name="additionalInfo"
           :item="item"
@@ -69,60 +86,61 @@
           />
         </slot>
         <div
-          v-if="item.value > 0"
+          v-if="item.value > 0 && !(item.key === 'gem' && gemsLeft < 1)"
           class="purchase-amount"
         >
-          <div
-            v-if="showAmountToBuy(item)"
-            class="how-many-to-buy"
-          >
-            <strong>{{ $t('howManyToBuy') }}</strong>
-          </div>
-          <div v-if="showAmountToBuy(item)">
-            <div class="box">
-              <input
-                v-model.number="selectedAmountToBuy"
-                class="form-control"
-                type="number"
-                min="0"
-                step="1"
-              >
-            </div>
-            <span :class="{'notEnough': notEnoughCurrency}">
+          <!-- this is where the pretty item cost element lives -->
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="getPriceClass()"
+            >
               <span
-                class="svg-icon inline icon-32"
+                class="svg-icon inline icon-24"
                 aria-hidden="true"
                 v-html="icons[getPriceClass()]"
-              ></span>
+              >
+              </span>
               <span
-                class="cost"
                 :class="getPriceClass()"
               >{{ item.value }}</span>
             </span>
           </div>
+
           <div
-            v-else
-            class="d-flex align-items-middle"
+            v-if="showAmountToBuy(item)"
+            class="how-many-to-buy"
           >
-            <span
-              class="svg-icon inline icon-32 ml-auto my-auto"
-              aria-hidden="true"
-              v-html="icons[getPriceClass()]"
-            ></span>
-            <span
-              class="cost mr-auto my-auto"
-              :class="getPriceClass()"
-            >{{ item.value }}</span>
+            {{ $t('howManyToBuy') }}
+          </div>
+          <div
+            v-if="showAmountToBuy(item)"
+          >
+            <number-increment
+              class="number-increment"
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+            <div
+              :class="{'notEnough': notEnoughCurrency}"
+              class="total"
+            >
+              <span class="total-text">{{ $t('sendTotal') }}</span>
+              <span
+                class="svg-icon total icon-24"
+                aria-hidden="true"
+                v-html="icons[getPriceClass()]"
+              ></span>
+              <span
+                class="total-text"
+                :class="getPriceClass()"
+              >{{ item.value * selectedAmountToBuy }}</span>
+            </div>
           </div>
         </div>
         <div
-          v-if="item.key === 'gem'"
-          class="gems-left"
+          v-if="item.key === 'gem' && gemsLeft < 1"
+          class="no-more-gems"
         >
-          <strong v-if="gemsLeft > 0">{{ gemsLeft }} {{ $t('gemsRemaining') }}</strong>
-          <strong v-if="gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
-        </div>
-        <div v-if="attemptingToPurchaseMoreGemsThanAreLeft">
           {{ $t('notEnoughGemsToBuy') }}
         </div>
         <div
@@ -147,7 +165,7 @@
           {{ $t('viewSubscriptions') }}
         </button>
         <button
-          v-else
+          v-else-if="!(item.key === 'gem' && gemsLeft < 1)"
           class="btn btn-primary"
           :disabled="item.key === 'gem' && gemsLeft === 0 ||
             attemptingToPurchaseMoreGemsThanAreLeft || numberInvalid || item.locked ||
@@ -165,6 +183,7 @@
     <countdown-banner
       v-if="item.event && item.owned == null"
       :end-date="endDate"
+      class="limitedTime available"
     />
     <div
       v-if="item.key === 'rebirth_orb' && item.value > 0 && user.stats.lvl >= 100"
@@ -179,12 +198,31 @@
       </div>
     </div>
     <div
-      slot="modal-footer"
-      class="d-flex"
+      v-if="item.key === 'gem'"
+      class="d-flex justify-content-center align-items-center"
     >
-      <span class="balance mr-auto">{{ $t('yourBalance') }}</span>
+      <div
+        v-if="gemsLeft > 0"
+        class="gems-left d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+      <div
+        v-if="gemsLeft === 0"
+        class="out-of-gems-banner d-flex justify-content-center align-items-center"
+      >
+        <strong>{{ $t('monthlyGems') }} &nbsp;</strong>
+        {{ gemsLeft }} / {{ totalGems }} {{ $t('gemsRemaining') }}
+      </div>
+    </div>
+    <div
+      slot="modal-footer"
+      class="clearfix"
+    >
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
       <balanceInfo
-        class="ml-auto"
+        class="currency-totals"
         :currency-needed="getPriceClass()"
         :amount-needed="item.value"
       />
@@ -200,11 +238,47 @@
     @include centeredModal();
 
     .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
       padding-bottom: 0px;
     }
 
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      margin: 24px 0 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
-      width: 330px;
+      width: 448px;
+      box-sizing: border-box;
+    }
+
+    .badge-dialog {
+      left: -8px;
+      top: -8px;
     }
 
     .avatar {
@@ -212,8 +286,71 @@
       margin: 0 auto;
     }
 
+   .owned {
+      height: 32px;
+      width: 141px;
+      margin-top: -36px;
+      margin-left: 153px;
+      padding-top: 6px;
+      background-color: $gray-600;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      display: block;
+      text-align: center;
+      position: relative;
+      z-index: 1;
+
+      .owned-text {
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25.67px;
+      left: 1px;
+
+      &.shop_gem {
+        transform: scale(1.45, 1.45);
+        top: -2px;
+       left: 0px;
+      }
+    }
+
+    .title {
+      height: 28px;
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 25px;
+    }
+
+    .item-notes {
+       margin-top: 8px;
+       padding-left: 48.5px;
+       padding-right: 48.5px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
     .content {
       text-align: center;
+      width: 448px;
     }
 
     .item-wrapper {
@@ -221,15 +358,22 @@
     }
 
     .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
+      margin: 32px auto auto;
+    }
+
+    .btn-primary {
+      margin-top: 16px;
     }
 
     .purchase-amount {
-      margin-top: 24px;
+      margin-top: 0px;
 
       .how-many-to-buy {
-        margin-bottom: 16px;
+        font-weight: bold !important;
+      }
+
+      .number-increment {
+        margin-top: 16px;
       }
 
       .box {
@@ -255,31 +399,105 @@
         }
       }
     }
+    .no-more-gems {
+      color: $yellow-5;
+      font-size: 0.875em;
+      line-height: 1.33;
+      margin: 16px 48px 0 48px;
+    }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
       margin-right: 8px;
+      padding-top: 6px;
+    }
 
-      vertical-align: middle;
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+
+      &:hover {
+          color: $gray-100;
+      }
+    }
+
+    .attributes-group {
+      margin: 32px;
+      border-radius: 4px;
+      line-height: 1.71;
+      font-size: 0.875;
+    }
+
+    .attributesGrid {
+      margin-top: 28px;
+      border-radius: 2px;
+      background-color: $gray-500;
+    }
+
+    .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
     }
 
     .cost {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
       font-weight: bold;
-      line-height: 1.33;
-
-      vertical-align: middle;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
 
       &.gems {
-        color: $gems-color;
+        color: $green-10;
+        background-color: rgba(36, 204, 143, 0.15);
+        align-items: center;
       }
 
       &.gold {
-        color: $gold-color;
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+        background-color: rgba(41, 149, 205, 0.15);
+        align-items: center;
+      }
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      padding-top: 2px;
+      margin-top: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
       }
 
       &.hourglasses {
@@ -287,62 +505,84 @@
       }
     }
 
+  .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+  }
+
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-      min-width: 6rem;
+      margin-top: 16px;
+      padding: 4px 16px;
+      height: 32px;
 
       &:focus {
         border: 2px solid black;
       }
     }
 
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
-    }
+      .notEnough {
+        pointer-events: none;
+        opacity: 0.55;
+      }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-    }
+      .free-rebirth {
+        background-color: $yellow-5;
+        color: $white;
+        height: 2rem;
+        line-height: 16px;
+        margin: auto -1rem -1rem;
+      }
 
-    .notEnough {
-      pointer-events: none;
-      opacity: 0.55;
-    }
+      // .pt-015 {
+      //   padding-top: 0.15rem;
+      // }
 
-    .attributesGrid {
-      margin-top: 8px;
-      border-radius: 2px;
-      background-color: $gray-500;
-
-      margin: 10px 0 24px;
-    }
 
     .gems-left {
-      margin-top: .5em;
+      height: 32px;
+      background-color: $green-100;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      color: $green-1;
+      width: 100%;
+      margin-bottom: -24px;
     }
 
-    .free-rebirth {
-      background-color: $yellow-5;
+    .out-of-gems-banner {
+      height: 32px;
+      font-size: 0.75rem;
+      margin-top: 24px;
+      background-color: $yellow-100;
+      color: $yellow-1;
+      width: 100%;
+      margin-bottom: -24px;
+    }
+
+    .limitedTime {
+      height: 32px;
+      width: 446px;
+      font-size: 0.75rem;
+      margin: 24px 0 0 0;
+      background-color: $purple-300;
       color: $white;
-      height: 2rem;
-      line-height: 16px;
-      margin: auto -1rem -1rem;
-    }
-
-    .pt-015 {
-      padding-top: 0.15rem;
+      margin-bottom: -24px;
     }
   }
+
 </style>
 
 <style lang="scss" scoped>
@@ -370,6 +610,8 @@ import svgGem from '@/assets/svg/gem.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
 import svgClock from '@/assets/svg/clock.svg';
 import svgWhiteClock from '@/assets/svg/clock-white.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from './balanceInfo.vue';
 import PinBadge from '@/components/ui/pinBadge';
@@ -377,6 +619,7 @@ import CountdownBanner from './countdownBanner';
 import currencyMixin from './_currencyMixin';
 import notifications from '@/mixins/notifications';
 import buyMixin from '@/mixins/buy';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import { mapState } from '@/libs/store';
 
@@ -407,14 +650,17 @@ export default {
     Avatar,
     PinBadge,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
   props: {
+    // eslint-disable-next-line vue/require-default-prop
     item: {
       type: Object,
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -433,10 +679,14 @@ export default {
         hourglasses: svgHourglasses,
         clock: svgClock,
         whiteClock: svgWhiteClock,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       selectedAmountToBuy: 1,
+      selectedAmount: 1,
       isPinned: false,
+      quantity: 1,
     };
   },
   computed: {
@@ -474,6 +724,11 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    totalGems () {
+      if (!this.user.purchased.plan) return 0;
+      return planGemLimits.convCap
+        + this.user.purchased.plan.consecutive.gemCapExtra;
+    },
     attemptingToPurchaseMoreGemsThanAreLeft () {
       if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
       return false;
@@ -490,6 +745,9 @@ export default {
     endDate () {
       return moment(this.item.event.end);
     },
+    totalOwned () {
+      return this.user.items[this.item.purchaseType][this.item.key] || 0;
+    },
   },
   watch: {
     item: function itemChanged () {
@@ -500,7 +758,9 @@ export default {
   methods: {
     onChange ($event) {
       this.$emit('change', $event);
+      this.selectedAmountToBuy = 1;
     },
+
     buyItem () {
       // @TODO: I  think we should buying to the items.
       // Turn the items into classes, and use polymorphism
@@ -597,6 +857,7 @@ export default {
       }
     },
     hideDialog () {
+      this.selectedAmountToBuy = 1;
       this.$root.$emit('bv::hide::modal', 'buy-modal');
     },
     getPriceClass () {

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

@@ -16,9 +16,6 @@
 
   .limitedTime {
     height: 32px;
-    width: calc(100% + 30px);
-    margin: 0 -15px; // the modal content has its own padding
-
     font-size: 12px;
     line-height: 1.33;
     text-align: center;

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

@@ -4,9 +4,9 @@
     :hide-header="true"
     @change="onChange($event)"
   >
-    <div class="close">
+    <div>
       <span
-        class="svg-icon inline icon-10"
+        class="svg-icon close-icon icon-16 color"
         aria-hidden="true"
         @click="hideDialog()"
         v-html="icons.close"
@@ -14,60 +14,73 @@
     </div>
     <div
       v-if="item"
-      class="content"
+      class="content bordered-item"
     >
       <div class="inner-content">
         <item
-          class="flat"
+          class="flat bordered-item"
           :item="item"
           :item-content-class="itemContextToSell.itemClass"
           :show-popover="false"
-        >
-          <countBadge
-            slot="itemBadge"
-            :show="true"
-            :count="itemContextToSell.itemCount"
-          />
-        </item>
+        />
+        <span class="owned">
+          {{ $t('owned') }}: <span class="user-amount">{{ itemContextToSell.itemCount }}</span>
+        </span>
         <h4 class="title">
           {{ itemContextToSell.itemName }}
         </h4>
         <div v-if="item.key === 'Saddle'">
-          <div class="text">
+          <div class="item-notes">
             {{ item.sellWarningNote() }}
           </div>
           <br>
         </div>
         <div v-else>
           <div>
-            <div class="text">
+            <div class="item-notes">
               {{ item.notes() }}
             </div>
-            <div>
-              <b class="how-many-to-sell">{{ $t('howManyToSell') }}</b>
+            <div class="item-cost">
+              <span class="cost gold">
+                <span
+                  class="svg-icon inline icon-24"
+                  aria-hidden="true"
+                  v-html="icons.gold"
+                ></span>
+                <span>{{ item.value }}</span>
+              </span>
             </div>
             <div>
-              <b-input
-                v-model="selectedAmountToSell"
-                class="itemsToSell"
-                type="number"
-                :max="itemContextToSell.itemCount"
-                min="1"
-                step="1"
-                @keyup.native="preventNegative($event)"
-              />
               <span
-                class="svg-icon inline icon-32"
+                class="how-many-to-sell"
+              >
+                {{ $t('howManyToSell') }}
+              </span>
+            </div>
+            <div>
+              <number-increment
+                @updateQuantity="selectedAmountToSell = $event"
+              />
+            </div>
+            <div class="total-row">
+              <span class="total-text">
+                {{ $t('sendTotal') }}
+              </span>
+              <span
+                class="svg-icon total icon-24"
                 aria-hidden="true"
                 v-html="icons.gold"
               ></span>
-              <span class="value">{{ item.value }}</span>
+              <span class="total-text gold">
+                {{ item.value * selectedAmountToSell }}
+              </span>
             </div>
             <button
               class="btn btn-primary"
+              :disabled="selectedAmountToSell > itemContextToSell.itemCount"
               @click="sellItems()"
             >
-              {{ $t('sell') }}
+              {{ $t('sellItems') }}
             </button>
           </div>
         </div>
@@ -77,8 +90,10 @@
       slot="modal-footer"
       class="clearfix"
     >
-      <span class="balance float-left">{{ $t('yourBalance') }}</span>
-      <balanceInfo class="float-right" />
+      <span class="user-balance float-left">{{ $t('yourBalance') }}</span>
+      <balanceInfo
+        class="float-right currency-totals"
+      />
     </div>
   </b-modal>
 </template>
@@ -95,51 +110,13 @@
     }
 
     .modal-dialog {
-      width: 330px;
+      width: 448px;
     }
 
-    .content {
-      text-align: center;
-
-    }
-    .inner-content {
-      margin: 33px auto auto;
-      width: 282px;
-    }
-
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-
-      margin-left: 24px;
-      margin-right: 8px;
-
-      vertical-align: middle;
-    }
-
-    .value {
-      width: 28px;
-      height: 32px;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: #df911e;
-
-      vertical-align: middle;
-    }
-
-    button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
-    }
-
-    .balance {
-      width: 74px;
-      height: 16px;
-      font-size: 12px;
-      font-weight: bold;
-      line-height: 1.33;
-      color: $gray-200;
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
     }
 
     .modal-footer {
@@ -148,29 +125,215 @@
       border-bottom-right-radius: 8px;
       border-bottom-left-radius: 8px;
       display: block;
+      margin: 24px 0 0;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
     }
 
-    .how-many-to-sell {
-      margin-bottom: 16px;
+    .content {
+      text-align: center;
+    }
+
+    .inner-content {
+      margin: 33px auto auto;
+      width: 282px;
+    }
+
+    .owned {
+      font-size: 0.75rem;
+      font-weight: bold;
+      line-height: 1.33;
+      background-color: $gray-600;
+      padding: 8px 8px;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
       display: block;
+      width: 141px;
+      margin-left: 71px;
+      margin-top: -48px;
+      position: relative;
+      z-index: 1;
+
+      .user-amount {
+        font-weight: normal !important;
+      }
+    }
+
+    .item-wrapper {
+      margin-top: -10px;
+    }
+
+    .item {
+      width: 141px;
+      height: 147px;
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0px;
+      cursor: default;
+      margin-top: 8px;
+    }
+
+    .item-content {
+      transform: scale(1.45, 1.45);
+      top: -25px;
+      left: 1px;
+    }
+
+    .title {
+      color: $gray-10;
+      font-size: 1.25rem;
+      margin-top: 26px;
+      margin-bottom: 0px;
+    }
+
+    .item-notes {
+       margin-top: 12px;
+       line-height: 1.71;
+       font-size: 0.875rem;
+    }
+
+// for cost icon of a single item
+    span.svg-icon.inline.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-right: 4px;
+      padding-top: 4px;
+    }
+// for the total user cost
+    span.svg-icon.total.icon-24 {
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+      margin-left: 6px;
+      margin-right: 8px;
+      padding-top: 6px;
+    }
+
+    span.svg-icon.icon-16 {
+      height: 16px;
+      width: 16px;
+    }
+
+    .close-icon {
+      color: $gray-200;
+      stroke-width: 0px;
+      cursor: pointer;
+
+      &:hover {
+        color: $gray-100;
+      }
+    }
+
+  .item-cost {
+      display: inline-flex;
+      margin: 16px 0;
+      align-items: center;
+      height: 40px;
+    }
+
+    .cost {
+      display: inline-block;
+      font-family: sans-serif;
+      font-size: 1.25rem;
+      font-weight: bold;
+      padding: 6px 20px;
+      line-height: 1.4;
+      border-radius: 20px;
+
+      &.gold {
+        color: $yellow-5;
+        background-color: rgba(255, 190, 93, 0.15);
+        align-items: center;
+      }
     }
   }
+
+  .how-many-to-sell {
+    font-weight: bold !important;
+  }
+
+  .number-increment {
+     margin-top: 16px;
+  }
+
+  .total-row {
+    font-weight: bold;
+    font-size: 0.875rem;
+    margin-top: 16px;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      line-height: 1.71;
+
+    &.gold {
+      color: $yellow-5;
+    }
+  }
+
+  button.btn.btn-primary {
+    margin-top: 16px;
+    padding: 4px 16px;
+    height: 32px;
+
+    &:focus {
+      border: 2px solid black;
+    }
+
+  .balance {
+    width: 74px;
+    height: 16px;
+    font-size: 12px;
+    font-weight: bold;
+    line-height: 1.33;
+    color: $gray-200;
+  }
+
+
+}
 </style>
 
 <script>
 import svgClose from '@/assets/svg/close.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgGem from '@/assets/svg/gem.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import Item from '@/components/inventory/item';
-import CountBadge from '@/components/ui/countBadge';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 export default {
   components: {
     BalanceInfo,
     Item,
-    CountBadge,
+    numberIncrement,
   },
   data () {
     return {
@@ -181,6 +344,8 @@ export default {
         close: svgClose,
         gold: svgGold,
         gem: svgGem,
+        svgPositive,
+        svgNegative,
       }),
     };
   },
@@ -211,6 +376,10 @@ export default {
         this.selectedAmountToSell = 0;
       }
     },
+    maxOwned () {
+      const maxOwned = this.itemContextToSell.itemCount;
+      return maxOwned;
+    },
     sellItems () {
       if (!Number.isInteger(Number(this.selectedAmountToSell))) {
         this.selectedAmountToSell = 0;

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

@@ -33,6 +33,22 @@
           v-if="!item.locked"
           class="purchase-amount"
         >
+          <div class="item-cost">
+            <span
+              class="cost"
+              :class="priceType"
+            >
+              <span
+                class="svg-icon inline icon-24"
+                aria-hidden="true"
+                v-html="icons[priceType]"
+              >
+              </span>
+              <span
+                :class="priceType"
+              >{{ item.value }}</span>
+            </span>
+          </div>
           <div class="how-many-to-buy">
             <strong>{{ $t('howManyToBuy') }}</strong>
           </div>
@@ -42,24 +58,25 @@
           >
             {{ item.addlNotes }}
           </div>
-          <div class="box">
-            <input
-              v-model.number="selectedAmountToBuy"
-              class="form-control"
-              type="number"
-              min="0"
-              step="1"
-            >
+          <div>
+            <number-increment
+              @updateQuantity="selectedAmountToBuy = $event"
+            />
+          </div>
+          <div class="total-row">
+            <span class="total-text">
+              {{ $t('sendTotal') }}
+            </span>
+            <span
+              class="svg-icon inline icon-20"
+              aria-hidden="true"
+              v-html="currencyIcon"
+            ></span>
+            <span
+              class="total"
+              :class="priceType"
+            >{{ item.value * selectedAmountToBuy }}</span>
           </div>
-          <span
-            class="svg-icon inline icon-32"
-            aria-hidden="true"
-            v-html="currencyIcon"
-          ></span>
-          <span
-            class="value"
-            :class="priceType"
-          >{{ item.value }}</span>
         </div>
         <button
           v-if="priceType === 'gems'
@@ -72,7 +89,7 @@
         </button>
         <button
           v-else
-          class="btn btn-primary"
+          class="btn btn-primary mb-4"
           :class="{'notEnough': !enoughCurrency(priceType, item.value * selectedAmountToBuy)}"
           :disabled="numberInvalid"
           @click="buyItem()"
@@ -112,6 +129,39 @@
       margin-top: 1rem;
     }
 
+    .modal-body {
+      padding-left: 0px;
+      padding-right: 0px;
+      padding-bottom: 0px;
+    }
+
+    .modal-footer {
+      height: 48px;
+      background-color: $gray-700;
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+      display: block;
+      padding: 16px 24px;
+      align-content: center;
+
+      .user-balance {
+        width: 150px;
+        height: 16px;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        color: $gray-100;
+        margin-bottom: 16px;
+        margin-top: -4px;
+        margin-left: -4px;
+      }
+
+      .currency-totals {
+        margin-right: -8px;
+        float: right;
+      }
+    }
+
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
@@ -129,8 +179,13 @@
       margin: 33px auto auto;
     }
 
-    .modal-body {
-      padding-bottom: 0px;
+    .item-notes {
+      height: 48px;
+      margin-top: 8px;
+      padding-left: 48.5px;
+      padding-right: 48.5px;
+      line-height: 1.71;
+      font-size: 0.875rem;
     }
 
     .questInfo {
@@ -152,16 +207,14 @@
       height: 100%;
     }
 
-    span.svg-icon.inline.icon-32 {
-      height: 32px;
-      width: 32px;
-      margin-right: 8px;
-      vertical-align: middle;
-    }
-
     button.btn.btn-primary {
-      margin-top: 24px;
-      margin-bottom: 24px;
+      margin-top: 14px;
+      padding: 4px 16px;
+      height: 32px;
+
+      &:focus {
+        border: 2px solid black;
+      }
     }
 
     .balance {
@@ -173,19 +226,6 @@
       color: $gray-200;
     }
 
-    .modal-footer {
-      height: 48px;
-      background-color: $gray-700;
-      border-bottom-right-radius: 8px;
-      border-bottom-left-radius: 8px;
-      display: block;
-      padding: 1rem 1.5rem;
-
-      &> * {
-        margin: 0;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
@@ -198,30 +238,108 @@
         margin-bottom: 16px;
       }
 
-      .box {
-        display: inline-block;
-        width: 74px;
-        height: 40px;
-        border-radius: 2px;
-        background-color: #ffffff;
-        box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-        margin-right: 24px;
-
-        input {
-          width: 100%;
-          border: none;
+      .item-cost {
+        padding-bottom: 16px;
         }
 
-        input::-webkit-contacts-auto-fill-button {
-          visibility: hidden;
-          display: none !important;
-          pointer-events: none;
-          position: absolute;
-          right: 0;
-        }
+        .cost {
+          height: 40px;
+          font-size: 1.25rem;
+          font-weight: bold;
+          vertical-align: middle;
+          padding: 8px 20px 8px 20px;
+
+          &.gems {
+            color: $green-10;
+            background-color: rgba(36, 204, 143, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.gold {
+            color: $yellow-5;
+            background-color: rgba(255, 190, 93, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+          }
+
+          &.hourglasses {
+            color: $hourglass-color;
+            background-color: rgba(41, 149, 205, 0.15);
+            line-height: 1.4;
+            margin: 0 0 0 -4px;
+            border-radius: 20px;
+            }
+          }
+
+    .total-row {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+    }
+
+    .total {
+      font-weight: bold;
+      font-size: 0.875rem;
+      margin-top: 16px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
       }
     }
 
+    .total-text {
+      color: $gray-50;
+      font-weight: bold;
+      font-size: 0.875rem;
+      height: 24px;
+      line-height: 1.71;
+      padding-right: 4px;
+
+      &.gems {
+        color: $green-10;
+      }
+
+      &.gold {
+        color: $yellow-5;
+      }
+
+      &.hourglasses {
+        color: $hourglass-color;
+      }
+    }
+
+  span.svg-icon.inline.icon-20 {
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+      vertical-align: middle;
+    }
+
+  span.svg-icon.inline.icon-24 {
+    height: 24px;
+    width: 24px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  span.svg-icon.inline.icon-32 {
+    height: 32px;
+    width: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
     @media only screen and (max-width: 1000px) {
       .modal-dialog {
         max-width: 80%;
@@ -234,9 +352,10 @@
       }
     }
   }
+}
 </style>
 
-<style lang="scss" scoped>
+<!-- <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
   .value {
@@ -260,7 +379,7 @@
       color: $hourglass-color;
     }
   }
-</style>
+</style> -->
 
 <script>
 import moment from 'moment';
@@ -272,6 +391,8 @@ import svgExperience from '@/assets/svg/experience.svg';
 import svgGem from '@/assets/svg/gem.svg';
 import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPositive from '@/assets/svg/positive.svg';
+import svgNegative from '@/assets/svg/negative.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -280,6 +401,7 @@ import buyMixin from '@/mixins/buy';
 import numberInvalid from '@/mixins/numberInvalid';
 import PinBadge from '@/components/ui/pinBadge';
 import CountdownBanner from '../countdownBanner';
+import numberIncrement from '@/components/shared/numberIncrement';
 
 import questDialogContent from './questDialogContent';
 import QuestRewards from './questRewards';
@@ -293,6 +415,7 @@ export default {
     PinBadge,
     questDialogContent,
     CountdownBanner,
+    numberIncrement,
   },
   mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
   props: {
@@ -301,6 +424,7 @@ export default {
     },
     priceType: {
       type: String,
+      default: '',
     },
     withPin: {
       type: Boolean,
@@ -312,9 +436,11 @@ export default {
         clock: svgClock,
         close: svgClose,
         experience: svgExperience,
-        gem: svgGem,
+        gems: svgGem,
         gold: svgGold,
-        hourglass: svgHourglasses,
+        hourglasses: svgHourglasses,
+        positive: svgPositive,
+        negative: svgNegative,
       }),
 
       isPinned: false,
@@ -339,8 +465,8 @@ export default {
     },
     currencyIcon () {
       if (this.priceType === 'gold') return this.icons.gold;
-      if (this.priceType === 'hourglasses') return this.icons.hourglass;
-      return this.icons.gem;
+      if (this.priceType === 'hourglasses') return this.icons.hourglasses;
+      return this.icons.gems;
     },
     endDate () {
       return moment(this.item.event.end);

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

@@ -33,17 +33,17 @@
 
   h3 {
     color: $gray-10;
-    margin-bottom: 0.25rem;
+    margin-bottom: 4pxrem;
   }
 
   .quest-image {
     margin: 0 auto;
-    margin-bottom: 1em;
-    margin-top: 1.5em;
+    margin-bottom: 16px;
+    margin-top: 24px;
   }
 
   .text {
-    margin-bottom: 1rem;
+    margin: 16px 16px;
     overflow-y: auto;
     text-overflow: ellipsis;
   }
@@ -54,10 +54,10 @@
     line-height: 1.71;
     color: $gray-50;
     text-align: center;
-    margin-bottom: 0.5rem;
+    margin-bottom: 8px;
 
     ::v-deep .user-label {
-      font-size: 14px;
+      font-size: 0.875rem;
     }
   }
 

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

@@ -177,9 +177,6 @@ export default {
   @import '~@/assets/scss/colors.scss';
 
   .quest-rewards {
-    margin-left: -1rem;
-    margin-right: -1rem;
-
     background-color: $gray-700;
   }
 

website/client/src/components/snackbars/notifications.vue

@@ -106,6 +106,7 @@ export default {
       preventMultipleWatchExecution: false,
       eventPromoBannerHeight: null,
       sleepingBannerHeight: null,
+      warningBannerHeight: null,
     };
   },
   computed: {
@@ -135,6 +136,10 @@ export default {
     notificationBannerHeight () {
       let scrollPosToCheck = 56;
 
+      if (this.warningBannerHeight) {
+        scrollPosToCheck += this.warningBannerHeight;
+      }
+
       if (this.sleepingBannerHeight) {
         scrollPosToCheck += this.sleepingBannerHeight;
       }
@@ -361,6 +366,7 @@ export default {
 
     updateBannerHeightAndScrollY () {
       this.updateEventBannerHeight();
+      this.warningBannerHeight = getBannerHeight('chat-warning');
       this.sleepingBannerHeight = getBannerHeight('damage-paused');
       this.updateScrollY();
     },

website/client/src/components/static/chatSunsetFaq.vue

@@ -0,0 +1,615 @@
+<template>
+  <div class="top-container mx-auto">
+    <div class="main-text mr-4">
+      <!-- title goes here -->
+      <div class="title-details">
+        <h1 v-once>
+          {{ $t('sunsetFaqTitle') }}
+        </h1>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
+        <p>{{ $t('sunsetFaqPara2') }}</p>
+        <p>{{ $t('sunsetFaqPara3') }}</p>
+        <p>{{ $t('sunsetFaqPara4') }}</p>
+        <p>{{ $t('sunsetFaqPara5') }}</p>
+      </div>
+
+      <!-- Which services are ending -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader1') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara6')"></p>
+      </div>
+
+      <!-- Why are tavern and guild ending? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader2') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li>{{ $t('sunsetFaqList1') }}</li>
+          <li>{{ $t('sunsetFaqList2') }}</li>
+          <li>{{ $t('sunsetFaqList3') }}</li>
+        </ul>
+      </div>
+
+      <!-- Can I still talk to my party/group members? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader3') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara7') }}</p>
+      </div>
+
+      <!-- Pausing dailies -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader4') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara8') }}</p>
+      </div>
+
+      <!-- Accessing group plans -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader5') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+      </div>
+
+      <!-- Can I access guild chats? Or banked Gems? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader12') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara21')"></p>
+      </div>
+
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader6') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara10') }}</p>
+      </div>
+
+      <!-- How can players find groups? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader7') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p>{{ $t('sunsetFaqPara11') }}</p>
+      </div>
+
+      <!-- What about contributors? -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader8') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
+        <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+      </div>
+
+      <!-- Challenges -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader9') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li>{{ $t('sunsetFaqList4') }}</li>
+          <li>{{ $t('sunsetFaqList5') }}</li>
+          <li>{{ $t('sunsetFaqList6') }}</li>
+          <li>{{ $t('sunsetFaqList7') }}</li>
+        </ul>
+      </div>
+
+      <!-- Questions about how to use Habitica -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader10') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <ul>
+          <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
+          <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+        </ul>
+      </div>
+
+      <!-- Community Guidelines and TOS -->
+      <div>
+        <h3 class="headings">
+          {{ $t('sunsetFaqHeader11') }}
+        </h3>
+      </div>
+      <div class="body-text">
+        <p v-html="$t('sunsetFaqPara20')"></p>
+      </div>
+
+    </div>
+
+    <!-- sidebar -->
+    <div class="sidebar py-4 d-flex flex-column">
+      <!-- staff -->
+      <div class="ml-4">
+        <h2>
+          {{ $t('staff') }}
+        </h2>
+        <div class="d-flex flex-wrap">
+          <div
+            v-for="user in staff"
+            :key="user.uuid"
+            class="staff col-6 p-0"
+          >
+            <div class="d-flex">
+              <router-link
+                class="title"
+                :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+              >
+                {{ user.name }}
+              </router-link>
+              <div
+                v-if="user.type === 'Staff'"
+                class="svg-icon staff-icon ml-1"
+                v-html="icons.tierStaff"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- player tiers -->
+      <div class="ml-4">
+        <h2 class="mt-4 mb-1">
+          {{ $t('playerTiers') }}
+        </h2>
+        <ul class="tier-list">
+          <li
+            v-once
+            class="tier1 d-flex justify-content-center"
+          >
+            {{ $t('tier1') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier1"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier2 d-flex justify-content-center"
+          >
+            {{ $t('tier2') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier2"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier3 d-flex justify-content-center"
+          >
+            {{ $t('tier3') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier3"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier4 d-flex justify-content-center"
+          >
+            {{ $t('tier4') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier4"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier5 d-flex justify-content-center"
+          >
+            {{ $t('tier5') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier5"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier6 d-flex justify-content-center"
+          >
+            {{ $t('tier6') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier6"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="tier7 d-flex justify-content-center"
+          >
+            {{ $t('tier7') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tier7"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="moderator d-flex justify-content-center"
+          >
+            {{ $t('tierModerator') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tierMod"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="staff d-flex justify-content-center"
+          >
+            {{ $t('tierStaff') }}
+            <div
+              class="svg-icon ml-1"
+              v-html="icons.tierStaff"
+            ></div>
+          </li>
+          <li
+            v-once
+            class="npc d-flex justify-content-center"
+          >
+            {{ $t('tierNPC') }}
+          </li>
+        </ul>
+      </div>
+      <!-- Daniel in sweet, sweet retirement with Jorts -->
+      <div>
+        <div class="gradient">
+        </div>
+        <div
+          class="grassy-meadow-backdrop"
+          :style="{'background-image': imageURLs.background}"
+        >
+          <div
+            class="daniel_front"
+            :style="{'background-image': imageURLs.npc}"
+          ></div>
+          <div
+            class="pixel-border"
+            :style="{'background-image': imageURLs.pixel_border}"
+          ></div>
+        </div>
+      </div>
+
+      <!-- email admin -->
+      <div class="d-flex flex-column justify-content-center">
+        <div class="question mx-auto">
+          {{ $t('anotherQuestion') }}
+        </div>
+        <div
+          class="contact mx-auto"
+        >
+          <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
+        </div>
+      </div>
+    </div>
+
+    <!-- final div! -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  h1 {
+    margin-top: 0px;
+    line-height: 1.33;
+  }
+
+  li {
+    padding-bottom: 16px;
+
+    &::marker {
+      size: 0.5em;
+    }
+  }
+
+  p {
+    margin-bottom: 21px;
+  }
+
+  ul {
+    padding-left: 20px;
+  }
+
+  .top-container {
+    width: 66.67%;
+    margin-top: 80px;
+    display: flex;
+
+    @media (max-width: 1024px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  .main-text {
+    .body-text {
+      font-size: 1em;
+      color: $gray-10;
+      line-height: 1.71;
+    }
+
+    .headings {
+      font-size: 1.15em;
+      font-weight: 400;
+      line-height: 1.75;
+      color: $purple-200;
+    }
+  }
+
+  .sidebar {
+    height: fit-content;
+    width: 330px;
+    background-color: $gray-700;
+    border-radius: 16px;
+
+    h2 {
+      color: $gray-10;
+      font-family: Roboto;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.71;
+    }
+
+    .staff {
+      .staff-icon {
+        width: 10px;
+        margin-top: 5px;
+      }
+
+      .title {
+        height: 24px;
+        color: $purple-300;
+        font-weight: bold;
+        display: inline-block;
+        margin-bottom: 4px;
+      }
+    }
+
+    .tier-list {
+      list-style-type: none;
+      padding: 0;
+      width: 282px;
+      font-size: 1em !important;
+
+      li {
+        height: 40px;
+        border-radius: 4px;
+        border: solid 1px $gray-500;
+        text-align: center;
+        padding: 8px 0;
+        margin-bottom: 8px;
+        margin-right: 4px;
+        font-weight: bold;
+        line-height: 1.71;
+      }
+
+      .tier1 {
+        color: #c42870;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier2 {
+        color: #b01515;
+        .svg-icon {
+          width: 11px;
+          margin-top: 5px;
+        }
+      }
+
+      .tier3 {
+        color: #d70e14;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier4 {
+        color: #c24d00;
+        .svg-icon {
+          width: 13px;
+          margin-top: 4px;
+        }
+      }
+
+      .tier5 {
+        color: #9e650f;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier6 {
+        color: #2b8363;
+        .svg-icon {
+          width: 8px;
+          margin-top: 7px;
+        }
+      }
+
+      .tier7 {
+        color: #167e87;
+        .svg-icon {
+          width: 12px;
+          margin-top: 4px;
+        }
+      }
+
+      .moderator {
+        color: #277eab;
+        .svg-icon {
+          width: 13px;
+          margin-top: 3px;
+        }
+      }
+
+      .staff {
+        color: #6133b4;
+        .svg-icon {
+          width: 10px;
+          margin-top: 7px;
+        }
+      }
+
+      .npc {
+        color: $black;
+      }
+    }
+
+    .gradient {
+      position: absolute;
+      width: 330px;
+      height: 100px;
+      margin: -1px 0 116px;
+      background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
+    }
+
+    .grassy-meadow-backdrop {
+      background-repeat: repeat-x;
+      width: 330px;
+      height: 246px;
+    }
+
+    .daniel_front {
+      height: 246px;
+      width: 330px;
+      background-repeat: no-repeat;
+      margin: 0 auto;
+    }
+
+    .pixel-border {
+      width: 330px;
+      height: 30px;
+      background-repeat: no-repeat;
+      position: absolute;
+      margin-top: -30px;
+    }
+
+    .question {
+      font-size: 1em;
+      font-weight: bold;
+      line-height: 1.71;
+      color: $gray-10;
+      margin-top: 24px;
+    }
+
+    .contact p {
+      font-size: 1em;
+      margin-bottom: 0px;
+    }
+  }
+</style>
+
+<script>
+import find from 'lodash/find';
+import { mapState } from '@/libs/store';
+
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tierMod from '@/assets/svg/tier-mod.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg';
+import staffList from '../../libs/staffList';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
+      }),
+      group: {
+        chat: [],
+      },
+      sections: {
+        worldBoss: true,
+      },
+      staff: staffList,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      currentEventList: 'worldState.data.currentEventList',
+    }),
+    imageURLs () {
+      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
+      if (!currentEvent) {
+        return {
+          background: 'url(/static/npc/normal/tavern_background.png)',
+          npc: 'url(/static/npc/normal/tavern_npc.png)',
+          pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+        };
+      }
+      return {
+        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
+        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+      };
+    },
+  },
+
+  async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('faq/taverns-and-guilds'),
+    });
+    document.body.style.background = '#ffffff';
+  },
+};
+</script>

website/client/src/components/static/clearBrowserData.vue

@@ -7,13 +7,19 @@
         <br>
         <p class="text-center">
           <button
+            id="buttonClearBrowserData"
             class="btn btn-lg btn-danger"
-            popover-trigger="mouseover"
-            :popover="$t('localStorageClearExplanation')"
             @click="clearLocalStorage()"
           >
             {{ $t('localStorageClear') }}
           </button>
+          <b-popover
+            target="buttonClearBrowserData"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('localStorageClearExplanation')"
+          />
         </p>
         <br>
         <p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>

website/client/src/components/static/faq.vue

@@ -17,6 +17,19 @@
           class="faq-question"
         >
           <h2
+            v-once
+            v-if="index === 0"
+          >
+            {{ $t('general') }}
+          </h2>
+          <h2
+            v-once
+            v-if="entry.heading === 'party-with-friends'"
+            id="parties"
+          >
+            {{ $t('parties') }}
+          </h2>
+          <h3
             v-once
             v-b-toggle="entry.heading"
             role="tab"
@@ -24,7 +37,7 @@
             @click="handleClick($event)"
           >
             {{ entry.question }}
-          </h2>
+          </h3>
           <b-collapse
             :id="entry.heading"
             :visible="isVisible(entry.heading)"
@@ -49,25 +62,41 @@
 </template>
 
 <style lang='scss' scoped>
-  .card-body {
-    margin-bottom: 1em;
+  h2 {
+    color: #34313a;
+    border-bottom: 1px solid #e1e0e3;
+    margin-top: 24px;
+    padding-bottom: 16px;
   }
 
-  .faq-question h2 {
-    cursor: pointer;
+  .faq-question {
+    a {
+      text-decoration: none;
+      color: #4F2A93;
+    }
+
+    h3 {
+      font-size: 16px;
+      font-weight: normal;
+      line-height: 1.75;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    .card-body {
+      padding: 0;
+      font-size: 14px;
+      line-height: 1.71;
+      margin-bottom: 1em;
+    }
   }
 
-  .faq-question .card-body {
-    padding: 0;
-  }
-
-  .static-wrapper .faq-question h2 {
-    margin: 0 0 16px 0;
-  }
-
-  .faq-question a {
-    text-decoration: none;
-    color: #4F2A93;
+  .container-fluid {
+    position: relative;
+    top: 2rem;
   }
 
   @media only screen and (max-width: 768px) {

website/client/src/components/static/staticWrapper.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
+    <chat-banner />
     <static-header
-      v-if="showContentWrap"
-      :class="{
-        'home-header': ['home', 'front'].indexOf($route.name) !== -1,
-        'white-header': this.$route.name === 'plans'
-      }"
+    v-if="showContentWrap"
+    :class="{
+      'home-header': ['home', 'front'].indexOf($route.name) !== -1,
+      'white-header': this.$route.name === 'plans'
+    }"
     />
     <div class="static-wrapper">
       <router-view />
@@ -198,10 +199,6 @@
       color: $purple-200;
     }
 
-    li, p {
-      font-size: 16px;
-    }
-
     .media img {
       margin: 1em;
     }
@@ -247,11 +244,13 @@
 
 <script>
 import AppFooter from '@/components/appFooter';
+import ChatBanner from '@/components/header/banners/chatBanner';
 import StaticHeader from './header.vue';
 
 export default {
   components: {
     AppFooter,
+    ChatBanner,
     StaticHeader,
   },
   computed: {

website/client/src/components/tasks/column.vue

@@ -521,7 +521,12 @@ export default {
     // Get Category Filter Labels
     this.typeFilters = getFilterLabels(this.type, this.challenge);
     // Set default filter for task column
-    this.activateFilter(this.type);
+
+    if (this.challenge) {
+      this.activateFilter(this.type);
+    } else {
+      this.activateFilter(this.type, this.user.preferences.tasks.activeFilter[this.type], true);
+    }
   },
   mounted () {
     this.setColumnBackgroundVisibility();
@@ -661,7 +666,7 @@ export default {
     taskSummary (task) {
       this.$emit('taskSummary', task);
     },
-    activateFilter (type, filter = '') {
+    activateFilter (type, filter = '', skipSave = false) {
       // Needs a separate API call as this data may not reside in store
       if (type === 'todo' && filter === 'complete2') {
         if (this.group && this.group._id) {
@@ -677,14 +682,16 @@ export default {
       // as default filter for daily
       // and set the filter as 'due' only when the component first
       // loads and not on subsequent reloads.
-      if (
-        type === 'daily' && filter === '' && !this.challenge
-        && this.user.preferences.dailyDueDefaultView
-      ) {
+      if (type === 'daily' && filter === '' && !this.challenge) {
         filter = 'due'; // eslint-disable-line no-param-reassign
       }
 
       this.activeFilter = getActiveFilter(type, filter, this.challenge);
+
+      if (!skipSave && !this.challenge) {
+        const propertyToUpdate = `preferences.tasks.activeFilter.${type}`;
+        this.$store.dispatch('user:set', { [propertyToUpdate]: filter });
+      }
     },
     setColumnBackgroundVisibility () {
       this.$nextTick(() => {

website/client/src/components/tasks/task.vue

@@ -6,6 +6,7 @@
         'groupTask': task.group.id,
         'task-not-editable': !teamManagerAccess,
         'task-not-scoreable': showTaskLockIcon,
+        'link-exempt': !isChallengeTask && !isGroupTask,
       }, `type_${task.type}`
       ]"
       @click="castEnd($event, task)"
@@ -31,6 +32,9 @@
               'task-not-scoreable': showTaskLockIcon,
             }, controlClass.up.inner]"
             tabindex="0"
+            role="button"
+            :aria-label="$t('scoreUp')"
+            :aria-disabled="showTaskLockIcon || (!task.up && !showTaskLockIcon)"
             @click="score('up')"
             @keypress.enter="score('up')"
           >
@@ -62,6 +66,7 @@
               controlClass.inner,
             ]"
             tabindex="0"
+            role="checkbox"
             @click="score(showCheckIcon ? 'down' : 'up' )"
             @keypress.enter="score(showCheckIcon ? 'down' : 'up' )"
           >
@@ -240,7 +245,7 @@
             >
               <div
                 v-b-tooltip.hover.bottom="$t('dueDate')"
-                class="svg-icon calendar"
+                class="svg-icon calendar my-auto"
                 v-html="icons.calendar"
               ></div>
               <span>{{ formatDueDate() }}</span>
@@ -358,6 +363,9 @@
               'task-not-scoreable': showTaskLockIcon,
             }, controlClass.down.inner]"
             tabindex="0"
+            role="button"
+            :aria-label="$t('scoreDown')"
+            :aria-disabled="showTaskLockIcon || (!task.down && !showTaskLockIcon)"
             @click="score('down')"
             @keypress.enter="score('down')"
           >
@@ -700,7 +708,7 @@
 
   .icons {
     margin-top: 4px;
-    color: $gray-300;
+    color: $gray-100;
     font-style: normal;
 
     &-right {
@@ -759,7 +767,7 @@
   }
 
   .due-overdue {
-    color: $red-50;
+    color: $maroon-10;
   }
 
   .calendar.svg-icon {
@@ -898,7 +906,7 @@
   }
 </style>
 <!-- eslint-enable max-len -->
-
+<!-- eslint-disable-next-line vue/component-tags-order -->
 <script>
 import moment from 'moment';
 import { v4 as uuid } from 'uuid';
@@ -1125,13 +1133,13 @@ export default {
       return moment.duration(endOfDueDate.diff(endOfToday));
     },
     checkIfOverdue () {
-      return this.calculateTimeTillDue().asDays() <= 0;
+      return this.calculateTimeTillDue().asDays() < 0;
     },
     formatDueDate () {
-      const timeTillDue = this.calculateTimeTillDue();
-      const dueIn = timeTillDue.asDays() === 0 ? this.$t('today') : timeTillDue.humanize(true);
-
-      return this.task.date && this.$t('dueIn', { dueIn });
+      if (moment().isSame(this.task.date, 'day')) {
+        return this.$t('today');
+      }
+      return moment(this.task.date).format(this.user.preferences.dateFormat.toUpperCase());
     },
     edit (e, task) {
       if (this.isRunningYesterdailies) return;

website/client/src/components/tasks/yesterdailyModal.vue

@@ -110,7 +110,9 @@ export default {
     };
   },
   updated () {
-    this.handleExternalLinks();
+    window.setTimeout(() => {
+      this.handleExternalLinks();
+    }, 500);
   },
   computed: {
     ...mapState({ user: 'user.data' }),

website/client/src/components/ui/closeX.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="modal-close"
+    @click="$emit('close')"
+  >
+    <div
+      class="svg-icon svg-close color"
+      v-html="icons.close"
+    >
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .modal-close {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+
+    .svg-close {
+      width: 18px;
+      height: 18px;
+      vertical-align: middle;
+      opacity: 0.75;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+</style>
+
+<script>
+import close from '@/assets/svg/close.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        close,
+      }),
+    };
+  },
+};
+</script>

website/client/src/components/userLink.vue

@@ -2,13 +2,13 @@
   <router-link
     v-if="displayName"
     v-b-tooltip.hover.top="tierTitle"
-    class="leader user-link"
+    class="leader user-link d-flex"
     :to="{'name': 'userProfile', 'params': {'userId': id}}"
     :class="levelStyle()"
   >
     {{ displayName }}
     <div
-      class="svg-icon"
+      class="svg-icon icon-12"
       v-html="tierIcon()"
     ></div>
   </router-link>
@@ -37,10 +37,15 @@
       color: $gray-50;
     }
 
+    &[class*="tier"] .svg-icon {
+      margin-top: 5px;
+    }
+    &.npc .svg-icon {
+      margin-top: 4px;
+    }
+
     .svg-icon {
-      width: 10px;
-      display: inline-block;
-      margin-left: .5em;
+      margin-left: 6px;
 
       &:empty {
         display: none;

website/client/src/components/userMenu/stats.vue

@@ -146,17 +146,19 @@
           :key="stat"
           class="row"
         >
-          <div class="col-4">
-            <span
-              class="hint"
-              :popover-title="$t(statInfo.title)"
-              popover-placement="right"
-              :popover="$t(statInfo.popover)"
-              popover-trigger="mouseenter"
-            >
-              <strong>{{ $t(statInfo.title) }}</strong>
-            </span>
+          <div
+            class="col-4"
+            :id="statInfo.title"
+          >
+            <strong> {{ $t(statInfo.title)}} </strong>
             <strong>: {{ statsComputed[stat] }}</strong>
+            <b-popover
+              :target="statInfo.title"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t(statInfo.popover)"
+            />
           </div>
           <div class="col-6">
             <ul class="bonus-stats">
@@ -183,27 +185,38 @@
             </ul>
           </div>
         </div>
-        <div v-if="user.stats.buffs.stealth">
+        <div
+          v-if="user.stats.buffs.stealth"
+          id="stealthBuff"
+        >
           <strong
             v-once
             class="hint"
-            :popover-title="$t('stealth')"
-            popover-trigger="mouseenter"
-            popover-placement="right"
-            :popover="$t('stealthNewDay')"
           >{{ $t('stealth') }}</strong>
           <strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
+          <b-popover
+            target="stealthBuff"
+            triggers="hover focus"
+            placement="right"
+            :prevent-overflow="false"
+            :content="$t('stealthNewDay')"
+          />
         </div>
-        <div v-if="user.stats.buffs.streaks">
+        <div
+          v-if="user.stats.buffs.streaks"
+          id="streaksFrozenBuff"
+        >
           <div>
-            <strong
-              class="hint"
-              popover-title="$t('streaksFrozen')"
-              popover-trigger="mouseenter"
-              popover-placement="right"
-              :popover="$t('streaksFrozenText')"
-            ></strong>
-            {{ $t('streaksFrozen') }}
+            <strong>
+              {{ $t('streaksFrozen') }}
+            </strong>
+            <b-popover
+              target="streaksFrozenBuff"
+              triggers="hover focus"
+              placement="right"
+              :prevent-overflow="false"
+              :content="$t('streaksFrozenText')"
+            />
           </div>
         </div>
       </div>
@@ -237,19 +250,27 @@
             >
               {{ $t('noMoreAllocate') }}
             </p>
-            <p v-if="user.stats.points || userLevel100Plus">
+            <p
+              v-if="user.stats.points || userLevel100Plus"
+              id="pointAllocation"
+            >
               <strong class="inline">{{ user.stats.points }}&nbsp;</strong>
-              <strong
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t('levelPopover')"
-              >{{ $t('unallocated') }}</strong>
+              <strong> {{ $t('unallocated') }} </strong>
+              <b-popover
+                target="pointAllocation"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t('levelPopover')"
+              />
             </p>
           </div>
           <div>
             <fieldset class="auto-allocate">
-              <div class="checkbox">
+              <div
+                id="preferenceAutomaticAllocation"
+                class="checkbox"
+              >
                 <label>
                   <input
                     v-model="user.preferences.automaticAllocation"
@@ -259,19 +280,24 @@
                       'preferences.allocationMode': 'taskbased'
                     })"
                   >
-                  <span
-                    class="hint"
-                    popover-trigger="mouseenter"
-                    popover-placement="right"
-                    :popover="$t('autoAllocationPop')"
-                  >{{ $t('autoAllocation') }}</span>
+                  <b-popover
+                    target="preferenceAutomaticAllocation"
+                    triggers="hover focus"
+                    placement="right"
+                    :prevent-overflow="false"
+                    :content="$t('autoAllocationPop')"
+                  />
+                  {{ $t('autoAllocation') }}
                 </label>
               </div>
               <form
                 v-if="user.preferences.automaticAllocation"
                 style="margin-left:1em"
               >
-                <div class="radio">
+                <div
+                  id="optionFlatAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -280,15 +306,22 @@
                       value="flat"
                       @change="set({'preferences.allocationMode': 'flat'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('evenAllocationPop')"
-                    >{{ $t('evenAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('evenAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionFlatAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('evenAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div
+                  id="optionClassAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
@@ -297,47 +330,63 @@
                       value="classbased"
                       @change="set({'preferences.allocationMode': 'classbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('classAllocationPop')"
-                    >{{ $t('classAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('classAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionClassAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('classAllocationPop')"
+                    />
                   </label>
                 </div>
-                <div class="radio">
+                <div
+                  id="optionTaskAllocation"
+                  class="radio"
+                >
                   <label>
                     <input
                       v-model="user.preferences.allocationMode"
                       type="radio"
                       name="allocationMode"
-                      value="taskbased"
+                      value="classbased"
                       @change="set({'preferences.allocationMode': 'taskbased'})"
                     >
-                    <span
-                      class="hint"
-                      popover-trigger="mouseenter"
-                      popover-placement="right"
-                      :popover="$t('taskAllocationPop')"
-                    >{{ $t('taskAllocation') }}</span>
+                    <span class="hint">
+                      {{ $t('taskAllocation') }}
+                    </span>
+                    <b-popover
+                      target="optionTaskAllocation"
+                      triggers="hover focus"
+                      placement="right"
+                      :prevent-overflow="false"
+                      :content="$t('taskAllocationPop')"
+                    />
                   </label>
                 </div>
               </form>
               <div
                 v-if="user.preferences.automaticAllocation
                   && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)"
+                id="buttonDistributePoints"
               >
                 <button
                   class="btn btn-primary btn-xs"
-                  popover-trigger="mouseenter"
-                  popover-placement="right"
-                  :popover="$t('distributePointsPop')"
                   @click="allocateNow({})"
                 >
                   <span class="glyphicon glyphicon-download"></span>
                   &nbsp;
                   {{ $t('distributePoints') }}
                 </button>
+                <b-popover
+                  target="buttonDistributePoints"
+                  triggers="hover focus"
+                  placement="right"
+                  :prevent-overflow="false"
+                  :content="$t('distributePointsPop')"
+                />
               </div>
             </fieldset>
           </div>
@@ -346,28 +395,35 @@
             :key="stat"
             class="row"
           >
-            <div class="col-8">
-              <span
-                class="hint"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.popover)"
-              ></span>
+            <div
+              :id="`${stat}-info`"
+              class="col-8"
+            >
               {{ $t(statInfo.title) + user.stats[stat] }}
+              <b-popover
+                :target="`${stat}-info`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.popover)"
+              />
             </div>
             <div
               v-if="user.stats.points"
+              :id="`${stat}-allocate`"
               class="col-4"
               @click="allocate(stat)"
             >
-              <button
-                class="btn btn-primary"
-                popover-trigger="mouseenter"
-                popover-placement="right"
-                :popover="$t(statInfo.allocatepop)"
-              >
+              <button class="btn btn-primary">
                 +
               </button>
+              <b-popover
+                :target="`${stat}-allocate`"
+                triggers="hover focus"
+                placement="right"
+                :prevent-overflow="false"
+                :content="$t(statInfo.allocatePop)"
+              />
             </div>
           </div>
         </div>

website/client/src/mixins/externalLinks.js

@@ -16,6 +16,7 @@ export default {
         }
 
         if ((link.classList.value.indexOf('external-link') === -1)
+          && (!link.offsetParent || link.offsetParent.classList.value.indexOf('link-exempt') === -1)
           && domainIndex !== 1
           && !some(TRUSTED_DOMAINS.split(','), domain => link.href.indexOf(domain) === domainIndex)) {
           link.classList.add('external-link');

website/client/src/mixins/numberInvalid.js

@@ -1,7 +1,9 @@
 export default {
   computed: {
     numberInvalid () {
-      return this.selectedAmountToBuy < 1 || !Number.isInteger(this.selectedAmountToBuy);
+      const inputNumber = Number(this.selectedAmountToBuy);
+      return inputNumber < 1
+      || !Number.isInteger(inputNumber);
     },
   },
 };

website/client/src/mixins/spells.js

@@ -114,7 +114,7 @@ export default {
       this.castCancel();
 
       // the selected member doesn't have the flags property which sets `cardReceived`
-      if (spell.pinType !== 'card') {
+      if (spell.pinType !== 'card' && spell.bulk !== true) {
         try {
           spell.cast(this.user, target, {});
         } catch (e) {

website/client/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import * as Analytics from '@/libs/analytics';
 import getStore from '@/store';
 import handleRedirect from './handleRedirect';
 
@@ -27,6 +28,7 @@ const NewsPage = () => import(/* webpackChunkName: "static" */'@/components/stat
 const OverviewPage = () => import(/* webpackChunkName: "static" */'@/components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'@/components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'@/components/static/privacy');
+const ChatSunsetFaq = () => import(/* webpackChunkName: "static" */'@/components/static/chatSunsetFaq');
 const TermsPage = () => import(/* webpackChunkName: "static" */'@/components/static/terms');
 
 const RegisterLoginReset = () => import(/* webpackChunkName: "auth" */'@/components/auth/registerLoginReset');
@@ -72,13 +74,14 @@ const ItemsPage = () => import(/* webpackChunkName: "inventory" */'@/components/
 const EquipmentPage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/equipment/index');
 const StablePage = () => import(/* webpackChunkName: "inventory" */'@/components/inventory/stable/index');
 
-// Guilds
+// Guilds & Parties
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/index');
 const TavernPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/tavern');
 const MyGuilds = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/myGuilds');
 const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/discovery');
 const GroupPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/group');
 const GroupPlansAppPage = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/groupPlan');
+const LookingForParty = () => import(/* webpackChunkName: "guilds" */ '@/components/groups/lookingForParty');
 
 // Group Plans
 const GroupPlanIndex = () => import(/* webpackChunkName: "group-plans" */ '@/components/group-plans/index');
@@ -157,6 +160,7 @@ const router = new VueRouter({
       ],
     },
     { name: 'party', path: '/party', component: GroupPage },
+    { name: 'lookingForParty', path: '/looking-for-party', component: LookingForParty },
     { name: 'groupPlan', path: '/group-plans', component: GroupPlansAppPage },
     {
       name: 'groupPlanDetail',
@@ -309,6 +313,9 @@ const router = new VueRouter({
         {
           name: 'faq', path: 'faq', component: FAQPage, meta: { requiresLogin: false },
         },
+        {
+          name: 'chatSunsetFaq', path: 'tavern-and-guilds', component: ChatSunsetFaq, meta: { requiresLogin: false },
+        },
         {
           name: 'features', path: 'features', component: FeaturesPage, meta: { requiresLogin: false },
         },
@@ -379,6 +386,7 @@ const router = new VueRouter({
 
     // Only used to handle some redirects
     // See router.beforeEach
+    { path: '/static/faq/tavern-and-guilds', redirect: '/static/tavern-and-guilds' },
     { path: '/redirect/:redirect', name: 'redirect' },
     { path: '*', redirect: { name: 'notFound' } },
   ],
@@ -433,6 +441,19 @@ router.beforeEach(async (to, from, next) => {
     }
   }
 
+  if (to.name === 'party') {
+    router.app.$root.$emit('update-party');
+  }
+
+  if (to.name === 'lookingForParty') {
+    Analytics.track({
+      hitType: 'event',
+      eventName: 'View Find Members',
+      eventAction: 'View Find Members',
+      eventCategory: 'behavior',
+    }, { trackOnClient: true });
+  }
+
   // Redirect old guild urls
   if (to.hash.indexOf('#/options/groups/guilds/') !== -1) {
     const splits = to.hash.split('/');
@@ -493,4 +514,10 @@ router.beforeEach(async (to, from, next) => {
   return next();
 });
 
+router.afterEach((to, from) => {
+  if (from.name === 'chatSunsetFaq') {
+    document.body.style.background = '#f9f9f9';
+  }
+});
+
 export default router;

website/client/src/store/actions/party.js

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import { loadAsyncResource } from '@/libs/asyncResource';
 
 export function getMembers (store, forceLoad = false) {
@@ -23,3 +24,14 @@ export function getParty (store, forceLoad = false) {
     forceLoad,
   });
 }
+
+export async function lookingForParty (store, payload) {
+  let response;
+  if (payload && payload.page) {
+    response = await axios.get(`api/v4/looking-for-party?page=${payload.page}`);
+  } else {
+    response = await axios.get('api/v4/looking-for-party');
+  }
+
+  return response.data.data;
+}

website/client/tests/unit/components/tasks/column.spec.js

@@ -21,6 +21,18 @@ describe('Task Column', () => {
         getters: {
           'tasks:getFilteredTaskList': () => [],
         },
+
+        state: {
+          user: {
+            data: {
+              preferences: {
+                tasks: {
+                  activeFilter: {},
+                },
+              },
+            },
+          },
+        },
       },
       mocks,
       stubs,
@@ -76,7 +88,20 @@ describe('Task Column', () => {
         'tasks:getFilteredTaskList': () => () => habits,
       };
 
-      const store = new Store({ getters });
+      const store = new Store({
+        getters,
+        state: {
+          user: {
+            data: {
+              preferences: {
+                tasks: {
+                  activeFilter: {},
+                },
+              },
+            },
+          },
+        },
+      });
 
       wrapper = makeWrapper({ store });
     });

website/client/tests/unit/components/tasks/task.spec.js

@@ -1,88 +0,0 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import moment from 'moment';
-
-import Task from '@/components/tasks/task.vue';
-import Store from '@/libs/store';
-
-const localVue = createLocalVue();
-localVue.use(Store);
-
-describe('Task', () => {
-  let wrapper;
-
-  function makeWrapper (additionalTaskData = {}, additionalUserData = {}) {
-    return shallowMount(Task, {
-      propsData: {
-        task: {
-          group: {},
-          ...additionalTaskData,
-        },
-      },
-      store: {
-        state: {
-          user: {
-            data: {
-              preferences: {},
-              ...additionalUserData,
-            },
-          },
-        },
-        getters: {
-          'tasks:getTaskClasses': () => ({}),
-          'tasks:canEdit': () => ({}),
-          'tasks:canDelete': () => ({}),
-        },
-      },
-      mocks: { $t: (key, params) => key + (params ? JSON.stringify(params) : '') },
-      directives: { 'b-tooltip': {} },
-      localVue,
-    });
-  }
-
-  it('returns a vue instance', () => {
-    wrapper = makeWrapper();
-    expect(wrapper.isVueInstance()).to.be.true;
-  });
-
-  describe('Due date calculation', () => {
-    let clock;
-
-    function setClockTo (time) {
-      const now = moment(time);
-      clock = sinon.useFakeTimers(now.toDate());
-      return now;
-    }
-
-    afterEach(() => {
-      clock.restore();
-    });
-
-    it('formats due date to today if due today', () => {
-      const now = setClockTo('2019-09-17T17:57:00+02:00');
-      wrapper = makeWrapper({ date: now });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"today"}');
-    });
-
-    it('formats due date to tomorrow if due tomorrow', () => {
-      const now = setClockTo('2012-06-12T14:17:28Z');
-      wrapper = makeWrapper({ date: now.add(1, 'day') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-
-    it('formats due date to 5 days if due in 5 days', () => {
-      const now = setClockTo();
-      wrapper = makeWrapper({ date: now.add(5, 'days') });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in 5 days"}');
-    });
-
-    it('formats due date to tomorrow if today but before dayStart', () => {
-      const now = setClockTo('2019-06-12T04:23:37+02:00');
-      wrapper = makeWrapper({ date: now.add(8, 'hours') }, { preferences: { dayStart: 7 } });
-
-      expect(wrapper.vm.formatDueDate()).to.equal('dueIn{"dueIn":"in a day"}');
-    });
-  });
-});

website/common/locales/ace/achievements.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/backgrounds.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/challenge.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/character.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/communityguidelines.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/content.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/contrib.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/death.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/defaulttasks.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/faq.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/front.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/gear.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/generic.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/groups.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/inventory.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/limited.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/loginincentives.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/merch.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/messages.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/noscript.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/npc.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/overview.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/pets.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/quests.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/questscontent.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/rebirth.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/settings.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/spells.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/subscriber.json

@@ -0,0 +1 @@
+{}

website/common/locales/ace/tasks.json

@@ -0,0 +1 @@
+{}

website/common/locales/ach/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/af/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",

website/common/locales/ar/achievements.json

@@ -147,5 +147,8 @@
     "achievementBoneToPickModalText": "لقد جمعت كل الحيوانات الأليفة الهيكلية المغامرة والكلاسيكية!",
     "achievementPlantParent": "والد النبات",
     "achievementPlantParentText": "فقست جميع الحيوانات الأليفة النباتية في الألوان القياسية: الصبار والتريلنج!",
-    "achievementPlantParentModalText": "لقد جمعت كل الحيوانات الأليفة النباتية!"
+    "achievementPlantParentModalText": "لقد جمعت كل الحيوانات الأليفة النباتية!",
+    "achievementDinosaurDynastyModalText": "لقد جمعت جميع الطيور والديناسورات الأليفة!",
+    "achievementDinosaurDynasty": "سلالة الديناصورات",
+    "achievementDinosaurDynastyText": "لقد فقست جميع الألوان القياسية للطيور والديناسورات الأليفة: الصقر، البومة، الببغاء، الطاووس، البطريق، الديك، الزاحف المجنح، التي ريكس،الترايسيراتوبس، و الفيلوسيرابتور!"
 }

website/common/locales/ar/faq.json

@@ -6,7 +6,7 @@
     "webFaqAnswer0": "First, you'll set up tasks that you want to do in your everyday life. Then, as you complete the tasks in real life and check them off, you'll earn Experience and Gold. Gold is used to buy equipment and some items, as well as custom rewards. Experience causes your character to level up and unlock content such as pets, skills, and quests! For more detail, check out a step-by-step overview of the game at [Help -> Overview for New Users](https://habitica.com/static/overview).",
     "faqQuestion1": "كيف أضيف مهماتي؟",
     "iosFaqAnswer1": "العادات الجيدة (تلك التي تحتوي على علامة \"+\") هي المهام التي يمكنك القيام بها عدة مرات في اليوم، مثل تناول الخضروات. العادات السيئة (تلك التي تحتوي على علامة \"-\") هي المهام التي يجب عليك تجنبها، مثل عض الأظافر. والعادات التي تحتوي على علامة \"+\" و \"-\" لديها خيار جيد وخيار سيئ، مثل استخدام الدرج بدلاً من المصعد.\n\nالعادات الجيدة تمنحك خبرة وذهب. والعادات السيئة تقلل من صحتك.\n\nالمهام اليومية هي المهام التي يجب عليك القيام بها كل يوم، مثل تنظيف أسنانك أو التحقق من بريدك الإلكتروني. يمكنك تعديل تواريخ المهام اليومية بالنقر لتحريرها. إذا تخطيت مهمة يومية محددة، فسيتلقى أفاتارك ضررًا خلال الليل. كن حذرًا من عدم إضافة العديد من المهام اليومية في وقت واحد!\n\nالمهام التي يجب القيام بها هي قائمة المهام الخاصة بك. إكمال المهام يمنحك الذهب والخبرة. لن تفقد أبدًا صحتك بسبب هذه المهام. يمكنك إضافة تاريخ استحقاق للمهام التي يجب القيام بها بالنقر لتحريرها.",
-    "androidFaqAnswer1": "Good Habits (the ones with a +) are tasks that you can do many times a day, such as eating vegetables. Bad Habits (the ones with a -) are tasks that you should avoid, like biting nails. Habits with a + and a - have a good choice and a bad choice, like taking the stairs vs. taking the elevator. Good Habits award experience and gold. Bad Habits subtract health.\n\n Dailies are tasks that you have to do every day, like brushing your teeth or checking your email. You can adjust the days that a Daily is due by tapping to edit it. If you skip a Daily that is due, your character will take damage overnight. Be careful not to add too many Dailies at once!\n\n To-Dos are your To-Do list. Completing a To-Do earns you gold and experience. You never lose health from To-Dos. You can add a due date to a To-Do by tapping to edit.",
+    "androidFaqAnswer1": "العادات الجيدة (تلك التي لديها +) هي المهام التي تقوم بها عدة مرات في اليوم، كأكل الخضروات مثلا. العادات السيئة (تلك التي لديها -) هي المهام التي يجب عليك تجنبها، كعض الأظافر مثلا. العادات التي لها + و  لها خيار جيد وخيار سيء، كصعود الدرج مقابل ركوب المصعد. العادات الجيدة تجزيك بالنقات والذهب. العادات السيئة تطرح نقاط الحياة.\n\nاليوميات هي المهام التي يجب عليك القيام بها كل يوم، كتفريش أسنانك أو تفقد بريدك الإلكتروني. بإمكانك تحديد أيام أجل يومية بالنقر عليها لتحديثها. إذا تخطيت يومية أجلها اليوم، فستأخد شخصيتك الضرر الليلة. كن حذرا حتى لا تضيف الكثير من اليوميات مرة واحدة!\n\nالمهام هي قائمة المهام الخاصة بك. إكمال المهام يكسبك الذهب والنقاط. لا تفقد نقاط الحيات أبدا من المهام. يمكنك إضافة تاريخ أجل إلى المهام من خلال الضغط على \"تحديث\".",
     "webFaqAnswer1": "* Good Habits (the ones with a :heavy_plus_sign:) are tasks that you can do many times a day, such as eating vegetables. Bad Habits (the ones with a :heavy_minus_sign:) are tasks that you should avoid, like biting nails. Habits with a :heavy_plus_sign: and a :heavy_minus_sign: have a good choice and a bad choice, like taking the stairs vs. taking the elevator. Good Habits award Experience and Gold. Bad Habits subtract Health.\n* Dailies are tasks that you have to do every day, like brushing your teeth or checking your email. You can adjust the days that a Daily is due by clicking the pencil item to edit it. If you skip a Daily that is due, your avatar will take damage overnight. Be careful not to add too many Dailies at once!\n* To-Dos are your To-Do list. Completing a To-Do earns you Gold and Experience. You never lose Health from To-Dos. You can add a due date to a To-Do by clicking the pencil icon to edit.",
     "faqQuestion2": "ما هي أمثلة المهمات؟",
     "iosFaqAnswer2": "The wiki has four lists of sample tasks to use as inspiration:\n<br><br>\n * [Sample Habits](http://habitica.wikia.com/wiki/Sample_Habits)\n * [Sample Dailies](http://habitica.wikia.com/wiki/Sample_Dailies)\n * [Sample To-Dos](http://habitica.wikia.com/wiki/Sample_To-Dos)\n * [Sample Custom Rewards](http://habitica.wikia.com/wiki/Sample_Custom_Rewards)",
@@ -54,5 +54,6 @@
     "webFaqAnswer12": "World Bosses are special monsters that appear in the Tavern. All active users are automatically battling the Boss, and their tasks and Skills will damage the Boss as usual. You can also be in a normal Quest at the same time. Your tasks and Skills will count towards both the World Boss and the Boss/Collection Quest in your party. A World Boss will never hurt you or your account in any way. Instead, it has a Rage Bar that fills when users skip Dailies. If its Rage bar fills, it will attack one of the Non-Player Characters around the site and their image will change. You can read more about [past World Bosses](http://habitica.wikia.com/wiki/World_Bosses) on the wiki.",
     "iosFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
     "androidFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
-    "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the [Habitica Help guild](https://habitica.com/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)! We're happy to help."
+    "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the [Habitica Help guild](https://habitica.com/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)! We're happy to help.",
+    "general": "عام"
 }

website/common/locales/ar/groups.json

@@ -312,7 +312,7 @@
     "teamBasedTasksList": "Team-Based Task List",
     "teamBasedTasksListDesc": "Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!",
     "groupManagementControls": "Group Management Controls",
-    "groupManagementControlsDesc": "Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
+    "groupManagementControlsDesc": "View task status to verify that a task that was completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.",
     "inGameBenefits": "In-Game Benefits",
     "inGameBenefitsDesc": "Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.",
     "inspireYourParty": "Inspire your party, gamify life together.",