357 lines
No EOL
16 KiB
HTML
357 lines
No EOL
16 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Community Lobby</title>
|
|
<link rel="stylesheet" href="fonts/agency.css">
|
|
<link rel="stylesheet" href="fonts/overpass.css">
|
|
<link rel="stylesheet" href="fonts/notosans.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body onload="createRole()">
|
|
|
|
<div class="main" id="app" :class="{'localed': language != 'en'}">
|
|
<!-- Logo moved to bottom right -->
|
|
<img class="title-image-bottom-right" src="icons/logo.svg" alt="" onclick="openWebsite()">
|
|
|
|
|
|
<!-- 加载屏幕板块开始 -->
|
|
<transition name = "fade">
|
|
<div class="loading-display" v-show="!loaded">
|
|
<div class="loading-background">
|
|
<img src="icons/logo.svg" alt="" class="loading-logo">
|
|
<div class="loading-title">Community Lobby</div>
|
|
<div class="loading-subtitle">A Open Source Private Server for PUBG 2017</div>
|
|
</div>
|
|
<!-- 此为语言切换按钮，可有可无 -->
|
|
<button class="fix-button" @click="toggleLanguageAndRefresh()">{{ langDisabled ? 'Enable' : 'Disable' }} language</button>
|
|
|
|
<p class="loading-text">
|
|
<img src="icons/loading.gif">
|
|
Initializing...</p>
|
|
</div>
|
|
</transition>
|
|
<!-- 加载屏幕结束 -->
|
|
|
|
<!-- 底部文字板块 -->
|
|
<p class="serial-text">Early Access v2.6.30.4</p>
|
|
<!-- 底部文字结束 -->
|
|
|
|
<!-- Friends Bar -->
|
|
<div class="friends-bar" @click="toggleFriendsList">
|
|
<img src="icons/Friend.png" class="friends-icon" alt="Friends">
|
|
<span class="friends-text">OG:BG Friends 3 / 4</span>
|
|
</div>
|
|
|
|
<!-- Friends List Dropdown -->
|
|
<div class="friends-list-container" :class="{'show': showFriendsList}">
|
|
<div class="friends-list-header">
|
|
<span>OG:BG Friends</span>
|
|
<button class="refresh-button">Refresh</button>
|
|
</div>
|
|
<div class="friends-list">
|
|
<div class="friend-item" v-for="friend in friendsList" :key="friend.name" @click="selectFriend(friend)" :class="{'selected': selectedFriend && selectedFriend.name === friend.name}">
|
|
<img :src="friend.avatar" class="friend-avatar" alt="Avatar">
|
|
<div class="friend-info">
|
|
<div class="friend-name">{{ friend.name }}</div>
|
|
<div class="friend-status" :class="friend.status">{{ friend.status }}</div>
|
|
</div>
|
|
<button class="invite-button" v-if="friend.status === 'online'">INVITE</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Friend Action Dropdown -->
|
|
<div class="friend-action-dropdown" v-if="selectedFriend" :class="{'show': showFriendActions}">
|
|
<button class="friend-action-button view-button" @click="viewFriendProfile">VIEW PROFILE</button>
|
|
<button class="friend-action-button invite-button" @click="inviteFriend" v-if="selectedFriend.status === 'online'">INVITE</button>
|
|
</div>
|
|
</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 bro-loading"
|
|
id="join"
|
|
:class="{'active-hover': showServerDropdown, 'bro-loading': isLoading}"
|
|
@mouseenter="showServerDropdown = true"
|
|
@mouseleave="showServerDropdown = false"
|
|
@click="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">CLICK TO PLAY</div>
|
|
<div class="tips-text hover-text">CHOOSE YOUR REGION</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="showServerDropdown = true" @mouseleave="showServerDropdown = false">
|
|
<div class="dropdown-section">
|
|
<div class="dropdown-header">REGION</div>
|
|
<button v-for="server in serverList"
|
|
v-bind:class="{'sel-server-button': true, 'active': server.name === currentServer.name}"
|
|
:id="server.name"
|
|
v-on:click="selectServer(server)">
|
|
<img class="checkmark" v-if="server.name === currentServer.name" src="icons/Tick_mark_true.png" alt="Selected">
|
|
{{ server.name }}
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-section">
|
|
<div class="dropdown-header">TEAM</div>
|
|
<button v-for="team in teamList"
|
|
v-bind:class="{'sel-server-button': true, 'active': team === currentTeam}"
|
|
:id="team"
|
|
v-on:click="selectTeam(team)">
|
|
<img class="checkmark" v-if="team === currentTeam" src="icons/Tick_mark_true.png" alt="Selected">
|
|
{{ team }}
|
|
</button>
|
|
</div>
|
|
<button class="custom-match-button" @click="joinCustomMatch">
|
|
CUSTOM MATCH
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 服务器玩家数量 -->
|
|
|
|
<!-- 右上角区域 -->
|
|
<div class="top-right-area">
|
|
<!-- 右上角控制区 -->
|
|
<div class="top-right-controls">
|
|
<!-- 顶部导航栏 -->
|
|
<div class="top-navigation">
|
|
<div class="nav-item active">HOME</div>
|
|
<div class="nav-item">CHARACTER</div>
|
|
<div class="nav-item">REWARDS</div>
|
|
<div class="nav-item">STATISTICS</div>
|
|
</div>
|
|
|
|
<!-- 系统按钮占位符 -->
|
|
<div class="system-buttons-placeholder"></div>
|
|
</div>
|
|
|
|
<!-- 玩家信息 -->
|
|
<div class="player-info">
|
|
<div class="player-name">{{ Player }}</div>
|
|
|
|
<div class="player-bp">
|
|
<img src="icons/bp.png" class="bp-icon">
|
|
<span class="bp-amount">{{ BP }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 公告区域 -->
|
|
<div class="announcement-area">
|
|
<div class="announcement-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0" stroke="#E3B62F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="12" cy="14" r="3" stroke="#E3B62F" stroke-width="2"/>
|
|
</svg>
|
|
</div>
|
|
<div class="announcement-text">
|
|
<div class="announcement-title">JOIN OUR DISCORD</div>
|
|
<div class="announcement-link" onclick="joinDiscord()">interact with the community</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第二个公告区域 -->
|
|
<div class="announcement-area">
|
|
<div class="announcement-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="#E3B62F" stroke-width="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="8" y1="2" x2="8" y2="6" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
|
<line x1="3" y1="10" x2="21" y2="10" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="announcement-text">
|
|
<div class="announcement-title">JOIN OUR TELEGRAM</div>
|
|
<div class="announcement-link" onclick="joinTelegram()">interact with the community</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- closes id="app" -->
|
|
<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>
|
|
<script src="js/coherent.js"></script>
|
|
<script src="js/coherent.mock.js"></script>
|
|
<script src="js/mock.entry.js"></script>
|
|
<script src="js/vue.js"></script>
|
|
<script src="js/socket.io.min.js"></script>
|
|
<script src="js/language.js"></script>
|
|
<script src="js/serverList.js"></script>
|
|
<script>
|
|
|
|
var player = engine.trigger('GetClientAuthData')
|
|
// console.log("Yes");
|
|
|
|
function joinDiscord() {
|
|
engine.trigger('OpenExternalBrowser', 'https://discord.gg/Q4pUgYwep5');
|
|
}
|
|
|
|
function joinTelegram() {
|
|
engine.trigger('OpenExternalBrowser', 'https://discord.gg/Q4pUgYwep5');
|
|
}
|
|
|
|
function openWebsite() {
|
|
engine.trigger('OpenExternalBrowser', 'https://ogbattlegrounds.com');
|
|
}
|
|
|
|
function createRole() {
|
|
engine.trigger('SetLobbyCamera')
|
|
engine.trigger('DestoryLobbyCharacter', 0)
|
|
engine.trigger('DestoryLobbyCharacter', 1)
|
|
engine.trigger('DestoryLobbyCharacter', 2)
|
|
engine.trigger('DestoryLobbyCharacter', 3)
|
|
engine.trigger('SetLobbyCharacterAngle',0,90)
|
|
engine.trigger('CreateLobbyCharacter', 0, false, "","Player")
|
|
engine.trigger('UpdateLobbyCharacter', 0,{
|
|
"Gender":false,
|
|
"BoolOptions":[],
|
|
"FloatOptions":[],
|
|
"StringOptions":[
|
|
{"First":"Hair","Second":"F_Hair_A_01"},
|
|
{"First":"Face","Second":"F_Face_01"},
|
|
{"First":"NudeBody","Second":"F_NudeBody_01"},
|
|
],"ItemIds":[]});
|
|
}
|
|
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
serverList: serverList,
|
|
teamList: ["SOLO", "DUO", "SQUAD"],
|
|
Player: "player",
|
|
BP: 1363,
|
|
userSerial: "userSerial",
|
|
currentServer: serverList[2],
|
|
currentTeam: "SOLO",
|
|
isDebug: false,
|
|
language: "zh-CN",
|
|
loaded: false,
|
|
langDisabled: localStorage.getItem('langDisabled') ? true : false,
|
|
showServerDropdown: false,
|
|
tickMarkEnabled: true,
|
|
isLoading: false,
|
|
showFriendsList: false,
|
|
friendsList: [
|
|
{ name: "H4TIUX", avatar: "images/avatar/h4tiux.jpg", status: "online" },
|
|
{ name: "xXMrYashXx", avatar: "images/avatar/yash.jpg", status: "online" },
|
|
{ name: "Kirito", avatar: "images/avatar/kirito.jpg", status: "offline" },
|
|
{ name: "Land", avatar: "images/avatar/land.jpg", status: "online" },
|
|
],
|
|
selectedFriend: null,
|
|
showFriendActions: false
|
|
},
|
|
methods: {
|
|
selectServer: function(server) {
|
|
app.currentServer = server;
|
|
},
|
|
selectTeam: function(team) {
|
|
app.currentTeam = team;
|
|
},
|
|
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;
|
|
},
|
|
joinCustomMatch: function() {
|
|
try {
|
|
this.isLoading = true;
|
|
// 这里可以添加自定义比赛的逻辑
|
|
console.log('Joining custom match...');
|
|
} catch (e) {
|
|
console.error('Error joining custom match:', e);
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
toggleFriendsList: function() {
|
|
this.showFriendsList = !this.showFriendsList;
|
|
// 关闭好友操作菜单
|
|
if (!this.showFriendsList) {
|
|
this.showFriendActions = false;
|
|
this.selectedFriend = null;
|
|
}
|
|
},
|
|
selectFriend: function(friend) {
|
|
if (this.selectedFriend && this.selectedFriend.name === friend.name) {
|
|
// 如果点击的是已选中的好友，切换操作菜单显示状态
|
|
this.showFriendActions = !this.showFriendActions;
|
|
} else {
|
|
// 选择新好友并显示操作菜单
|
|
this.selectedFriend = friend;
|
|
this.showFriendActions = true;
|
|
}
|
|
},
|
|
viewFriendProfile: function() {
|
|
console.log('Viewing profile of:', this.selectedFriend.name);
|
|
// 这里可以添加查看好友资料的逻辑
|
|
this.showFriendActions = false;
|
|
},
|
|
inviteFriend: function() {
|
|
console.log('Inviting:', this.selectedFriend.name);
|
|
// 这里可以添加邀请好友的逻辑
|
|
this.showFriendActions = false;
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
$().ready(function() {
|
|
app.language = localStorage.getItem('language') || navigator.language;
|
|
if (localStorage.getItem('langDisabled')) {
|
|
app.language = 'en'
|
|
}
|
|
})
|
|
|
|
window.onload = function () {
|
|
console.log("font loaded");
|
|
app.loaded = true;
|
|
createRole();
|
|
var result = engine.call('GetClientAuthData');
|
|
result.then(function (r) {
|
|
app.userSerial = r.userSerial;
|
|
app.Player = r.userSerial.toString().split('-')[0];
|
|
});
|
|
}
|
|
|
|
|
|
|
|
function toggleLanguage() {
|
|
var langDisabled = localStorage.getItem('langDisabled');
|
|
if (langDisabled) {
|
|
localStorage.removeItem('langDisabled');
|
|
} else {
|
|
localStorage.setItem('langDisabled', true);
|
|
}
|
|
}
|
|
|
|
function toggleLanguageAndRefresh() {
|
|
toggleLanguage();
|
|
location.reload();
|
|
}
|
|
</script>
|
|
</body> |