Update Chat.vue

Give option to display or hide users roles and XP in the chat.

spa/src/components/Chat.vue

@@ -20,15 +20,15 @@
             <span 
               v-else-if="msg.username === $store.data.user.username && msg.new === true"
               class="text-yellow-200 font-bold">
-              <sup class="inline" v-show="msg.role">{{ msg.role }}</sup>
+              <sup class="inline" v-if="showRole" v-show="msg.role">{{ msg.role }}</sup>
               {{ msg.username }}
-              <sub class="inline">{{ msg.exp }}</sub> : 
+              <sub class="inline" v-if="showXP">{{ msg.exp }}</sub> : 
               <span class="font-normal">{{ msg.msg }}</span>
               </span>
             <span class="font-bold"  v-else-if="msg.new === true">
-              <sup class="inline" v-show="msg.role">{{ msg.role }}</sup>
+              <sup class="inline" v-if="showRole" v-show="msg.role">{{ msg.role }}</sup>
               {{ msg.username }}
-              <sub class="inline">{{ msg.exp }}</sub> : 
+              <sub class="inline" v-if="showXP">{{ msg.exp }}</sub> : 
               <span class="font-normal">{{ msg.msg }}</span>
             </span>
           </li>
@@ -107,7 +107,7 @@
       </div>
       <div class="flex-grow overflow-y-auto p-1 messages-pane">
         <ul v-if="activePanel === 'users'">
-          <li class="text-white">
+          <li class="text-white" @click="handler($event)" @contextmenu="handler($event)" @mouseup="menu($store.data.user.id)">
             <img src="/assets/img/av_me.gif" class="inline" />
             {{ this.$store.data.user.username }}
           </li>
@@ -198,7 +198,7 @@
             active:bg-gray-400
           "
           @click="closeMenu()">
-          Cancel Menu
+          Close Menu
         </li>
         <li style="border: inset #EEE 3px;"></li>
         <li v-show="menuGoTo" 
@@ -212,6 +212,30 @@
           @click="goToPlace()">
           Go to
         </li>
+        <li v-show="menuToggleRole" 
+          class="
+            p-1
+            pl-3.5
+            hover:text-white 
+            hover:bg-gray-500
+            active:bg-gray-400
+          "
+          >
+          <input type="checkbox" id="role" v-model="showRole" />
+          <label for="role"> Users Roles</label>
+        </li>
+        <li v-show="menuToggleXP" 
+          class="
+            p-1
+            pl-3.5
+            hover:text-white 
+            hover:bg-gray-500
+            active:bg-gray-400
+          "
+          >
+          <input type="checkbox" id="XP" v-model="showXP" />
+          <label for="XP"> Users XP</label>
+        </li>
         <li v-show="menuBeamTo" 
           class="
             p-1
@@ -331,7 +355,7 @@
         >
           Properties
         </li>
-        <li v-if="activePanel === 'users'" style="border:inset #EEE 3px;"></li>
+        <li v-if="menuRequestBackpack && activePanel === 'users'" style="border:inset #EEE 3px;"></li>
         <li v-show="menuRequestBackpack" 
           class="
             p-1
@@ -397,6 +421,8 @@ export default Vue.extend({
       menuProperties: false,
       menuRequestBackpack: true,
       menuGoTo: false,
+      menuToggleRole: false,
+      menuToggleXP: false,
       mallObject: false,
       activePlaces: [],
       placeList: [],
@@ -406,6 +432,8 @@ export default Vue.extend({
       placeId: null,
       chatIntervalId: null,
       pingIntervalId: null,
+      showRole: true,
+      showXP: true,
     };
   },
   directives: {
@@ -545,6 +573,8 @@ export default Vue.extend({
       this.menuProperties = false;
       this.menuRequestBackpack = false;
       this.menuGoTo = false;
+      this.menuToggleRole = false;
+      this.menuToggleXP = false;
       this.mallObject = false;
       this.placeType = null;
       this.placeUsername = null;
@@ -585,12 +615,17 @@ export default Vue.extend({
 
       //User Panel
       if(this.activePanel === 'users'){
-        this.menuIgnore = true;
-        this.menuInviteChat = true;
-        this.menuRequestBackpack = true;
-        this.menuWhisper = true;
-        if(this.$store.data.view3d){
-          this.menuBeamTo = true;
+        if(target[0] === this.$store.data.user.id){
+          this.menuToggleRole = true;
+          this.menuToggleXP = true;
+        } else {
+          this.menuIgnore = true;
+          this.menuInviteChat = true;
+          this.menuRequestBackpack = true;
+          this.menuWhisper = true;
+          if(this.$store.data.view3d){
+            this.menuBeamTo = true;
+          }
         }
       }