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);

      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 = "";
  }
}