diff --git a/README.md b/README.md deleted file mode 100644 index 27026ff..0000000 --- a/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# pubg_lobby - -### 这是什么？ - -这是一个尝试完整还原 PUBG 2017 大厅的项目，本项目基于 [OG:BG Lobby](https://git.ogbattlegrounds.com/OGBG/lobby) 修改。 - -我使用 Trae IDE 设计了大量样式，并对原代码进行了正确格式和缩进还有清理无用代码的操作，使代码更加轻易可读。 - - -## 如何使用？ - -因整个项目为 html 结构文件，您可以直接在本地上复制以 `file：//` 为前缀的 URL 并打开 `OGBATTLEGROUNDS.bat` 文件替换参数 `LobbyUrl=` 后面的 URL 为您刚才复制的内容，然后保存，直接运行就可看到效果。 - -我还在为该项目完善更多内容，例如添加缺失的好友列表、服装柜、奖励、活动页面等等内容，并为这些内容添加合适的 CameraAngel（不过我并不知道可以被使用的值）。 - - -## 截图预览 - -lobby-preview - -特别感谢 OG:BG 团队所有开发者。 - - diff --git a/css/style.css b/css/style.css index e389dbe..af6c792 100644 --- a/css/style.css +++ b/css/style.css @@ -42,10 +42,6 @@ right: 0; bottom: 0; background-color: #000; - background-image: url(../images/bg_intro_terms.jpg); - background-size: cover; - background-position: center; - background-repeat: no-repeat; z-index: 999; display: flex; justify-content: center; @@ -61,9 +57,7 @@ transform: translate(-50%); bottom: 3vh; font-size: 3vh; - font-family: 'Overpass-Reg'; - color: #fff; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); + font-family: 'Overpass-Reg' } .loading-text > img { @@ -88,18 +82,15 @@ .loading-title { text-align: center; font-size: 4vh; - color: #fff; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); + color: gray; } .loading-subtitle { text-align: center; font-size: 3vh; - color: #fff; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); + color: gray; } -/* 赞助商屏幕样式 */ body { font-family: 'Agency'; cursor: pointer; @@ -239,8 +230,8 @@ body { /* Multi-layer button with images */ .multi-layer-button { position: relative; - width: 39vh; - height: 14vh; + width: 38vh; + height: 13.5vh; cursor: pointer; display: flex; justify-content: center; @@ -265,56 +256,6 @@ body { transition: opacity 0.4s ease, filter 0.4s ease; } -/* 闪光动画效果 */ -.multi-layer-button::after { - content: ""; - position: absolute; - top: -15.5%; - left: -26.5%; - width: 180%; - height: 180%; - pointer-events: none; - z-index: 5; - background: -webkit-linear-gradient(left, hsla(0,0%,100%,0), hsla(0,0%,100%,.5) 8%, #fff 16%, hsla(0,0%,100%,.5) 19%, hsla(0,0%,100%,0) 20%); - background-position: inherit; - -webkit-mask: url(../images/play-bg1.png) 0 0 no-repeat; - -webkit-mask-size: cover; - -webkit-transform: rotate(-30deg); - transform: rotate(-30deg); - -webkit-transform-origin: 0 0; - transform-origin: 0 0; - opacity: 0; - -webkit-animation: shine linear 8s infinite; - animation: shine linear 8s infinite; -} - -@keyframes shine { - 0% { - background-position: inherit; - opacity: 0 - } - - 35% { - background-position: inherit; - opacity: 0 - } - - 50% { - background-position: 60vh 0; - opacity: 1 - } - - 75% { - background-position: 60vh 0; - opacity: 0 - } - - 100% { - background-position: inherit; - opacity: 0 - } -} - .button-layer { position: absolute; top: 0; @@ -457,6 +398,70 @@ body { color: rgba(255, 255, 255, 0.5) } +.friends-bar { + position: fixed; + bottom: 0; + left: 0.5vw; + display: flex; + align-items: center; + background-color: rgba(0, 0, 0, 0.4); + padding: 0.8vh 1.5vh 0.8vh 1vh; + border-radius: 4px 4px 0 0; + z-index: 100; + width: 13.5vw; +} + +.friends-icon { + width: 2.5vh; + height: 2.5vh; + margin-right: 1vh; + margin-left: 1vh; + object-fit: contain; +} + +.friends-text { + color: #fff; + font-family: 'Agency'; + font-size: 2vh; + margin-right: 1.5vh; +} + +.receive-invite-button { + background-color: #E3B62F; + color: #000; + font-family: 'Agency'; + font-weight: bold; + font-size: 1.8vh; + padding: 0.1vh 2vh; + border: none; + border-radius: 3px; + cursor: pointer; + display: flex; + align-items: center; + position: fixed; + bottom: 0.8vh; + left: 13vw; + z-index: 101; +} + +.tick-mark { + width: 2.2vh; + height: 2.2vh; + margin-right: 0.8vh; + object-fit: contain; +} + +.tick-mark-true { + position: relative; + top: 0; +} + +.tick-mark-false { + position: relative; + top: 0; + margin-top: -1.8vh; +} + @@ -559,9 +564,9 @@ body { } .bp-icon { - width: 40px; - height: 40px; - margin-right: 3px; + width: 3vh; + height: 3vh; + margin-right: 4px; } /* 系统按钮占位符 */ @@ -628,7 +633,6 @@ body { align-items: flex-start; } -/* Default text - CHOOSE YOUR REGION */ .multi-layer-button .default-text { opacity: 1; transition: opacity 0.3s ease; @@ -639,7 +643,7 @@ body { z-index: 1; } -/* Hover text - CLICK TO PLAY */ + .multi-layer-button .hover-text { opacity: 0; transition: opacity 0.3s ease; @@ -692,4 +696,60 @@ body { 100% { left: 100%; } +} + +.multi-layer-button.bro-loading { + position: relative; + overflow: visible; +} + +.multi-layer-button.bro-loading:after { + content: ""; + position: absolute; + top: -10%; + left: -10%; + width: 120%; + height: 120%; + pointer-events: none; + z-index: 5; + background: -webkit-linear-gradient(left, hsla(0,0%,100%,0), hsla(0,0%,100%,.8) 8%, #fff 16%, hsla(0,0%,100%,.8) 19%, hsla(0,0%,100%,0) 20%); + background-position: inherit; + -webkit-mask: url(../images/1.png) 0 0 no-repeat; + mask: url(../images/1.png) 0 0 no-repeat; + -webkit-mask-size: cover; + mask-size: cover; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + opacity: 0; + -webkit-animation: shine linear 8s infinite; + animation: shine linear 8s infinite; +} + +@keyframes shine { + 0% { + background-position: inherit; + opacity: 0 + } + + 35% { + background-position: inherit; + opacity: 0 + } + + 50% { + background-position: 40vh 0; + opacity: 1 + } + + 75% { + background-position: 40vh 0; + opacity: 0 + } + + to { + background-position: 0 0; + opacity: 0 + } } \ No newline at end of file diff --git a/icons/Friend.png b/icons/Friend.png new file mode 100644 index 0000000..3196021 Binary files /dev/null and b/icons/Friend.png differ diff --git a/icons/Tick_mark_false.png b/icons/Tick_mark_false.png new file mode 100644 index 0000000..3eb715b Binary files /dev/null and b/icons/Tick_mark_false.png differ diff --git a/icons/Tick_mark_true.png b/icons/Tick_mark_true.png new file mode 100644 index 0000000..76a6bd7 Binary files /dev/null and b/icons/Tick_mark_true.png differ diff --git a/icons/bp.png b/icons/bp.png index ece0547..e16ce82 100644 Binary files a/icons/bp.png and b/icons/bp.png differ diff --git a/images/3.png b/images/3.png index 902feaa..7ee6761 100644 Binary files a/images/3.png and b/images/3.png differ diff --git a/images/backup.png b/images/backup.png new file mode 100644 index 0000000..902feaa Binary files /dev/null and b/images/backup.png differ diff --git a/images/bg_intro_terms.jpg b/images/bg_intro_terms.jpg deleted file mode 100644 index 4a93591..0000000 Binary files a/images/bg_intro_terms.jpg and /dev/null differ diff --git a/images/play-bg1.png b/images/play-bg1.png deleted file mode 100644 index 29cc822..0000000 Binary files a/images/play-bg1.png and /dev/null differ diff --git a/index.html b/index.html index 1f1aa1c..db6265e 100644 --- a/index.html +++ b/index.html @@ -39,12 +39,25 @@

Early Access v2.6.30.4

+ +
+ Friends + OG:BG Friends 0 / 0 +
+ + + +
-
@@ -165,10 +178,8 @@ engine.trigger('DestoryLobbyCharacter', 1) engine.trigger('DestoryLobbyCharacter', 2) engine.trigger('DestoryLobbyCharacter', 3) - - // 创建第一个角色（女性） engine.trigger('SetLobbyCharacterAngle',0,90) - engine.trigger('CreateLobbyCharacter', 0, false, "","牛逼！") + engine.trigger('CreateLobbyCharacter', 0, false, "","Player") engine.trigger('UpdateLobbyCharacter', 0,{ "Gender":false, "BoolOptions":[], @@ -194,22 +205,28 @@ loaded: false, langDisabled: localStorage.getItem('langDisabled') ? true : false, showServerDropdown: false, + tickMarkEnabled: true, + isLoading: false, }, methods: { - selectServer: function(server) { + selectServer: function(server) { app.currentServer = server; }, - joinServer: function() { try { + this.isLoading = true; $(".button-text").text('Joining...'); engine.trigger('JoinToDedicatedServer', app.currentServer.ip); } catch (e) { $(".button-text").text(e); + this.isLoading = false; } }, toggleLanguageAndRefresh: toggleLanguageAndRefresh, l: l, + toggleTickMark: function() { + this.tickMarkEnabled = !this.tickMarkEnabled; + } } }); diff --git a/preview.png b/preview.png deleted file mode 100644 index f14a87d..0000000 Binary files a/preview.png and /dev/null differ