[WIP] Added initial tavern updates (#8845)

* Added initial tavern updates

* Translations and styles

* Fixed locales and lint

website/client/components/guilds/tavern.vue

@@ -1,209 +1,446 @@
 <template lang="pug">
 .row
-  .col-md-4
+  .clearfix.col-8.standard-page
-    h2.ui.dividing.header SideMenu
+    .row
+      .col-6.title-details
+        h1(v-once) {{ $t('welcomeToTavern') }}
 
-    .ui.card
+    .row.chat-row
-      .content
+      .col-12
-        .header Daniel
+        h3(v-once) {{ $t('welcomeToTavern') }}
-      .content
-        h4.ui.sub.header Activity
-        | Description
-      .extra.content
-        button.ui.button Rest at the Inn
 
-    .ui.card
+        textarea(:placeholder="$t('chatPlaceHolder')")
-      .content
+        button.btn.btn-secondary.send-chat.float-right(v-once) {{ $t('send') }}
-        .header Resources
+
-      .content
+        .container.community-guidelines(v-if='communityGuidelinesAccepted')
+          .row
+            div.col-8(v-once) {{ $t('communityGuidelinesIntro') }}
+            div.col-4
+              button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+
+        .hr
+          .hr-middle(v-once) {{ $t('today') }}
+
+        .row
+          .col-md-2
+            .svg-icon(v-html="icons.like")
+          .col-md-10
+            .card(v-for="msg in group.chat", :key="msg.id")
+              .card-block
+                h3.leader Character name
+                span 2 hours ago
+                .clearfix
+                  strong.float-left {{msg.user}}
+                  .float-right {{msg.timestamp}}
+                .text {{msg.text}}
+                hr
+                span.action(v-once)
+                  .svg-icon(v-html="icons.like")
+                  | {{$t('like')}}
+                span.action(v-once)
+                  .svg-icon(v-html="icons.copy")
+                  | {{$t('copyAsTodo')}}
+                span.action(v-once)
+                  .svg-icon(v-html="icons.report")
+                  | {{$t('report')}}
+                span.action(v-once)
+                  .svg-icon(v-html="icons.delete")
+                  | {{$t('delete')}}
+                span.action.float-right
+                  .svg-icon(v-html="icons.liked")
+                  | +3
+
+  .col-md-4.sidebar
+    .section
+      .grassy-meadow-backdrop
+
+      .sleep
+        strong(v-once) {{ $t('sleepDescription') }}
         ul
-          li Community Guidelines
+          li(v-once) {{ $t('sleepBullet1') }}
-          li Looking for Group (Party Wanted) Posts
+          li(v-once) {{ $t('sleepBullet2') }}
-          li FAQ
+          li(v-once) {{ $t('sleepBullet3') }}
-          li Glossary
+          li(v-once) {{ $t('sleepBullet4') }}
-          li Wiki
+        button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
-          li Data Display Tool
+        button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
-          li Report a Problem
-          li Request a Feature
-          li Community Forum
-          li Ask a Question (Habitica Help guild)
 
-    .ui.card
+    .section-header
-      .content
+      .row
-        .header Resources
+        .col-10
-      .content
+          h3(v-once) {{ $t('staffAndModerators') }}
-        small
+        .col-2
-          a(href='/#/options/groups/hall') Visit the Hall of Heroes (contributors and backers)
+          .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-          br
+            .svg-icon(v-html="icons.upIcon")
-          a(href='http://habitica.wikia.com/wiki/Contributor_Rewards', target='_blank') Learn more about contributor rewards
+          .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-          br
+            .svg-icon(v-html="icons.downIcon")
-          a(href='http://habitica.wikia.com/wiki/Contributing_to_Habitica', target='_blank') Learn how to contribute to Habitica
+      .section.row(v-if="sections.staff")
-        table.table.table-striped.panel-tiers
+        .col-3.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
-          tbody
+          .title {{user.name}}
-            tr
+          .type {{user.type}}
-              td
-                a.label.label-contributor-1(ng-click='toggleUserTier($event)') Tier 1 (Friend)
-                div
-                  p
-                    span.achievement.achievement-boot
-                    | When your
-                    strong first
-                    |  set of submissions is deployed, you will receive the Habitica Contributor's badge. Your name in Tavern chat will proudly display that you are a contributor. As a bounty for your work, you will also receive
-                    strong 3 Gems
-                    | .
-            tr
-              td
-                a.label.label-contributor-2(ng-click='toggleUserTier($event)') Tier 2 (Friend)
-                div
-                  p
-                    span.shop-sprite.item-img.shop_armor_special_1
-                    | When your
-                    strong second
-                    |  set of submissions is deployed, the
-                    strong Crystal Armor
-                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
-                    strong 3 Gems.
-            tr
-              td
-                a.label.label-contributor-3(ng-click='toggleUserTier($event)') Tier 3 (Elite)
-                div
-                  p
-                    span.shop-sprite.item-img.shop_head_special_1
-                    | When your
-                    strong third
-                    |  set of submissions is deployed, the
-                    strong Crystal Helmet
-                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
-                    strong 3 Gems
-                    | .
-            tr
-              td
-                a.label.label-contributor-4(ng-click='toggleUserTier($event)') Tier 4 (Elite)
-                div
-                  p
-                    span.shop-sprite.item-img.shop_weapon_special_1
-                    | When your
-                    strong fourth
-                    |  set of submissions is deployed, the
-                    strong Crystal Sword
-                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
-                    strong 4 Gems
-                    | .
-            tr
-              td
-                a.label.label-contributor-5(ng-click='toggleUserTier($event)') Tier 5 (Champion)
-                div
-                  p
-                    span.shop-sprite.item-img.shop_shield_special_1
-                    | When your
-                    strong fifth
-                    |  set of submissions is deployed, the
-                    strong Crystal Shield
-                    |  will be available for purchase in the Rewards shop. As a bounty for your continued work, you will also receive
-                    strong 4 Gems
-                    | .
-            tr
-              td
-                a.label.label-contributor-6(ng-click='toggleUserTier($event)') Tier 6 (Champion)
-                div
-                  p
-                    span.shop-sprite.item-img.Pet-Dragon-Hydra
-                    | When your
-                    strong sixth
-                    |  set of submissions is deployed, you will receive a
-                    strong Hydra Pet
-                    | . You will also receive
-                    strong 4 Gems
-                    | .
-            tr
-              td
-                a.label.label-contributor-7(ng-click='toggleUserTier($event)') Tier 7 (Legendary)
-                div
-                  p
-                  | When your
-                  strong seventh
-                  |  set of submissions is deployed, you will receive
-                  strong 4 Gems
-                  |  and become a member of the honored Contributor's Guild and be privy to the behind-the-scenes details of Habitica! Further contributions do not increase your tier, but you may continue to earn Gem bounties and titles.
-            tr
-              td
-                a.label.label-contributor-8(ng-click='toggleUserTier($event)') Moderator (Guardian)
-                div
-                  p
-                    | Moderators were selected carefully from high tier contributors, so please give them your respect and listen to their suggestions.
-            tr
-              td
-                a.label.label-contributor-9(ng-click='toggleUserTier($event)') Staff (Heroic)
-                div
-                  p
-                    | The Heroic tier contains Habitica staff and staff-level contributors. If you have this title, you were appointed to it (or hired!).
-            tr
-              td
-                a.label.label-npc(ng-click='toggleUserTier($event)') NPC
-                div
-                  p
-                    | NPCs backed Habitica's Kickstarter at the highest tier. You can find their avatars watching over site features!
 
-    .ui.card
+    .section-header
-      .content
+      .row
-        .header Challenges
+        .col-10
-      .content
+          h3(v-once) {{ $t('helpfulLinks') }}
+        .col-2
+          .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
+            .svg-icon(v-html="icons.upIcon")
+          .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
+            .svg-icon(v-html="icons.downIcon")
+      .section.row(v-if="sections.staff")
         ul
-          li Challenge 1
+          li
+            a(herf='', v-once) {{ $t('communityGuidelinesLink') }}
+          li
+            a(herf='', v-once) {{ $t('lookingForGroup') }}
+          li
+            a(herf='', v-once) {{ $t('faq') }}
+          li
+            a(herf='', v-once) {{ $t('glossary') }}
+          li
+            a(herf='', v-once) {{ $t('wiki') }}
+          li
+            a(herf='', v-once) {{ $t('dataDisplayTool') }}
+          li
+            a(herf='', v-once) {{ $t('reportProblem') }}
+          li
+            a(herf='', v-once) {{ $t('requestFeature') }}
+          li
+            a(herf='', v-once) {{ $t('communityForum') }}
+          li
+            a(herf='', v-once) {{ $t('askQuestionGuild') }}
 
-  .col-md-8
+    .section-header
-    h2.ui.dividing.header Tavern Chat
+      .row
-    .ui.comments
+        .col-10
-
+          h3(v-once) {{ $t('playerTiers') }}
-      .field
+        .col-2
-        textarea(v-model='newMessage')
+          .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-      .ui.blue.labeled.submit.icon.button(v-on:click='sendChat')
+            .svg-icon(v-html="icons.upIcon")
-        i.icon.edit
+          .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-        |  Send Chat
+            .svg-icon(v-html="icons.downIcon")
-
+      .section.row(v-if="sections.staff")
-      .comment(v-for="message in messages")
+        .col-12
-        a.avatar
+          p(v-once) {{ $t('playerTiersDesc') }}
-          img(src='http://semantic-ui.com/images/avatar/small/matt.jpg')
+          ul.tier-list
-        .content
+            li.tier1(v-once) {{ $t('tier1') }}
-          a.author {{message.from}}
+            li.tier2(v-once) {{ $t('tier2') }}
-          .metadata
+            li.tier3(v-once) {{ $t('tier3') }}
-            span.date {{message.date}}
+            li.tier4(v-once) {{ $t('tier4') }}
-          .text
+            li.tier5(v-once) {{ $t('tier5') }}
-            | {{message.message}}
+            li.tier6(v-once) {{ $t('tier6') }}
+            li.tier7(v-once) {{ $t('tier7') }}
+            li.moderator(v-once) {{ $t('tierModerator') }}
+            li.staff(v-once) {{ $t('tierStaff') }}
+            li.npc(v-once) {{ $t('tierNPC') }}
 </template>
 
+<style lang='scss' scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  // @TODO: Move chat to component
+  .chat-row {
+    position: relative;
+
+    .community-guidelines {
+      background-color: rgba(135, 129, 144, 0.84);
+      padding: 1em;
+      color: $white;
+      position: absolute;
+      top: 0;
+      height: 150px;
+      padding-top: 3em;
+      margin-top: 2.3em;
+      width: 98%;
+      border-radius: 4px;
+    }
+
+    textarea {
+      height: 150px;
+      width: 100%;
+      background-color: $white;
+      border: solid 1px $gray-400;
+      font-size: 16px;
+      font-style: italic;
+      line-height: 1.43;
+      color: $gray-300;
+      padding: .5em;
+    }
+
+    .hr {
+      width: 100%;
+      height: 20px;
+      border-bottom: 1px solid $gray-500;
+      text-align: center;
+      margin: 2em 0;
+    }
+
+    .hr-middle {
+      font-size: 16px;
+      font-weight: bold;
+      font-family: 'Roboto Condensed';
+      line-height: 1.5;
+      text-align: center;
+      color: $gray-200;
+      background-color: $gray-700;
+      padding: .2em;
+      margin-top: .2em;
+      display: inline-block;
+      width: 100px;
+    }
+  }
+
+  h1 {
+    color: $purple-200;
+  }
+
+  .sidebar {
+    background-color: $gray-600;
+    padding-top: 2em;
+  }
+
+  .toggle-up, .toggle-down {
+    width: 20px;
+  }
+
+  .toggle-up:hover, .toggle-down:hover {
+    cursor: pointer;
+  }
+
+  .pause-button {
+    background-color: #ffb445 !important;
+    color: $white;
+    width: 100%;
+  }
+
+  .section-header {
+    margin-top: 2em;
+  }
+
+  .grassy-meadow-backdrop {
+    background-image: url('~assets/images/groups/grassy-meadow-backdrop.png');
+    width: 472px;
+    height: 246px;
+  }
+
+  .sleep {
+    margin-top: 1em;
+  }
+
+  .staff {
+    margin-bottom: 1em;
+
+    .title {
+      color: #6133b4;
+      font-weight: bold;
+    }
+  }
+
+  .tier-list {
+    list-style-type: none;
+    padding: 0;
+    width: 98%;
+
+    li {
+      border-radius: 2px;
+      background-color: #edecee;
+      border: solid 1px #c3c0c7;
+      text-align: center;
+      padding: 1em;
+      margin-bottom: 1em;
+    }
+
+    .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;
+    }
+  }
+
+  .staff .title {
+    color: #6133b4;
+  }
+
+  .moderator .title {
+    color: #277eab;
+  }
+
+  .bailey .title {
+    color: $black;
+  }
+
+</style>
+
 <script>
+import { mapState } from 'client/libs/store';
+
+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 challengeIcon from 'assets/svg/challenge.svg';
+import informationIcon from 'assets/svg/information.svg';
+import questBackground from 'assets/svg/quest-background-border.svg';
+import upIcon from 'assets/svg/up.svg';
+import downIcon from 'assets/svg/down.svg';
+
 export default {
   data () {
-    // TODO: Abstract to Store
-    let messages = [
-      {
-        from: 'Paglias',
-        fromUserId: 1234,
-        to: 'TheHollidayInn',
-        message: 'I love the Gang of Four',
-        date: new Date(),
-      },
-    ];
-
     return {
-      messages,
+      icons: Object.freeze({
-      newMessage: '',
+        like: likeIcon,
+        copy: copyIcon,
+        report: reportIcon,
+        delete: deleteIcon,
+        gem: gemIcon,
+        liked: likedIcon,
+        questIcon,
+        challengeIcon,
+        information: informationIcon,
+        questBackground,
+        upIcon,
+        downIcon,
+      }),
+      group: {
+        chat: [],
+      },
+      sections: {
+        staff: true,
+      },
+      staff: [
+        {
+          name: 'beffymaroo',
+          type: 'Staff',
+        },
+        {
+          name: 'lefnire',
+          type: 'Staff',
+        },
+        {
+          name: 'Lemoness',
+          type: 'Staff',
+        },
+        {
+          name: 'paglias',
+          type: 'Staff',
+        },
+        {
+          name: 'redphoenix',
+          type: 'Staff',
+        },
+        {
+          name: 'SabreCat',
+          type: 'Staff',
+        },
+        {
+          name: 'TheHollidayInn',
+          type: 'Staff',
+        },
+        {
+          name: 'viirus',
+          type: 'Staff',
+        },
+        {
+          name: 'It\'s Bailey',
+          type: 'Moderator',
+        },
+        {
+          name: 'Alys',
+          type: 'Moderator',
+        },
+        {
+          name: 'Blade',
+          type: 'Moderator',
+        },
+        {
+          name: 'Breadstrings',
+          type: 'Moderator',
+        },
+        {
+          name: 'Cantras',
+          type: 'Moderator',
+        },
+        {
+          name: 'Daniel the Bard',
+          type: 'Moderator',
+        },
+        {
+          name: 'deilann 5.0.5b',
+          type: 'Moderator',
+        },
+        {
+          name: 'Dewines',
+          type: 'Moderator',
+        },
+        {
+          name: 'Megan',
+          type: 'Moderator',
+        },
+        {
+          name: 'shanaqui',
+          type: 'Moderator',
+        },
+      ],
     };
   },
-
+  computed: {
+    ...mapState({user: 'user.data'}),
+    communityGuidelinesAccepted () {
+      return this.user.flags.communityGuidelinesAccepted;
+    },
+  },
+  mounted () {
+    // @TODO: Load tavern
+  },
   methods: {
-    sendChat: function sendChat () {
+    aggreeToGuideLines () {
-      // TODO: This will be default values based on the conversation and current user
+      // @TODO:
-      let messageToSend = {
+    },
-        from: 'TheHollidayInn',
+    pauseDailies () {
-        fromUserId: 3211,
+      // @TODO:
-        to: 'Paglias',
+    },
-        message: this.newMessage,
+    acceptCommunityGuidelines () {
-        date: new Date(),
+      this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
-      };
+    },
-      this.messages.push(messageToSend);
+    toggleSleep () {
-      this.newMessage = '';
+      this.$store.dispatch('user:sleep');
     },
   },
 };

website/client/router.js

@@ -35,7 +35,7 @@ const InboxConversationPage = () => import(/* webpackChunkName: "inbox" */ './co
 
 // Guilds
 const GuildIndex = () => import(/* webpackChunkName: "guilds" */ './components/guilds/index');
-// const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
+const TavernPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/tavern');
 const MyGuilds = () => import(/* webpackChunkName: "guilds" */ './components/guilds/myGuilds');
 const GuildsDiscoveryPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/discovery');
 const GuildPage = () => import(/* webpackChunkName: "guilds" */ './components/guilds/guild');
@@ -73,7 +73,7 @@ const router = new VueRouter({
       path: '/guilds',
       component: GuildIndex,
       children: [
-        { name: 'tavern', path: 'tavern', component: GuildPage },
+        { name: 'tavern', path: 'tavern', component: TavernPage },
         {
           name: 'myGuilds',
           path: 'myGuilds',

website/client/store/actions/user.js

@@ -25,4 +25,8 @@ export function set (store, changes) {
   // TODO
   // .then((res) => console.log('set', res))
   // .catch((err) => console.error('set', err));
-}
+}
+
+export function sleep () {
+  // @TODO: Implemented
+}

website/common/locales/en/newClient.json

@@ -146,5 +146,35 @@
   "shirt": "Shirt",
   "bangs": "Bangs",
   "ponytail": "Ponytail",
-  "glasses": "Glasses"
+  "glasses": "Glasses",
+  "welcomeToTavern": "Welcome to The Tavern!",
+  "communityGuidelinesIntro": "Habitica tries to create a welcoming environment for users of all ages and backgrounds, especially in public spaces like the Tavern. If you have any questions, please consult our Community Guidelines.",
+  "acceptCommunityGuidelines": "I agree to follow the Community Guidelines",
+  "sleepDescription": "Need a break? Check into Daniel’s Inn to pause some of Habitica’s more difficult game mechanics:",
+  "sleepBullet1": "Missed Dailies won’t damage you",
+  "sleepBullet2": "Tasks won’t lose streaks or decay in color",
+  "sleepBullet3": "Bosses won’t do damage for your missed Dailies",
+  "sleepBullet4": "Your boss damage or collection Quest items will stay pending until check-out",
+  "pauseDailies": "Pause Damage",
+  "unpauseDailies": "Unpause Damage",
+  "staffAndModerators": "Staff and Moderators",
+  "helpfulLinks": "Helpful Links",
+  "communityGuidelinesLink": "Community Guidelines",
+  "lookingForGroup": "Looking for Group (Party Wanted) Posts",
+  "faq": "FAQ",
+  "dataDisplayTool": "Data Display Tool",
+  "reportProblem": "Report a Problem",
+  "requestFeature": "Request a Feature",
+  "askQuestionGuild": "Ask a Question (Habitica Help guild)",
+  "playerTiersDesc": "The colored usernames you see in chat represent a person’s contributor tier. The higher the tier, the more the person has contributed to habitica through art, code, the community, or more!",
+  "tier1": "Tier 1 (Friend)",
+  "tier2": "Tier 2 (Friend)",
+  "tier3": "Tier 3 (Elite)",
+  "tier4": "Tier 4 (Elite)",
+  "tier5": "Tier 5 (Champion)",
+  "tier6": "Tier 6 (Champion)",
+  "tier7": "Tier 7 (Legendary)",
+  "tierModerator": "Moderator (Guardian)",
+  "tierStaff": "Staff (Heroic)",
+  "tierNPC": "NPC"
 }