Minetrack/assets/js/percbar.js

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)

      // Only redraw if needed
      if (div.style.width !== width + 'px' || div.style.left !== leftPadding + 'px') {
        div.style.width = width + 'px'
        div.style.left = leftPadding + 'px'
      }

      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 = ''
  }
}