update privacy policy

.babelrc

@@ -1,12 +1,12 @@
 {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": true
-          }
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": true
         }
-      ]
+      }
     ]
-  }
+  ]
+}

.gitignore

@@ -47,5 +47,5 @@ webpack.webstorm.config
 
 # mongodb replica set for local dev
 mongodb-*.tgz
-/mongodb-data*
+/mongodb-data
 /.nyc_output

gulp/gulp-start.js

@@ -0,0 +1,11 @@
+import gulp from 'gulp';
+import nodemon from 'gulp-nodemon';
+
+import pkg from '../package.json';
+
+gulp.task('nodemon', done => {
+  nodemon({
+    script: pkg.main,
+  });
+  done();
+});

gulp/gulp-tests.js

@@ -49,6 +49,12 @@ function integrationTestCommand (testDir) {
 }
 
 /* Test task definitions */
+gulp.task('test:nodemon', gulp.series(done => {
+  process.env.PORT = TEST_SERVER_PORT; // eslint-disable-line no-process-env
+  process.env.NODE_DB_URI = TEST_DB_URI; // eslint-disable-line no-process-env
+  done();
+}, 'nodemon'));
+
 gulp.task('test:prepare:mongo', cb => {
   const mongooseOptions = getDefaultConnectionOptions();
   const connectionUrl = getDevelopmentConnectionUrl(TEST_DB_URI);

gulpfile.js

@@ -21,6 +21,7 @@ if (process.env.NODE_ENV === 'production') { // eslint-disable-line no-process-e
   require('./gulp/gulp-build'); // eslint-disable-line global-require
   require('./gulp/gulp-console'); // eslint-disable-line global-require
   require('./gulp/gulp-sprites'); // eslint-disable-line global-require
+  require('./gulp/gulp-start'); // eslint-disable-line global-require
   require('./gulp/gulp-tests'); // eslint-disable-line global-require
   require('./gulp/gulp-transifex-test'); // eslint-disable-line global-require
   require('gulp').task('default', gulp.series('test')); // eslint-disable-line global-require

migrations/archive/api_v3/groups.js

@@ -37,7 +37,7 @@ let consoleStamp = require('console-stamp');
 consoleStamp(console);
 
 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf').default();
+require('../../website/server/libs/api-v3/setupNconf')();
 
 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');

migrations/archive/api_v3/users.js

@@ -32,7 +32,7 @@ let moment = require('moment');
 consoleStamp(console);
 
 // Initialize configuration
-require('../../website/server/libs/api-v3/setupNconf').default();
+require('../../website/server/libs/api-v3/setupNconf')();
 
 let MONGODB_OLD = nconf.get('MONGODB_OLD');
 let MONGODB_NEW = nconf.get('MONGODB_NEW');

migrations/migration-runner.js

@@ -6,7 +6,7 @@ require('@babel/register'); // eslint-disable-line import/no-extraneous-dependen
 function setUpServer () {
   const nconf = require('nconf'); // eslint-disable-line global-require, no-unused-vars
   const mongoose = require('mongoose'); // eslint-disable-line global-require, no-unused-vars
-  const setupNconf = require('../website/server/libs/setupNconf').default; // eslint-disable-line global-require
+  const setupNconf = require('../website/server/libs/setupNconf'); // eslint-disable-line global-require
 
   setupNconf();
 

migrations/users/bulk-email.js

@@ -26,7 +26,7 @@ async function updateUser (user) {
     [{ name: 'BASE_URL', content: BASE_URL }], // Add variables from template
   );
 
-  return User.updateOne({ _id: user._id }, { $set: { migration: MIGRATION_NAME } }).exec();
+  return User.update({ _id: user._id }, { $set: { migration: MIGRATION_NAME } }).exec();
 }
 
 export default async function processUsers () {

migrations/users/full-gear.js

@@ -27,13 +27,13 @@ async function updateUser (user) {
 
   if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
 
-  return User.updateOne({ _id: user._id }, { $set: set }).exec();
+  return User.update({ _id: user._id }, { $set: set }).exec();
 }
 
 export default async function processUsers () {
   const query = {
     migration: { $ne: MIGRATION_NAME },
-    'auth.local.username': 'ExampleHabitican',
+    'auth.local.lowerCaseUsername': 'olson1',
   };
 
   const fields = {

migrations/users/full-stable.js

@@ -57,7 +57,7 @@ async function updateUser (user) {
 export default async function processUsers () {
   const query = {
     migration: { $ne: MIGRATION_NAME },
-    'auth.local.username': 'ExampleHabitican',
+    'auth.local.username': 'SabreTest',
   };
 
   const fields = {

migrations/users/nye.js

@@ -1,125 +0,0 @@
-/* eslint-disable no-console */
-import { model as User } from '../../website/server/models/user';
-
-const MIGRATION_NAME = '20231228_nye';
-const progressCount = 1000;
-let count = 0;
-
-async function updateUser (user) {
-  count += 1;
-
-  const updateOp = {
-    $set: { migration: MIGRATION_NAME },
-    $push: { },
-  };
-  const data = {
-    title: 'Happy New Year!',
-    destination: '/inventory/equipment',
-  };
-
-  if (typeof user.items.gear.owned.head_special_nye2023 !== 'undefined') {
-    updateOp.$inc = {
-      'items.food.Candy_Skeleton': 1,
-      'items.food.Candy_Base': 1,
-      'items.food.Candy_CottonCandyBlue': 1,
-      'items.food.Candy_CottonCandyPink': 1,
-      'items.food.Candy_Shade': 1,
-      'items.food.Candy_White': 1,
-      'items.food.Candy_Golden': 1,
-      'items.food.Candy_Zombie': 1,
-      'items.food.Candy_Desert': 1,
-      'items.food.Candy_Red': 1,
-    };
-    data.icon = 'notif_candy_nye';
-    data.text = 'You’ve received an assortment of candy to celebrate with your Pets!';
-    data.destination = '/inventory/stable';
-  } else if (typeof user.items.gear.owned.head_special_nye2022 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2023'] = true;
-    data.icon = 'notif_2023hat_nye';
-    data.text = 'Take on your resolutions with style in this Ludicrous Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2021 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2022'] = true;
-    data.icon = 'notif_2022hat_nye';
-    data.text = 'Take on your resolutions with style in this Fabulous Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2020 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2021'] = true;
-    data.icon = 'notif_2021hat_nye';
-    data.text = 'Take on your resolutions with style in this Preposterous Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2019 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2020'] = true;
-    data.icon = 'notif_2020hat_nye';
-    data.text = 'Take on your resolutions with style in this Extravagant Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2018 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2019'] = true;
-    data.icon = 'notif_2019hat_nye';
-    data.text = 'Take on your resolutions with style in this Outrageous Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2017 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2018'] = true;
-    data.icon = 'notif_2018hat_nye';
-    data.text = 'Take on your resolutions with style in this Outlandish Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2016 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2017'] = true;
-    data.icon = 'notif_2017hat_nye';
-    data.text = 'Take on your resolutions with style in this Fanciful Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2015 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2016'] = true;
-    data.icon = 'notif_2016hat_nye';
-    data.text = 'Take on your resolutions with style in this Whimsical Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye2014 !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2015'] = true;
-    data.icon = 'notif_2015hat_nye';
-    data.text = 'Take on your resolutions with style in this Ridiculous Party Hat!';
-  } else if (typeof user.items.gear.owned.head_special_nye !== 'undefined') {
-    updateOp.$set['items.gear.owned.head_special_nye2014'] = true;
-    data.icon = 'notif_2014hat_nye';
-    data.text = 'Take on your resolutions with style in this Silly Party Hat!';
-  } else {
-    updateOp.$set['items.gear.owned.head_special_nye'] = true;
-    data.icon = 'notif_2013hat_nye';
-    data.text = 'Take on your resolutions with style in this Absurd Party Hat!';
-  }
-
-  updateOp.$push.notifications = {
-    type: 'ITEM_RECEIVED',
-    data,
-    seen: false,
-  };
-
-  if (count % progressCount === 0) console.warn(`${count} ${user._id}`);
-
-  return User.updateOne({ _id: user._id }, updateOp).exec();
-}
-
-export default async function processUsers () {
-  const query = {
-    'auth.timestamps.loggedin': { $gt: new Date('2023-12-01') },
-    migration: { $ne: MIGRATION_NAME },
-  };
-
-  const fields = {
-    _id: 1,
-    items: 1,
-  };
-
-  while (true) { // eslint-disable-line no-constant-condition
-    const users = await User // eslint-disable-line no-await-in-loop
-      .find(query)
-      .limit(250)
-      .sort({ _id: 1 })
-      .select(fields)
-      .lean()
-      .exec();
-
-    if (users.length === 0) {
-      console.warn('All appropriate users found and modified.');
-      console.warn(`\n${count} users processed\n`);
-      break;
-    } else {
-      query._id = {
-        $gt: users[users.length - 1],
-      };
-    }
-
-    await Promise.all(users.map(updateUser)); // eslint-disable-line no-await-in-loop
-  }
-}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "habitica",
-  "version": "5.32.5",
+  "version": "5.31.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "habitica",
-      "version": "5.32.5",
+      "version": "5.31.1",
       "hasInstallScript": true,
       "dependencies": {
         "@babel/core": "^7.22.10",
@@ -22,7 +22,7 @@
         "apple-auth": "^1.0.9",
         "babel-preset-env": "^1.7.0",
         "bcrypt": "^5.1.1",
-        "body-parser": "^1.20.3",
+        "body-parser": "^1.20.2",
         "bootstrap": "^4.6.2",
         "compression": "^1.7.4",
         "cookie-session": "^2.0.0",
@@ -33,7 +33,7 @@
         "eslint": "^8.55.0",
         "eslint-config-habitrpg": "^6.2.3",
         "eslint-plugin-mocha": "^5.0.0",
-        "express": "^4.21.1",
+        "express": "^4.19.2",
         "express-basic-auth": "^1.2.1",
         "express-validator": "^5.2.0",
         "firebase-admin": "^12.1.1",
@@ -43,6 +43,7 @@
         "gulp-babel": "^8.0.0",
         "gulp-filter": "^7.0.0",
         "gulp-imagemin": "^7.1.0",
+        "gulp-nodemon": "^2.5.0",
         "gulp.spritesmith": "^6.13.0",
         "habitica-markdown": "^3.0.0",
         "helmet": "^4.6.0",
@@ -54,12 +55,12 @@
         "merge-stream": "^2.0.0",
         "method-override": "^3.0.0",
         "moment": "^2.29.4",
-        "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
-        "mongoose": "^7.8.3",
+        "moment-recur": "^1.0.7",
+        "mongoose": "^7.6.3",
         "morgan": "^1.10.0",
         "nconf": "^0.12.1",
         "node-gcm": "^1.0.5",
-        "nodemon": "^3.1.9",
+        "nodemon": "^2.0.20",
         "on-headers": "^1.0.2",
         "passport": "^0.5.3",
         "passport-facebook": "^3.0.0",
@@ -150,6 +151,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/code-frame/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -533,6 +542,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/highlight/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -3027,9 +3044,9 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
     },
     "node_modules/@mongodb-js/saslprep": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.9.tgz",
-      "integrity": "sha512-tVkljjeEaAhCqTzajSdgbQ6gE6f3oneVwa3iXR6csiEwXXOFsiC6Uh9iAjAhXPtqa/XMDHWjjeNH/77m/Yq2dw==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.4.tgz",
+      "integrity": "sha512-8zJ8N1x51xo9hwPh6AWnKdLGEC5N3lDa6kms1YHmFBoRhTpJR6HG8wWk0td1MVCu9cD4YBrvjZEtd5Obw0Fbnw==",
       "optional": true,
       "dependencies": {
         "sparse-bitfield": "^3.0.3"
@@ -4152,14 +4169,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/apidoc/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
     "node_modules/apidoc/node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -4190,41 +4199,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/apidoc/node_modules/nodemon": {
-      "version": "2.0.22",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
-      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
-      "dependencies": {
-        "chokidar": "^3.5.2",
-        "debug": "^3.2.7",
-        "ignore-by-default": "^1.0.1",
-        "minimatch": "^3.1.2",
-        "pstree.remy": "^1.1.8",
-        "semver": "^5.7.1",
-        "simple-update-notifier": "^1.0.7",
-        "supports-color": "^5.5.0",
-        "touch": "^3.1.0",
-        "undefsafe": "^2.0.5"
-      },
-      "bin": {
-        "nodemon": "bin/nodemon.js"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/nodemon"
-      }
-    },
-    "node_modules/apidoc/node_modules/nodemon/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/apidoc/node_modules/semver": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
@@ -4239,36 +4213,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/apidoc/node_modules/simple-update-notifier": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
-      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
-      "dependencies": {
-        "semver": "~7.0.0"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/apidoc/node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/apidoc/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/apidoc/node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -6300,9 +6244,9 @@
       "dev": true
     },
     "node_modules/body-parser": {
-      "version": "1.20.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
+      "version": "1.20.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
+      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -6312,7 +6256,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.13.0",
+        "qs": "6.11.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -6347,11 +6291,11 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/body-parser/node_modules/qs": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dependencies": {
-        "side-channel": "^1.0.6"
+        "side-channel": "^1.0.4"
       },
       "engines": {
         "node": ">=0.6"
@@ -6633,15 +6577,14 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.6.tgz",
+      "integrity": "sha512-Mj50FLHtlsoVfRfnHaZvyrooHcrlceNZdL/QBvJJVd9Ta55qCQK0gs4ss2oZDeV9zFCs6ewzYgVE5yfVmfFpVg==",
       "dependencies": {
-        "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "get-intrinsic": "^1.2.3",
+        "set-function-length": "^1.2.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7068,6 +7011,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/coa/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "optional": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/coa/node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7161,7 +7113,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
       "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
       "engines": {
         "node": ">=0.1.90"
       }
@@ -7418,9 +7369,9 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
     },
     "node_modules/cookie": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -8425,9 +8376,9 @@
       "integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="
     },
     "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -8546,17 +8497,6 @@
       "resolved": "https://registry.npmjs.org/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz",
       "integrity": "sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA=="
     },
-    "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
     "node_modules/es-errors": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
@@ -9040,6 +8980,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint-config-habitrpg/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/eslint-config-habitrpg/node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -10032,36 +9980,36 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
+      "version": "4.19.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
+      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.3",
+        "body-parser": "1.20.2",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.7.1",
+        "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~2.0.0",
+        "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.3.1",
+        "finalhandler": "1.2.0",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.3",
+        "merge-descriptors": "1.0.1",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
+        "path-to-regexp": "0.1.7",
         "proxy-addr": "~2.0.7",
-        "qs": "6.13.0",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.19.0",
-        "serve-static": "1.16.2",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -10114,11 +10062,11 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/express/node_modules/qs": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
       "dependencies": {
-        "side-channel": "^1.0.6"
+        "side-channel": "^1.0.4"
       },
       "engines": {
         "node": ">=0.6"
@@ -10583,12 +10531,12 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~2.0.0",
+        "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -12339,6 +12287,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/gulp-nodemon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/gulp-nodemon/-/gulp-nodemon-2.5.0.tgz",
+      "integrity": "sha512-vXfaP72xo2C6XOaXrNcLEM3QqDJ1x21S3x97U4YtzN2Rl2kH57++aFkAVxe6BafGRSTxs/xVfE/jNNlCv5Ym2Q==",
+      "dependencies": {
+        "colors": "^1.2.1",
+        "gulp": "^4.0.0",
+        "nodemon": "^2.0.2"
+      }
+    },
     "node_modules/gulp.spritesmith": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/gulp.spritesmith/-/gulp.spritesmith-6.13.0.tgz",
@@ -12571,14 +12529,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
@@ -13398,27 +13348,10 @@
       "resolved": "https://registry.npmjs.org/iota-array/-/iota-array-1.0.0.tgz",
       "integrity": "sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA=="
     },
-    "node_modules/ip-address": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
-      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
-      "dependencies": {
-        "jsbn": "1.1.0",
-        "sprintf-js": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 12"
-      }
-    },
-    "node_modules/ip-address/node_modules/jsbn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
-      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
-    },
-    "node_modules/ip-address/node_modules/sprintf-js": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
-      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA=="
+    "node_modules/ip": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
+      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ=="
     },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
@@ -15028,12 +14961,9 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -15394,6 +15324,15 @@
         "node": "*"
       }
     },
+    "node_modules/mocha/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/mocha/node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -15457,10 +15396,9 @@
       }
     },
     "node_modules/moment-recur": {
-      "version": "1.0.8",
-      "resolved": "git+ssh://git@github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
-      "integrity": "sha512-LaqXV3izeVQjG0EKAEQQWdneMiff5JR6oBKcfgl0uFOTeaFzLKG62psk7r2VE7RTBdhYigt6KNaLZR7GdWPEIA==",
-      "license": "Unlicense",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/moment-recur/-/moment-recur-1.0.7.tgz",
+      "integrity": "sha512-jpBQn6H62gCnEYjtYdLfK/VdPZHEXo1t8RrVItHVVS67SRvByyJBNBa3WQSGTe+8H0smcYO/79FYTA9LGMVdQw==",
       "dependencies": {
         "moment": "<3.0.0"
       }
@@ -15626,13 +15564,13 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-7.8.3.tgz",
-      "integrity": "sha512-eFnbkKgyVrICoHB6tVJ4uLanS7d5AIo/xHkEbQeOv6g2sD7gh/1biRwvFifsmbtkIddQVNr3ROqHik6gkknN3g==",
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-7.6.8.tgz",
+      "integrity": "sha512-q9zAySH+UtOK5yonWyNcLfq3PxrY6s4gdta4qNGKNOE2yTVoY9FP4hQtvWYnv4rkdk7T8QmQMC7bbhJjDxIunw==",
       "dependencies": {
         "bson": "^5.5.0",
         "kareem": "2.5.1",
-        "mongodb": "5.9.2",
+        "mongodb": "5.9.1",
         "mpath": "0.9.0",
         "mquery": "5.0.0",
         "ms": "2.1.3",
@@ -15655,9 +15593,9 @@
       }
     },
     "node_modules/mongoose/node_modules/mongodb": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-5.9.2.tgz",
-      "integrity": "sha512-H60HecKO4Bc+7dhOv4sJlgvenK4fQNqqUIlXxZYQNbfEWSALGAwGoyJd/0Qwk4TttFXUOHJ2ZJQe/52ScaUwtQ==",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-5.9.1.tgz",
+      "integrity": "sha512-NBGA8AfJxGPeB12F73xXwozt8ZpeIPmCUeWRwl9xejozTXFes/3zaep9zhzs1B/nKKsw4P3I4iPfXl3K7s6g+Q==",
       "dependencies": {
         "bson": "^5.5.0",
         "mongodb-connection-string-url": "^2.6.0",
@@ -16246,17 +16184,17 @@
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
     "node_modules/nodemon": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz",
-      "integrity": "sha512-hdr1oIb2p6ZSxu3PB2JWWYS7ZQ0qvaZsc3hK8DR8f02kRzc8rjYmxAIvdz+aYC+8F2IjNaB7HMcSDg8nQpJxyg==",
+      "version": "2.0.22",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.22.tgz",
+      "integrity": "sha512-B8YqaKMmyuCO7BowF1Z1/mkPqLk6cs/l63Ojtd6otKjMx47Dq1utxfRxcavH1I7VSaL8n5BUaoutadnsX3AAVQ==",
       "dependencies": {
         "chokidar": "^3.5.2",
-        "debug": "^4",
+        "debug": "^3.2.7",
         "ignore-by-default": "^1.0.1",
         "minimatch": "^3.1.2",
         "pstree.remy": "^1.1.8",
-        "semver": "^7.5.3",
-        "simple-update-notifier": "^2.0.0",
+        "semver": "^5.7.1",
+        "simple-update-notifier": "^1.0.7",
         "supports-color": "^5.5.0",
         "touch": "^3.1.0",
         "undefsafe": "^2.0.5"
@@ -16265,22 +16203,35 @@
         "nodemon": "bin/nodemon.js"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8.10.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/nodemon"
       }
     },
-    "node_modules/nodemon/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
+    "node_modules/nodemon/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/nodemon/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "engines": {
-        "node": ">=10"
+        "node": ">=4"
+      }
+    },
+    "node_modules/nodemon/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
       }
     },
     "node_modules/nodemon/node_modules/supports-color": {
@@ -17641,9 +17592,9 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
     },
     "node_modules/path-type": {
       "version": "1.1.0",
@@ -19133,6 +19084,15 @@
       "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==",
       "dev": true
     },
+    "node_modules/run-rs/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/run-rs/node_modules/mongodb": {
       "version": "3.6.12",
       "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.6.12.tgz",
@@ -19377,9 +19337,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -19412,14 +19372,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/send/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -19434,14 +19386,14 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
       "dependencies": {
-        "encodeurl": "~2.0.0",
+        "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.19.0"
+        "send": "0.18.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -19567,11 +19519,11 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.5.tgz",
+      "integrity": "sha512-QcgiIWV4WV7qWExbN5llt6frQB/lBven9pqliLXfGPB+K9ZYXxDozp0wLkHS24kWCm+6YXH/f0HhnObZnZOBnQ==",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.6",
         "es-errors": "^1.3.0",
         "get-intrinsic": "^1.2.4",
         "object-inspect": "^1.13.1"
@@ -19656,25 +19608,22 @@
       }
     },
     "node_modules/simple-update-notifier": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz",
-      "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-1.1.0.tgz",
+      "integrity": "sha512-VpsrsJSUcJEseSbMHkrsrAVSdvVS5I96Qo1QAQ4FxQ9wXFcB+pjj7FB7/us9+GcgfW4ziHtYMc1J0PLczb55mg==",
       "dependencies": {
-        "semver": "^7.5.3"
+        "semver": "~7.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8.10.0"
       }
     },
     "node_modules/simple-update-notifier/node_modules/semver": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
-      "integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
       "bin": {
         "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
       }
     },
     "node_modules/sinon": {
@@ -19912,15 +19861,15 @@
       }
     },
     "node_modules/socks": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
-      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
+      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
       "dependencies": {
-        "ip-address": "^9.0.5",
+        "ip": "^2.0.0",
         "smart-buffer": "^4.2.0"
       },
       "engines": {
-        "node": ">= 10.0.0",
+        "node": ">= 10.13.0",
         "npm": ">= 3.0.0"
       }
     },
@@ -20726,6 +20675,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/svgo/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "optional": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/svgo/node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "5.32.5",
+  "version": "5.31.1",
   "main": "./website/server/index.js",
   "dependencies": {
     "@babel/core": "^7.22.10",
@@ -17,7 +17,7 @@
     "apple-auth": "^1.0.9",
     "babel-preset-env": "^1.7.0",
     "bcrypt": "^5.1.1",
-    "body-parser": "^1.20.3",
+    "body-parser": "^1.20.2",
     "bootstrap": "^4.6.2",
     "compression": "^1.7.4",
     "cookie-session": "^2.0.0",
@@ -28,7 +28,7 @@
     "eslint": "^8.55.0",
     "eslint-config-habitrpg": "^6.2.3",
     "eslint-plugin-mocha": "^5.0.0",
-    "express": "^4.21.1",
+    "express": "^4.19.2",
     "express-basic-auth": "^1.2.1",
     "express-validator": "^5.2.0",
     "firebase-admin": "^12.1.1",
@@ -38,6 +38,7 @@
     "gulp-babel": "^8.0.0",
     "gulp-filter": "^7.0.0",
     "gulp-imagemin": "^7.1.0",
+    "gulp-nodemon": "^2.5.0",
     "gulp.spritesmith": "^6.13.0",
     "habitica-markdown": "^3.0.0",
     "helmet": "^4.6.0",
@@ -49,12 +50,12 @@
     "merge-stream": "^2.0.0",
     "method-override": "^3.0.0",
     "moment": "^2.29.4",
-    "moment-recur": "git://github.com/HabitRPG/moment-recur.git#d3e8e6da0806f13b74dd2e4d7d9053e6a63db119",
-    "mongoose": "^7.8.3",
+    "moment-recur": "^1.0.7",
+    "mongoose": "^7.6.3",
     "morgan": "^1.10.0",
     "nconf": "^0.12.1",
     "node-gcm": "^1.0.5",
-    "nodemon": "^3.1.9",
+    "nodemon": "^2.0.20",
     "on-headers": "^1.0.2",
     "passport": "^0.5.3",
     "passport-facebook": "^3.0.0",
@@ -99,16 +100,16 @@
     "test:sanity": "nyc --silent --no-clean mocha test/sanity --recursive",
     "test:common": "nyc --silent --no-clean mocha test/common --recursive",
     "test:content": "nyc --silent --no-clean mocha test/content --recursive",
+    "test:nodemon": "gulp test:nodemon",
     "coverage": "nyc report --reporter=html --report-dir coverage/results; open coverage/results/index.html",
     "sprites": "gulp sprites:compile",
     "client:dev": "cd website/client && npm run serve",
     "client:build": "cd website/client && npm run build",
     "client:unit": "cd website/client && npm run test:unit",
-    "start": "node --watch ./website/server/index.js",
+    "start": "gulp nodemon",
     "start:simple": "node ./website/server/index.js",
-    "debug": "node --watch --inspect ./website/server/index.js",
+    "debug": "gulp nodemon --inspect",
     "mongo:dev": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data --number 1 --quiet",
-    "mongo:test": "run-rs -v 5.0.23 -l ubuntu1804 --keep --dbpath mongodb-data-testing --number 1 --quiet",
     "postinstall": "git config --global url.\"https://\".insteadOf git:// && gulp build && cd website/client && npm install",
     "apidoc": "gulp apidoc",
     "heroku-postbuild": ".heroku/report_deploy.sh"

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

@@ -59,7 +59,7 @@ describe('POST /debug/jump-time', () => {
     expect(resultDate.getDate()).to.eql(today.getDate());
     expect(resultDate.getMonth()).to.eql(today.getMonth());
     expect(resultDate.getFullYear()).to.eql(today.getFullYear());
-    const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: 365 })).time);
+    const newResultDate = new Date((await user.post('/debug/jump-time', { offsetDays: 355 })).time);
     expect(newResultDate.getFullYear()).to.eql(today.getFullYear() + 1);
   });
 

test/api/v3/integration/members/GET-members_username.test.js

@@ -1,56 +0,0 @@
-import {
-  generateUser,
-  translate as t,
-} from '../../../../helpers/api-integration/v3';
-import common from '../../../../../website/common';
-
-describe('GET /members/username/:username', () => {
-  let user;
-
-  before(async () => {
-    user = await generateUser();
-  });
-
-  it('validates req.params.username', async () => {
-    await expect(user.get('/members/username/')).to.eventually.be.rejected.and.eql({
-      code: 400,
-      error: 'BadRequest',
-      message: t('invalidReqParams'),
-    });
-  });
-
-  it('returns a member public data only', async () => {
-    // make sure user has all the fields that can be returned by the getMember call
-    const member = await generateUser({
-      contributor: { level: 1 },
-      backer: { tier: 3 },
-      preferences: {
-        costume: false,
-        background: 'volcano',
-      },
-      secret: {
-        text: 'Clark Kent',
-      },
-    });
-    const memberRes = await user.get(`/members/username/${member.auth.local.username}`);
-    expect(memberRes).to.have.all.keys([ // works as: object has all and only these keys
-      '_id', 'id', 'preferences', 'profile', 'stats', 'achievements', 'party',
-      'backer', 'contributor', 'auth', 'items', 'inbox', 'loginIncentives', 'flags',
-    ]);
-    expect(Object.keys(memberRes.auth)).to.eql(['local', 'timestamps']);
-    expect(Object.keys(memberRes.preferences).sort()).to.eql([
-      'size', 'hair', 'skin', 'shirt',
-      'chair', 'costume', 'sleep', 'background', 'tasks', 'disableClasses',
-    ].sort());
-
-    expect(memberRes.stats.maxMP).to.exist;
-    expect(memberRes.stats.maxHealth).to.equal(common.maxHealth);
-    expect(memberRes.stats.toNextLevel).to.equal(common.tnl(memberRes.stats.lvl));
-    expect(memberRes.inbox.optOut).to.exist;
-    expect(memberRes.inbox.canReceive).to.exist;
-    expect(memberRes.inbox.messages).to.not.exist;
-    expect(memberRes.secret).to.not.exist;
-
-    expect(memberRes.blocks).to.not.exist;
-  });
-});

test/api/v4/inbox/POST-inbox_message_like.test.js

@@ -1,104 +0,0 @@
-import find from 'lodash/find';
-import {
-  generateUser,
-  translate as t,
-} from '../../../helpers/api-integration/v4';
-
-/**
- * Checks the messages array if the uniqueMessageId has the like flag
- * @param {InboxMessage[]} messages
- * @param {String} uniqueMessageId
- * @param {String} userId
- * @param {Boolean} likeStatus
- */
-function expectMessagesLikeStatus (messages, uniqueMessageId, userId, likeStatus) {
-  const messageToCheck = find(messages, { uniqueMessageId });
-
-  expect(messageToCheck.likes[userId]).to.equal(likeStatus);
-}
-
-// eslint-disable-next-line mocha/no-exclusive-tests
-describe('POST /inbox/like-private-message/:messageId', () => {
-  let userToSendMessage;
-  const getLikeUrl = messageId => `/inbox/like-private-message/${messageId}`;
-
-  before(async () => {
-    userToSendMessage = await generateUser();
-  });
-
-  it('Returns an error when private message is not found', async () => {
-    await expect(userToSendMessage.post(getLikeUrl('some-unknown-id')))
-      .to.eventually.be.rejected.and.eql({
-        code: 404,
-        error: 'NotFound',
-        message: t('messageGroupChatNotFound'),
-      });
-  });
-
-  it('Likes a message', async () => {
-    const receiver = await generateUser();
-
-    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
-      message: 'some message :)',
-      toUserId: receiver._id,
-    });
-
-    const { uniqueMessageId } = sentMessageResult.message;
-
-    const likeResult = await receiver.post(getLikeUrl(uniqueMessageId));
-    expect(likeResult.likes[receiver._id]).to.equal(true);
-
-    const senderMessages = await userToSendMessage.get('/inbox/messages');
-
-    expectMessagesLikeStatus(senderMessages, uniqueMessageId, receiver._id, true);
-
-    const receiversMessages = await receiver.get('/inbox/messages');
-
-    expectMessagesLikeStatus(receiversMessages, uniqueMessageId, receiver._id, true);
-  });
-
-  it('Allows to likes their own private message', async () => {
-    const receiver = await generateUser();
-
-    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
-      message: 'some message :)',
-      toUserId: receiver._id,
-    });
-
-    const { uniqueMessageId } = sentMessageResult.message;
-
-    const likeResult = await userToSendMessage.post(getLikeUrl(uniqueMessageId));
-    expect(likeResult.likes[userToSendMessage._id]).to.equal(true);
-
-    const messages = await userToSendMessage.get('/inbox/messages');
-    expectMessagesLikeStatus(messages, uniqueMessageId, userToSendMessage._id, true);
-
-    const receiversMessages = await receiver.get('/inbox/messages');
-
-    expectMessagesLikeStatus(receiversMessages, uniqueMessageId, userToSendMessage._id, true);
-  });
-
-  it('Unlikes a message', async () => {
-    const receiver = await generateUser();
-
-    const sentMessageResult = await userToSendMessage.post('/members/send-private-message', {
-      message: 'some message :)',
-      toUserId: receiver._id,
-    });
-
-    const { uniqueMessageId } = sentMessageResult.message;
-
-    const likeResult = await receiver.post(getLikeUrl(uniqueMessageId));
-
-    expect(likeResult.likes[receiver._id]).to.equal(true);
-
-    const unlikeResult = await receiver.post(getLikeUrl(uniqueMessageId));
-
-    expect(unlikeResult.likes[receiver._id]).to.equal(false);
-
-    const messages = await userToSendMessage.get('/inbox/messages');
-
-    const messageToCheck = find(messages, { id: sentMessageResult.message.id });
-    expect(messageToCheck.likes[receiver._id]).to.equal(false);
-  });
-});

test/content/schedule.test.js

@@ -144,12 +144,6 @@ describe('Content Schedule', () => {
     expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
   });
 
-  it('sets the end date in new year for a winter gala', () => {
-    const date = new Date('2025-01-04');
-    const matchers = getAllScheduleMatchingGroups(date);
-    expect(matchers.seasonalGear.end).to.eql(moment.utc(`2025-03-21T${String(switchoverTime).padStart(2, '0')}:00:00.000Z`).toDate());
-  });
-
   it('uses correct date for first hours of the month', () => {
     // if the date is checked before CONTENT_SWITCHOVER_TIME_OFFSET,
     // it should be considered the previous month
@@ -272,21 +266,6 @@ describe('Content Schedule', () => {
       expect(matcher.match('backgroundkey072024')).to.be.true;
     });
 
-    it('allows background matching the month for new backgrounds from multiple years', () => {
-      const date = new Date('2026-07-08');
-      const matcher = getAllScheduleMatchingGroups(date).backgrounds;
-      expect(matcher.match('backgroundkey072024')).to.be.true;
-      expect(matcher.match('backgroundkey072025')).to.be.true;
-      expect(matcher.match('backgroundkey072026')).to.be.true;
-    });
-
-    it('allows background matching the previous month in the first week for new backgrounds', () => {
-      const date = new Date('2024-09-02');
-      const matcher = getAllScheduleMatchingGroups(date).backgrounds;
-      expect(matcher.match('backgroundkey082024')).to.be.true;
-      expect(matcher.match('backgroundkey092024')).to.be.false;
-    });
-
     it('disallows background in the future', () => {
       const date = new Date('2024-07-08');
       const matcher = getAllScheduleMatchingGroups(date).backgrounds;
@@ -306,26 +285,19 @@ describe('Content Schedule', () => {
       expect(matcher.match('backgroundkey022021')).to.be.true;
     });
 
-    it('allows even yeared backgrounds in first half of year', () => {
+    it('allows background even yeared backgrounds in first half of year', () => {
       const date = new Date('2025-02-08');
       const matcher = getAllScheduleMatchingGroups(date).backgrounds;
       expect(matcher.match('backgroundkey022024')).to.be.true;
       expect(matcher.match('backgroundkey082022')).to.be.true;
     });
 
-    it('allows odd yeared backgrounds in second half of year', () => {
+    it('allows background odd yeared backgrounds in second half of year', () => {
       const date = new Date('2024-08-08');
       const matcher = getAllScheduleMatchingGroups(date).backgrounds;
       expect(matcher.match('backgroundkey022023')).to.be.true;
       expect(matcher.match('backgroundkey082021')).to.be.true;
     });
-
-    it('allows odd yeared backgrounds in beginning of january', () => {
-      const date = new Date('2025-01-06');
-      const matcher = getAllScheduleMatchingGroups(date).backgrounds;
-      expect(matcher.match('backgroundkey122024'), 'backgroundkey122024').to.be.true;
-      expect(matcher.match('backgroundkey062023'), 'backgroundkey062022').to.be.true;
-    });
   });
 
   describe('timeTravelers matcher', () => {

test/helpers/globals.helper.js

@@ -19,6 +19,6 @@ const sinonStubPromise = require('sinon-stub-promise');
 sinonStubPromise(global.sinon);
 global.sandbox = sinon.createSandbox();
 
-const setupNconf = require('../../website/server/libs/setupNconf').default;
+const setupNconf = require('../../website/server/libs/setupNconf');
 
 setupNconf('./config.json.example');

test/helpers/start-server.js

@@ -3,7 +3,7 @@
 
 const nconf = require('nconf');
 const mongoose = require('mongoose');
-const setupNconf = require('../../website/server/libs/setupNconf').default;
+const setupNconf = require('../../website/server/libs/setupNconf');
 
 // fix further imports of require/import syntaxes
 require('@babel/register');

website/client/.eslintrc.js

@@ -3,12 +3,11 @@ module.exports = {
   root: true,
   env: {
     node: true,
-    es2021: true,
   },
   extends: [
     'habitrpg/lib/vue',
   ],
-  ignorePatterns: ['dist/', 'node_modules/', '*.d.ts'],
+  ignorePatterns: ['dist/', 'node_modules/'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -40,4 +39,7 @@ module.exports = {
       order: ['template', 'style', 'script'],
     }],
   },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
 };

website/client/babel.config.js

@@ -0,0 +1,9 @@
+/* eslint-disable import/no-commonjs */
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-optional-chaining',
+  ],
+};

website/client/index-static.html

@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Habitica - Gamify Your Life</title>
-    <meta name="description" content="Habitica is a free habit and productivity app that treats your real life like a game. Habitica can help you achieve your goals to become healthy and happy.">
-    <meta name="keywords" content="Habits,Goals,Todo,Gamification,Health,Fitness,School,Work">
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i|Roboto:400,400i,700,700i" rel="stylesheet">
-    <link rel="shortcut icon" sizes="48x48" href="/static/icons/favicon.ico">
-    <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
-    <link rel="mask-icon" href="/static/icons/favicon.ico">
-    <meta property="og:image" content="/static/emails/images/meta-image.png" />
-    <script type="module" src="/src/main-static.js"></script>
-  </head>
-  <body>
-    <div id="loading-screen">
-      <svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
-        <path
-        xmlns="http://www.w3.org/2000/svg"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M79.05 72.15c-.8-1.766-2.643-2.62-3.845-1.766-1.201.855-2.867.985-4.448.602-1.584-.385-1.885-4.01-1.543-8.195.342-4.184.909-5.795 1.267-7.314.404-1.524 2.191-1.404 2.405-.209.215 1.196 1.454 1.196 3.266-.979 1.811-2.175 1.543-8.52-.546-13.684-2.088-5.163.817-4.661 1.66-4.149.844.513 1.362-.255 1.156-3.2-.204-2.945-2.916-5.247-5.096-6.657-2.184-1.41-4.842-2.967-4.78-6.745.063-3.777 5.2-3.658 5.897-3.596.697.063 2.037-.233 1.264-4.157-.773-3.924-3.575-4.673-5.332-4.567-1.758.106-2.943 1.071-5.427.133-2.484-.938-4.136-.572-6.45-.057-2.313.515-5.343 1.94-9.112 2.959-1.989.545-2.661.683-4.828.718-1.33.02-1.885 1.633-.106 3.61 1.408 1.608 4.597 2.036 6.515 1.768 1.236-.174 1.521.645 1.407 1.85a20.023 20.023 0 0 0-.024 4.488c.198 1.5.45 4.051-.258 5.713-.35.817-1.361 1.693-2.449 1.633-1.413-.084-2.555-1.75-3.537-3.726-2.06-4.152-4.48-5.033-13.509-8.835-8.12-3.417-12.516-8.749-15.24-12.185-2.421-3.042-4.846-1.89-4.626.855.179 2.128 1.48 9.008 4.781 13.141 4.058 6.314 10.32 9.177 17.534 9.739 1.885.149 3.065.52 3.225 1.383.236 1.835-1.557 3.11-4.898 2.722-3.341-.39-4.768.22-4.103 2.121 2.123 4.477 7.021 4.672 9.058 4.857.686.122 3.114 0 4.41.355 1.51.418 1.836 2.514-.353 3.648-3.892 1.903-5.59 3.479-7.561 7.075-1.486 2.826-2.77 7.555-1.435 14.365 1.283 6.62-8.342 6.83-12.497 5.89-1.793-.377-3.675-3.778.716-6.625 3.553-2.305 4.269-3.724 4.111-6.642-.184-3.4-2.058-3.644-2.053-6.598v-7.05c0-.602-.488-1.088-1.087-1.088h-3.334a1.087 1.087 0 0 1-1.087-1.087v-4.25c0-.602-.488-1.087-1.088-1.087h-3.317a1.087 1.087 0 0 1-1.087-1.088v-3.81c0-.602-.489-1.087-1.088-1.087h-4.04a1.087 1.087 0 0 1-1.089-1.088V26.25c0-.602-.488-1.088-1.087-1.088H1.088C.485 25.161 0 25.65 0 26.25v4.26c0 .602.488 1.087 1.088 1.087h4.049c.602 0 1.087.489 1.087 1.088v15.192c0 .602.489 1.087 1.088 1.087h4.277c.602 0 1.088.489 1.088 1.088v4.968c0 .602.488 1.087 1.087 1.087h6.005c1.836-.13 2.156 2.335 2.137 3.214-.04 2.007-2.308 2.652-3.382 3.487-2.861 2.21-5.077 4.459-3.78 8.781l.032.09c2.362 5.017 8.855 4.499 12.956 4.499h25.817c1.459 0 2.959.339 2.614-1.362-.342-1.7-1.063-4.024-3.162-4.024-2.1 0-1.758 1.166-3.81.57-2.054-.597-2.057-3.371 1.027-8.198 3.19-4.122 8.652-3.81 11.952-.895 3.301 2.915 2.325 7.978 1.633 10.885-.396 2.048.545 3.06 1.67 3.032H78.58c2.015-.035 1.62-1.391.464-4.035h.008z"
-        fill="#fff"
-      >
-      </path>
-    </svg>
-    </div>
-
-    <div id="app"></div>
-
-    <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
-    <!-- Translations -->
-  </body>
-</html>

website/client/localePlugin.js

@@ -1,64 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-import { approvedLanguages } from '../common/script/libs/i18n';
-
-const localePath = path.join(__dirname, '../common/locales/');
-
-const translations = {};
-const momentLangs = {};
-
-function loadFile (file) {
-  const contents = fs.readFileSync(file);
-  return JSON.parse(contents); 
-}
-
-function _loadTranslations (locale) {
-  const files = fs.readdirSync(path.join(localePath, locale));
-
-  translations[locale] = {};
-
-  files.forEach(file => {
-    if (path.extname(file) !== '.json') return;
-
-    const t = loadFile(path.join(localePath, locale, file))
-    translations[locale] = {
-      ...translations[locale],
-      ...t,
-    }
-  });
-}
-
-// First fetch English strings so we can merge them with missing strings in other languages
-_loadTranslations('en');
-
-// Then load all other languages
-approvedLanguages.forEach(file => {
-  if (file === 'en' || fs.statSync(path.join(localePath, file)).isDirectory() === false) return;
-  _loadTranslations(file);
-
-  // Strip empty strings, then merge missing strings from english
-  translations[file] = {
-    ...translations.en,
-    ...translations[file],
-  }
-});
-
-export default function localePlugin() {
-  const virtualModuleId = 'virtual:translations'
-  const resolvedVirtualModuleId = '\0' + virtualModuleId
-
-  return {
-    name: 'locale', // required, will show up in warnings and errors
-    resolveId(id) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId
-      }
-    },
-    load(id) {
-      if (id === resolvedVirtualModuleId) {
-        return `export default ${JSON.stringify(translations)}`;
-      }
-    },
-  }
-}

website/client/package.json

@@ -3,25 +3,28 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "serve": "vite",
-    "build": "vite build",
-    "preview": "vite preview",
-    "test:unit": "vitest run",
-    "test:unit:watch": "vitest watch",
-    "lint": "eslint --ext .js,.vue --ignore-path ../../.gitignore --fix .",
-    "lint-no-fix": "eslint --ext .js,.vue --no-fix src",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit --require ./tests/unit/helpers.js",
+    "lint": "vue-cli-service lint .",
+    "lint-no-fix": "vue-cli-service lint --no-fix .",
     "postinstall": "node ./scripts/npm-postinstall.js"
   },
   "dependencies": {
-    "@vitejs/plugin-vue2": "^2.3.3",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-unit-mocha": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "@vue/test-utils": "1.0.0-beta.29",
     "amplitude-js": "^8.21.3",
     "assert": "^2.1.0",
-    "autoprefixer": "^10.4.20",
     "axios": "^0.28.0",
     "axios-progress-bar": "^1.2.0",
+    "babel-eslint": "^10.1.0",
     "bootstrap": "^4.6.0",
     "bootstrap-vue": "^2.23.1",
+    "core-js": "^3.33.1",
     "eslint": "7.32.0",
     "eslint-config-habitrpg": "6.2.0",
     "eslint-plugin-mocha": "5.3.0",
@@ -32,34 +35,30 @@
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
+    "moment-locales-webpack-plugin": "^1.2.0",
     "nconf": "^0.12.1",
     "sass": "^1.63.4",
+    "sass-loader": "^14.1.1",
     "sinon": "^17.0.1",
     "stopword": "^2.0.8",
     "timers-browserify": "^2.0.12",
     "uuid": "^9.0.1",
     "validator": "^13.9.0",
-    "vite": "^6.0.0",
-    "vite-plugin-prerender": "^1.0.8",
     "vue": "^2.7.10",
     "vue-fragment": "^1.6.0",
     "vue-mugen-scroll": "^0.2.6",
     "vue-router": "^3.6.5",
+    "vue-template-babel-compiler": "^2.0.0",
+    "vue-template-compiler": "^2.7.10",
     "vuedraggable": "^2.24.3",
     "vuejs-datepicker": "git://github.com/habitrpg/vuejs-datepicker.git#153d339e4dbebb73733658aeda1d5b7fcc55b0a0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@prerenderer/renderer-puppeteer": "^1.2.4",
-    "@prerenderer/rollup-plugin": "^0.3.12",
-    "@vitest/browser": "^3.0.5",
     "babel-plugin-lodash": "^3.3.4",
+    "chai": "^5.1.0",
     "inspectpack": "^4.7.1",
-    "jsdom": "^26.0.0",
-    "mocha": "^11.1.0",
-    "playwright": "^1.50.1",
     "terser-webpack-plugin": "^5.3.10",
-    "vitest": "^3.0.5",
     "webpack": "^5.94.0"
   }
 }

website/client/public/index.html

@@ -12,7 +12,6 @@
     <link rel="shortcut icon" sizes="192x192" href="/static/icons/favicon_192x192.png">
     <link rel="mask-icon" href="/static/icons/favicon.ico">
     <meta property="og:image" content="/static/emails/images/meta-image.png" />
-    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
     <div id="loading-screen">
@@ -29,9 +28,10 @@
     </div>
 
     <div id="app"></div>
+    <!-- built files will be auto injected -->
 
     <script type="text/javascript" src="//cloudfront.loggly.com/js/loggly.tracker-latest.min.js" async></script>
     <!-- Translations -->
-    <script type='text/javascript' src='/api/v4/i18n/browser-script' vite-ignore></script>
+    <script type='text/javascript' src='/api/v4/i18n/browser-script'></script>
   </body>
 </html>

website/client/src/app.vue

@@ -34,7 +34,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #loading-screen-inapp {
     #melior {
@@ -90,7 +90,7 @@
 </style>
 
 <style lang='scss'>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .modal-backdrop {
     opacity: .9 !important;
@@ -111,7 +111,7 @@ import { mapState } from '@/libs/store';
 import userMain from '@/pages/user-main';
 import snackbars from '@/components/snackbars/notifications';
 
-const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   name: 'App',

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

@@ -1730,11 +1730,6 @@
   width: 141px;
   height: 147px;
 }
-.background_old_fashioned_tea_shop {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_fashioned_tea_shop.png');
-  width: 141px;
-  height: 147px;
-}
 .background_old_photo {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_old_photo.png');
   width: 141px;
@@ -2401,11 +2396,6 @@
   width: 141px;
   height: 147px;
 }
-.background_winter_landscape_with_cabin {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_winter_landscape_with_cabin.png');
-  width: 141px;
-  height: 147px;
-}
 .background_winter_mountain_range {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/background_winter_mountain_range.png');
   width: 141px;
@@ -29914,11 +29904,6 @@
   width: 114px;
   height: 90px;
 }
-.broad_armor_armoire_snowyFluffTrimmedCoat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_snowyFluffTrimmedCoat.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_armoire_softBlackSuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_armoire_softBlackSuit.png');
   width: 114px;
@@ -30219,11 +30204,6 @@
   width: 90px;
   height: 90px;
 }
-.head_armoire_fancyFloralHat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_fancyFloralHat.png');
-  width: 114px;
-  height: 90px;
-}
 .head_armoire_fancyPirateHat {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_fancyPirateHat.png');
   width: 114px;
@@ -30489,11 +30469,6 @@
   width: 117px;
   height: 120px;
 }
-.head_armoire_snowyTrapperHat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_snowyTrapperHat.png');
-  width: 114px;
-  height: 90px;
-}
 .head_armoire_stormKnightHelm {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_armoire_stormKnightHelm.png');
   width: 114px;
@@ -30654,11 +30629,6 @@
   width: 114px;
   height: 90px;
 }
-.shield_armoire_fancyFloralFan {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_fancyFloralFan.png');
-  width: 114px;
-  height: 90px;
-}
 .shield_armoire_fancyShoe {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_armoire_fancyShoe.png');
   width: 90px;
@@ -31419,11 +31389,6 @@
   width: 114px;
   height: 90px;
 }
-.slim_armor_armoire_snowyFluffTrimmedCoat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_snowyFluffTrimmedCoat.png');
-  width: 114px;
-  height: 90px;
-}
 .slim_armor_armoire_softBlackSuit {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_armoire_softBlackSuit.png');
   width: 114px;
@@ -35409,36 +35374,6 @@
   width: 114px;
   height: 90px;
 }
-.head_mystery_202501 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202501.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_mystery_202501 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202501.png');
-  width: 114px;
-  height: 90px;
-}
-.broad_armor_mystery_202502 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_202502.png');
-  width: 114px;
-  height: 90px;
-}
-.head_mystery_202502 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/head_mystery_202502.png');
-  width: 114px;
-  height: 90px;
-}
-.shield_mystery_202502 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/shield_mystery_202502.png');
-  width: 114px;
-  height: 90px;
-}
-.slim_armor_mystery_202502 {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/slim_armor_mystery_202502.png');
-  width: 114px;
-  height: 90px;
-}
 .broad_armor_mystery_301404 {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/broad_armor_mystery_301404.png');
   width: 90px;
@@ -40132,126 +40067,6 @@
   width: 28px;
   height: 28px;
 }
-.notif_2013hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2013hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2014hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2014hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2014robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2014robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2015hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2015hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2015robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2015robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2016hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2016hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2016robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2016robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2017hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2017hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2017robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2017robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2018hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2018hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2018robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2018robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2019hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2019hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2019robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2019robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2020hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2020hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2020robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2020robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2021hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2021hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2021robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2021robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2022hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2022hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2022robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2022robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2023hat_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2023hat_nye.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2023robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2023robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_2024robe_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_2024robe_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_cake_birthday {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_cake_birthday.png');
-  width: 28px;
-  height: 28px;
-}
-.notif_candy_nye {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_candy_nye.png');
-  width: 28px;
-  height: 28px;
-}
 .notif_habitoween_base_mount {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/notif_habitoween_base_mount.png');
   width: 28px;
@@ -40652,11 +40467,6 @@
   width: 219px;
   height: 219px;
 }
-.quest_cat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_cat.png');
-  width: 219px;
-  height: 219px;
-}
 .quest_chameleon {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/quest_chameleon.png');
   width: 216px;
@@ -41392,11 +41202,6 @@
   width: 68px;
   height: 68px;
 }
-.inventory_quest_scroll_cat {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/inventory_quest_scroll_cat.png');
-  width: 68px;
-  height: 68px;
-}
 .inventory_quest_scroll_chameleon {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/inventory_quest_scroll_chameleon.png');
   width: 68px;
@@ -43002,56 +42807,6 @@
   width: 105px;
   height: 105px;
 }
-.Mount_Body_Cat-Base {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Base.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-CottonCandyBlue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-CottonCandyBlue.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-CottonCandyPink {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-CottonCandyPink.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-Desert {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Desert.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-Golden {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Golden.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-Red {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Red.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-Shade {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Shade.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-Skeleton {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Skeleton.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-White {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-White.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Body_Cat-Zombie {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Cat-Zombie.png');
-  width: 105px;
-  height: 105px;
-}
 .Mount_Body_Chameleon-Base {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Body_Chameleon-Base.png');
   width: 105px;
@@ -48592,56 +48347,6 @@
   width: 105px;
   height: 105px;
 }
-.Mount_Head_Cat-Base {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Base.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-CottonCandyBlue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-CottonCandyBlue.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-CottonCandyPink {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-CottonCandyPink.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-Desert {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Desert.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-Golden {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Golden.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-Red {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Red.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-Shade {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Shade.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-Skeleton {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Skeleton.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-White {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-White.png');
-  width: 105px;
-  height: 105px;
-}
-.Mount_Head_Cat-Zombie {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Cat-Zombie.png');
-  width: 105px;
-  height: 105px;
-}
 .Mount_Head_Chameleon-Base {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Mount_Head_Chameleon-Base.png');
   width: 105px;
@@ -54242,56 +53947,6 @@
   width: 81px;
   height: 99px;
 }
-.Pet-Cat-Base {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Base.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-CottonCandyBlue {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-CottonCandyBlue.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-CottonCandyPink {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-CottonCandyPink.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-Desert {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Desert.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-Golden {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Golden.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-Red {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Red.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-Shade {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Shade.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-Skeleton {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Skeleton.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-White {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-White.png');
-  width: 81px;
-  height: 99px;
-}
-.Pet-Cat-Zombie {
-  background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Cat-Zombie.png');
-  width: 81px;
-  height: 99px;
-}
 .Pet-Chameleon-Base {
   background-image: url('https://habitica-assets.s3.amazonaws.com/mobileApp/images/Pet-Chameleon-Base.png');
   width: 81px;

website/client/src/assets/scss/banner.scss

@@ -1,5 +1,5 @@
 
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 .featured-label {
   width: auto;

website/client/src/assets/scss/bootstrap.scss

@@ -2,7 +2,7 @@
 $grid-gutter-width: 24px;
 
 // Bootstrap and its default variables
-@import '~/bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap/scss/bootstrap';
 
 // Bootstrap Vue styles
-@import '~/bootstrap-vue/dist/bootstrap-vue';
+@import 'node_modules/bootstrap-vue/dist/bootstrap-vue';

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

@@ -101,7 +101,8 @@
 
 .btn-secondary,
 .dropdown > .btn-secondary.dropdown-toggle:not(.btn-success),
-.show > .btn-secondary.dropdown-toggle:not(.btn-success) {
+.show > .btn-secondary.dropdown-toggle:not(.btn-success)
+{
   background: $white;
   border: 2px solid transparent;
   color: $gray-50;
@@ -297,16 +298,6 @@
   box-shadow: none;
 }
 
-.btn-flat,
-.dropdown > .btn-flat.dropdown-toggle:not(.btn-success),
-.show > .btn-flat.dropdown-toggle:not(.btn-success) {
-  &.with-icon {
-    .svg-icon.color {
-      color: var(--icon-color);
-    }
-  }
-}
-
 .btn-cancel {
   color: $blue-10;
 }

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

@@ -38,12 +38,7 @@
   border-radius: 2px;
   box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24);
   padding: 0;
-}
 
-.no-min-width {
-  .dropdown-menu {
-    min-width: 0 !important;
-  }
 }
 
 // shared dropdown-item styles
@@ -59,8 +54,6 @@
   color: $gray-50 !important;
   cursor: pointer;
 
-  --dropdown-item-hover-icon-color: #{$gray-200};
-
   &:focus {
     outline: none;
     background-color: inherit;
@@ -95,7 +88,7 @@
 
   &:not(:hover) {
     .with-icon .svg-icon {
-      color: var(dropdown-item-hover-icon-color);
+      color: $gray-200;
     }
   }
 }
@@ -158,7 +151,7 @@
 
 // selectList.vue items sizing
 .selectListItem .dropdown-item {
-  padding: 0.25rem 1rem 0.25rem 0.75rem;
+  padding: 0.25rem 0.75rem;
   height: 32px;
 
   &:active, &:hover, &:focus, &.active {

website/client/src/assets/scss/faq.scss

@@ -1,4 +1,4 @@
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 h1 {
   margin-top: 0px;

website/client/src/assets/scss/form.scss

@@ -61,13 +61,13 @@ input, textarea, input.form-control, textarea.form-control {
 
   &.input-valid {
     padding-right: 27px;
-    background-image: url(@/assets/svg/for-css/check.svg);
+    background-image: url(~@/assets/svg/for-css/check.svg);
     background-size: 1rem;
   }
 
   &.input-invalid {
     padding-right: 40px;
-    background-image: url(@/assets/svg/for-css/alert.svg);
+    background-image: url(~@/assets/svg/for-css/alert.svg);
     background-size: 16px 16px;
     border-color: $red-100 !important;
   }
@@ -239,7 +239,7 @@ $bg-disabled-control: $gray-10;
     &:checked~.custom-control-label::after {
       width: 18px;
       height: 18px;
-      background-image: url(@/assets/svg/for-css/checkbox-white.svg);
+      background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
       background-size: 13px 10px;
     }
 

website/client/src/assets/scss/iconalert.scss

@@ -29,13 +29,13 @@
 }
 
 .iconalert-success::before {
-  background-image: url(@/assets/svg/for-css/checkbox-white.svg);
+  background-image: url(~@/assets/svg/for-css/checkbox-white.svg);
   background-size: 13px 10px;
   background-color: #1ca372;
 }
 
 .iconalert-warning::before, .iconalert-error::before {
-  background-image: url(@/assets/svg/for-css/alert-white.svg);
+  background-image: url(~@/assets/svg/for-css/alert-white.svg);
   background-size: 16px 16px;
 }
 

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

@@ -1,4 +1,4 @@
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 .modal {
   z-index: 1350;

website/client/src/assets/scss/static.scss

@@ -1,4 +1,4 @@
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 .container-fluid.static-view {
   margin: 5em 2em 0 2em;

website/client/src/components/404.vue

@@ -4,7 +4,7 @@
       <!-- @TODO i18n. How to setup the strings with the router-link inside?-->
       <img
         :class="retiredChatPage ? 'mt-5' : 'image-404'"
-        src="@/assets/images/404.png"
+        src="~@/assets/images/404.png"
       >
       <div v-if="retiredChatPage">
         <h1>
@@ -54,7 +54,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 h1, .static-wrapper h1 {
   color: $purple-200;

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

@@ -103,7 +103,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .btn-primary:active {
       border: 2px solid $purple-400 !important;
@@ -189,10 +189,10 @@
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
-import warriorIcon from '@/assets/svg/warrior.svg?raw';
-import rogueIcon from '@/assets/svg/rogue.svg?raw';
-import healerIcon from '@/assets/svg/healer.svg?raw';
-import wizardIcon from '@/assets/svg/wizard.svg?raw';
+import warriorIcon from '@/assets/svg/warrior.svg';
+import rogueIcon from '@/assets/svg/rogue.svg';
+import healerIcon from '@/assets/svg/healer.svg';
+import wizardIcon from '@/assets/svg/wizard.svg';
 
 export default {
   components: {

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

@@ -70,7 +70,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   h2 {
     color: $purple-200;
@@ -100,7 +100,7 @@
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg?raw';
+import closeIcon from '@/assets/svg/close.svg';
 import Sprite from '@/components/ui/sprite.vue';
 
 export default {

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

@@ -45,7 +45,7 @@
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/mixins.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #generic-achievement {
     @include centeredModal();
@@ -61,7 +61,7 @@
 </style>
 
 <style scoped lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .content {
     text-align: center;
@@ -98,7 +98,7 @@
 <script>
 import achievements from '@/../../common/script/content/achievements';
 import { mapState } from '@/libs/store';
-import svgClose from '@/assets/svg/close.svg?raw';
+import svgClose from '@/assets/svg/close.svg';
 import Sprite from '@/components/ui/sprite.vue';
 
 export default {

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

@@ -58,7 +58,7 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #level-up {
     .modal-content {
@@ -160,8 +160,8 @@ label(style='display:inline-block') {{ $t('dontShowAgain') }}
 <script>
 import Avatar from '../avatar';
 import { mapState } from '@/libs/store';
-import starGroup from '@/assets/svg/star-group.svg?raw';
-import sparkles from '@/assets/svg/sparkles-left.svg?raw';
+import starGroup from '@/assets/svg/star-group.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg';
 
 const levelQuests = {
   15: 'atom1',

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

@@ -17,7 +17,7 @@
       </h2>
       <img
         class="onboarding-complete-banner d-block"
-        src="@/assets/images/onboarding-complete-banner@2x.png"
+        src="~@/assets/images/onboarding-complete-banner@2x.png"
       >
       <p
         v-once
@@ -59,7 +59,7 @@
 </style>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 h2 {
   color: $purple-200;
@@ -100,7 +100,7 @@ button {
 </style>
 
 <script>
-import svgClose from '@/assets/svg/close.svg?raw';
+import svgClose from '@/assets/svg/close.svg';
 
 export default {
   data () {

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

@@ -73,7 +73,7 @@
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #won-challenge {
     .modal-body {
@@ -96,7 +96,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .purple {
     color: $purple-300;
@@ -146,9 +146,9 @@
 <script>
 import habiticaMarkdown from 'habitica-markdown';
 import closeIcon from '@/components/shared/closeIcon';
-import sparkles from '@/assets/svg/star-group.svg?raw';
-import gem from '@/assets/svg/gem.svg?raw';
-import stars from '@/assets/svg/sparkles-left.svg?raw';
+import sparkles from '@/assets/svg/star-group.svg';
+import gem from '@/assets/svg/gem.svg';
+import stars from '@/assets/svg/sparkles-left.svg';
 import { mapState } from '@/libs/store';
 
 export default {

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

@@ -7,11 +7,7 @@
     >
       Could not find any matching users.
     </div>
-    <loading-spinner
-      v-if="isSearching"
-      class="mx-auto mb-2"
-      dark-color="true"
-    />
+    <loading-spinner class="mx-auto mb-2" dark-color="true" v-if="isSearching" />
     <div
       v-if="users.length > 0"
       class="list-group"

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

@@ -38,10 +38,7 @@
             <strong v-else>No</strong>
           </div>
         </div>
-        <div
-          v-if="cronError"
-          class="form-group row"
-        >
+        <div v-if="cronError" class="form-group row">
           <label class="col-sm-3 col-form-label">lastCron value:</label>
           <strong>{{ hero.lastCron | formatDate }}</strong>
           <br>

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

@@ -215,7 +215,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
 .input-group-append {
   width: auto;

website/client/src/components/appFooter.vue

@@ -131,6 +131,13 @@
             >{{ $t('requestFeature') }}
             </a>
           </li>
+          <li>
+            <a
+              href="https://habitica.fandom.com/"
+              target="_blank"
+            >{{ $t('wiki') }}
+            </a>
+          </li>
         </ul>
       </div>
       <!-- Developers -->
@@ -283,9 +290,9 @@
       </div>
 
       <div
+        class="time-travel"
         v-if="TIME_TRAVEL_ENABLED && user?.permissions?.fullAccess"
         :key="lastTimeJump"
-        class="time-travel"
       >
         <a
           class="btn btn-secondary mr-1"
@@ -306,7 +313,7 @@
             @click="resetTime()"
           >
             Reset
-          </a>
+        </a>
         </div>
         <a
           class="btn btn-secondary mr-1"
@@ -410,7 +417,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 .footer-row {
   margin: 0;
   flex: 0 1 auto;
@@ -845,12 +852,12 @@ import moment from 'moment';
 import Vue from 'vue';
 
 // images
-import melior from '@/assets/svg/melior.svg?raw';
-import twitter from '@/assets/svg/twitter.svg?raw';
-import facebook from '@/assets/svg/facebook.svg?raw';
-import instagram from '@/assets/svg/instagram.svg?raw';
-import tumblr from '@/assets/svg/tumblr.svg?raw';
-import heart from '@/assets/svg/heart.svg?raw';
+import melior from '@/assets/svg/melior.svg';
+import twitter from '@/assets/svg/twitter.svg';
+import facebook from '@/assets/svg/facebook.svg';
+import instagram from '@/assets/svg/instagram.svg';
+import tumblr from '@/assets/svg/tumblr.svg';
+import heart from '@/assets/svg/heart.svg';
 
 // components & modals
 import { mapState } from '@/libs/store';
@@ -858,13 +865,13 @@ import buyGemsModal from './payments/buyGemsModal.vue';
 import reportBug from '@/mixins/reportBug.js';
 import { worldStateMixin } from '@/mixins/worldState';
 
-const DEBUG_ENABLED = import.meta.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
-const TIME_TRAVEL_ENABLED = import.meta.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
+const DEBUG_ENABLED = process.env.DEBUG_ENABLED === 'true'; // eslint-disable-line no-process-env
+const TIME_TRAVEL_ENABLED = process.env.TIME_TRAVEL_ENABLED === 'true'; // eslint-disable-line no-process-env
 let sinon;
-/* if (TIME_TRAVEL_ENABLED) {
+if (TIME_TRAVEL_ENABLED) {
   // eslint-disable-next-line global-require
   sinon = await import('sinon');
-} */
+}
 
 export default {
   components: {

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

@@ -168,7 +168,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .form {
     margin: 0 auto;
@@ -227,8 +227,8 @@ import debounce from 'lodash/debounce';
 import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { setUpAxios, buildAppleAuthUrl } from '@/libs/auth';
-import googleIcon from '@/assets/svg/google.svg?raw';
-import appleIcon from '@/assets/svg/apple_black.svg?raw';
+import googleIcon from '@/assets/svg/google.svg';
+import appleIcon from '@/assets/svg/apple_black.svg';
 
 export default {
   name: 'AuthForm',
@@ -290,7 +290,7 @@ export default {
   },
   mounted () {
     hello.init({
-      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
   },
   methods: {

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

@@ -355,7 +355,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   @media only screen  and (min-height: 1080px) {
     .bottom-wrap-register {
@@ -491,7 +491,7 @@
 
   #top-background {
     .seamless_stars_varied_opacity_repeat {
-      background-image: url('@/assets/images/auth/seamless_stars_varied_opacity.png');
+      background-image: url('~@/assets/images/auth/seamless_stars_varied_opacity.png');
       background-repeat: repeat-x;
       position: absolute;
       height: 500px;
@@ -510,7 +510,7 @@
     position: relative;
 
     .seamless_mountains_demo_repeat {
-      background-image: url('@/assets/images/auth/seamless_mountains_demo.png');
+      background-image: url('~@/assets/images/auth/seamless_mountains_demo.png');
       background-repeat: repeat-x;
       width: 100%;
       height: 300px;
@@ -520,7 +520,7 @@
     }
 
     .midground_foreground_extended2 {
-      background-image: url('@/assets/images/auth/midground_foreground_extended2.png');
+      background-image: url('~@/assets/images/auth/midground_foreground_extended2.png');
       position: relative;
       width: 1500px;
       max-width: 100%;
@@ -611,11 +611,11 @@ import isEmail from 'validator/es/lib/isEmail';
 import { MINIMUM_PASSWORD_LENGTH } from '@/../../common/script/constants';
 import { buildAppleAuthUrl } from '../../libs/auth';
 import sanitizeRedirect from '@/mixins/sanitizeRedirect';
-import exclamation from '@/assets/svg/exclamation.svg?raw';
-import gryphon from '@/assets/svg/gryphon.svg?raw';
-import habiticaIcon from '@/assets/svg/logo-horizontal.svg?raw';
-import googleIcon from '@/assets/svg/google.svg?raw';
-import appleIcon from '@/assets/svg/apple_black.svg?raw';
+import exclamation from '@/assets/svg/exclamation.svg';
+import gryphon from '@/assets/svg/gryphon.svg';
+import habiticaIcon from '@/assets/svg/logo-horizontal.svg';
+import googleIcon from '@/assets/svg/google.svg';
+import appleIcon from '@/assets/svg/apple_black.svg';
 
 export default {
   mixins: [sanitizeRedirect],
@@ -728,7 +728,7 @@ export default {
     this.forgotPassword = this.$route.path.startsWith('/forgot-password');
 
     hello.init({
-      google: import.meta.env.GOOGLE_CLIENT_ID, // eslint-disable-line
+      google: process.env.GOOGLE_CLIENT_ID, // eslint-disable-line
     });
   },
   methods: {

website/client/src/components/avatar.vue

@@ -1,125 +1,110 @@
 <template>
-  <div class="avatar-wrapper">
+  <div
+    v-if="member.preferences"
+    class="avatar"
+    :style="{width, height, paddingTop}"
+    :class="backgroundClass"
+    @click.prevent="castEnd()"
+  >
     <div
-      v-if="member.preferences"
-      class="avatar"
-      :style="{width, height, paddingTop}"
-      :class="topLevelClassList"
-      @click.prevent="castEnd()"
+      class="character-sprites"
+      :style="{margin: spritesMargin}"
     >
-      <div
-        class="character-sprites"
-        :style="{margin: spritesMargin}"
-      >
-        <template v-if="!avatarOnly">
-          <!-- Mount Body-->
-          <span
-            v-if="member.items.currentMount"
-            :class="'Mount_Body_' + member.items.currentMount"
-          ></span>
-        </template>
-        <!-- Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc-->
-        <template v-for="(klass, item) in visualBuffs">
-          <span
-            v-if="member.stats.buffs[item] && showVisualBuffs"
-            :key="item"
-            :class="klass"
-          ></span>
-        </template>
-        <!-- Show flower ALL THE TIME!!!-->
-        <!-- See https://github.com/HabitRPG/habitica/issues/7133-->
-        <span :class="'hair_flower_' + member.preferences.hair.flower"></span>
-        <!-- Show avatar only if not currently affected by visual buff-->
-        <template v-if="showAvatar()">
-          <span :class="['chair_' + member.preferences.chair, specialMountClass]"></span>
-          <span :class="[getGearClass('back'), specialMountClass]"></span>
-          <span :class="[skinClass, specialMountClass]"></span>
-          <!-- eslint-disable max-len-->
-          <span
-            :class="[shirtClass, specialMountClass]"
-          ></span>
-          <!-- eslint-enable max-len-->
-          <span :class="['head_0', specialMountClass]"></span>
-          <!-- eslint-disable max-len-->
-          <span :class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]"></span>
-          <!-- eslint-enable max-len-->
-          <span :class="[getGearClass('back_collar'), specialMountClass]"></span>
-          <template
-            v-for="type in ['bangs', 'base', 'mustache', 'beard']"
-          >
-            <span
-              :key="type"
-              :class="[hairClass(type), specialMountClass]"
-            ></span>
-          </template>
-          <span :class="[getGearClass('body'), specialMountClass]"></span>
-          <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
-          <span :class="[getGearClass('head'), specialMountClass]"></span>
-          <span :class="[getGearClass('headAccessory'), specialMountClass]"></span>
-          <span
-            :class="[
-              'hair_flower_' + member.preferences.hair.flower, specialMountClass
-            ]"
-          ></span>
-          <span
-            v-if="!hideGear('shield')"
-            :class="[getGearClass('shield'), specialMountClass]"
-          ></span>
-          <span
-            v-if="!hideGear('weapon')"
-            :class="[getGearClass('weapon'), specialMountClass]"
-            class="weapon"
-          ></span>
-        </template>
-        <!-- Resting-->
+      <template v-if="!avatarOnly">
+        <!-- Mount Body-->
         <span
-          v-if="member.preferences.sleep"
-          class="zzz"
+          v-if="member.items.currentMount"
+          :class="'Mount_Body_' + member.items.currentMount"
         ></span>
-        <template v-if="!avatarOnly">
-          <!-- Mount Head-->
+      </template>
+      <!-- Buffs that cause visual changes to avatar: Snowman, Ghost, Flower, etc-->
+      <template v-for="(klass, item) in visualBuffs">
+        <span
+          v-if="member.stats.buffs[item] && showVisualBuffs"
+          :key="item"
+          :class="klass"
+        ></span>
+      </template>
+      <!-- Show flower ALL THE TIME!!!-->
+      <!-- See https://github.com/HabitRPG/habitica/issues/7133-->
+      <span :class="'hair_flower_' + member.preferences.hair.flower"></span>
+      <!-- Show avatar only if not currently affected by visual buff-->
+      <template v-if="showAvatar()">
+        <span :class="['chair_' + member.preferences.chair, specialMountClass]"></span>
+        <span :class="[getGearClass('back'), specialMountClass]"></span>
+        <span :class="[skinClass, specialMountClass]"></span>
+        <!-- eslint-disable max-len-->
+        <span
+          :class="[shirtClass, specialMountClass]"
+        ></span>
+        <!-- eslint-enable max-len-->
+        <span :class="['head_0', specialMountClass]"></span>
+        <!-- eslint-disable max-len-->
+        <span :class="[member.preferences.size + '_' + getGearClass('armor'), specialMountClass]"></span>
+        <!-- eslint-enable max-len-->
+        <span :class="[getGearClass('back_collar'), specialMountClass]"></span>
+        <template
+          v-for="type in ['bangs', 'base', 'mustache', 'beard']"
+        >
           <span
-            v-if="member.items.currentMount"
-            :class="'Mount_Head_' + member.items.currentMount"
-          ></span>
-          <!-- Pet-->
-          <span
-            class="current-pet"
-            :class="petClass"
+            :key="type"
+            :class="[hairClass(type), specialMountClass]"
           ></span>
         </template>
-      </div>
-      <class-badge
-        v-if="hasClass && !hideClassBadge"
-        class="under-avatar"
-        :member-class="member.stats.class"
-      />
+        <span :class="[getGearClass('body'), specialMountClass]"></span>
+        <span :class="[getGearClass('eyewear'), specialMountClass]"></span>
+        <span :class="[getGearClass('head'), specialMountClass]"></span>
+        <span :class="[getGearClass('headAccessory'), specialMountClass]"></span>
+        <span :class="['hair_flower_' + member.preferences.hair.flower, specialMountClass]"></span>
+        <span
+          v-if="!hideGear('shield')"
+          :class="[getGearClass('shield'), specialMountClass]"
+        ></span>
+        <span
+          v-if="!hideGear('weapon')"
+          :class="[getGearClass('weapon'), specialMountClass]"
+        ></span>
+      </template>
+      <!-- Resting-->
+      <span
+        v-if="member.preferences.sleep"
+        class="zzz"
+      ></span>
+      <template v-if="!avatarOnly">
+        <!-- Mount Head-->
+        <span
+          v-if="member.items.currentMount"
+          :class="'Mount_Head_' + member.items.currentMount"
+        ></span>
+        <!-- Pet-->
+        <span
+          class="current-pet"
+          :class="petClass"
+        ></span>
+      </template>
     </div>
+    <class-badge
+      v-if="hasClass && !hideClassBadge"
+      class="under-avatar"
+      :member-class="member.stats.class"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .avatar {
     width: 141px;
+    height: 147px;
     image-rendering: pixelated;
     position: relative;
     cursor: pointer;
-
-    &.centered-avatar {
-      margin: 0 auto;
-    }
-
-    // resetting the additional padding
-    margin-bottom: -0.5rem !important;
   }
 
   .character-sprites {
     width: 90px;
     height: 90px;
-
-    display: inline-flex;
   }
 
   .character-sprites span {
@@ -138,27 +123,6 @@
   .invert {
     filter: invert(100%);
   }
-
-  .weapon {
-     // the only one that is relative so that it fits into the parent div
-    position: relative !important;
-  }
-
-  .debug {
-    border: 1px solid red;
-
-    .character-sprites {
-      border: 1px solid blue;
-    }
-
-    .weapon {
-      border: 1px solid green;
-    }
-
-    span {
-      border: 1px solid yellow;
-    }
-  }
 </style>
 
 <script>
@@ -169,24 +133,12 @@ import foolPet from '../mixins/foolPet';
 
 import ClassBadge from '@/components/members/classBadge';
 
-/**
- * TODO replace avatarOnly with multiple options like
- *    - showMount
- *    - showPet
- *    - showBackground
- *    - showWeapons
- */
-
 export default {
   components: {
     ClassBadge,
   },
   mixins: [foolPet],
   props: {
-    debugMode: {
-      type: Boolean,
-      default: false,
-    },
     member: {
       type: Object,
       required: true,
@@ -204,21 +156,14 @@ export default {
     },
     overrideAvatarGear: {
       type: Object,
-      default (data) {
-        return data;
-      },
     },
     width: {
-      type: String,
-      default: '140px',
+      type: Number,
+      default: 140,
     },
     height: {
-      type: String,
-      default: undefined,
-    },
-    centerAvatar: {
-      type: Boolean,
-      default: false,
+      type: Number,
+      default: 147,
     },
     spritesMargin: {
       type: String,
@@ -226,16 +171,11 @@ export default {
     },
     overrideTopPadding: {
       type: String,
-      default: null,
     },
     showVisualBuffs: {
       type: Boolean,
       default: true,
     },
-    showWeapon: {
-      type: Boolean,
-      default: true,
-    },
   },
   computed: {
     ...mapState({
@@ -264,19 +204,6 @@ export default {
 
       return val;
     },
-    topLevelClassList () {
-      const classes = [this.backgroundClass];
-
-      if (this.debugMode) {
-        classes.push('debug');
-      }
-
-      if (this.centerAvatar) {
-        classes.push('centered-avatar');
-      }
-
-      return classes.join(' ');
-    },
     backgroundClass () {
       if (this.member) {
         const { background } = this.member.preferences;
@@ -363,10 +290,6 @@ export default {
     },
     hideGear (gearType) {
       if (!this.member) return true;
-      if (!this.showWeapon) {
-        return true;
-      }
-
       if (gearType === 'weapon') {
         const equippedWeapon = this.member.items.gear[this.costumeClass][gearType];
 

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

@@ -27,7 +27,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .bottom-banner {
     background: linear-gradient(114.26deg, $purple-300 0%, $purple-200 100%);
@@ -55,7 +55,7 @@
 </style>
 
 <script>
-import sparkles from '@/assets/svg/sparkles-left.svg?raw';
+import sparkles from '@/assets/svg/sparkles-left.svg';
 
 export default {
   data () {

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

@@ -5,8 +5,8 @@
   >
     <div
       v-for="option in items"
-      :id="option.imageName"
       :key="option.key"
+      :id="option.imageName"
       class="outer-option-background"
       :class="{
         premium: Boolean(option.gem),
@@ -28,22 +28,23 @@
           v-if="!option.none"
           class="sprite"
           :prefix="option.isGear ? 'shop' : 'icon'"
+          :imageName="option.imageName"
           :image-name="option.imageName"
         />
-        <div
-          v-else
-          class="redline-outer"
-        >
-          <div class="redline"></div>
-        </div>
+          <div
+            v-else
+            class="redline-outer"
+          >
+            <div class="redline"></div>
+          </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import gem from '@/assets/svg/gem.svg?raw';
-import gold from '@/assets/svg/gold.svg?raw';
+import gem from '@/assets/svg/gem.svg';
+import gold from '@/assets/svg/gold.svg';
 import { avatarEditorUtilities } from '../../mixins/avatarEditUtilities';
 import Sprite from '@/components/ui/sprite.vue';
 
@@ -72,7 +73,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .customize-options {
     width: 100%;

website/client/src/components/avatarModal/sub-menu.vue

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .sub-menu {
     display: flex;

website/client/src/components/bannedAccountModal.vue

@@ -31,7 +31,7 @@
 <script>
 import markdownDirective from '@/directives/markdown';
 
-const COMMUNITY_MANAGER_EMAIL = import.meta.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
+const COMMUNITY_MANAGER_EMAIL = process.env.EMAILS_COMMUNITY_MANAGER_EMAIL; // eslint-disable-line
 
 export default {
   directives: {

website/client/src/components/bugReportModal.vue

@@ -118,7 +118,7 @@
 </style>
 
 <style scoped lang="scss">
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 h2 {
   color: $white;

website/client/src/components/bugReportSuccessModal.vue

@@ -70,7 +70,7 @@
 </style>
 
 <style scoped lang="scss">
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 h2 {
   color: $white;
@@ -134,7 +134,7 @@ label {
 
 <script>
 import closeIcon from '@/components/shared/closeIcon';
-import checkCircleIcon from '@/assets/svg/check_circle.svg?raw';
+import checkCircleIcon from '@/assets/svg/check_circle.svg';
 import { MODALS } from '@/libs/consts';
 
 export default {

website/client/src/components/challenges/challengeDetail.vue

@@ -259,7 +259,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-200;
@@ -380,9 +380,9 @@ import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
 import groupLink from '../groupLink';
 
-import gemIcon from '@/assets/svg/gem.svg?raw';
-import memberIcon from '@/assets/svg/member-icon.svg?raw';
-import calendarIcon from '@/assets/svg/calendar.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg';
+import memberIcon from '@/assets/svg/member-icon.svg';
+import calendarIcon from '@/assets/svg/calendar.svg';
 
 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
 

website/client/src/components/challenges/challengeItem.vue

@@ -106,7 +106,7 @@
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
   // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
   .challenge-title > p {
     display: -webkit-box;
@@ -127,7 +127,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .challenge {
     background-color: $white;
@@ -377,14 +377,14 @@ import categoryTags from '../categories/categoryTags';
 import markdownDirective from '@/directives/markdown';
 import { mapState } from '@/libs/store';
 
-import gemIcon from '@/assets/svg/gem.svg?raw';
-import memberIcon from '@/assets/svg/member-icon.svg?raw';
-import calendarIcon from '@/assets/svg/calendar.svg?raw';
-import habitIcon from '@/assets/svg/habit.svg?raw';
-import todoIcon from '@/assets/svg/todo.svg?raw';
-import dailyIcon from '@/assets/svg/daily.svg?raw';
-import rewardIcon from '@/assets/svg/reward.svg?raw';
-import officialIcon from '@/assets/svg/official.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg';
+import memberIcon from '@/assets/svg/member-icon.svg';
+import calendarIcon from '@/assets/svg/calendar.svg';
+import habitIcon from '@/assets/svg/habit.svg';
+import todoIcon from '@/assets/svg/todo.svg';
+import dailyIcon from '@/assets/svg/daily.svg';
+import rewardIcon from '@/assets/svg/reward.svg';
+import officialIcon from '@/assets/svg/official.svg';
 
 export default {
   components: {

website/client/src/components/challenges/challengeModal.vue

@@ -207,7 +207,7 @@
 </template>
 
 <style lang='scss'>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #challenge-modal {
     h5 {

website/client/src/components/challenges/closeChallengeModal.vue

@@ -81,7 +81,7 @@
 </template>
 
 <style lang='scss'>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #close-challenge-modal {
     h2 {
@@ -98,7 +98,7 @@
     }
 
     .support-habitica {
-      background-image: url('@/assets/svg/for-css/support-habitica-gems.svg?raw');
+      background-image: url('~@/assets/svg/for-css/support-habitica-gems.svg');
       width: 325px;
       height: 89px;
       margin: 0 auto;

website/client/src/components/challenges/findChallenges.vue

@@ -63,7 +63,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   @media only screen and (max-width: 768px) {
     .header-row {
@@ -122,7 +122,7 @@ import challengeModal from './challengeModal';
 import externalLinks from '@/mixins/externalLinks';
 import challengeUtilities from '@/mixins/challengeUtilities';
 
-import positiveIcon from '@/assets/svg/positive.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg';
 
 export default {
   components: {

website/client/src/components/challenges/groupChallenges.vue

@@ -49,7 +49,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .no-challenge-section {
     padding: 2em;
@@ -84,7 +84,7 @@ import markdownDirective from '@/directives/markdown';
 import externalLinks from '../../mixins/externalLinks';
 
 import challengeItem from './challengeItem';
-import challengeIcon from '@/assets/svg/challenge.svg?raw';
+import challengeIcon from '@/assets/svg/challenge.svg';
 
 export default {
   components: {

website/client/src/components/challenges/myChallenges.vue

@@ -86,7 +86,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   @media only screen and (max-width: 768px) {
     .header-row {
@@ -150,8 +150,8 @@ import challengeModal from './challengeModal';
 import challengeUtilities from '@/mixins/challengeUtilities';
 import externalLinks from '@/mixins/externalLinks';
 
-import challengeIcon from '@/assets/svg/challenge.svg?raw';
-import positiveIcon from '@/assets/svg/positive.svg?raw';
+import challengeIcon from '@/assets/svg/challenge.svg';
+import positiveIcon from '@/assets/svg/positive.svg';
 
 export default {
   components: {

website/client/src/components/challenges/reportChallengeModal.vue

@@ -102,7 +102,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .modal-body {
     padding: 0px 8px 0px 8px;
@@ -207,8 +207,8 @@ import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
 import { userStateMixin } from '../../mixins/userState';
 import markdownDirective from '@/directives/markdown';
-import svgClose from '@/assets/svg/close.svg?raw';
-import svgReport from '@/assets/svg/report.svg?raw';
+import svgClose from '@/assets/svg/close.svg';
+import svgReport from '@/assets/svg/report.svg';
 
 export default {
   directives: {

website/client/src/components/chat/autoComplete.vue

@@ -34,8 +34,8 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/tiers.scss';
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/tiers.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .autocomplete-results {
     padding: .5em;
@@ -74,16 +74,16 @@
 <script>
 import groupBy from 'lodash/groupBy';
 import styleHelper from '@/mixins/styleHelper';
-import tier1 from '@/assets/svg/tier-1.svg?raw';
-import tier2 from '@/assets/svg/tier-2.svg?raw';
-import tier3 from '@/assets/svg/tier-3.svg?raw';
-import tier4 from '@/assets/svg/tier-4.svg?raw';
-import tier5 from '@/assets/svg/tier-5.svg?raw';
-import tier6 from '@/assets/svg/tier-6.svg?raw';
-import tier7 from '@/assets/svg/tier-7.svg?raw';
-import tier8 from '@/assets/svg/tier-mod.svg?raw';
-import tier9 from '@/assets/svg/tier-staff.svg?raw';
-import tierNPC from '@/assets/svg/tier-npc.svg?raw';
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tier8 from '@/assets/svg/tier-mod.svg';
+import tier9 from '@/assets/svg/tier-staff.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
 
 export default {
   mixins: [styleHelper],

website/client/src/components/chat/chatCard.vue

@@ -0,0 +1,352 @@
+<template>
+  <div>
+    <div
+      v-if="isUserMentioned"
+      class="mentioned-icon"
+    ></div>
+    <div
+      v-if="hasPermission(user, 'moderator') && msg.flagCount"
+      class="message-hidden"
+    >
+      {{ flagCountDescription }}
+    </div>
+    <div class="card-body">
+      <user-link
+        :user-id="msg.uuid"
+        :name="msg.user"
+        :backer="msg.backer"
+        :contributor="msg.contributor"
+      />
+      <p class="time">
+        <span
+          v-if="msg.username"
+          class="mr-1"
+        >@{{ msg.username }}</span>
+        <span
+          v-if="msg.username"
+          class="mr-1"
+        >•</span>
+        <span
+          v-b-tooltip.hover="messageDate"
+        >{{ msg.timestamp | timeAgo }}&nbsp;</span>
+        <span v-if="msg.client && user.contributor.level >= 4">({{ msg.client }})</span>
+      </p>
+      <div
+        ref="markdownContainer"
+        class="text markdown"
+        dir="auto"
+        v-html="parseMarkdown(msg.text)"
+      ></div>
+      <hr>
+      <div
+        v-if="msg.id"
+        class="d-flex"
+      >
+        <div
+          class="action d-flex align-items-center"
+          @click="copyAsTodo(msg)"
+        >
+          <div
+            class="svg-icon"
+            v-html="icons.copy"
+          ></div>
+          <div>{{ $t('copyAsTodo') }}</div>
+        </div>
+        <div
+          v-if="(user.flags.communityGuidelinesAccepted && msg.uuid !== 'system')
+            && (!isMessageReported || hasPermission(user, 'moderator'))"
+          class="action d-flex align-items-center"
+          @click="report(msg)"
+        >
+          <div
+            v-once
+            class="svg-icon"
+            v-html="icons.report"
+          ></div>
+          <div v-once>
+            {{ $t('report') }}
+          </div>
+        </div>
+        <div
+          v-if="msg.uuid === user._id || hasPermission(user, 'moderator')"
+          class="action d-flex align-items-center"
+          @click="remove()"
+        >
+          <div
+            v-once
+            class="svg-icon"
+            v-html="icons.delete"
+          ></div>
+          <div v-once>
+            {{ $t('delete') }}
+          </div>
+        </div>
+        <div
+          v-b-tooltip="{title: likeTooltip(msg.likes[user._id])}"
+          class="ml-auto d-flex"
+        >
+          <div
+            v-if="likeCount > 0"
+            class="action d-flex align-items-center mr-0"
+            :class="{activeLike: msg.likes[user._id]}"
+            @click="like()"
+          >
+            <div
+              class="svg-icon"
+              :title="$t('liked')"
+              v-html="icons.liked"
+            ></div>
+            +{{ likeCount }}
+          </div>
+          <div
+            v-if="likeCount === 0"
+            class="action d-flex align-items-center mr-0"
+            :class="{activeLike: msg.likes[user._id]}"
+            @click="like()"
+          >
+            <div
+              class="svg-icon"
+              :title="$t('like')"
+              v-html="icons.like"
+            ></div>
+          </div>
+        </div>
+        <span v-if="!msg.likes[user._id]">{{ $t('like') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+  .at-highlight {
+    background-color: rgba(213, 200, 255, 0.32);
+    padding: 0.1rem;
+  }
+
+  .at-text {
+    color: #6133b4;
+  }
+</style>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .mentioned-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #bda8ff;
+    box-shadow: 0 1px 1px 0 rgba(26, 24, 29, 0.12);
+    position: absolute;
+    right: -.5em;
+    top: -.5em;
+  }
+
+  .message-hidden {
+    margin-left: 1.5em;
+    margin-top: 1em;
+    color: red;
+  }
+
+  hr {
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  .card-body {
+    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
+
+    .time {
+      font-size: 12px;
+      color: #878190;
+      margin-bottom: 0.5rem;
+    }
+
+    .text {
+      font-size: 14px;
+      color: #4e4a57;
+      text-align: initial;
+      min-height: 0rem;
+    }
+  }
+
+  .action {
+    display: inline-block;
+    color: #878190;
+    margin-right: 1em;
+    font-size: 12px;
+
+    :hover {
+      cursor: pointer;
+    }
+
+    .svg-icon {
+      color: #A5A1AC;
+      margin-right: .2em;
+      width: 16px;
+    }
+  }
+
+  .activeLike {
+    color: $purple-300;
+
+    .svg-icon {
+      color: $purple-400;
+    }
+  }
+</style>
+
+<script>
+import moment from 'moment';
+import cloneDeep from 'lodash/cloneDeep';
+import escapeRegExp from 'lodash/escapeRegExp';
+
+import { CHAT_FLAG_LIMIT_FOR_HIDING, CHAT_FLAG_FROM_SHADOW_MUTE } from '@/../../common/script/constants';
+import renderWithMentions from '@/libs/renderWithMentions';
+import { userStateMixin } from '../../mixins/userState';
+import userLink from '../userLink';
+
+import deleteIcon from '@/assets/svg/delete.svg';
+import copyIcon from '@/assets/svg/copy.svg';
+import likeIcon from '@/assets/svg/like.svg';
+import likedIcon from '@/assets/svg/liked.svg';
+import reportIcon from '@/assets/svg/report.svg';
+
+export default {
+  components: { userLink },
+  filters: {
+    timeAgo (value) {
+      return moment(value).fromNow();
+    },
+    date (value) {
+      // @TODO: Vue doesn't support this so we cant user preference
+      return moment(value).toDate().toString();
+    },
+  },
+  mixins: [userStateMixin],
+  props: {
+    msg: {},
+    groupId: {},
+  },
+  data () {
+    return {
+      icons: Object.freeze({
+        like: likeIcon,
+        copy: copyIcon,
+        report: reportIcon,
+        delete: deleteIcon,
+        liked: likedIcon,
+      }),
+      reported: false,
+    };
+  },
+  computed: {
+    isUserMentioned () {
+      const message = this.msg;
+
+      if (message.highlight) return true;
+
+      const { user } = this;
+      const displayName = user.profile.name;
+      const { username } = user.auth.local;
+      const pattern = `@(${escapeRegExp(displayName)}|${escapeRegExp(username)})(\\b)`;
+      message.highlight = new RegExp(pattern, 'i').test(message.text);
+
+      return message.highlight;
+    },
+    likeCount () {
+      const message = this.msg;
+      if (!message.likes) return 0;
+
+      let likeCount = 0;
+      for (const key of Object.keys(message.likes)) {
+        const like = message.likes[key];
+        if (like) likeCount += 1;
+      }
+      return likeCount;
+    },
+    isMessageReported () {
+      return (this.msg.flags && this.msg.flags[this.user.id]) || this.reported;
+    },
+    flagCountDescription () {
+      if (!this.msg.flagCount) return '';
+      if (this.msg.flagCount < CHAT_FLAG_LIMIT_FOR_HIDING) return 'Message flagged once, not hidden';
+      if (this.msg.flagCount < CHAT_FLAG_FROM_SHADOW_MUTE) return 'Message hidden';
+      return 'Message hidden (shadow-muted)';
+    },
+    messageDate () {
+      const date = moment(this.msg.timestamp).toDate();
+      return date.toString();
+    },
+  },
+  mounted () {
+    const links = this.$refs.markdownContainer.getElementsByTagName('a');
+    for (let i = 0; i < links.length; i += 1) {
+      let link = links[i].pathname;
+
+      // Internet Explorer does not provide the leading slash character in the pathname
+      link = link.charAt(0) === '/' ? link : `/${link}`;
+
+      if (link.startsWith('/profile/')) {
+        links[i].onclick = ev => {
+          ev.preventDefault();
+          this.$router.push({ path: link });
+        };
+      }
+    }
+    this.CHAT_FLAG_LIMIT_FOR_HIDING = CHAT_FLAG_LIMIT_FOR_HIDING;
+    this.CHAT_FLAG_FROM_SHADOW_MUTE = CHAT_FLAG_FROM_SHADOW_MUTE;
+    this.$emit('chat-card-mounted', this.msg.id);
+  },
+  methods: {
+    async like () {
+      const message = cloneDeep(this.msg);
+
+      await this.$store.dispatch('chat:like', {
+        groupId: this.groupId,
+        chatId: message.id,
+      });
+
+      message.likes[this.user._id] = !message.likes[this.user._id];
+
+      this.$emit('message-liked', message);
+      this.$root.$emit('bv::hide::tooltip');
+    },
+    likeTooltip (likedStatus) {
+      if (!likedStatus) return this.$t('like');
+      return null;
+    },
+    copyAsTodo (message) {
+      this.$root.$emit('habitica::copy-as-todo', message);
+    },
+    report () {
+      this.$root.$on('habitica:report-result', data => {
+        if (data.ok) {
+          this.reported = true;
+        }
+
+        this.$root.$off('habitica:report-result');
+      });
+
+      this.$root.$emit('habitica::report-chat', {
+        message: this.msg,
+        groupId: this.groupId || 'privateMessage',
+      });
+    },
+    async remove () {
+      if (!window.confirm(this.$t('areYouSureDeleteMessage'))) return; // eslint-disable-line no-alert
+
+      const message = this.msg;
+      this.$emit('message-removed', message);
+
+      await this.$store.dispatch('chat:deleteChat', {
+        groupId: this.groupId,
+        chatId: message.id,
+      });
+    },
+    parseMarkdown (text) {
+      return renderWithMentions(text, this.user);
+    },
+  },
+};
+</script>

website/client/src/components/chat/chatMessages.vue

@@ -3,6 +3,15 @@
     ref="container"
     class="container-fluid"
   >
+    <div class="row">
+      <div class="col-12">
+        <copy-as-todo-modal
+          :group-type="groupType"
+          :group-name="groupName"
+          :group-id="groupId"
+        />
+      </div>
+    </div>
     <div class="row loadmore">
       <div v-if="canLoadMore">
         <div class="loadmore-divider"></div>
@@ -24,8 +33,6 @@
     <div
       v-for="msg in messages.filter(m => chat && canViewFlag(m))"
       :key="msg.id"
-      class="message-row"
-      :class="{ 'margin-right': user._id !== msg.uuid}"
     >
       <div class="d-flex">
         <avatar
@@ -38,14 +45,16 @@
           :override-top-padding="'14px'"
           @click.native="showMemberModal(msg.uuid)"
         />
-        <message-card
-          :msg="msg"
-          :group-id="groupId"
-          :user-sent-message="user._id === msg.uuid"
-          @message-liked="messageLiked"
-          @message-removed="messageRemoved"
-          @message-card-mounted="itemWasMounted"
-        />
+        <div class="card">
+          <chat-card
+            :msg="msg"
+            :group-id="groupId"
+            @message-liked="messageLiked"
+            @message-removed="messageRemoved"
+            @show-member-modal="showMemberModal"
+            @chat-card-mounted="itemWasMounted"
+          />
+        </div>
         <avatar
           v-if="user._id === msg.uuid"
           :class="{ invisible: avatarUnavailable(msg) }"
@@ -61,7 +70,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .avatar {
     width: 10%;
@@ -128,27 +137,11 @@
     margin-bottom: .5em;
     padding: 0rem;
     width: 90%;
-
-    &.system-message {
-      width: 100%;
-    }
   }
 
   .message-scroll .d-flex {
     min-width: 1px;
   }
-
-  .message-row {
-    margin-left: 12px;
-    margin-right: 0;
-    margin-bottom: 1.2rem;
-
-    &:not(.margin-right) {
-      .d-flex {
-        justify-content: flex-end;
-      }
-    }
-  }
 </style>
 
 <script>
@@ -159,13 +152,13 @@ import findIndex from 'lodash/findIndex';
 import { userStateMixin } from '../../mixins/userState';
 
 import Avatar from '../avatar';
-import MessageCard from '@/components/messages/messageCard.vue';
-
-// TODO merge chatMessages.vue (party message list) with messageList.vue (private message list)
+import copyAsTodoModal from './copyAsTodoModal';
+import chatCard from './chatCard';
 
 export default {
   components: {
-    MessageCard,
+    copyAsTodoModal,
+    chatCard,
     Avatar,
   },
   mixins: [userStateMixin],

website/client/src/components/chat/copyAsTodoModal.vue

@@ -0,0 +1,105 @@
+<template>
+  <b-modal
+    id="copyAsTodo"
+    :title="$t('copyMessageAsToDo')"
+    :hide-footer="true"
+    size="md"
+  >
+    <div class="form-group">
+      <input
+        v-model="task.text"
+        class="form-control"
+        type="text"
+      >
+    </div>
+    <div class="form-group">
+      <textarea
+        v-model="task.notes"
+        class="form-control"
+        rows="5"
+        focus-element="true"
+      ></textarea>
+    </div>
+    <hr>
+    <task
+      v-if="task._id"
+      :is-user="isUser"
+      :task="task"
+    />
+    <div class="modal-footer">
+      <button
+        class="btn btn-secondary"
+        @click="close()"
+      >
+        {{ $t('close') }}
+      </button>
+      <button
+        class="btn btn-primary"
+        @click="saveTodo()"
+      >
+        {{ $t('submit') }}
+      </button>
+    </div>
+  </b-modal>
+</template>
+
+<script>
+import taskDefaults from '@/../../common/script/libs/taskDefaults';
+import { mapActions } from '@/libs/store';
+import markdownDirective from '@/directives/markdown';
+import notificationsMixin from '@/mixins/notifications';
+import Task from '@/components/tasks/task';
+
+const baseUrl = 'https://habitica.com';
+
+export default {
+  directives: {
+    markdown: markdownDirective,
+  },
+  components: {
+    Task,
+  },
+  mixins: [notificationsMixin],
+  props: ['copyingMessage', 'groupType', 'groupName', 'groupId'],
+  data () {
+    return {
+      isUser: true,
+      task: {},
+    };
+  },
+  mounted () {
+    this.$root.$on('habitica::copy-as-todo', message => {
+      const notes = `${message.user || 'system message'}${message.user ? ' wrote' : ''} in [${this.groupName}](${this.groupPath()})`;
+      const newTask = {
+        text: message.text,
+        type: 'todo',
+        notes,
+      };
+      this.task = taskDefaults(newTask, this.$store.state.user.data);
+      this.$root.$emit('bv::show::modal', 'copyAsTodo');
+    });
+  },
+  beforeDestroy () {
+    this.$root.$off('habitica::copy-as-todo');
+  },
+  methods: {
+    ...mapActions({
+      createTask: 'tasks:create',
+    }),
+    groupPath () {
+      if (this.groupType === 'party') {
+        return `${baseUrl}/party`;
+      }
+      return `${baseUrl}/groups/guild/${this.groupId}`;
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'copyAsTodo');
+    },
+    saveTodo () {
+      this.createTask(this.task);
+      this.text(this.$t('messageAddedAsToDo'));
+      this.$root.$emit('bv::hide::modal', 'copyAsTodo');
+    },
+  },
+};
+</script>

website/client/src/components/chat/reportFlagModal.vue

@@ -95,7 +95,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
    .modal-body {
      padding: 0px 8px 0px 8px;
@@ -199,7 +199,7 @@
 import notifications from '@/mixins/notifications';
 import markdownDirective from '@/directives/markdown';
 import { userStateMixin } from '../../mixins/userState';
-import svgClose from '@/assets/svg/close.svg?raw';
+import svgClose from '@/assets/svg/close.svg';
 
 export default {
   directives: {

website/client/src/components/creatorIntro.vue

@@ -572,7 +572,7 @@
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   $dialogMarginTop: 56px;
   $userCreationBgHeight:  105px;
@@ -671,7 +671,7 @@
     }
 
     .user-creation-bg {
-      background-image: url('@/assets/creator/creator-hills-bg.png');
+      background-image: url('~@/assets/creator/creator-hills-bg.png');
       height: $userCreationBgHeight;
       width: 219px;
       margin: 0 auto;
@@ -1001,18 +1001,18 @@ import hairSettings from './avatarModal/hair-settings';
 import extraSettings from './avatarModal/extra-settings';
 import closeX from './ui/closeX';
 
-import logoPurple from '@/assets/svg/logo-purple.svg?raw';
-import bodyIcon from '@/assets/svg/body.svg?raw';
-import accessoriesIcon from '@/assets/svg/accessories.svg?raw';
-import skinIcon from '@/assets/svg/skin.svg?raw';
-import hairIcon from '@/assets/svg/hair.svg?raw';
-import backgroundsIcon from '@/assets/svg/backgrounds.svg?raw';
-import gem from '@/assets/svg/gem.svg?raw';
-import hourglass from '@/assets/svg/hourglass.svg?raw';
-import gold from '@/assets/svg/gold.svg?raw';
-import arrowRight from '@/assets/svg/arrow_right.svg?raw';
-import arrowLeft from '@/assets/svg/arrow_left.svg?raw';
-import svgClose from '@/assets/svg/close.svg?raw';
+import logoPurple from '@/assets/svg/logo-purple.svg';
+import bodyIcon from '@/assets/svg/body.svg';
+import accessoriesIcon from '@/assets/svg/accessories.svg';
+import skinIcon from '@/assets/svg/skin.svg';
+import hairIcon from '@/assets/svg/hair.svg';
+import backgroundsIcon from '@/assets/svg/backgrounds.svg';
+import gem from '@/assets/svg/gem.svg';
+import hourglass from '@/assets/svg/hourglass.svg';
+import gold from '@/assets/svg/gold.svg';
+import arrowRight from '@/assets/svg/arrow_right.svg';
+import arrowLeft from '@/assets/svg/arrow_left.svg';
+import svgClose from '@/assets/svg/close.svg';
 import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
 import Sprite from './ui/sprite';
 

website/client/src/components/externalLinkModal.vue

@@ -60,7 +60,7 @@
 </template>
 
 <style lang="scss">
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 #external-link-modal {
   &.modal {
@@ -174,8 +174,8 @@
 </style>
 
 <script>
-import exclamationIcon from '@/assets/svg/exclamation.svg?raw';
-import closeIcon from '@/assets/svg/new-close.svg?raw';
+import exclamationIcon from '@/assets/svg/exclamation.svg';
+import closeIcon from '@/assets/svg/new-close.svg';
 
 export default {
   data () {

website/client/src/components/faceAvatar.vue

@@ -39,7 +39,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .face-avatar {
     width: 36px;

website/client/src/components/group-plans/groupPlanCreationModal.vue

@@ -108,7 +108,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   h2 {
     color: $purple-300;
@@ -201,7 +201,7 @@
 
 </style>
 <style lang="scss">
-  @import '@/assets/scss/mixins.scss';
+  @import '~@/assets/scss/mixins.scss';
   #create-group {
     .modal-dialog {
       max-width: 448px;

website/client/src/components/group-plans/groupPlansUpdateModal.vue

@@ -28,9 +28,9 @@
       ></div>
       <img
         class="task-columns"
-        src="@/assets/images/group-plans/task-columns.png"
-        srcset="@/assets/images/group-plans/task-columns@2x.png 2x,
-          @/assets/images/group-plans/task-columns@3x.png 3x"
+        src="~@/assets/images/group-plans/task-columns.png"
+        srcset="~@/assets/images/group-plans/task-columns@2x.png 2x,
+          ~@/assets/images/group-plans/task-columns@3x.png 3x"
       >
     </div>
     <div
@@ -96,7 +96,7 @@
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
   #group-plans-update {
     .modal-content {
       border-top-left-radius: 10px;
@@ -125,7 +125,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
   h2 {
     color: $white;
     line-height: 28px;
@@ -183,8 +183,8 @@
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg?raw';
-import sparkles from '@/assets/svg/sparkles-left.svg?raw';
+import closeIcon from '@/assets/svg/close.svg';
+import sparkles from '@/assets/svg/sparkles-left.svg';
 
 export default {
   data () {

website/client/src/components/group-plans/taskInformation.vue

@@ -125,8 +125,8 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
-  @import '@/assets/scss/create-task.scss';
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/create-task.scss';
 
   h1 {
     color: $purple-300;
@@ -190,13 +190,13 @@ import toggleSwitch from '@/components/ui/toggleSwitch';
 
 import sync from '../../mixins/sync';
 
-import positiveIcon from '@/assets/svg/positive.svg?raw';
-import filterIcon from '@/assets/svg/filter.svg?raw';
-import deleteIcon from '@/assets/svg/delete.svg?raw';
-import habitIcon from '@/assets/svg/habit.svg?raw';
-import dailyIcon from '@/assets/svg/daily.svg?raw';
-import todoIcon from '@/assets/svg/todo.svg?raw';
-import rewardIcon from '@/assets/svg/reward.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg';
+import filterIcon from '@/assets/svg/filter.svg';
+import deleteIcon from '@/assets/svg/delete.svg';
+import habitIcon from '@/assets/svg/habit.svg';
+import dailyIcon from '@/assets/svg/daily.svg';
+import todoIcon from '@/assets/svg/todo.svg';
+import rewardIcon from '@/assets/svg/reward.svg';
 
 import * as Analytics from '@/libs/analytics';
 import { mapState } from '@/libs/store';

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

@@ -22,13 +22,13 @@
           :placeholder="placeholder"
           :class="{'user-entry': newMessage}"
           :maxlength="MAX_MESSAGE_LENGTH"
-          @keydown="autoCompleteMixinUpdateCarretPosition"
+          @keydown="updateCarretPosition"
           @keyup.ctrl.enter="sendMessageShortcut()"
-          @keydown.tab="autoCompleteMixinHandleTab($event)"
-          @keydown.up="autoCompleteMixinSelectPreviousAutocomplete($event)"
-          @keydown.down="autoCompleteMixinSelectNextAutocomplete($event)"
-          @keypress.enter="autoCompleteMixinSelectAutocomplete($event)"
-          @keydown.esc="autoCompleteMixinHandleEscape($event)"
+          @keydown.tab="handleTab($event)"
+          @keydown.up="selectPreviousAutocomplete($event)"
+          @keydown.down="selectNextAutocomplete($event)"
+          @keypress.enter="selectAutocomplete($event)"
+          @keydown.esc="handleEscape($event)"
           @paste="disableMessageSendShortcut()"
         ></textarea>
         <span>{{ currentLength }} / {{ MAX_MESSAGE_LENGTH }}</span>
@@ -36,8 +36,8 @@
           ref="autocomplete"
           :text="newMessage"
           :textbox="textbox"
-          :coords="mixinData.autoComplete.coords"
-          :caret-position="mixinData.autoComplete.caretPosition"
+          :coords="coords"
+          :caret-position="caretPosition"
           :chat="group.chat"
           @select="selectedAutocomplete"
         />
@@ -74,7 +74,7 @@
       <slot name="additionRow"></slot>
       <div class="row">
         <div class="hr col-12"></div>
-        <chat-messages
+        <chat-message
           :chat.sync="group.chat"
           :group-type="group.type"
           :group-id="group._id"
@@ -86,15 +86,16 @@
 </template>
 
 <script>
+import debounce from 'lodash/debounce';
+
 import { MAX_MESSAGE_LENGTH } from '@/../../common/script/constants';
 import externalLinks from '../../mixins/externalLinks';
 
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
-import chatMessages from '../chat/chatMessages';
+import chatMessage from '../chat/chatMessages';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
-import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
 
 export default {
   directives: {
@@ -103,18 +104,23 @@ export default {
   components: {
     autocomplete,
     communityGuidelines,
-    chatMessages,
+    chatMessage,
   },
-  mixins: [externalLinks, autoCompleteHelperMixin],
+  mixins: [externalLinks],
   props: ['label', 'group', 'placeholder'],
   data () {
     return {
       newMessage: '',
       sending: false,
+      caretPosition: 0,
       chat: {
         submitDisable: false,
         submitTimeout: null,
       },
+      coords: {
+        TOP: 0,
+        LEFT: 0,
+      },
       textbox: null,
       MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
     };
@@ -136,6 +142,35 @@ export default {
     this.handleExternalLinks();
   },
   methods: {
+    // https://medium.com/@_jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
+    getCoord (e, text) {
+      this.caretPosition = text.selectionEnd;
+      const div = document.createElement('div');
+      const span = document.createElement('span');
+      const copyStyle = getComputedStyle(text);
+
+      [].forEach.call(copyStyle, prop => {
+        div.style[prop] = copyStyle[prop];
+      });
+
+      div.style.position = 'absolute';
+      document.body.appendChild(div);
+      div.textContent = text.value.substr(0, this.caretPosition);
+      span.textContent = text.value.substr(this.caretPosition) || '.';
+      div.appendChild(span);
+      this.coords = {
+        TOP: span.offsetTop,
+        LEFT: span.offsetLeft,
+      };
+      document.body.removeChild(div);
+    },
+    updateCarretPosition: debounce(function updateCarretPosition (eventUpdate) {
+      this._updateCarretPosition(eventUpdate);
+    }, 250),
+    _updateCarretPosition (eventUpdate) {
+      const text = eventUpdate.target;
+      this.getCoord(eventUpdate, text);
+    },
     async sendMessageShortcut () {
       // If the user recently pasted in the text field, don't submit
       if (!this.chat.submitDisable) {
@@ -186,6 +221,50 @@ export default {
       }, 500);
     },
 
+    handleTab (e) {
+      if (this.$refs.autocomplete.searchActive) {
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.$refs.autocomplete.selectPrevious();
+        } else {
+          this.$refs.autocomplete.selectNext();
+        }
+      }
+    },
+
+    handleEscape (e) {
+      if (this.$refs.autocomplete.searchActive) {
+        e.preventDefault();
+        this.$refs.autocomplete.cancel();
+      }
+    },
+
+    selectNextAutocomplete (e) {
+      if (this.$refs.autocomplete.searchActive) {
+        e.preventDefault();
+        this.$refs.autocomplete.selectNext();
+      }
+    },
+
+    selectPreviousAutocomplete (e) {
+      if (this.$refs.autocomplete.searchActive) {
+        e.preventDefault();
+        this.$refs.autocomplete.selectPrevious();
+      }
+    },
+
+    selectAutocomplete (e) {
+      if (this.$refs.autocomplete.searchActive) {
+        if (this.$refs.autocomplete.selected !== null) {
+          e.preventDefault();
+          this.$refs.autocomplete.makeSelection();
+        } else {
+          // no autocomplete selected, newline instead
+          this.$refs.autocomplete.cancel();
+        }
+      }
+    },
+
     selectedAutocomplete (newText, newCaret) {
       this.newMessage = newText;
       // Wait for v-modal to update
@@ -194,6 +273,7 @@ export default {
         this.textbox.focus();
       });
     },
+
     fetchRecentMessages () {
       this.$emit('fetchRecentMessages');
     },
@@ -204,7 +284,10 @@ export default {
   beforeRouteUpdate (to, from, next) {
     // Reset chat
     this.newMessage = '';
-    this.autoCompleteMixinResetCoordsPosition();
+    this.coords = {
+      TOP: 0,
+      LEFT: 0,
+    };
 
     next();
   },
@@ -212,8 +295,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-  @import '@/assets/scss/colors.scss';
-  @import '@/assets/scss/variables.scss';
+  @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/variables.scss';
 
   .chat-actions {
     margin-top: 1em;

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

@@ -21,7 +21,7 @@
 </template>
 
 <style lang="scss">
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 .community-guidelines {
   background-color: rgba(135, 129, 144, 0.84);

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

@@ -114,7 +114,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .copy-icon {
     width: 1rem;
@@ -163,7 +163,7 @@
     width: 100%;
 
     .quest_screen {
-      background-image: url('@/assets/images/group@3x.png');
+      background-image: url('~@/assets/images/group@3x.png');
       background-size: cover;
       width: 100%;
       height: 246px;
@@ -196,7 +196,7 @@
   }
 
   .join-party {
-    background-image: url('@/assets/images/party.png');
+    background-image: url('~@/assets/images/party.png');
     background-size: cover;
     width: 203px;
     height: 66px;
@@ -244,7 +244,7 @@ import * as Analytics from '@/libs/analytics';
 import notifications from '@/mixins/notifications';
 import closeX from '../ui/closeX';
 
-import copyIcon from '@/assets/svg/copy.svg?raw';
+import copyIcon from '@/assets/svg/copy.svg';
 import copyToClipboard from '@/mixins/copyToClipboard';
 
 export default {

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

@@ -65,7 +65,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .sort-select {
     margin: 2em;
@@ -95,7 +95,7 @@ import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 import groupUtilities from '@/mixins/groupsUtilities';
 
-import positiveIcon from '@/assets/svg/positive.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg';
 
 function _mapCategories (guilds) {
   guilds.forEach(guild => {

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

@@ -115,7 +115,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   @media (min-width: 1300px) {
     .standard-page {
@@ -297,17 +297,17 @@ import markdownDirective from '@/directives/markdown';
 import chat from './chat';
 import userLink from '../userLink';
 
-import deleteIcon from '@/assets/svg/delete.svg?raw';
-import copyIcon from '@/assets/svg/copy.svg?raw';
-import likeIcon from '@/assets/svg/like.svg?raw';
-import likedIcon from '@/assets/svg/liked.svg?raw';
-import reportIcon from '@/assets/svg/report.svg?raw';
-import gemIcon from '@/assets/svg/gem.svg?raw';
-import questIcon from '@/assets/svg/quest.svg?raw';
-import questBackground from '@/assets/svg/quest-background-border.svg?raw';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg?raw';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg?raw';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg?raw';
+import deleteIcon from '@/assets/svg/delete.svg';
+import copyIcon from '@/assets/svg/copy.svg';
+import likeIcon from '@/assets/svg/like.svg';
+import likedIcon from '@/assets/svg/liked.svg';
+import reportIcon from '@/assets/svg/report.svg';
+import gemIcon from '@/assets/svg/gem.svg';
+import questIcon from '@/assets/svg/quest.svg';
+import questBackground from '@/assets/svg/quest-background-border.svg';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-small.svg';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-small.svg';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-small.svg';
 import QuestDetailModal from './questDetailModal';
 import RightSidebar from '@/components/groups/rightSidebar';
 import InvitationListModal from './invitationListModal';

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

@@ -312,7 +312,7 @@ label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers')
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .custom-control-input {
     z-index: 1 !important;
@@ -376,8 +376,8 @@ import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
 import CategoryOptions from '@/../../common/script/content/categoryOptions';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import markdownDirective from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg?raw';
-import informationIcon from '@/assets/svg/information.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg';
+import informationIcon from '@/assets/svg/information.svg';
 
 import { userStateMixin } from '../../mixins/userState';
 

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

@@ -79,7 +79,7 @@
 </template>
 
 <style lang='scss'>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #invitation-list {
     .modal-header {
@@ -127,7 +127,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .header-wrap {
     width: 100%;
@@ -242,8 +242,8 @@ import CloseIcon from '../shared/closeIcon';
 import ClassBadge from '../members/classBadge';
 import UserLabel from '../userLabel';
 
-import svgClose from '@/assets/svg/close.svg?raw';
-import svgCheck from '@/assets/svg/check.svg?raw';
+import svgClose from '@/assets/svg/close.svg';
+import svgCheck from '@/assets/svg/check.svg';
 
 export default {
   components: {

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

@@ -75,7 +75,7 @@
 </style>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   a:not([href]) {
     font-size: 16px;
@@ -126,7 +126,7 @@ import isEmail from 'validator/es/lib/isEmail';
 import isUUID from 'validator/es/lib/isUUID';
 import { mapState } from '@/libs/store';
 import notifications from '@/mixins/notifications';
-import positiveIcon from '@/assets/svg/positive.svg?raw';
+import positiveIcon from '@/assets/svg/positive.svg';
 
 const INVITE_DEFAULTS = { text: '', error: null, valid: null };
 

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

@@ -128,7 +128,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-300;
@@ -252,12 +252,12 @@ import Avatar from '../avatar';
 import userLink from '../userLink';
 import { mapState } from '@/libs/store';
 
-import syncIcon from '@/assets/svg/sync-2.svg?raw';
-import usersIcon from '@/assets/svg/users.svg?raw';
-import warriorIcon from '@/assets/svg/warrior.svg?raw';
-import rogueIcon from '@/assets/svg/rogue.svg?raw';
-import healerIcon from '@/assets/svg/healer.svg?raw';
-import wizardIcon from '@/assets/svg/wizard.svg?raw';
+import syncIcon from '@/assets/svg/sync-2.svg';
+import usersIcon from '@/assets/svg/users.svg';
+import warriorIcon from '@/assets/svg/warrior.svg';
+import rogueIcon from '@/assets/svg/rogue.svg';
+import healerIcon from '@/assets/svg/healer.svg';
+import wizardIcon from '@/assets/svg/wizard.svg';
 
 export default {
   components: {

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

@@ -278,7 +278,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .apply-options {
     padding: 1em;
@@ -372,10 +372,10 @@ import isEmpty from 'lodash/isEmpty';
 import removeMemberModal from '@/components/members/removeMemberModal';
 import loadingGryphon from '@/components/ui/loadingGryphon';
 import MemberDetails from '../memberDetails';
-import blockIcon from '@/assets/svg/block.svg?raw';
-import messageIcon from '@/assets/members/message.svg?raw';
-import starIcon from '@/assets/members/star.svg?raw';
-import dots from '@/assets/svg/dots.svg?raw';
+import blockIcon from '@/assets/svg/block.svg';
+import messageIcon from '@/assets/members/message.svg';
+import starIcon from '@/assets/members/star.svg';
+import dots from '@/assets/svg/dots.svg';
 import SelectList from '@/components/ui/selectList';
 import { PAGES } from '@/libs/consts';
 import { userStateMixin } from '../../mixins/userState';

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

@@ -81,7 +81,7 @@ b-dropdown(:text="$t('sort')", right=true)
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
   .sort-select {
     margin: 2em;
   }
@@ -115,8 +115,8 @@ import groupUtilities from '@/mixins/groupsUtilities';
 import PublicGuildItem from './publicGuildItem';
 import Sidebar from './groupSidebar';
 
-import greyBadgeIcon from '@/assets/svg/grey-badge.svg?raw';
-import positiveIcon from '@/assets/svg/positive.svg?raw';
+import greyBadgeIcon from '@/assets/svg/grey-badge.svg';
+import positiveIcon from '@/assets/svg/positive.svg';
 
 export default {
   components: { PublicGuildItem, Sidebar },

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

@@ -87,7 +87,7 @@
 </style>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .header-wrap {
     width: 100%;

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

@@ -109,7 +109,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .card-link {
     color: #4E4A57 !important;
@@ -218,10 +218,10 @@ import { mapState } from '@/libs/store';
 import categoryTags from '../categories/categoryTags';
 import groupUtilities from '@/mixins/groupsUtilities';
 import markdown from '@/directives/markdown';
-import gemIcon from '@/assets/svg/gem.svg?raw';
-import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg?raw';
-import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg?raw';
-import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg?raw';
+import gemIcon from '@/assets/svg/gem.svg';
+import goldGuildBadgeIcon from '@/assets/svg/gold-guild-badge-large.svg';
+import silverGuildBadgeIcon from '@/assets/svg/silver-guild-badge-large.svg';
+import bronzeGuildBadgeIcon from '@/assets/svg/bronze-guild-badge-large.svg';
 
 export default {
   directives: {

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

@@ -151,7 +151,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   h2 {
     color: $purple-300;
@@ -308,7 +308,7 @@ import getItemInfo from '@/../../common/script/libs/getItemInfo';
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
 
-import navigationBack from '@/assets/svg/navigation_back.svg?raw';
+import navigationBack from '@/assets/svg/navigation_back.svg';
 import questDialogContent from '../shops/quests/questDialogContent';
 import closeIcon from '../shared/closeIcon';
 import QuestRewards from '../shops/quests/questRewards';

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

@@ -269,7 +269,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .svg-icon {
     height: 25px;
@@ -645,10 +645,10 @@ import { mapState } from '@/libs/store';
 import sidebarSection from '../sidebarSection';
 import Sprite from '../ui/sprite';
 
-import questIcon from '@/assets/svg/quest.svg?raw';
-import swordIcon from '@/assets/svg/sword.svg?raw';
-import rageIcon from '@/assets/svg/rage.svg?raw';
-import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg?raw';
+import questIcon from '@/assets/svg/quest.svg';
+import swordIcon from '@/assets/svg/sword.svg';
+import rageIcon from '@/assets/svg/rage.svg';
+import healthNoPaddingIcon from '@/assets/svg/health_no_padding.svg';
 import questActionsMixin from '@/components/groups/questActions.mixin';
 
 export default {

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

@@ -143,12 +143,12 @@ import questSidebarSection from '@/components/groups/questSidebarSection';
 import sidebarSection from '@/components/sidebarSection';
 import markdownDirective from '@/directives/markdown';
 
-import menuIcon from '@/assets/svg/menu.svg?raw';
-import sparklesIcon from '@/assets/svg/sparklesIcon.svg?raw';
-import leaveIcon from '@/assets/svg/leave.svg?raw';
-import editIcon from '@/assets/svg/edit.svg?raw';
-import messageIcon from '@/assets/svg/message.svg?raw';
-import usersIcon from '@/assets/svg/users.svg?raw';
+import menuIcon from '@/assets/svg/menu.svg';
+import sparklesIcon from '@/assets/svg/sparklesIcon.svg';
+import leaveIcon from '@/assets/svg/leave.svg';
+import editIcon from '@/assets/svg/edit.svg';
+import messageIcon from '@/assets/svg/message.svg';
+import usersIcon from '@/assets/svg/users.svg';
 
 export default {
   components: {
@@ -181,7 +181,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   @media (min-width: 1300px) {
     .sidebar {

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

@@ -157,12 +157,12 @@
                     <img
                       v-if="!group.quest.extra.worldDmg.seasonalShop"
                       class="rage-strike"
-                      src="@/assets/images/world-boss/rage_strike@2x.png"
+                      src="~@/assets/images/world-boss/rage_strike@2x.png"
                     >
                     <img
                       v-if="group.quest.extra.worldDmg.seasonalShop"
                       class="rage-strike-active"
-                      src="@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
+                      src="~@/assets/images/world-boss/rage_strike-seasonalShop@2x.png"
                     >
                   </div>
                   <div
@@ -172,12 +172,12 @@
                     <img
                       v-if="!group.quest.extra.worldDmg.market"
                       class="rage-strike"
-                      src="@/assets/images/world-boss/rage_strike@2x.png"
+                      src="~@/assets/images/world-boss/rage_strike@2x.png"
                     >
                     <img
                       v-if="group.quest.extra.worldDmg.market"
                       class="rage-strike-active"
-                      src="@/assets/images/world-boss/rage_strike-market@2x.png"
+                      src="~@/assets/images/world-boss/rage_strike-market@2x.png"
                     >
                   </div>
                   <div
@@ -187,12 +187,12 @@
                     <img
                       v-if="!group.quest.extra.worldDmg.quests"
                       class="rage-strike"
-                      src="@/assets/images/world-boss/rage_strike@2x.png"
+                      src="~@/assets/images/world-boss/rage_strike@2x.png"
                     >
                     <img
                       v-if="group.quest.extra.worldDmg.quests"
                       class="rage-strike-active"
-                      src="@/assets/images/world-boss/rage_strike-quests@2x.png"
+                      src="~@/assets/images/world-boss/rage_strike-quests@2x.png"
                     >
                   </div>
                 </div>
@@ -486,7 +486,7 @@
 </template>
 
 <style lang='scss' scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   h1 {
     color: $purple-200;
@@ -756,25 +756,25 @@ import worldBossRageModal from '../world-boss/worldBossRageModal';
 import sidebarSection from '../sidebarSection';
 import chat from './chat';
 
-import challengeIcon from '@/assets/svg/challenge.svg?raw';
-import chevronIcon from '@/assets/svg/chevron-red.svg?raw';
-import gemIcon from '@/assets/svg/gem.svg?raw';
-import healthIcon from '@/assets/svg/health.svg?raw';
-import informationIconRed from '@/assets/svg/information-red.svg?raw';
-import questBackground from '@/assets/svg/quest-background-border.svg?raw';
-import rageIcon from '@/assets/svg/rage.svg?raw';
-import swordIcon from '@/assets/svg/sword.svg?raw';
+import challengeIcon from '@/assets/svg/challenge.svg';
+import chevronIcon from '@/assets/svg/chevron-red.svg';
+import gemIcon from '@/assets/svg/gem.svg';
+import healthIcon from '@/assets/svg/health.svg';
+import informationIconRed from '@/assets/svg/information-red.svg';
+import questBackground from '@/assets/svg/quest-background-border.svg';
+import rageIcon from '@/assets/svg/rage.svg';
+import swordIcon from '@/assets/svg/sword.svg';
 
-import tier1 from '@/assets/svg/tier-1.svg?raw';
-import tier2 from '@/assets/svg/tier-2.svg?raw';
-import tier3 from '@/assets/svg/tier-3.svg?raw';
-import tier4 from '@/assets/svg/tier-4.svg?raw';
-import tier5 from '@/assets/svg/tier-5.svg?raw';
-import tier6 from '@/assets/svg/tier-6.svg?raw';
-import tier7 from '@/assets/svg/tier-7.svg?raw';
-import tierMod from '@/assets/svg/tier-mod.svg?raw';
-import tierNPC from '@/assets/svg/tier-npc.svg?raw';
-import tierStaff from '@/assets/svg/tier-staff.svg?raw';
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+import tierMod from '@/assets/svg/tier-mod.svg';
+import tierNPC from '@/assets/svg/tier-npc.svg';
+import tierStaff from '@/assets/svg/tier-staff.svg';
 
 import staffList from '../../libs/staffList';
 import reportBug from '@/mixins/reportBug.js';

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

@@ -20,7 +20,7 @@ body.modal-open .habitica-top-banner {
 </style>
 
 <style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
+@import '~@/assets/scss/colors.scss';
 
 .habitica-top-banner {
   width: 100%;

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

@@ -41,7 +41,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .announce-text {
     color: $purple-50;
@@ -56,7 +56,7 @@
       rgba(255,190,93,1) 25%,
       rgba(255,190,93,1) 75%,
       rgba(255,190,93,0) 100%),
-      url('@/assets/images/glitter.png');
+      url('~@/assets/images/glitter.png');
     cursor: pointer;
   }
 
@@ -86,8 +86,8 @@ import find from 'lodash/find';
 import { mapState } from '@/libs/store';
 import BaseBanner from './base';
 
-import giftsBirthday from '@/assets/svg/gifts-birthday.svg?raw';
-import tenBirthday from '@/assets/svg/10th-birthday-linear.svg?raw';
+import giftsBirthday from '@/assets/svg/gifts-birthday.svg';
+import tenBirthday from '@/assets/svg/10th-birthday-linear.svg';
 
 export default {
   components: {

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

@@ -17,7 +17,7 @@
 </template>
 
 <style lang="scss">
-  @import '@/assets/scss/colors.scss';
+  @import '~@/assets/scss/colors.scss';
 
   .chat-banner {
     width: 100%;