Merge branch 'develop' of https://github.com/HabitRPG/habitica into c…

…lient/multiple-fixes-shops

# Conflicts:
#	website/client/store/index.js

package.json

@@ -1,7 +1,7 @@
 {
   "name": "habitica",
   "description": "A habit tracker app which treats your goals like a Role Playing Game.",
-  "version": "3.110.2",
+  "version": "3.110.3",
   "main": "./website/server/index.js",
   "dependencies": {
     "@slack/client": "^3.8.1",

test/client-old/spec/controllers/notificationCtrlSpec.js

@@ -100,7 +100,7 @@ describe('Notification Controller', function() {
   });
 
   describe('User challenge won notification watch', function() {
-    it('opens challenge won modal when a challenge-won notification is recieved', function() {
+    it('opens challenge won modal when a challenge-won notification is received', function() {
       rootScope.$digest();
       rootScope.userNotifications.push({type: 'WON_CHALLENGE'});
       rootScope.$digest();
@@ -109,7 +109,7 @@ describe('Notification Controller', function() {
       expect(achievement.displayAchievement).to.be.calledWith('wonChallenge');
     });
 
-    it('does not open challenge won modal if no new challenge-won notification is recieved', function() {
+    it('does not open challenge won modal if no new challenge-won notification is received', function() {
       rootScope.$digest();
       rootScope.$digest();
 
@@ -118,7 +118,7 @@ describe('Notification Controller', function() {
   });
 
   describe('User streak achievement notification watch', function() {
-    it('opens streak achievement modal when a streak-achievement notification is recieved', function() {
+    it('opens streak achievement modal when a streak-achievement notification is received', function() {
       rootScope.$digest();
       rootScope.userNotifications.push({type: 'STREAK_ACHIEVEMENT'});
       rootScope.$digest();
@@ -127,7 +127,7 @@ describe('Notification Controller', function() {
       expect(achievement.displayAchievement).to.be.calledWith('streak', {size: 'md'});
     });
 
-    it('does not open streak achievement modal if no new streak-achievement notification is recieved', function() {
+    it('does not open streak achievement modal if no new streak-achievement notification is received', function() {
       rootScope.$digest();
       rootScope.$digest();
 
@@ -136,7 +136,7 @@ describe('Notification Controller', function() {
   });
 
   describe('User ultimate gear set achievement notification watch', function() {
-    it('opens ultimate gear set achievement modal when an ultimate-gear-achievement notification is recieved', function() {
+    it('opens ultimate gear set achievement modal when an ultimate-gear-achievement notification is received', function() {
       rootScope.$digest();
       rootScope.userNotifications.push({type: 'ULTIMATE_GEAR_ACHIEVEMENT'});
       rootScope.$digest();
@@ -145,7 +145,7 @@ describe('Notification Controller', function() {
       expect(achievement.displayAchievement).to.be.calledWith('ultimateGear', {size: 'md'});
     });
 
-    it('does not open ultimate gear set achievement modal if no new ultimate-gear-achievement notification is recieved', function() {
+    it('does not open ultimate gear set achievement modal if no new ultimate-gear-achievement notification is received', function() {
       rootScope.$digest();
       rootScope.$digest();
 
@@ -154,7 +154,7 @@ describe('Notification Controller', function() {
   });
 
   describe('User rebirth achievement notification watch', function() {
-    it('opens rebirth achievement modal when a rebirth-achievement notification is recieved', function() {
+    it('opens rebirth achievement modal when a rebirth-achievement notification is received', function() {
       rootScope.$digest();
       rootScope.userNotifications.push({type: 'REBIRTH_ACHIEVEMENT'});
       rootScope.$digest();
@@ -163,7 +163,7 @@ describe('Notification Controller', function() {
       expect(achievement.displayAchievement).to.be.calledWith('rebirth');
     });
 
-    it('does not open rebirth achievement modal if no new rebirth-achievement notification is recieved', function() {
+    it('does not open rebirth achievement modal if no new rebirth-achievement notification is received', function() {
       rootScope.$digest();
       rootScope.$digest();
 
@@ -172,7 +172,7 @@ describe('Notification Controller', function() {
   });
 
   describe('User contributor achievement notification watch', function() {
-    it('opens contributor achievement modal when a new-contributor-level notification is recieved', function() {
+    it('opens contributor achievement modal when a new-contributor-level notification is received', function() {
       rootScope.$digest();
       rootScope.userNotifications.push({type: 'NEW_CONTRIBUTOR_LEVEL'});
       rootScope.$digest();
@@ -181,7 +181,7 @@ describe('Notification Controller', function() {
       expect(achievement.displayAchievement).to.be.calledWith('contributor', {size: 'md'});
     });
 
-    it('does not open contributor achievement modal if no new new-contributor-level notification is recieved', function() {
+    it('does not open contributor achievement modal if no new new-contributor-level notification is received', function() {
       rootScope.$digest();
       rootScope.$digest();
 

website/client/assets/scss/dropdown.scss

@@ -34,7 +34,6 @@
   line-height: 1.71;
   color: $gray-50;
   cursor: pointer;
-  border-bottom: 1px solid $gray-500;
 
   &:focus {
     outline: none;

website/client/components/appFooter.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 .row
+  buy-gems-modal
   modify-inventory
   footer.container-fluid
     .row
@@ -59,22 +60,24 @@
                 a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') Guidance for Blacksmiths
               li
                 a(href='http://devs.habitica.com/', target='_blank') The Forge - Developer Blog
-          .col-6
+          .col-6.social
             h3 Social
             .social-circle
               a(href='https://twitter.com/habitica', target='_blank')
                 .social-icon.svg-icon(v-html='icons.twitter')
             .social-circle
               a(href='https://www.instagram.com/habitica/', target='_blank')
-                .social-icon.svg-icon(v-html='icons.instagram')
+                .social-icon.svg-icon.instagram(v-html='icons.instagram')
             .social-circle
               a(href='https://www.facebook.com/Habitica', target='_blank')
                 .social-icon.facebook.svg-icon(v-html='icons.facebook')
         .row
           .col-10
             | We’re an open source project that depends on our users for support. The money you donate helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers.
           .col-2
-            button.btn.btn-primary Donate
+            button.btn.btn-donate(@click='donate()')
+              .svg-icon.heart(v-html='icons.heart')
+              .text Donate
     .row
       hr.col-12
     .row
@@ -99,10 +102,12 @@
             a.btn.btn-default(@click='makeAdmin()') Make Admin
             a.btn.btn-default(@click='openModifyInventoryModal()') Modify Inventory
       .col-4.text-center
-        .logo.svg-icon(v-html='icons.gryphon')
+        .logo
       .col-4.text-right
-        span Privacy Policy
-        span Terms of Use
+        span
+          router-link(to="/static/privacy") Privacy Policy
+        span.terms-link
+          router-link(to="/static/terms") Terms of Use
 </template>
 
 <style lang="scss" scoped>
@@ -114,6 +119,10 @@
     padding-top: 3em;
     margin: 0;
     color: #878190;
+
+    a {
+      color: #878190;
+    }
   }
 
   h3 {
@@ -129,13 +138,20 @@
     margin-bottom: .5em;
   }
 
+  .social {
+    h3 {
+      text-align: right;
+    }
+  }
+
   .social-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #c3c0c7;
     display: inline-block;
-    margin-right: 1em;
+    margin-left: 1em;
+    float: right;
 
     .social-icon {
       color: #e1e0e3;
@@ -144,15 +160,26 @@
       margin-top: 1em;
     }
 
-    .svg-icon.facebook svg {
-      height: 20px;
+    .facebook {
+      margin-top: .7em;
+    }
+
+    .instagram {
+      margin-top: .85em;
     }
   }
 
-  .logo.svg-icon {
+  .logo {
+    background-image: url('~assets/images/gryphon@3x.png');
     width: 24px;
+    height: 24px;
     margin: 0 auto;
     color: #c3c0c7;
+    background-size: cover;
+  }
+
+  .terms-link {
+    margin-left: 1em;
   }
 
   .debug-group {
@@ -162,6 +189,30 @@
     border-radius: 2px;
     padding: 2em;
   }
+
+  .btn-donate {
+    background: #c3c0c7;
+    box-shadow: none;
+    border-radius: 4px;
+
+    .heart {
+      width: 18px;
+      margin-right: .5em;
+      margin-bottom: .2em;
+    }
+
+    .text, .heart {
+      display: inline-block;
+      vertical-align: bottom;
+    }
+  }
+</style>
+
+<style>
+  .facebook svg {
+    width: 10px;
+    margin: 0 auto;
+  }
 </style>
 
 <script>
@@ -173,14 +224,17 @@ import gryphon from 'assets/svg/gryphon.svg';
 import twitter from 'assets/svg/twitter.svg';
 import facebook from 'assets/svg/facebook.svg';
 import instagram from 'assets/svg/instagram.svg';
+import heart from 'assets/svg/heart.svg';
 
 import modifyInventory from './modifyInventory';
+import buyGemsModal from './payments/buyGemsModal';
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
 
 export default {
   components: {
     modifyInventory,
+    buyGemsModal,
   },
   data () {
     return {
@@ -189,6 +243,7 @@ export default {
         twitter,
         facebook,
         instagram,
+        heart,
       }),
       debugMenuShown: false,
       IS_PRODUCTION,
@@ -275,6 +330,9 @@ export default {
     openModifyInventoryModal  () {
       this.$root.$emit('show::modal', 'modify-inventory');
     },
+    donate () {
+      this.$root.$emit('show::modal', 'buy-gems');
+    },
   },
 };
 </script>

website/client/components/appMenu.vue

@@ -62,7 +62,7 @@ div
       a.dropdown.item-with-icon.item-user
         .svg-icon(v-html="icons.user")
         .dropdown-menu.dropdown-menu-right.user-dropdown
-          a.dropdown-item.edit-avatar(@click='showAvatar()')
+          a.dropdown-item.edit-avatar.dropdown-separated(@click='showAvatar()')
             h3 {{ user.profile.name }}
             span.small-text {{ $t('editAvatar') }}
           a.nav-link.dropdown-item(@click.prevent='showInbox()') {{ $t('inbox') }}
@@ -129,6 +129,10 @@ div
     margin-left: 0px;
   }
 
+  .dropdown-separated {
+    border-bottom: 1px solid $gray-500;
+  }
+
   .dropdown-menu:not(.user-dropdown) {
     background: $purple-200;
     border-radius: 0px;

website/client/components/avatar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.avatar(:style="{width, height, paddingTop}", :class="backgroundClass")
+.avatar(:style="{width, height, paddingTop}", :class="backgroundClass", @click.prevent='castEnd()')
   .character-sprites
     template(v-if="!avatarOnly")
       // Mount Body
@@ -185,6 +185,10 @@ export default {
 
       return result;
     },
+    castEnd (e) {
+      if (!this.$store.state.castingSpell) return;
+      this.$root.$emit('castEnd', this.member, 'user', e);
+    },
   },
 };
 </script>