694 lines
No EOL
36 KiB
HTML
694 lines
No EOL
36 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">
|
||
<div 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>
|
||
<!-- 底部文字结束 -->
|
||
|
||
<!-- Tab Content Area -->
|
||
<div v-if="activeTab === 'home'">
|
||
<!-- 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, 'matching-state': isMatching}"
|
||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||
@click="!isMatching && 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">{{ playText }}</div>
|
||
<div class="tips-text-container">
|
||
<div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
|
||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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>
|
||
|
||
<div v-if="activeTab === 'character'" class="tab-content">
|
||
<!-- 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, 'matching-state': isMatching}"
|
||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||
@click="!isMatching && 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">{{ playText }}</div>
|
||
<div class="tips-text-container">
|
||
<div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
|
||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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="character-tab">
|
||
<h2>Character Management</h2>
|
||
<p>Character settings and customization options would go here.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeTab === 'rewards'" class="tab-content">
|
||
<!-- 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, 'matching-state': isMatching}"
|
||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||
@click="!isMatching && 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">{{ playText }}</div>
|
||
<div class="tips-text-container">
|
||
<div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
|
||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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="rewards-tab">
|
||
<h2>Rewards & Achievements</h2>
|
||
<p>Your rewards and achievements would be displayed here.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="activeTab === 'statistics'" class="tab-content">
|
||
<!-- 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, 'matching-state': isMatching}"
|
||
@mouseenter="!isMatching && (showServerDropdown = true)"
|
||
@mouseleave="!isMatching && (showServerDropdown = false)"
|
||
@click="!isMatching && 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">{{ playText }}</div>
|
||
<div class="tips-text-container">
|
||
<div class="tips-text default-text" :class="{'matching-highlight': isMatching}">{{ battlegroundsText }}</div>
|
||
<div class="tips-text hover-text">CLICK TO PLAY</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="join-server-container" id="server-dropdown" :class="{'show': showServerDropdown}" @mouseenter="!isMatching && (showServerDropdown = true)" @mouseleave="!isMatching && (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="statistics-tab">
|
||
<h2>Statistics</h2>
|
||
<p>Your game statistics would be displayed here.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 服务器玩家数量 -->
|
||
|
||
<!-- 右上角区域 -->
|
||
<div class="top-right-area">
|
||
<!-- 右上角控制区 -->
|
||
<div class="top-right-controls">
|
||
<!-- 顶部导航栏 -->
|
||
<div class="top-navigation">
|
||
<div class="nav-item" :class="{ 'active': activeTab === 'home' }" @click="changeTab('home')">HOME</div>
|
||
<div class="nav-item" :class="{ 'active': activeTab === 'character' }" @click="changeTab('character')">CHARACTER</div>
|
||
<div class="nav-item" :class="{ 'active': activeTab === 'rewards' }" @click="changeTab('rewards')">REWARDS</div>
|
||
<div class="nav-item" :class="{ 'active': activeTab === 'statistics' }" @click="changeTab('statistics')">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">
|
||
<circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
|
||
<line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="12" cy="17" r="1" fill="#E3B62F"/>
|
||
</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">
|
||
<circle cx="12" cy="12" r="10" stroke="#E3B62F" stroke-width="2"/>
|
||
<line x1="12" y1="8" x2="12" y2="14" stroke="#E3B62F" stroke-width="2" stroke-linecap="round"/>
|
||
<circle cx="12" cy="17" r="1" fill="#E3B62F"/>
|
||
</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" -->
|
||
</div> <!-- closes main -->
|
||
<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,
|
||
activeTab: 'home',
|
||
playText: 'PLAY',
|
||
battlegroundsText: 'BATTLEGROUNDS',
|
||
isMatching: false
|
||
},
|
||
methods: {
|
||
selectServer: function(server) {
|
||
app.currentServer = server;
|
||
},
|
||
selectTeam: function(team) {
|
||
app.currentTeam = team;
|
||
},
|
||
joinServer: function() {
|
||
if (this.isMatching) {
|
||
return; // 如果已经在匹配中，不重复执行
|
||
}
|
||
|
||
try {
|
||
this.isMatching = true;
|
||
this.isLoading = true;
|
||
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) {
|
||
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() {
|
||
this.tickMarkEnabled = !this.tickMarkEnabled;
|
||
},
|
||
changeTab: function(tabName) {
|
||
this.activeTab = tabName;
|
||
},
|
||
joinCustomMatch: function() {
|
||
try {
|
||
this.isLoading = true;
|
||
// 打开自定义比赛链接
|
||
engine.trigger('OpenExternalBrowser', 'https://ogbattlegrounds.com');
|
||
} catch (e) {
|
||
console.error('Error opening custom match link:', 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> |