use assets from the vanilla repo

This commit is contained in:
Lee 2023-12-30 22:43:38 +00:00
parent 1663a127cc
commit 6fd5fdb7fe
6 changed files with 32 additions and 36 deletions

@ -14,7 +14,7 @@
<script defer type="module" src="../js/main.js"></script> <script defer type="module" src="../js/main.js"></script>
<title>Tracker</title> <title>Minetrack</title>
</head> </head>
@ -24,8 +24,8 @@
<div id="status-overlay"> <div id="status-overlay">
<img class="logo-image" src="../images/logo.svg"> <img class="logo-image" src="../images/logo.svg">
<h1 class="logo-text">FounderConnessi</h1> <h1 class="logo-text">Minetrack</h1>
<div id="status-text">Connessione...</div> <div id="status-text">Connecting...</div>
</div> </div>
<div id="push"> <div id="push">
@ -35,14 +35,14 @@
<header> <header>
<div class="header-possible-row-break column-left"> <div class="header-possible-row-break column-left">
<img class="logo-image" src="../images/logo.svg"> <img class="logo-image" src="../images/logo.svg">
<h1 class="logo-text">FounderConnessi</h1> <h1 class="logo-text">Minetrack</h1>
<p class="logo-status">Conta <span class="global-stat" id="stat_totalPlayers">0</span> giocatori su <span class="global-stat" id="stat_networks">0</span> server membri.</p> <p class="logo-status">Counting <span class="global-stat" id="stat_totalPlayers">0</span> players on <span class="global-stat" id="stat_networks">0</span> Minecraft servers.</p>
</div> </div>
<div class="header-possible-row-break column-right"> <div class="header-possible-row-break column-right">
<div id="sort-by" class="header-button header-button-single"><span class="icon-sort-amount-desc"></span> Ordina per<br><strong id="sort-by-text">...</strong></div> <div id="sort-by" class="header-button header-button-single"><span class="icon-sort-amount-desc"></span> Sort By<br><strong id="sort-by-text">...</strong></div>
<div id="settings-toggle" class="header-button header-button-single" style="margin-left: 20px;"><span class="icon-gears"></span> Impostazioni grafico</div> <div id="settings-toggle" class="header-button header-button-single" style="margin-left: 20px;"><span class="icon-gears"></span> Graph Controls</div>
</div> </div>
</header> </header>
@ -53,9 +53,9 @@
<div id="big-graph-checkboxes"></div> <div id="big-graph-checkboxes"></div>
<span class="graph-controls-setall"> <span class="graph-controls-setall">
<a minetrack-show-type="all" class="button graph-controls-show"><span class="icon-eye"></span> Mostra tutti</a> <a minetrack-show-type="all" class="button graph-controls-show"><span class="icon-eye"></span> Show All</a>
<a minetrack-show-type="none" class="button graph-controls-show"><span class="icon-eye-slash"></span> Nascondi tutti</a> <a minetrack-show-type="none" class="button graph-controls-show"><span class="icon-eye-slash"></span> Hide All</a>
<a minetrack-show-type="favorites" class="button graph-controls-show"><span class="icon-star"></span> Solo i preferiti</a> <a minetrack-show-type="favorites" class="button graph-controls-show"><span class="icon-star"></span> Only Favorites</a>
</span> </span>
</div> </div>
</div> </div>
@ -65,7 +65,7 @@
</div> </div>
<footer id="footer"> <footer id="footer">
<span class="icon-code"></span> Powered by open source <a href="https://github.com/FounderConnessi/Tracker">software</a> <span class="icon-code"></span> Powered by open source software - <a href="https://github.com/Cryptkeeper/Minetrack">make it your own!</a>
</footer> </footer>
</body> </body>

@ -1,12 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox="0 0 500 500" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle style="fill: rgb(85, 218, 149);" cx="250" cy="250" r="250"/>
<g><path style="opacity:0.966" fill="#363535" d="M 9.5,-0.5 C 19.5,-0.5 29.5,-0.5 39.5,-0.5C 43.8333,1.83333 47.1667,5.16667 49.5,9.5C 49.5,19.8333 49.5,30.1667 49.5,40.5C 46.8333,43.8333 43.8333,46.8333 40.5,49.5C 29.8333,49.5 19.1667,49.5 8.5,49.5C 4.76189,46.7655 1.76189,43.4321 -0.5,39.5C -0.5,29.5 -0.5,19.5 -0.5,9.5C 1.85846,5.14152 5.19179,1.80818 9.5,-0.5 Z"/></g> <path d="M 0 250 C 0 111.929 111.929 0 250 0 C 369.688 0 469.731 84.108 494.25 196.443 L 300.624 389.846 L 200.592 290.249 L 68.654 422.087 C 26.106 377.264 0 316.681 0 250 Z" style="fill: rgb(178, 255, 161);"/>
<g><path style="opacity:1" fill="#fb7466" d="M 24.5,12.5 C 39.3148,12.8174 44.8148,20.1508 41,34.5C 37.0213,41.0707 31.188,43.7374 23.5,42.5C 22.0047,42.5852 21.0047,41.9185 20.5,40.5C 22.9881,38.9307 25.4881,37.264 28,35.5C 28.8749,34.1268 29.3749,32.6268 29.5,31C 29.519,29.2082 29.1857,28.7082 28.5,29.5C 27.8333,25.8333 27.1667,22.1667 26.5,18.5C 25.8485,15.8484 24.1818,14.1818 21.5,13.5C 22.325,12.6143 23.325,12.281 24.5,12.5 Z"/></g> <path d="M 191.114 130.467 L 217.723 185.377 L 164.504 185.377 L 191.114 130.467 Z" style="fill: rgb(41, 41, 41);" transform="matrix(-1, 0.000057, -0.000057, -1, 391.12207, 407.396851)"/>
<g><path style="opacity:1" fill="#e57465" d="M 17.5,8.5 C 12.3859,9.94665 9.38594,13.28 8.5,18.5C 7.77842,18.9175 7.27842,19.5842 7,20.5C 7.60602,12.5431 11.9394,7.54307 20,5.5C 20.5,5.83333 21,6.16667 21.5,6.5C 20.0508,7.17189 18.7175,7.83855 17.5,8.5 Z"/></g> <rect x="100" y="81.861" width="200" height="147.724" style="fill: rgb(41, 41, 41);" rx="7.498" ry="7.498"/>
<g><path style="opacity:1" fill="#262829" d="M 17.5,8.5 C 19.099,8.23219 20.4324,8.56552 21.5,9.5C 24.4133,10.2411 27.4133,10.7411 30.5,11C 28.2922,11.1909 26.2922,11.6909 24.5,12.5C 23.325,12.281 22.325,12.6143 21.5,13.5C 24.1818,14.1818 25.8485,15.8484 26.5,18.5C 26.6658,23.1785 26.4992,27.8452 26,32.5C 22.6101,36.0324 18.9434,36.3658 15,33.5C 13.8263,29.9542 13.1596,26.2875 13,22.5C 10.4786,28.1448 11.6453,32.9781 16.5,37C 23.3036,38.7727 27.3036,36.2727 28.5,29.5C 29.1857,28.7082 29.519,29.2082 29.5,31C 29.3749,32.6268 28.8749,34.1268 28,35.5C 25.4881,37.264 22.9881,38.9307 20.5,40.5C 21.0047,41.9185 22.0047,42.5852 23.5,42.5C 25.9686,43.3171 28.6353,43.8171 31.5,44C 27.3829,45.1759 23.3829,45.1759 19.5,44C 16.6135,41.6274 13.7802,39.1274 11,36.5C 9.80921,31.7379 8.30921,27.0712 6.5,22.5C 7.85318,21.4763 8.51985,20.143 8.5,18.5C 9.38594,13.28 12.3859,9.94665 17.5,8.5 Z"/></g> <path d="M 185.523 118.251 L 185.523 200.341 L 163.003 200.341 L 163.003 156.881 C 163.003 151.601 163.116 146.771 163.343 142.391 C 161.956 144.078 160.233 145.838 158.173 147.671 L 148.853 155.361 L 137.343 141.211 L 165.533 118.251 L 185.523 118.251 ZM 263.346 159.401 C 263.346 173.928 260.912 184.571 256.046 191.331 C 251.179 198.084 243.729 201.461 233.696 201.461 C 223.889 201.461 216.496 197.934 211.516 190.881 C 206.536 183.821 204.046 173.328 204.046 159.401 C 204.046 144.808 206.479 134.104 211.346 127.291 C 216.212 120.478 223.662 117.071 233.696 117.071 C 243.469 117.071 250.852 120.618 255.846 127.711 C 260.846 134.804 263.346 145.368 263.346 159.401 Z M 226.116 159.401 C 226.116 168.688 226.696 175.071 227.856 178.551 C 229.016 182.038 230.962 183.781 233.696 183.781 C 236.469 183.781 238.426 181.981 239.566 178.381 C 240.706 174.788 241.276 168.461 241.276 159.401 C 241.276 150.308 240.696 143.938 239.536 140.291 C 238.376 136.638 236.429 134.811 233.696 134.811 C 230.962 134.811 229.016 136.571 227.856 140.091 C 226.696 143.611 226.116 150.048 226.116 159.401 Z" transform="matrix(1, 0, 0, 1, 0, 0)" style="fill: rgb(255, 255, 255); white-space: pre;"/>
<g><path style="opacity:1" fill="#e36d60" d="M 21.5,9.5 C 16.2406,11.2634 12.7406,14.93 11,20.5C 11.1428,13.8526 14.6428,10.1859 21.5,9.5 Z"/></g> </svg>
<g><path style="opacity:1" fill="#ed7264" d="M 17.5,15.5 C 21.4454,14.5727 24.1121,15.906 25.5,19.5C 20.1667,20.8333 20.1667,22.1667 25.5,23.5C 24.2713,24.2811 22.938,24.7811 21.5,25C 26.8333,26 26.8333,27 21.5,28C 22.7932,28.49 24.1266,28.6567 25.5,28.5C 24.2883,34.5721 21.1216,35.9055 16,32.5C 15.51,31.2068 15.3433,29.8734 15.5,28.5C 19.3107,28.4042 19.3107,27.7376 15.5,26.5C 16.376,25.7492 17.376,25.2492 18.5,25C 14.6221,24.0514 14.6221,22.8847 18.5,21.5C 17.675,20.6143 16.675,20.281 15.5,20.5C 15.3915,18.4862 16.0582,16.8195 17.5,15.5 Z"/></g>
<g><path style="opacity:1" fill="#d96d60" d="M 26.5,18.5 C 27.1667,22.1667 27.8333,25.8333 28.5,29.5C 27.3036,36.2727 23.3036,38.7727 16.5,37C 11.6453,32.9781 10.4786,28.1448 13,22.5C 13.1596,26.2875 13.8263,29.9542 15,33.5C 18.9434,36.3658 22.6101,36.0324 26,32.5C 26.4992,27.8452 26.6658,23.1785 26.5,18.5 Z"/></g>
<g><path style="opacity:1" fill="#b85c52" d="M 16.5,39.5 C 17.3864,38.2241 18.3864,38.2241 19.5,39.5C 18.5754,40.5624 17.5754,40.5624 16.5,39.5 Z"/></g>
</svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

@ -91,7 +91,7 @@ export class ServerRegistration {
if (typeof playerCount !== 'number') { if (typeof playerCount !== 'number') {
this._app.tooltip.hide() this._app.tooltip.hide()
} else { } else {
this._app.tooltip.set(pos.left, pos.top, 10, 10, `${formatNumber(playerCount)} giocatori<br>${formatTimestampSeconds(this._graphData[0][id])}`) this._app.tooltip.set(pos.left, pos.top, 10, 10, `${formatNumber(playerCount)} Players<br>${formatTimestampSeconds(this._graphData[0][id])}`)
} }
} else { } else {
this._app.tooltip.hide() this._app.tooltip.hide()
@ -229,7 +229,7 @@ export class ServerRegistration {
this._renderValue('record', (element) => { this._renderValue('record', (element) => {
if (ping.recordData.timestamp > 0) { if (ping.recordData.timestamp > 0) {
element.innerText = `${formatNumber(ping.recordData.playerCount)} (${formatDate(ping.recordData.timestamp)})` element.innerText = `${formatNumber(ping.recordData.playerCount)} (${formatDate(ping.recordData.timestamp)})`
element.title = `Il ${formatDate(ping.recordData.timestamp)} ${formatTimestampSeconds(ping.recordData.timestamp)}` element.title = `At ${formatDate(ping.recordData.timestamp)} ${formatTimestampSeconds(ping.recordData.timestamp)}`
} else { } else {
element.innerText = formatNumber(ping.recordData.playerCount) element.innerText = formatNumber(ping.recordData.playerCount)
} }
@ -255,7 +255,7 @@ export class ServerRegistration {
// If the frontend has freshly connection, and the server's last ping was in error, it may not contain an error object // If the frontend has freshly connection, and the server's last ping was in error, it may not contain an error object
// In this case playerCount will safely be null, so provide a generic error message instead // In this case playerCount will safely be null, so provide a generic error message instead
this._renderValue('error', 'Fallito il ping') this._renderValue('error', 'Failed to ping')
} else if (typeof ping.playerCount === 'number') { } else if (typeof ping.playerCount === 'number') {
this._hideValue('error') this._hideValue('error')
this._renderValue('player-count', formatNumber(ping.playerCount)) this._renderValue('player-count', formatNumber(ping.playerCount))
@ -284,8 +284,8 @@ export class ServerRegistration {
<div class="column column-status"> <div class="column column-status">
<h3 class="server-name"><span class="${this._app.favoritesManager.getIconClass(this.isFavorite)}" id="favorite-toggle_${this.serverId}"></span> ${this.data.name}</h3> <h3 class="server-name"><span class="${this._app.favoritesManager.getIconClass(this.isFavorite)}" id="favorite-toggle_${this.serverId}"></span> ${this.data.name}</h3>
<span class="server-error" id="error_${this.serverId}"></span> <span class="server-error" id="error_${this.serverId}"></span>
<span class="server-label" id="player-count_${this.serverId}">Giocatori: <span class="server-value" id="player-count-value_${this.serverId}"></span></span> <span class="server-label" id="player-count_${this.serverId}">Players: <span class="server-value" id="player-count-value_${this.serverId}"></span></span>
<span class="server-label" id="peak_${this.serverId}">Picco di ${this._app.publicConfig.graphDurationLabel}: <span class="server-value" id="peak-value_${this.serverId}">-</span></span> <span class="server-label" id="peak_${this.serverId}">${this._app.publicConfig.graphDurationLabel} Peak: <span class="server-value" id="peak-value_${this.serverId}">-</span></span>
<span class="server-label" id="record_${this.serverId}">Record: <span class="server-value" id="record-value_${this.serverId}">-</span></span> <span class="server-label" id="record_${this.serverId}">Record: <span class="server-value" id="record-value_${this.serverId}">-</span></span>
<span class="server-label" id="version_${this.serverId}"></span> <span class="server-label" id="version_${this.serverId}"></span>
</div> </div>

@ -19,7 +19,7 @@ export class SocketManager {
// The backend will automatically push data once connected // The backend will automatically push data once connected
this._webSocket.onopen = () => { this._webSocket.onopen = () => {
this._app.caption.set('Caricamento...') this._app.caption.set('Loading...')
// Reset reconnection scheduling since the WebSocket has been established // Reset reconnection scheduling since the WebSocket has been established
this._reconnectDelayBase = 0 this._reconnectDelayBase = 0
@ -33,9 +33,9 @@ export class SocketManager {
// See https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent // See https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent
// Treat other codes as active errors (besides connectivity errors) when displaying the message // Treat other codes as active errors (besides connectivity errors) when displaying the message
if (event.code === 1006) { if (event.code === 1006) {
this._app.caption.set('Connessione persa!') this._app.caption.set('Lost connection!')
} else { } else {
this._app.caption.set('Disconnesso per un errore.') this._app.caption.set('Disconnected due to error.')
} }
// Schedule socket reconnection attempt // Schedule socket reconnection attempt
@ -152,14 +152,14 @@ export class SocketManager {
clearInterval(reconnectInterval) clearInterval(reconnectInterval)
// Update displayed text // Update displayed text
this._app.caption.set('Riconnessione...') this._app.caption.set('Reconnecting...')
// Attempt reconnection // Attempt reconnection
// Only attempt when reconnectDelaySeconds === 0 and not <= 0, otherwise multiple attempts may be started // Only attempt when reconnectDelaySeconds === 0 and not <= 0, otherwise multiple attempts may be started
this.createWebSocket() this.createWebSocket()
} else if (this._reconnectDelaySeconds > 0) { } else if (this._reconnectDelaySeconds > 0) {
// Update displayed text // Update displayed text
this._app.caption.set(`Riconnessione in ${this._reconnectDelaySeconds}s...`) this._app.caption.set(`Reconnecting in ${this._reconnectDelaySeconds}s...`)
} }
}, 1000) }, 1000)
} }

@ -1,12 +1,12 @@
const SORT_OPTIONS = [ const SORT_OPTIONS = [
{ {
getName: () => 'Giocatori', getName: () => 'Players',
sortFunc: (a, b) => b.playerCount - a.playerCount, sortFunc: (a, b) => b.playerCount - a.playerCount,
highlightedValue: 'player-count' highlightedValue: 'player-count'
}, },
{ {
getName: (app) => { getName: (app) => {
return `Picco di ${app.publicConfig.graphDurationLabel}` return `${app.publicConfig.graphDurationLabel} Peak`
}, },
sortFunc: (a, b) => { sortFunc: (a, b) => {
if (!a.lastPeakData && !b.lastPeakData) { if (!a.lastPeakData && !b.lastPeakData) {

@ -107,7 +107,7 @@ export function formatTimestampSeconds (secs) {
export function formatDate (secs) { export function formatDate (secs) {
const date = new Date(0) const date = new Date(0)
date.setUTCSeconds(secs) date.setUTCSeconds(secs)
return date.toLocaleDateString('it-IT') return date.toLocaleDateString()
} }
export function formatPercent (x, over) { export function formatPercent (x, over) {