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

update PLAY button（add Matching State）

Browse source
This commit is contained in:
才羽青空 2025-12-29 08:27:39 +08:00
parent 4d3e6ace2b
commit 25c4cdec83
3 changed files with 167 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

72
css/style.css
View file

@ -871,7 +871,8 @@ body {
opacity: 1; opacity: 1;
position: relative; position: relative;
top: -0.5vh; top: -0.5vh;
animation: pulse-opacity 5s infinite ease-in-out; transition: opacity 0.5s ease-in-out;
animation: play-text-pulse 5s infinite ease-in-out;
} }
.tips-text { .tips-text {
@ -888,6 +889,63 @@ body {
margin-top: -0.5vh; margin-top: -0.5vh;
} }
/* 匹配状态的高亮样式 */
.matching-highlight {
color: #fff !important;
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) !important;
}
/* 匹配状态下的按钮样式 */
.multi-layer-button.matching-state {
cursor: pointer;
pointer-events: none;
}
.multi-layer-button.matching-state .layer-1 {
opacity: 0;
filter: blur(0px);
}
.multi-layer-button.matching-state .layer-2 {
opacity: 1;
filter: blur(0px);
}
.multi-layer-button.matching-state .layer-3 {
opacity: 0;
filter: blur(0px);
}
/* 匹配状态下禁用闪光动画 */
.multi-layer-button.matching-state.bro-loading:after {
animation: none !important;
-webkit-animation: none !important;
}
/* 匹配状态下禁用play-text动画 */
.multi-layer-button.matching-state .play-text {
animation: none !important;
-webkit-animation: none !important;
}
/* 匹配状态下不显示hover-text */
.multi-layer-button.matching-state .hover-text {
opacity: 0 !important;
}
.multi-layer-button.matching-state .default-text {
opacity: 1 !important;
}
@keyframes matching-pulse {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
/* Tips text container */ /* Tips text container */
.tips-text-container { .tips-text-container {
position: relative; position: relative;
@ -1020,3 +1078,15 @@ body {
opacity: 0 opacity: 0
} }
} }
@keyframes play-text-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}

132
index.html
View file

@ -12,7 +12,8 @@
</head> </head>
<body onload="createRole()"> <body onload="createRole()">
<div class="main" id="app" :class="{'localed': language != 'en'}"> <div class="main">
<div id="app" :class="{'localed': language != 'en'}">
<!-- Logo moved to bottom right --> <!-- Logo moved to bottom right -->
<img class="title-image-bottom-right" src="icons/logo.svg" alt="" onclick="openWebsite()"> <img class="title-image-bottom-right" src="icons/logo.svg" alt="" onclick="openWebsite()">
@ -82,24 +83,24 @@
<div class="button-container"> <div class="button-container">
<div class="multi-layer-button bro-loading" <div class="multi-layer-button bro-loading"
id="join" id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
@mouseenter="showServerDropdown = true" @mouseenter="!isMatching && (showServerDropdown = true)"
@mouseleave="showServerDropdown = false" @mouseleave="!isMatching && (showServerDropdown = false)"
@click="joinServer"> @click="!isMatching && joinServer()">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1"> <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2"> <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3"> <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button --> <!-- PUBG Title on Button -->
<div class="pubg-title-on-button"> <div class="pubg-title-on-button">
<div class="play-text">PLAY</div> <div class="play-text">{{ playText }}</div>
<div class="tips-text-container"> <div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div> <div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
<div class="tips-text hover-text">CLICK TO PLAY</div> <div class="tips-text hover-text">CLICK TO PLAY</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false"> <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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"
@ -170,24 +171,24 @@
<div class="button-container"> <div class="button-container">
<div class="multi-layer-button bro-loading" <div class="multi-layer-button bro-loading"
id="join" id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
@mouseenter="showServerDropdown = true" @mouseenter="!isMatching && (showServerDropdown = true)"
@mouseleave="showServerDropdown = false" @mouseleave="!isMatching && (showServerDropdown = false)"
@click="joinServer"> @click="!isMatching && joinServer()">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1"> <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2"> <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3"> <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button --> <!-- PUBG Title on Button -->
<div class="pubg-title-on-button"> <div class="pubg-title-on-button">
<div class="play-text">PLAY</div> <div class="play-text">{{ playText }}</div>
<div class="tips-text-container"> <div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div> <div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
<div class="tips-text hover-text">CLICK TO PLAY</div> <div class="tips-text hover-text">CLICK TO PLAY</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false"> <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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"
@ -262,24 +263,24 @@
<div class="button-container"> <div class="button-container">
<div class="multi-layer-button bro-loading" <div class="multi-layer-button bro-loading"
id="join" id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
@mouseenter="showServerDropdown = true" @mouseenter="!isMatching && (showServerDropdown = true)"
@mouseleave="showServerDropdown = false" @mouseleave="!isMatching && (showServerDropdown = false)"
@click="joinServer"> @click="!isMatching && joinServer()">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1"> <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2"> <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3"> <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button --> <!-- PUBG Title on Button -->
<div class="pubg-title-on-button"> <div class="pubg-title-on-button">
<div class="play-text">PLAY</div> <div class="play-text">{{ playText }}</div>
<div class="tips-text-container"> <div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div> <div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
<div class="tips-text hover-text">CLICK TO PLAY</div> <div class="tips-text hover-text">CLICK TO PLAY</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false"> <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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"
@ -354,24 +355,24 @@
<div class="button-container"> <div class="button-container">
<div class="multi-layer-button bro-loading" <div class="multi-layer-button bro-loading"
id="join" id="join"
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}" :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
@mouseenter="showServerDropdown = true" @mouseenter="!isMatching && (showServerDropdown = true)"
@mouseleave="showServerDropdown = false" @mouseleave="!isMatching && (showServerDropdown = false)"
@click="joinServer"> @click="!isMatching && joinServer()">
<img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1"> <img src="images/1.png" alt="Button Layer 1" class="button-layer layer-1">
<img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2"> <img src="images/2.png" alt="Button Layer 2" class="button-layer layer-2">
<img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3"> <img src="images/3.png" alt="Button Layer 3" class="button-layer layer-3">
<!-- PUBG Title on Button --> <!-- PUBG Title on Button -->
<div class="pubg-title-on-button"> <div class="pubg-title-on-button">
<div class="play-text">PLAY</div> <div class="play-text">{{ playText }}</div>
<div class="tips-text-container"> <div class="tips-text-container">
<div class="tips-text default-text">BATTLEGROUNDS</div> <div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
<div class="tips-text hover-text">CLICK TO PLAY</div> <div class="tips-text hover-text">CLICK TO PLAY</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false"> <div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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"
@ -462,6 +463,7 @@
</div>--> </div>-->
</div> <!-- closes id="app" --> </div> <!-- closes id="app" -->
</div> <!-- closes main -->
<script src="js/jquery-2.2.0.min.js"></script> <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-ui-1.11.4.min.js"></script>
<script src="js/jquery.selectBoxIt-3.8.1.min.js"></script> <script src="js/jquery.selectBoxIt-3.8.1.min.js"></script>
@ -534,7 +536,10 @@
], ],
selectedFriend: null, selectedFriend: null,
showFriendActions: false, showFriendActions: false,
activeTab: 'home' activeTab: 'home',
playText: 'PLAY',
battlegroundsText: 'BATTLEGROUNDS',
isMatching: false
}, },
methods: { methods: {
selectServer: function(server) { selectServer: function(server) {
@ -544,15 +549,64 @@
app.currentTeam = team; app.currentTeam = team;
}, },
joinServer: function() { joinServer: function() {
if (this.isMatching) {
return; // 如果已经在匹配中，不重复执行
}
try { try {
this.isMatching = true;
this.isLoading = true; this.isLoading = true;
$(".button-text").text('Joining...'); this.showServerDropdown = false; // 立即隐藏下拉框
engine.trigger('JoinToDedicatedServer', app.currentServer.ip);
// 更新UI显示匹配状态
this.playText = 'MATCHING';
this.battlegroundsText = this.currentServer.name + ' / ' + this.currentTeam;
// 保存Vue实例引用
var self = this;
// 生成5-35秒的随机等待时间
var minWait = 5000; // 5秒（毫秒）
var maxWait = 35000; // 35秒（毫秒）
var randomWait = Math.floor(Math.random() * (maxWait - minWait + 1)) + minWait;
// 随机时间后执行真正的JoinServer
setTimeout(function() {
try {
// 检查是否还在匹配状态
if (self.isMatching && self.currentServer) {
engine.trigger('JoinToDedicatedServer', self.currentServer.ip);
}
} catch (e) {
// 重置状态
self.playText = 'PLAY';
self.battlegroundsText = 'BATTLEGROUNDS';
self.isLoading = false;
self.isMatching = false;
}
}, randomWait);
} catch (e) { } catch (e) {
$(".button-text").text(e); this.playText = 'PLAY';
this.battlegroundsText = 'BATTLEGROUNDS';
this.isLoading = false;
this.isMatching = false;
}
},
cancelMatching: function() {
if (this.isMatching) {
this.isMatching = false;
this.playText = 'PLAY';
this.battlegroundsText = 'BATTLEGROUNDS';
this.isLoading = false; this.isLoading = false;
} }
}, },
resetMatchingState: function() {
this.playText = 'PLAY';
this.battlegroundsText = 'BATTLEGROUNDS';
this.isLoading = false;
this.isMatching = false;
},
toggleLanguageAndRefresh: toggleLanguageAndRefresh, toggleLanguageAndRefresh: toggleLanguageAndRefresh,
l: l, l: l,
toggleTickMark: function() { toggleTickMark: function() {
@ -564,10 +618,10 @@
joinCustomMatch: function() { joinCustomMatch: function() {
try { try {
this.isLoading = true; this.isLoading = true;
// 这里可以添加自定义比赛的逻辑 // 打开自定义比赛链接
console.log('Joining custom match...'); engine.trigger('OpenExternalBrowser', 'https://ogbattlegrounds.com');
} catch (e) { } catch (e) {
console.error('Error joining custom match:', e); console.error('Error opening custom match link:', e);
this.isLoading = false; this.isLoading = false;
} }
}, },

26
js/serverList.js
View file

@ -2,11 +2,11 @@ var serverList = [
{ {
//name 控制在大厅显示的名称。 //name 控制在大厅显示的名称。
name: "NA SERVER", name: "AS SERVER",
//description 默认不显示，但必须保留该参数。 //description 默认不显示，但必须保留该参数。
description: "North America Server", description: "North America Server",
//ip 控制玩家连接的服务器地址 //ip 控制玩家连接的服务器地址
ip: "43.248.139.242:8888" ip: "220.205.16.22:8889"
}, },
@ -22,31 +22,11 @@ var serverList = [
{ {
//name 控制在大厅显示的名称。 //name 控制在大厅显示的名称。
name: "AS SERVER", name: "RU SERVER",
//description 默认不显示，但必须保留该参数。 //description 默认不显示，但必须保留该参数。
description: "Asia Server", description: "Asia Server",
//ip 控制玩家连接的服务器地址 //ip 控制玩家连接的服务器地址
ip: "81.177.135.63" 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"
} }
] ]