100 lines
2.7 KiB
JavaScript
100 lines
2.7 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 = "";
|
|
}
|
|
}
|