76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
import { formatNumber, formatPercent } from './util'
|
|
|
|
export class PercentageBar {
|
|
constructor (app) {
|
|
this._app = app
|
|
this._parent = document.getElementById('perc-bar')
|
|
}
|
|
|
|
redraw = () => {
|
|
const serverRegistrations = this._app.serverRegistry.getServerRegistrations().sort(function (a, b) {
|
|
return a.playerCount - b.playerCount
|
|
})
|
|
|
|
const totalPlayers = this._app.getTotalPlayerCount()
|
|
|
|
let leftPadding = 0
|
|
|
|
for (const serverRegistration of serverRegistrations) {
|
|
const width = Math.round((serverRegistration.playerCount / totalPlayers) * this._parent.offsetWidth)
|
|
|
|
// Update position/width
|
|
// leftPadding is a sum of previous iterations width value
|
|
const div = document.getElementById(`perc-bar-part_${serverRegistration.serverId}`) || this.createPart(serverRegistration)
|
|
|
|
const widthPixels = `${width}px`
|
|
const leftPaddingPixels = `${leftPadding}px`
|
|
|
|
// Only redraw if needed
|
|
if (div.style.width !== widthPixels || div.style.left !== leftPaddingPixels) {
|
|
div.style.width = widthPixels
|
|
div.style.left = leftPaddingPixels
|
|
}
|
|
|
|
leftPadding += width
|
|
}
|
|
}
|
|
|
|
createPart (serverRegistration) {
|
|
const div = document.createElement('div')
|
|
|
|
div.id = `perc-bar-part_${serverRegistration.serverId}`
|
|
div.style.background = serverRegistration.data.color
|
|
|
|
div.setAttribute('class', 'perc-bar-part')
|
|
div.setAttribute('minetrack-server-id', serverRegistration.serverId)
|
|
|
|
this._parent.appendChild(div)
|
|
|
|
// Define events once during creation
|
|
div.addEventListener('mouseover', this.handleMouseOver, false)
|
|
div.addEventListener('mouseout', this.handleMouseOut, false)
|
|
|
|
return div
|
|
}
|
|
|
|
handleMouseOver = (event) => {
|
|
const serverId = parseInt(event.target.getAttribute('minetrack-server-id'))
|
|
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverId)
|
|
|
|
this._app.tooltip.set(event.target.offsetLeft, event.target.offsetTop, 10, this._parent.offsetTop + this._parent.offsetHeight + 10,
|
|
`${typeof serverRegistration.rankIndex !== 'undefined' ? `#${serverRegistration.rankIndex + 1} ` : ''}
|
|
${serverRegistration.data.name}<br>
|
|
${formatNumber(serverRegistration.playerCount)} Players<br>
|
|
<strong>${formatPercent(serverRegistration.playerCount, this._app.getTotalPlayerCount())}</strong>`)
|
|
}
|
|
|
|
handleMouseOut = () => {
|
|
this._app.tooltip.hide()
|
|
}
|
|
|
|
reset () {
|
|
// Reset modified DOM elements
|
|
this._parent.innerHTML = ''
|
|
}
|
|
}
|