cyqk_0010/pubg_lobby
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update friend bar & server selection (thanks Kirito)

Browse source
This commit is contained in:
才羽青空 2025-12-28 00:41:01 +08:00
parent eb0008a2dc
commit 4094df3182
7 changed files with 413 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

116
index.html
View file

@ -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-header">REGION</div>
<button v-for="server in serverList"
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
:id="server.name"
v-on:click="selectServer(server)">
<span class="checkmark" v-if="server.name === currentServer.name">✓</span>
{{ server.name }}
<div class="dropdown-section">
<div class="dropdown-header">REGION</div>
<button v-for="server in serverList"
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
:id="server.name"
v-on:click="selectServer(server)">
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
{{ 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>