update PLAY button（add Matching State）
This commit is contained in:
才羽青空
parent
4d3e6ace2b
commit
25c4cdec83
3 changed files with 167 additions and 63 deletions
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;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue