mirror of
https://github.com/PrismarineJS/prismarine-web-client.git
synced 2024-11-14 19:25:07 -05:00
Player list added (#94)
* Player list added * Using JavaScript Standard Style
This commit is contained in:
Moondarker
GitHub
parent
b39dc5b980
commit
116b78f3e7
3 changed files with 157 additions and 0 deletions
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="favicon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<player-list id="playerlist" style="display: none;"></player-list>
|
||||
<cross-hair id="crosshair" style="display: none;"></cross-hair>
|
||||
<chat-box id="chatbox" style="display: none;"></chat-box>
|
||||
<hot-bar id="hotbar" style="display: none;"></hot-bar>
|
||||
|
|
|
|||
4
index.js
4
index.js
|
|
@ -4,6 +4,7 @@ require('./lib/loading_screen')
|
|||
require('./lib/hotbar')
|
||||
require('./lib/chat')
|
||||
require('./lib/crosshair')
|
||||
require('./lib/playerlist')
|
||||
|
||||
const net = require('net')
|
||||
|
||||
|
|
@ -28,6 +29,7 @@ async function main () {
|
|||
document.getElementById('crosshair').style = 'display:block'
|
||||
document.getElementById('chatbox').style = 'display:block'
|
||||
document.getElementById('loading-background').style = 'display:block'
|
||||
document.getElementById('playerlist').style = 'display:block'
|
||||
|
||||
connect(options)
|
||||
})
|
||||
|
|
@ -37,6 +39,7 @@ async function connect (options) {
|
|||
const loadingScreen = document.getElementById('loading-background')
|
||||
const hotbar = document.getElementById('hotbar')
|
||||
const chat = document.getElementById('chatbox')
|
||||
const playerList = document.getElementById('playerlist')
|
||||
|
||||
const viewDistance = 6
|
||||
const hostprompt = options.server
|
||||
|
|
@ -121,6 +124,7 @@ async function connect (options) {
|
|||
document.body.appendChild(renderer.domElement)
|
||||
|
||||
chat.init(bot._client, renderer)
|
||||
playerList.init(bot)
|
||||
|
||||
// Create viewer
|
||||
const viewer = new Viewer(renderer)
|
||||
|
|
|
|||
152
lib/playerlist.js
Normal file
152
lib/playerlist.js
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
|
||||
class PlayerList extends LitElement {
|
||||
static get styles () {
|
||||
return css`
|
||||
.playerlist-container {
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translateX(-50%);
|
||||
border: 2px solid rgba(0, 0, 0, 0.8);
|
||||
padding: 10px;
|
||||
min-width: 8%;
|
||||
}
|
||||
|
||||
.playerlist-entry {
|
||||
overflow: hidden;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
margin: 0px;
|
||||
line-height: 100%;
|
||||
text-shadow: 2px 2px 0px #3f3f3f;
|
||||
font-family: mojangles, minecraft, monospace;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plist-active-player {
|
||||
color: rgb(42, 204, 237);
|
||||
}
|
||||
|
||||
.plist-ping-container {
|
||||
text-align: right;
|
||||
float: right;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.plist-ping-value {
|
||||
color: rgb(114, 255, 114);
|
||||
float: left;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.plist-ping-label {
|
||||
color: white;
|
||||
float: right;
|
||||
margin: 0px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<div id="playerlist-container" class="playerlist-container" style="display: none;">
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
init (bot) {
|
||||
const playerList = this.shadowRoot.querySelector('#playerlist-container')
|
||||
|
||||
Object.values(bot.players).forEach(player => {
|
||||
addPlayer(player)
|
||||
})
|
||||
|
||||
this.isOpen = false
|
||||
|
||||
const self = this
|
||||
|
||||
document.onkeydown = function (e) {
|
||||
e = e || window.event
|
||||
if (e.key === 'Tab') {
|
||||
showList(true)
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
document.onkeyup = function (e) {
|
||||
if (!self.isOpen) return
|
||||
e = e || window.event
|
||||
if (e.key === 'Tab') {
|
||||
showList(false)
|
||||
e.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
function showList (shouldShow = true) {
|
||||
if (shouldShow) {
|
||||
playerList.style.display = 'block'
|
||||
} else {
|
||||
playerList.style.display = 'none'
|
||||
}
|
||||
|
||||
self.isOpen = shouldShow
|
||||
}
|
||||
|
||||
function addPlayer (player) {
|
||||
const playerEntry = document.createElement('div') // There is likely a better way to handle this CSS-wise
|
||||
|
||||
const playerPingContainer = document.createElement('div')
|
||||
const playerPingValue = document.createElement('p')
|
||||
const playerPingLabel = document.createElement('p')
|
||||
|
||||
playerEntry.classList.add('playerlist-entry')
|
||||
playerEntry.innerHTML = player.username
|
||||
playerEntry.id = `plist-player-${player.uuid}`
|
||||
|
||||
if (player.uuid === bot.player.uuid) {
|
||||
playerEntry.classList.add('plist-active-player')
|
||||
}
|
||||
|
||||
playerPingContainer.classList.add('plist-ping-container')
|
||||
|
||||
playerPingValue.classList.add('plist-ping-value')
|
||||
playerPingValue.innerHTML = player.ping
|
||||
|
||||
playerPingLabel.classList.add('plist-ping-label')
|
||||
playerPingLabel.innerHTML = 'ms'
|
||||
|
||||
playerPingContainer.appendChild(playerPingValue)
|
||||
playerPingContainer.appendChild(playerPingLabel)
|
||||
playerEntry.appendChild(playerPingContainer)
|
||||
playerList.appendChild(playerEntry)
|
||||
|
||||
return playerEntry
|
||||
}
|
||||
|
||||
function removePlayer (player) {
|
||||
const playerEntry = playerList.querySelector(`#plist-player-${player.uuid}`)
|
||||
|
||||
if (playerEntry) {
|
||||
playerEntry.remove()
|
||||
}
|
||||
}
|
||||
|
||||
bot.on('playerUpdated', (player) => {
|
||||
let playerEntry = playerList.querySelector(`#plist-player-${player.uuid}`)
|
||||
|
||||
if (!playerEntry) {
|
||||
playerEntry = addPlayer(player)
|
||||
}
|
||||
|
||||
playerEntry.querySelector('.plist-ping-value').innerHTML = player.ping
|
||||
})
|
||||
|
||||
bot.on('playerJoined', addPlayer)
|
||||
|
||||
bot.on('playerLeft', removePlayer)
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('player-list', PlayerList)
|
||||
Loading…
Reference in a new issue