update friend bar

index.html

@@ -39,12 +39,25 @@
         <p class="serial-text">Early Access v2.6.30.4</p> 
 <!-- 底部文字结束 -->
 
+        <!-- Friends Bar -->
+        <div class="friends-bar">
+            <img src="icons/Friend.png" class="friends-icon" alt="Friends">
+            <span class="friends-text">OG:BG Friends 0 / 0</span>
+        </div>
+        
+        <!-- Receive Invite Button -->
+        <button class="receive-invite-button" @click="toggleTickMark">
+            <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
+            <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
+            RECEIVE INVITE
+        </button>
+
 <!-- 选择框、开始按钮板块 -->
         <div class="game-play-container-top-left">
             <div class="button-container">
-                <div class="multi-layer-button" 
+                <div class="multi-layer-button bro-loading"
                      id="join"
-                     :class="{'active-hover': showServerDropdown}"
+                     :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
                      @mouseenter="showServerDropdown = true" 
                      @mouseleave="showServerDropdown = false"
                      @click="joinServer">
@@ -165,10 +178,8 @@
             engine.trigger('DestoryLobbyCharacter', 1)
             engine.trigger('DestoryLobbyCharacter', 2)
             engine.trigger('DestoryLobbyCharacter', 3)
-            
-            // 创建第一个角色（女性）
             engine.trigger('SetLobbyCharacterAngle',0,90)
-            engine.trigger('CreateLobbyCharacter', 0, false, "","牛逼！")
+            engine.trigger('CreateLobbyCharacter', 0, false, "","Player")
             engine.trigger('UpdateLobbyCharacter', 0,{
                 "Gender":false,
                 "BoolOptions":[],
@@ -194,22 +205,28 @@
                 loaded: false,
                 langDisabled: localStorage.getItem('langDisabled') ? true : false,
                 showServerDropdown: false,
+                tickMarkEnabled: true,
+                isLoading: false,
             },
             methods: {
-		     	selectServer: function(server) {
+			    selectServer: function(server) {
                     app.currentServer = server;
                 },
-				
                 joinServer: function() {
                     try {
+                        this.isLoading = true;
                         $(".button-text").text('Joining...');
                         engine.trigger('JoinToDedicatedServer', app.currentServer.ip);
                     } catch (e) {
                         $(".button-text").text(e);
+                        this.isLoading = false;
                     }
                 },
                 toggleLanguageAndRefresh: toggleLanguageAndRefresh,
                 l: l,
+                toggleTickMark: function() {
+                    this.tickMarkEnabled = !this.tickMarkEnabled;
+                }
             }
         });