Miscing groups (#9004)

* Fixed party invite accepting

* Fixed message sending and scrolling

* Fixed profile clicking

* Hids needs work

* Added group plan page images

* Added category to editing groups

* Added quest box fix

* Added tier styles

* Changed port back to 8080

* Fixed npc style

website/client/assets/svg/for-css/quest-border.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" viewBox="0 0 424 80">
+    <defs>
+        <path id="a" d="M0 0h424v80H0z"/>
+        <path id="b" d="M0 0h10v10H0z"/>
+        <path id="c" d="M0 0h10v10H0z"/>
+        <path id="d" d="M0 0h10v10H0z"/>
+        <path id="e" d="M0 0h10v10H0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <use fill="#F9F9F9" xlink:href="#a"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h420v76H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h422v78H1z"/>
+        </g>
+        <g transform="translate(0 70)">
+            <use fill="#EDECEE" xlink:href="#b"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g transform="translate(414 70)">
+            <use fill="#EDECEE" xlink:href="#c"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g transform="translate(414)">
+            <use fill="#EDECEE" xlink:href="#d"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+        <g>
+            <use fill="#EDECEE" xlink:href="#e"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
+        </g>
+    </g>
+</svg>

website/client/assets/svg/quest-background-border.svg

@@ -2,35 +2,35 @@
     <defs>
         <path id="a" d="M0 0h424v80H0z"/>
         <path id="b" d="M0 0h10v10H0z"/>
-        <path id="c" d="M414 0h10v10h-10z"/>
-        <path id="d" d="M0 70h10v10H0z"/>
-        <path id="e" d="M414 70h10v10h-10z"/>
+        <path id="c" d="M0 0h10v10H0z"/>
+        <path id="d" d="M0 0h10v10H0z"/>
+        <path id="e" d="M0 0h10v10H0z"/>
     </defs>
-    <g fill="#F9F9F9" fill-rule="evenodd">
+    <g fill="none" fill-rule="evenodd">
         <g>
             <use fill="#F9F9F9" xlink:href="#a"/>
             <path stroke="#E1E0E3" stroke-width="4" d="M2 2h420v76H2z"/>
             <path stroke="#C3C0C7" stroke-width="2" d="M1 1h422v78H1z"/>
         </g>
-        <g>
+        <g transform="translate(0 70)">
             <use fill="#EDECEE" xlink:href="#b"/>
             <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
             <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
         </g>
-        <g>
+        <g transform="translate(414 70)">
             <use fill="#EDECEE" xlink:href="#c"/>
-            <path stroke="#E1E0E3" stroke-width="4" d="M416 2h6v6h-6z"/>
-            <path stroke="#C3C0C7" stroke-width="2" d="M415 1h8v8h-8z"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
         </g>
-        <g>
+        <g transform="translate(414)">
             <use fill="#EDECEE" xlink:href="#d"/>
-            <path stroke="#E1E0E3" stroke-width="4" d="M2 72h6v6H2z"/>
-            <path stroke="#C3C0C7" stroke-width="2" d="M1 71h8v8H1z"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
         </g>
         <g>
             <use fill="#EDECEE" xlink:href="#e"/>
-            <path stroke="#E1E0E3" stroke-width="4" d="M416 72h6v6h-6z"/>
-            <path stroke="#C3C0C7" stroke-width="2" d="M415 71h8v8h-8z"/>
+            <path stroke="#E1E0E3" stroke-width="4" d="M2 2h6v6H2z"/>
+            <path stroke="#C3C0C7" stroke-width="2" d="M1 1h8v8H1z"/>
         </g>
     </g>
 </svg>

website/client/components/chat/chatMessages.vue

@@ -18,7 +18,9 @@
           :hideClassBadge='true')
       .card.col-8
         .card-block
-            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])') {{msg.user}}
+            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
+              | {{msg.user}}
+              .svg-icon(v-html="`icons.tier${cachedProfileData[msg.uuid].contributor.level}`", v-if='cachedProfileData[msg.uuid] && cachedProfileData[msg.uuid].contributor && cachedProfileData[msg.uuid].contributor.level')
             p {{msg.timestamp | timeAgo}}
             .text(v-markdown='msg.text')
             hr
@@ -41,7 +43,9 @@
     .row(v-if='user._id === msg.uuid')
       .card.col-8.offset-2
         .card-block
-            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])') {{msg.user}}
+            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])')
+              | {{msg.user}}
+              .svg-icon(v-html="icons[`tier${cachedProfileData[msg.uuid].contributor.level}`]", v-if='cachedProfileData[msg.uuid] && cachedProfileData[msg.uuid].contributor && cachedProfileData[msg.uuid].contributor.level')
             p {{msg.timestamp | timeAgo}}
             .text(v-markdown='msg.text')
             hr
@@ -70,6 +74,56 @@
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
+  // @TODO: Move this to an scss?
+  .tier1 {
+    color: #c42870;
+  }
+
+  .tier2 {
+    color: #b01515;
+  }
+
+  .tier3 {
+    color: #d70e14;
+  }
+
+  .tier4 {
+    color: #c24d00;
+  }
+
+  .tier5 {
+    color: #9e650f;
+  }
+
+  .tier6 {
+    color: #2b8363;
+  }
+
+  .tier7 {
+    color: #167e87;
+  }
+
+  .moderator {
+    color: #277eab;
+  }
+
+  .staff {
+    color: #6133b4;
+  }
+
+  .npc {
+    color: $black;
+  }
+  // End of tier colors
+
+  h3 {
+    .svg-icon {
+      width: 10px;
+      display: inline-block;
+      margin-left: .5em;
+    }
+  }
+
   .hr {
     width: 100%;
     height: 20px;
@@ -141,6 +195,16 @@ 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 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';
 
 export default {
   props: ['chat', 'groupId', 'groupName', 'inbox'],
@@ -172,6 +236,16 @@ export default {
         report: reportIcon,
         delete: deleteIcon,
         liked: likedIcon,
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
       }),
       copyingMessage: {},
       currentDayDividerDisplay: moment().day(),

website/client/components/groups/group.vue

@@ -76,7 +76,7 @@
           .col-12.text-center
             .quest-boss(:class="'quest_' + questData.key")
             h3(v-once) {{ questData.text() }}
-            .quest-box.svg-icon(v-html="icons.questBackground")
+            .quest-box
               .collect-info(v-if='questData.collect')
                 .row(v-for='(value, key) in questData.collect')
                   .col-2
@@ -309,8 +309,11 @@
 
   .quest-active-section {
     .quest-box {
-      height: 100px;
+      background-image: url('~client/assets/svg/for-css/quest-border.svg');
+      background-size: 100% 100%;
       width: 100%;
+      padding: .5em;
+      margin-bottom: 1em;
 
       svg: {
         width: 100%;
@@ -319,10 +322,8 @@
     }
 
     .boss-info, .collect-info {
-      position: relative;
-      top: -89px;
-      left: 15px;
-      width: 32em;
+      width: 90%;
+      margin: 0 auto;
       text-align: left;
     }
   }

website/client/components/groups/groupFormModal.vue

@@ -302,6 +302,12 @@ export default {
         this.workingGroup.privateGuild = false;
       }
 
+      if (editingGroup.categories) {
+        editingGroup.categories.forEach(category => {
+          this.workingGroup.categories.push(category.slug);
+        });
+      }
+
       if (editingGroup.summary) this.workingGroup.summary = editingGroup.summary;
       if (editingGroup.description) this.workingGroup.description = editingGroup.description;
       if (editingGroup._id) this.workingGroup.id = editingGroup._id;

website/client/components/groups/groupPlan.vue

@@ -10,16 +10,22 @@ div
       .row
         .col-4
           .box
+            img.box1(src='~client/assets/images/group-plans/group-14@3x.png')
+            hr
             h2 {{ $t('teamBasedTasks') }}
             p Set up an easily-viewed shared task list for the group. Assign tasks to your fellow group members, or let them claim their own tasks to make it clear what everyone is working on!
 
         .col-4
           .box
+            img.box2(src='~client/assets/images/group-plans/group-12@3x.png')
+            hr
             h2 Group Management Controls
             p Use task approvals to verify that a task that was really completed, add Group Managers to share responsibilities, and enjoy a private group chat for all team members.
 
         .col-4
           .box
+            img.box3(src='~client/assets/images/group-plans/group-13@3x.png')
+            hr
             h2 In-Game Benefits
             p Group members get an exclusive Jackalope Mount, as well as full subscription benefits, including special monthly equipment sets and the ability to buy gems with gold.
 
@@ -127,6 +133,14 @@ div
 
   .benefits {
     margin-top: -12em;
+
+    .box {
+      height: 416px;
+    }
+
+    h2 {
+      color: #6133b4;
+    }
   }
 
   .box {
@@ -135,6 +149,27 @@ div
     box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
     padding: 2em;
     text-align: center;
+
+    img {
+      margin: 0 auto;
+      margin-top: 2em;
+      margin-bottom: 1em;
+    }
+  }
+
+  img.box1 {
+    width: 266px;
+  }
+
+  img.box2 {
+    margin-top: 3.5em;
+    width: 262px;
+    margin-bottom: 3.7em;
+  }
+
+  img.box3 {
+    width: 225px;
+    margin-bottom: 3.0em;
   }
 
   button.create-group {

website/client/components/groups/tavern.vue

@@ -228,10 +228,9 @@
 
   .daniel_front {
     background-image: url('~assets/images/tavern_backdrop_web_daniel_and_props.png');
-    width: 100%;
     height: 246px;
-    position: absolute;
-    top: 0;
+    width: 471px;
+    background-repeat: no-repeat;
     margin: 0 auto;
   }
 
@@ -310,11 +309,11 @@
       color: #167e87;
     }
 
-    .moderator {
+    .tier8, .moderator {
       color: #277eab;
     }
 
-    .staff {
+    .tier9, .staff {
       color: #6133b4;
     }
 

website/client/components/notificationMenu.vue

@@ -285,14 +285,14 @@ export default {
 
       if (type === 'party') {
         // @TODO: pretty sure mutability is wrong. Need to check React docs
-        this.user.invitations.party.splice(index, 1);
+        this.user.invitations.parties.splice(index, 1);
       } else {
         this.user.invitations.guilds.splice(index, 1);
       }
 
       if (type === 'party') {
         this.user.party._id = group.id;
-        this.$router.push('/groups/party');
+        this.$router.push('/party');
       } else {
         this.user.guilds.push(group.id);
         this.$router.push(`/groups/guild/${group.id}`);

website/client/components/tasks/approvalFooter.vue

@@ -9,7 +9,7 @@ div
     .row.task-single-approval(v-if='approvalRequested')
       .col-6.text-center
         a(@click='approve()') Approve Task
-      .col-6.text-center
+      // @TODO: Implement in v2 .col-6.text-center
         a Needs work
     .text-center.task-multi-approval(v-if='multipleApprovalsRequested')
       a(@click='showRequests()') View Requests

website/client/components/userMenu/inbox.vue

@@ -29,12 +29,12 @@
              span.timeago {{conversation.date | timeAgo}}
             div {{conversation.lastMessageText.substring(0, 30)}}
       .col-8.messages
-        chat-message.container-fluid(:chat.sync='activeChat', :inbox='true')
+        chat-message.container-fluid.message-scroll(:chat.sync='activeChat', :inbox='true')
 
         // @TODO: Implement new message header here when we fix the above
 
         .new-message-row(v-if='selectedConversation')
-          b-form-input(v-model='newMessage')
+          input(v-model='newMessage')
           button.btn.btn-secondary(@click='sendPrivateMessage()') Send
 </template>
 
@@ -67,6 +67,11 @@
     padding-bottom: 6em;
   }
 
+  .message-scroll {
+    max-height: 500px;
+    overflow: scroll;
+  }
+
   .to-form input {
     width: 60%;
     display: inline-block;

website/client/components/userMenu/profile.vue

@@ -95,7 +95,7 @@ div
         .col-6(v-if='user.achievements.quests')
           h2 Quests Completed
           div(v-for='(value, key) in user.achievements.quests')
-            span {{ content.quests[k].text() }}
+            span {{ content.quests[key].text() }}
             span {{ value }}
     .standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
       .row

website/client/mixins/styleHelper.js

@@ -9,8 +9,8 @@ export default {
     },
     userLevelStyleFromLevel (level, npc, style) {
       style = style || '';
-      if (npc) style += ' label-npc';
-      if (level) style +=   ` label-contributor-${level}`;
+      if (npc) style += ' npc';
+      if (level) style +=   ` tier${level}`;
       return style;
     },
   },