First commit
This commit is contained in:
才羽青空
commit
0a2f12846a
50 changed files with 29417 additions and 0 deletions
252
index.html
Normal file
252
index.html
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
|
||||
<!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>
|
||||
<!-- 底部文字结束 -->
|
||||
|
||||
<!-- 选择框、开始按钮板块 -->
|
||||
<div class="game-play-container-top-left">
|
||||
<div class="button-container">
|
||||
<div class="multi-layer-button"
|
||||
id="join"
|
||||
:class="{'active-hover': showServerDropdown}"
|
||||
@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)">
|
||||
<span class="checkmark" v-if="server.name === currentServer.name">✓</span>
|
||||
{{ server.name }}
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
<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, "","牛逼！")
|
||||
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,
|
||||
Player: "player",
|
||||
BP: 1363,
|
||||
userSerial: "userSerial",
|
||||
currentServer: serverList[0],
|
||||
currentTeam: "SOLO",
|
||||
isDebug: false,
|
||||
language: "zh-CN",
|
||||
loaded: false,
|
||||
langDisabled: localStorage.getItem('langDisabled') ? true : false,
|
||||
showServerDropdown: false,
|
||||
},
|
||||
methods: {
|
||||
selectServer: function(server) {
|
||||
app.currentServer = server;
|
||||
},
|
||||
|
||||
joinServer: function() {
|
||||
try {
|
||||
$(".button-text").text('Joining...');
|
||||
engine.trigger('JoinToDedicatedServer', app.currentServer.ip);
|
||||
} catch (e) {
|
||||
$(".button-text").text(e);
|
||||
}
|
||||
},
|
||||
toggleLanguageAndRefresh: toggleLanguageAndRefresh,
|
||||
l: l,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$().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>
|
||||
</div> <!-- closes id="app" -->
|
||||
</body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue