update friend bar & server selection (thanks Kirito)

css/style.css

@@ -279,6 +279,8 @@ body {
 
 .layer-3 {
     z-index: 0;
+    width: 104%;
+    height: 112%;
     mix-blend-mode: multiply;
 }
 
@@ -301,16 +303,15 @@ body {
 /* 平铺服务器区域按钮 */
 .join-server-container {
     display: flex;
-    padding: 0vh 1.5vh 1vh 1.5vh;
+    padding: 0.3vh 1.0vh 1.0vh 1.0vh;
     margin-bottom: 0vh;
     margin-left: 0vh;
-    width: 25vh;
+    width: 26vh;
     flex-direction: column;
     color: #fff;
-    background-color: rgba(0, 0, 0, 0.85);
+    background-color: rgba(0, 0, 0, 0.95);
-    border: 1px solid rgba(227, 182, 47, 0.6);
+    border: none;
-    border-top: none;
+    border-radius: 0;
-    border-radius: 0 0 4px 4px;
     opacity: 0;
     max-height: 0;
     overflow: hidden;
@@ -324,13 +325,13 @@ body {
 
 .join-server-container.show {
     opacity: 1;
-    max-height: 80vh;
+    max-height: 100vh;
     overflow: visible;
     transform: translateY(0);
 }
 
 .dropdown-section {
-    margin-bottom: 1.5vh;
+    margin-bottom: 2vh;
 }
 
 .dropdown-header {
@@ -338,44 +339,73 @@ body {
     font-size: 2.2vh;
     color: rgba(227, 182, 47, 1);
     text-transform: uppercase;
-    margin-bottom: 1vh;
+    margin-bottom: 1.5vh;
     font-weight: bold;
     letter-spacing: 0.1em;
-    padding-bottom: 0.3vh;
+    padding-bottom: 0.5vh;
-    border-bottom: 1px solid rgba(227, 182, 47, 0.3);
+    border-bottom: 1px solid rgba(227, 182, 47, 1);
 }
 
 .sel-server-button {
     font-family: 'Agency';
     margin-bottom: 0.8vh;
-    font-size: 2.1vh;
+    font-size: 2vh;
     text-align: left;
-    padding: 0.6vh 1vh;
+    padding: 0.6vh 0;
     background-color: transparent;
     border: none;
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(255, 255, 255, 0.9);
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
-    border-radius: 2px;
+    border-radius: 0;
+    width: 100%;
+    box-sizing: border-box;
 }
 
 .sel-server-button:hover {
     color: rgba(227, 182, 47, 1);
-    background-color: rgba(227, 182, 47, 0.1);
+    background-color: transparent;
 }
 
 .sel-server-button.active {
     color: rgba(227, 182, 47, 1);
-    background-color: rgba(227, 182, 47, 0.15);
+    background-color: transparent;
 }
 
 .checkmark {
     margin-right: 1.2vh;
-    color: rgba(227, 182, 47, 1);
+    width: 2.0vh;
+    height: 2.0vh;
+    object-fit: contain;
+    vertical-align: middle;
+}
+
+/* Custom Match Button */
+.custom-match-button {
+    font-family: 'Agency', sans-serif;
+    font-size: 2.2vh;
     font-weight: bold;
-    font-size: 2vh;
+    text-transform: uppercase;
+    color: #fff;
+    background-color: rgba(227, 182, 47, 0.7);
+    border: none;
+    border-radius: 0;
+    padding: 1.5vh 1.0vh;
+    margin: 1vh -1.0vh -1.0vh -1.0vh;
+    cursor: pointer;
+    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.7);
+    transition: all 0.2s ease;
+    width: calc(100% + 2vh);
+    text-align: center;
+    letter-spacing: 0.1em;
+    box-sizing: border-box;
+}
+
+.custom-match-button:hover {
+    background-color: rgba(227, 182, 47, 1);
+    box-shadow: 0 0 15px rgba(227, 182, 47, 0.5);
 }
 
 
@@ -426,6 +456,231 @@ body {
     margin-right: 1.5vh;
 }
 
+/* Friends List Dropdown Styles */
+.friends-list-container {
+    position: fixed;
+    bottom: 4vh;
+    left: 0.5vw;
+    width: 13.5vw;
+    background-color: rgba(0, 0, 0, 0.9);
+    border-radius: 4px 4px 0 0;
+    border: none;
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transform: translateY(100%);
+    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
+    z-index: 99;
+    display: flex;
+    flex-direction: column;
+}
+
+.friends-list-container.show {
+    opacity: 1;
+    max-height: 50vh;
+    overflow: auto;
+    transform: translateY(0);
+}
+
+/* Hover effect to show friends list automatically */
+.friends-bar:hover + .friends-list-container,
+.friends-list-container:hover {
+    opacity: 1;
+    max-height: 50vh;
+    overflow: auto;
+    transform: translateY(0);
+}
+
+.friends-list-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1vh 1.5vh;
+    border-bottom: 1px solid rgba(227, 182, 47, 0.3);
+    background-color: rgba(0, 0, 0, 0.95);
+}
+
+.friends-list-header span {
+    color: #fff;
+    font-family: 'Agency';
+    font-size: 2vh;
+    font-weight: bold;
+}
+
+.refresh-button {
+    background-color: transparent;
+    color: #e3b62f;
+    border: 1px solid #e3b62f;
+    padding: 0.5vh 1vh;
+    font-size: 1.5vh;
+    font-family: 'Agency';
+    cursor: pointer;
+    border-radius: 2px;
+    transition: all 0.2s ease;
+}
+
+.refresh-button:hover {
+    background-color: rgba(227, 182, 47, 0.2);
+}
+
+.friends-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    overflow-y: auto;
+    max-height: calc(50vh - 6vh);
+}
+
+.friend-item {
+    display: flex;
+    align-items: center;
+    padding: 1vh 1.5vh;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    transition: background-color 0.2s ease;
+    cursor: pointer;
+}
+
+.friend-item:hover {
+    background-color: rgba(227, 182, 47, 0.1);
+}
+
+.friend-avatar {
+    width: 4vh;
+    height: 4vh;
+    border-radius: 50%;
+    margin-right: 1vh;
+    object-fit: cover;
+    border: 2px solid transparent;
+    transition: border-color 0.2s ease;
+}
+
+.friend-item:hover .friend-avatar {
+    border-color: #e3b62f;
+}
+
+.friend-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.friend-name {
+    color: #fff;
+    font-family: 'Agency';
+    font-size: 1.8vh;
+    margin-bottom: 0.2vh;
+}
+
+.friend-status {
+    font-size: 1.4vh;
+    font-family: 'Agency';
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.friend-status.online {
+    color: #4CAF50;
+}
+
+.friend-status.offline {
+    color: #777;
+}
+
+.invite-button {
+    background-color: #e3b62f;
+    color: #000;
+    border: none;
+    padding: 0.5vh 1vh;
+    font-size: 1.5vh;
+    font-family: 'Agency';
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 2px;
+    transition: all 0.2s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+}
+
+.friend-item:hover .invite-button {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.invite-button:hover {
+    background-color: #fff;
+}
+
+/* Friend Item Selected State */
+.friend-item.selected {
+    background-color: rgba(227, 182, 47, 0.2);
+    border-left: 3px solid #e3b62f;
+}
+
+.friend-item.selected .friend-avatar {
+    border-color: #e3b62f;
+}
+
+/* Friend Action Dropdown */
+.friend-action-dropdown {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.95);
+    border-top: 1px solid rgba(227, 182, 47, 0.3);
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease, max-height 0.3s ease, transform 0.3s ease;
+    z-index: 110;
+}
+
+.friend-action-dropdown.show {
+    opacity: 1;
+    max-height: 100vh;
+    overflow: visible;
+    transform: translateY(0);
+}
+
+.friend-action-button {
+    display: block;
+    width: 100%;
+    padding: 1.2vh 1.5vh;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    color: #fff;
+    font-family: 'Agency';
+    font-size: 2vh;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+}
+
+.friend-action-button:hover {
+    background-color: rgba(227, 182, 47, 0.1);
+    color: #e3b62f;
+}
+
+.friend-action-button.view-button:hover {
+    background-color: rgba(76, 175, 80, 0.1);
+    color: #4CAF50;
+}
+
+.friend-action-button.invite-button:hover {
+    background-color: rgba(227, 182, 47, 0.2);
+    color: #fff;
+}
+
 .receive-invite-button {
     background-color: #E3B62F;
     color: #000;
@@ -600,27 +855,28 @@ body {
 .play-text {
     font-family: 'Bombard', 'Agency', 'PUBG Sans Regular', sans-serif;
     color: #fff;
-    font-size: 5.5vh;
+    font-size: 6vh;
     text-transform: uppercase;
-    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
+    text-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.9);
-    margin-bottom: 0.5vh;
+    margin-bottom: 0.8vh;
     font-weight: bold;
-    letter-spacing: 0.05em;
+    letter-spacing: 5px;
     line-height: 1;
-    animation: pulse-opacity 3s infinite ease-in-out;
+    text-align: left;
     opacity: 1;
 }
 
 .tips-text {
     font-family: 'Moonshiner', 'Agency', 'PUBG Sans Regular', sans-serif;
-    font-size: 3vh;
+    font-size: 3.2vh;
     text-transform: uppercase;
     color: rgba(227, 182, 47, 1);
-    text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
+    text-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.9);
-    letter-spacing: 0.1em;
+    letter-spacing: 0.08em;
     position: relative;
-    opacity: 0.9;
+    opacity: 1;
     line-height: 1;
+    text-align: left;
 }
 
 /* Tips text container */
@@ -652,6 +908,8 @@ body {
     left: 0;
     text-align: left;
     z-index: 2;
+    color: #fff;
+    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(227, 182, 47, 0.9), 0 0 32px rgba(227, 182, 47, 0.7);
 }
 
 /* Show hover text when button is hovered or dropdown is active */

index.html

@@ -40,9 +40,33 @@
 <!-- 底部文字结束 -->
 
         <!-- Friends Bar -->
-        <div class="friends-bar">
+        <div class="friends-bar" @click="toggleFriendsList">
             <img src="icons/Friend.png" class="friends-icon" alt="Friends">
-            <span class="friends-text">OG:BG Friends 0 / 0</span>
+            <span class="friends-text">OG:BG Friends 3 / 4</span>
+        </div>
+        
+        <!-- Friends List Dropdown -->
+        <div class="friends-list-container" :class="{'show': showFriendsList}">
+            <div class="friends-list-header">
+                <span>OG:BG Friends</span>
+                <button class="refresh-button">Refresh</button>
+            </div>
+            <div class="friends-list">
+                <div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
+                    <img :src="friend.avatar" class="friend-avatar" alt="Avatar">
+                    <div class="friend-info">
+                        <div class="friend-name">{{ friend.name }}</div>
+                        <div class="friend-status" :class="friend.status">{{ friend.status }}</div>
+                    </div>
+                    <button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
+                </div>
+            </div>
+            
+            <!-- Friend Action Dropdown -->
+            <div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
+                <button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
+                <button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
+            </div>
         </div>
         
         <!-- Receive Invite Button -->
@@ -75,17 +99,30 @@
                 </div>
             </div>
             <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
-                <div class="dropdown-section">
+                    <div class="dropdown-section">
-                    <div class="dropdown-header">REGION</div>
+                        <div class="dropdown-header">REGION</div>
-                    <button v-for="server in serverList"
+                        <button v-for="server in serverList"
-                            v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
+                                v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
-                            :id="server.name"
+                                :id="server.name"
-                            v-on:click="selectServer(server)">
+                                v-on:click="selectServer(server)">
-                            <span class="checkmark" v-if="server.name === currentServer.name">✓</span>
+                                <img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
-                            {{ server.name }}
+                                {{ server.name }}
+                        </button>
+                    </div>
+                    <div class="dropdown-section">
+                        <div class="dropdown-header">TEAM</div>
+                        <button v-for="team in teamList"
+                                v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
+                                :id="team"
+                                v-on:click="selectTeam(team)">
+                                <img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
+                                {{ team }}
+                        </button>
+                    </div>
+                    <button class="custom-match-button" @click="joinCustomMatch">
+                        CUSTOM MATCH
                     </button>
                 </div>
-            </div>
         </div>
 <!-- 服务器玩家数量 -->
 
@@ -145,6 +182,7 @@
             </div>
         </div>
     </div>
+ </div> <!-- closes id="app" -->
     <script src="js/jquery-2.2.0.min.js"></script>
     <script src="js/jquery-ui-1.11.4.min.js"></script>
     <script src="js/jquery.selectBoxIt-3.8.1.min.js"></script>
@@ -195,10 +233,11 @@
             el: '#app',
             data: {
                 serverList: serverList,
+                teamList: ["SOLO", "DUO", "SQUAD"],
                 Player: "player",
                 BP: 1363,
                 userSerial: "userSerial",
-                currentServer: serverList[0],
+                currentServer: serverList[2],
                 currentTeam: "SOLO",
                 isDebug: false,
                 language: "zh-CN",
@@ -207,11 +246,23 @@
                 showServerDropdown: false,
                 tickMarkEnabled: true,
                 isLoading: false,
+                showFriendsList: false,
+                friendsList: [
+                    { name: "H4TIUX", avatar: "images/avatar/h4tiux.jpg", status: "online" },
+                    { name: "xXMrYashXx", avatar: "images/avatar/yash.jpg", status: "online" },
+                    { name: "Kirito", avatar: "images/avatar/kirito.jpg", status: "offline" },
+                    { name: "Land", avatar: "images/avatar/land.jpg", status: "online" },
+                ],
+                selectedFriend: null,
+                showFriendActions: false
             },
             methods: {
-			    selectServer: function(server) {
+		    selectServer: function(server) {
                     app.currentServer = server;
                 },
+                selectTeam: function(team) {
+                    app.currentTeam = team;
+                },
                 joinServer: function() {
                     try {
                         this.isLoading = true;
@@ -226,6 +277,44 @@
                 l: l,
                 toggleTickMark: function() {
                     this.tickMarkEnabled = !this.tickMarkEnabled;
+                },
+                joinCustomMatch: function() {
+                    try {
+                        this.isLoading = true;
+                        // 这里可以添加自定义比赛的逻辑
+                        console.log('Joining custom match...');
+                    } catch (e) {
+                        console.error('Error joining custom match:', e);
+                        this.isLoading = false;
+                    }
+                },
+                toggleFriendsList: function() {
+                    this.showFriendsList = !this.showFriendsList;
+                    // 关闭好友操作菜单
+                    if (!this.showFriendsList) {
+                        this.showFriendActions = false;
+                        this.selectedFriend = null;
+                    }
+                },
+                selectFriend: function(friend) {
+                    if (this.selectedFriend && this.selectedFriend.name === friend.name) {
+                        // 如果点击的是已选中的好友，切换操作菜单显示状态
+                        this.showFriendActions = !this.showFriendActions;
+                    } else {
+                        // 选择新好友并显示操作菜单
+                        this.selectedFriend = friend;
+                        this.showFriendActions = true;
+                    }
+                },
+                viewFriendProfile: function() {
+                    console.log('Viewing profile of:', this.selectedFriend.name);
+                    // 这里可以添加查看好友资料的逻辑
+                    this.showFriendActions = false;
+                },
+                inviteFriend: function() {
+                    console.log('Inviting:', this.selectedFriend.name);
+                    // 这里可以添加邀请好友的逻辑
+                    this.showFriendActions = false;
                 }
             }
         });
@@ -265,5 +354,4 @@
             location.reload();
         }
     </script>
- </div> <!-- closes id="app" -->
 </body>

js/serverList.js

@@ -2,9 +2,9 @@ var serverList = [
 
     {
 //name 控制在大厅显示的名称。
-        name: "AS",
+        name: "NA SERVER",
 //description 默认不显示，但必须保留该参数。
-        description: "Asia Server",
+        description: "North America Server",
 //ip 控制玩家连接的服务器地址
         ip: "43.248.139.242:8888" 
 
@@ -12,7 +12,7 @@ var serverList = [
     
     {
 //name 控制在大厅显示的名称。
-        name: "EU",
+        name: "EU SERVER",
 //description 默认不显示，但必须保留该参数。
         description: "European Server",
 //ip 控制玩家连接的服务器地址
@@ -22,9 +22,29 @@ var serverList = [
     
     {
 //name 控制在大厅显示的名称。
-        name: "RU",
+        name: "AS SERVER",
 //description 默认不显示，但必须保留该参数。
-        description: "Russian Server",
+        description: "Asia Server",
+//ip 控制玩家连接的服务器地址
+        ip: "81.177.135.63" 
+
+    },
+    
+    {
+//name 控制在大厅显示的名称。
+        name: "OC SERVER",
+//description 默认不显示，但必须保留该参数。
+        description: "Oceania Server",
+//ip 控制玩家连接的服务器地址
+        ip: "81.177.135.63" 
+
+    },
+    
+    {
+//name 控制在大厅显示的名称。
+        name: "SA SERVER",
+//description 默认不显示，但必须保留该参数。
+        description: "South America Server",
 //ip 控制玩家连接的服务器地址
         ip: "81.177.135.63"