Fascinated/Minetrack
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

prettyify code

Browse Source
This commit is contained in:
Lee
2023-12-30 23:03:54 +00:00
parent 6fd5fdb7fe
commit ea15b979d5
28 changed files with 2179 additions and 1688 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
assets/js/percbar.js
View File

@ -1,75 +1,99 @@
import { formatNumber, formatPercent } from './util'
import { formatNumber, formatPercent } from "./util";
export class PercentageBar {
constructor (app) {
this._app = app
this._parent = document.getElementById('perc-bar')
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 serverRegistrations = this._app.serverRegistry
.getServerRegistrations()
.sort(function (a, b) {
return a.playerCount - b.playerCount;
});
const totalPlayers = this._app.getTotalPlayerCount()
const totalPlayers = this._app.getTotalPlayerCount();
let leftPadding = 0
let leftPadding = 0;
for (const serverRegistration of serverRegistrations) {
const width = Math.round((serverRegistration.playerCount / totalPlayers) * this._parent.offsetWidth)
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 div =
document.getElementById(
`perc-bar-part_${serverRegistration.serverId}`
) || this.createPart(serverRegistration);
const widthPixels = `${width}px`
const leftPaddingPixels = `${leftPadding}px`
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
if (
div.style.width !== widthPixels ||
div.style.left !== leftPaddingPixels
) {
div.style.width = widthPixels;
div.style.left = leftPaddingPixels;
}
leftPadding += width
leftPadding += width;
}
}
};
createPart (serverRegistration) {
const div = document.createElement('div')
createPart(serverRegistration) {
const div = document.createElement("div");
div.id = `perc-bar-part_${serverRegistration.serverId}`
div.style.background = serverRegistration.data.color
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)
div.setAttribute("class", "perc-bar-part");
div.setAttribute("minetrack-server-id", serverRegistration.serverId);
this._parent.appendChild(div)
this._parent.appendChild(div);
// Define events once during creation
div.addEventListener('mouseover', this.handleMouseOver, false)
div.addEventListener('mouseout', this.handleMouseOut, false)
div.addEventListener("mouseover", this.handleMouseOver, false);
div.addEventListener("mouseout", this.handleMouseOut, false);
return div
return div;
}
handleMouseOver = (event) => {
const serverId = parseInt(event.target.getAttribute('minetrack-server-id'))
const serverRegistration = this._app.serverRegistry.getServerRegistration(serverId)
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} ` : ''}
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>`)
}
<strong>${formatPercent(
serverRegistration.playerCount,
this._app.getTotalPlayerCount()
)}</strong>`
);
};
handleMouseOut = () => {
this._app.tooltip.hide()
}
this._app.tooltip.hide();
};
reset () {
reset() {
// Reset modified DOM elements
this._parent.innerHTML = ''
this._parent.innerHTML = "";
}
}