move modals to notifications (to open the modals)

website/client/components/notifications.vue

@@ -87,6 +87,7 @@ div
 import axios from 'axios';
 import moment from 'moment';
 import throttle from 'lodash/throttle';
+import debounce from 'lodash/debounce';
 
 import { shouldDo } from '../../common/script/cron';
 import { mapState } from 'client/libs/store';
@@ -117,6 +118,44 @@ import ultimateGear from './achievements/ultimateGear';
 import wonChallenge from './achievements/wonChallenge';
 import loginIncentives from './achievements/login-incentives';
 
+const NOTIFICATIONS = {
+  CHALLENGE_JOINED_ACHIEVEMENT: {
+    achievement: true,
+    label: ($t) => `${$t('achievement')}: ${$t('joinedChallenge')}`,
+    modalId: 'joined-challenge',
+  },
+  ULTIMATE_GEAR_ACHIEVEMENT: {
+    achievement: true,
+    label: ($t) => `${$t('achievement')}: ${$t('gearAchievement')}`,
+    modalId: 'ultimate-gear',
+  },
+  REBIRTH_ACHIEVEMENT: {
+    label: ($t) => `${$t('achievement')}: ${$t('rebirthBegan')}`,
+    achievement: true,
+    modalId: 'rebirth',
+  },
+  GUILD_JOINED_ACHIEVEMENT: {
+    label: ($t) => `${$t('achievement')}: ${$t('joinedGuild')}`,
+    achievement: true,
+    modalId: 'joined-guild',
+  },
+  INVITED_FRIEND_ACHIEVEMENT: {
+    achievement: true,
+    label: ($t) => `${$t('achievement')}: ${$t('invitedFriend')}`,
+    modalId: 'invited-friend',
+  },
+  NEW_CONTRIBUTOR_LEVEL: {
+    achievement: true,
+    label: ($t) => $t('modalContribAchievement'),
+    modalId: 'contributor',
+  },
+  DEATH: {
+    sound: 'Death',
+    label: ($t) => $t('lostAllHealth'),
+    modalId: 'death',
+  },
+};
+
 export default {
   mixins: [notifications, guide],
   components: {
@@ -206,8 +245,8 @@ export default {
     userHp (after, before) {
       if (this.user.needsCron) return;
       if (after <= 0) {
-        this.playSound('Death');
+        alert('userHp');
-        this.$root.$emit('bv::show::modal', 'death');
+        this.showNotificationWithModal('DEATH');
         // @TODO: {keyboard:false, backdrop:'static'}
       } else if (after <= 30 && !this.user.flags.warnedLowHealth) {
         this.$root.$emit('bv::show::modal', 'low-health');
@@ -282,7 +321,7 @@ export default {
       this.$store.dispatch('user:fetch'),
       this.$store.dispatch('tasks:fetchUserTasks'),
     ]).then(() => {
-      this.checkUserAchievements();
+      this.debounceCheckUserAchievements();
 
       // @TODO: This is a timeout to ensure dom is loaded
       window.setTimeout(() => {
@@ -307,6 +346,30 @@ export default {
     document.removeEventListener('keydown', this.checkNextCron);
   },
   methods: {
+    showNotificationWithModal (type, forceToModal) {
+      const config = NOTIFICATIONS[type];
+
+      if (!config) {
+        return;
+      }
+
+      if (config.achievement) {
+        this.playSound('Achievement_Unlocked');
+      } else if (config.sound) {
+        this.playSound(config.sound);
+      }
+
+      if (forceToModal) {
+        this.$root.$emit('bv::show::modal', config.modalId);
+      } else {
+        this.text(config.label(this.$t), () => {
+          this.$root.$emit('bv::show::modal', config.modalId);
+        }, false);
+      }
+    },
+    debounceCheckUserAchievements: debounce(function debounceCheck () {
+      this.checkUserAchievements();
+    }, 700),
     checkUserAchievements () {
       if (this.user.needsCron) return;
 
@@ -317,8 +380,7 @@ export default {
       }
 
       if (this.user.stats.hp <= 0) {
-        this.playSound('Death');
+        this.showNotificationWithModal('DEATH');
-        this.$root.$emit('bv::show::modal', 'death');
       }
 
       if (this.questCompleted) {
@@ -465,35 +527,20 @@ export default {
             this.$root.$emit('bv::show::modal', 'won-challenge');
             break;
           case 'STREAK_ACHIEVEMENT':
-            this.streak(this.user.achievements.streak);
+            this.streak(this.user.achievements.streak, () => {
-            this.playSound('Achievement_Unlocked');
               if (!this.user.preferences.suppressModals.streak) {
                 this.$root.$emit('bv::show::modal', 'streak');
               }
+            });
+            this.playSound('Achievement_Unlocked');
             break;
           case 'ULTIMATE_GEAR_ACHIEVEMENT':
-            this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'ultimate-gear');
-            break;
           case 'REBIRTH_ACHIEVEMENT':
-            this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'rebirth');
-            break;
           case 'GUILD_JOINED_ACHIEVEMENT':
-            this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'joined-guild');
-            break;
           case 'CHALLENGE_JOINED_ACHIEVEMENT':
-            this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'joined-challenge');
-            break;
           case 'INVITED_FRIEND_ACHIEVEMENT':
-            this.playSound('Achievement_Unlocked');
-            this.$root.$emit('bv::show::modal', 'invited-friend');
-            break;
           case 'NEW_CONTRIBUTOR_LEVEL':
-            this.playSound('Achievement_Unlocked');
+            this.showNotificationWithModal(notification.type);
-            this.$root.$emit('bv::show::modal', 'contributor');
             break;
           case 'CRON':
             if (notification.data) {
@@ -566,7 +613,7 @@ export default {
         });
       }
 
-      this.checkUserAchievements();
+      this.debounceCheckUserAchievements();
     },
   },
 };

website/client/components/snackbars/notification.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 transition(name="fade")
-  .notification.callout.animated(:class="classes", v-if='show', @click='show = false')
+  .notification.callout.animated(:class="classes", v-if='show', @click='handleOnClick()')
     .row(v-if='notification.type === "error"')
       .text.col-12
         div(v-html='notification.text')
@@ -151,6 +151,14 @@ export default {
       this.$store.dispatch('snackbars:remove', this.notification);
     },
   },
+  methods: {
+    handleOnClick () {
+      if (typeof this.notification.onClick === 'function') {
+        this.notification.onClick();
+      }
+      this.show = false;
+    },
+  },
   computed: {
     message () {
       if (this.notification.flavorMessage) {

website/client/mixins/notifications.js

@@ -53,12 +53,12 @@ export default {
         itemName,
       }));
     },
-    streak (val) {
+    streak (val, onClick) {
-      this.notify(`${val}`, 'streak');
+      this.notify(`${val}`, 'streak', null, null, onClick, typeof onClick === 'undefined');
     },
-    text (val, onClick) {
+    text (val, onClick, timeout) {
       if (!val) return;
-      this.notify(val, 'info', null, null, onClick);
+      this.notify(val, 'info', null, null, onClick, timeout);
     },
     sign (number) {
       return getSign(number);
@@ -66,14 +66,19 @@ export default {
     round (number, nDigits) {
       return round(number, nDigits);
     },
-    notify (html, type, icon, sign) {
+    notify (html, type, icon, sign, onClick, timeout) {
+      if (typeof timeout === 'undefined') {
+        timeout = true;
+      }
+
       this.$store.dispatch('snackbars:add', {
         title: '',
         text: html,
         type,
         icon,
         sign,
-        timeout: true,
+        onClick,
+        timeout,
       });
     },
   },

website/common/locales/en/achievements.json

@@ -1,4 +1,5 @@
 {
+  "achievement": "Achievement",
   "share": "Share",
   "onwards": "Onwards!",
   "levelup": "By accomplishing your real life goals, you leveled up and are now fully healed!",