From 25c4cdec833277237c184574a549b3b1db767cae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=8D=E7=BE=BD=E9=9D=92=E7=A9=BA?= Date: Mon, 29 Dec 2025 08:27:39 +0800 Subject: [PATCH] =?UTF-8?q?update=20PLAY=20button=EF=BC=88add=20Matching?= =?UTF-8?q?=20State=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 72 +++++++++++++++++++++++++- index.html | 132 +++++++++++++++++++++++++++++++++-------------- js/serverList.js | 26 ++-------- 3 files changed, 167 insertions(+), 63 deletions(-) diff --git a/css/style.css b/css/style.css index b0a56bd..b79e73d 100644 --- a/css/style.css +++ b/css/style.css @@ -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; @@ -1019,4 +1077,16 @@ body { background-position: 0 0; opacity: 0 } +} + +@keyframes play-text-pulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.6; + } + 100% { + opacity: 1; + } } \ No newline at end of file diff --git a/index.html b/index.html index 8c65b30..42888d1 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,8 @@ -
+
+
@@ -82,24 +83,24 @@
+ :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading, 'matching-state': isMatching}" + @mouseenter="!isMatching && (showServerDropdown = true)" + @mouseleave="!isMatching && (showServerDropdown = false)" + @click="!isMatching && joinServer()"> Button Layer 1 Button Layer 2 Button Layer 3
-
PLAY
+
{{ playText }}
-
BATTLEGROUNDS
+
{{ battlegroundsText }}
CLICK TO PLAY
-
+
REGION
-
+
REGION
-
+
REGION
-
+
REGION
+
@@ -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; } }, diff --git a/js/serverList.js b/js/serverList.js index 7501090..facc2b4 100644 --- a/js/serverList.js +++ b/js/serverList.js @@ -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" - } ] \ No newline at end of file