update friend bar & server selection (thanks Kirito)

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

View file

@ -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);
border: 1px solid rgba(227, 182, 47, 0.6);
border-top: none;
border-radius: 0 0 4px 4px;
background-color: rgba(0, 0, 0, 0.95);
border: none;
border-radius: 0;
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;
border-bottom: 1px solid rgba(227, 182, 47, 0.3);
padding-bottom: 0.5vh;
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);
margin-bottom: 0.5vh;
text-shadow: 0.2em 0.2em 0.4em rgba(0, 0, 0, 0.9);
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);
letter-spacing: 0.1em;
text-shadow: 0.15em 0.15em 0.3em rgba(0, 0, 0, 0.9);
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 */

BIN
images/avatar/h4tiux.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

BIN
images/avatar/land.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
images/avatar/yash.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

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 -->
@ -81,10 +105,23 @@
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>
<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>
<!-- 服务器玩家数量 -->
@ -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) {
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>

BIN
index.zip Normal file

Binary file not shown.

View file

@ -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"