update PLAY button（add Matching State）
This commit is contained in:
才羽青空
parent
4d3e6ace2b
commit
25c4cdec83
3 changed files with 167 additions and 63 deletions
|
|
@ -871,7 +871,8 @@ body {
|
|||
opacity: 1;
|
||||
position: relative;
|
||||
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 {
|
||||
|
|
@ -888,6 +889,63 @@ body {
|
|||
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 {
|
||||
position: relative;
|
||||
|
|
@ -1020,3 +1078,15 @@ body {
|
|||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes play-text-pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
132
index.html
132
index.html
|
|
@ -12,7 +12,8 @@
|
|||
</head>
|
||||
<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 -->
|
||||
<img class="title-image-bottom-right" src="icons/logo.svg" alt="" onclick="openWebsite()">
|
||||
|
||||
|
|
@ -82,24 +83,24 @@
|
|||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
|
||||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||||
@click="!isMatching && joinServer()">
|
||||
<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/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- 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 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>
|
||||
</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-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
|
|
@ -170,24 +171,24 @@
|
|||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
|
||||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||||
@click="!isMatching && joinServer()">
|
||||
<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/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- PUBG Title on Button -->
|
||||
<div class="pubg-title-on-button">
|
||||
<div class="play-text">PLAY</div>
|
||||
<div class="tips-text-container">
|
||||
<div class="tips-text default-text">BATTLEGROUNDS</div>
|
||||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||||
</div>
|
||||
<div class="play-text">{{ playText }}</div>
|
||||
<div class="tips-text-container">
|
||||
<div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
|
||||
<div class="tips-text hover-text">CLICK TO PLAY</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-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
|
|
@ -262,24 +263,24 @@
|
|||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
|
||||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||||
@click="!isMatching && joinServer()">
|
||||
<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/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- 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 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>
|
||||
</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-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
|
|
@ -354,24 +355,24 @@
|
|||
<div class="button-container">
|
||||
<div class="multi-layer-button bro-loading"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
||||
@mouseenter="showServerDropdown = true"
|
||||
@mouseleave="showServerDropdown = false"
|
||||
@click="joinServer">
|
||||
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}"
|
||||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||||
@click="!isMatching && joinServer()">
|
||||
<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/3.png" alt="Button Layer 3" class="button-layer layer-3">
|
||||
<!-- 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 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>
|
||||
</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-header">REGION</div>
|
||||
<button v-for="server in serverList"
|
||||
|
|
@ -462,6 +463,7 @@
|
|||
</div>-->
|
||||
|
||||
</div> <!-- closes id="app" -->
|
||||
</div> <!-- closes main -->
|
||||
<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>
|
||||
|
|
@ -534,7 +536,10 @@
|
|||
],
|
||||
selectedFriend: null,
|
||||
showFriendActions: false,
|
||||
activeTab: 'home'
|
||||
activeTab: 'home',
|
||||
playText: 'PLAY',
|
||||
battlegroundsText: 'BATTLEGROUNDS',
|
||||
isMatching: false
|
||||
},
|
||||
methods: {
|
||||
selectServer: function(server) {
|
||||
|
|
@ -544,15 +549,64 @@
|
|||
app.currentTeam = team;
|
||||
},
|
||||
joinServer: function() {
|
||||
if (this.isMatching) {
|
||||
return; // 如果已经在匹配中，不重复执行
|
||||
}
|
||||
|
||||
try {
|
||||
this.isMatching = true;
|
||||
this.isLoading = true;
|
||||
$(".button-text").text('Joining...');
|
||||
engine.trigger('JoinToDedicatedServer', app.currentServer.ip);
|
||||
this.showServerDropdown = false; // 立即隐藏下拉框
|
||||
|
||||
// 更新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) {
|
||||
$(".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;
|
||||
}
|
||||
},
|
||||
resetMatchingState: function() {
|
||||
this.playText = 'PLAY';
|
||||
this.battlegroundsText = 'BATTLEGROUNDS';
|
||||
this.isLoading = false;
|
||||
this.isMatching = false;
|
||||
},
|
||||
toggleLanguageAndRefresh: toggleLanguageAndRefresh,
|
||||
l: l,
|
||||
toggleTickMark: function() {
|
||||
|
|
@ -564,10 +618,10 @@
|
|||
joinCustomMatch: function() {
|
||||
try {
|
||||
this.isLoading = true;
|
||||
// 这里可以添加自定义比赛的逻辑
|
||||
console.log('Joining custom match...');
|
||||
// 打开自定义比赛链接
|
||||
engine.trigger('OpenExternalBrowser', 'https://ogbattlegrounds.com');
|
||||
} catch (e) {
|
||||
console.error('Error joining custom match:', e);
|
||||
console.error('Error opening custom match link:', e);
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ var serverList = [
|
|||
|
||||
{
|
||||
//name 控制在大厅显示的名称。
|
||||
name: "NA SERVER",
|
||||
name: "AS SERVER",
|
||||
//description 默认不显示，但必须保留该参数。
|
||||
description: "North America Server",
|
||||
//ip 控制玩家连接的服务器地址
|
||||
ip: "43.248.139.242:8888"
|
||||
ip: "220.205.16.22:8889"
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -22,31 +22,11 @@ var serverList = [
|
|||
|
||||
{
|
||||
//name 控制在大厅显示的名称。
|
||||
name: "AS SERVER",
|
||||
name: "RU SERVER",
|
||||
//description 默认不显示，但必须保留该参数。
|
||||
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"
|
||||
|
||||
}
|
||||
]
|
||||
Loading…
Add table
Add a link
Reference in a new issue