show yourself in friends list

html/src/app.js

@@ -812,7 +812,27 @@ CefSharp.BindObjectAsync(
     });
 
     API.$on('USER:CURRENT', function (args) {
-        args.ref = this.applyCurrentUser(args.json);
+        var { json } = args;
+        args.ref = this.applyCurrentUser(json);
+        this.applyUser({
+            id: json.id,
+            username: json.username,
+            displayName: json.displayName,
+            bio: json.bio,
+            bioLinks: json.bioLinks,
+            currentAvatarImageUrl: json.currentAvatarImageUrl,
+            currentAvatarThumbnailImageUrl: json.currentAvatarThumbnailImageUrl,
+            status: json.status,
+            statusDescription: json.statusDescription,
+            state: json.state,
+            tags: json.tags,
+            developerType: json.developerType,
+            last_login: json.last_login,
+            last_platform: json.last_platform,
+            allowAvatarCopying: json.allowAvatarCopying,
+            isFriend: false,
+            location: ($app.isGameRunning === true) ? $app.lastLocation : ''
+        });
     });
 
     API.$on('USER:CURRENT:SAVE', function (args) {
@@ -1094,6 +1114,14 @@ CefSharp.BindObjectAsync(
 
     API.applyUser = function (json) {
         var ref = this.cachedUsers.get(json.id);
+        // adjust some missing variables
+        if (json.id === API.currentUser.id) {
+            json.status = API.currentUser.status;
+            json.statusDescription = API.currentUser.statusDescription;
+            json.state = API.currentUser.state;
+            json.last_login = API.currentUser.last_login;
+            json.location = ($app.isGameRunning === true) ? $app.lastLocation : '';
+        }
         if (ref === undefined) {
             ref = {
                 id: '',
@@ -3615,6 +3643,7 @@ CefSharp.BindObjectAsync(
     $app.data.friends = new Map();
     $app.data.pendingActiveFriends = new Set();
     $app.data.friendsNo = 0;
+    $app.data.isFriendsGroupMe = true;
     $app.data.isFriendsGroup0 = true;
     $app.data.isFriendsGroup1 = true;
     $app.data.isFriendsGroup2 = true;
@@ -4443,6 +4472,16 @@ CefSharp.BindObjectAsync(
     };
 
     $app.methods.updateDiscord = function () {
+        var ref = API.cachedUsers.get(API.currentUser.id);
+        if (ref !== undefined) {
+            var myLocation = (this.isGameRunning === true) ? this.lastLocation : '';
+            if (ref.location !== myLocation) {
+                API.applyUser({
+                    id: ref.id,
+                    location: myLocation
+                });
+            }
+        }
         if (this.isGameRunning === false ||
             this.lastLocation === '') {
             Discord.SetActive(false);
@@ -5367,19 +5406,6 @@ CefSharp.BindObjectAsync(
 
     // App: More
 
-    $app.data.userLanguageVisible = 0;
-    $app.data.userLanguageSelected = '';
-    $app.data.userLanguages = (function () {
-        var data = [];
-        for (var key in subsetOfLanguages) {
-            var value = subsetOfLanguages[key];
-            data.push({
-                key,
-                value
-            });
-        }
-        return data;
-    }());
     $app.data.currentUserTreeData = [];
     $app.data.pastDisplayNameTable = {
         data: [],
@@ -5446,24 +5472,6 @@ CefSharp.BindObjectAsync(
         $app.visits = args.json;
     });
 
-    $app.methods.addUserLanguage = function (language) {
-        if (language !== String(language)) {
-            return;
-        }
-        API.addUserTags({
-            tags: [`language_${language}`]
-        });
-    };
-
-    $app.methods.removeUserLanguage = function (language) {
-        if (language !== String(language)) {
-            return;
-        }
-        API.removeUserTags({
-            tags: [`language_${language}`]
-        });
-    };
-
     $app.methods.logout = function () {
         this.$confirm('Continue? Logout', 'Confirm', {
             confirmButtonText: 'Confirm',
@@ -6118,6 +6126,14 @@ CefSharp.BindObjectAsync(
         }
         if (command === 'Add Favorite') {
             this.showFavoriteDialog('friend', D.id);
+        } else if (command === 'Edit Social Status') {
+            this.showSocialStatusDialog();
+        } else if (command === 'Edit Language') {
+            this.showLanguageDialog();
+        } else if (command === 'Edit Bio') {
+            this.showBioDialog();
+        } else if (command === 'Logout') {
+            this.logout();
         } else if (command === 'Message') {
             this.$prompt('Enter a message', 'Send Message', {
                 distinguishCancelAndClose: true,
@@ -6822,6 +6838,62 @@ CefSharp.BindObjectAsync(
         D.visible = true;
     };
 
+    // App: Language Dialog
+
+    $app.data.languageDialog = {
+        visible: false,
+        loading: false,
+        languageChoice: false,
+        languageValue: '',
+        languages: (function () {
+            var data = [];
+            for (var key in subsetOfLanguages) {
+                var value = subsetOfLanguages[key];
+                data.push({
+                    key,
+                    value
+                });
+            }
+            return data;
+        }())
+    };
+
+    API.$on('LOGOUT', function () {
+        $app.languageDialog.visible = false;
+    });
+
+    $app.methods.addUserLanguage = function (language) {
+        if (language !== String(language)) {
+            return;
+        }
+        var D = this.languageDialog;
+        D.loading = true;
+        API.addUserTags({
+            tags: [`language_${language}`]
+        }).finally(function () {
+            D.loading = false;
+        });
+    };
+
+    $app.methods.removeUserLanguage = function (language) {
+        if (language !== String(language)) {
+            return;
+        }
+        var D = this.languageDialog;
+        D.loading = true;
+        API.removeUserTags({
+            tags: [`language_${language}`]
+        }).finally(function () {
+            D.loading = false;
+        });
+    };
+
+    $app.methods.showLanguageDialog = function () {
+        this.$nextTick(() => adjustDialogZ(this.$refs.languageDialog.$el));
+        var D = this.languageDialog;
+        D.visible = true;
+    };
+
     // App: Bio Dialog
 
     $app.data.bioDialog = {

html/src/index.pug

@@ -397,45 +397,6 @@ html
                             .detail
                                 span.name(v-text="API.currentUser.displayName")
                                 span.extra(v-text="API.currentUser.username")
-                        .x-friend-item(@click="showSocialStatusDialog()")
-                            .detail
-                                span.name #[i.el-icon-edit] Social Status
-                                span.extra
-                                    el-tooltip(placement="top")
-                                        template(#content)
-                                            span(v-if="API.currentUser.status === 'active'") Online
-                                            span(v-else-if="API.currentUser.status === 'join me'") Join Me
-                                            span(v-else-if="API.currentUser.status === 'ask me'") Ask Me
-                                            span(v-else-if="API.currentUser.status === 'busy'") Do Not Disturb
-                                            span(v-else) Offline
-                                        i.x-user-status(:class="userStatusClass(API.currentUser)")
-                                    span(v-text="API.currentUser.statusDescription")
-                        .x-friend-item(@click="showBioDialog()")
-                            .detail
-                                span.name #[i.el-icon-edit] Bio
-                                pre.extra(style="font-family:inherit;font-size:12px;white-space:pre-wrap;margin:0 0.5em 0 0") {{ API.currentUser.bio || '-' }}
-                                div(style="margin-top:5px")
-                                    el-tooltip(v-for="(link, index) in API.currentUser.bioLinks" :key="index")
-                                        template(#content)
-                                            span(v-text="link")
-                                        img(:src="getFaviconUrl(link)" style="width:16px;height:16px;vertical-align:middle;margin-right:5px" @click.stop="openExternalLink(link)")
-                        .x-friend-item
-                            .detail
-                                span.name Languages
-                                span.extra
-                                    div(style="margin:5px 0")
-                                        el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px")
-                                            span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
-                                            | {{ item.value }} ({{ item.key }})
-                                    div(v-if="userLanguageVisible")
-                                        el-select(v-model="userLanguageSelected" size="mini")
-                                            el-option(v-for="item in userLanguages" :key="item.key" :value="item.key" :label="item.value")
-                                                span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
-                                                | {{ item.value }} ({{ item.key }})
-                                        el-button(@click="userLanguageVisible=0; addUserLanguage(userLanguageSelected)" size="mini") Ok
-                                        el-button(@click="userLanguageVisible=0" size="mini" style="margin-left:0") Cancel
-                                    div(v-else)
-                                        el-button(@click="userLanguageSelected='';userLanguageVisible=1" size="mini") Add Language
                         .x-friend-item
                             .detail
                                 span.name Last Login
@@ -444,12 +405,6 @@ html
                             .detail
                                 span.name Two-Factor Auth (2FA)
                                 span.extra {{ API.currentUser.twoFactorAuthEnabled ? 'Enabled' : 'Disabled' }}
-                        .x-friend-item(v-if="API.currentUser.homeLocation" @click="showWorldDialog(API.currentUser.homeLocation)")
-                            .detail
-                                span.name Home Location
-                                span.extra
-                                    location(:location="API.currentUser.homeLocation" :link="false")
-                                    el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                     div(style="margin-top:10px")
                         el-button-group
                             el-button(size="small" icon="el-icon-switch-button" @click="logout()") Logout
@@ -567,6 +522,17 @@ html
                                 img.avatar(v-lazy="item.ref.currentAvatarThumbnailImageUrl")
                             span(v-else) Search More: #[span(v-text="item.label" style="font-weight:bold")]
                 .x-friend-list(style="padding-bottom:10px")
+                    .x-friend-group
+                        i.el-icon-arrow-right(:class="{ rotate: isFriendsGroupMe }")
+                        span.x-link(@click="isFriendsGroupMe = !isFriendsGroupMe" style="margin-left:5px") ME
+                    div(v-show="isFriendsGroupMe")
+                        .x-friend-item(:key="API.currentUser.id" @click="showUserDialog(API.currentUser.id)")
+                            .avatar(:class="userStatusClass(API.currentUser)")
+                                img(v-lazy="API.currentUser.currentAvatarThumbnailImageUrl")
+                            .detail
+                                span.name(v-text="API.currentUser.displayName" :class="API.currentUser.$trustClass")
+                                location.extra(v-if="isGameRunning === true" :location="lastLocation" :link="false")
+                                span.extra(v-else v-text="API.currentUser.statusDescription" :link="false")
                     .x-friend-group(v-show="friendsGroup0.length")
                         i.el-icon-arrow-right(:class="{ rotate: isFriendsGroup0 }")
                         span.x-link(@click="isFriendsGroup0 = !isFriendsGroup0" style="margin-left:5px") VIP―{{ friendsGroup0.length }}
@@ -666,22 +632,28 @@ html
                                 el-dropdown(trigger="click" @command="userDialogCommand" size="small")
                                     el-button(:type="(userDialog.incomingRequest || userDialog.outgoingRequest) ? 'success' : (userDialog.isBlock || userDialog.isMute || userDialog.isHideAvatar) ? 'danger' : 'default'" icon="el-icon-more" circle)
                                     el-dropdown-menu(#default="dropdown")
-                                        template(v-if="userDialog.isFriend")
+                                        template(v-if="userDialog.ref.id === API.currentUser.id")
-                                            el-dropdown-item(icon="el-icon-message" command="Message") Message
+                                            el-dropdown-item(icon="el-icon-edit" command="Edit Social Status") Edit Social Status
-                                        template(v-else-if="userDialog.incomingRequest")
+                                            el-dropdown-item(icon="el-icon-edit" command="Edit Language") Edit Language
-                                            el-dropdown-item(icon="el-icon-check" command="Accept Friend Request") Accept Friend Request
+                                            el-dropdown-item(icon="el-icon-edit" command="Edit Bio") Edit Bio
-                                            el-dropdown-item(icon="el-icon-close" command="Decline Friend Request") Decline Friend Request
+                                            el-dropdown-item(icon="el-icon-switch-button" command="Logout" divided) Logout
-                                        el-dropdown-item(v-else-if="userDialog.outgoingRequest" icon="el-icon-close" command="Cancel Friend Request") Cancel Friend Request
+                                        template(v-else)
-                                        el-dropdown-item(v-else icon="el-icon-plus" command="Send Friend Request") Send Friend Request
+                                            template(v-if="userDialog.isFriend")
-                                        el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author" divided) Show Avatar Author
+                                                el-dropdown-item(icon="el-icon-message" command="Message") Message
-                                        el-dropdown-item(v-if="userDialog.isBlock" icon="el-icon-circle-check" command="Unblock" divided style="color:#F56C6C") Unblock
+                                            template(v-else-if="userDialog.incomingRequest")
-                                        el-dropdown-item(v-else icon="el-icon-circle-close" command="Block" divided) Block
+                                                el-dropdown-item(icon="el-icon-check" command="Accept Friend Request") Accept Friend Request
-                                        el-dropdown-item(v-if="userDialog.isMute" icon="el-icon-microphone" command="Unmute" style="color:#F56C6C") Unmute
+                                                el-dropdown-item(icon="el-icon-close" command="Decline Friend Request") Decline Friend Request
-                                        el-dropdown-item(v-else icon="el-icon-turn-off-microphone" command="Mute") Mute
+                                            el-dropdown-item(v-else-if="userDialog.outgoingRequest" icon="el-icon-close" command="Cancel Friend Request") Cancel Friend Request
-                                        el-dropdown-item(v-if="userDialog.isHideAvatar" icon="el-icon-user-solid" command="Show Avatar" style="color:#F56C6C") Show Avatar
+                                            el-dropdown-item(v-else icon="el-icon-plus" command="Send Friend Request") Send Friend Request
-                                        el-dropdown-item(v-else icon="el-icon-user" command="Hide Avatar") Hide Avatar
+                                            el-dropdown-item(icon="el-icon-s-custom" command="Show Avatar Author" divided) Show Avatar Author
-                                        template(v-if="userDialog.isFriend")
+                                            el-dropdown-item(v-if="userDialog.isBlock" icon="el-icon-circle-check" command="Unblock" divided style="color:#F56C6C") Unblock
-                                            el-dropdown-item(icon="el-icon-delete" command="Unfriend" divided) Unfriend
+                                            el-dropdown-item(v-else icon="el-icon-circle-close" command="Block" divided) Block
+                                            el-dropdown-item(v-if="userDialog.isMute" icon="el-icon-microphone" command="Unmute" style="color:#F56C6C") Unmute
+                                            el-dropdown-item(v-else icon="el-icon-turn-off-microphone" command="Mute") Mute
+                                            el-dropdown-item(v-if="userDialog.isHideAvatar" icon="el-icon-user-solid" command="Show Avatar" style="color:#F56C6C") Show Avatar
+                                            el-dropdown-item(v-else icon="el-icon-user" command="Hide Avatar") Hide Avatar
+                                            template(v-if="userDialog.isFriend")
+                                                el-dropdown-item(icon="el-icon-delete" command="Unfriend" divided) Unfriend
                     el-tabs
                         el-tab-pane(label="Info")
                             div(v-if="userDialog.ref.location" style="display:flex;flex-direction:column;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee")
@@ -733,6 +705,12 @@ html
                                     .detail
                                         span.name Last Platform
                                         span.extra(v-text="userDialog.ref.last_platform")
+                                .x-friend-item(v-if="userDialog.ref.id === API.currentUser.id && API.currentUser.homeLocation" @click="showWorldDialog(API.currentUser.homeLocation)" style="width:100%")
+                                    .detail
+                                        span.name Home Location
+                                        span.extra
+                                            location(:location="API.currentUser.homeLocation" :link="false")
+                                            el-button(@click.stop="resetHome()" size="mini" icon="el-icon-delete" circle style="margin-left:5px")
                         el-tab-pane(label="Worlds")
                             el-button(type="default" :loading="userDialog.isWorldsLoading" @click="refreshUserDialogWorlds()" size="mini" icon="el-icon-refresh" circle)
                             span(style="margin-left:5px") Total {{ userDialog.worlds.length }}
@@ -974,25 +952,39 @@ html
 
             //- dialog: social status
             el-dialog.x-dialog(ref="socialStatusDialog" :visible.sync="socialStatusDialog.visible" title="Social Status" width="400px")
-                el-row(v-loading="socialStatusDialog.loading")
+                div(v-loading="socialStatusDialog.loading")
-                    el-col(:span="9")
+                    el-select(v-model="socialStatusDialog.status" style="dispaly:block")
-                        el-select(v-model="socialStatusDialog.status")
+                        el-option(label="Online" value="active").
-                            el-option(label="Online" value="active").
+                            #[i.x-user-status.active] Online
-                                #[i.x-user-status.active] Online
+                        el-option(label="Join Me" value="join me").
-                            el-option(label="Join Me" value="join me").
+                            #[i.x-user-status.joinme] Join Me
-                                #[i.x-user-status.joinme] Join Me
+                        el-option(label="Ask Me" value="ask me").
-                            el-option(label="Ask Me" value="ask me").
+                            #[i.x-user-status.askme] Ask Me
-                                #[i.x-user-status.askme] Ask Me
+                        el-option(label="Do Not Disturb" value="busy").
-                            el-option(label="Do Not Disturb" value="busy").
+                            #[i.x-user-status.busy] Do Not Disturb
-                                #[i.x-user-status.busy] Do Not Disturb
+                        el-option(label="Offline" value="offline").
-                            el-option(label="Offline" value="offline").
+                            #[i.x-user-status.offline] Offline
-                                #[i.x-user-status.offline] Offline
+                    el-input(v-model="socialStatusDialog.statusDescription" placeholder="Status" style="dispaly:block;margin-top:10px")
-                    el-col(:span="1")  
-                    el-col(:span="14")
-                        el-input(v-model="socialStatusDialog.statusDescription" placeholder="Status")
                 template(#footer)
                     el-button(type="primary" size="small" :disabled="socialStatusDialog.loading" @click="saveSocialStatus") Update
 
+            //- dialog: language
+            el-dialog.x-dialog(ref="languageDialog" :visible.sync="languageDialog.visible" title="Language" width="400px")
+                div(v-loading="languageDialog.loading")
+                    div(style="margin:5px 0")
+                        el-tag(v-for="item in API.currentUser.$languages" :key="item.key" size="small" type="info" effect="plain" closable @close="removeUserLanguage(item.key)" style="margin-right:5px")
+                            span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
+                            | {{ item.value }} ({{ item.key }})
+                    div(v-if="languageDialog.languageChoice === true")
+                        el-select(v-model="languageDialog.languageValue" size="mini")
+                            el-option(v-for="item in languageDialog.languages" :key="item.key" :value="item.key" :label="item.value")
+                                span.famfamfam-flags(:class="languageClass(item.key)" style="display:inline-block;margin-right:5px")
+                                | {{ item.value }} ({{ item.key }})
+                        el-button(@click="languageDialog.languageChoice=false; addUserLanguage(languageDialog.languageValue)" size="mini") Ok
+                        el-button(@click="languageDialog.languageChoice=false" size="mini" style="margin-left:0") Cancel
+                    div(v-else)
+                        el-button(@click="languageDialog.languageValue='';languageDialog.languageChoice=true" size="mini") Add Language
+
             //- dialog: bio
             el-dialog.x-dialog(ref="bioDialog" :visible.sync="bioDialog.visible" title="Bio" width="400px")
                 el-input(type="textarea" v-model="bioDialog.bio" size="mini" maxlength="512" show-word-limit :autosize="{ minRows:2, maxRows:5 }" placeholder="Please input a bio")