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">
|
<link rel="favicon" href="favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<player-list id="playerlist" style="display: none;"></player-list>
|
||||||
<cross-hair id="crosshair" style="display: none;"></cross-hair>
|
<cross-hair id="crosshair" style="display: none;"></cross-hair>
|
||||||
<chat-box id="chatbox" style="display: none;"></chat-box>
|
<chat-box id="chatbox" style="display: none;"></chat-box>
|
||||||
<hot-bar id="hotbar" style="display: none;"></hot-bar>
|
<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/hotbar')
|
||||||
require('./lib/chat')
|
require('./lib/chat')
|
||||||
require('./lib/crosshair')
|
require('./lib/crosshair')
|
||||||
|
require('./lib/playerlist')
|
||||||
|
|
||||||
const net = require('net')
|
const net = require('net')
|
||||||
|
|
||||||
|
|
@ -28,6 +29,7 @@ async function main () {
|
||||||
document.getElementById('crosshair').style = 'display:block'
|
document.getElementById('crosshair').style = 'display:block'
|
||||||
document.getElementById('chatbox').style = 'display:block'
|
document.getElementById('chatbox').style = 'display:block'
|
||||||
document.getElementById('loading-background').style = 'display:block'
|
document.getElementById('loading-background').style = 'display:block'
|
||||||
|
document.getElementById('playerlist').style = 'display:block'
|
||||||
|
|
||||||
connect(options)
|
connect(options)
|
||||||
})
|
})
|
||||||
|
|
@ -37,6 +39,7 @@ async function connect (options) {
|
||||||
const loadingScreen = document.getElementById('loading-background')
|
const loadingScreen = document.getElementById('loading-background')
|
||||||
const hotbar = document.getElementById('hotbar')
|
const hotbar = document.getElementById('hotbar')
|
||||||
const chat = document.getElementById('chatbox')
|
const chat = document.getElementById('chatbox')
|
||||||
|
const playerList = document.getElementById('playerlist')
|
||||||
|
|
||||||
const viewDistance = 6
|
const viewDistance = 6
|
||||||
const hostprompt = options.server
|
const hostprompt = options.server
|
||||||
|
|
@ -121,6 +124,7 @@ async function connect (options) {
|
||||||
document.body.appendChild(renderer.domElement)
|
document.body.appendChild(renderer.domElement)
|
||||||
|
|
||||||
chat.init(bot._client, renderer)
|
chat.init(bot._client, renderer)
|
||||||
|
playerList.init(bot)
|
||||||
|
|
||||||
// Create viewer
|
// Create viewer
|
||||||
const viewer = new Viewer(renderer)
|
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