update friend bar

README.md

@@ -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（不过我并不知道可以被使用的值）。
-
-
-## 截图预览 
-
-<img src="preview.png" alt="lobby-preview" width="600"> 
-
-特别感谢 OG:BG 团队所有开发者。
-
-

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';
+    font-family: 'Overpass-Reg'
-    color: #fff;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 }
 
 .loading-text > img {
@@ -88,18 +82,15 @@
 .loading-title {
     text-align: center;
     font-size: 4vh;
-    color: #fff;
+    color: gray;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 }
 
 .loading-subtitle {
     text-align: center;
     font-size: 3vh;
-    color: #fff;
+    color: gray;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
 }
 
-/* 赞助商屏幕样式 */
 body {
     font-family: 'Agency';
     cursor: pointer;
@@ -239,8 +230,8 @@ body {
 /* Multi-layer button with images */
 .multi-layer-button {
     position: relative;
-    width: 39vh;
+    width: 38vh;
-    height: 14vh;
+    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;
+    width: 3vh;
-    height: 40px;
+    height: 3vh;
-    margin-right: 3px;
+    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
+    }
 }

index.html

@@ -39,12 +39,25 @@
         <p class="serial-text">Early Access v2.6.30.4</p> 
 <!-- 底部文字结束 -->
 
+        <!-- Friends Bar -->
+        <div class="friends-bar">
+            <img src="icons/Friend.png" class="friends-icon" alt="Friends">
+            <span class="friends-text">OG:BG Friends 0 / 0</span>
+        </div>
+        
+        <!-- Receive Invite Button -->
+        <button class="receive-invite-button" @click="toggleTickMark">
+            <img v-if="tickMarkEnabled" src="icons/Tick_mark_true.png" class="tick-mark" alt="Online">
+            <img v-else src="icons/Tick_mark_false.png" class="tick-mark" alt="Offline">
+            RECEIVE INVITE
+        </button>
+
 <!-- 选择框、开始按钮板块 -->
         <div class="game-play-container-top-left">
             <div class="button-container">
-                <div class="multi-layer-button" 
+                <div class="multi-layer-button bro-loading"
                      id="join"
-                     :class="{'active-hover': showServerDropdown}"
+                     :class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
                      @mouseenter="showServerDropdown = true" 
                      @mouseleave="showServerDropdown = false"
                      @click="joinServer">
@@ -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;
+                }
             }
         });