4.204.2

Currently translated at 90.0% (100 of 111 strings)

Translation: Habitica/Pets
Translate-URL: https://translate.habitica.com/projects/habitica/pets/id/

Translated using Weblate (Indonesian)

Currently translated at 83.9% (110 of 131 strings)

Translation: Habitica/Npc
Translate-URL: https://translate.habitica.com/projects/habitica/npc/id/

Translated using Weblate (Indonesian)

Currently translated at 81.9% (50 of 61 strings)

Translation: Habitica/Messages
Translate-URL: https://translate.habitica.com/projects/habitica/messages/id/

Translated using Weblate (Turkish)

Currently translated at 71.7% (1723 of 2401 strings)

Translation: Habitica/Gear
Translate-URL: https://translate.habitica.com/projects/habitica/gear/tr/

Translated using Weblate (Turkish)

Currently translated at 71.7% (1723 of 2401 strings)

Translation: Habitica/Gear
Translate-URL: https://translate.habitica.com/projects/habitica/gear/tr/

Translated using Weblate (Turkish)

Currently translated at 71.7% (1723 of 2401 strings)

Translation: Habitica/Gear
Translate-URL: https://translate.habitica.com/projects/habitica/gear/tr/

Translated using Weblate (Indonesian)

Currently translated at 76.9% (568 of 738 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/id/

Translated using Weblate (Indonesian)

Currently translated at 100.0% (634 of 634 strings)

Translation: Habitica/Backgrounds
Translate-URL: https://translate.habitica.com/projects/habitica/backgrounds/id/

Translated using Weblate (Portuguese (Brazil))

Currently translated at 100.0% (137 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/pt_BR/

Translated using Weblate (Chinese (Traditional))

Currently translated at 97.8% (134 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/zh_Hant/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (137 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/zh_Hans/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (738 of 738 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/zh_Hans/

Translated using Weblate (Thai)

Currently translated at 96.2% (181 of 188 strings)

Translation: Habitica/Character
Translate-URL: https://translate.habitica.com/projects/habitica/character/th/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (374 of 374 strings)

Translation: Habitica/Groups
Translate-URL: https://translate.habitica.com/projects/habitica/groups/zh_Hans/

Translated using Weblate (Japanese)

Currently translated at 99.8% (737 of 738 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/ja/

Translated using Weblate (Japanese)

Currently translated at 100.0% (127 of 127 strings)

Translation: Habitica/Communityguidelines
Translate-URL: https://translate.habitica.com/projects/habitica/communityguidelines/ja/

Translated using Weblate (Japanese)

Currently translated at 100.0% (127 of 127 strings)

Translation: Habitica/Communityguidelines
Translate-URL: https://translate.habitica.com/projects/habitica/communityguidelines/ja/

Translated using Weblate (Thai)

Currently translated at 94.8% (130 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/th/

Translated using Weblate (Thai)

Currently translated at 100.0% (8 of 8 strings)

Translation: Habitica/Inventory
Translate-URL: https://translate.habitica.com/projects/habitica/inventory/th/

Translated using Weblate (Chinese (Simplified))

Currently translated at 99.7% (373 of 374 strings)

Translation: Habitica/Groups
Translate-URL: https://translate.habitica.com/projects/habitica/groups/zh_Hans/

Translated using Weblate (Japanese)

Currently translated at 100.0% (127 of 127 strings)

Translation: Habitica/Communityguidelines
Translate-URL: https://translate.habitica.com/projects/habitica/communityguidelines/ja/

Translated using Weblate (Indonesian)

Currently translated at 89.1% (99 of 111 strings)

Translation: Habitica/Pets
Translate-URL: https://translate.habitica.com/projects/habitica/pets/id/

Translated using Weblate (Thai)

Currently translated at 89.2% (166 of 186 strings)

Translation: Habitica/Settings
Translate-URL: https://translate.habitica.com/projects/habitica/settings/th/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (137 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/zh_Hans/

Translated using Weblate (Thai)

Currently translated at 31.0% (37 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/th/

Translated using Weblate (Chinese (Traditional))

Currently translated at 100.0% (374 of 374 strings)

Translation: Habitica/Groups
Translate-URL: https://translate.habitica.com/projects/habitica/groups/zh_Hant/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (374 of 374 strings)

Translation: Habitica/Groups
Translate-URL: https://translate.habitica.com/projects/habitica/groups/zh_Hans/

Translated using Weblate (Indonesian)

Currently translated at 80.3% (45 of 56 strings)

Translation: Habitica/Faq
Translate-URL: https://translate.habitica.com/projects/habitica/faq/id/

Translated using Weblate (Japanese)

Currently translated at 100.0% (371 of 371 strings)

Translation: Habitica/Content
Translate-URL: https://translate.habitica.com/projects/habitica/content/ja/

Translated using Weblate (Japanese)

Currently translated at 100.0% (119 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/ja/

Translated using Weblate (Indonesian)

Currently translated at 100.0% (119 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/id/

Translated using Weblate (Swedish)

Currently translated at 94.1% (129 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/sv/

Translated using Weblate (Japanese)

Currently translated at 100.0% (137 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/ja/

Translated using Weblate (Japanese)

Currently translated at 98.3% (117 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/ja/

Translated using Weblate (Thai)

Currently translated at 100.0% (56 of 56 strings)

Translation: Habitica/Spells
Translate-URL: https://translate.habitica.com/projects/habitica/spells/th/

Translated using Weblate (Thai)

Currently translated at 64.2% (36 of 56 strings)

Translation: Habitica/Faq
Translate-URL: https://translate.habitica.com/projects/habitica/faq/th/

Translated using Weblate (Thai)

Currently translated at 94.8% (130 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/th/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (186 of 186 strings)

Translation: Habitica/Settings
Translate-URL: https://translate.habitica.com/projects/habitica/settings/zh_Hans/

Translated using Weblate (Thai)

Currently translated at 94.1% (129 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/th/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (137 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/zh_Hans/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (738 of 738 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/zh_Hans/

Translated using Weblate (Vietnamese)

Currently translated at 78.9% (94 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/vi/

Translated using Weblate (Czech)

Currently translated at 97.8% (134 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/cs/

Translated using Weblate (Czech)

Currently translated at 72.6% (69 of 95 strings)

Translation: Habitica/Quests
Translate-URL: https://translate.habitica.com/projects/habitica/quests/cs/

Translated using Weblate (Czech)

Currently translated at 100.0% (203 of 203 strings)

Translation: Habitica/Generic
Translate-URL: https://translate.habitica.com/projects/habitica/generic/cs/

Translated using Weblate (Czech)

Currently translated at 100.0% (180 of 180 strings)

Translation: Habitica/Front
Translate-URL: https://translate.habitica.com/projects/habitica/front/cs/

Translated using Weblate (Japanese)

Currently translated at 99.4% (734 of 738 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/ja/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (371 of 371 strings)

Translation: Habitica/Content
Translate-URL: https://translate.habitica.com/projects/habitica/content/zh_Hans/

Translated using Weblate (Czech)

Currently translated at 100.0% (188 of 188 strings)

Translation: Habitica/Character
Translate-URL: https://translate.habitica.com/projects/habitica/character/cs/

Translated using Weblate (Czech)

Currently translated at 97.6% (619 of 634 strings)

Translation: Habitica/Backgrounds
Translate-URL: https://translate.habitica.com/projects/habitica/backgrounds/cs/

Translated using Weblate (Chinese (Simplified))

Currently translated at 100.0% (119 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/zh_Hans/

Translated using Weblate (Japanese)

Currently translated at 100.0% (2401 of 2401 strings)

Translation: Habitica/Gear
Translate-URL: https://translate.habitica.com/projects/habitica/gear/ja/

Translated using Weblate (Thai)

Currently translated at 64.5% (122 of 189 strings)

Translation: Habitica/Subscriber
Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/th/

Translated using Weblate (Thai)

Currently translated at 64.5% (122 of 189 strings)

Translation: Habitica/Subscriber
Translate-URL: https://translate.habitica.com/projects/habitica/subscriber/th/

Translated using Weblate (Thai)

Currently translated at 75.0% (6 of 8 strings)

Translation: Habitica/Overview
Translate-URL: https://translate.habitica.com/projects/habitica/overview/th/

Translated using Weblate (Portuguese (Brazil))

Currently translated at 100.0% (371 of 371 strings)

Translation: Habitica/Content
Translate-URL: https://translate.habitica.com/projects/habitica/content/pt_BR/

Translated using Weblate (Portuguese (Brazil))

Currently translated at 99.1% (118 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/pt_BR/

Translated using Weblate (Italian)

Currently translated at 100.0% (137 of 137 strings)

Translation: Habitica/Tasks
Translate-URL: https://translate.habitica.com/projects/habitica/tasks/it/

Translated using Weblate (Italian)

Currently translated at 100.0% (738 of 738 strings)

Translation: Habitica/Questscontent
Translate-URL: https://translate.habitica.com/projects/habitica/questscontent/it/

Translated using Weblate (Italian)

Currently translated at 100.0% (371 of 371 strings)

Translation: Habitica/Content
Translate-URL: https://translate.habitica.com/projects/habitica/content/it/

Translated using Weblate (Italian)

Currently translated at 100.0% (119 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/it/

Translated using Weblate (Chinese (Simplified))

Currently translated at 98.3% (117 of 119 strings)

Translation: Habitica/Achievements
Translate-URL: https://translate.habitica.com/projects/habitica/achievements/zh_Hans/

migrations/archive/2021/20210525_pet_color_achievements.js

@@ -0,0 +1,82 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20210525_pet_color_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['Wolf-CottonCandyBlue'] > 0
+      && pets['TigerCub-CottonCandyBlue'] > 0
+      && pets['PandaCub-CottonCandyBlue'] > 0
+      && pets['LionCub-CottonCandyBlue'] > 0
+      && pets['Fox-CottonCandyBlue'] > 0
+      && pets['FlyingPig-CottonCandyBlue'] > 0
+      && pets['Dragon-CottonCandyBlue'] > 0
+      && pets['Cactus-CottonCandyBlue'] > 0
+      && pets['BearCub-CottonCandyBlue'] > 0) {
+        set['achievements.violetsAreBlue'] = true;
+      }
+  }
+
+  if (user && user.items && user.items.mounts) {
+    const mounts = user.items.mounts;
+    if (mounts['Wolf-CottonCandyBlue']
+      && mounts['TigerCub-CottonCandyBlue']
+      && mounts['PandaCub-CottonCandyBlue']
+      && mounts['LionCub-CottonCandyBlue']
+      && mounts['Fox-CottonCandyBlue']
+      && mounts['FlyingPig-CottonCandyBlue']
+      && mounts['Dragon-CottonCandyBlue']
+      && mounts['Cactus-CottonCandyBlue']
+      && mounts['BearCub-CottonCandyBlue'] ) {
+        set['achievements.wildBlueYonder'] = true;
+      }
+  }
+
+  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
+
+  return await User.update({ _id: user._id }, { $set: set }).exec();
+}
+
+module.exports = async function processUsers () {
+  let query = {
+    migration: { $ne: MIGRATION_NAME },
+    'auth.timestamps.loggedin': { $gt: new Date('2021-05-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

migrations/archive/2021/20210824_pet_group_achievements.js

@@ -0,0 +1,138 @@
+/* eslint-disable no-console */
+const MIGRATION_NAME = '20210824_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['FlyingPig-Base']
+      && pets['FlyingPig-CottonCandyBlue']
+      && pets['FlyingPig-CottonCandyPink']
+      && pets['FlyingPig-Desert']
+      && pets['FlyingPig-Golden']
+      && pets['FlyingPig-Red']
+      && pets['FlyingPig-Shade']
+      && pets['FlyingPig-Skeleton']
+      && pets['FlyingPig-White']
+      && pets['FlyingPig-Zombie']
+      && pets['Ferret-Base']
+      && pets['Ferret-CottonCandyBlue']
+      && pets['Ferret-CottonCandyPink']
+      && pets['Ferret-Desert']
+      && pets['Ferret-Golden']
+      && pets['Ferret-Red']
+      && pets['Ferret-Shade']
+      && pets['Ferret-Skeleton']
+      && pets['Ferret-White']
+      && pets['Ferret-Zombie']
+      && pets['GuineaPig-Base']
+      && pets['GuineaPig-CottonCandyBlue']
+      && pets['GuineaPig-CottonCandyPink']
+      && pets['GuineaPig-Desert']
+      && pets['GuineaPig-Golden']
+      && pets['GuineaPig-Red']
+      && pets['GuineaPig-Shade']
+      && pets['GuineaPig-Skeleton']
+      && pets['GuineaPig-White']
+      && pets['GuineaPig-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['Rat-Base']
+      && pets['Rat-CottonCandyBlue']
+      && pets['Rat-CottonCandyPink']
+      && pets['Rat-Desert']
+      && pets['Rat-Golden']
+      && pets['Rat-Red']
+      && pets['Rat-Shade']
+      && pets['Rat-Skeleton']
+      && pets['Rat-White']
+      && pets['Rat-Zombie']
+      && pets['Bunny-Base']
+      && pets['Bunny-CottonCandyBlue']
+      && pets['Bunny-CottonCandyPink']
+      && pets['Bunny-Desert']
+      && pets['Bunny-Golden']
+      && pets['Bunny-Red']
+      && pets['Bunny-Shade']
+      && pets['Bunny-Skeleton']
+      && pets['Bunny-White']
+      && pets['Bunny-Zombie']
+      && pets['Horse-Base']
+      && pets['Horse-CottonCandyBlue']
+      && pets['Horse-CottonCandyPink']
+      && pets['Horse-Desert']
+      && pets['Horse-Golden']
+      && pets['Horse-Red']
+      && pets['Horse-Shade']
+      && pets['Horse-Skeleton']
+      && pets['Horse-White']
+      && pets['Horse-Zombie']
+      && pets['Cow-Base']
+      && pets['Cow-CottonCandyBlue']
+      && pets['Cow-CottonCandyPink']
+      && pets['Cow-Desert']
+      && pets['Cow-Golden']
+      && pets['Cow-Red']
+      && pets['Cow-Shade']
+      && pets['Cow-Skeleton']
+      && pets['Cow-White']
+      && pets['Cow-Zombie']) {
+        set['achievements.domesticated'] = 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('2021-08-01') },
+  };
+
+  const fields = {
+    _id: 1,
+    items: 1,
+  };
+
+  while (true) { // eslint-disable-line no-constant-condition
+    const users = await User // eslint-disable-line no-await-in-loop
+      .find(query)
+      .limit(250)
+      .sort({_id: 1})
+      .select(fields)
+      .lean()
+      .exec();
+
+    if (users.length === 0) {
+      console.warn('All appropriate users found and modified.');
+      console.warn(`\n${count} users processed\n`);
+      break;
+    } else {
+      query._id = {
+        $gt: users[users.length - 1]._id,
+      };
+    }
+
+    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
+  }
+};

package.json

@@ -1,19 +1,19 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "4.192.1",
+  "version": "4.204.2",
   "main": "./website/server/index.js",
   "dependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/register": "^7.13.16",
-    "@google-cloud/trace-agent": "^5.1.3",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/register": "^7.15.3",
+    "@google-cloud/trace-agent": "^5.1.5",
     "@parse/node-apn": "^4.1.1",
     "@slack/webhook": "^6.0.0",
     "accepts": "^1.3.5",
-    "amazon-payments": "^0.2.8",
-    "amplitude": "^5.1.5",
-    "apidoc": "^0.26.0",
+    "amazon-payments": "^0.2.9",
+    "amplitude": "^5.1.6",
+    "apidoc": "^0.29.0",
     "apple-auth": "^1.0.7",
     "bcrypt": "^5.0.1",
     "body-parser": "^1.18.3",
@@ -30,28 +30,28 @@
     "express": "^4.16.3",
     "express-basic-auth": "^1.1.5",
     "express-validator": "^5.2.0",
-    "glob": "^7.1.6",
+    "glob": "^7.1.7",
     "got": "^11.8.2",
     "gulp": "^4.0.0",
     "gulp-babel": "^8.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-nodemon": "^2.5.0",
-    "gulp.spritesmith": "^6.9.0",
+    "gulp.spritesmith": "^6.12.1",
     "habitica-markdown": "^3.0.0",
-    "helmet": "^4.5.0",
+    "helmet": "^4.6.0",
     "image-size": "^1.0.0",
     "in-app-purchase": "^1.11.3",
     "js2xmlparser": "^4.0.1",
     "jsonwebtoken": "^8.5.1",
-    "jwks-rsa": "^2.0.3",
+    "jwks-rsa": "^2.0.4",
     "lodash": "^4.17.21",
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.29.1",
     "moment-recur": "^1.0.7",
-    "mongoose": "^5.12.6",
+    "mongoose": "^5.13.7",
     "morgan": "^1.10.0",
-    "nconf": "^0.11.1",
+    "nconf": "^0.11.3",
     "node-gcm": "^1.0.4",
     "on-headers": "^1.0.2",
     "passport": "^0.4.1",
@@ -61,13 +61,13 @@
     "paypal-rest-sdk": "^1.8.1",
     "pp-ipn": "^1.1.0",
     "ps-tree": "^1.0.0",
-    "rate-limiter-flexible": "^2.2.1",
+    "rate-limiter-flexible": "^2.2.4",
     "redis": "^3.1.2",
-    "regenerator-runtime": "^0.13.7",
+    "regenerator-runtime": "^0.13.9",
     "remove-markdown": "^0.3.0",
     "rimraf": "^3.0.2",
-    "short-uuid": "^4.1.0",
-    "stripe": "^8.145.0",
+    "short-uuid": "^4.2.0",
+    "stripe": "^8.170.0",
     "superagent": "^6.1.0",
     "universal-analytics": "^0.4.23",
     "useragent": "^2.1.9",
@@ -114,16 +114,16 @@
     "chai": "^4.3.4",
     "chai-as-promised": "^7.1.1",
     "chai-moment": "^0.1.0",
-    "chalk": "^4.1.1",
+    "chalk": "^4.1.2",
     "cross-spawn": "^7.0.3",
     "expect.js": "^0.3.1",
     "istanbul": "^1.1.0-alpha.1",
     "mocha": "^5.1.1",
     "monk": "^7.3.4",
     "require-again": "^2.0.0",
-    "run-rs": "^0.7.4",
-    "sinon": "^9.2.4",
-    "sinon-chai": "^3.6.0",
+    "run-rs": "^0.7.5",
+    "sinon": "^10.0.0",
+    "sinon-chai": "^3.7.0",
     "sinon-stub-promise": "^4.0.0"
   },
   "optionalDependencies": {}

scripts/gdpr-delete-users.js

@@ -31,7 +31,6 @@ async function deleteAmplitudeData (userId, email) {
       console.log(`${userId} (${email}) Amplitude response: ${response.status} ${response.statusText}`);
     }
   }
-  await new Promise(resolve => setTimeout(resolve, 1000));
 }
 
 async function deleteHabiticaData (user, email) {
@@ -83,6 +82,7 @@ async function processEmailAddress (email) {
       $or: [
         { 'auth.facebook.emails.value': email },
         { 'auth.google.emails.value': email },
+        { 'auth.apple.emails.value': email },
       ],
     },
     { _id: 1, apiToken: 1, auth: 1 },
@@ -96,6 +96,7 @@ async function processEmailAddress (email) {
     return console.log(`No users found with email address ${email}`);
   }
 
+  await new Promise(resolve => setTimeout(resolve, 1000));
   return Promise.all(users.map(user => (async () => {
     await deleteAmplitudeData(user._id, email); // eslint-disable-line no-await-in-loop
     await deleteHabiticaData(user, email); // eslint-disable-line no-await-in-loop

test/api/unit/libs/webhooks.test.js

@@ -656,9 +656,11 @@ describe('webhooks', () => {
           id: 'group-id',
           name: 'some group',
           otherData: 'foo',
+          quest: {},
         },
         quest: {
           key: 'some-key',
+          questOwner: 'user-id',
         },
       };
     });

test/api/unit/middlewares/cronMiddleware.js

@@ -293,90 +293,4 @@ describe('cron middleware', () => {
       });
     });
   });
-
-  context('Drop Cap A/B Test', async () => {
-    it('enrolls web users', async () => {
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.a.string;
-
-          return resolve();
-        });
-      });
-    });
-
-    it('enables the new notification for 50% of users', async () => {
-      sandbox.stub(Math, 'random').returns(0.5);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.equal('drop-cap-notif-enabled');
-
-          return resolve();
-        });
-      });
-    });
-
-    it('disables the new notification for 50% of users', async () => {
-      sandbox.stub(Math, 'random').returns(0.51);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.be.equal('drop-cap-notif-disabled');
-
-          return resolve();
-        });
-      });
-    });
-
-    it('does not affect subscribers', async () => {
-      sandbox.stub(Math, 'random').returns(0.2);
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-web';
-      sandbox.stub(User.prototype, 'isSubscribed').returns(true);
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.not.exist;
-
-          return resolve();
-        });
-      });
-    });
-
-    it('does not affect mobile users', async () => {
-      user.lastCron = moment(new Date()).subtract({ days: 2 });
-      await user.save();
-      req.headers['x-client'] = 'habitica-ios';
-
-      await new Promise((resolve, reject) => {
-        cronMiddleware(req, res, async err => {
-          if (err) return reject(err);
-          user = await User.findById(user._id).exec();
-          expect(user._ABtests.dropCapNotif).to.not.exist;
-
-          return resolve();
-        });
-      });
-    });
-  });
 });

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

@@ -488,20 +488,6 @@ describe('Group Model', () => {
           expect(party.quest.progress.collect.soapBars).to.eq(5);
         });
 
-        it('does not drop an item if not need when on a collection quest', async () => {
-          party.quest.key = 'dilatoryDistress1';
-          party.quest.active = false;
-          await party.startQuest(questLeader);
-          party.quest.progress.collect.fireCoral = 20;
-          await party.save();
-
-          await Group.processQuestProgress(participatingMember, progress);
-
-          party = await Group.findOne({ _id: party._id });
-
-          expect(party.quest.progress.collect.fireCoral).to.eq(20);
-        });
-
         it('sends a chat message about progress', async () => {
           await Group.processQuestProgress(participatingMember, progress);
 
@@ -538,8 +524,8 @@ describe('Group Model', () => {
           });
         });
 
-        describe('collection quests with multiple items', () => {
-          it('sends a chat message if no progress is made on quest with multiple items', async () => {
+        describe('collection quests with multiple item types', () => {
+          it('sends a chat message if no progress is made', async () => {
             progress.collectedItems = 0;
             party.quest.key = 'dilatoryDistress1';
             party.quest.active = false;
@@ -609,6 +595,28 @@ describe('Group Model', () => {
           });
         });
 
+        it('does not drop items when an item type becomes full', async () => {
+          progress.collectedItems = 20;
+          party.quest.key = 'dilatoryDistress1';
+          party.quest.active = false;
+
+          await party.startQuest(questLeader);
+          party.quest.progress.collect.fireCoral = 19;
+          await party.save();
+
+          await Group.processQuestProgress(participatingMember, progress);
+
+          party = await Group.findOne({ _id: party._id });
+
+          // There is a very small chance (~1 in 500K) that blueFins will
+          // be 19 or 20 due to randomness and not any bug. In these cases, this
+          // test doesn't actually verify anything, but it's rare enough that it
+          // shouldn't be a problem, and to make it deterministic would require
+          // stubbing out methods in implementation-specific ways.
+          expect(party.quest.progress.collect.fireCoral).to.be.within(19, 20);
+          expect(party.quest.progress.collect.blueFins).to.be.within(19, 20);
+        });
+
         it('sends message about victory', async () => {
           progress.collectedItems = 500;
 

test/api/v3/integration/quests/POST-groups_groupId_quests_invite.test.js

@@ -263,6 +263,7 @@ describe('POST /groups/:groupId/quests/invite/:questKey', () => {
         expect(body.group.id).to.eql(questingGroup.id);
         expect(body.group.name).to.eql(questingGroup.name);
         expect(body.quest.key).to.eql(PET_QUEST);
+        expect(body.quest.questOwner).to.eql(questingGroup.leader._id);
       });
     });
   });

test/api/v3/integration/quests/POST-groups_groupid_quests_leave.test.js

@@ -61,15 +61,6 @@ describe('POST /groups/:groupId/quests/leave', () => {
         });
     });
 
-    it('returns an error when quest is not active', async () => {
-      await expect(partyMembers[0].post(`/groups/${questingGroup._id}/quests/leave`))
-        .to.eventually.be.rejected.and.eql({
-          code: 404,
-          error: 'NotFound',
-          message: t('noActiveQuestToLeave'),
-        });
-    });
-
     it('returns an error when quest leader attempts to leave', async () => {
       await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
       await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
@@ -97,18 +88,14 @@ describe('POST /groups/:groupId/quests/leave', () => {
     });
   });
 
-  it('leaves a quest', async () => {
-    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
-    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
-    await partyMembers[1].post(`/groups/${questingGroup._id}/quests/accept`);
-
-    const leaveResult = await partyMembers[0].post(`/groups/${questingGroup._id}/quests/leave`);
+  async function letPartyMemberLeaveAndCheckChanges (partyMember) {
+    const leaveResult = await partyMember.post(`/groups/${questingGroup._id}/quests/leave`);
     await Promise.all([
-      partyMembers[0].sync(),
+      partyMember.sync(),
       questingGroup.sync(),
     ]);
 
-    expect(partyMembers[0].party.quest).to.eql({
+    expect(partyMember.party.quest).to.eql({
       key: null,
       progress: {
         up: 0,
@@ -120,6 +107,29 @@ describe('POST /groups/:groupId/quests/leave', () => {
       RSVPNeeded: false,
     });
     expect(questingGroup.quest).to.deep.equal(leaveResult);
-    expect(questingGroup.quest.members[partyMembers[0]._id]).to.be.false;
+    expect(questingGroup.quest.members[partyMember._id]).to.be.false;
+  }
+
+  it('leaves an active quest', async () => {
+    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
+    await partyMembers[1].post(`/groups/${questingGroup._id}/quests/accept`);
+
+    await questingGroup.sync();
+
+    expect(questingGroup.quest.active).to.eql(true);
+
+    await letPartyMemberLeaveAndCheckChanges(partyMembers[0]);
+  });
+
+  it('leaves an inactive quest ', async () => {
+    await leader.post(`/groups/${questingGroup._id}/quests/invite/${PET_QUEST}`);
+    await partyMembers[0].post(`/groups/${questingGroup._id}/quests/accept`);
+
+    await questingGroup.sync();
+
+    expect(questingGroup.quest.active).to.eql(false);
+
+    await letPartyMemberLeaveAndCheckChanges(partyMembers[0]);
   });
 });

test/common/fns/randomDrop.test.js

@@ -1,5 +1,4 @@
 import randomDrop from '../../../website/common/script/fns/randomDrop';
-import i18n from '../../../website/common/script/i18n';
 import {
   generateUser,
   generateTodo,
@@ -145,148 +144,5 @@ describe('common.fns.randomDrop', () => {
         expect(acceptableDrops).to.contain(user._tmp.drop.key); // always Desert
       });
     });
-
-    context('drop cap notification', () => {
-      let analytics;
-      const req = {};
-      let isSubscribedStub;
-
-      beforeEach(() => {
-        user.addNotification = () => {};
-        sandbox.stub(user, 'addNotification');
-        user.isSubscribed = () => {};
-        isSubscribedStub = sandbox.stub(user, 'isSubscribed');
-        isSubscribedStub.returns(false);
-        analytics = { track () {} };
-        sandbox.stub(analytics, 'track');
-      });
-
-      it('sends a notification if A/B test is enabled when drop cap is reached', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.be.calledOnce;
-        expect(user.addNotification).to.be.calledWith('DROP_CAP_REACHED', {
-          message: i18n.t('dropCapReached'),
-          items: 5,
-        });
-      });
-
-      it('does not send a notification if user is enrolled in disabled A/B test group', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-disabled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('does not send a notification if user is enrolled in disabled A/B test group', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-not-enrolled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('does not send a notification if drop cap is not reached', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(4);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('does not send a notification if user is subscribed', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(user.addNotification).to.not.be.called;
-      });
-
-      it('tracks drop cap reached event for enrolled users (notification enabled)', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-enabled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(analytics.track).to.be.calledWith('drop cap reached');
-      });
-
-      it('tracks drop cap reached event for enrolled users (notification disabled)', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-disabled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(analytics.track).to.be.calledWith('drop cap reached');
-      });
-
-      it('does not track drop cap reached event for users not enrolled in A/B test', () => {
-        user._ABtests.dropCapNotif = 'drop-cap-notif-not-enrolled';
-        predictableRandom.returns(0.1);
-        isSubscribedStub.returns(true);
-
-        // Max Drop Count is 5
-        expect(user.items.lastDrop.count).to.equal(0);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        randomDrop(user, { task, predictableRandom }, req, analytics);
-        expect(user.items.lastDrop.count).to.equal(5);
-        expect(analytics.track).to.not.be.calledWith('drop cap reached');
-      });
-    });
   });
 });

test/common/ops/buy/buyMysterySet.js

@@ -88,14 +88,6 @@ describe('shared.ops.buyMysterySet', () => {
         expect(user.items.gear.owned).to.have.property('armor_mystery_301404', true);
         expect(user.items.gear.owned).to.have.property('head_mystery_301404', true);
         expect(user.items.gear.owned).to.have.property('eyewear_mystery_301404', true);
-        expect(analytics.track).to.be.calledOnce;
-        expect(analytics.track).to.be.calledWithMatch('acquire item', {
-          uuid: user._id,
-          itemKey: '301404',
-          itemType: 'Subscriber Gear',
-          acquireMethod: 'Hourglass',
-          category: 'behavior',
-        });
       });
     });
   });

website/client/.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     // TODO find a way to let eslint understand webpack aliases
     'import/no-unresolved': 'off',
+    'import/extensions': 'off',
     'vue/no-v-html': 'off',
     'vue/html-self-closing': ['error', {
       html: {

website/client/config/storybook/config.js

@@ -2,53 +2,52 @@
 import { configure } from '@storybook/vue';
 import './margin.css';
 import '../../src/assets/scss/index.scss';
-import '../../src/assets/css/sprites.css';
 
-import '../../src/assets/css/sprites/spritesmith-main-0.css';
-import '../../src/assets/css/sprites/spritesmith-main-1.css';
-import '../../src/assets/css/sprites/spritesmith-main-2.css';
-import '../../src/assets/css/sprites/spritesmith-main-3.css';
-import '../../src/assets/css/sprites/spritesmith-main-4.css';
-import '../../src/assets/css/sprites/spritesmith-main-5.css';
-import '../../src/assets/css/sprites/spritesmith-main-6.css';
-import '../../src/assets/css/sprites/spritesmith-main-7.css';
-import '../../src/assets/css/sprites/spritesmith-main-8.css';
-import '../../src/assets/css/sprites/spritesmith-main-9.css';
-import '../../src/assets/css/sprites/spritesmith-main-10.css';
-import '../../src/assets/css/sprites/spritesmith-main-11.css';
-import '../../src/assets/css/sprites/spritesmith-main-12.css';
-import '../../src/assets/css/sprites/spritesmith-main-13.css';
-import '../../src/assets/css/sprites/spritesmith-main-14.css';
-import '../../src/assets/css/sprites/spritesmith-main-15.css';
-import '../../src/assets/css/sprites/spritesmith-main-16.css';
-import '../../src/assets/css/sprites/spritesmith-main-17.css';
-import '../../src/assets/css/sprites/spritesmith-main-18.css';
-import '../../src/assets/css/sprites/spritesmith-main-19.css';
-import '../../src/assets/css/sprites/spritesmith-main-20.css';
-import '../../src/assets/css/sprites/spritesmith-main-21.css';
-import '../../src/assets/css/sprites/spritesmith-main-22.css';
-import '../../src/assets/css/sprites/spritesmith-main-23.css';
-import '../../src/assets/css/sprites/spritesmith-main-24.css';
-import '../../src/assets/css/sprites/spritesmith-main-25.css';
-import '../../src/assets/css/sprites/spritesmith-main-26.css';
+import '../../src/assets/scss/sprites.scss';
+
 import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';
+import getStore from '@/store';
+import '../../src/filters/registerGlobals';
+
+import i18n from '../../../common/script/i18n';
 
 // couldn't inject the languages easily,
 // so just a "$t()" string to show that this will be translated
-Vue.prototype.$t = function translateString (...args) {
+i18n.t = function translateString (...args) {
   return `$t(${JSON.stringify(args)})`;
 };
+Vue.prototype.$t = i18n.t;
 
 Vue.use(BootstrapVue);
 Vue.use(StoreModule);
 
+const store = getStore();
+store.state.user.data = {
+  stats: {},
+  tags: [],
+  items: {
+    quests: {
+      moon1: 3,
+    },
+  },
+  party: {
+    quest: {
+
+    },
+  },
+  preferences: {
+
+  },
+};
+
+Vue.prototype.$store = store;
+
 const req = require.context('../../src', true, /.stories.js$/);
 
 function loadStories () {
   req.keys().forEach(filename => req(filename));
 }
 
-
 configure(loadStories, module);

website/client/config/storybook/margin.css

@@ -3,11 +3,12 @@
     display: inline-block;
 }
 
-.content {
-    color: white;
-    background: grey;
-}
-
 .inline-block {
     display: inline-block;
 }
+
+.component-showcase {
+    position: absolute;
+    margin: 20px;
+    width: calc(100% - 40px);
+}

website/client/config/storybook/mock.data.js

@@ -1,3 +1,5 @@
+import { v4 as generateUUID } from 'uuid';
+
 export const userStyles = {
   contributor: {
     admin: true,
@@ -72,4 +74,11 @@ export const userStyles = {
     maxHealth: 50,
     maxMP: 158,
   },
+  profile: {
+    name: 'user',
+  },
+  _id: generateUUID(),
+  flags: {
+    classSelected: true,
+  },
 };

website/client/package.json

@@ -13,38 +13,38 @@
     "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-knobs": "^6.1.15",
-    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-knobs": "^6.3.0",
+    "@storybook/addon-links": "^6.3.7",
     "@storybook/addon-notes": "^5.3.21",
-    "@storybook/vue": "^6.2.9",
-    "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-eslint": "^4.5.11",
-    "@vue/cli-plugin-router": "^4.5.12",
-    "@vue/cli-plugin-unit-mocha": "^4.5.11",
-    "@vue/cli-service": "^4.5.12",
+    "@storybook/vue": "^6.3.7",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-router": "^4.5.13",
+    "@vue/cli-plugin-unit-mocha": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
     "@vue/test-utils": "1.0.0-beta.29",
-    "amplitude-js": "^8.1.0",
+    "amplitude-js": "^8.5.0",
     "axios": "^0.21.1",
     "axios-progress-bar": "^1.2.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.21.2",
     "chai": "^4.3.4",
-    "core-js": "^3.11.1",
+    "core-js": "^3.16.2",
     "eslint": "^6.8.0",
     "eslint-config-habitrpg": "^6.2.0",
     "eslint-plugin-mocha": "^5.3.0",
     "eslint-plugin-vue": "^6.2.2",
     "habitica-markdown": "^3.0.0",
-    "hellojs": "^1.19.3",
-    "inspectpack": "^4.6.1",
-    "intro.js": "^3.4.0",
-    "jquery": "^3.5.1",
+    "hellojs": "^1.19.4",
+    "inspectpack": "^4.7.1",
+    "intro.js": "^4.1.0",
+    "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "nconf": "^0.11.2",
-    "sass": "^1.32.11",
+    "nconf": "^0.11.3",
+    "sass": "^1.34.0",
     "sass-loader": "^8.0.2",
     "smartbanner.js": "^1.16.0",
     "svg-inline-loader": "^0.8.2",
@@ -53,16 +53,16 @@
     "svgo-loader": "^2.2.1",
     "uuid": "^8.3.2",
     "validator": "^13.6.0",
-    "vue": "^2.6.12",
-    "vue-cli-plugin-storybook": "^2.0.0",
+    "vue": "^2.6.14",
+    "vue-cli-plugin-storybook": "^2.1.0",
     "vue-mugen-scroll": "^0.2.6",
-    "vue-router": "^3.5.1",
-    "vue-template-compiler": "^2.6.12",
+    "vue-router": "^3.5.2",
+    "vue-template-compiler": "^2.6.14",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0",
     "webpack": "^4.46.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.13.12"
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5"
   }
 }

website/client/scripts/npm-postinstall.js

@@ -7,7 +7,7 @@ if (process.env.NODE_ENV === 'production') {
     stdio: 'inherit',
   });
 
-  execSync('npm run storybook:build', {
+  /* execSync('npm run storybook:build', {
     stdio: 'inherit',
-  });
+  }); */
 }

website/client/src/app.vue

@@ -261,6 +261,12 @@ export default {
       this.$root.$emit('bv::show::modal', 'buy-modal');
     });
 
+    this.$root.$on('bv::modal::hidden', event => {
+      if (event.componentId === 'buy-modal') {
+        this.$root.$emit('buyModal::hidden', this.selectedItemToBuy.key);
+      }
+    });
+
     this.$root.$on('selectMembersModal::showItem', item => {
       this.selectedSpellToBuy = item;
       this.$root.$emit('bv::show::modal', 'select-member-modal');
@@ -514,36 +520,5 @@ export default {
 <style src="axios-progress-bar/dist/nprogress.css"></style>
 <style src="@/assets/scss/index.scss" lang="scss"></style>
 <style src="@/assets/css/sprites/spritesmith-largeSprites-0.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-0.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-1.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-2.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-3.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-4.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-5.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-6.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-7.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-8.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-9.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-10.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-11.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-12.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-13.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-14.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-15.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-16.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-17.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-18.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-19.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-20.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-21.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-22.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-23.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-24.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-25.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-26.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-27.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-28.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-29.css"></style>
-<style src="@/assets/css/sprites/spritesmith-main-30.css"></style>
-<style src="@/assets/css/sprites.css"></style>
+<style src="@/assets/scss/sprites.scss" lang="scss"></style>
 <style src="smartbanner.js/dist/smartbanner.min.css"></style>

website/client/src/assets/css/sprites.css

@@ -10,6 +10,12 @@
   height: 219px;
 }
 
+.quest_solarSystem {
+  background: url("~@/assets/images/animated/quest_solarSystem.gif") no-repeat;
+  width: 219px;
+  height: 219px;
+}
+
 .Pet_HatchingPotion_Dessert, .Pet_HatchingPotion_Veggie, .Pet_HatchingPotion_Windup {
   width: 68px;
   height: 68px;

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

@@ -1,846 +1,816 @@
-.background_holiday_hearth {
+.background_haunted_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px 0px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_market {
+.background_haunted_house {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px 0px;
   width: 141px;
   height: 147px;
 }
-.background_holiday_wreath {
+.background_heart_shaped_bubbles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px 0px;
   width: 141px;
   height: 147px;
 }
-.background_hot_air_balloon {
+.background_heather_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -148px;
   width: 141px;
   height: 147px;
 }
-.background_hot_spring {
+.background_herding_sheep_in_autumn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -148px;
   width: 141px;
   height: 147px;
 }
-.background_ice_cave {
+.background_holiday_hearth {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -148px;
   width: 141px;
   height: 147px;
 }
-.background_iceberg {
+.background_holiday_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px 0px;
   width: 141px;
   height: 147px;
 }
-.background_icicle_bridge {
+.background_holiday_wreath {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -148px;
   width: 141px;
   height: 147px;
 }
-.background_idyllic_cabin {
+.background_hot_air_balloon {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_a_classroom {
+.background_hot_spring {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_an_ancient_tomb {
+.background_ice_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -296px;
   width: 141px;
   height: 147px;
 }
-.background_in_the_armory {
+.background_iceberg {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -296px;
   width: 141px;
   height: 147px;
 }
-.background_inside_an_ornament {
+.background_icicle_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px 0px;
   width: 141px;
   height: 147px;
 }
-.background_island_waterfalls {
+.background_idyllic_cabin {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -148px;
   width: 141px;
   height: 147px;
 }
-.background_jungle_canopy {
+.background_in_a_classroom {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -296px;
   width: 141px;
   height: 147px;
 }
-.background_kelp_forest {
+.background_in_an_ancient_tomb {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lake_with_floating_lanterns {
+.background_in_the_armory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lighthouse_shore {
+.background_inside_an_ornament {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -444px;
   width: 141px;
   height: 147px;
 }
-.background_lilypad {
+.background_island_waterfalls {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magic_beanstalk {
+.background_jungle_canopy {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -444px;
   width: 141px;
   height: 147px;
 }
-.background_magical_candles {
+.background_kelp_forest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px 0px;
   width: 141px;
   height: 147px;
 }
-.background_magical_museum {
+.background_lake_with_floating_lanterns {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -148px;
   width: 141px;
   height: 147px;
 }
-.background_marble_temple {
+.background_lighthouse_shore {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -296px;
   width: 141px;
   height: 147px;
 }
-.background_market {
+.background_lilypad {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -444px;
   width: 141px;
   height: 147px;
 }
-.background_meandering_cave {
+.background_magic_beanstalk {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -592px;
   width: 141px;
   height: 147px;
 }
-.background_medieval_kitchen {
+.background_magical_candles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -592px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_castle {
+.background_magical_museum {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -592px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_clouds {
+.background_marble_temple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -592px;
   width: 141px;
   height: 147px;
 }
-.background_midnight_lake {
+.background_market {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -592px;
   width: 141px;
   height: 147px;
 }
-.background_mist_shrouded_mountain {
+.background_meandering_cave {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -592px;
   width: 141px;
   height: 147px;
 }
-.background_mistiflying_circus {
+.background_medieval_kitchen {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px 0px;
   width: 141px;
   height: 147px;
 }
-.background_monster_makers_workshop {
+.background_midnight_castle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -148px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_lake {
+.background_midnight_clouds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -296px;
   width: 141px;
   height: 147px;
 }
-.background_mountain_pyramid {
+.background_midnight_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -444px;
   width: 141px;
   height: 147px;
 }
-.background_mystical_observatory {
+.background_mist_shrouded_mountain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -592px;
   width: 141px;
   height: 147px;
 }
-.background_night_dunes {
+.background_mistiflying_circus {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -740px;
   width: 141px;
   height: 147px;
 }
-.background_ocean_sunrise {
+.background_monster_makers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -740px;
   width: 141px;
   height: 147px;
 }
-.background_old_fashioned_bakery {
+.background_mountain_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -740px;
   width: 141px;
   height: 147px;
 }
-.background_on_tree_branch {
+.background_mountain_pyramid {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -740px;
   width: 141px;
   height: 147px;
 }
-.background_open_waters {
+.background_mystical_observatory {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -740px;
   width: 141px;
   height: 147px;
 }
-.background_orchard {
+.background_night_dunes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -740px;
   width: 141px;
   height: 147px;
 }
-.background_pagodas {
+.background_ocean_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -740px;
   width: 141px;
   height: 147px;
 }
-.background_park_with_statue {
+.background_old_fashioned_bakery {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px 0px;
   width: 141px;
   height: 147px;
 }
-.background_pirate_flag {
+.background_on_tree_branch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -148px;
   width: 141px;
   height: 147px;
 }
-.background_pixelists_workshop {
+.background_open_waters {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -296px;
   width: 141px;
   height: 147px;
 }
-.background_potion_shop {
+.background_orchard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -444px;
   width: 141px;
   height: 147px;
 }
-.background_productivity_plaza {
+.background_pagodas {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -592px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_carriage {
+.background_park_with_statue {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -740px;
   width: 141px;
   height: 147px;
 }
-.background_pumpkin_patch {
+.background_pirate_flag {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -888px;
   width: 141px;
   height: 147px;
 }
-.background_purple {
+.background_pixelists_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -888px;
   width: 141px;
   height: 147px;
 }
-.background_pyramids {
+.background_potion_shop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainbow_meadow {
+.background_productivity_plaza {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainbows_end {
+.background_pumpkin_carriage {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainforest {
+.background_pumpkin_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_barnyard {
+.background_purple {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -888px;
   width: 141px;
   height: 147px;
 }
-.background_rainy_city {
+.background_pyramids {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -888px;
   width: 141px;
   height: 147px;
 }
-.background_red {
+.background_raging_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px 0px;
   width: 141px;
   height: 147px;
 }
-.background_relaxation_river {
+.background_rainbow_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -148px;
   width: 141px;
   height: 147px;
 }
-.background_resting_in_the_inn {
+.background_rainbows_end {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -296px;
   width: 141px;
   height: 147px;
 }
-.background_river_of_lava {
+.background_rainforest {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -444px;
   width: 141px;
   height: 147px;
 }
-.background_rolling_hills {
+.background_rainy_barnyard {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -592px;
   width: 141px;
   height: 147px;
 }
-.background_rose_garden {
+.background_rainy_city {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -740px;
   width: 141px;
   height: 147px;
 }
-.background_rowboat {
+.background_red {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -888px;
   width: 141px;
   height: 147px;
 }
-.background_salt_lake {
+.background_relaxation_river {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_sandcastle {
+.background_resting_in_the_inn {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_school_of_fish {
+.background_river_of_lava {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_scribes_workshop {
+.background_rolling_hills {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_seafarer_ship {
+.background_rope_bridge {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_seaside_cliffs {
+.background_rose_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_shimmering_ice_prism {
+.background_rowboat {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_shimmery_bubbles {
+.background_salt_lake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_slimy_swamp {
+.background_sandcastle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_snowglobe {
+.background_school_of_fish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px 0px;
   width: 141px;
   height: 147px;
 }
-.background_snowman_army {
+.background_scribes_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -148px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_day_fireplace {
+.background_seafarer_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -296px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_pines {
+.background_seaside_cliffs {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -444px;
   width: 141px;
   height: 147px;
 }
-.background_snowy_sunrise {
+.background_shimmering_ice_prism {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -592px;
   width: 141px;
   height: 147px;
 }
-.background_south_pole {
+.background_shimmery_bubbles {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -740px;
   width: 141px;
   height: 147px;
 }
-.background_sparkling_snowflake {
+.background_slimy_swamp {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -888px;
   width: 141px;
   height: 147px;
 }
-.background_spider_web {
+.background_snowglobe {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_splash_in_a_puddle {
+.background_snowman_army {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_hotel {
+.background_snowy_day_fireplace {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spooky_scarecrow_field {
+.background_snowy_pines {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spring_rain {
+.background_snowy_sunrise {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_spring_thaw {
+.background_south_pole {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stable {
+.background_sparkling_snowflake {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stained_glass {
+.background_spider_web {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_starry_skies {
+.background_splash_in_a_puddle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_starry_winter_night {
+.background_spooky_hotel {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stoikalm_volcanoes {
+.background_spooky_scarecrow_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_stone_circle {
+.background_spring_rain {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px 0px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_rooftops {
+.background_spring_thaw {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -148px;
   width: 141px;
   height: 147px;
 }
-.background_stormy_ship {
+.background_stable {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -296px;
   width: 141px;
   height: 147px;
 }
-.background_strange_sewers {
+.background_stained_glass {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -444px;
   width: 141px;
   height: 147px;
 }
-.background_strawberry_patch {
+.background_starry_skies {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -592px;
   width: 141px;
   height: 147px;
 }
-.background_succulent_garden {
+.background_starry_winter_night {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -740px;
   width: 141px;
   height: 147px;
 }
-.background_summer_fireworks {
+.background_stoikalm_volcanoes {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -888px;
   width: 141px;
   height: 147px;
 }
-.background_sunken_ship {
+.background_stone_circle {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_meadow {
+.background_stone_tower {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_oasis {
+.background_stormy_rooftops {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_sunset_savannah {
+.background_stormy_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_swarming_darkness {
+.background_strange_sewers {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_swimming_among_jellyfish {
+.background_strawberry_patch {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tar_pits {
+.background_succulent_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tavern {
+.background_summer_fireworks {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tea_party {
+.background_sunken_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_terraced_rice_field {
+.background_sunset_meadow {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_throne_room {
+.background_sunset_oasis {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_thunderstorm {
+.background_sunset_savannah {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tide_pool {
+.background_swarming_darkness {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_tornado {
+.background_swimming_among_jellyfish {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px 0px;
   width: 141px;
   height: 147px;
 }
-.background_toymakers_workshop {
+.background_tar_pits {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -148px;
   width: 141px;
   height: 147px;
 }
-.background_training_grounds {
+.background_tavern {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -296px;
   width: 141px;
   height: 147px;
 }
-.background_treasure_room {
+.background_tea_party {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -444px;
   width: 141px;
   height: 147px;
 }
-.background_tree_roots {
+.background_terraced_rice_field {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -592px;
   width: 141px;
   height: 147px;
 }
-.background_treehouse {
+.background_throne_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -740px;
   width: 141px;
   height: 147px;
 }
-.background_tulip_garden {
+.background_thunderstorm {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -888px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_lights {
+.background_tide_pool {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1036px;
   width: 141px;
   height: 147px;
 }
-.background_twinkly_party_lights {
+.background_tornado {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1184px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_ruins {
+.background_toymakers_workshop {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1332px;
   width: 141px;
   height: 147px;
 }
-.background_underwater_vents {
+.background_training_grounds {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: 0px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_valentines_day_feasting_hall {
+.background_treasure_room {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -142px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_viking_ship {
+.background_tree_roots {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -284px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_violet {
+.background_treehouse {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -426px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_volcano {
+.background_tulip_garden {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -568px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_waterfall_rock {
+.background_twinkly_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -710px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_wedding_arch {
+.background_twinkly_party_lights {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -852px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_windmills {
+.background_underwater_among_koi {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -994px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_windy_autumn {
+.background_underwater_ruins {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1136px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_fireworks {
+.background_underwater_vents {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1278px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_night {
+.background_valentines_day_feasting_hall {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1420px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_nocturne {
+.background_viking_ship {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1562px -1480px;
   width: 141px;
   height: 147px;
 }
-.background_winter_storefront {
+.background_violet {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px 0px;
   width: 141px;
   height: 147px;
 }
-.background_winter_town {
+.background_volcano {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -148px;
   width: 141px;
   height: 147px;
 }
-.background_wintry_castle {
+.background_water_mill {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -296px;
   width: 141px;
   height: 147px;
 }
-.background_yellow {
+.background_waterfall_rock {
   background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
   background-position: -1704px -444px;
   width: 141px;
   height: 147px;
 }
-.icon_background_afternoon_picnic {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -592px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_airship {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1773px -592px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_alpine_slopes {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -661px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_amid_ancient_ruins {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1773px -661px;
-  width: 68px;
-  height: 68px;
-}
-.icon_background_among_cattails {
-  background-image: url('~@/assets/images/sprites/spritesmith-main-1.png');
-  background-position: -1704px -730px;
-  width: 68px;
-  height: 68px;
-}

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

@@ -0,0 +1,438 @@
+.Pet-Wolf-Sunset {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veggie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Veteran {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Windup {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Wolf-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -100px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -200px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -82px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -164px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -246px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -328px -300px;
+  width: 81px;
+  height: 99px;
+}
+.Pet-Yarn-Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px 0px;
+  width: 81px;
+  height: 99px;
+}
+.Pet_HatchingPotion_Amber {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -100px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aquatic {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -169px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Aurora {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -238px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_AutumnLeaf {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -410px -307px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Base {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BirchBark {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_BlackPearl {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Bronze {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Celestial {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyBlue {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_CottonCandyPink {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -400px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Cupid {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Desert {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ember {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fairy {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Floral {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Fluorite {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -492px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Frost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ghost {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Glow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Golden {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Holly {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_IcySnow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Moonglow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -483px -469px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_MossyStone {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Peppermint {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_PolkaDot {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Purple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Rainbow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Red {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoseQuartz {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -561px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_RoyalPurple {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Ruby {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SandSculpture {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shade {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -207px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shadow {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -276px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Shimmer {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -345px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Silver {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -414px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Skeleton {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -483px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_SolarSystem {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -552px -538px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Spooky {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px 0px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StainedGlass {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -69px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_StarryNight {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -138px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunset {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -207px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Sunshine {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -276px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Thunderstorm {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -345px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Turquoise {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -414px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Vampire {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -630px -483px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Watery {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: 0px -607px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_White {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -69px -607px;
+  width: 68px;
+  height: 68px;
+}
+.Pet_HatchingPotion_Zombie {
+  background-image: url('~@/assets/images/sprites/spritesmith-main-31.png');
+  background-position: -138px -607px;
+  width: 68px;
+  height: 68px;
+}

website/client/src/assets/scss/dropdown.scss

@@ -39,6 +39,7 @@
 // shared dropdown-item styles
 .dropdown-item {
   // header items & not selectList-items
+
   padding-left: 24px;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -53,14 +54,13 @@
     background-color: inherit;
   }
 
-
   &:active, &:hover, &:focus, &.active {
     background-color: inherit !important;
-    color: $purple-300 !important;
+    color: var(--hover-color, $purple-300) !important;
   }
 
   &:hover {
-    background-color: rgba($purple-600, 0.25) !important;
+    background-color: var(--hover-background, rgba($purple-600, 0.25)) !important;
   }
 
   &.dropdown-inactive {
@@ -71,6 +71,21 @@
       color: inherit !important;
     }
   }
+
+  .with-icon {
+    display: flex;
+    align-items: center;
+
+    .svg-icon {
+      margin: 0 0.5rem 0 0;
+    }
+  }
+
+  &:not(:hover) {
+    .with-icon .svg-icon {
+      color: $gray-200;
+    }
+  }
 }
 
 .dropdown + .dropdown {

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

@@ -16,6 +16,12 @@
       fill: currentColor;
     }
   }
+
+  &.color-stroke {
+    svg path {
+      stroke: currentColor;
+    }
+  }
 }
 
 .icon-16 {
@@ -33,6 +39,11 @@
   height: 24px;
 }
 
+.icon-48 {
+  width: 48px;
+  height: 48px;
+}
+
 .icon-10 {
   width: 10px;
   height: 10px;

website/client/src/assets/scss/item.scss

@@ -107,5 +107,5 @@
 }
 
 .questPopover {
-  width: 200px;
+  min-width: 200px;
 }

website/client/src/assets/scss/modal.scss

@@ -41,88 +41,6 @@
   }
 }
 
-#start-quest-modal, #buy-quest-modal {
-  @media only screen and (max-width: 1200px) {
-    .modal-dialog {
-      max-width: 33%;
-
-      .left-panel {
-        left: initial;
-        width: 100%;
-        right: 100%;
-
-        .col-4 {
-          width: 100px;
-        }
-      }
-
-      .side-panel, .right-sidebar {
-        left: calc(100% - 10px);
-        max-width: 100%;
-        right: initial;
-
-        .questRewards {
-          width: 90%;
-
-          .reward-item {
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  @media only screen and (max-width: 1000px) {
-    .modal-dialog {
-      max-width: 80%;
-      width: 80% !important;
-
-      .modal-body {
-        flex-direction: column;
-        display: flex;
-
-        div:nth-child(1) { order: 3; }
-        div:nth-child(2) { order: 1; }
-        div:nth-child(3) { order: 4; }
-        div:nth-child(4) { order: 5; }
-        div:nth-child(5) { order: 2; }
-
-        .left-panel {
-          border-radius: 8px;
-          position: static;
-          right: initial;
-          margin: 20px 0;
-          height: auto;
-          width: 100%;
-          z-index: 0;
-          order: 3;
-
-          .col-4 {
-            max-width: 100px;
-          }
-        }
-
-        .side-panel, .right-sidebar {
-          margin: 20px 0 0 0;
-          position: static;
-          box-shadow: none;
-          height: auto;
-          width: 100%;
-          z-index: 0;
-          order: 2;
-          left: 0;
-
-          .questRewards {
-            padding: 0 2em 2em 2em;
-            width: 100%;
-            z-index: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
 #subscription-cancel-modal, #subscription-canceled-modal {
   .modal-content {
     background: transparent;

website/client/src/assets/scss/sprites.scss

@@ -0,0 +1,5 @@
+@import url("../css/sprites.css");
+
+@for $i from 0 through 31 {
+  @import url("../css/sprites/spritesmith-main-#{$i}.css");
+}

website/client/src/assets/svg/health_no_padding.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g>
+                    <path fill="#F74E52" d="M0 2L3.333 0 8 2.533 12.667 0 16 2 16 8 12.667 12.667 8 16 3.333 12.667 0 8z" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FF6165" d="M4.267 11.733L1.333 7.6 1.333 2.733 3.333 1.533 8 4.067 12.667 1.533 14.667 2.733 14.667 7.6 11.733 11.733 8 14.333z" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L11.733 11.733 8 14.333z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L4.267 11.733 8 14.333z" opacity=".35" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M4.267 11.733L1.333 7.6 8 9.667z" opacity=".25" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M11.733 11.733L14.667 7.6 8 9.667z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L12.667 1.533 14.667 2.733 14.667 7.6z" opacity=".35" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#B52428" d="M8 9.667L3.333 1.533 1.333 2.733 1.333 7.6z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L3.333 1.533 8 4.067z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M8 9.667L12.667 1.533 8 4.067z" opacity=".25" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                    <path fill="#FFF" d="M5.733 10.267L3.333 6.933 3.333 3.867 3.4 3.867 8 6.333 12.6 3.867 12.667 3.867 12.667 6.933 10.267 10.267 8 11.933z" opacity=".5" transform="translate(-40 -2020) translate(0 1632) translate(40 388)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

website/client/src/assets/svg/leave.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <path id="xnmy9c4dda" d="M11 6H6V3L0 8l6 5v-3h5V6zm5-4v12c0 1.104-.896 2-2 2H9v-2h5V2H9V0h5c1.104 0 2 .896 2 2z"/>
+</svg>

website/client/src/assets/svg/level.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="17"><defs><path id="a" d="M10 13v1H6v-1h4zm0-2v1H6v-1h4zM8 2l5 6h-3v2H6V8H3l5-6z"/></defs><g transform="rotate(-90 8 8)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#BDA8FF" xlink:href="#a"/><g fill="#878190" mask="url(#b)"><path d="M0 0h16v16H0z"/></g></g></svg>

website/client/src/assets/svg/navigation_back.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9" height="14" viewBox="0 0 9 14">
+    <defs>
+        <path id="lvd11k063a" d="M3.75 13.36L5.487 15.125 12.25 8.25 5.487 1.375 3.75 3.14 8.776 8.25z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g transform="translate(-640 -837) translate(496 56) rotate(90 -311.5 468.5)">
+                    <use fill="#46a7d9" fill-rule="nonzero" transform="rotate(90 8 8.25)" xlink:href="#lvd11k063a"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

website/client/src/assets/svg/rage.svg

@@ -1,18 +1,26 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
-    <g fill="none" fill-rule="nonzero">
-        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
-        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
-        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
-        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
-        <path fill="#5AE4B2" d="M6.667 5.2v8.4L1.733 6.2z"/>
-        <path fill="#1B996B" d="M11.6 6.2l-4.933 7.4V5.2z" opacity=".35"/>
-        <path fill="#F47825" d="M13.333 6L6.667 0 0 6l1.333 2L0 10l6.667 6 6.666-6L12 8z"/>
-        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
-        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
-        <path fill="#FFF" d="M6.667 5.2v8.4L5.37 11.653 1.733 6.2zM6.667 10.8V2.4l1.296 1.947L11.6 9.8z" opacity=".25"/>
-        <path fill="#B4591B" d="M11.6 6.2l-4.933 7.4V5.2zM1.733 9.8l4.934 1v3.4z" opacity=".35"/>
-        <path fill="#FFF" d="M6.667 10.8l4.933-1-4.933 4.4z" opacity=".5"/>
-        <path fill="#FFF" d="M1.733 9.8l4.934-7.4v8.4z" opacity=".25"/>
-        <path fill="#FFF" d="M3.5 9.533L4.54 8 3.5 6.467l3.167-2.8 3.166 2.8L8.793 8l1.04 1.533-3.166 2.8z" opacity=".5"/>
+    <g fill="none" fill-rule="evenodd">
+        <g fill-rule="nonzero">
+            <g>
+                <g>
+                    <g>
+                        <path fill="#24CC8F" d="M0 6L5.833 0 11.667 6 5.833 16z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#24CC8F" d="M0 6L5.833 0 11.667 6 5.833 16z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M10.15 6.2L5.833 5.2 5.833 1.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L1.517 6.2 5.833 1.8z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#5AE4B2" d="M5.833 5.2L5.833 13.6 1.517 6.2z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#1B996B" d="M10.15 6.2L5.833 13.6 5.833 5.2z" opacity=".35" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#F47825" d="M11.667 6L5.833 0 0 6 1.167 8 0 10 5.833 16 11.667 10 10.5 8z" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M10.15 6.2L5.833 5.2 5.833 1.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L1.517 6.2 5.833 1.8z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 5.2L5.833 13.6 4.699 11.653 1.517 6.2zM5.833 10.8L5.833 2.4 6.968 4.347 10.15 9.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#B4591B" d="M10.15 6.2L5.833 13.6 5.833 5.2zM1.517 9.8L5.833 10.8 5.833 14.2z" opacity=".35" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M5.833 10.8L10.15 9.8 5.833 14.2z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M1.517 9.8L5.833 2.4 5.833 10.8z" opacity=".25" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                        <path fill="#FFF" d="M3.063 9.533L3.973 8 3.063 6.467 5.833 3.667 8.604 6.467 7.694 8 8.604 9.533 5.833 12.333z" opacity=".5" transform="translate(-524 -2070) translate(484 1632) translate(40 438) translate(.875)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
     </g>
 </svg>

website/client/src/assets/svg/sparklesIcon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+        <path id="re6owe1t5a" d="M7 10l1.06 1.94L10 13l-1.94 1.06L7 16l-1.06-1.94L4 13l1.94-1.06L7 10zm5.5-6l1.237 2.263L16 7.5l-2.263 1.237L12.5 11l-1.237-2.263L9 7.5l2.263-1.237L12.5 4zM4 0l1.414 2.586L8 4 5.414 5.414 4 8 2.586 5.414 0 4l2.586-1.414L4 0z"/>
+</svg>