Merge branch 'negue/modal-notifications' into develop

2018-10-13 21:18:30 +02:00
parent fe39ef72ff 5ca489dee7
commit aa517e0ad6
7 changed files with 113 additions and 59 deletions
@@ -40,9 +40,9 @@
 import axios from 'axios';
 import Avatar from '../avatar';
 import { mapState } from 'client/libs/store';
-import revive from '../../../common/script/ops/revive';
 import percent from '../../../common/script/libs/percent';
 import {maxHealth} from '../../../common/script/index';
+import revive from '../../../common/script/ops/revive';

 export default {
  components: {
@@ -1,5 +1,5 @@
 <template lang="pug">
-  b-modal#rebirth(:title="$t('modalAchievement')", size='md', :hide-footer="true")
+  b-modal#rebirth(:title="$t('modalAchievement')", size='md', :hide-footer="true", @hidden="reloadPage()")
    .modal-body
      .col-12
        // @TODO: +achievementAvatar('sun',0)
@@ -24,23 +24,26 @@
 </style>

 <script>
-import achievementFooter from './achievementFooter';
-import achievementAvatar from './achievementAvatar';
+  import achievementFooter from './achievementFooter';
+  import achievementAvatar from './achievementAvatar';

-import { mapState } from 'client/libs/store';
+  import {mapState} from 'client/libs/store';

-export default {
-  components: {
-    achievementFooter,
-    achievementAvatar,
-  },
-  computed: {
-    ...mapState({user: 'user.data'}),
-  },
-  methods: {
-    close () {
-      this.$root.$emit('bv::hide::modal', 'rebirth');
+  export default {
+    components: {
+      achievementFooter,
+      achievementAvatar,
    },
-  },
-};
+    computed: {
+      ...mapState({user: 'user.data'}),
+    },
+    methods: {
+      close () {
+        this.$root.$emit('bv::hide::modal', 'rebirth');
+      },
+      reloadPage () {
+        window.location.reload(true);
+      },
+    },
+  };
 </script>
@@ -87,6 +87,7 @@ div
 import axios from 'axios';
 import moment from 'moment';
 import throttle from 'lodash/throttle';
+import debounce from 'lodash/debounce';

 import { toNextLevel } from '../../common/script/statHelpers';
 import { shouldDo } from '../../common/script/cron';
@@ -118,6 +119,39 @@ 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('gearAchievementNotification')}`,
+    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',
+  },
+};
+
 export default {
  mixins: [notifications, guide],
  components: {
@@ -211,8 +245,7 @@ export default {
    userHp (after, before) {
      if (this.user.needsCron) return;
      if (after <= 0) {
-        this.playSound('Death');
-        this.$root.$emit('bv::show::modal', 'death');
+        this.showDeathModal();
        // @TODO: {keyboard:false, backdrop:'static'}
      } else if (after <= 30 && !this.user.flags.warnedLowHealth) {
        this.$root.$emit('bv::show::modal', 'low-health');
@@ -281,7 +314,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(() => {
@@ -306,6 +339,45 @@ export default {
    document.removeEventListener('keydown', this.checkNextCron);
  },
  methods: {
+    showDeathModal () {
+      this.playSound('Death');
+      this.$root.$emit('bv::show::modal', 'death');
+    },
+    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 (type === 'REBIRTH_ACHIEVEMENT') {
+        // reload if the user hasn't clicked on the notification
+        const timeOut = setTimeout(() => {
+          window.location.reload(true);
+        }, 60000);
+
+        this.text(config.label(this.$t), () => {
+          // prevent the current reload timeout
+          clearTimeout(timeOut);
+          this.$root.$emit('bv::show::modal', config.modalId);
+        }, false);
+      } else 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),
    displayUserExpAndLvlNotifications (afterExp, beforeExp, afterLvl, beforeLvl) {
      if (afterExp === beforeExp && afterLvl === beforeLvl) return;

@@ -345,8 +417,7 @@ export default {
      }

      if (this.user.stats.hp <= 0) {
-        this.playSound('Death');
-        this.$root.$emit('bv::show::modal', 'death');
+        this.showDeathModal();
      }

      if (this.questCompleted) {
@@ -493,37 +564,20 @@ export default {
            this.$root.$emit('bv::show::modal', 'won-challenge');
            break;
          case 'STREAK_ACHIEVEMENT':
-            this.text(`${this.$t('streaks')}: ${this.user.achievements.streak}`);
+            this.text(`${this.$t('streaks')}: ${this.user.achievements.streak}`, () => {
+              if (!this.user.preferences.suppressModals.streak) {
+                this.$root.$emit('bv::show::modal', 'streak');
+              }
+            });
            this.playSound('Achievement_Unlocked');
-            if (!this.user.preferences.suppressModals.streak) {
-              this.$root.$emit('bv::show::modal', 'streak');
-            }
            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.text(`${this.$t('achievement')}: ${this.$t('joinedChallenge')}`, () => {
-              this.$root.$emit('bv::show::modal', 'joined-challenge');
-            }, false);
-            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.$root.$emit('bv::show::modal', 'contributor');
+            this.showNotificationWithModal(notification.type);
            break;
          case 'CRON':
            if (notification.data) {
@@ -596,7 +650,7 @@ export default {
        });
      }

-      this.checkUserAchievements();
+      this.debounceCheckUserAchievements();
    },
  },
 };
@@ -33,7 +33,7 @@ transition(name="fade")

 <style lang="scss" scoped>
  .notification {
-    border-radius: 1000px;
+    border-radius: 30px;
    background-color: #24cc8f;
    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
    color: white;
@@ -43,7 +43,6 @@ transition(name="fade")
  }

  .info {
-    max-height: 56px;
    background-color: #46a7d9;
    padding-top: .5em;
  }
@@ -146,20 +145,19 @@ export default {
  beforeDestroy () {
    clearTimeout(this.timer);
  },
+  watch: {
+    show () {
+      this.$store.dispatch('snackbars:remove', this.notification);
+    },
+  },
  methods: {
    handleOnClick () {
      if (typeof this.notification.onClick === 'function') {
        this.notification.onClick();
      }
-
      this.show = false;
    },
  },
-  watch: {
-    show () {
-      this.$store.dispatch('snackbars:remove', this.notification);
-    },
-  },
  computed: {
    message () {
      if (this.notification.flavorMessage) {
@@ -58,8 +58,8 @@ export default {
        itemName,
      }));
    },
-    streak (val) {
-      this.notify(`${val}`, 'streak');
+    streak (val, onClick) {
+      this.notify(`${val}`, 'streak', null, null, onClick, typeof onClick === 'undefined');
    },
    text (val, onClick, timeout) {
      if (!val) return;
@@ -139,8 +139,6 @@ export function newStuffLater (store) {
 export async function rebirth () {
  let result = await axios.post('/api/v4/user/rebirth');

-  window.location.reload(true);
-
  return result;
 }

@@ -80,6 +80,7 @@
  "autoEquipPopoverText": "Select this option to automatically equip gear as soon as you purchase it.",
  "costumeDisabled": "You have disabled your costume.",
  "gearAchievement": "You have earned the \"Ultimate Gear\" Achievement for upgrading to the maximum gear set for a class! You have attained the following complete sets:",
+  "gearAchievementNotification": "You have earned the \"Ultimate Gear\" Achievement for upgrading to the maximum gear set for a class!",
  "moreGearAchievements": "To attain more Ultimate Gear badges, change classes on <a href='/user/settings/site' target='_blank'>the Settings &gt; Site page</a> and buy your new class's gear!",
  "armoireUnlocked": "For more equipment, check out the <strong>Enchanted Armoire!</strong> Click on the Enchanted Armoire Reward for a random chance at special Equipment! It may also give you random XP or food items.",
  "ultimGearName": "Ultimate Gear - <%= ultClass %>",